@liguelead/design-system 0.0.33 → 0.0.35

package/components/SplitButton/SplitButton.stories.tsx

@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+    ArchiveIcon,
+    ClockIcon,
+    PencilSimpleIcon,
+    TrashIcon
+} from '@phosphor-icons/react'
+import SplitButton from './SplitButton'
+
+const meta: Meta<typeof SplitButton> = {
+    title: 'Form/SplitButton',
+    component: SplitButton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Botão dividido com ação principal e menu de opções secundárias.
+
+**Quando usar:**
+- Quando há uma ação primária clara, mas também ações alternativas relacionadas
+- Ex: "Publicar" com opções "Salvar rascunho" e "Agendar"
+
+**Composição:**
+- Lado esquerdo: botão de ação principal (\`onClick\`)
+- Lado direito: trigger que abre um \`DropdownMenu\` com as \`options\`
+                `
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Texto do botão principal'
+        },
+        variant: {
+            control: 'select',
+            options: ['solid', 'outline', 'ghost', 'neutralOutline', 'neutralGhost'],
+            description: 'Variante visual',
+            table: { defaultValue: { summary: 'neutralOutline' } }
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Tamanho do botão',
+            table: { defaultValue: { summary: 'sm' } }
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Desabilita ambos os botões',
+            table: { defaultValue: { summary: 'false' } }
+        }
+    }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultOptions = [
+    {
+        label: 'Salvar rascunho',
+        icon: <PencilSimpleIcon size={16} />,
+        onClick: () => console.log('rascunho')
+    },
+    {
+        label: 'Agendar',
+        icon: <ClockIcon size={16} />,
+        onClick: () => console.log('agendar')
+    },
+    {
+        label: 'Arquivar',
+        icon: <ArchiveIcon size={16} />,
+        onClick: () => console.log('arquivar')
+    }
+]
+
+export const Default: Story = {
+    args: {
+        label: 'Publicar',
+        onClick: () => console.log('publicar'),
+        options: defaultOptions
+    }
+}
+
+export const Tamanhos: Story = {
+    name: 'Tamanhos',
+    parameters: {
+        docs: {
+            description: { story: 'Três tamanhos disponíveis: `sm`, `md` e `lg`.' }
+        }
+    },
+    render: () => (
+        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+            <SplitButton
+                label="Pequeno"
+                size="sm"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Médio"
+                size="md"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Grande"
+                size="lg"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+        </div>
+    )
+}
+
+export const Variantes: Story = {
+    name: 'Variantes',
+    parameters: {
+        docs: {
+            description: { story: 'Herda as mesmas variantes do Button.' }
+        }
+    },
+    render: () => (
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <SplitButton
+                label="Neutral Outline"
+                variant="neutralOutline"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Solid"
+                variant="solid"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Outline"
+                variant="outline"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Ghost"
+                variant="ghost"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+        </div>
+    )
+}
+
+export const Desabilitado: Story = {
+    name: 'Estado desabilitado',
+    args: {
+        label: 'Publicar',
+        disabled: true,
+        onClick: () => {},
+        options: defaultOptions
+    }
+}
+
+export const SemIcones: Story = {
+    name: 'Opções sem ícone',
+    args: {
+        label: 'Ação',
+        onClick: () => {},
+        options: [
+            { label: 'Opção A', onClick: () => {} },
+            { label: 'Opção B', onClick: () => {} },
+            { label: 'Opção C (desabilitada)', onClick: () => {}, disabled: true }
+        ]
+    }
+}
+
+export const ExemploReal: Story = {
+    name: 'Exemplo: Publicação de conteúdo',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Padrão comum em sistemas de CMS ou gestão de tarefas.'
+            }
+        }
+    },
+    render: () => (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                padding: 16,
+                border: '1px solid #e5e7eb',
+                borderRadius: 8,
+                width: 400,
+                gap: 8
+            }}
+        >
+            <SplitButton
+                label="Publicar"
+                onClick={() => console.log('publicar')}
+                options={[
+                    {
+                        label: 'Salvar rascunho',
+                        icon: <PencilSimpleIcon size={16} />,
+                        onClick: () => console.log('rascunho')
+                    },
+                    {
+                        label: 'Agendar publicação',
+                        icon: <ClockIcon size={16} />,
+                        onClick: () => console.log('agendar')
+                    },
+                    {
+                        label: 'Mover para lixeira',
+                        icon: <TrashIcon size={16} />,
+                        onClick: () => console.log('lixeira')
+                    }
+                ]}
+            />
+        </div>
+    )
+}

