docs(storybook): reorganize story hierarchy by component category

.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: {

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'],

src/badge/badge.stories.jsx

@@ -96,7 +96,7 @@ function DarkModeTemplate() {
 }
 
 export default {
-    title: 'Design system/Badge',
+    title: '📊 Data display/Badge',
     component: Badge,
 
     parameters: {

src/banner/banner.stories.jsx

@@ -383,7 +383,7 @@ function DarkModeTemplate() {
 }
 
 export default {
-    title: 'Design system/Banner',
+    title: '💬 Feedback/Banner',
     component: Banner,
 
     parameters: {

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'],

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: {

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: {

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: {

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: {

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'],

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'],

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
 

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'),

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: {

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: {

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'],

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',

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: {

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: {

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'],

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: {

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(),

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: {

src/tabs/tabs.stories.jsx

@@ -46,7 +46,7 @@ const Template = ({
 )
 
 export default {
-    title: 'Design system/Tabs',
+    title: '📑 Menus & tabs/Tabs',
     component: Tabs,
 
     parameters: {

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: {

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: {

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: {

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'],

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',

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'],
     },

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'],

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'],

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

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'],
     },

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'],

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'],