GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 01:21:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17638 from LucaCras/17596-document-csf3.0-auto-title

Browse Source 
Update the documentation with info on auto generating titles
This commit is contained in:
jonniebigodes 2022-03-14 19:40:58 +00:00 committed by GitHub
commit a0f1dc18ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/configure/sidebar-and-urls.md
View File

@ -26,21 +26,47 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can
<!-- prettier-ignore-end -->
## Generating titles based on `__dirname`
## Automatically generate titles
As a CSF file is a JavaScript file, all exports (including the default export) can be generated dynamically. In particular you can use the `__dirname` variable to create the title based on the path name (this example uses the paths.macro):
With CSF 3.0 files, you can choose to leave out a title and let it be inferred from the story's path on disk instead:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/component-story-dynamic-title.js.mdx',
'common/component-story-auto-title.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
If you need, you can also generate automatic titles for all your stories using a configuration object. See the [story loading](./overview.md#with-a-configuration-object) documentation to learn how you can use this feature.
This is controlled by the way your stories are configured:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/component-story-configuration.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
Given this configuration, the stories file `../src/components/MyComponent.stories.tsx` will get the title `components/MyComponent`.
You can further customize the generated title by modifying the stories configuration.
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/component-story-configuration-custom.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
This configuration would match a custom file pattern, and add a custom prefix of Foo to each generated title.
## Permalinking to stories

4
docs/snippets/common/component-story-auto-title.js.mdx Normal file
View File

@ -0,0 +1,4 @@
```js
// CSF 3.0 - MyComponent.stories.js|jsx|ts|tsx
export default { component: MyComponent }
```

8
docs/snippets/common/component-story-configuration-custom.js.mdx Normal file
View File

@ -0,0 +1,8 @@
```js
// ./storybook/main.js
module.exports = {
stories: [
{ directory: '../src', files: '*.story.tsx', titlePrefix: 'Foo' }
]
};
```

6
docs/snippets/common/component-story-configuration.js.mdx Normal file
View File

@ -0,0 +1,6 @@
```js
// ./storybook/main.js
module.exports = {
stories: ['../src']
};
```

9
docs/snippets/common/component-story-dynamic-title.js.mdx
View File

@ -1,9 +0,0 @@
```js
// MyComponent.stories.js|jsx|ts|tsx
import base from 'paths.macro';
export default {
title: `${base}/Component`
}
```