chore: upgrading storybook to version 8 (#674)

* chore: upgrading storybook to version 8 * chore: yarn dedupe * chore: removing comments from shadow stories
MetaMask · Apr 29, 2024 · cd5ae49 · cd5ae49
1 parent 825eba4
commit cd5ae49
Show file tree

Hide file tree

Showing 15 changed files with 3,131 additions and 4,877 deletions.
diff --git a/.depcheckrc.json b/.depcheckrc.json
@@ -7,16 +7,15 @@
     "@yarnpkg/types",
     "prettier-plugin-packagejson",
     "ts-node",
-    "@storybook/addon-actions",
-    "@storybook/react-webpack5",
-    "babel-loader",
-    "dependency-tree",
-    "eslint-plugin-node",
-    "sass",
-    "webpack",
     "@yarnpkg/core",
     "@yarnpkg/cli",
     "clipanion",
-    "@yarnpkg/fslib"
+    "@yarnpkg/fslib",
+    "@chromatic-com/storybook",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-links",
+    "@storybook/blocks",
+    "@storybook/test"
   ]
 }
diff --git a/.gitignore b/.gitignore
@@ -78,3 +78,5 @@ node_modules/
 
 # Storybook build folder
 storybook-static
+
+*storybook.log
diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,36 @@
+import remarkGfm from 'remark-gfm';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: [
+    // Add MDX only stories here to avoid duplication
+    '../docs/Introduction.mdx',
+    '../docs/IntroductionColor.mdx',
+    // All other stories here
+    '../**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;
diff --git a/.storybook/preview.js → .storybook/preview.ts b/.storybook/preview.js → .storybook/preview.ts
@@ -1,15 +1,16 @@
+import type { Preview } from '@storybook/react';
+
 import '../docs/fonts/fonts.scss';
 import '../src/css/design-tokens.css';
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
     },
-  },
-  options: {
     storySort: {
       order: [
         'Getting Started',
@@ -22,3 +23,5 @@ export const parameters = {
     },
   },
 };
+
+export default preview;
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
diff --git a/docs/Introduction.mdx b/docs/Introduction.mdx
@@ -0,0 +1,7 @@
+import { Meta, Markdown } from '@storybook/blocks';
+
+import README from '../README.md?raw';
+
+<Meta title="Getting Started/Introduction" />
+
+<Markdown>{README}</Markdown>
diff --git a/docs/Introduction.stories.mdx b/docs/Introduction.stories.mdx
diff --git a/docs/IntroductionColor.stories.mdx → docs/IntroductionColor.mdx b/docs/IntroductionColor.stories.mdx → docs/IntroductionColor.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 import designTokenDiagramImage from './images/design.token.graphic.svg';
 import { lightTheme } from '../src/index.ts';

diff --git a/docs/Shadows.mdx b/docs/Shadows.mdx
@@ -1,8 +1,6 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, Canvas, Story } from '@storybook/blocks';
 import * as ShadowStories from './Shadows.stories';
 
-<Meta title="Design Tokens/Shadows" />
-
 # Shadows
 
 Shadows in design are used to create depth and hierarchy. They can be used to differentiate between different elements, and to highlight interactive elements.

diff --git a/docs/Shadows.stories.tsx b/docs/Shadows.stories.tsx
@@ -1,29 +1,29 @@
 import React from 'react';
-import { lightTheme } from '../src/js';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Text } from './components';
 import README from './Shadows.mdx';
 
 interface ShadowSwatchProps {
-  children: any;
-  style?: object;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   color?: 'default' | 'primary' | 'error';
 }
 
