@liguelead/design-system 0.0.31 → 0.0.32

package/components/Badge/Badge.stories.tsx

@@ -1,285 +1,114 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { CheckCircleIcon, ArrowRightIcon, WarningCircleIcon, XCircleIcon, InfoIcon } from '@phosphor-icons/react'
+import { CheckCircleIcon, ArrowRightIcon, XCircleIcon, InfoIcon, WarningCircleIcon } from '@phosphor-icons/react'
+import { themes } from '@liguelead/foundation'
 import Badge from './Badge'
-import type { BadgeVariantTypes } from './Badge.types'
 
-const variantOptions: BadgeVariantTypes[] = ['default', 'secondary', 'outline', 'danger', 'icon']
+const colorOptions = Object.keys(themes.spa.colors)
 
 const meta: Meta<typeof Badge> = {
-  title: 'Data Display/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-Badges são rótulos compactos usados para destacar status, categorias ou contagens.
-
-**Quando usar:**
-- \`default\` — status ativo, confirmado ou primário
-- \`secondary\` — categorias secundárias ou tags neutras
-- \`outline\` — destaque sutil sem peso visual
-- \`danger\` — erros, alertas críticos ou itens removidos
-- \`icon\` — quando o ícone reforça o significado do rótulo
-
-**Boas práticas:**
-- Mantenha o texto curto (1–2 palavras)
-- Use ícones apenas quando agregam contexto
-- Não use mais de 3 badges em sequência sem separação visual
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: variantOptions,
-      description: 'Variante visual do badge',
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    children: {
-      control: 'text',
-      description: 'Texto exibido no badge',
-      table: {
-        defaultValue: { summary: 'Badge' },
-      },
-    },
-    showLeftIcon: {
-      control: 'boolean',
-      description: 'Exibe ícone à esquerda do texto',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
+    title: 'Data Display/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Badge compacto para destacar status, categorias ou contagens.
+
+**Props principais:**
+- \`color\` — qualquer token de cor do tema (ex: \`primary\`, \`danger200\`, \`secondary\`)
+- \`showLeftIcon\` / \`showRightIcon\` — exibe ícones nas extremidades
+                `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: colorOptions,
+            description: 'Cor de fundo do badge (token do tema)',
+            table: { defaultValue: { summary: 'primary' } },
+        },
+        children: {
+            control: 'text',
+            description: 'Texto exibido no badge',
+            table: { defaultValue: { summary: 'Badge' } },
+        },
+        showLeftIcon: {
+            control: 'boolean',
+            description: 'Exibe ícone à esquerda',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        showRightIcon: {
+            control: 'boolean',
+            description: 'Exibe ícone à direita',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        leftIcon: { control: false },
+        rightIcon: { control: false },
     },
-    showRightIcon: {
-      control: 'boolean',
-      description: 'Exibe ícone à direita do texto',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    leftIcon: {
-      control: false,
-      description: 'Elemento React para o ícone esquerdo (ex: `<CheckCircleIcon />`)',
-    },
-    rightIcon: {
-      control: false,
-      description: 'Elemento React para o ícone direito (ex: `<ArrowRightIcon />`)',
-    },
-  },
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-// ─── Stories individuais por variante ────────────────────────────────────────
-
 export const Default: Story = {
-  parameters: {
-    docs: {
-      description: { story: 'Variante principal. Use para status ativos, confirmados ou ações primárias.' },
+    args: {
+        children: 'Ativo',
+        color: 'success50',
     },
-  },
-  args: {
-    children: 'Ativo',
-    variant: 'default',
-  },
-}
-
-export const Secondary: Story = {
-  parameters: {
-    docs: {
-      description: { story: 'Variante secundária (roxa). Use para categorias, tags ou classificações.' },
-    },
-  },
-  args: {
-    children: 'Categoria',
-    variant: 'secondary',
-  },
-}
-
-export const Outline: Story = {
-  parameters: {
-    docs: {
-      description: { story: 'Variante com borda. Use quando precisar de destaque sutil sem peso visual.' },
-    },
-  },
-  args: {
-    children: 'Pendente',
-    variant: 'outline',
-  },
 }
 
 export const Danger: Story = {
-  parameters: {
-    docs: {
-      description: { story: 'Variante de perigo. Use para erros, alertas críticos ou itens bloqueados.' },
+    args: {
+        children: 'Erro',
+        color: 'danger50',
     },
-  },
-  args: {
-    children: 'Erro',
-    variant: 'danger',
-  },
 }
 
-export const Icon: Story = {
-  parameters: {
-    docs: {
-      description: { story: 'Variante com ícone proeminente. Use quando o ícone reforça o significado.' },
-    },
-  },
-  args: {
-    children: 'Concluído',
-    variant: 'icon',
-    showLeftIcon: true,
-    leftIcon: <CheckCircleIcon size={16} />,
-  },
-}
-
-// ─── Combinações com ícones ───────────────────────────────────────────────────
-
-export const ComLeftIcon: Story = {
-  name: 'Com ícone esquerdo',
-  parameters: {
-    docs: {
-      description: { story: 'Ícone à esquerda reforça o significado visual do badge.' },
-    },
-  },
-  args: {
-    children: 'Verificado',
-    variant: 'default',
-    showLeftIcon: true,
-    leftIcon: <CheckCircleIcon size={16} />,
-  },
-}
-
-export const ComRightIcon: Story = {
-  name: 'Com ícone direito',
-  parameters: {
-    docs: {
-      description: { story: 'Ícone à direita indica ação ou navegação.' },
+export const Secondary: Story = {
+    args: {
+        children: 'Categoria',
+        color: 'warning50',
     },
-  },
-  args: {
-    children: 'Ver mais',
-    variant: 'default',
-    showRightIcon: true,
-    rightIcon: <ArrowRightIcon size={16} />,
-  },
 }
 
-export const ComAmbosIcones: Story = {
-  name: 'Com ambos os ícones',
-  parameters: {
-    docs: {
-      description: { story: 'Use com moderação — apenas quando ambos os ícones agregam contexto.' },
+export const ComIconeEsquerdo: Story = {
+    name: 'Com ícone esquerdo',
+    args: {
+        children: 'Verificado',
+        color: 'success50',
+        showLeftIcon: true,
+        leftIcon: <CheckCircleIcon size={16} />,
     },
-  },
-  args: {
-    children: 'Badge',
-    variant: 'default',
-    showLeftIcon: true,
-    showRightIcon: true,
-    leftIcon: <CheckCircleIcon size={16} />,
-    rightIcon: <ArrowRightIcon size={16} />,
-  },
 }
 
-// ─── Todas as variantes ───────────────────────────────────────────────────────
-
-export const TodasVariantes: Story = {
-  name: 'Todas as variantes',
-  parameters: {
-    docs: {
-      description: { story: 'Visão geral de todas as variantes disponíveis lado a lado.' },
+export const ComIconeDireito: Story = {
+    name: 'Com ícone direito',
+    args: {
+        children: 'Ver mais',
+        color: 'success50',
+        showRightIcon: true,
+        rightIcon: <ArrowRightIcon size={16} />,
     },
-  },
-  render: () => (
-    <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Badge variant="default">Default</Badge>
-      <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="outline">Outline</Badge>
-      <Badge variant="danger">Danger</Badge>
-      <Badge variant="icon" showLeftIcon leftIcon={<CheckCircleIcon size={16} />}>Icon</Badge>
-    </div>
-  ),
 }
 
-// ─── Exemplos de uso real ─────────────────────────────────────────────────────
-
-export const StatusDePedido: Story = {
-  name: 'Exemplo: Status de pedido',
-  parameters: {
-    docs: {
-      description: { story: 'Badges aplicados a diferentes estados de um pedido em uma listagem.' },
-    },
-  },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontFamily: 'Manrope, sans-serif' }}>
-      {[
-        { id: '#1042', status: 'Aprovado', variant: 'default' as BadgeVariantTypes, icon: <CheckCircleIcon size={16} /> },
-        { id: '#1043', status: 'Pendente', variant: 'outline' as BadgeVariantTypes, icon: null },
-        { id: '#1044', status: 'Cancelado', variant: 'danger' as BadgeVariantTypes, icon: <XCircleIcon size={16} /> },
-        { id: '#1045', status: 'Em análise', variant: 'secondary' as BadgeVariantTypes, icon: <InfoIcon size={16} /> },
-        { id: '#1046', status: 'Alerta', variant: 'danger' as BadgeVariantTypes, icon: <WarningCircleIcon size={16} /> },
-      ].map(({ id, status, variant, icon }) => (
-        <div key={id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', border: '1px solid #e5e7eb', borderRadius: 6, width: 280 }}>
-          <span style={{ fontSize: 14, color: '#374151' }}>Pedido {id}</span>
-          <Badge variant={variant} showLeftIcon={!!icon} leftIcon={icon ?? undefined}>{status}</Badge>
+export const TodasAsCores: Story = {
+    name: 'Exemplo: Status de pedido',
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontFamily: 'Manrope, sans-serif' }}>
+            {[
+                { id: '#1042', status: 'Aprovado', color: 'primary' as const, icon: <CheckCircleIcon size={16} /> },
+                { id: '#1043', status: 'Pendente', color: 'warning100' as const, icon: <InfoIcon size={16} /> },
+                { id: '#1044', status: 'Cancelado', color: 'danger200' as const, icon: <XCircleIcon size={16} /> },
+                { id: '#1045', status: 'Em análise', color: 'secondary' as const, icon: <WarningCircleIcon size={16} /> },
+            ].map(({ id, status, color, icon }) => (
+                <div key={id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', border: '1px solid #e5e7eb', borderRadius: 6, width: 280 }}>
+                    <span style={{ fontSize: 14, color: '#374151' }}>Pedido {id}</span>
+                    <Badge color={color} showLeftIcon leftIcon={icon}>{status}</Badge>
+                </div>
+            ))}
         </div>
-      ))}
-    </div>
-  ),
-}
-
-export const TagsDeCategoria: Story = {
-  name: 'Exemplo: Tags de categoria',
-  parameters: {
-    docs: {
-      description: { story: 'Badges como tags de categorias em um card de produto ou artigo.' },
-    },
-  },
-  render: () => (
-    <div style={{ padding: 16, border: '1px solid #e5e7eb', borderRadius: 8, width: 320, fontFamily: 'Manrope, sans-serif' }}>
-      <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 8, color: '#111827' }}>
-        Introdução ao Design System
-      </div>
-      <div style={{ fontSize: 13, color: '#6b7280', marginBottom: 12 }}>
-        Aprenda os fundamentos de um design system escalável.
-      </div>
-      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-        <Badge variant="secondary">Design</Badge>
-        <Badge variant="secondary">Frontend</Badge>
-        <Badge variant="outline">Iniciante</Badge>
-      </div>
-    </div>
-  ),
-}
-
-export const NotificacaoComContador: Story = {
-  name: 'Exemplo: Notificação com contador',
-  parameters: {
-    docs: {
-      description: { story: 'Badge usado para indicar contagem de notificações ou itens pendentes.' },
-    },
-  },
-  render: () => (
-    <div style={{ display: 'flex', gap: 16, alignItems: 'center', fontFamily: 'Manrope, sans-serif' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ fontSize: 14, color: '#374151' }}>Mensagens</span>
-        <Badge variant="danger">3</Badge>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ fontSize: 14, color: '#374151' }}>Tarefas</span>
-        <Badge variant="default">12</Badge>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ fontSize: 14, color: '#374151' }}>Revisões</span>
-        <Badge variant="outline">5</Badge>
-      </div>
-    </div>
-  ),
+    ),
 }

