From 49a9522b1d83ac55b0423bc29ec6e1b81bf4b6f9 Mon Sep 17 00:00:00 2001 From: Felipe Fialho Date: Fri, 20 Dec 2024 09:38:42 -0300 Subject: [PATCH] docs(core): update storybook to v8 (#668) --- apps/docs-react/.storybook/main.ts | 6 +- apps/docs-react/.storybook/manager.ts | 2 +- apps/docs-react/.storybook/preview.ts | 1 - apps/docs-react/stories/0_Introduction.mdx | 9 + .../stories/0_Introduction.stories.mdx | 31 - apps/docs-vue/.storybook/main.ts | 6 +- apps/docs-vue/.storybook/manager.ts | 2 +- apps/docs-vue/.storybook/preview.ts | 1 - apps/docs-vue/stories/0_Introduction.mdx | 9 + .../stories/0_Introduction.stories.mdx | 34 - apps/docs/.storybook/main.ts | 9 +- apps/docs/.storybook/manager.ts | 2 +- apps/docs/.storybook/preview.ts | 1 - apps/docs/stories/0_Introduction.mdx | 9 + apps/docs/stories/0_Introduction.stories.mdx | 7 - apps/docs/stories/1_0_Core.mdx | 9 + apps/docs/stories/1_0_Core.stories.mdx | 7 - apps/docs/stories/1_1_React.mdx | 9 + apps/docs/stories/1_1_React.stories.mdx | 7 - apps/docs/stories/1_2_Vue.mdx | 9 + apps/docs/stories/1_2_Vue.stories.mdx | 7 - apps/docs/stories/1_3_Tokens.mdx | 9 + apps/docs/stories/1_3_Tokens.stories.mdx | 7 - .../{1_4_Icons.stories.mdx => 1_4_Icons.mdx} | 29 +- ...stories.mdx => 0000-why-design-system.mdx} | 14 +- ...tories.mdx => 0001-why-web-components.mdx} | 14 +- ...y-ionic.stories.mdx => 0002-why-ionic.mdx} | 22 +- ...encil.stories.mdx => 0003-why-stencil.mdx} | 20 +- ...po.stories.mdx => 0004-why-a-monorepo.mdx} | 16 +- ...005-why-nx.stories.mdx => 0005-why-nx.mdx} | 22 +- ...hy-that-component-creation-definition.mdx} | 16 +- ...spile-web-components-for-react-and-vue.mdx | 40 + ...b-components-for-react-and-vue.stories.mdx | 40 - ...ries.mdx => 0008-why-do-we-need-grids.mdx} | 4 +- ...eadcrumb-component-event-undocumented.mdx} | 4 +- ....mdx => 0010-why-do-we-need-react-fix.mdx} | 8 +- ...why-host-our-own-icon-library-and-cdn.mdx} | 14 +- ... 0012-why-have-a-carousel-with-swiper.mdx} | 10 +- ...y-do-we-need-to-convert-carousel-item.mdx} | 16 +- ....stories.mdx => 0014-why-use-popperjs.mdx} | 14 +- package-lock.json | 11838 +++++----------- package.json | 26 +- .../{1_Colors.stories.mdx => 1_Colors.mdx} | 30 +- ...{2_Spacings.stories.mdx => 2_Spacings.mdx} | 4 +- ...ypography.stories.mdx => 3_Typography.mdx} | 6 +- .../{4_Screens.stories.mdx => 4_Screens.mdx} | 4 +- .../{5_Grid.stories.mdx => 5_Grid.mdx} | 4 +- .../{6_Misc.stories.mdx => 6_Misc.mdx} | 15 +- ..._Elevation.stories.mdx => 7_Elevation.mdx} | 27 +- 49 files changed, 3627 insertions(+), 8823 deletions(-) create mode 100644 apps/docs-react/stories/0_Introduction.mdx delete mode 100644 apps/docs-react/stories/0_Introduction.stories.mdx create mode 100644 apps/docs-vue/stories/0_Introduction.mdx delete mode 100644 apps/docs-vue/stories/0_Introduction.stories.mdx create mode 100644 apps/docs/stories/0_Introduction.mdx delete mode 100644 apps/docs/stories/0_Introduction.stories.mdx create mode 100644 apps/docs/stories/1_0_Core.mdx delete mode 100644 apps/docs/stories/1_0_Core.stories.mdx create mode 100644 apps/docs/stories/1_1_React.mdx delete mode 100644 apps/docs/stories/1_1_React.stories.mdx create mode 100644 apps/docs/stories/1_2_Vue.mdx delete mode 100644 apps/docs/stories/1_2_Vue.stories.mdx create mode 100644 apps/docs/stories/1_3_Tokens.mdx delete mode 100644 apps/docs/stories/1_3_Tokens.stories.mdx rename apps/docs/stories/{1_4_Icons.stories.mdx => 1_4_Icons.mdx} (63%) rename apps/docs/stories/architecture-decision-records/{0000-why-design-system.stories.mdx => 0000-why-design-system.mdx} (79%) rename apps/docs/stories/architecture-decision-records/{0001-why-web-components.stories.mdx => 0001-why-web-components.mdx} (77%) rename apps/docs/stories/architecture-decision-records/{0002-why-ionic.stories.mdx => 0002-why-ionic.mdx} (84%) rename apps/docs/stories/architecture-decision-records/{0003-why-stencil.stories.mdx => 0003-why-stencil.mdx} (77%) rename apps/docs/stories/architecture-decision-records/{0004-why-a-monorepo.stories.mdx => 0004-why-a-monorepo.mdx} (80%) rename apps/docs/stories/architecture-decision-records/{0005-why-nx.stories.mdx => 0005-why-nx.mdx} (77%) rename apps/docs/stories/architecture-decision-records/{0006-why-that-component-creation-definition.stories.mdx => 0006-why-that-component-creation-definition.mdx} (80%) create mode 100644 apps/docs/stories/architecture-decision-records/0007-why-do-we-transpile-web-components-for-react-and-vue.mdx delete mode 100644 apps/docs/stories/architecture-decision-records/0007-why-do-we-transpile-web-components-for-react-and-vue.stories.mdx rename apps/docs/stories/architecture-decision-records/{0008-why-do-we-need-grids.stories.mdx => 0008-why-do-we-need-grids.mdx} (92%) rename apps/docs/stories/architecture-decision-records/{0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.stories.mdx => 0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx} (86%) rename apps/docs/stories/architecture-decision-records/{0010-why-do-we-need-react-fix.stories.mdx => 0010-why-do-we-need-react-fix.mdx} (83%) rename apps/docs/stories/architecture-decision-records/{0011-why-host-our-own-icon-library-and-cdn.stories.mdx => 0011-why-host-our-own-icon-library-and-cdn.mdx} (78%) rename apps/docs/stories/architecture-decision-records/{0012-why-have-a-carousel-with-swiper.stories.mdx => 0012-why-have-a-carousel-with-swiper.mdx} (79%) rename apps/docs/stories/architecture-decision-records/{0013-why-do-we-need-to-convert-carousel-item.stories.mdx => 0013-why-do-we-need-to-convert-carousel-item.mdx} (90%) rename apps/docs/stories/architecture-decision-records/{0014-why-use-popperjs.stories.mdx => 0014-why-use-popperjs.mdx} (71%) rename packages/tokens/stories/{1_Colors.stories.mdx => 1_Colors.mdx} (83%) rename packages/tokens/stories/{2_Spacings.stories.mdx => 2_Spacings.mdx} (87%) rename packages/tokens/stories/{3_Typography.stories.mdx => 3_Typography.mdx} (96%) rename packages/tokens/stories/{4_Screens.stories.mdx => 4_Screens.mdx} (90%) rename packages/tokens/stories/{5_Grid.stories.mdx => 5_Grid.mdx} (91%) rename packages/tokens/stories/{6_Misc.stories.mdx => 6_Misc.mdx} (86%) rename packages/tokens/stories/{7_Elevation.stories.mdx => 7_Elevation.mdx} (85%) diff --git a/apps/docs-react/.storybook/main.ts b/apps/docs-react/.storybook/main.ts index b1c34b4a4..6b34cc91d 100644 --- a/apps/docs-react/.storybook/main.ts +++ b/apps/docs-react/.storybook/main.ts @@ -1,15 +1,15 @@ module.exports = { stories: [ - '../stories/*.stories.@(js|jsx|ts|tsx|mdx)', - '../../../packages/core/src/**/*.react.stories.@(js|jsx|ts|tsx|mdx)', + '../stories/*.@(mdx|stories.@(js|jsx|ts|tsx))', + '../../../packages/core/src/**/*.react.@(mdx|stories.@(js|jsx|ts|tsx))', ], addons: [ '@storybook/addon-essentials', - '@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-viewport', '@storybook/theming', + '@storybook/addon-webpack5-compiler-babel', ], framework: { name: '@storybook/react-webpack5', diff --git a/apps/docs-react/.storybook/manager.ts b/apps/docs-react/.storybook/manager.ts index 859d761e4..bbbc921f7 100644 --- a/apps/docs-react/.storybook/manager.ts +++ b/apps/docs-react/.storybook/manager.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons' +import { addons } from '@storybook/manager-api' import theme from '@atomium/storybook-utils/theme' diff --git a/apps/docs-react/.storybook/preview.ts b/apps/docs-react/.storybook/preview.ts index 50f2931c6..2bc2cee15 100644 --- a/apps/docs-react/.storybook/preview.ts +++ b/apps/docs-react/.storybook/preview.ts @@ -11,7 +11,6 @@ const preview = { viewport: { viewports: CustomViewports, }, - actions: { argTypesRegex: '^atom.*' }, docs: { page: DocumentationTemplate, }, diff --git a/apps/docs-react/stories/0_Introduction.mdx b/apps/docs-react/stories/0_Introduction.mdx new file mode 100644 index 000000000..4cb3001ea --- /dev/null +++ b/apps/docs-react/stories/0_Introduction.mdx @@ -0,0 +1,9 @@ +import { Meta } from '@storybook/blocks' + + + +# About React Components + +All [React Components is generated by Stencil](https://stenciljs.com/docs/react) using [Stencil's output target](https://stenciljs.com/docs/react#output-targets) to automatically generate React components from our Atomium's web components. + +The target of this stories is run Atomium's web components in React environment and show how to use the components. diff --git a/apps/docs-react/stories/0_Introduction.stories.mdx b/apps/docs-react/stories/0_Introduction.stories.mdx deleted file mode 100644 index 378fad06b..000000000 --- a/apps/docs-react/stories/0_Introduction.stories.mdx +++ /dev/null @@ -1,31 +0,0 @@ -import { Meta } from '@storybook/addon-docs' - - - -# About React Components - -All [React Components is generated by Stencil](https://stenciljs.com/docs/react) using [Stencil's output target](https://stenciljs.com/docs/react#output-targets) to automatically generate React components from our Atomium's web components. - -The target of this stories is run Atomium's web components in React environment and show how to use the components. - -**!important** - -There is a problem to render the code of [React's components outputed by Stencil in Storybook](https://github.com/storybookjs/storybook/issues/22287), so the code of the components is not shown correctly in the stories. - -Example, in [Button component](?path=/docs/react_components-button--docs): - -```jsx - - Button - -``` - -The code above is not shown correctly in the stories, but it is correct in the source code: - -```jsx - - Button - -``` - -Just keep in mind that when check the code of the components inside Storybook diff --git a/apps/docs-vue/.storybook/main.ts b/apps/docs-vue/.storybook/main.ts index 1efc25c8d..d86b212be 100644 --- a/apps/docs-vue/.storybook/main.ts +++ b/apps/docs-vue/.storybook/main.ts @@ -1,15 +1,15 @@ module.exports = { stories: [ - '../stories/*.stories.@(js|jsx|ts|tsx|mdx)', - '../../../packages/core/src/**/*.vue.stories.@(js|jsx|ts|tsx|mdx)', + '../stories/*.@(mdx|stories.@(js|jsx|ts|tsx))', + '../../../packages/core/src/**/*.vue.@(mdx|stories.@(js|jsx|ts|tsx))', ], addons: [ '@storybook/addon-essentials', - '@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-viewport', '@storybook/theming', + '@storybook/addon-webpack5-compiler-babel', ], framework: { name: '@storybook/vue3-vite', diff --git a/apps/docs-vue/.storybook/manager.ts b/apps/docs-vue/.storybook/manager.ts index 859d761e4..bbbc921f7 100644 --- a/apps/docs-vue/.storybook/manager.ts +++ b/apps/docs-vue/.storybook/manager.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons' +import { addons } from '@storybook/manager-api' import theme from '@atomium/storybook-utils/theme' diff --git a/apps/docs-vue/.storybook/preview.ts b/apps/docs-vue/.storybook/preview.ts index d33577b66..384c49bd6 100644 --- a/apps/docs-vue/.storybook/preview.ts +++ b/apps/docs-vue/.storybook/preview.ts @@ -15,7 +15,6 @@ const preview = { viewport: { viewports: CustomViewports, }, - actions: { argTypesRegex: '^atom.*' }, docs: { page: DocumentationTemplate, }, diff --git a/apps/docs-vue/stories/0_Introduction.mdx b/apps/docs-vue/stories/0_Introduction.mdx new file mode 100644 index 000000000..ab1246a25 --- /dev/null +++ b/apps/docs-vue/stories/0_Introduction.mdx @@ -0,0 +1,9 @@ +import { Meta } from '@storybook/blocks' + + + +# About Vue Components + +All [Vue Components is generated by Stencil](https://stenciljs.com/docs/vue) using [Stencil's output target](https://stenciljs.com/docs/vue#output-targets) to automatically generate Vue components from our Atomium's web components. + +The target of this stories is run Atomium's web components in Vue environment and show how to use the components. diff --git a/apps/docs-vue/stories/0_Introduction.stories.mdx b/apps/docs-vue/stories/0_Introduction.stories.mdx deleted file mode 100644 index 222625dd0..000000000 --- a/apps/docs-vue/stories/0_Introduction.stories.mdx +++ /dev/null @@ -1,34 +0,0 @@ -import { Meta } from '@storybook/addon-docs' - - - -# About Vue Components - -All [Vue Components is generated by Stencil](https://stenciljs.com/docs/vue) using [Stencil's output target](https://stenciljs.com/docs/vue#output-targets) to automatically generate Vue components from our Atomium's web components. - -The target of this stories is run Atomium's web components in Vue environment and show how to use the components. - -**!important** - -There is a problem to render the code of [Vue's components outputed by Stencil in Storybook](https://github.com/storybookjs/storybook/issues/22287), so the code of the components is not shown correctly in the stories. - -Example, in [Button component](?path=/docs/react_components-button--docs): - -```jsx -{ - render: args => createButton(args), - args: { - ...ButtonComponentArgs - } -} -``` - -The code above is not shown correctly in the stories, but it is correct in the source code: - -```jsx - - Button - -``` - -Just keep in mind that when check the code of the components inside Storybook diff --git a/apps/docs/.storybook/main.ts b/apps/docs/.storybook/main.ts index 08874cb68..dd5dfb1f3 100644 --- a/apps/docs/.storybook/main.ts +++ b/apps/docs/.storybook/main.ts @@ -29,18 +29,17 @@ function getStorybookRefs(configType: string) { const config: StorybookConfig = { stories: [ - '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)', - '../../../packages/core/src/**/*.core.stories.@(js|jsx|ts|tsx|mdx)', - '../../../packages/tokens/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)', + '../stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))', + '../../../packages/core/src/**/*.core.@(mdx|stories.@(js|jsx|ts|tsx))', + '../../../packages/tokens/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))', ], addons: [ '@storybook/addon-essentials', - '@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-viewport', '@storybook/theming', - '@storybook/addon-mdx-gfm', + '@storybook/addon-webpack5-compiler-babel', ], staticDirs: ['../../../packages/icons/svg'], framework: { diff --git a/apps/docs/.storybook/manager.ts b/apps/docs/.storybook/manager.ts index 859d761e4..bbbc921f7 100644 --- a/apps/docs/.storybook/manager.ts +++ b/apps/docs/.storybook/manager.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons' +import { addons } from '@storybook/manager-api' import theme from '@atomium/storybook-utils/theme' diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts index 1c8473a60..f1f9fbfda 100644 --- a/apps/docs/.storybook/preview.ts +++ b/apps/docs/.storybook/preview.ts @@ -15,7 +15,6 @@ const preview = { viewport: { viewports: CustomViewports, }, - actions: { argTypesRegex: '^atom.*' }, docs: { page: DocumentationTemplate, }, diff --git a/apps/docs/stories/0_Introduction.mdx b/apps/docs/stories/0_Introduction.mdx new file mode 100644 index 000000000..765088763 --- /dev/null +++ b/apps/docs/stories/0_Introduction.mdx @@ -0,0 +1,9 @@ +import { Meta, Markdown } from '@storybook/blocks' + +import README from '../../../README.md?raw' + + + + + {README} + diff --git a/apps/docs/stories/0_Introduction.stories.mdx b/apps/docs/stories/0_Introduction.stories.mdx deleted file mode 100644 index febda9b8f..000000000 --- a/apps/docs/stories/0_Introduction.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta, Markdown } from '@storybook/addon-docs' - -import README from '../../../README.md?raw' - - - -{README} diff --git a/apps/docs/stories/1_0_Core.mdx b/apps/docs/stories/1_0_Core.mdx new file mode 100644 index 000000000..9cfb6c75d --- /dev/null +++ b/apps/docs/stories/1_0_Core.mdx @@ -0,0 +1,9 @@ +import { Meta, Markdown } from '@storybook/blocks' + +import README from '../../../packages/core/README.md?raw' + + + + + {README} + diff --git a/apps/docs/stories/1_0_Core.stories.mdx b/apps/docs/stories/1_0_Core.stories.mdx deleted file mode 100644 index 23d445c2f..000000000 --- a/apps/docs/stories/1_0_Core.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta, Markdown } from '@storybook/addon-docs' - -import README from '../../../packages/core/README.md?raw' - - - -{README} diff --git a/apps/docs/stories/1_1_React.mdx b/apps/docs/stories/1_1_React.mdx new file mode 100644 index 000000000..0474182af --- /dev/null +++ b/apps/docs/stories/1_1_React.mdx @@ -0,0 +1,9 @@ +import { Meta, Markdown } from '@storybook/blocks' + +import README from '../../../packages/react/README.md?raw' + + + + + {README} + diff --git a/apps/docs/stories/1_1_React.stories.mdx b/apps/docs/stories/1_1_React.stories.mdx deleted file mode 100644 index dc43fe9e9..000000000 --- a/apps/docs/stories/1_1_React.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta, Markdown } from '@storybook/addon-docs' - -import README from '../../../packages/react/README.md?raw' - - - -{README} diff --git a/apps/docs/stories/1_2_Vue.mdx b/apps/docs/stories/1_2_Vue.mdx new file mode 100644 index 000000000..26419713b --- /dev/null +++ b/apps/docs/stories/1_2_Vue.mdx @@ -0,0 +1,9 @@ +import { Meta, Markdown } from '@storybook/blocks' + +import README from '../../../packages/vue/README.md?raw' + + + + + {README} + diff --git a/apps/docs/stories/1_2_Vue.stories.mdx b/apps/docs/stories/1_2_Vue.stories.mdx deleted file mode 100644 index 5389027cd..000000000 --- a/apps/docs/stories/1_2_Vue.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta, Markdown } from '@storybook/addon-docs' - -import README from '../../../packages/vue/README.md?raw' - - - -{README} diff --git a/apps/docs/stories/1_3_Tokens.mdx b/apps/docs/stories/1_3_Tokens.mdx new file mode 100644 index 000000000..89858b691 --- /dev/null +++ b/apps/docs/stories/1_3_Tokens.mdx @@ -0,0 +1,9 @@ +import { Meta, Markdown } from '@storybook/blocks' + +import README from '../../../packages/tokens/README.md?raw' + + + + + {README} + diff --git a/apps/docs/stories/1_3_Tokens.stories.mdx b/apps/docs/stories/1_3_Tokens.stories.mdx deleted file mode 100644 index bf9125ad9..000000000 --- a/apps/docs/stories/1_3_Tokens.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta, Markdown } from '@storybook/addon-docs' - -import README from '../../../packages/tokens/README.md?raw' - - - -{README} diff --git a/apps/docs/stories/1_4_Icons.stories.mdx b/apps/docs/stories/1_4_Icons.mdx similarity index 63% rename from apps/docs/stories/1_4_Icons.stories.mdx rename to apps/docs/stories/1_4_Icons.mdx index 6793d6675..9d8ba75b2 100644 --- a/apps/docs/stories/1_4_Icons.stories.mdx +++ b/apps/docs/stories/1_4_Icons.mdx @@ -2,41 +2,42 @@ import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks' import { iconsList } from '../utils/icons-list' - + # Icons The icons are a collection of icons that can be used in your components. It is based on the [Material Design Icons](https://materialdesignicons.com/) library but we can also add our own custom icons. -- [Architecture decisions](/docs/docs-architecture-decision-records-adr-0011-why-host-our-own-icon-library-and-why-cdn--docs) -- [Using icons](/docs/components-icon--docs) -- [How add a custom icon](https://github.com/juntossomosmais/atomium/tree/main/packages/icons#adding-a-new-icon) +* [Architecture decisions](/docs/docs-architecture-decision-records-adr-0011-why-host-our-own-icon-library-and-why-cdn--docs) +* [Using icons](/docs/components-icon--docs) +* [How add a custom icon](https://github.com/juntossomosmais/atomium/tree/main/packages/icons#adding-a-new-icon) ## List of icons See the list of all available icons: -