docs: change stories suffix to use with storybook 8

juntossomosmais · Dec 19, 2024 · 15f4df6 · 15f4df6
1 parent 4b40ba2
commit 15f4df6
Show file tree

Hide file tree

Showing 38 changed files with 267 additions and 289 deletions.
diff --git a/apps/docs-react/stories/0_Introduction.mdx b/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.
diff --git a/apps/docs-react/stories/0_Introduction.stories.mdx b/apps/docs-react/stories/0_Introduction.stories.mdx
diff --git a/apps/docs-vue/stories/0_Introduction.mdx b/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.
diff --git a/apps/docs-vue/stories/0_Introduction.stories.mdx b/apps/docs-vue/stories/0_Introduction.stories.mdx
diff --git a/apps/docs/stories/0_Introduction.mdx b/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>
diff --git a/apps/docs/stories/0_Introduction.stories.mdx b/apps/docs/stories/0_Introduction.stories.mdx
diff --git a/apps/docs/stories/1_0_Core.mdx 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'
+
+<Meta title="Getting Started/Web Components" />
+
+<Markdown>
+  {README}
+</Markdown>
diff --git a/apps/docs/stories/1_0_Core.stories.mdx b/apps/docs/stories/1_0_Core.stories.mdx
diff --git a/apps/docs/stories/1_1_React.mdx 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'
+
+<Meta title="Getting Started/React" />
+
+<Markdown>
+  {README}
+</Markdown>
diff --git a/apps/docs/stories/1_1_React.stories.mdx b/apps/docs/stories/1_1_React.stories.mdx
diff --git a/apps/docs/stories/1_2_Vue.mdx 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'
+
+<Meta title="Getting Started/Vue" />
+
+<Markdown>
+  {README}
+</Markdown>
diff --git a/apps/docs/stories/1_2_Vue.stories.mdx b/apps/docs/stories/1_2_Vue.stories.mdx
diff --git a/apps/docs/stories/1_3_Tokens.mdx 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'
+
+<Meta title="Getting Started/Tokens" />
+
+<Markdown>
+  {README}
+</Markdown>
diff --git a/apps/docs/stories/1_3_Tokens.stories.mdx b/apps/docs/stories/1_3_Tokens.stories.mdx
diff --git a/apps/docs/stories/1_4_Icons.stories.mdx → apps/docs/stories/1_4_Icons.mdx b/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>
diff --git a/...ecords/0000-why-design-system.stories.mdx → ...cision-records/0000-why-design-system.mdx b/...ecords/0000-why-design-system.stories.mdx → ...cision-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
 

diff --git a/...cords/0001-why-web-components.stories.mdx → ...ision-records/0001-why-web-components.mdx b/...cords/0001-why-web-components.stories.mdx → ...ision-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
 

diff --git a/...cision-records/0002-why-ionic.stories.mdx → ...cture-decision-records/0002-why-ionic.mdx b/...cision-records/0002-why-ionic.stories.mdx → ...cture-decision-records/0002-why-ionic.mdx
@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title='Docs/Architecture Decision Records/ADR 0002: Why Ionic?' />
+<Meta title="Docs/Architecture Decision Records/ADR 0002: Why Ionic?" />
 
 # ADR 0002: Why Ionic?
 
@@ -12,20 +12,20 @@ We need to choose a Material's framework UI to build our web components design s
 
 ## Decision Drivers
 
-- We need to build UI components using web components
-- We need a framework with Material Design components
-- We need a complete suite of components
-- We need a framework that is easy to integrate with other frameworks
-- We need a framework with good documentation
-- We need a framework with a good community
+* We need to build UI components using web components
+* We need a framework with Material Design components
+* We need a complete suite of components
+* We need a framework that is easy to integrate with other frameworks
+* We need a framework with good documentation
+* We need a framework with a good community
 
 ## Considered Options
 
