histoire-dev / histoire-dev/histoire
Custom tree filePadding
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Clear and concise description of the problem
Instead of fixed 12px filePadding
```
//StoryListitem.vue
const filePadding = computed(() => {
return (props.depth * 12) + 'px'
})
```
it would be nice to have configuration seting
```
//histoire.config.ts
export default defineConfig({
plugins: [HstVue()],
tree: {
padding: 15
},
});
```
### Suggested solution
Add tree.padding (tree.indent) to histoire.config.ts and use it in StoryListitem
### 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 with StoryListitem.vue and the existing histoire.config.ts configuration shape. Trace how tree settings are read by the story tree, then add the requested padding setting and verify that file indentation follows the configured value instead of the fixed 12px calculation. Done means the setting can be specified in histoire.config.ts and affects the tree consistently.
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
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 62/100