Upgrade to Storybook 7.2, fixes #29

OriginProtocol · Aug 11, 2023 · b6e64bb · b6e64bb
1 parent bf4b73c
commit b6e64bb
Show file tree

Hide file tree

Showing 8 changed files with 4,462 additions and 4,621 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,7 +7,8 @@ module.exports = {
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
-        "plugin:react/jsx-runtime"
+        "plugin:react/jsx-runtime",
+        "plugin:storybook/recommended"
     ],
     "overrides": [
     ],

diff --git a/.storybook/NextImage.js b/.storybook/NextImage.js
@@ -0,0 +1,3 @@
+import Image from '../node_modules/next/image'
+const NextImage = (props) => <Image unoptimized {...props} />
+export default NextImage
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -3,6 +3,7 @@ const path = require('path')
 module.exports = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: [path.resolve(__dirname, '../public')],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -17,5 +18,19 @@ module.exports = {
       }
     }
   ],
-  framework: '@storybook/react'
+
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
+  },
+
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.alias['next/image'] = require.resolve('./NextImage.js')
+
+    return config
+  },
+
+  docs: {
+    autodocs: true
+  }
 }
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -23,122 +23,3 @@ export const parameters = {
     }
   }
 }
-
-Object.defineProperty(nextImage, 'default', {
-  configurable: true,
-  value: (props) => {
-    const height = props.height
-    const width = props.width
-    const quotient = height / width
-    const paddingTop = isNaN(quotient) ? '100%' : `${quotient * 100}%`
-    let wrapperStyle
-    let sizerStyle
-    let sizerSvg
-    let toBase64
-    let imgStyle = {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      boxSizing: 'border-box',
-      padding: 0,
-      border: 'none',
-      margin: 'auto',
-      display: 'block',
-      width: 0,
-      height: 0,
-      minWidth: '100%',
-      maxWidth: '100%',
-      minHeight: '100%',
-      maxHeight: '100%',
-      objectFit: props.objectFit ? props.objectFit : undefined,
-      objectPosition: props.objectPosition ? props.objectPosition : undefined
-    }
-
-    if (
-      width !== undefined &&
-      height !== undefined &&
-      props.layout !== 'fill'
-    ) {
-      if (props.layout === 'responsive') {
-        wrapperStyle = {
-          display: 'block',
-          overflow: 'hidden',
-          position: 'relative',
-          boxSizing: 'border-box',
-          margin: 0
-        }
-        sizerStyle = {
-          display: 'block',
-          boxSizing: 'border-box',
-          paddingTop
-        }
-      } else if (props.layout === 'intrinsic' || props.layout === undefined) {
-        wrapperStyle = {
-          display: 'inline-block',
-          maxWidth: '100%',
-          overflow: 'hidden',
-          position: 'relative',
-          boxSizing: 'border-box',
-          margin: 0
-        }
-        sizerStyle = {
-          boxSizing: 'border-box',
-          display: 'block',
-          maxWidth: '100%'
-        }
-        sizerSvg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" version="1.1"/>`
-        toBase64 = Buffer.from(sizerSvg).toString('base64')
-      } else if (props.layout === 'fixed') {
-        wrapperStyle = {
-          overflow: 'hidden',
-          boxSizing: 'border-box',
-          display: 'inline-block',
-          position: 'relative',
-          width,
-          height
-        }
-      }
-    } else if (
-      width === undefined &&
-      height === undefined &&
-      props.layout === 'fill'
-    ) {
-      wrapperStyle = {
-        display: 'block',
-        overflow: 'hidden',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        boxSizing: 'border-box',
-        margin: 0
-      }
-    } else {
-      throw new Error(
-        `Image with src "${props.src}" must use "width" and "height" properties or "layout='fill'" property.`
-      )
-    }
-
-    return (
-      <div style={wrapperStyle}>
-        {sizerStyle ? (
-          <div style={sizerStyle}>
-            {sizerSvg ? (
-              <img
-                style={{ maxWidth: '100%', display: 'block' }}
-                alt={props.alt}
-                aria-hidden={true}
-                role="presentation"
-                src={`data:image/svg+xml;base64,${toBase64}`}
-              />
-            ) : null}
-          </div>
-        ) : null}
-        <img {...props} decoding="async" style={imgStyle} />
-      </div>
-    )
-  }
-})
diff --git a/package.json b/package.json
@@ -26,16 +26,15 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^14.1.0",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-jest": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-actions": "^7.2.3",
+    "@storybook/addon-essentials": "^7.2.3",
+    "@storybook/addon-interactions": "^7.2.3",
+    "@storybook/addon-jest": "^7.2.3",
+    "@storybook/addon-links": "^7.2.3",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack4": "^6.5.13",
-    "@storybook/manager-webpack4": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/nextjs": "^7.2.3",
+    "@storybook/react": "^7.2.3",
+    "@storybook/testing-library": "^0.2.0",
     "@types/jest": "^29.0.2",
     "@types/react": "^17.0.2",
     "@types/react-test-renderer": "^18.0.0",
