[C-3344] Organize and sort stories (#6648)

AudiusProject · Nov 10, 2023 · 4ef98f1 · 4ef98f1
1 parent 2c3b849
commit 4ef98f1
Show file tree

Hide file tree

Showing 21 changed files with 69 additions and 75 deletions.
diff --git a/packages/harmony/.storybook/preview-body.html b/packages/harmony/.storybook/preview-body.html
@@ -22,6 +22,11 @@
     margin: 0
   }
 
+  .sbdocs-preview {
+    margin: 0;
+    margin-top: 0 !important;
+  }
+
   #storybook-docs :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
     color: var(--harmony-docs-text);
     font-size: 32px;

diff --git a/packages/harmony/.storybook/preview.ts b/packages/harmony/.storybook/preview.ts
@@ -13,6 +13,31 @@ import { ThemeProvider } from '@emotion/react'
 
 // Default to docs view
 export const parameters = {
+  options: {
+    storySort: {
+      order: [
+        'Welcome',
+        'Foundations',
+        ['Typography', 'Color', 'Shadow', 'Corner Radius', 'Spacing', 'Motion'],
+        'Buttons',
+        'Inputs',
+        ['TextInput', 'SelectablePill', 'PasswordInput'],
+        'Layout',
+        ['Box', 'Flex', 'Divider', 'Paper'],
+        'Text',
+        'Components',
+        'Icons',
+        [
+          'Figma Instructions',
+          'Utility Icons',
+          'Logos',
+          'Special Icons',
+          'Animated Icons',
+          'Changelog'
+        ]
+      ]
+    }
+  },
   viewMode: 'docs',
   docs: {
     container: HarmonyDocsContainer,

diff --git a/packages/harmony/src/components/Components.stories.mdx b/packages/harmony/src/components/Components.stories.mdx
@@ -2,7 +2,7 @@ import { Meta, Title } from '@storybook/blocks'
 
 import { RelatedComponents, Subtitle } from 'storybook/components'
 
-<Meta title='Components/Welcome' />
+<Meta title='Components' />
 
 <Title>Components</Title>
 

diff --git a/packages/harmony/src/components/avatar/Avatar.mdx b/packages/harmony/src/components/avatar/Avatar.mdx
@@ -4,8 +4,7 @@ import {
   Title,
   Description,
   Primary,
-  Controls,
-  Story
+  Controls
 } from '@storybook/blocks'
 
 import { Flex } from 'components/layout/Flex'
@@ -45,15 +44,11 @@ _Note: Avatar also accepts layout props from [Flex](?path=/docs/components-layou
 
 ### Default
 
-<Canvas>
-  <Story of={AvatarStories.Default} />
-</Canvas>
+<Canvas of={AvatarStories.Default} />
 
 ### Strong
 
-<Canvas>
-  <Story of={AvatarStories.Strong} />
-</Canvas>
+<Canvas of={AvatarStories.Strong} />
 
 ## Use cases and examples
 

diff --git a/packages/harmony/src/components/button/Button/Button.mdx b/packages/harmony/src/components/button/Button/Button.mdx
@@ -4,8 +4,7 @@ import {
   Title,
   Description,
   Primary,
-  Controls,
-  Story
+  Controls
 } from '@storybook/blocks'
 
 import IconCamera from 'assets/icons/Camera.svg'
@@ -48,39 +47,27 @@ import * as ButtonStories from './Button.stories'
 
 ### Variants
 
-<Canvas>
-  <Story of={ButtonStories.Variants} />
-</Canvas>
+<Canvas of={ButtonStories.Variants} />
 
 ### Sizes
 
-<Canvas>
-  <Story of={ButtonStories.Sizes} />
-</Canvas>
+<Canvas of={ButtonStories.Sizes} />
 
 ### States
 
-<Canvas>
-  <Story of={ButtonStories.States} />
-</Canvas>
+<Canvas of={ButtonStories.States} />
 
 ### Disabled
 
-<Canvas>
-  <Story of={ButtonStories.Disabled} />
-</Canvas>
+<Canvas of={ButtonStories.Disabled} />
 
 ### Icons
 
-<Canvas>
-  <Story of={ButtonStories.Icons} />
-</Canvas>
+<Canvas of={ButtonStories.Icons} />
 
 ### Loading state
 
-<Canvas>
-  <Story of={ButtonStories.LoadingState} />
-</Canvas>
+<Canvas of={ButtonStories.LoadingState} />
 
 <Heading>
 ### Color Prop Applied
@@ -89,9 +76,7 @@ Generate the colors for primary button states using colored overlays rather than
 
 </Heading>
 
-<Canvas>
-  <Story of={ButtonStories.ColorPropApplied} />
-</Canvas>
+<Canvas of={ButtonStories.ColorPropApplied} />
 
 <Heading>
 ### Link
@@ -100,9 +85,7 @@ A link that looks like a button. Useful for buttons that trigger navigation
 
 </Heading>
 
-<Canvas>
-  <Story of={ButtonStories.Link} />
-</Canvas>
+<Canvas of={ButtonStories.Link} />
 
 ## Use cases and examples
 

diff --git a/packages/harmony/src/components/button/Button/Button.stories.tsx b/packages/harmony/src/components/button/Button/Button.stories.tsx
@@ -11,7 +11,7 @@ import { ButtonProps, ButtonSize, ButtonType } from '../types'
 import { Button } from './Button'
 
 const meta: Meta<typeof Button> = {
-  title: 'Components/Buttons/Button',
+  title: 'Buttons/Button',
   component: Button
 }
 

diff --git a/packages/harmony/src/components/button/PlainButton/PlainButton.stories.tsx b/packages/harmony/src/components/button/PlainButton/PlainButton.stories.tsx
@@ -18,7 +18,7 @@ type StoryArgs = {
 }
 
 const meta: Meta<StoryArgs> = {
-  title: 'Components/Buttons/PlainButton [beta]',
+  title: 'Buttons/PlainButton [beta]',
   component: ({ props }) => <PlainButton {...baseProps} {...props} />,
   render: ({ dark, props }) => (
     <div

diff --git a/packages/harmony/src/components/button/SocialButton/SocialButton.stories.tsx b/packages/harmony/src/components/button/SocialButton/SocialButton.stories.tsx
@@ -5,7 +5,7 @@ import { Flex } from 'components/layout'
 import { SocialButton } from './SocialButton'
 
 const meta: Meta<typeof SocialButton> = {
-  title: 'Components/Buttons/SocialButton',
+  title: 'Buttons/SocialButton',
   component: SocialButton,
   parameters: {
     docs: {

diff --git a/packages/harmony/src/components/input/PasswordInput/PasswordInput.stories.tsx b/packages/harmony/src/components/input/PasswordInput/PasswordInput.stories.tsx
@@ -19,7 +19,7 @@ const StoryRender = (props: PasswordInputProps) => {
 }
 
 const meta: Meta<typeof PasswordInput> = {
-  title: 'Components/Input/TextInput/PasswordInput',
+  title: 'Inputs/PasswordInput',
   component: PasswordInput,
   parameters: {
     docs: {

diff --git a/packages/harmony/src/components/input/SelectablePill/SelectablePill.stories.tsx b/packages/harmony/src/components/input/SelectablePill/SelectablePill.stories.tsx
@@ -6,7 +6,7 @@ import { IconHeart } from 'icons'
 import { SelectablePill } from './SelectablePill'
 
 const meta: Meta<typeof SelectablePill> = {
-  title: 'Components/Input/SelectablePill',
+  title: 'Inputs/SelectablePill',
   component: SelectablePill,
   args: {
     label: 'Label'

diff --git a/packages/harmony/src/components/input/TextInput/TextInput.stories.tsx b/packages/harmony/src/components/input/TextInput/TextInput.stories.tsx
@@ -21,7 +21,7 @@ const StoryRender = (props: TextInputProps) => {
 }
 
 const meta: Meta<typeof TextInput> = {
-  title: 'Components/Input/TextInput',
+  title: 'Inputs/TextInput',
   component: TextInput,
   parameters: {
     docs: {

diff --git a/packages/harmony/src/components/layout/Box/Box.stories.tsx b/packages/harmony/src/components/layout/Box/Box.stories.tsx
@@ -14,7 +14,7 @@ const spacingArgs = {
 }
 
 const meta: Meta<typeof Box> = {
-  title: 'Components/Layout/Box',
+  title: 'Layout/Box',
   component: Box,
   parameters: {
     controls: { exclude: /^(theme|as)$/ }

diff --git a/packages/harmony/src/components/layout/Divider/Divider.mdx b/packages/harmony/src/components/layout/Divider/Divider.mdx
@@ -1,7 +1,6 @@
 import {
   Canvas,
   Meta,
-  Story,
   Title,
   Description,
   Controls,
@@ -36,15 +35,11 @@ import * as DividerStories from './Divider.stories'
 
 ### Horizontal
 
-<Canvas>
-  <Story of={DividerStories.Horizontal} />
-</Canvas>
+<Canvas of={DividerStories.Horizontal} />
 
 ### Vertical
 
-<Canvas>
-  <Story of={DividerStories.Vertical} />
-</Canvas>
+<Canvas of={DividerStories.Vertical} />
 
 ## Use cases and examples
 

diff --git a/packages/harmony/src/components/layout/Divider/Divider.stories.tsx b/packages/harmony/src/components/layout/Divider/Divider.stories.tsx
@@ -6,7 +6,7 @@ import { Flex } from '../Flex'
 import { Divider } from './Divider'
 
 const meta: Meta<typeof Divider> = {
-  title: 'Components/Layout/Divider',
+  title: 'Layout/Divider',
   component: Divider,
   render: () => (
     <Flex border='strong' borderRadius='m' p='l' gap='m'>

diff --git a/packages/harmony/src/components/layout/Flex/Flex.mdx b/packages/harmony/src/components/layout/Flex/Flex.mdx
@@ -4,8 +4,7 @@ import {
   Title,
   Description,
   Primary,
-  Controls,
-  Story
+  Controls
 } from '@storybook/blocks'
 
 import { Heading, RelatedComponents } from 'storybook/components'
@@ -45,29 +44,21 @@ _Note: Flex also accepts all layout props from [Box](?path=/docs/components-layo
 
 ### Row
 
-<Canvas>
-  <Story of={FlexStories.Default} />
-</Canvas>
+<Canvas of={FlexStories.Default} />
 
 ### Column
 
-<Canvas>
-  <Story of={FlexStories.Column} />
-</Canvas>
+<Canvas of={FlexStories.Column} />
 
 ## Spacing
 
 ### Centered
 
-<Canvas>
-  <Story of={FlexStories.Centered} />
-</Canvas>
+<Canvas of={FlexStories.Centered} />
 
 ### Spaced Evenly
 
-<Canvas>
-  <Story of={FlexStories.SpacedEvenly} />
-</Canvas>
+<Canvas of={FlexStories.SpacedEvenly} />
 
 ## Related components
 

diff --git a/packages/harmony/src/components/layout/Flex/Flex.stories.tsx b/packages/harmony/src/components/layout/Flex/Flex.stories.tsx
@@ -6,7 +6,7 @@ import { Box } from '../Box'
 import { Flex } from './Flex'
 
 const meta: Meta<typeof Flex> = {
-  title: 'Components/Layout/Flex',
+  title: 'Layout/Flex',
   component: Flex,
   parameters: {
     controls: { include: /^(alignItems|direction|gap|justifyContent|wrap)$/ }

diff --git a/packages/harmony/src/components/layout/Paper/Paper.stories.tsx b/packages/harmony/src/components/layout/Paper/Paper.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Paper } from './Paper'
 
 const meta: Meta<typeof Paper> = {
-  title: 'Components/Layout/Paper',
+  title: 'Layout/Paper',
   component: Paper,
   parameters: {
     controls: {

diff --git a/packages/harmony/src/components/text/Text/Text.stories.tsx b/packages/harmony/src/components/text/Text/Text.stories.tsx
@@ -10,7 +10,7 @@ const messages = {
 }
 
 const meta: Meta<typeof Text> = {
-  title: 'Components/Typography/Text',
+  title: 'Text/Text',
   component: Text,
   argTypes: {
     variant: {

diff --git a/packages/harmony/src/foundations/Foundations.stories.mdx b/packages/harmony/src/foundations/Foundations.stories.mdx
@@ -2,7 +2,7 @@ import { Meta, Title } from '@storybook/blocks'
 
 import { RelatedFoundations, Subtitle } from 'storybook/components'
 
-<Meta title='Foundations/Welcome' />
+<Meta title='Foundations' />
 
 <Title>Foundations</Title>
 

diff --git a/...harmony/src/icons/IconDetails.stories.mdx → ...y/src/icons/FigmaInstructions.stories.mdx b/...harmony/src/icons/IconDetails.stories.mdx → ...y/src/icons/FigmaInstructions.stories.mdx
@@ -8,9 +8,9 @@ import exportIconLayer from 'storybook/assets/exportIconLayer.png'
 import verifyIconSettings from 'storybook/assets/verifyIconSettings.png'
 import { Heading } from 'storybook/components'
 
-<Meta title='Icons/Details' />
+<Meta title='Icons/Figma Instructions' />
 
-<Title>Details</Title>
+<Title>Figma Instructions</Title>
 
 <Heading>
 ### Overview

diff --git a/packages/harmony/src/storybook/components/RelatedComponents.tsx b/packages/harmony/src/storybook/components/RelatedComponents.tsx
@@ -34,22 +34,22 @@ const relatedComponentsMap = {
         _isFocused
       />
     ),
-    link: 'input-textinput--documentation'
+    link: 'inputs-textinput--documentation'
   },
   SelectablePill: {
     title: 'Selectable Pill',
     description: 'Used for binary selections',
     component: (
       <SelectablePill label='SelectablePill' size='large' isSelected={false} />
     ),
-    link: 'input-selectablepill--documentation'
+    link: 'inputs-selectablepill--documentation'
   },
   PlainButton: {
     title: 'Plain Button',
     description:
       'The plain button is like our button component but without a bounding frame or container.',
     component: <PlainButton iconRight={IconCaretRight}>See More</PlainButton>,
-    link: 'buttons-plainbutton--documentation'
+    link: 'buttons-plainbutton-beta--documentation'
   },
   SocialButton: {
     component: <SocialButton socialType='instagram' aria-label='instagram' />,
@@ -87,7 +87,7 @@ const relatedComponentsMap = {
         <Avatar src={shadowBackground} />
       </Box>
     ),
-    link: 'avatar--documentation'
+    link: 'components-avatar--documentation'
   },
   Paper: {
     title: 'Paper',
@@ -164,7 +164,7 @@ export const RelatedComponents = (props: RelatedComponentsProps) => {
       {componentNames.map((componentName) => {
         const { component, link, description } =
           relatedComponentsMap[componentName]
-        const fullLink = `../?path=/docs/components-${link}`
+        const fullLink = `../?path=/docs/${link}`
         return (
           <InformationBox
             key={componentName}