chore/storybook-migration-to-v7

.eslintrc.json

@@ -10,7 +10,8 @@
     "plugin:import/recommended",
     "plugin:jest-dom/recommended",
     "airbnb",
-    "prettier"
+    "prettier",
+    "plugin:storybook/recommended"
   ],
   "plugins": ["jest", "react"],
   "env": {

.storybook/main.js

@@ -1,17 +1,17 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-docs",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-addon-pseudo-states",
-  ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-addon-pseudo-states'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  features: {
+    buildStoriesJson: true
+  },
+  docs: {
+    autodocs: true
+  },
+  core: {
+    disableTelemetry: true
   }
-}
+};

.storybook/preview.js

@@ -9,34 +9,36 @@ const viewports = {
     styles: {
       width: '460px',
       height: '962px',
-    }
+    },
   },
   md: {
     name: 'Tablet M 834 x 1194',
     styles: {
       width: '864px',
       height: '1234px',
-    }
+    },
   },
   lg: {
     name: 'Desktop Low Resolution - LG - 1024 x 768',
     styles: {
       width: '1054px',
       height: '798px',
-    }
+    },
   },
   xl: {
     name: 'Desktop High Resolution - XL - 1280 x 832',
     styles: {
       width: '1310px',
       height: '862px',
-    }
-  }
+    },
+  },
 };
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  viewport: { viewports, defaultViewport },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  parameters: {
+    viewport: { viewports, defaultViewport },
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -46,6 +48,8 @@ export const parameters = {
   docs: {
     // can be removed after storybook v7 will be released
     // https://github.com/storybookjs/storybook/issues/8078
-    transformSource: input => pretty(input)
-  }
-}
+    // source: {
+    //     transform:input => pretty(input)
+    // }
+  },
+};