diff --git a/.babelrc.json b/.babelrc.json new file mode 100644 index 0000000..00ca841 --- /dev/null +++ b/.babelrc.json @@ -0,0 +1,16 @@ +{ + "sourceType": "unambiguous", + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "chrome": 100 + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ], + "plugins": [] +} diff --git a/.eslintrc.json b/.eslintrc.json index 8b47af2..a9b7910 100644 --- a/.eslintrc.json +++ b/.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" + } } diff --git a/.gitignore b/.gitignore index 217dfdc..4e41417 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,4 @@ yarn-error.log* #other .yarn +.nvmrc diff --git a/.storybook/main.js b/.storybook/main.js index fccff75..e8bd258 100644 --- a/.storybook/main.js +++ b/.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 + } +}; diff --git a/generators/templates/stories.tsx.hbs b/generators/templates/stories.tsx.hbs index 82ac950..1de1ee8 100644 --- a/generators/templates/stories.tsx.hbs +++ b/generators/templates/stories.tsx.hbs @@ -1,5 +1,5 @@ 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 { @@ -7,4 +7,4 @@ export default { component: {{pascalCase name}} } as Meta -export const Default: Story = (args) => <{{pascalCase name}} {...args} /> +export const Default: StoryFn = (args) => <{{pascalCase name}} {...args} /> diff --git a/package.json b/package.json index deaf560..713144f 100644 --- a/package.json +++ b/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,6 +57,7 @@ "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", @@ -60,6 +65,7 @@ "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", diff --git a/src/packages/Accordion/stories.tsx b/src/packages/Accordion/stories.tsx index c93f273..ce1a935 100644 --- a/src/packages/Accordion/stories.tsx +++ b/src/packages/Accordion/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 Accordion from '.' export default { @@ -7,7 +7,7 @@ export default { component: Accordion } as Meta -export const Default: Story = () => ( +export const Default: StoryFn = () => (

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod diff --git a/src/packages/Alert/stories.tsx b/src/packages/Alert/stories.tsx index f3ff7a4..4397998 100644 --- a/src/packages/Alert/stories.tsx +++ b/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 = (args) => +export const Default: StoryFn = (args) => diff --git a/src/packages/Avatar/stories.tsx b/src/packages/Avatar/stories.tsx index c932af3..9017576 100644 --- a/src/packages/Avatar/stories.tsx +++ b/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 = (args) => +export const Default: StoryFn = (args) => diff --git a/src/packages/Box/stories.tsx b/src/packages/Box/stories.tsx index 98991ef..bcd6244 100644 --- a/src/packages/Box/stories.tsx +++ b/src/packages/Box/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 Box from '.' export default { @@ -7,13 +7,13 @@ export default { component: Box } as Meta -export const Default: Story = (args) => ( +export const Default: StoryFn = (args) => ( <>hello ) -export const MultipleChildren: Story = (args) => ( +export const MultipleChildren: StoryFn = (args) => ( = (args) => ( +export const Default: StoryFn = (args) => ( ) diff --git a/src/packages/Button/stories.tsx b/src/packages/Button/stories.tsx index 95662ef..dbaf8dc 100644 --- a/src/packages/Button/stories.tsx +++ b/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 = (args) =>