Add wildcard example to the docs

storybookjs · Apr 9, 2021 · b8ed01f · b8ed01f
1 parent 35521f5
commit b8ed01f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/preview.js
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'],
+    },
+  },
+};
+```
diff --git a/docs/writing-stories/naming-components-and-hierarchy.md b/docs/writing-stories/naming-components-and-hierarchy.md
@@ -129,4 +129,18 @@ Which would result in this story ordering:
 7. `Components` and `Components/*` stories
 8. All other stories
 
+If you want certain categories to sort to the end of the list, you can insert a `*` into your `order` array to indicate where "all other stories" should go:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+In this example, the `WIP` category would be displayed at the end of the list.
+
 Note that the `order` option is independent of the `method` option; stories are sorted first by the `order` array and then by either the `method: 'alphabetical'` or the default `configure()` import order.