histoire-dev / histoire-dev/histoire
Override auto props controls
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Clear and concise description of the problem
I want to be able to change the controls that get generated by histoire on the auto-props control generation. Right now they are fixed, so you have to create custom controls.
For example: I want to be able to create a custom control that replaces the `HstText` that's auto generated for `color` with a `HstSelect`.
Right now my current best option is to recreate all props as custom controls within the `control template`, and disable auto-props with `auto-props-disabled`. This obviously removes the benefit of the auto generated prop controls.
### Suggested solution
It would be super cool if we could just override the auto generated prop controls without needing to recreate all of them individually in manually typed out controls, just to override 1 control option.
### Alternative
Curious if the initial state is even necessary? If you could just override the auto generated controls with custom controls you could easily set the initial state through there.
I think you could take the best of the initial state controls and combine them with the auto prop generated controls, leading for a more uniform workflow.
Might be missing some key feature/usage of initial state though
### Additional context

In this example there is overlap with both control sections having a control over the label/title. In this its clearly desirable for there only to be 1 control over the title, no need to confuse the user between initial state and override.
It would be a lot neater to combine into 1 section with
`Label`, `Text`, `modelValue` - Label having override the auto generated `title`. This way you could change `Label` to be any kind of control that you want
### 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 Histoire's auto-props control generation and the control template path, then compare them with the initial state controls described in the issue. Determine how an individual generated control could be overridden without recreating every prop, and define completion around preserving automatic controls while allowing a custom replacement such as HstSelect for a generated HstText.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100