refactor: upgrade storybook (#93)

.gitignore

@@ -10,6 +10,8 @@
 
 # production
 /build
+/dist
+storybook-static/
 
 # misc
 .DS_Store

.storybook/main.js

@@ -1,29 +1,26 @@
 const path = require("path")
+import remarkGfm from "remark-gfm"
 
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   features: { buildStoriesJson: true },
-  /** Expose public folder to storybook as static */
-  // staticDirs: ['../public'],
+
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
     {
-      /**
-       * Fix Storybook issue with PostCSS@8
-       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
-       */
-      name: "@storybook/addon-postcss",
+      name: "@storybook/addon-docs",
       options: {
-        postcssLoaderOptions: {
-          implementation: require("postcss"),
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
         },
       },
     },
+    "@storybook/addon-storysource",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
   ],
-  core: {
-    builder: "webpack5",
-  },
+
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -65,4 +62,11 @@ module.exports = {
     config.resolve.extensions.push(".ts", ".tsx")
     return config
   },
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  docs: {},
 }

.storybook/preview.ts

@@ -1,9 +1,7 @@
-// .storybook/preview.js
 import "../src/global/app-css.scss"
 import "../documentation/storybook.css"
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -16,3 +14,4 @@ export const parameters = {
     },
   },
 }
+export const tags = ["autodocs"]

index.ts

@@ -1,5 +1,3 @@
-export * from "./src/expandableText/ExpandableText"
-
 export { default as Button } from "./src/actions/Button"
 export { default as Link } from "./src/actions/Link"
 export { default as Alert } from "./src/blocks/Alert"
@@ -17,3 +15,4 @@ export { default as Tabs } from "./src/navigation/Tabs"
 export { default as Heading } from "./src/text/Heading"
 export { default as HeadingGroup } from "./src/text/HeadingGroup"
 export { default as Tag } from "./src/text/Tag"
+export { default as ExpandableText } from "./src/text/ExpandableText"

package.json

@@ -41,18 +41,20 @@
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^1.0.3",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-docs": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-storysource": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/node-logger": "^8.3.6",
+    "@storybook/preset-create-react-app": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
@@ -65,19 +67,20 @@
     "postcss-nested": "6.0.0",
     "prop-types": "^15.8.1",
     "react-scripts": "5.0.1",
+    "remark-gfm": "^4.0.0",
     "sass": "1.56.1",
     "semantic-release": "19.0.5",
-    "storybook": "^6.5.16",
+    "storybook": "^8.3.6",
     "ts-loader": "9.4.1",
     "webpack": "^5.75.0"
   },
   "scripts": {
-    "start": "start-storybook -s ./public",
+    "start": "storybook dev ./public",
     "build": "tsc",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "storybook": "storybook dev -p 6006 public",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": [

src/actions/Button.scss

@@ -141,25 +141,25 @@
     }
   }
 
-  &[data-variant="highlight"] {
-    background-color: var(--seeds-color-highlight);
-    border-color: var(--seeds-color-highlight);
+  &[data-variant="warn"] {
+    background-color: var(--seeds-color-warn);
+    border-color: var(--seeds-color-warn);
     color: var(--seeds-color-secondary-darker);
 
     &:hover {
-      background-color: var(--seeds-color-highlight-dark);
-      border-color: var(--seeds-color-highlight-dark);
+      background-color: var(--seeds-color-warn-dark);
+      border-color: var(--seeds-color-warn-dark);
     }
   }
 
-  &[data-variant="highlight-outlined"] {
+  &[data-variant="warn-outlined"] {
     background-color: var(--seeds-bg-color-surface);
-    border-color: var(--seeds-color-highlight);
+    border-color: var(--seeds-color-warn);
     color: var(--seeds-color-secondary-darker);
 
     &:hover {
-      background-color: var(--seeds-color-highlight-dark);
-      border-color: var(--seeds-color-highlight-dark);
+      background-color: var(--seeds-color-warn-dark);
+      border-color: var(--seeds-color-warn-dark);
     }
   }
 
@@ -231,8 +231,8 @@
     display: block;
     width: 1.5em;
     height: 1.5em;
-    top: calc(50% - .75em);
-    left: calc(50% - .75em);
+    top: calc(50% - 0.75em);
+    left: calc(50% - 0.75em);
     border: 3px solid var(--seeds-color-on-inverse);
     border-left-color: transparent;
     border-radius: 50%;
@@ -262,4 +262,4 @@
   100% {
     transform: rotate(360deg);
   }
-}
+}