-- **[Material Web Components](https://github.com/material-components/material-web)**: a web component library that implements the Material Design guidelines. It provides a set of pre-built components that can be used with any web framework. Material Web Components are built using modern web technologies and are designed to work across different platforms and browsers. However, it is still in beta version, and some components may not be available.
+* **[Material Web Components](https://github.com/material-components/material-web)**: a web component library that implements the Material Design guidelines. It provides a set of pre-built components that can be used with any web framework. Material Web Components are built using modern web technologies and are designed to work across different platforms and browsers. However, it is still in beta version, and some components may not be available.
 
-- **[Material Design Lite](https://getmdl.io/)**: a front-end framework that implements Material Design guidelines. It provides a set of pre-built components and styles to help developers create web applications with a consistent look and feel. Material Design Lite is a lightweight framework that is easy to use and can be customized to fit the needs of different projects. However, it doesn't use web components, which may limit its compatibility with certain frameworks.
+* **[Material Design Lite](https://getmdl.io/)**: a front-end framework that implements Material Design guidelines. It provides a set of pre-built components and styles to help developers create web applications with a consistent look and feel. Material Design Lite is a lightweight framework that is easy to use and can be customized to fit the needs of different projects. However, it doesn't use web components, which may limit its compatibility with certain frameworks.
 
-- **[Ionic](https://ionicframework.com/)**: a complete framework for building hybrid mobile and web applications. It provides a set of pre-built UI components, tools, and services to help developers create high-quality applications faster and more efficiently. Ionic is based on Angular, but it can also be used with other frameworks like React and Vue. It uses web technologies like HTML, CSS, and JavaScript to create cross-platform applications that work on different devices and operating systems. Ionic has a large community and a well-documented API, making it a popular choice for developers. However, it may not be the best fit for projects that do not require a full-featured framework.
+* **[Ionic](https://ionicframework.com/)**: a complete framework for building hybrid mobile and web applications. It provides a set of pre-built UI components, tools, and services to help developers create high-quality applications faster and more efficiently. Ionic is based on Angular, but it can also be used with other frameworks like React and Vue. It uses web technologies like HTML, CSS, and JavaScript to create cross-platform applications that work on different devices and operating systems. Ionic has a large community and a well-documented API, making it a popular choice for developers. However, it may not be the best fit for projects that do not require a full-featured framework.
 
 ## Decision
 

diff --git a/...sion-records/0003-why-stencil.stories.mdx → ...ure-decision-records/0003-why-stencil.mdx b/...sion-records/0003-why-stencil.stories.mdx → ...ure-decision-records/0003-why-stencil.mdx
@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/blocks'
 
-<Meta title='Docs/Architecture Decision Records/ADR 0003: Why Stencil?' />
+<Meta title="Docs/Architecture Decision Records/ADR 0003: Why Stencil?" />
 
 # ADR 0003: Why Stencil?
 
@@ -12,17 +12,17 @@ We need to choose a framework to build our web components library
 
 ## Decision Drivers
 
-- We need to build a web components library that is lightweight and performant.
-- We need a solution that is framework agnostic, so we can use it with any JavaScript framework.
-- We want to use a compiler to generate web components, to make development easier and more efficient.
-- We want to use a framework that has a good community, so we can get support and contribute to the ecosystem.
-- We need good integration with Ionic, React, and Vue, as these are the frameworks we use in our projects.
+* We need to build a web components library that is lightweight and performant.
+* We need a solution that is framework agnostic, so we can use it with any JavaScript framework.
+* We want to use a compiler to generate web components, to make development easier and more efficient.
+* We want to use a framework that has a good community, so we can get support and contribute to the ecosystem.
+* We need good integration with Ionic, React, and Vue, as these are the frameworks we use in our projects.
 
 ## Considered Options
 
-- **[Lit](https://lit.dev/)**: A library for building fast, lightweight web components. Not a compiler, so we would need to use a separate tool to generate web components.
-- **[Svelte](https://svelte.dev/)**: A framework that shifts most of the work to a compile step, making it fast and lightweight. Not a compiler for web components, so we would need to use a separate tool to generate them.
-- **[Stencil](https://stenciljs.com/)**: A compiler for generating web components and progressive web apps. Framework agnostic with a good community and good integrations with Ionic, React, and Vue.
+* **[Lit](https://lit.dev/)**: A library for building fast, lightweight web components. Not a compiler, so we would need to use a separate tool to generate web components.
+* **[Svelte](https://svelte.dev/)**: A framework that shifts most of the work to a compile step, making it fast and lightweight. Not a compiler for web components, so we would need to use a separate tool to generate them.
+* **[Stencil](https://stenciljs.com/)**: A compiler for generating web components and progressive web apps. Framework agnostic with a good community and good integrations with Ionic, React, and Vue.
 
 ## Decision