diff --git a/.storybook/main.js b/.storybook/main.js index 3aed07347..0099bf728 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,20 +1,23 @@ const webpackCommon = require('../webpack.common'); module.exports = { - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-links', - 'storybook-css-modules', '@storybook/addon-a11y', 'storybook-addon-rtl', ], + staticDirs: ['../public/assets'], - framework: '@storybook/react', - core: { - builder: 'webpack5', + + framework: { + name: '@storybook/react-webpack5', + options: {}, }, + typescript: { check: false, checkOptions: {}, @@ -25,6 +28,7 @@ module.exports = { prop.parent ? !/node_modules/.test(prop.parent.fileName) : true, }, }, + webpackFinal: async (config, { configType }) => { const webpackCommonConfig = webpackCommon( {}, @@ -40,4 +44,8 @@ module.exports = { }, }; }, + + docs: { + autodocs: true, + }, }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 8a8d686a0..0943ece64 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,2 +1,2 @@ -import { initializeRTL } from 'storybook-addon-rtl'; -initializeRTL(); +// import { initializeRTL } from 'storybook-addon-rtl'; +// initializeRTL(); diff --git a/package.json b/package.json index 948b9dff6..8c43125cd 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "url": "https://github.com/EightfoldAI/octuple" }, "scripts": { - "storybook": "start-storybook -p 2022", - "build-storybook": "rm -rf storybook-static && mkdir storybook-static && build-storybook -o storybook-static", + "storybook": "storybook dev -p 2022", + "build-storybook": "rm -rf storybook-static && mkdir storybook-static && storybook build -o storybook-static", "build": "rm -rf lib && yarn lint && rollup -c", "build:webpack": "rm -rf lib && yarn lint && webpack --config webpack.prod.js --mode production", "details": "webpack --config webpack.dev.js --mode development --stats-error-details", @@ -111,23 +111,21 @@ "@rollup/plugin-node-resolve": "15.2.3", "@rollup/plugin-terser": "0.4.4", "@rollup/plugin-typescript": "11.1.6", - "@storybook/addon-a11y": "6.5.13", - "@storybook/addon-actions": "6.5.13", - "@storybook/addon-docs": "6.5.13", - "@storybook/addon-essentials": "6.5.13", - "@storybook/addon-interactions": "6.5.13", - "@storybook/addon-links": "6.5.13", - "@storybook/addon-postcss": "2.0.0", - "@storybook/addon-storyshots": "6.5.13", - "@storybook/addon-viewport": "6.5.13", - "@storybook/addons": "6.5.13", - "@storybook/builder-webpack5": "6.5.13", - "@storybook/manager-webpack5": "6.5.13", - "@storybook/node-logger": "6.5.13", + "@storybook/addon-a11y": "7.6.20", + "@storybook/addon-actions": "7.6.20", + "@storybook/addon-docs": "7.6.20", + "@storybook/addon-essentials": "7.6.20", + "@storybook/addon-interactions": "7.6.20", + "@storybook/addon-links": "7.6.20", + "@storybook/addon-storyshots": "7.6.20", + "@storybook/addon-viewport": "7.6.20", + "@storybook/addons": "7.6.20", + "@storybook/node-logger": "7.6.20", "@storybook/preset-scss": "1.0.3", - "@storybook/react": "6.5.13", - "@storybook/source-loader": "6.5.13", - "@storybook/theming": "6.5.13", + "@storybook/react": "7.6.20", + "@storybook/react-webpack5": "7.6.20", + "@storybook/source-loader": "7.6.20", + "@storybook/theming": "7.6.20", "@svgr/webpack": "6.3.1", "@teamsupercell/typings-for-css-modules-loader": "2.5.1", "@testing-library/jest-dom": "5.16.2", @@ -220,9 +218,9 @@ "sinon": "14.0.1", "source-map-loader": "3.0.0", "standard-version": "9.5.0", + "storybook": "7.6.20", "storybook-addon-rtl": "0.4.3", "storybook-addon-state": "1.0.3", - "storybook-css-modules": "1.0.5", "style-loader": "3.3.1", "style-resources-loader": "1.5.0", "terser-webpack-plugin": "5.2.5", diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx index e43d75511..3ecb2e9cb 100644 --- a/src/components/Accordion/Accordion.stories.tsx +++ b/src/components/Accordion/Accordion.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { Accordion, AccordionProps, AccordionSize, AccordionShape } from './'; import { Button, ButtonShape, ButtonVariant } from '../Button'; import { Badge } from '../Badge'; @@ -60,7 +60,7 @@ export default { control: 'select', }, }, -} as ComponentMeta; +} as Meta; const listItems: AccordionProps[] = [ { @@ -98,7 +98,7 @@ const buttons = [0, 1].map((i) => ({ variant: i === 0 ? ButtonVariant.Neutral : ButtonVariant.Secondary, })); -const Single_Story: ComponentStory = (args) => ( +const Single_Story: StoryFn = (args) => ( ); @@ -106,7 +106,7 @@ interface ListStoryArgs { items: AccordionProps[]; theme?: OcThemeName; } -const List_Story: ComponentStory = (args: ListStoryArgs) => { +const List_Story: StoryFn = (args: ListStoryArgs) => { const { theme, ...restProps } = args; return ( @@ -119,7 +119,7 @@ const List_Story: ComponentStory = (args: ListStoryArgs) => { ); }; -const Custom_Story: ComponentStory = (args) => ( +const Custom_Story: StoryFn = (args) => ( ); diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index 41eb065b5..35da3786a 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { IconName } from '../Icon'; import { Avatar, @@ -40,30 +40,28 @@ export default { control: { type: 'inline-radio' }, }, }, -} as ComponentMeta; +} as Meta; const imageProps = { src: 'https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg', alt: 'random profile image', }; -const Avatar_Story: ComponentStory = (args) => ( - -); +const Avatar_Story: StoryFn = (args) => ; -const Avatar_Round_Story: ComponentStory = (args) => ( +const Avatar_Round_Story: StoryFn = (args) => ( ); -const Avatar_Fallback_Theme_Story: ComponentStory = (args) => ( +const Avatar_Fallback_Theme_Story: StoryFn = (args) => ( ); -const Avatar_Fallback_Hashing_Story: ComponentStory = (args) => ( +const Avatar_Fallback_Hashing_Story: StoryFn = (args) => ( 3} /> ); -const Avatar_StatusItem_Story: ComponentStory = (args) => { +const Avatar_StatusItem_Story: StoryFn = (args) => { const avatarSize = 100; const [statusItemSize] = getStatusItemSizeAndPadding(avatarSize); args.size = `${avatarSize}px`; @@ -210,7 +208,7 @@ const Avatar_StatusItem_Story: ComponentStory = (args) => { ); }; -const Avatar_Tooltip_Story: ComponentStory = (args) => ( +const Avatar_Tooltip_Story: StoryFn = (args) => ( ); diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index 30ff08eb4..f6a2aa01c 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; import { action } from '@storybook/addon-actions'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { Avatar, AvatarGroup, AvatarGroupVariant, AvatarPopupProps } from '.'; import { TooltipSize, TooltipTheme } from '../Tooltip'; @@ -33,7 +33,7 @@ export default { control: { type: 'inline-radio' }, }, }, -} as ComponentMeta; +} as Meta; const imageProps = { src: 'https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg', @@ -70,7 +70,7 @@ const sampleList: User[] = [ randomiseTheme: true, })); -const Basic_Story: ComponentStory = (args) => ( +const Basic_Story: StoryFn = (args) => ( = (args) => ( ); -const List_Story: ComponentStory = (args) => ( +const List_Story: StoryFn = (args) => ( ; +} as Meta; -const Badge_Story: ComponentStory = (args) => ; -const Badge_Popup_Story: ComponentStory = (args) => ( +const Badge_Story: StoryFn = (args) => ; +const Badge_Popup_Story: StoryFn = (args) => ( ; +} as Meta; -const Breadcrumb_Story: ComponentStory = (args) => ( +const Breadcrumb_Story: StoryFn = (args) => ( ); diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 2eb0687f5..23ce2f8d0 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import { Button, ButtonIconAlign, @@ -179,11 +179,9 @@ export default { control: { type: 'radio' }, }, }, -} as ComponentMeta; +} as Meta; -const Button_Story: ComponentStory = (args) => ( -