Storybook update to latest (#91)

* Update storybook to version 7

* Change storybook command

* Add webpack5 and autodocs true

* Update eslintrc

* Update Story importation

* Add babel config to build storybook properly

* Remove unecessary storie

* fix eof

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintrc.json

@@ -1,40 +1,41 @@
 {
-  "env": {
-      "browser": true,
-      "es2021": true,
-      "jest": true,
-      "node": true
-  },
-  "settings": {
-      "react":{
-          "version":"detect"
-      }
-  },
-  "extends": [
-      "eslint:recommended",
-      "plugin:react/recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:prettier/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-      "ecmaFeatures": {
-          "jsx": true
-      },
-      "ecmaVersion": 12,
-      "sourceType": "module"
-  },
-  "plugins": [
-      "react",
-      "@typescript-eslint",
-      "react-hooks"
-  ],
-  "rules": {
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "warn",
-      "react/prop-types": "off",
-      "react/react-in-jsx-scope": "off",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "@typescript-eslint/no-non-null-assertion": "off"
-  }
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "jest": true,
+        "node": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended",
+        "plugin:storybook/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint",
+        "react-hooks"
+    ],
+    "rules": {
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/prop-types": "off",
+        "react/react-in-jsx-scope": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-non-null-assertion": "off"
+    }
 }

.gitignore

@@ -29,3 +29,4 @@ yarn-error.log*
 
 #other
 .yarn
+.nvmrc

.storybook/main.js

@@ -1,9 +1,11 @@
 module.exports = {
-  "stories": [
-    "../src/packages/**/stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+  "stories": ["../src/packages/**/stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
+};

generators/templates/stories.tsx.hbs

@@ -1,10 +1,10 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import {{pascalCase name}} from '.'
 
 export default {
   title: '{{pascalCase name}}',
   component: {{pascalCase name}}
 } as Meta
 
-export const Default: Story = (args) => <{{pascalCase name}} {...args} />
+export const Default: StoryFn = (args) => <{{pascalCase name}} {...args} />

package.json

@@ -18,8 +18,8 @@
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "prettier:format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
     "prettier:check": "prettier -c \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
-    "sb": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
-    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook",
+    "sb": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build",
     "generate": "yarn plop --plopfile ./generators/plopfile.js",
     "test": "jest --passWithNoTests"
   },
@@ -36,10 +36,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/react": "^6.3.6",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@storybook/addon-actions": "^7.1.1",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "12.1.5",
     "@types/jest": "^28.1.7",
@@ -53,13 +57,15 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "jest-styled-components": "^7.1.0",
     "plop": "^3.1.1",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "storybook": "^7.1.1",
     "styled-components": "^5.3.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.3.5",

src/packages/Accordion/stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Accordion from '.'
 
 export default {
   title: 'Accordion',
   component: Accordion
 } as Meta
 
-export const Default: Story = () => (
+export const Default: StoryFn = () => (
   <Accordion title={'Accordion'}>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/packages/Alert/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Alert, { AlertProps } from '.'
 
 export default {
@@ -14,4 +14,4 @@ export default {
   }
 } as Meta
 
-export const Default: Story<AlertProps> = (args) => <Alert {...args} />
+export const Default: StoryFn<AlertProps> = (args) => <Alert {...args} />

src/packages/Avatar/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Avatar, { AvatarProps } from '.'
 
 export default {
@@ -14,4 +14,4 @@ export default {
   }
 } as Meta
 
-export const Default: Story<AvatarProps> = (args) => <Avatar {...args} />
+export const Default: StoryFn<AvatarProps> = (args) => <Avatar {...args} />

src/packages/Box/stories.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Box from '.'
 
 export default {
   title: 'Box',
   component: Box
 } as Meta
 
-export const Default: Story = (args) => (
+export const Default: StoryFn = (args) => (
   <Box {...args}>
     <>hello</>
   </Box>
 )
 
-export const MultipleChildren: Story = (args) => (
+export const MultipleChildren: StoryFn = (args) => (
   <Box
     border={true}
     shadow={true}

src/packages/Breadcrumb/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, Story } from '@storybook/react/types-6-0'
+import { Meta, StoryFn } from '@storybook/react'
 import Breadcrumb, { BreadcrumbProps } from '.'
 
 export default {
@@ -23,6 +23,6 @@ export default {
   }
 } as Meta
 
-export const Default: Story<BreadcrumbProps> = (args) => (
+export const Default: StoryFn<BreadcrumbProps> = (args) => (
   <Breadcrumb {...args} />
 )

src/packages/Button/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Button, { ButtonProps } from '.'
 
 export default {
@@ -11,4 +11,4 @@ export default {
   }
 } as Meta
 
-export const Default: Story<ButtonProps> = (args) => <Button {...args} />
+export const Default: StoryFn<ButtonProps> = (args) => <Button {...args} />

src/packages/Card/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Card, { CardProps } from '.'
 
 import { mock as imgMock } from '../Slider/mock'
@@ -17,4 +17,4 @@ export default {
   }
 } as Meta
 
-export const Default: Story<CardProps> = (args) => <Card {...args} />
+export const Default: StoryFn<CardProps> = (args) => <Card {...args} />

src/packages/CheckBox/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import CheckBox, { CheckBoxProps } from '.'
 
 export default {
@@ -15,4 +15,4 @@ export default {
   }
 } as Meta
 
-export const Default: Story<CheckBoxProps> = (args) => <CheckBox {...args} />
+export const Default: StoryFn<CheckBoxProps> = (args) => <CheckBox {...args} />

src/packages/GridMain/stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import GridMain, { GridMainProps } from '.'
 
 export default {
   title: 'GridMain',
   component: GridMain
 } as Meta
 
-export const Default: Story<GridMainProps> = (args) => (
+export const Default: StoryFn<GridMainProps> = (args) => (
   <GridMain {...args} size="mini">
     <h1>CHILDREN</h1>
   </GridMain>

src/packages/Heading/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Heading, { HeadingProps } from '.'
 
 export default {
@@ -12,7 +12,7 @@ export default {
   }
 } as Meta
 
-export const Default: Story<HeadingProps> = (args) => <Heading {...args} />
+export const Default: StoryFn<HeadingProps> = (args) => <Heading {...args} />
 
 Default.args = {
   children: 'Most Populars'

src/packages/Highlight/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Highlight, { HighlightProps } from '.'
 
 export default {
@@ -11,4 +11,6 @@ export default {
   }
 } as Meta
 
-export const Default: Story<HighlightProps> = (args) => <Highlight {...args} />
+export const Default: StoryFn<HighlightProps> = (args) => (
+  <Highlight {...args} />
+)

src/packages/Label/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Label, { LabelProps } from '.'
 
 export default {
@@ -10,4 +10,4 @@ export default {
   }
 } as Meta
 
-export const Default: Story<LabelProps> = (args) => <Label {...args} />
+export const Default: StoryFn<LabelProps> = (args) => <Label {...args} />

src/packages/Menu/stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { StoryFn, Meta } from '@storybook/react'
 import Menu, { MenuProps } from '.'
 import { mock } from './mock'
 
@@ -13,6 +13,6 @@ export default {
   }
 } as Meta
 
-export const Default: Story<MenuProps> = (args) => <Menu {...args} />
+export const Default: StoryFn<MenuProps> = (args) => <Menu {...args} />
 
-export const IconMenu: Story<MenuProps> = (args) => <Menu {...args} asIcon />
+export const IconMenu: StoryFn<MenuProps> = (args) => <Menu {...args} asIcon />