From ac26ff233490ee22ef9f0a207db9d36ace23a18a Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Fri, 12 Jun 2026 13:42:54 -0700
Subject: [PATCH] docs(storybook): reorganize story hierarchy by component
 category

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) <noreply@anthropic.com>
---
 .storybook/preview.ts                           | 16 +++++++++++++++-
 src/avatar/avatar.stories.tsx                   |  2 +-
 src/badge/badge.stories.jsx                     |  2 +-
 src/banner/banner.stories.jsx                   |  2 +-
 src/box/box.stories.tsx                         |  2 +-
 src/button/button.stories.jsx                   |  2 +-
 src/button/icon-button.stories.jsx              |  2 +-
 src/checkbox-field/checkbox-field.stories.jsx   |  2 +-
 src/columns/columns.stories.tsx                 |  2 +-
 src/heading/heading.stories.tsx                 |  2 +-
 src/hidden/hidden.stories.tsx                   |  2 +-
 src/hooks/use-previous/use-previous.mdx         |  2 +-
 src/inline/inline.stories.tsx                   |  2 +-
 src/loading/loading.stories.jsx                 |  2 +-
 src/menu/menu.stories.jsx                       |  2 +-
 src/modal/modal-docs.mdx                        |  2 +-
 src/modal/modal-examples.stories.tsx            |  2 +-
 src/notice/notice.stories.jsx                   |  2 +-
 src/password-field/password-field.stories.jsx   |  2 +-
 src/prose/prose.stories.tsx                     |  2 +-
 src/select-field/select-field.stories.jsx       |  2 +-
 src/stack/stack.stories.tsx                     |  2 +-
 src/switch-field/switch-field.stories.jsx       |  2 +-
 src/tabs/tabs.stories.jsx                       |  2 +-
 src/text-area/text-area.stories.jsx             |  2 +-
 src/text-field/text-field.stories.jsx           |  2 +-
 src/text-link/text-link.stories.jsx             |  2 +-
 src/text/text.stories.tsx                       |  2 +-
 src/toast/toast.stories.tsx                     |  2 +-
 src/tooltip/tooltip.stories.tsx                 |  2 +-
 stories/components/ColorPicker.stories.tsx      |  2 +-
 stories/components/Input.stories.tsx            |  2 +-
 stories/components/KeyCapturer.stories.tsx      |  2 +-
 stories/components/KeyboardShortcut.stories.tsx |  2 +-
 stories/components/ProgressBar.stories.tsx      |  2 +-
 stories/components/Time.stories.tsx             |  2 +-
 36 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index ef721f8f..1b1e662c 100644
--- 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
index 720595d1..534ba12a 100644
--- 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
index 374916de..02bbfff4 100644
--- 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
index 323d227f..988c8dac 100644
--- 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
index 7bfc4607..6f77f672 100644
--- 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
index 9af5067b..0ec3fd9a 100644
--- 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
index eb811f9d..b5306c38 100644
--- 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
index 86ea5c53..c88c7caa 100644
--- 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
index 6a1c0687..49b28ea0 100644
--- 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
index c59828f6..58363448 100644
--- 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
index 6f683320..631bf2c0 100644
--- 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
index c37c8f60..08c356de 100644
--- 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
index 70deb19c..13e95033 100644
--- 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
index 2199f8e5..73b10cb5 100644
--- 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
index f682c9cc..4c9a655d 100644
--- 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
index f45a2a25..24c106f9 100644
--- 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
index 821d08f4..0136d847 100644
--- 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
index f28183c5..6e4751be 100644
--- 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
index f242d268..b586c9cb 100644
--- 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
index 6093adf3..89e63011 100644
--- 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
index 549f681b..33cff7e5 100644
--- 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
index 4a5cf017..e03f1481 100644
--- 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
index 33e6c550..1fa64501 100644
--- 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
index 9ae671c2..38451941 100644
--- 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
index 25a7918a..e64dccb0 100644
--- 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
index 62ec39dc..af5f747f 100644
--- 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
index 068e7680..9d5b2131 100644
--- 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
index d301d410..be318bc6 100644
--- 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
index 36c07c57..14f4b586 100644
--- 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
index 37dc9fd5..12637afc 100644
--- 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
index 944c6381..97a45dfa 100644
--- 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
index 542dc483..76556bf7 100644
--- 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
index 27636ae7..9b25b540 100644
--- 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
index ef8ea781..0367983b 100644
--- 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
index 9dfd7113..427a90af 100644
--- 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
index fb25b463..ea1be66e 100644
--- 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'],