histoire-dev / histoire-dev/histoire

Custom tree filePadding

Open
#498 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.