update storybook structure

Author: robphoenix

package.json

@@ -23,6 +23,7 @@
   "scripts": {
     "setup": "corepack enable && corepack prepare [email protected] --activate",
     "build": "turbo run build",
+    "dev": "turbo run dev",
     "build:storybook": "turbo run --no-cache build:storybook",
     "generate": "turbo run generate && turbo run format",
     "preinstall": "npx only-allow pnpm",
@@ -31,7 +32,7 @@
     "lint": "turbo run lint --filter='./packages/*'",
     "lint:fix": "turbo run lint:fix --filter='./packages/*'",
     "clean": "pnpm -r --stream clean && rm -rf node_modules",
-    "dev": "turbo run dev --no-cache --parallel --continue --filter='./packages/*'",
+    "dev:web": "pnpm run build --filter \"@utilitywarehouse/css-reset\" && pnpm run dev --filter \"@utilitywarehouse/web-ui\"",
     "changeset": "changeset",
     "ci:version": "changeset version && pnpm install --no-frozen-lockfile",
     "ci:publish": "NODE_OPTIONS=\"--max_old_space_size=4096\" pnpm run build && changeset publish",

packages/design-tokens/build/native/dark/tokens-dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Nov 21 2024 19:55:00 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Nov 25 2024 16:04:12 GMT+0000 (Greenwich Mean Time)
  */
 
 export const tokens = {

packages/design-tokens/build/native/default/tokens-default.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Nov 21 2024 19:55:00 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Nov 25 2024 16:04:12 GMT+0000 (Greenwich Mean Time)
  */
 
 export const tokens = {

packages/design-tokens/build/native/light/tokens-light.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Nov 21 2024 19:55:00 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Nov 25 2024 16:04:12 GMT+0000 (Greenwich Mean Time)
  */
 
 export const tokens = {

packages/web-ui/.storybook/preview.js

@@ -1,12 +1,14 @@
-import '@utilitywarehouse/fontsource';
-import '@utilitywarehouse/css-reset';
-import { breakpoints, Box } from '../src';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { colorsCommon } from '@utilitywarehouse/colour-system';
 import { SyntaxHighlighter } from '@storybook/components';
-import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
 import { Analytics } from '@vercel/analytics/react';
 
+import { colorsCommon } from '@utilitywarehouse/colour-system';
+import '@utilitywarehouse/css-reset';
+import '@utilitywarehouse/fontsource';
+
+import { breakpoints, Box } from '../src';
+import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
+
 SyntaxHighlighter.registerLanguage('diff', diff);
 
 const customerUiViewports = {
@@ -47,7 +49,7 @@ const preview = {
       storySort: {
         order: [
           'Web UI',
-          ['Introduction', 'Guides', 'Helpers', 'Layout', 'Typography', 'Components', 'Lab'],
+          ['Introduction', 'Guides', 'Documentation', 'Design Guidelines', 'Stories'],
           'CSS Reset',
           'Colour System',
           ['Introduction', 'Common', 'Colors'],

packages/web-ui/docs/web-ui/helpers/media-queries.mdx

@@ -6,14 +6,16 @@ import { mediaQueries } from '../../../src/utils';
 
 <Analytics />
 
-<Meta title="Web UI / Helpers / Media Queries" />
+<Meta title="Web UI / Documentation / Media Queries" />
+
+# Media Queries
 
 - [Base media queries](#base-media-queries)
-- [Media query helpers](#media-query-helpers)
+- [Media queries helpers](#media-queries-helpers)
 - [useMediaQueries hook](#usemediaqueries-hook)
 - [useMediaQuery hook](#usemediaquery-hook)
 
-# Media Queries
+## Base media queries
 
 While you should be able to do most things using the responsive style props, if
 you need to you can use the `mediaQueries` object to help create responsive
@@ -36,8 +38,6 @@ import { mediaQueries } from '@utilitywarehouse/web-ui';
 </Box>
 ```
 
-## Base media queries
-
 <Flex direction="column" gap={1} width={500}>
   <Flex justify="space-between" align="center">
     <Text variant="body" component="span">
@@ -76,7 +76,7 @@ import { mediaQueries } from '@utilitywarehouse/web-ui';
   </Flex>
 </Flex>
 
-## Media query helpers
+## Media queries helpers
 
 There are also some media query helper functions available for more specific media queries. These helpers all take only the breakpoint values as arguments (`mobile`, `tablet`, `desktop`, `wide`).
 

packages/web-ui/docs/web-ui/helpers/tokens.mdx

@@ -1,13 +1,16 @@
 import { Meta } from '@storybook/blocks';
-import { breakpoints, fonts, fontWeights } from '../../../src/tokens';
-import { Text, Flex, Divider } from '../../../src';
 import { Analytics } from '@vercel/analytics/react';
 
+import { Text, Flex, Divider } from '../../../src';
+import { breakpoints, fonts, fontWeights } from '../../../src/tokens';
+
 <Analytics />
 
-<Meta title="Web UI / Helpers / Tokens" />
+<Meta title="Web UI / Documentation / Tokens" />
+
+# Tokens
 
-# Breakpoints (px)
+## Breakpoints (px)
 
 <Flex direction="column" gap={1} width={400}>
   {Object.keys(breakpoints).map((bp, i) => (
@@ -25,7 +28,7 @@ import { Analytics } from '@vercel/analytics/react';
   ))}
 </Flex>
 
-# Font families
+## Font families
 
 <Flex direction="column" gap={1} width={400}>
   {Object.keys(fonts).map((font, i) => (
@@ -43,7 +46,7 @@ import { Analytics } from '@vercel/analytics/react';
   ))}
 </Flex>
 
-# Font weights
+## Font weights
 
 <Flex direction="column" gap={1} width={400}>
   <Flex justify="space-between" align="center">

packages/web-ui/src/components/Alert/Alert.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Alert.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Alert" />
 
 <DocsHeader
   componentName="Alert"

packages/web-ui/src/components/Alert/Alert.stories.tsx

@@ -10,7 +10,7 @@ import { Flex } from '../Flex';
 const colorSchemes = ['cyan', 'red', 'green', 'gold'] as const;
 
 const meta: Meta<typeof Alert> = {
-  title: 'Web UI / Components / Alert',
+  title: 'Web UI / Stories / Alert',
   component: Alert,
   argTypes: {
     children: { control: { type: 'text' } },

packages/web-ui/src/components/Badge/Badge.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Badge.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Badge" />
 
 <DocsHeader
   componentName="Badge"

packages/web-ui/src/components/Badge/Badge.stories.tsx

@@ -16,7 +16,7 @@ const variants = ['soft', 'strong', 'outline'] as const;
 const colorSchemes = ['cyan', 'green', 'red', 'gold', 'grey'] as const;
 
 const meta: Meta<typeof Badge> = {
-  title: 'Web UI / Components / Badge',
+  title: 'Web UI / Stories / Badge',
   component: Badge,
   argTypes: {
     children: { control: { type: 'text' } },

packages/web-ui/src/components/Box/Box.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Box.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Box" />
 
 <DocsHeader componentName="Box" stories={Stories} />
 

packages/web-ui/src/components/Box/Box.stories.tsx

@@ -13,7 +13,7 @@ import { Text } from '../Text';
 import { fonts } from '../../tokens';
 
 const meta: Meta<typeof Box> = {
-  title: 'Web UI / Layout / Box',
+  title: 'Web UI / Stories / Box',
   component: Box,
 };
 

packages/web-ui/src/components/Button/Button.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Button.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Button" />
 
 <DocsHeader
   componentName="Button"

packages/web-ui/src/components/Button/Button.guidelines.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/blocks';
+
+import { Heading } from '../Heading';
+
+<Meta title="Web UI / Design Guidelines / Button" />
+
+<Heading variant="h1">Button Design Guidelines</Heading>

packages/web-ui/src/components/Button/Button.stories.tsx

@@ -18,7 +18,7 @@ const solidColorSchemes = ['cyan', 'red', 'green'] as const;
 const colorSchemes = [...solidColorSchemes, 'grey', 'gold'] as const;
 
 const meta: Meta<typeof Button> = {
-  title: 'Web UI / Components / Button',
+  title: 'Web UI / Stories / Button',
   component: Button,
   argTypes: {
     children: { control: { type: 'text' } },

packages/web-ui/src/components/Checkbox/Checkbox.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Checkbox.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Checkbox" />
 
 <DocsHeader
   componentName="Checkbox"

packages/web-ui/src/components/Checkbox/Checkbox.stories.tsx

@@ -8,7 +8,7 @@ import { Flex } from '../Flex';
 import { Text } from '../Text';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Web UI / Components / Checkbox / Checkbox',
+  title: 'Web UI / Stories / Checkbox',
   component: Checkbox,
   argTypes: {
     helperText: { control: { type: 'text' } },

packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './CheckboxGridGroup.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / CheckboxGridGroup" />
 
 <DocsHeader
   componentName="CheckboxGridGroup"

packages/web-ui/src/components/CheckboxGridGroup/CheckboxGridGroup.stories.tsx

@@ -10,7 +10,7 @@ import { Flex } from '../Flex';
 import { Text } from '../Text';
 
 const meta: Meta<typeof CheckboxGridGroup> = {
-  title: 'Web UI / Components / Checkbox / CheckboxGridGroup',
+  title: 'Web UI / Stories / CheckboxGridGroup',
   component: CheckboxGridGroup,
   argTypes: {
     helperText: { control: { type: 'text' } },

packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.docs.mdx

@@ -9,7 +9,7 @@ import { Text } from '../Text';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / CheckboxGroup" />
 
 <DocsHeader
   componentName="CheckboxGroup"
@@ -30,10 +30,10 @@ import { DocsHeader } from '../../storybook-components';
 
 ## Alternatives
 
-- [CheckboxGridGroup](?path=/docs/components-checkboxgridgroup--documentation) - For presenting checkboxes in columns or a grid layout.
-- [CheckboxGroupRoot](?path=/story/web-ui-components-checkbox-checkboxgroup--checkbox-group-root-story) - For presenting checkboxes, outside of a fieldset, without label, helper text, or error message.
-- [RadioGroup](?path=/docs/components-radiogroup--documentation) - For single-select
-- [RadioGridGroup](?path=/docs/components-radiogridgroup--documentation) - For single-select in columns or a grid layout.
+- CheckboxGridGroup: For presenting checkboxes in columns or a grid layout.
+- CheckboxGroupRoot: For presenting checkboxes, outside of a fieldset, without label, helper text, or error message.
+- RadioGroup: For single-select
+- RadioGridGroup: For single-select in columns or a grid layout.
 
 ## Accessibility
 

packages/web-ui/src/components/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -15,7 +15,7 @@ import { Flex } from '../Flex';
 import { Text } from '../Text';
 
 const meta: Meta<typeof CheckboxGroup> = {
-  title: 'Web UI / Components / Checkbox / CheckboxGroup',
+  title: 'Web UI / Stories / CheckboxGroup',
   component: CheckboxGroup,
   argTypes: {
     direction: {

packages/web-ui/src/components/CheckboxTile/CheckboxTile.docs.mdx

@@ -8,7 +8,7 @@ import { Text } from '../Text';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / CheckboxTile" />
 
 <DocsHeader
   componentName="CheckboxTile"

packages/web-ui/src/components/CheckboxTile/CheckboxTile.stories.tsx

@@ -8,7 +8,7 @@ import { Flex } from '../Flex';
 import { Text } from '../Text';
 
 const meta: Meta<typeof CheckboxTile> = {
-  title: 'Web UI / Components / Checkbox / CheckboxTile',
+  title: 'Web UI / Stories / CheckboxTile',
   component: CheckboxTile,
   argTypes: {
     helperText: { control: { type: 'text' } },

packages/web-ui/src/components/Divider/Divider.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Divider.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Divider" />
 
 <DocsHeader
   componentName="Divider"

packages/web-ui/src/components/Divider/Divider.stories.tsx

@@ -13,7 +13,7 @@ import { Strong } from '../Strong';
 import { Text } from '../Text';
 
 const meta: Meta<typeof Divider> = {
-  title: 'Web UI / Components / Divider',
+  title: 'Web UI / Stories / Divider',
   component: Divider,
 };
 

packages/web-ui/src/components/Em/Em.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Em.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Em" />
 
 <DocsHeader componentName="Em" stories={Stories} />
 

packages/web-ui/src/components/Em/Em.stories.tsx

@@ -10,7 +10,7 @@ import { Text } from '../Text';
 const textVariants = ['subtitle', 'body', 'legalNote', 'caption'] as const;
 
 const meta: Meta<typeof Em> = {
-  title: 'Web UI / Typography / Em',
+  title: 'Web UI / Stories / Em',
   component: Em,
 };
 

packages/web-ui/src/components/Fieldset/Fieldset.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Fieldset.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Fieldset" />
 
 <DocsHeader componentName="Fieldset" stories={Stories} />
 

packages/web-ui/src/components/Fieldset/Fieldset.stories.tsx

@@ -9,7 +9,7 @@ import { FieldsetLegend } from '../FieldsetLegend';
 import { Placeholder } from '../../storybook-components';
 
 const meta: Meta<typeof Fieldset> = {
-  title: 'Web UI / Components / Fieldset',
+  title: 'Web UI / Stories / Fieldset',
   component: Fieldset,
 };
 

packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './FieldsetLegend.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / FieldsetLegend" />
 
 <DocsHeader componentName="FieldsetLegend" stories={Stories} />
 

packages/web-ui/src/components/FieldsetLegend/FieldsetLegend.stories.tsx

@@ -7,7 +7,7 @@ import { FieldsetLegend } from './FieldsetLegend';
 import { Box } from '../Box';
 
 const meta: Meta<typeof FieldsetLegend> = {
-  title: 'Web UI / Typography / FieldsetLegend',
+  title: 'Web UI / Stories / FieldsetLegend',
   component: FieldsetLegend,
 };
 

packages/web-ui/src/components/Flex/Flex.docs.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Flex.stories';
 
 import { DocsHeader } from '../../storybook-components';
 
-<Meta of={Stories} />
+<Meta title="Web UI / Documentation / Flex" />
 
 <DocsHeader componentName="Flex" stories={Stories} />