@liguelead/design-system 0.0.28 → 0.0.30

package/components/Alert/Alert.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Alert from './Alert'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Feedback/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'danger', 'warning', 'info', 'success'],
+      description: 'Visual style variant of the alert'
+    },
+    title: {
+      control: 'text',
+      description: 'Alert title'
+    },
+    description: {
+      control: 'text',
+      description: 'Alert description'
+    },
+    hasButton: {
+      control: 'boolean',
+      description: 'Whether to show action button'
+    },
+    buttonLabel: {
+      control: 'text',
+      description: 'Action button label'
+    },
+    href: {
+      control: 'text',
+      description: 'Action button link'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Alert variant="default" title="Default Alert" description="This is a default alert message." />
+      <Alert variant="info" title="Info Alert" description="This is an informational alert message." />
+      <Alert variant="success" title="Success Alert" description="This is a success alert message." />
+      <Alert variant="warning" title="Warning Alert" description="This is a warning alert message." />
+      <Alert variant="danger" title="Danger Alert" description="This is a danger alert message." />
+    </div>
+  ),
+}
+
+export const Default: Story = {
+  args: {
+    title: 'Alert Title',
+    description: 'This is an alert description.',
+  },
+}

package/components/Button/Button.appearance.ts

@@ -47,7 +47,7 @@ export const ButtonVariant = (
         color: ${parsedColor};
         border: 1px solid ${parsedColor};
         &:hover {
-            background-color: ${parseColor(theme.colors.primaryDarker)};
+            background-color: ${parsedColor};
             border-color: transparent;
             color: ${parseColor(theme.colors.white)};
         }
@@ -63,7 +63,7 @@ export const ButtonVariant = (
         color: ${parsedColor};
         border: 1px solid transparent;
         &:hover {
-            background-color: ${parseColor(theme.colors.primaryDarker)};
+            background-color: ${parsedColor};
             color: ${parseColor(theme.colors.white)};
         }
         &:disabled {

package/components/Button/Button.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { themes } from '@liguelead/foundation'
+import Button from './Button'
+import type { ButtonVariantTypes } from './Button.types'
+
+const themeColors = Object.keys(themes.spa.colors)
+const buttonVariantOptions: ButtonVariantTypes[] = [
+  'solid',
+  'outline',
+  'ghost',
+  'neutralOutline',
+  'neutralGhost'
+]
+
+const meta: Meta<typeof Button> = {
+  title: 'Form/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: buttonVariantOptions,
+      description: 'Visual style variant of the button',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the button',
+    },
+    color: {
+      control: 'select',
+      options: themeColors,
+      description: 'Color theme of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the button takes full width',
+    },
+    children: {
+      control: 'text',
+      description: 'Button content',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+}
+
+export const Variants: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+      <Button {...args} variant="solid">Solid</Button>
+      <Button {...args} variant="outline">Outline</Button>
+      <Button {...args} variant="ghost">Ghost</Button>
+      <Button {...args} variant="neutralOutline">Neutral Outline</Button>
+      <Button {...args} variant="neutralGhost">Neutral Ghost</Button>
+    </div>
+  ),
+}

package/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Checkbox from './Checkbox'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Form/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Checkbox label'
+    },
+    description: {
+      control: 'text',
+      description: 'Checkbox description'
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Whether checkbox is checked'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether checkbox is disabled'
+    },
+    $hasError: {
+      control: 'boolean',
+      description: 'Whether checkbox has error state'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Checkbox Label',
+  },
+}

package/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Combobox from './Combobox'
+import { iconMap, iconOptions } from '../../../stories/utils/icons'
+
+const mockItems = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+  { value: 'option4', label: 'Option 4', disabled: true },
+]
+
+const meta = {
+  title: 'Form/Combobox',
+  component: Combobox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['single', 'multi'],
+      description: 'Combobox variant',
+    },
+    label: {
+      control: 'text',
+      description: 'Combobox label',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+    searchPlaceholder: {
+      control: 'text',
+      description: 'Search placeholder text',
+    },
+    emptyText: {
+      control: 'text',
+      description: 'Text shown when no options available',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below the combobox',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the combobox is disabled',
+    },
+    requiredSymbol: {
+      control: 'boolean',
+      description: 'Show required symbol',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the combobox',
+    },
+    width: {
+      control: 'number',
+      description: 'Width of the combobox',
+    },
+    createLabel: {
+      control: 'text',
+      description: 'Label for create option',
+    },
+    leftIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Left icon',
+    },
+  },
+} satisfies Meta<typeof Combobox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Select an option',
+    placeholder: 'Choose...',
+    items: mockItems,
+    leftIcon: 'none',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<string>('')
+    const [values, setValues] = useState<string[]>([])
+    
+    const selectedIcon = args.leftIcon === 'none' ? undefined : iconMap[args.leftIcon as keyof typeof iconMap]
+    
+    if (args.variant === 'multi') {
+      return (
+        <Combobox
+          {...args}
+          variant="multi"
+          leftIcon={selectedIcon}
+          values={values}
+          onChange={setValues}
+        />
+      )
+    }
+    
+    return (
+      <Combobox
+        {...args}
+        leftIcon={selectedIcon}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}

