adds CSF 3.0 docs on auto title feature

docs/configure/sidebar-and-urls.md

@@ -2,11 +2,11 @@
 title: 'Sidebar & URLS'
 ---
 
-Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
+Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file, and Storybook will group the stories into groups based on common prefixes:
 
 ![Storybook sidebar anatomy](./sidebar-anatomy.jpg)
 
-We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js` name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
+We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js`, name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
 
 ## Roots
 
@@ -26,49 +26,7 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can
 
 <!-- prettier-ignore-end -->
 
-## Automatically generate titles
-
-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-auto-title.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-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
+## Permalink to stories
 
 By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../sharing/publish-storybook.md) your Storybook).
 
@@ -86,7 +44,7 @@ Consider the following story:
 
 Storybook's ID-generation logic will give this the `id` `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`.
 
-It is possible to manually set the id of a story, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
+It is possible to manually set the story's id, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
 
 <!-- prettier-ignore-start -->
 
@@ -98,4 +56,70 @@ It is possible to manually set the id of a story, which is helpful if you want t
 
 <!-- prettier-ignore-end -->
 
-Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
+Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
+
+## CSF 3.0 auto-titles
+
+Storybook 6.4 introduced CSF 3.0 as an experimental feature, allowing you to write stories more compactly. Suppose you're already using this format to write your stories. In that case, you can omit the `title` element from the default export and allow Storybook automatically infer it based on the file's physical location. For example, given the following configuration and story:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-configuration-src-dir.main-js.js.mdx',
+    'common/component-story-auto-title.csf3-story.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads, the story can show up in the sidebar as `components/My Component`. While accurate for most cases, it could lead to naming issues when loaded. Documented below are some improvements that were recently introduced.
+
+### Auto-title filename case
+
+Starting with Storybook 6.5, story titles generated automatically no longer rely on Lodash's [startCase](https://lodash.com/docs/#startCase).
+Instead, the file name casing is preserved, allowing additional control over the story title. For example, `components/My Component` will be defined as `components/MyComponent`.
+
+If you need, you can revert to the previous pattern by adding the following configuration:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-manager-render-label-stories.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### Auto-title redundant filenames
+
+In addition to improvements to the story file name casing, a new heuristic was introduced, removing the filename if it matches an existing directory name or an `index.stories.js|ts` file. For example, `components/MyComponent/MyComponent.stories.js` is defined as `MyComponent/MyComponent` in the sidebar.
+
+If you need to preserve the naming scheme, you can add the `title` element to the default export. For example:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-csf-3-auto-title-redundant.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### Auto-title prefixes
+
+Additionally, if you customize your Storybook to load your stories based on a [configuration object](./overview.md#with-a-configuration-object), including a `titlePrefix`, Storybook automatically prefixes all titles to matching stories. For example, assuming you have the following configuration:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-auto-title-custom.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook generates the titles for all matching stories, they'll retain the `Custom` prefix.

docs/snippets/common/component-story-auto-title.js.mdx

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

docs/snippets/common/component-story-configuration.js.mdx

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

docs/snippets/common/omponent-story-auto-title.csf3-story.js.mdx

@@ -0,0 +1,16 @@
+```js
+// src/components/MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+/**
+ * Story written in CSF 3.0 with auto title generation
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn more about it.
+ */
+export default { component: MyComponent };
+
+export const Default = {
+  args: { something: 'Something else' },
+};
+```

docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx

@@ -0,0 +1,17 @@
+```js
+// components/MyComponent/MyComponent.stories.js|jsx|ts|tsx
+
+import { MyComponent } from './MyComponent.js'
+
+export default {
+  component: MyComponent,
+  title: 'components/MyComponent/MyComponent',
+};
+
+export const Default = {
+  args: {
+    something: 'Something else',
+  },
+};
+
+```

docs/snippets/common/storybook-main-auto-title-custom.js.mdx

@@ -0,0 +1,15 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+  stories: [{ directory: '../src', titlePrefix: 'Custom' }],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  core: {
+    builder: 'webpack5',
+  },
+};
+```

docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx

@@ -0,0 +1,15 @@
+```js
+// ./storybook/main.js
+
+module.exports = {
+  stories: ['../src'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  core: {
+    builder: 'webpack5'
+  },
+};
+```

docs/snippets/common/storybook-manager-render-label-stories.js.mdx

@@ -0,0 +1,13 @@
+```js
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+
+import startCase from 'lodash/startCase';
+
+addons.setConfig({
+  sidebar: {
+    renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+  },
+});
+```