chore!: upgrade storybook

.github/workflows/storybook.yml

@@ -17,7 +17,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v2
       with:
-        node-version: 16.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
     - name: Build Storybook

.github/workflows/templates.yml

@@ -16,7 +16,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v2
       with:
-        node-version: 16.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
     - name: Publish to Commerble

.storybook/main.js

@@ -1,37 +1,45 @@
-const {
-  resolve
-} = require('path');
-module.exports = {
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links", 
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y/register", 
-    "@storybook/addon-viewport/register"
-  ],
-  staticDirs: [{ from: '../src', to: '/public' }],
-  webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: [{
-        loader: 'style-loader'
-      }, {
-        loader: 'css-loader',
-        options: {
-          modules : "icss"
-        },
-      }, {
-        loader: 'sass-loader'
-      }],
-      include: resolve(__dirname, '../')
-    }, {
-      test: /\.fn\.ejs$/i,
-      use: [{ loader: resolve(__dirname, './ejs-fn-loader.js') }],
-    });
-    return config;
-  },
-  framework: {
-    name: "@storybook/html-webpack5",
-    options: {}
-  },
+const {
+  resolve
+} = require('path');
+module.exports = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y/register",
+    "@storybook/addon-viewport/register",
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-mdx-gfm"
+  ],
+
+  staticDirs: [{ from: '../src', to: '/public' }],
+
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [{
+        loader: 'style-loader'
+      }, {
+        loader: 'css-loader',
+        options: {
+          modules : "icss"
+        },
+      }, {
+        loader: 'sass-loader'
+      }],
+      include: resolve(__dirname, '../')
+    }, {
+      test: /\.fn\.ejs$/i,
+      use: [{ loader: resolve(__dirname, './ejs-fn-loader.js') }],
+    });
+    return config;
+  },
+
+  framework: {
+    name: "@storybook/html-webpack5",
+    options: {}
+  },
+
+  docs: {}
 };

.storybook/preview.js

@@ -1,47 +1,48 @@
-import { withA11y } from '@storybook/addon-a11y'
-
-import '../scss/style.scss'
-
-const customViewports = {
-  iPhone5: {
-    name: 'iPhone5',
-    styles: {
-      width: '320px',
-      height: '568px',
-    },
-  },
-  iPhone6: {
-    name: 'iPhone6,7,8',
-    styles: {
-      width: '375px',
-      height: '667px',
-    },
-  },
-  iPhoneX: {
-    name: 'iPhoneX',
-    styles: {
-      width: '375px',
-      height: '812px',
-    },
-  },
-  iPhoneXsMax: {
-    name: 'iPhoneXsMax',
-    styles: {
-      width: '414px',
-      height: '896px',
-    },
-  },
-  iPad: {
-    name: 'iPad',
-    styles: {
-      width: '768px',
-      height: '1024px',
-    }
-  }
-}
-
-export const parameters = {
-  viewport: { viewports: customViewports },
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  ...withA11y
-}
+import { withA11y } from '@storybook/addon-a11y'
+
+import '../scss/style.scss'
+
+const customViewports = {
+  iPhone5: {
+    name: 'iPhone5',
+    styles: {
+      width: '320px',
+      height: '568px',
+    },
+  },
+  iPhone6: {
+    name: 'iPhone6,7,8',
+    styles: {
+      width: '375px',
+      height: '667px',
+    },
+  },
+  iPhoneX: {
+    name: 'iPhoneX',
+    styles: {
+      width: '375px',
+      height: '812px',
+    },
+  },
+  iPhoneXsMax: {
+    name: 'iPhoneXsMax',
+    styles: {
+      width: '414px',
+      height: '896px',
+    },
+  },
+  iPad: {
+    name: 'iPad',
+    styles: {
+      width: '768px',
+      height: '1024px',
+    }
+  }
+}
+
+export const parameters = {
+  viewport: { viewports: customViewports },
+  // actions: { argTypesRegex: "^on[A-Z].*" },
+  ...withA11y
+}
+export const tags = ['autodocs'];