src/actions/Button.tsx

@@ -1,33 +1,28 @@
 import React, { useContext } from "react"
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid"
 import {
   NavigationContext,
   ExternalLinkScreenReaderText,
   isExternalLink,
   shouldShowExternalLinkIcon,
 } from "../global/NavigationContext"
+import { SeedsColorOutlinedVariants, SeedsColorVariants, SeedsSizes } from "../global/sharedTypes"
 import Icon from "../icons/Icon"
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid"
-
 import "./Button.scss"
 
+export type ButtonVariant = SeedsColorVariants | SeedsColorOutlinedVariants | "text"
+
+export type ButtonSize = Extract<SeedsSizes, "sm" | "md" | "lg">
+
+export type ButtonType = "button" | "submit" | "reset"
+
 export interface ButtonProps {
   /** Button content */
   children: React.ReactNode
   /** Appearance of the component */
-  variant?:
-    | "primary"
-    | "primary-outlined"
-    | "secondary"
-    | "secondary-outlined"
-    | "success"
-    | "success-outlined"
-    | "alert"
-    | "alert-outlined"
-    | "highlight"
-    | "highlight-outlined"
-    | "text"
+  variant?: ButtonVariant
   /** Button size (only `sm`/`md` supported by `text` variant) */
-  size?: "sm" | "md" | "lg"
+  size?: ButtonSize
   /** Icon to show before the label text */
   leadIcon?: React.ReactNode
   /** Icon to show after the label text */
@@ -41,7 +36,7 @@ export interface ButtonProps {
   /** Set external link target if it meets accessibility criteria */
   newWindowTarget?: boolean
   /** HTML button type */
-  type?: "button" | "submit" | "reset"
+  type?: ButtonType
   /** Set to true to disable the button */
   disabled?: boolean
   /** Set to true to hide the button from the accessibility tree */
@@ -108,6 +103,8 @@ const ButtonElement = (props: ButtonProps) => {
 }
 
 const LinkButton = (props: ButtonPropsWithTarget) => {
+  const { LinkComponent } = useContext(NavigationContext)
+
   if (props.href && isExternalLink(props.href)) {
     return (
       <a {...props}>
@@ -116,7 +113,6 @@ const LinkButton = (props: ButtonPropsWithTarget) => {
       </a>
     )
   } else {
-    const { LinkComponent } = useContext(NavigationContext)
     return <LinkComponent {...props} />
   }
 }

src/actions/__stories__/Button.docs.mdx

@@ -1,11 +1,18 @@
-import { ArgsTable } from "@storybook/addon-docs"
+import { Meta } from "@storybook/addon-docs"
+import { ArgTypes, Title, Subtitle, Description } from "@storybook/blocks"
 import Button from "../Button"
+import * as stories from "./Button.stories.tsx"
 
-# <Button />
+<Meta of={stories} />
+
+<Title />
+<Subtitle>Button components are interactive elements that trigger an action when clicked.</Subtitle>
+Read more documentation about the Button component in
+[Zeroheight](https://zeroheight.com/5e69dd4e1/p/7607be-button/b/93a6d7).
 
 ## Properties
 
-<ArgsTable of={Button} />
+<ArgTypes of={Button} />
 
 ## Theme Variables