📝 complete migration doc

antistatique · Dec 21, 2021 · dd59eae · dd59eae
1 parent 01e676b
commit dd59eae
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/doc/tailwind-3-migration.md b/doc/tailwind-3-migration.md
@@ -62,5 +62,68 @@
 
 👉 More information on Component-Level CSS in the [official doc](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)
 
+## For Storybook
+
+1. Remove `.storybook/.babelrc` and `.storybook/webpack.config.js`
+2. Update your `.storybook/main.js` with something like:
+  ```js
+  const path = require('path');
+
+  module.exports = {
+    "stories": [
+      "../src/**/*.stories.mdx",
+      "../src/**/*.stories.@(js|jsx|ts|tsx)",
+    ],
+    "addons": [
+      "@storybook/addon-docs",
+      "@storybook/addon-links",
+      "@storybook/addon-essentials",
+      {
+        name: '@storybook/addon-postcss',
+        options: {
+          postcssLoaderOptions: {
+            implementation: require('postcss'),
+          },
+        },
+      },
+      'storybook-css-modules-preset',
+      // 'storybook-addon-next-router',
+    ],
+    // staticDirs: ['../public'],
+    // typescript: { reactDocgen: 'react-docgen-typescript' },
+    typescript: { reactDocgen: false },
+    framework: "@storybook/react",
+    core: {
+      builder: "webpack5",
+    },
+    webpackFinal: async (config, { configType }) => {
+      // Needed because of an issue with the latest version in framer-motion
+      // https://github.com/framer/motion/issues/1307
+      // config.module.rules.push({
+      //   type: "javascript/auto",
+      //   test: /\.mjs$/,
+      //   include: /node_modules/,
+      // });
+
+      config.resolve = {
+        ...config.resolve,
+        modules: [path.resolve(__dirname, '../src'), 'node_modules'],
+      };
+
+      const fileLoaderRule = config.module.rules.find(
+        (rule) => !Array.isArray(rule.test) && rule.test.test(".svg"),
+      );
+      fileLoaderRule.exclude = /\.svg$/;
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      });
+
+      return config;
+    },
+  }
+  ```
+  3. Add `import "../src/styles/globals.css";` in your `.storybook/preview.js`
+
 
 
diff --git a/playground/.storybook/main.js b/playground/.storybook/main.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const tailwindcss = require('tailwindcss');
 
 module.exports = {
   "stories": [