histoire-dev / histoire-dev/histoire

Override auto props controls

Open
#458 2 comments 3 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

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

![Screenshot 2023-02-20 at 4 03 46 PM](https://user-images.githubusercontent.com/26047842/220215392-ec2fec3c-0ec2-4df7-8cc8-961c4aa7a22e.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.