docs: Made storybook docs available again, small org changes elsewhere (

#2795)
trussworks · Mar 6, 2024 · e77fe30 · e77fe30
1 parent e1d96bc
commit e77fe30
Show file tree

Hide file tree

Showing 17 changed files with 55 additions and 130 deletions.
diff --git a/.storybook/USWDS.js b/.storybook/USWDS.js
@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   brandTitle: 'U.S. Web Design System (USWDS)',

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -4,6 +4,7 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-a11y',
+    '@storybook/addon-docs',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
@@ -13,7 +14,7 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
   },
   staticDirs: ['public'],
 }

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import USWDS from './USWDS';
 
 addons.setConfig({

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -5,16 +5,24 @@ import '../src/styles/index.scss'
 import './custom-styles.scss'
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { Preview } from '@storybook/react';
+import USWDS from './USWDS';
 
-export const parameters = {
-  viewport: {
-    viewports: INITIAL_VIEWPORTS,
-  },
-  options: {
-    showPanel: true,
-    storySort: {
-      method: 'alphabetical',
-      order: ['Welcome', 'Design tokens', 'Page Templates', 'Components', 'Other'],
+const preview: Preview = {
+  parameters: {
+    docs: {
+      theme: USWDS,
+    },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+    options: {
+      showPanel: true,
+      storySort: {
+        method: 'alphabetical',
+        order: ['Welcome', 'Design tokens', 'Page Templates', 'Components', 'Other'],
+      },
     },
   },
 }
+export default preview;
diff --git a/package.json b/package.json
@@ -80,6 +80,7 @@
     "@storybook/addon-links": "^7.6.10",
     "@storybook/addons": "^7.6.10",
     "@storybook/blocks": "^7.6.10",
+    "@storybook/manager-api": "^7.1.1",
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
     "@storybook/test": "^7.6.10",

diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from './Link'
 
 export default {
-  title: 'Components/Typography/Link',
+  title: 'Components/Link',
   component: Link,
   parameters: {
     docs: {

diff --git a/src/components/forms/TimePicker/TimePicker.stories.tsx b/src/components/forms/TimePicker/TimePicker.stories.tsx
@@ -4,7 +4,7 @@ import { Form } from '../Form/Form'
 import { TimePicker } from './TimePicker'
 
 export default {
-  title: 'Components/Form controls/Time picker',
+  title: 'Components/Time picker',
   component: TimePicker,
   argTypes: {
     onsubmit: { action: 'submitted' },

diff --git a/src/stories/swatches.stories.tsx b/src/stories/swatches.stories.tsx
@@ -9,9 +9,9 @@ export default {
   },
 }
 
-export const BackgroundColors = (): React.ReactElement => (
+export const Swatches = (): React.ReactElement => (
   <div className="grid-container">
-    <h1>Background color</h1>
+    <h1>Color swatches</h1>
     <h2>Primary</h2>
     <hr />
     <div className="grid-row">

diff --git a/src/stories/templates/createaccount.stories.tsx b/src/stories/templates/createaccount.stories.tsx
@@ -35,7 +35,7 @@ import circleSvg from '@uswds/uswds/img/circle-gray-20.svg'
 import { MediaBlockBody } from '../../components/mediablock/MediaBlockBody/MediaBlockBody'
 
 export default {
-  title: 'Page Templates/Authentication Pages',
+  title: 'Page Templates/Create Account',
   parameters: {
     options: {
       showPanel: false,

diff --git a/src/stories/templates/documentation.stories.tsx b/src/stories/templates/documentation.stories.tsx
@@ -26,11 +26,8 @@ import {
 import { SideNav } from '../../components/SideNav/SideNav'
 
 export default {
-  title: 'Page Templates/Documentation Page',
+  title: 'Page Templates/Documentation',
   parameters: {
-    options: {
-      showPanel: false,
-    },
     docs: {
       description: {
         component: `

diff --git a/src/stories/templates/mutliplesignin.stories.tsx b/src/stories/templates/mutliplesignin.stories.tsx
@@ -30,7 +30,7 @@ import logoImg from '@uswds/uswds/img/logo-img.png'
 import circleSvg from '@uswds/uswds/img/circle-gray-20.svg'
 
 export default {
-  title: 'Page Templates/Authentication Pages',
+  title: 'Page Templates/Multiple Sign In Options',
   parameters: {
     options: {
       showPanel: false,

diff --git a/src/stories/templates/notfound.stories.tsx b/src/stories/templates/notfound.stories.tsx
@@ -35,7 +35,7 @@ import {
 } from '../../index'
 
 export default {
-  title: 'Page Templates/Not Found Page',
+  title: 'Page Templates/Not Found',
   parameters: {
     options: {
       showPanel: false,

diff --git a/src/stories/templates/signin.stories.tsx b/src/stories/templates/signin.stories.tsx
@@ -33,7 +33,7 @@ import logoImg from '@uswds/uswds/img/logo-img.png'
 import circleSvg from '@uswds/uswds/img/circle-gray-20.svg'
 
 export default {
-  title: 'Page Templates/Authentication Pages',
+  title: 'Page Templates/Sign In',
   parameters: {
     options: {
       showPanel: false,

diff --git a/src/stories/type.stories.tsx b/src/stories/type.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default {
-  title: 'Components/Typography/Type Styles',
+  title: 'Design tokens/Type Styles',
   parameters: {
     options: {
       showPanel: false,

diff --git a/src/stories/welcome.stories.mdx b/src/stories/welcome.stories.mdx
@@ -0,0 +1,22 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+
+<Meta title="Welcome" />
+
+<svg
+  aria-hidden="true"
+  height="16"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="16"
+  data-view-component="true"
+><path d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg> [trussworks](https://github.com/trussworks)/[**react-uswds**](https://github.com/trussworks/react-uswds)
+
+# ReactUSWDS Component Library
+
+This is a frontend component library built by [Truss](https://truss.works/), using [React](https://reactjs.org/) with [Typescript](https://www.typescriptlang.org/), based on design patterns defined by the [United States Web Design System (USWDS)](https://designsystem.digital.gov/). Our primary goal is to document and provide common UI components following the USWDS specification. This library removes a significant amount of overhead UI development for projects based on this standard.
+
+## See also
+* [Using the USWDS as an Engineer](https://truss.works/blog/uswds-for-engineers)
+* [React-USWDS Github](https://github.com/trussworks/react-uswds)
+* [USWDS website](https://designsystem.digital.gov/)
+* [USWDS Figma library](https://www.figma.com/community/file/836611771720754351)
diff --git a/src/stories/welcome.stories.tsx b/src/stories/welcome.stories.tsx
diff --git a/yarn.lock b/yarn.lock
@@ -2841,7 +2841,7 @@
     telejson "^7.2.0"
     ts-dedent "^2.0.0"
 
-"@storybook/manager-api@7.6.17":
+"@storybook/manager-api@7.6.17", "@storybook/manager-api@^7.1.1":
   version "7.6.17"
   resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.6.17.tgz#cdf0bb8e5bdc3da2559150125b3d6a3ff72f0def"
   integrity sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==