package/components/Combobox/Combobox.styles.ts

@@ -14,7 +14,7 @@ import { TextFieldSizeType } from '../TextField/TextField.sizes'
 import { StateInterface } from '../TextField/TextField.states'
 import Text from '../Text'
 
-type TStyledInputProps =  {
+type TStyledInputProps = {
     size: TextFieldSizeType
     $themefication: StateInterface
 }
@@ -185,14 +185,18 @@ export const ItemRow = styled(Command.Item)`
         color: ${({ theme }) => parseColor(theme.colors.white)};
     }
 
-    &:hover:not([data-disabled='true']):not([data-is-selected='true']:not([data-variant='multi'])) {
+    &:hover:not([data-disabled='true']) {
         background: ${({ theme }) => parseColor(theme.colors.primaryLight)};
     }
+
+    &[data-variant='single'][data-is-selected='true']:hover {
+        background: ${({ theme }) => parseColor(theme.colors.primary)};
+    }
 `
 
 export const ItemLabel = styled(Text)`
     padding-left: 4px;
-`;
+`
 
 
 export const RightIcon = styled.span`

package/components/Combobox/Combobox.tsx

@@ -16,7 +16,7 @@ import { TextFieldStates } from '../TextField/TextField.states'
 import { textFieldSizes } from '../TextField/TextField.sizes'
 
 import * as Popover from '@radix-ui/react-popover'
-import * as s  from './Combobox.styles'
+import * as s from './Combobox.styles'
 import { isMultiProps, normalizeData } from './utils'
 
 const Combobox = (props: ComboboxProps) => {
@@ -29,7 +29,6 @@ const Combobox = (props: ComboboxProps) => {
         leftIcon,
         items,
         groups,
-        onChange,
         placeholder = 'Selecionar',
         searchPlaceholder = 'Pesquisar',
         emptyText = 'Sem resultados.',
@@ -69,7 +68,7 @@ const Combobox = (props: ComboboxProps) => {
         const next = selectedValues.includes(value)
             ? selectedValues.filter(x => x !== value)
             : [...selectedValues, value]
-        ;(onChange as ((values: string[]) => void) | undefined)?.(next)
+        props.onChange?.(next)
     }
 
     return (
@@ -169,13 +168,7 @@ const Combobox = (props: ComboboxProps) => {
                                                             toggle(item.value)
                                                             return
                                                         }
-                                                        ;(
-                                                            onChange as
-                                                                | ((
-                                                                        value: string
-                                                                    ) => void)
-                                                                | undefined
-                                                        )?.(item.value)
+                                                        props.onChange?.(item.value)
                                                         setOpen(false)
                                                     }}
                                                     data-selected={

package/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { DateRange } from 'react-day-picker'
+import { useState } from 'react'
+import DatePicker from './DatePicker'
+
+const meta = {
+  title: 'Form/DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the DatePicker'
+    },
+    mode: {
+      control: 'select',
+      options: ['single', 'range'],
+      description: 'Selection mode of the DatePicker'
+    },
+    label: {
+      control: 'text',
+      description: 'Label for the DatePicker'
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when no date is selected'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the DatePicker is disabled'
+    },
+    inline: {
+      control: 'boolean',
+      description: 'Whether to display the DatePicker inline'
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback fired when a date is selected (single mode)'
+    },
+    onRangeChange: {
+      action: 'range changed',
+      description: 'Callback fired when a date range is selected (range mode)'
+    }
+  }
+} satisfies Meta<typeof DatePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleMode: Story = {
+  args: {
+    size: 'md',
+    mode: 'single',
+    label: 'Select a date',
+    placeholder: 'DD/MM/YYYY',
+    disabled: false,
+    inline: false,
+    value: undefined,
+    onChange: () => {}
+  },
+  render: (args) => {
+    const [value, setValue] = useState<Date | undefined>(args.value ?? undefined)
+
+    return (
+      <DatePicker
+        mode='single'
+        value={value}
+        onChange={(next) => {
+          setValue(next)
+          args.onChange?.(next)
+        }}
+      />
+    )
+  }
+}
+
+export const RangeMode: Story = {
+  args: {
+    size: 'md',
+    mode: 'range',
+    label: 'Select a date range',
+    placeholder: 'DD/MM/YYYY - DD/MM/YYYY',
+    disabled: false,
+    inline: false,
+    rangeValue: { from: undefined, to: undefined },
+    onRangeChange: () => {}
+  },
+  render: (args) => {
+    const [rangeValue, setRangeValue] = useState<DateRange | undefined>(
+      args.rangeValue ?? { from: undefined, to: undefined }
+    )
+    return (
+      <DatePicker
+        mode='range'
+        rangeValue={rangeValue}
+        onRangeChange={(next) => {
+          setRangeValue(next)
+          args.onRangeChange?.(next)
+        }}
+      />
+    )
+  }
+}
+