docs(core): update storybook to v8 (#668)

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',

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'
 

apps/docs-react/.storybook/preview.ts

@@ -11,7 +11,6 @@ const preview = {
     viewport: {
       viewports: CustomViewports,
     },
-    actions: { argTypesRegex: '^atom.*' },
     docs: {
       page: DocumentationTemplate,
     },

apps/docs-react/stories/0_Introduction.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title='Introduction' />
+
+# 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.

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',

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'
 

apps/docs-vue/.storybook/preview.ts

@@ -15,7 +15,6 @@ const preview = {
     viewport: {
       viewports: CustomViewports,
     },
-    actions: { argTypesRegex: '^atom.*' },
     docs: {
       page: DocumentationTemplate,
     },

apps/docs-vue/stories/0_Introduction.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title='Introduction' />
+
+# 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.

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: {

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'
 

apps/docs/.storybook/preview.ts

@@ -15,7 +15,6 @@ const preview = {
     viewport: {
       viewports: CustomViewports,
     },
-    actions: { argTypesRegex: '^atom.*' },
     docs: {
       page: DocumentationTemplate,
     },

apps/docs/stories/0_Introduction.mdx

@@ -0,0 +1,9 @@
+import { Meta, Markdown } from '@storybook/blocks'
+
+import README from '../../../README.md?raw'
+
+<Meta title="Introduction" />
+
+<Markdown>
+  {README}
+</Markdown>

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'
+
+<Meta title="Getting Started/Web Components" />
+
+<Markdown>
+  {README}
+</Markdown>

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'
+
+<Meta title="Getting Started/React" />
+
+<Markdown>
+  {README}
+</Markdown>

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'
+
+<Meta title="Getting Started/Vue" />
+
+<Markdown>
+  {README}
+</Markdown>

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'
+
+<Meta title="Getting Started/Tokens" />
+
+<Markdown>
+  {README}
+</Markdown>

apps/docs/stories/1_4_Icons.stories.mdx → 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'
 
-<Meta title='Getting Started/Icons' />
+<Meta title="Getting Started/Icons" />
 
 # 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:
 
-<details class='icon-gallery'>
+<details class="icon-gallery">
   <summary>Custom Icons</summary>
 
   <p>Some custom icons have the `-colorful` variation because they have specific colors that make up their identity.</p>
 
   <IconGallery>
     {iconsList?.custom?.map((icon) => (
-      <IconItem name={icon}>
-        <atom-icon icon={icon}></atom-icon>
-      </IconItem>
-    ))}
+          <IconItem name={icon}>
+            <atom-icon icon={icon}></atom-icon>
+          </IconItem>
+        ))}
   </IconGallery>
 </details>
 
-<details class='icon-gallery'>
+<details class="icon-gallery">
   <summary>Material Design Icons</summary>
+
   <IconGallery>
     {iconsList?.mdi?.map((icon) => (
-      <IconItem name={icon}>
-        <atom-icon icon={icon}></atom-icon>
-      </IconItem>
-    ))}
+          <IconItem name={icon}>
+            <atom-icon icon={icon}></atom-icon>
+          </IconItem>
+        ))}
   </IconGallery>
 </details>

apps/docs/stories/architecture-decision-records/0000-why-design-system.stories.mdx → apps/docs/stories/architecture-decision-records/0000-why-design-system.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title='Docs/Architecture Decision Records/ADR 0000: Why Design System?' />
+<Meta title="Docs/Architecture Decision Records/ADR 0000: Why Design System?" />
 
 # ADR 0000: Why Design System?
 
@@ -14,11 +14,11 @@ Create a new design system will allow us to create reusable components, establis
 
 ## Decision Drivers
 
-- **Consistency**: We want to ensure that all of our digital products have a consistent look and feel, which can be achieved through the use of a design system.
-- **Efficiency**: By creating a set of reusable components and clear design guidelines, we can increase efficiency and reduce duplication of effort across multiple projects.
-- **Scalability**: As our organization grows and we take on more projects, a design system will become even more important to maintain consistency and efficiency.
-- **Collaboration**: A design system will help to facilitate collaboration between designers and developers, making it easier to communicate design decisions and ensure that everyone is on the same page.
-- **Branding**: By establishing clear visual guidelines and using consistent branding elements, we can help to build and reinforce our brand across all digital products.
+* **Consistency**: We want to ensure that all of our digital products have a consistent look and feel, which can be achieved through the use of a design system.
+* **Efficiency**: By creating a set of reusable components and clear design guidelines, we can increase efficiency and reduce duplication of effort across multiple projects.
+* **Scalability**: As our organization grows and we take on more projects, a design system will become even more important to maintain consistency and efficiency.
+* **Collaboration**: A design system will help to facilitate collaboration between designers and developers, making it easier to communicate design decisions and ensure that everyone is on the same page.
+* **Branding**: By establishing clear visual guidelines and using consistent branding elements, we can help to build and reinforce our brand across all digital products.
 
 ## Decision
 

apps/docs/stories/architecture-decision-records/0001-why-web-components.stories.mdx → apps/docs/stories/architecture-decision-records/0001-why-web-components.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title='Docs/Architecture Decision Records/ADR 0001: Why Web Components?' />
+<Meta title="Docs/Architecture Decision Records/ADR 0001: Why Web Components?" />
 
 # ADR 0001: Why Web Components?
 
@@ -12,11 +12,11 @@ We need to decide which technology and architecture to use for building componen
 
 ## Decision Drivers
 
-- Reusability: We need our components to be reusable across different projects.
-- Framework agnostic: We need our components to be usable in different frameworks, such as React, Vue, and Angular.
-- Platform agnostic: We need our components to be usable on different platforms, such as web, mobile, and desktop.
-- Device agnostic: We need our components to be usable on different devices, such as desktops, laptops, tablets, and mobile phones.
-- Browser compatibility: We need our components to work on different browsers, such as Chrome, Firefox, Safari, and Edge.
+* Reusability: We need our components to be reusable across different projects.
+* Framework agnostic: We need our components to be usable in different frameworks, such as React, Vue, and Angular.
+* Platform agnostic: We need our components to be usable on different platforms, such as web, mobile, and desktop.
+* Device agnostic: We need our components to be usable on different devices, such as desktops, laptops, tablets, and mobile phones.
+* Browser compatibility: We need our components to work on different browsers, such as Chrome, Firefox, Safari, and Edge.
 
 ## Decision