diff --git a/example/.babelrc.json b/example/.babelrc.json new file mode 100644 index 0000000..b5cf683 --- /dev/null +++ b/example/.babelrc.json @@ -0,0 +1,16 @@ +{ + "sourceType": "unambiguous", + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "chrome": 100 + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ], + "plugins": [] +} \ No newline at end of file diff --git a/example/.storybook/main.js b/example/.storybook/main.js index 41e98ec..0c5e17d 100644 --- a/example/.storybook/main.js +++ b/example/.storybook/main.js @@ -1,11 +1,6 @@ const path = require('path') - const toPath = (_path) => path.join(process.cwd(), _path) - module.exports = { - core: { - builder: 'webpack5', - }, stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', @@ -25,5 +20,11 @@ module.exports = { }, }, }), - framework: '@storybook/react', + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, + docs: { + autodocs: true, + }, } diff --git a/example/.storybook/preview.js b/example/.storybook/preview.js index ce2a84f..5dd9ac6 100644 --- a/example/.storybook/preview.js +++ b/example/.storybook/preview.js @@ -1,7 +1,6 @@ -import React from 'react' -import { addDecorator } from '@storybook/react' -import { SolvedGlobalStyles, solvedThemes } from '@solved-ac/ui-react' import { ThemeProvider } from '@emotion/react' +import { SolvedGlobalStyles, solvedThemes } from '@solved-ac/ui-react' +import React from 'react' export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, @@ -13,11 +12,11 @@ export const parameters = { }, } -addDecorator((Story) => { - return ( +export const decorators = [ + (Story) => ( - ) -}) + ), +] diff --git a/example/package.json b/example/package.json index 44f4129..edc39a0 100644 --- a/example/package.json +++ b/example/package.json @@ -8,8 +8,8 @@ "build": "node ../node_modules/react-scripts/bin/react-scripts.js build", "test": "node ../node_modules/react-scripts/bin/react-scripts.js test", "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject", - "storybook": "start-storybook -p 6006 -s public", - "build-storybook": "build-storybook -s public" + "storybook": "storybook dev -p 6006 -s public", + "build-storybook": "storybook build -s public" }, "dependencies": { "@emotion/react": "link:../node_modules/@emotion/react", @@ -21,28 +21,31 @@ "@testing-library/user-event": "link:../node_modules/@testing-library/user-event", "@types/jest": "link:../node_modules/@types/jest", "@types/node": "link:../node_modules/@types/node", - "@types/react-dom": "link:../node_modules/@types/react-dom", - "@types/react-icons": "link:../node_modules/@types/react-icons", "@types/react": "link:../node_modules/@types/react", + "@types/react-dom": "link:../node_modules/@types/react-dom", "framer-motion": "link:../node_modules/framer-motion", + "react": "link:../node_modules/react", "react-dom": "link:../node_modules/react-dom", "react-scripts": "link:../node_modules/react-scripts", - "react-icons": "link:../node_modules/react-icons", - "react": "link:../node_modules/react", "typescript": "link:../node_modules/typescript" }, "devDependencies": { + "@babel/core": "^7.0.0", "@babel/plugin-syntax-object-rest-spread": "^7.8.3", - "@storybook/addon-actions": "^6.4.22", - "@storybook/addon-essentials": "^6.4.22", - "@storybook/addon-interactions": "^6.4.22", - "@storybook/addon-links": "^6.4.22", - "@storybook/builder-webpack5": "^6.4.22", - "@storybook/manager-webpack5": "^6.4.22", - "@storybook/node-logger": "^6.4.22", - "@storybook/preset-create-react-app": "^4.1.0", - "@storybook/react": "^6.4.22", - "@storybook/testing-library": "^0.0.11", + "@babel/preset-env": "^7.22.5", + "@babel/preset-react": "^7.22.5", + "@babel/preset-typescript": "^7.22.5", + "@storybook/addon-actions": "^7.0.21", + "@storybook/addon-essentials": "^7.0.21", + "@storybook/addon-interactions": "^7.0.21", + "@storybook/addon-links": "^7.0.21", + "@storybook/node-logger": "^7.0.21", + "@storybook/preset-create-react-app": "^7.0.21", + "@storybook/react": "^7.0.21", + "@storybook/react-webpack5": "^7.0.21", + "@storybook/testing-library": "^0.1.0", + "babel-plugin-dynamic-import-node": "^2.3.3", + "storybook": "^7.0.21", "webpack": "5" }, "eslintConfig": { diff --git a/example/src/stories/Button.stories.tsx b/example/src/stories/Button.stories.tsx index 0cac717..27a8b2b 100644 --- a/example/src/stories/Button.stories.tsx +++ b/example/src/stories/Button.stories.tsx @@ -1,5 +1,5 @@ import { Button } from '@solved-ac/ui-react' -import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Meta, StoryFn } from '@storybook/react' import React from 'react' export default { @@ -48,9 +48,9 @@ export default { description: 'The element to render the button as', }, }, -} as ComponentMeta +} as Meta -const Template: ComponentStory = (args) =>