fix: storybook

README.md

@@ -20,6 +20,8 @@ O projeto é um monorepo, que foi criado utilizando o [Turborepo](https://turbo.
 
 Projeto onde são desenvolvidas as documentações dos components do Visu. Utilizando principalmente o [Storybook](https://storybook.js.org/). Os componentes documentados são baseados no último build feito na biblioteca, então é necessários que haja pelo menos um build antes de documentar os componentes.
 
+_**Importante:** Antes de criar/modificar uma story de qualquer componente **SEMPRE** construa o Visu e execute o comando `npm run install` para atualizar as dependências do Storybook (especialmente o Visu)_
+
 ### Package
 
 Projeto onde são desenvolvidos os componentes e o design system da biblioteca Visu. O projeto utiliza principalmente [Vite](https://vitejs.dev), [React](https://react.dev/) e [Tailwindcss](https://tailwindcss.com/).

docs/.storybook/manager.js

@@ -1,8 +1,8 @@
 import { addons } from '@storybook/addons'
-import theme from './theme.js'
+import { themes } from '@storybook/theming';
 
 addons.setConfig({
-  theme,
+  theme: themes.dark,
 
   sidebar: {
     showRoots: false,

docs/.storybook/preview.js

@@ -1,4 +1,4 @@
-import theme from './theme.js'
+import { themes } from '@storybook/theming';
 
 import '@droz-js/visu/styles'
 
@@ -13,7 +13,7 @@ export const parameters = {
     },
   },
   docs: {
-    theme,
+    theme: themes.dark,
   },
   backgrounds: {
     default: 'Light',

docs/src/index.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Início" />
+
+![Visu](./visu.svg)
+
+<br/><br/><br/>
+
+## Welcome!
+Visu is a component library and design system developed for Coaktion products.
+Use the browser sidebar to chose between Visu components and test them using the Storybook playground
+
+## Important
+Before create/modify a component story *ALWAYS* build Visu and run _npm install_ to update Storybook dependencies (specially Visu)
+
+## Installing
+Install the library in a React project with the command _npm i @droz-js/visu_
+
+## Configuration
+Visu is built using Tailwind CSS as a basis for styling components, making it work in different environments. Based on this, there are 2 ways to install Visu to your project
+
+- ### Project *WITH* Tailwindcss
+To use in projects **WITH** Tailwindcss it is necessary to import the styling of _@droz-js/visu/dist/theme-plugin_ as a **plugin** and _@droz-js/visu/dist/visu.es.js_ needs to be added to **content** in your _tailwind.config.js_ file.
+
+- ### Project *WITHOUT* Tailwindcss
+To use in projects **WITHOUT** Tailwindcss, you need to import the styling from _@droz-js/visu/styles_ into your global styles file.
+
+## Using
+Once the library is configured, simply import a component and add it to the project.

docs/src/stories/Accordion/Root.stories.tsx

@@ -52,7 +52,10 @@ export const Single: AccordionRootStory = {
   render: (args: AccordionRootProps) => {
     return (
       <Accordion.Root {...args}>
-        <Accordion.Item value="default1">
+        <Accordion.Item
+          value="default1"
+          style={{ width: '20rem', marginBlock: '0.5rem' }}
+        >
           <Accordion.Header>
             <span>Accordion</span>
             <Accordion.Trigger />
@@ -66,7 +69,10 @@ export const Single: AccordionRootStory = {
             </span>
           </Accordion.Content>
         </Accordion.Item>
-        <Accordion.Item value="default2">
+        <Accordion.Item
+          value="default2"
+          style={{ width: '20rem', marginBlock: '0.5rem' }}
+        >
           <Accordion.Header>
             <span>Accordion</span>
             <Accordion.Trigger />
@@ -80,7 +86,10 @@ export const Single: AccordionRootStory = {
             </span>
           </Accordion.Content>
         </Accordion.Item>
-        <Accordion.Item value="default3">
+        <Accordion.Item
+          value="default3"
+          style={{ width: '20rem', marginBlock: '0.5rem' }}
+        >
           <Accordion.Header>
             <span>Accordion</span>
             <Accordion.Trigger />
@@ -106,7 +115,10 @@ export const Multiple: AccordionRootStory = {
   render: (args: AccordionRootProps) => {
     return (
       <Accordion.Root {...args}>
-        <Accordion.Item value="default1">
+        <Accordion.Item
+          value="default1"
+          style={{ width: '20rem', marginBlock: '0.5rem' }}
+        >
           <Accordion.Header>
             <span>Accordion</span>
             <Accordion.Trigger />
@@ -120,7 +132,10 @@ export const Multiple: AccordionRootStory = {
             </span>
           </Accordion.Content>
         </Accordion.Item>
-        <Accordion.Item value="default2">
+        <Accordion.Item
+          value="default2"
+          style={{ width: '20rem', marginBlock: '0.5rem' }}
+        >
           <Accordion.Header>
             <span>Accordion</span>
             <Accordion.Trigger />
@@ -134,7 +149,10 @@ export const Multiple: AccordionRootStory = {
             </span>
           </Accordion.Content>
         </Accordion.Item>
-        <Accordion.Item value="default3">
+        <Accordion.Item
+          value="default3"
+          style={{ width: '20rem', marginBlock: '0.5rem' }}
+        >
           <Accordion.Header>
             <span>Accordion</span>
             <Accordion.Trigger />

docs/src/stories/Dialog/Body.stories.tsx

@@ -30,7 +30,7 @@ const meta: Meta<DialogBodyProps> = {
     (Story) => (
       <Dialog.Root>
         <Dialog.Trigger asChild>
-          <Button.Root>Dialog</Button.Root>
+          <Button>Dialog</Button>
         </Dialog.Trigger>
         <Dialog.Content>
           <Story />

docs/src/stories/Dialog/Close.stories.tsx

@@ -42,7 +42,7 @@ const meta: Meta<DialogCloseProps> = {
     (Story) => (
       <Dialog.Root>
         <Dialog.Trigger asChild>
-          <Button.Root>Dialog</Button.Root>
+          <Button>Dialog</Button>
         </Dialog.Trigger>
         <Dialog.Content>
           <Dialog.Footer>
@@ -78,9 +78,9 @@ export const BotaoComoFilho: DialogCloseStory = {
   args: {
     asChild: true,
     children: (
-      <Button.Root variant="secondary" ghost>
+      <Button variant="secondary" ghost>
         Fechar
-      </Button.Root>
+      </Button>
     ),
   },
   render: (args) => {

docs/src/stories/Dialog/Content.stories.tsx

@@ -87,7 +87,7 @@ const meta: Meta<DialogContentProps> = {
     (Story) => (
       <Dialog.Root>
         <Dialog.Trigger asChild>
-          <Button.Root>Dialog</Button.Root>
+          <Button>Dialog</Button>
         </Dialog.Trigger>
         <Story />
       </Dialog.Root>

docs/src/stories/Dialog/Footer.stories.tsx

@@ -45,7 +45,7 @@ const meta: Meta<DialogFooterProps> = {
     (Story) => (
       <Dialog.Root>
         <Dialog.Trigger asChild>
-          <Button.Root>Dialog</Button.Root>
+          <Button>Dialog</Button>
         </Dialog.Trigger>
         <Dialog.Content>
           <Dialog.Body />
@@ -73,9 +73,9 @@ export const ComBotoesFinal: DialogFooterStory = {
   args: {
     align: 'right',
     children: [
-      <Button.Root key="confirmar">Confirmar</Button.Root>,
+      <Button key="confirmar">Confirmar</Button>,
       <Dialog.Close key="cancelar" asChild>
-        <Button.Root ghost>Cancelar</Button.Root>
+        <Button ghost>Cancelar</Button>
       </Dialog.Close>,
     ],
   },

docs/src/stories/Dialog/Header.stories.tsx

@@ -64,7 +64,7 @@ const meta: Meta<DialogHeaderProps> = {
     (Story) => (
       <Dialog.Root>
         <Dialog.Trigger asChild>
-          <Button.Root>Dialog</Button.Root>
+          <Button>Dialog</Button>
         </Dialog.Trigger>
         <Dialog.Content>
           <Story />

docs/src/stories/Dialog/Root.stories.tsx

@@ -78,7 +78,7 @@ export const Default: DialogRootStory = {
   args: {
     children: [
       <Dialog.Trigger key={''}>
-        <Button.Root>Dialog</Button.Root>
+        <Button>Dialog</Button>
       </Dialog.Trigger>,
 
       <Dialog.Content key={''}></Dialog.Content>,
@@ -101,7 +101,7 @@ export const Full: DialogRootStory = {
   args: {
     children: [
       <Dialog.Trigger key={''}>
-        <Button.Root>Dialog</Button.Root>
+        <Button>Dialog</Button>
       </Dialog.Trigger>,
 
       <Dialog.Content key={''}>
@@ -160,9 +160,9 @@ export const Full: DialogRootStory = {
         </Dialog.Body>
 
         <Dialog.Footer>
-          <Button.Root>Confirmar</Button.Root>
+          <Button>Confirmar</Button>
           <Dialog.Close asChild>
-            <Button.Root ghost>Cancelar</Button.Root>
+            <Button ghost>Cancelar</Button>
           </Dialog.Close>
         </Dialog.Footer>
       </Dialog.Content>,

docs/src/stories/Dialog/Trigger.stories.tsx

@@ -53,7 +53,7 @@ type DialogTriggerStory = StoryObj<DialogTriggerProps>
 
 export const Comum: DialogTriggerStory = {
   args: {
-    children: <Button.Root>Dialog Trigger</Button.Root>,
+    children: <Button>Dialog Trigger</Button>,
   },
   render: (args) => {
     return <Dialog.Trigger {...args}></Dialog.Trigger>

docs/src/stories/FloatCard/Content.stories.tsx

@@ -44,9 +44,7 @@ export const Comum: FloatCardContentStory = {
         </FloatCard.Trigger>
         <FloatCard.Content {...args}>
           <div className="flex flex-col">
-            <Avatar.Root>
-              <Avatar.Fallback fallback="FC" />
-            </Avatar.Root>
+            <Avatar fallback="FC" />
             <span>
               O FloatCard é utilizado para estruturas mais complexas do que um
               Tooltip.

docs/src/stories/FloatCard/Root.stories.tsx

@@ -31,9 +31,7 @@ export const Comum: FloatCardRootStory = {
         </FloatCard.Trigger>
         <FloatCard.Content>
           <div className="flex flex-col">
-            <Avatar.Root>
-              <Avatar.Fallback fallback="FC" />
-            </Avatar.Root>
+            <Avatar fallback="FC" />
             <span>
               O FloatCard é utilizado para estruturas mais complexas do que um
               Tooltip.

docs/src/stories/FloatCard/Trigger.stories.tsx

@@ -34,9 +34,7 @@ export const Comum: FloatCardRootStory = {
         </FloatCard.Trigger>
         <FloatCard.Content>
           <div className="flex flex-col">
-            <Avatar.Root>
-              <Avatar.Fallback fallback="FC" />
-            </Avatar.Root>
+            <Avatar fallback="FC" />
             <span>
               O FloatCard é utilizado para estruturas mais complexas do que um
               Tooltip.
@@ -61,16 +59,12 @@ export const ComComponente: FloatCardRootStory = {
         <FloatCard.Root>
           <FloatCard.Trigger {...args}>
             <div>
-              <Avatar.Root>
-                <Avatar.Fallback fallback="FC" />
-              </Avatar.Root>
+              <Avatar fallback="FC" />
             </div>
           </FloatCard.Trigger>
           <FloatCard.Content>
             <div className="flex flex-col">
-              <Avatar.Root>
-                <Avatar.Fallback fallback="FC" />
-              </Avatar.Root>
+              <Avatar fallback="FC" />
               <span>
                 O FloatCard é utilizado para estruturas mais complexas do que um
                 Tooltip.

docs/src/stories/Toast/Provider.stories.tsx

@@ -66,7 +66,7 @@ export const Comum: ToastStory = {
     const { toast } = useToast()
 
     return (
-      <Button.Root
+      <Button
         onClick={() =>
           toast.success({
             desc: 'Descrição do toast',
@@ -76,7 +76,7 @@ export const Comum: ToastStory = {
         {...args}
       >
         Abrir toast
-      </Button.Root>
+      </Button>
     )
   },
 }

docs/src/stories/Toast/Root.stories.tsx

@@ -50,9 +50,7 @@ export const Alert: ToastStory = {
   render: (args) => {
     const { toast } = useToast()
 
-    return (
-      <Button.Root onClick={() => toast.alert(args)}>Abrir toast</Button.Root>
-    )
+    return <Button onClick={() => toast.alert(args)}>Abrir toast</Button>
   },
 }
 
@@ -61,9 +59,7 @@ export const Error: ToastStory = {
   render: (args) => {
     const { toast } = useToast()
 
-    return (
-      <Button.Root onClick={() => toast.error(args)}>Abrir toast</Button.Root>
-    )
+    return <Button onClick={() => toast.error(args)}>Abrir toast</Button>
   },
 }
 
@@ -72,8 +68,6 @@ export const Success: ToastStory = {
   render: (args) => {
     const { toast } = useToast()
 
-    return (
-      <Button.Root onClick={() => toast.success(args)}>Abrir toast</Button.Root>
-    )
+    return <Button onClick={() => toast.success(args)}>Abrir toast</Button>
   },
 }