package/components/Badge/Badge.styles.ts

@@ -1,7 +1,17 @@
-import styled from 'styled-components'
+import styled, { DefaultTheme } from 'styled-components'
 import { spacing, fontSize, fontWeight, lineHeight, radius } from '@liguelead/foundation'
+import { getTextColor, parseColor } from '../../utils'
+import { colorType } from '../../types'
 
-export const StyledBadge = styled.span<{ $variant: string }>`
+const getBadgeColors = (theme: DefaultTheme, color: colorType) => {
+    const parsedColor = parseColor(theme.colors[color])
+    return {
+        background: parsedColor,
+        text: parseColor(theme.colors[getTextColor(parsedColor)]),
+    }
+}
+
+export const StyledBadge = styled.span<{ $color: colorType }>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -14,7 +24,9 @@ export const StyledBadge = styled.span<{ $variant: string }>`
   font-family: Manrope, sans-serif;
   white-space: nowrap;
 
-  ${({ $variant }) => $variant}
+  background-color: ${({ theme, $color }) => getBadgeColors(theme, $color).background};
+
+  color: ${({ theme, $color }) => getBadgeColors(theme, $color).text};
 
   & svg {
     width: 16px;

package/components/Badge/Badge.tsx

@@ -1,20 +1,18 @@
 import { StyledBadge } from './Badge.styles'
-import { BadgeVariant } from './Badge.variants'
 import { TBadgeProps } from './Badge.types'
 
 const Badge = ({
   children = 'Badge',
   className,
-  variant = 'default',
+  color = 'primary',
   leftIcon,
   rightIcon,
   showLeftIcon = false,
   showRightIcon = false,
 }: TBadgeProps) => {
-  const badgeVariant = BadgeVariant(variant)
 
   return (
-    <StyledBadge $variant={badgeVariant} className={className}>
+    <StyledBadge $color={color} className={className}>
       {showLeftIcon && leftIcon}
       {children}
       {showRightIcon && rightIcon}

package/components/Badge/Badge.types.ts

@@ -1,11 +1,11 @@
-export type BadgeVariantTypes = 'default' | 'secondary' | 'outline' | 'danger' | 'icon'
+import { colorType } from "../../types"
 
 export type TBadgeProps = {
   children?: React.ReactNode
   className?: string
-  variant?: BadgeVariantTypes
   leftIcon?: React.ReactNode
   rightIcon?: React.ReactNode
   showLeftIcon?: boolean
   showRightIcon?: boolean
+  color?: colorType
 }

package/components/Badge/index.ts

@@ -1,2 +1,2 @@
 export { default as Badge } from './Badge'
-export type { TBadgeProps, BadgeVariantTypes } from './Badge.types'
+export type { TBadgeProps } from './Badge.types'

package/components/Table/components/ColumnVisibility/ColumnVisibility.style.ts

@@ -17,8 +17,6 @@ export const PopoverWrapper = style.div`
   border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
   border-radius: 4px;
   padding: 8px;
-
-  // Adicionar essa shadow no nosso thema
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
 `;
 

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

@@ -115,7 +115,6 @@ export const StyledTextInput = styled.input`
 
 export const ClearFilterButtonWrapper = styled.span`
   display: flex;
-  flex: 1;
   align-items: center;
   justify-content: end;
 `

package/components/index.ts

@@ -1,6 +1,6 @@
 export { default as Alert } from './Alert'
 export { Badge } from './Badge'
-export type { TBadgeProps, BadgeVariantTypes } from './Badge'
+export type { TBadgeProps } from './Badge'
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as DatePicker } from './DatePicker'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.31",
+    "version": "0.0.32",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {
@@ -24,7 +24,8 @@
         "react-datepicker": "^7.6.0",
         "react-toastify": "^11.0.5",
         "cmdk": "^1.1.1",
-        "date-fns": "^2.30.0"
+        "date-fns": "^2.30.0",
+        "@tanstack/react-table": "^8.0.0"
     },
     "scripts": {
         "lint": "eslint ."

package/components/Badge/Badge.variants.ts

@@ -1,37 +0,0 @@
-import { useTheme } from 'styled-components'
-import { parseColor } from '../../utils'
-import { BadgeVariantTypes } from './Badge.types'
-
-export const BadgeVariant = (variant: BadgeVariantTypes) => {
-  const theme = useTheme()
-
-  const variants: Record<BadgeVariantTypes, string> = {
-    default: `
-      background-color: ${parseColor(theme.colors.primary)};
-      color: ${parseColor(theme.colors.textLight)};
-      border: 1px solid transparent;
-    `,
-    secondary: `
-      background-color: ${parseColor(theme.colors.secondary)};
-      color: ${parseColor(theme.colors.textLight)};
-      border: 1px solid transparent;
-    `,
-    outline: `
-      background-color: transparent;
-      color: ${parseColor(theme.colors.primary)};
-      border: 1px solid ${parseColor(theme.colors.primary)};
-    `,
-    danger: `
-      background-color: ${parseColor(theme.colors.danger200)};
-      color: ${parseColor(theme.colors.textLight)};
-      border: 1px solid transparent;
-    `,
-    icon: `
-      background-color: ${parseColor(theme.colors.secondary)};
-      color: ${parseColor(theme.colors.textLight)};
-      border: 1px solid transparent;
-    `,
-  }
-
-  return variants[variant]
-}