@@ -59,6 +58,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.33.0",
+    "storybook": "^7.2.3",
     "tailwindcss": "^3.2.3",
     "typescript": "^4.8.3"
   },
@@ -67,8 +67,8 @@
     "react-dom": "^18.2.0"
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o docs-build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o docs-build",
     "chromatic": "npx chromatic --project-token=7db6a89b14e5",
     "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
     "build": "NODE_ENV=production rollup -c",
@@ -82,6 +82,7 @@
   "dependencies": {
     "@heroicons/react": "^2.0.11",
     "next": "^10.2.3 || ^12.3.1",
+    "next-transpile-modules": "^10.0.1",
     "rollup-plugin-copy": "^3.4.0",
     "tailwind-merge": "^1.8.1"
   },

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,27 +1,28 @@
-import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
-import cssnano from 'cssnano';
-import copy from 'rollup-plugin-copy';
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import postcss from "rollup-plugin-postcss";
-import svg from 'rollup-plugin-svg';
-import typescript from "rollup-plugin-typescript2";
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import cssnano from 'cssnano'
+import copy from 'rollup-plugin-copy'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
+import svg from 'rollup-plugin-svg'
+import typescript from 'rollup-plugin-typescript2'
 import json from '@rollup/plugin-json'
 
-const packageJson = require('./package.json');
+// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+const packageJson = require('./package.json')
 
 export default {
   input: 'src/index.ts',
   output: [
     {
       file: packageJson.main,
-      format: "cjs",
+      format: 'cjs',
       sourcemap: true,
       inlineDynamicImports: true
     },
     {
-      dir: "lib/esm/src/",
-      format: "esm",
+      dir: 'lib/esm/src/',
+      format: 'esm',
       sourcemap: true,
       inlineDynamicImports: true
     }
@@ -33,18 +34,12 @@ export default {
     svg(),
     typescript({
       useTsconfigDeclarationDir: true,
-      exclude: [
-        "**/__tests__",
-        "**/*.test.tsx",
-        "**/*.stories.tsx"
-      ]
+      exclude: ['**/__tests__', '**/*.test.tsx', '**/*.stories.tsx']
     }),
     postcss({
-      plugins: [
-        cssnano()
-      ],
+      plugins: [cssnano()],
       extensions: ['.css'],
-      extract: 'styles.css',
+      extract: 'styles.css'
     }),
     copy({
       targets: [
@@ -58,6 +53,6 @@ export default {
         }
       ]
     }),
-    json(),
+    json()
   ]
-};
+}
diff --git a/src/components/Typography/Typography.stories.tsx b/src/components/Typography/Typography.stories.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react/no-children-prop */
 /* eslint-disable react/no-unescaped-entities */
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 
-import { Typography, GradientText } from '.'
+import { GradientText, Typography } from '.'
 import { GradientTextProps } from './GradientText'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -14,10 +14,10 @@ export default {
   argTypes: {
     backgroundColor: { control: 'color' }
   }
-} as ComponentMeta<typeof Typography>
+} as Meta<typeof Typography>
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Typography> = (args) => (
+const Template: StoryFn<typeof Typography> = (args) => (
   <div>
     <Typography.H1 {...args} children="Typography.H1" />
     <div className="text-xs opacity-50 mt-2">
@@ -165,7 +165,7 @@ const textOptions: GradientTextProps[] = [
   }
 ]
 
-const GradientTemplate: ComponentStory<typeof GradientText> = () => (
+const GradientTemplate: StoryFn<typeof GradientText> = () => (
   <div>
     {textOptions.map((gradientTextProps, i) => (
       <Typography.Body key={`gradient-text-${i}`}>