docs(storybook): reorganize story hierarchy by component category (#1064)

frankieyan · claude · web-flow · commit cd34d2fb22d5 · 2026-06-15T20:38:31.000-07:00
Regroup every story title under the nine type-based categories from the
Reactist component inventory, replacing the inconsistent Design system /
Components split so the sidebar matches the inventory we're standardizing on.

Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -22,7 +22,21 @@ const preview: Preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
-                order: ['Reactist', 'Design tokens', 'Design system', 'Hooks', 'Components'],
+                order: [
+                    'Reactist',
+                    'Design tokens',
+                    '🔘 Buttons & links',
+                    '📊 Data display',
+                    '💬 Feedback',
+                    '📝 Form',
+                    '📐 Layout',
+                    '📑 Menus & tabs',
+                    '🪟 Overlays',
+                    '🔤 Typography',
+                    '⚙️ Utility',
+                    '🪝 Hooks',
+                    'Tips and tricks',
+                ],
             },
         },
         chromatic: {
diff --git a/src/avatar/avatar.stories.tsx b/src/avatar/avatar.stories.tsx
@@ -183,7 +183,7 @@ type PlaygroundArgs = Omit<AvatarProps, 'image'> & {
 }
 
 const meta = {
-    title: 'Components/Avatar',
+    title: '📊 Data display/Avatar',
     component: Avatar,
     parameters: {
         badges: ['accessible'],
diff --git a/src/badge/badge.stories.jsx b/src/badge/badge.stories.jsx
@@ -96,7 +96,7 @@ function DarkModeTemplate() {
 }
 
 export default {
-    title: 'Design system/Badge',
+    title: '📊 Data display/Badge',
     component: Badge,
 
     parameters: {
diff --git a/src/banner/banner.stories.jsx b/src/banner/banner.stories.jsx
@@ -383,7 +383,7 @@ function DarkModeTemplate() {
 }
 
 export default {
-    title: 'Design system/Banner',
+    title: '💬 Feedback/Banner',
     component: Banner,
 
     parameters: {
diff --git a/src/box/box.stories.tsx b/src/box/box.stories.tsx
@@ -32,7 +32,7 @@ import type {
 import type { BoxBorderRadius } from './box'
 
 export default {
-    title: 'Design system/Box',
+    title: '📐 Layout/Box',
     component: Box,
     parameters: {
         badges: ['accessible'],
diff --git a/src/button/button.stories.jsx b/src/button/button.stories.jsx
@@ -183,7 +183,7 @@ function DarkModeTemplate(props) {
 }
 
 export default {
-    title: 'Design system/Button',
+    title: '🔘 Buttons & links/Button',
     component: Button,
 
     parameters: {
diff --git a/src/button/icon-button.stories.jsx b/src/button/icon-button.stories.jsx
@@ -101,7 +101,7 @@ function DarkModeTemplate(props) {
 }
 
 export default {
-    title: 'Design system/IconButton',
+    title: '🔘 Buttons & links/IconButton',
     component: IconButton,
 
     parameters: {
diff --git a/src/checkbox-field/checkbox-field.stories.jsx b/src/checkbox-field/checkbox-field.stories.jsx
@@ -29,7 +29,7 @@ const Template = ({
 }) => <CheckboxField disabled={disabled} indeterminate={indeterminate} label={label} icon={icon} />
 
 export default {
-    title: 'Design system/CheckboxField',
+    title: '📝 Form/CheckboxField',
     component: CheckboxField,
 
     parameters: {
diff --git a/src/columns/columns.stories.tsx b/src/columns/columns.stories.tsx
@@ -23,7 +23,7 @@ import type {
 } from './columns'
 
 export default {
-    title: 'Design system/Columns',
+    title: '📐 Layout/Columns',
     component: Columns,
     subcomponents: { Column },
     argTypes: {
diff --git a/src/heading/heading.stories.tsx b/src/heading/heading.stories.tsx
@@ -6,7 +6,7 @@ import { ResponsiveWidthRef, select, selectWithNone } from '../utils/storybook-h
 import { Heading } from './heading'
 
 export default {
-    title: 'Design system/Heading',
+    title: '🔤 Typography/Heading',
     component: Heading,
     parameters: {
         badges: ['accessible'],
diff --git a/src/hidden/hidden.stories.tsx b/src/hidden/hidden.stories.tsx
@@ -6,7 +6,7 @@ import { Placeholder, ResponsiveWidthRef } from '../utils/storybook-helper'
 import { Hidden } from './hidden'
 
 export default {
-    title: 'Design system/Hidden',
+    title: '📐 Layout/Hidden',
     component: Hidden,
     parameters: {
         badges: ['accessible'],
diff --git a/src/hooks/use-previous/use-previous.mdx b/src/hooks/use-previous/use-previous.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks'
 import { usePrevious } from './use-previous'
 
-<Meta title="Hooks/usePrevious" component={usePrevious} />
+<Meta title="🪝 Hooks/usePrevious" component={usePrevious} />
 
 # usePrevious
 
diff --git a/src/inline/inline.stories.tsx b/src/inline/inline.stories.tsx
@@ -18,7 +18,7 @@ import type { PartialProps } from '../utils/storybook-helper'
 import type { InlineAlign } from './inline'
 
 export default {
-    title: 'Design system/Inline',
+    title: '📐 Layout/Inline',
     component: Inline,
     argTypes: {
         space: selectSize('medium'),
diff --git a/src/loading/loading.stories.jsx b/src/loading/loading.stories.jsx
@@ -16,7 +16,7 @@ function Example({ children, size }) {
 }
 
 export default {
-    title: 'Design system/Loading',
+    title: '💬 Feedback/Loading',
     component: Loading,
 
     parameters: {
diff --git a/src/menu/menu.stories.jsx b/src/menu/menu.stories.jsx
@@ -59,7 +59,7 @@ function StructuredMenuItem({ icon, label, shortcut }) {
 }
 
 export default {
-    title: 'Design system/Menu',
+    title: '📑 Menus & tabs/Menu',
     component: Menu,
 
     parameters: {
diff --git a/src/modal/modal-docs.mdx b/src/modal/modal-docs.mdx
@@ -2,7 +2,7 @@ import { Meta, ArgTypes, Description } from '@storybook/addon-docs/blocks'
 import { Modal, ModalHeader, ModalBody, ModalFooter, ModalActions, ModalCloseButton } from './modal'
 
 <Meta
-    title="Design system/Modal/Docs"
+    title="🪟 Overlays/Modal/Docs"
     component={Modal}
     parameters={{
         badges: ['accessible'],
diff --git a/src/modal/modal-examples.stories.tsx b/src/modal/modal-examples.stories.tsx
@@ -30,7 +30,7 @@ import {
 } from './modal-stories-components'
 
 export default {
-    title: 'Design system/Modal/Examples',
+    title: '🪟 Overlays/Modal/Examples',
     component: ModalComponents.Modal,
     parameters: {
         viewMode: 'story',
diff --git a/src/notice/notice.stories.jsx b/src/notice/notice.stories.jsx
@@ -28,7 +28,7 @@ function Template({ tone, content, closeLabel }) {
 }
 
 export default {
-    title: 'Design system/Notice',
+    title: '💬 Feedback/Notice',
     component: Notice,
 
     parameters: {
diff --git a/src/password-field/password-field.stories.jsx b/src/password-field/password-field.stories.jsx
@@ -41,7 +41,7 @@ function InteractivePropsStory({ label, auxiliaryLabel, endSlot = false, ...prop
 }
 
 export default {
-    title: 'Design system/PasswordField',
+    title: '📝 Form/PasswordField',
     component: PasswordField,
 
     parameters: {
diff --git a/src/prose/prose.stories.tsx b/src/prose/prose.stories.tsx
@@ -8,7 +8,7 @@ import { proseExample, proseTableColorsExample, proseTableOverflowExample } from
 import type { ProseProps } from './prose'
 
 export default {
-    title: 'Design system/Prose',
+    title: '🔤 Typography/Prose',
     component: Prose,
     parameters: {
         badges: ['accessible'],
diff --git a/src/select-field/select-field.stories.jsx b/src/select-field/select-field.stories.jsx
@@ -40,7 +40,7 @@ function InteractivePropsStory({ label, auxiliaryLabel, ...props }) {
 }
 
 export default {
-    title: 'Design system/SelectField',
+    title: '📝 Form/SelectField',
     component: SelectField,
 
     parameters: {
diff --git a/src/stack/stack.stories.tsx b/src/stack/stack.stories.tsx
@@ -19,7 +19,7 @@ import type { DividerWeight } from '../divider'
 import type { PartialProps } from '../utils/storybook-helper'
 
 export default {
-    title: 'Design system/Stack',
+    title: '📐 Layout/Stack',
     component: Stack,
     argTypes: {
         space: selectSize(),
diff --git a/src/switch-field/switch-field.stories.jsx b/src/switch-field/switch-field.stories.jsx
@@ -10,7 +10,7 @@ function Template({ label, message, disabled }) {
 }
 
 export default {
-    title: 'Design system/SwitchField',
+    title: '📝 Form/SwitchField',
     component: SwitchField,
 
     parameters: {
diff --git a/src/tabs/tabs.stories.jsx b/src/tabs/tabs.stories.jsx
@@ -46,7 +46,7 @@ const Template = ({
 )
 
 export default {
-    title: 'Design system/Tabs',
+    title: '📑 Menus & tabs/Tabs',
     component: Tabs,
 
     parameters: {
diff --git a/src/text-area/text-area.stories.jsx b/src/text-area/text-area.stories.jsx
@@ -82,7 +82,7 @@ function AutoExpandWithInitialValueStory(props) {
 }
 
 export default {
-    title: 'Design system/TextArea',
+    title: '📝 Form/TextArea',
     component: TextArea,
 
     parameters: {
diff --git a/src/text-field/text-field.stories.jsx b/src/text-field/text-field.stories.jsx
@@ -185,7 +185,7 @@ function WithCharacterCountPositionHiddenExample() {
 }
 
 export default {
-    title: 'Design system/TextField',
+    title: '📝 Form/TextField',
     component: TextField,
 
     parameters: {
diff --git a/src/text-link/text-link.stories.jsx b/src/text-link/text-link.stories.jsx
@@ -5,7 +5,7 @@ import { Stack } from '../stack'
 import { TextLink } from './text-link'
 
 export default {
-    title: 'Design system/TextLink',
+    title: '🔘 Buttons & links/TextLink',
     component: TextLink,
 
     parameters: {
diff --git a/src/text/text.stories.tsx b/src/text/text.stories.tsx
@@ -6,7 +6,7 @@ import { ResponsiveWidthRef, select, selectWithNone } from '../utils/storybook-h
 import { Text } from './text'
 
 export default {
-    title: 'Design system/Text',
+    title: '🔤 Typography/Text',
     component: Text,
     parameters: {
         badges: ['accessible'],
diff --git a/src/toast/toast.stories.tsx b/src/toast/toast.stories.tsx
@@ -22,7 +22,7 @@ import type { ButtonVariant } from '../button'
 import type { StaticToastProps } from './static-toast'
 
 export default {
-    title: 'Design system/Toast',
+    title: '💬 Feedback/Toast',
     parameters: {
         badges: ['accessible'],
         layout: 'fullscreen',
diff --git a/src/tooltip/tooltip.stories.tsx b/src/tooltip/tooltip.stories.tsx
@@ -17,7 +17,7 @@ import type { TooltipProps } from './tooltip'
 //
 
 export default {
-    title: 'Design system/Tooltip',
+    title: '🪟 Overlays/Tooltip',
     parameters: {
         badges: ['accessible'],
     },
diff --git a/stories/components/ColorPicker.stories.tsx b/stories/components/ColorPicker.stories.tsx
@@ -5,7 +5,7 @@ import ColorPicker from '../../src/components/color-picker'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/ColorPicker',
+    title: '📊 Data display/ColorPicker',
     component: ColorPicker,
     parameters: {
         badges: ['notAccessible'],
diff --git a/stories/components/Input.stories.tsx b/stories/components/Input.stories.tsx
@@ -8,7 +8,7 @@ import Input from '../../src/components/deprecated-input'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/Input',
+    title: '📝 Form/Input',
     component: Input,
     parameters: {
         badges: ['deprecated'],
diff --git a/stories/components/KeyCapturer.stories.tsx b/stories/components/KeyCapturer.stories.tsx
@@ -8,7 +8,7 @@ import { Stack } from '../../src/stack'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta: Meta<typeof KeyCapturer> = {
-    title: 'Components/KeyCapturer',
+    title: '⚙️ Utility/KeyCapturer',
     component: KeyCapturer,
 }
 export default meta
diff --git a/stories/components/KeyboardShortcut.stories.tsx b/stories/components/KeyboardShortcut.stories.tsx
@@ -7,7 +7,7 @@ import KeyboardShortcut from '../../src/components/keyboard-shortcut'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/KeyboardShortcut',
+    title: '📊 Data display/KeyboardShortcut',
     parameters: {
         badges: ['accessible'],
     },
diff --git a/stories/components/ProgressBar.stories.tsx b/stories/components/ProgressBar.stories.tsx
@@ -7,7 +7,7 @@ import ProgressBar from '../../src/components/progress-bar'
 
 // Story setup ================================================================
 export default {
-    title: 'Components/ProgressBar',
+    title: '💬 Feedback/ProgressBar',
     component: ProgressBar,
     parameters: {
         badges: ['accessible'],
diff --git a/stories/components/Time.stories.tsx b/stories/components/Time.stories.tsx
@@ -9,7 +9,7 @@ import Time from '../../src/components/time'
 // Story setup ================================================================
 
 export default {
-    title: 'Components/Time',
+    title: '📊 Data display/Time',
     component: Time,
     parameters: {
         badges: ['accessible'],

Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@ type PlaygroundArgs = Omit<AvatarProps, 'image'> & {`
`183`	`183`	`}`
`184`	`184`
`185`	`185`	`const meta = {`
`186`		`- title: 'Components/Avatar',`
	`186`	`+ title: '📊 Data display/Avatar',`
`187`	`187`	`component: Avatar,`
`188`	`188`	`parameters: {`
`189`	`189`	`badges: ['accessible'],`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ function DarkModeTemplate() {`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`export default {`
`99`		`- title: 'Design system/Badge',`
	`99`	`+ title: '📊 Data display/Badge',`
`100`	`100`	`component: Badge,`
`101`	`101`
`102`	`102`	`parameters: {`
Original file line number	Diff line number	Diff line change
`@@ -383,7 +383,7 @@ function DarkModeTemplate() {`
`383`	`383`	`}`
`384`	`384`
`385`	`385`	`export default {`
`386`		`- title: 'Design system/Banner',`
	`386`	`+ title: '💬 Feedback/Banner',`
`387`	`387`	`component: Banner,`
`388`	`388`
`389`	`389`	`parameters: {`
Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@ function DarkModeTemplate(props) {`
`183`	`183`	`}`
`184`	`184`
`185`	`185`	`export default {`
`186`		`- title: 'Design system/Button',`
	`186`	`+ title: '🔘 Buttons & links/Button',`
`187`	`187`	`component: Button,`
`188`	`188`
`189`	`189`	`parameters: {`
Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ function DarkModeTemplate(props) {`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`export default {`
`104`		`- title: 'Design system/IconButton',`
	`104`	`+ title: '🔘 Buttons & links/IconButton',`
`105`	`105`	`component: IconButton,`
`106`	`106`
`107`	`107`	`parameters: {`