histoire-dev / histoire-dev/histoire

Automatically open first variant when switching active story

Open
#852 0 comments 0 reactions 0 assignees View on GitHub
enhancement: to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Clear and concise description of the problem

Right now, when switching stories, it loads the list of variants (in list mode) but the rendering panel stays blank.

I would love that the first variant automatically loads. I would save users one click to see a first result of their stories.

Example: Story `MyButton`, Variants: `Sizes`, `States`, `Interactive`.
Instead of doing 🖱️ click on `MyButton` then 🖱️ `Sizes`, it would just be click on 🖱️ `MyButton` and it loads the `Sizes` variants directly.

I already have a PR prepared if this feature is approved :)

### Suggested solution

I suggest to add a new configuration `autoOpenFirstVariant` on histoire config file to enable this feature.
I would personally enable it by default, but we can disable it by default so the behavior stays the same between version.

Then, when it's active, just set as active the first variant when the active story changes.

### Alternative

_No response_

### Additional context

_No response_

### Validations

- [x] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [x] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [x] Read the [docs](https://histoire.dev/guide/).
- [x] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that requests the same feature to avoid creating a duplicate.

Contributor guide

Open the contributing guide

Research direction

Start by tracing the active-story and variant-selection flow in list mode, then inspect how Histoire configuration is loaded. Confirm how the first variant is identified and whether the new option should default on or off. Done means switching to a story selects and renders its first variant when enabled, while preserving current behavior when disabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.