package/components/SplitButton/SplitButton.styles.ts

@@ -0,0 +1,106 @@
+import styled from 'styled-components'
+import { fontSize, fontWeight, lineHeight, radius, shadow, spacing } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+export const Wrapper = styled.div`
+    display: inline-flex;
+    align-items: stretch;
+`
+
+export const MainButton = styled.button<{ $variant: string; $size: string }>`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s, box-shadow 0.3s;
+    ${({ $size }) => $size}
+    ${({ $variant }) => $variant}
+    border-radius: ${radius.radius4}px 0 0 ${radius.radius4}px;
+
+    &:focus-visible {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+`
+
+export const TriggerButton = styled(DropdownMenu.Trigger)<{
+    $variant: string
+    $size: string
+}>`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s, box-shadow 0.3s;
+    ${({ $size }) => $size}
+    ${({ $variant }) => $variant}
+    border-radius: 0 ${radius.radius4}px ${radius.radius4}px 0;
+
+    &:focus-visible {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    & svg {
+        width: 10px;
+        height: 10px;
+        pointer-events: none;
+    }
+`
+
+export const StyledContent = styled(DropdownMenu.Content)`
+    width: max-content;
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+    border-radius: ${radius.radius4}px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    z-index: 9999;
+    padding: 0;
+`
+
+export const StyledItem = styled(DropdownMenu.Item)`
+    height: ${spacing.spacing36}px;
+    padding: 0 ${spacing.spacing12}px;
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    cursor: pointer;
+    outline: none;
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    transition: background-color 0.2s ease;
+    user-select: none;
+    white-space: nowrap;
+
+    &[data-highlighted] {
+        background-color: ${({ theme }) => parseColor(theme.colors.primaryLight)};
+    }
+
+    &[data-disabled] {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    & svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    }
+`

package/components/SplitButton/SplitButton.tsx

@@ -0,0 +1,83 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { CaretDownIcon } from '@phosphor-icons/react'
+import { useTheme } from 'styled-components'
+import { ButtonVariant } from '../Button/Button.appearance'
+import { ButtonSizes } from '../Button/Button.sizes'
+import { parseColor } from '../../utils'
+import {
+    MainButton,
+    StyledContent,
+    StyledItem,
+    TriggerButton,
+    Wrapper
+} from './SplitButton.styles'
+import { SplitButtonTriggerSizes } from './SplitButton.sizes'
+import { SplitButtonProps } from './SplitButton.types'
+
+const SplitButton: React.FC<SplitButtonProps> = ({
+    label,
+    onClick,
+    options,
+    variant = 'neutralOutline',
+    color = 'primary',
+    size = 'sm',
+    disabled = false,
+    className
+}) => {
+    const theme = useTheme()
+    const buttonVariant = ButtonVariant(color, variant)
+    const buttonSize = ButtonSizes(size)
+    const triggerSize = SplitButtonTriggerSizes(size)
+
+    const mainVariantOverride = `
+        ${buttonVariant}
+        border-right: none;
+    `
+
+    const triggerVariantOverride = `
+        ${buttonVariant}
+        border-left: 1px solid ${parseColor(theme.colors.neutral400)};
+    `
+
+    return (
+        <DropdownMenu.Root>
+            <Wrapper className={className}>
+                <MainButton
+                    type="button"
+                    disabled={disabled}
+                    onClick={onClick}
+                    $variant={mainVariantOverride}
+                    $size={buttonSize}
+                >
+                    {label}
+                </MainButton>
+
+                <TriggerButton
+                    disabled={disabled}
+                    $variant={triggerVariantOverride}
+                    $size={triggerSize}
+                    aria-label="Mais opções"
+                >
+                    <CaretDownIcon weight="fill" />
+                </TriggerButton>
+            </Wrapper>
+
+            <DropdownMenu.Portal>
+                <StyledContent align="end" sideOffset={0}>
+                    {options.map((option, index) => (
+                        <StyledItem
+                            key={index}
+                            disabled={option.disabled}
+                            onSelect={option.onClick}
+                        >
+                            {option.icon}
+                            {option.label}
+                        </StyledItem>
+                    ))}
+                </StyledContent>
+            </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+    )
+}
+
+export default SplitButton

