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)
+ // }
+ },
+};