@liguelead/design-system 0.0.30 → 0.0.31

package/components/Alert/Alert.stories.tsx

@@ -6,55 +6,131 @@ const meta: Meta<typeof Alert> = {
   component: Alert,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component: `
+Componente de alerta para comunicar mensagens de feedback ao usuário.
+
+**Quando usar cada variante:**
+- \`default\` — informações gerais ou neutras
+- \`info\` — dicas, orientações ou informações complementares
+- \`success\` — confirmação de ação concluída com sucesso
+- \`warning\` — atenção necessária, mas não crítica
+- \`danger\` — erros, falhas ou ações destrutivas
+
+**Boas práticas:**
+- Use títulos curtos e objetivos
+- A descrição deve complementar, não repetir o título
+- Use \`hasButton\` apenas quando houver uma ação clara para o usuário
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
       options: ['default', 'danger', 'warning', 'info', 'success'],
-      description: 'Visual style variant of the alert'
+      description: 'Variante visual do alerta',
+      table: { defaultValue: { summary: 'default' } },
     },
     title: {
       control: 'text',
-      description: 'Alert title'
+      description: 'Título do alerta (obrigatório)',
     },
     description: {
       control: 'text',
-      description: 'Alert description'
+      description: 'Descrição complementar do alerta',
     },
     hasButton: {
       control: 'boolean',
-      description: 'Whether to show action button'
+      description: 'Exibe botão de ação',
+      table: { defaultValue: { summary: 'false' } },
     },
     buttonLabel: {
       control: 'text',
-      description: 'Action button label'
+      description: 'Texto do botão de ação',
     },
     href: {
       control: 'text',
-      description: 'Action button link'
-    }
+      description: 'URL do botão de ação',
+    },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Variants: Story = {
+export const Default: Story = {
+  args: {
+    title: 'Informação importante',
+    description: 'Esta é uma mensagem de alerta padrão.',
+  },
+}
+
+export const TodasVariantes: Story = {
+  name: 'Todas as variantes',
+  parameters: {
+    docs: { description: { story: 'Visão geral de todas as variantes disponíveis.' } },
+  },
   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 style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Alert variant="default" title="Default" description="Informação geral ou neutra." />
+      <Alert variant="info" title="Info" description="Dica ou orientação complementar." />
+      <Alert variant="success" title="Sucesso" description="Ação concluída com sucesso." />
+      <Alert variant="warning" title="Atenção" description="Requer atenção, mas não é crítico." />
+      <Alert variant="danger" title="Erro" description="Falha ou ação destrutiva detectada." />
     </div>
   ),
 }
 
-export const Default: Story = {
-  args: {
-    title: 'Alert Title',
-    description: 'This is an alert description.',
+export const ComBotao: Story = {
+  name: 'Com botão de ação',
+  parameters: {
+    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar.' } },
   },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" />
+      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" />
+      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" />
+    </div>
+  ),
+}
+
+export const SemDescricao: Story = {
+  name: 'Sem descrição',
+  parameters: {
+    docs: { description: { story: 'Alertas podem ser usados apenas com título quando a mensagem é autoexplicativa.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Alert variant="success" title="Salvo com sucesso." />
+      <Alert variant="danger" title="Erro ao carregar os dados." />
+    </div>
+  ),
+}
+
+export const ExemploFormulario: Story = {
+  name: 'Exemplo: Feedback de formulário',
+  parameters: {
+    docs: { description: { story: 'Padrão de uso em formulários para comunicar resultado de submissão.' } },
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 480 }}>
+      <Alert
+        variant="success"
+        title="Cadastro realizado com sucesso!"
+        description="Você receberá um e-mail de confirmação em breve."
+      />
+      <Alert
+        variant="danger"
+        title="Não foi possível salvar"
+        description="Verifique os campos obrigatórios e tente novamente."
+        hasButton
+        buttonLabel="Ver erros"
+        href="#"
+      />
+    </div>
+  ),
 }

package/components/Badge/Badge.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { CheckCircleIcon, ArrowRightIcon, WarningCircleIcon, XCircleIcon, InfoIcon } from '@phosphor-icons/react'
+import Badge from './Badge'
+import type { BadgeVariantTypes } from './Badge.types'
+
+const variantOptions: BadgeVariantTypes[] = ['default', 'secondary', 'outline', 'danger', 'icon']
+
+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' },
+      },
+    },
+    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',
+    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',
+    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.' },
+    },
+  },
+  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.' },
+    },
+  },
+  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.' },
+    },
+  },
+  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>
+        </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

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import { spacing, fontSize, fontWeight, lineHeight, radius } from '@liguelead/foundation'
+
+export const StyledBadge = styled.span<{ $variant: string }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${spacing.spacing4}px;
+  padding: ${spacing.spacing2}px ${spacing.spacing8}px;
+  border-radius: ${radius.radius4}px;
+  font-size: ${fontSize.fontSize12}px;
+  font-weight: ${fontWeight.fontWeight500};
+  line-height: ${lineHeight.lineHeight16}px;
+  font-family: Manrope, sans-serif;
+  white-space: nowrap;
+
+  ${({ $variant }) => $variant}
+
+  & svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+`

package/components/Badge/Badge.tsx

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

package/components/Badge/Badge.types.ts

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

package/components/Badge/Badge.variants.ts

@@ -0,0 +1,37 @@
+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]
+}

package/components/Badge/index.ts

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

package/components/Button/Button.appearance.ts

@@ -75,7 +75,7 @@ export const ButtonVariant = (
         neutralOutline: `
         background-color: transparent;
         color: ${parseColor(theme.colors.textDark)};
-        border: 1px solid ${parseColor(theme.colors.neutral900)};
+        border: 1px solid ${parseColor(theme.colors.neutral400)};
 
         &:hover {
             background-color: ${parseColor(theme.colors.primaryDarker)};