-const ShadowSwatch = ({
+const ShadowSwatch: React.FC<ShadowSwatchProps> = ({
   children,
   style,
   size = 'xs',
   color = 'default',
-}: ShadowSwatchProps) => (
+}) => (
   <div
     style={{
       height: 100,
       backgroundColor: 'var(--color-background-default)',
       boxShadow:
         color === 'default'
-          ? `var(--shadow-size-${size}) var(--color-shadow-${color}`
-          : `var(--shadow-size-${size}) var(--color-${color}-shadow`,
+          ? `var(--shadow-size-${size}) var(--color-shadow-default)`
+          : `var(--shadow-size-${size}) var(--color-${color}-shadow)`,
       borderRadius: '4px',
       display: 'grid',
       alignContent: 'center',
@@ -36,7 +36,7 @@ const ShadowSwatch = ({
   </div>
 );
 
-export default {
+const meta: Meta<typeof ShadowSwatch> = {
   title: 'Shadows/Shadows',
   component: ShadowSwatch,
   parameters: {
@@ -46,18 +46,24 @@ export default {
   },
   argTypes: {
     size: {
-      control: 'select',
-      options: Object.keys(lightTheme.shadows.size),
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg'],
     },
     color: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['default', 'primary', 'error'],
     },
   },
 };
 
-export const DefaultStory = {
+export default meta;
+
+export const DefaultStory: StoryObj<typeof ShadowSwatch> = {
   name: 'Default',
+  args: {
+    color: 'default',
+    size: 'xs',
+  },
   render: (args) => (
     <div
       style={{
@@ -73,13 +79,9 @@ export const DefaultStory = {
       </ShadowSwatch>
     </div>
   ),
-  args: {
-    color: 'default',
-    size: 'xs',
-  },
 };
 
-export const Size = {
+export const Size: StoryObj<typeof ShadowSwatch> = {
   render: (args) => (
     <div
       style={{
@@ -116,7 +118,7 @@ export const Size = {
   },
 };
 
-export const Color = {
+export const Color: StoryObj<typeof ShadowSwatch> = {
   render: (args) => (
     <div
       style={{

diff --git a/docs/Typography.mdx b/docs/Typography.mdx
@@ -1,6 +1,7 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, Canvas, Story } from '@storybook/blocks';
+import * as TypographyStories from './Typography.stories';
 
-<Meta title="Typography / Introduction" />
+<Meta of={TypographyStories} />
 
 # Typography
 
@@ -10,9 +11,7 @@ Good typography improves readability, legibility and prioritization of informati
 
 The main font family used in MetaMask products is **Euclid Circular B**
 
-<Canvas>
-  <Story id="typography-typography--font-family" />
-</Canvas>
+<Canvas of={TypographyStories.FontFamily} />
 
 | Font Family           | JS                   | CSS                                    |
 | --------------------- | -------------------- | -------------------------------------- |
@@ -28,9 +27,7 @@ For screens sizes `767px >` or smaller, use the small screen typography scale
 
 **Key:** S: small screen L: large screen | name | font-weight(regular if omitted) | font-size/line-height | rems
 
-<Canvas>
-  <Story id="typography-typography--small-screen" />
-</Canvas>
+<Canvas of={TypographyStories.SmallScreen} />
 
 | Variation                            | JS                                                                                                                                                                                                                                             | CSS                                                                                                                                                                                                                                                                                                  |
 | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -57,9 +54,7 @@ For screens sizes `768px <` or larger, use the large screen typography scale
 
 **Key:** S: small screen L: large screen | name | font-weight (regular if omitted)| font-size/line-height | rems
 
-<Canvas>
-  <Story id="typography-typography--large-screen" />
-</Canvas>
+<Canvas of={TypographyStories.LargeScreen} />
 
 | Variation                            | JS                                                                                                                                                                                                                                             | CSS                                                                                                                                                                                                                                                                                                  |
 | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -86,9 +81,7 @@ For screens sizes `768px <` or larger, use the large screen typography scale
 
 There are three available font weights: regular`400`, medium`700` and bold`900`
 
-<Canvas>
-  <Story id="typography-typography--font-weight" />
-</Canvas>
+<Canvas of={TypographyStories.FontWeight} />
 
 | Font Weight                                   | JS                   | CSS                          |
 | --------------------------------------------- | -------------------- | ---------------------------- |