Fix - Revisao de componentes

apps/docs/.storybook/preview.cjs

@@ -2,7 +2,9 @@ import { themes } from '@storybook/theming'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  layout: 'centered',
   controls: {
+    expanded: true,
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,

apps/docs/src/stories/Button/Icon.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { CheckCircle } from 'phosphor-react'
+
+import { Button, ButtonIconProps } from '@coaktion/visu'
+
+export default {
+  title: 'Button/Icon',
+  component: Button.Icon,
+  argTypes: {
+    children: {
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+  },
+  args: {
+    children: '',
+  },
+} as Meta<ButtonIconProps>
+
+const Template: ComponentStory<typeof Button.Icon> = (args) => {
+  return (
+    <Button.Icon {...args}>
+      <CheckCircle />
+    </Button.Icon>
+  )
+}
+
+export const Comum = Template.bind({})

apps/docs/src/stories/Button/Root.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { CheckCircle } from 'phosphor-react'
+
+import { Button, ButtonRootProps } from '@coaktion/visu'
+
+export default {
+  title: 'Button/Root',
+  component: Button.Root,
+  argTypes: {
+    children: {
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      description: 'Define o tamanho do botão',
+      options: ['sm', 'md', 'lg'],
+      table: {
+        type: {
+          summary: ['sm', 'md', 'lg'].join('|'),
+        },
+        defaultValue: { summary: 'md' },
+      },
+      type: { name: 'string', required: false },
+    },
+    ghost: {
+      control: 'boolean',
+      description: 'Aplica o estilo ghost',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Desabilita o botão',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Define o evento de click',
+      table: { type: { summary: 'function' } },
+    },
+  },
+  args: {
+    children: '',
+    size: 'md',
+    ghost: false,
+    disabled: false,
+  },
+} as Meta<ButtonRootProps>
+
+export const Comum: StoryObj<ButtonRootProps> = {
+  args: {
+    children: 'Clique aqui',
+  },
+}
+
+export const ComIcone: StoryObj<ButtonRootProps> = {
+  argTypes: {
+    children: {
+      control: 'none',
+    },
+  },
+  args: {
+    children: [
+      'Clique aqui',
+      <Button.Icon key="icon">
+        <CheckCircle />
+      </Button.Icon>,
+    ],
+  },
+}
+
+export const ComIconeNaEsquerda: StoryObj<ButtonRootProps> = {
+  argTypes: {
+    children: {
+      control: 'none',
+    },
+  },
+  args: {
+    children: [
+      <Button.Icon key="icon">
+        <CheckCircle />
+      </Button.Icon>,
+      'Clique aqui',
+    ],
+  },
+}

apps/docs/src/stories/Input/Icon.stories.tsx

@@ -0,0 +1,42 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { Envelope } from 'phosphor-react'
+
+import { Input, InputIconProps } from '@coaktion/visu'
+
+export default {
+  title: 'Input/Icon',
+  component: Input.Icon,
+  argTypes: {
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Desabilita o ícone',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+    },
+  },
+  args: {
+    disabled: false,
+  },
+} as Meta<InputIconProps>
+
+const Template: ComponentStory<typeof Input.Icon> = (args) => {
+  return (
+    <Input.Icon {...args}>
+      <Envelope />
+    </Input.Icon>
+  )
+}
+
+export const Comum = Template.bind({})
+
+export const ComAcaoDeClique = Template.bind({})
+ComAcaoDeClique.argTypes = {
+  onClick: {
+    action: 'clicked',
+    description: 'Define o evento de click',
+    table: { type: { summary: 'function' } },
+  },
+}

apps/docs/src/stories/Input/Input.stories.tsx

@@ -0,0 +1,45 @@
+import { ComponentStory, Meta } from '@storybook/react'
+
+import { Input, InputInputProps } from '@coaktion/visu'
+
+export default {
+  title: 'Input/Input',
+  component: Input.Input,
+  argTypes: {
+    placeholder: {
+      control: { type: 'text' },
+      description: 'Placeholder do input',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: '',
+      },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Desabilita o input',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+    },
+  },
+  args: {
+    placeholder: 'Escreva seu email aqui',
+    disabled: false,
+  },
+} as Meta<InputInputProps>
+
+const Template: ComponentStory<typeof Input.Input> = (args) => {
+  return (
+    <>
+      Input comum com todas as propriedades de um input comum
+      <br />
+      <Input.Input {...args} />
+    </>
+  )
+}
+
+export const Comum = Template.bind({})