histoire-dev / histoire-dev/histoire
Automatically open first variant when switching active story
- 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
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