package/components/SplitButton/SplitButton.types.ts

@@ -0,0 +1,20 @@
+import { ButtonSizeTypes, ButtonVariantTypes } from '../Button/Button.types'
+import { colorType } from '../../types'
+
+export interface SplitButtonOption {
+    label: string
+    icon?: React.ReactNode
+    onClick: () => void
+    disabled?: boolean
+}
+
+export interface SplitButtonProps {
+    label: string
+    onClick: () => void
+    options: SplitButtonOption[]
+    variant?: ButtonVariantTypes
+    color?: colorType
+    size?: ButtonSizeTypes
+    disabled?: boolean
+    className?: string
+}

package/components/SplitButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SplitButton'
+export type { SplitButtonProps, SplitButtonOption } from './SplitButton.types'

package/components/Table/Table.tsx

@@ -98,6 +98,7 @@ function Table<TData>({
         isServerMode,
         controlled: datatableColumnFiltersValue,
         onChange: onDatatableColumnFiltersChange,
+        onClearSorting: (colId) => setSorting((prev) => prev.filter((s) => s.id !== colId)),
     })
 
     const queryState: TableQueryState = useMemo(() => ({
@@ -164,7 +165,7 @@ function Table<TData>({
     const currentPage = pagination.pageIndex + 1
 
     const hasActiveFilters = globalFilter !== '' || sorting.length > 0
-    const hasDatatableActiveFilters = globalFilter !== '' || columnFilters.length > 0
+    const hasDatatableActiveFilters = globalFilter !== '' || columnFilters.length > 0 || sorting.length > 0
 
     const handleClearFilters = () => {
         setGlobalFilter('')
@@ -172,6 +173,10 @@ function Table<TData>({
         setPagination((prev) => ({ ...prev, pageIndex: 0 }))
     }
 
+    const handleNumberSort = (colId: string, direction: 'asc' | 'desc' | null) => {
+        setSorting(direction ? [{ id: colId, desc: direction === 'desc' }] : [])
+    }
+
     const handleExport = async () => {
         if (onExport) {
             await onExport(queryState)
@@ -204,7 +209,10 @@ function Table<TData>({
                     enableColumnVisibility={datatableEnableColumnVisibility}
                     enableClearFilters={datatableEnableClearFilters}
                     hasActiveFilters={hasDatatableActiveFilters}
-                    onClearAll={() => handleClearAllFilters(() => setGlobalFilter(''))}
+                    onClearAll={() => {
+                        handleClearAllFilters(() => setGlobalFilter(''))
+                        setSorting([])
+                    }}
                     searchPlaceholder={searchPlaceholder}
                     searchWidth={searchWidth}
                     clearFiltersLabel={clearFiltersLabel}
@@ -263,6 +271,7 @@ function Table<TData>({
                         onFilterPopoverOpenChange={handlePopoverOpenChange}
                         onFilterValueChange={handleFilterValueChange}
                         onClearFilter={handleClearColumnFilter}
+                        onNumberSort={handleNumberSort}
                         labels={datatableFilterDropdownLabels}
                     />
                     <tbody>

package/components/Table/Table.types.ts

@@ -8,6 +8,7 @@ export type ColumnFilterValue =
     | { type: 'text'; value: string }
     | { type: 'dateRange'; value: { from?: Date; to?: Date } }
     | { type: 'select'; value: string | number | null }
+    | { type: 'numberSort'; value: 'asc' | 'desc' | null }
 
 export type DatatableColumnFilters = Record<string, ColumnFilterValue | undefined>
 
@@ -33,7 +34,7 @@ export interface ExportButtonConfig {
     ariaLabel?: string
 }
 
-export type DatatableFilterType = 'text' | 'dateRange' | 'select'
+export type DatatableFilterType = 'text' | 'dateRange' | 'select' | 'numberSort'
 
 export interface DatatableColumnMeta {
     filterType?: DatatableFilterType

package/components/Table/components/DatatableColumnFilterMenu/DatatableColumnFilterMenu.styles.ts

@@ -118,3 +118,45 @@ export const ClearFilterButtonWrapper = styled.span`
   align-items: center;
   justify-content: end;
 `
+
+export const NumberSortOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.spacing4}px;
+`
+
+export const NumberSortButton = styled.button<{ $active?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.spacing8}px;
+  width: 100%;
+  padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+  font-size: ${fontSize.fontSize14}px;
+  font-weight: ${fontWeight.fontWeight400};
+  border-radius: ${radius.radius4}px;
+  border: 1px solid ${({ theme, $active }) =>
+    $active ? parseColor(theme.colors.primary) : parseColor(theme.colors.neutral300)};
+  background: ${({ theme, $active }) =>
+    $active ? parseColor(theme.colors.primaryLighter) : parseColor(theme.colors.white)};
+  color: ${({ theme, $active }) =>
+    $active ? parseColor(theme.colors.primary) : parseColor(theme.colors.textDark)};
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  outline: none;
+
+  & svg {
+    flex-shrink: 0;
+    color: ${({ theme, $active }) =>
+      $active ? parseColor(theme.colors.primary) : parseColor(theme.colors.textMedium)};
+  }
+
+  &:hover:not([aria-pressed='true']) {
+    background: ${({ theme }) => parseColor(theme.colors.neutral100)};
+    border-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => parseColor(theme.colors.primary)};
+    outline-offset: 1px;
+  }
+`

package/components/Table/components/DatatableColumnFilterMenu/DatatableColumnFilterMenu.tsx

@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { XIcon } from '@phosphor-icons/react'
+import { ArrowDownIcon, ArrowUpIcon, XIcon } from '@phosphor-icons/react'
 import { DateRange } from 'react-day-picker'
 import DatePicker from '../../../DatePicker'
 import Select from '../../../Select'
@@ -19,6 +19,8 @@ import {
   FilterTriggerArea,
   FunnelActiveIcon,
   FunnelInactiveIcon,
+  NumberSortButton,
+  NumberSortOptions,
   StyledTextInput,
 } from './DatatableColumnFilterMenu.styles'
 
@@ -31,10 +33,10 @@ interface DatatableColumnFilterMenuProps {
   filterValue: ColumnFilterValue | undefined
   onFilterValueChange: (columnId: string, value: ColumnFilterValue | undefined) => void
   onClearFilter: (columnId: string) => void
+  onNumberSort: (colId: string, direction: 'asc' | 'desc' | null) => void
   labels?: DatatableFilterDropdownLabels
 }
 
-const SELECT_PLACEHOLDER_VALUE = '__placeholder__'
 
 function DatatableColumnFilterMenu({
   columnId,
@@ -45,25 +47,24 @@ function DatatableColumnFilterMenu({
   filterValue,
   onFilterValueChange,
   onClearFilter,
+  onNumberSort,
   labels = {},
 }: DatatableColumnFilterMenuProps) {
   const filterType = meta?.filterType
   const filterLabel = meta?.filterLabel ?? String(title)
   const filterPlaceholder = meta?.filterPlaceholder ?? 'Pesquisar...'
-  const selectOptions = [
-    { label: filterPlaceholder, value: SELECT_PLACEHOLDER_VALUE },
-    ...(meta?.selectOptions ?? []).map((o) => ({
-      label: o.label,
-      value: String(o.value),
-    })),
-  ]
+  const selectOptions = (meta?.selectOptions ?? []).map((o) => ({
+    label: o.label,
+    value: String(o.value),
+  }))
 
   const hasActiveFilter =
     filterValue !== undefined &&
     ((filterValue.type === 'text' && filterValue.value !== '') ||
       (filterValue.type === 'select' && filterValue.value != null) ||
       (filterValue.type === 'dateRange' &&
-        (filterValue.value.from != null || filterValue.value.to != null)))
+        (filterValue.value.from != null || filterValue.value.to != null)) ||
+      (filterValue.type === 'numberSort' && filterValue.value != null))
 
   const handleTriggerClick = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -92,14 +93,21 @@ function DatatableColumnFilterMenu({
   }
 
   const handleSelectChange = (value: string) => {
-    if (!value || value === SELECT_PLACEHOLDER_VALUE) {
-      onFilterValueChange(columnId, undefined)
-    } else {
-      onFilterValueChange(columnId, { type: 'select', value })
-    }
+    onFilterValueChange(columnId, { type: 'select', value })
     onOpenChange(false)
   }
 
+  const handleNumberSort = (direction: 'asc' | 'desc') => {
+    const current = filterValue?.type === 'numberSort' ? filterValue.value : null
+    const next = current === direction ? null : direction
+    onFilterValueChange(columnId, { type: 'numberSort', value: next })
+    onNumberSort(columnId, next)
+    onOpenChange(false)
+  }
+
+  const currentSortDirection =
+    filterValue?.type === 'numberSort' ? filterValue.value : null
+
   const rangeValue: DateRange | undefined =
     filterValue?.type === 'dateRange'
       ? { from: filterValue.value.from, to: filterValue.value.to }
@@ -109,7 +117,7 @@ function DatatableColumnFilterMenu({
   const selectValue =
     filterValue?.type === 'select' && filterValue.value != null
       ? String(filterValue.value)
-      : SELECT_PLACEHOLDER_VALUE
+      : undefined
 
   if (!filterType) {
     return (
@@ -203,21 +211,38 @@ function DatatableColumnFilterMenu({
 
             {filterType === 'select' && (
               <Select
-                key={`select-${columnId}-${selectValue}`}
+                key={`select-${columnId}`}
                 label=""
                 options={selectOptions}
-                defaultValue={selectValue}
+                value={selectValue ?? ''}
+                placeholder={filterPlaceholder}
                 size="sm"
-                register={{
-                  name: `datatable-select-${columnId}`,
-                  ref: () => { },
-                  onBlur: async () => { },
-                  onChange: async (e: { target: { value: string } }) => {
-                    handleSelectChange(e.target.value)
-                  },
-                }}
+                onValueChange={handleSelectChange}
               />
             )}
+
+            {filterType === 'numberSort' && (
+              <NumberSortOptions>
+                <NumberSortButton
+                  type="button"
+                  $active={currentSortDirection === 'asc'}
+                  onClick={() => handleNumberSort('asc')}
+                  aria-pressed={currentSortDirection === 'asc'}
+                >
+                  <ArrowUpIcon size={14} />
+                  Crescente
+                </NumberSortButton>
+                <NumberSortButton
+                  type="button"
+                  $active={currentSortDirection === 'desc'}
+                  onClick={() => handleNumberSort('desc')}
+                  aria-pressed={currentSortDirection === 'desc'}
+                >
+                  <ArrowDownIcon size={14} />
+                  Decrescente
+                </NumberSortButton>
+              </NumberSortOptions>
+            )}
           </FilterPopoverContent>
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>