xertica-ui 2.3.0 → 2.4.0

package/components/blocks/card-patterns/card-patterns.stories.tsx

@@ -1,594 +1,594 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import {
-  BarChart2,
-  Bell,
-  Briefcase,
-  Download,
-  FileText,
-  Globe,
-  LayoutDashboard,
-  Lock,
-  MoreHorizontal,
-  Package,
-  Plus,
-  RefreshCw,
-  Share2,
-  Shield,
-  Sparkles,
-  Users,
-  Zap,
-} from 'lucide-react';
-import { Button } from '../../ui/button';
-import { ChartCard, ChartConfig, DashboardBarChart, DashboardLineChart } from '../../ui/chart';
-import { ActivityCard } from './ActivityCard';
-import { ActivityCardSkeleton } from './ActivityCardSkeleton';
-import { FeatureCard } from './FeatureCard';
-import { FeatureCardSkeleton } from './FeatureCardSkeleton';
-import { NotificationCard } from './NotificationCard';
-import { NotificationCardSkeleton } from './NotificationCardSkeleton';
-import { ProfileCard } from './ProfileCard';
-import { ProfileCardSkeleton } from './ProfileCardSkeleton';
-import { ProjectCard } from './ProjectCard';
-import { ProjectCardSkeleton } from './ProjectCardSkeleton';
-import { QuickActionCard } from './QuickActionCard';
-import { QuickActionCardSkeleton } from './QuickActionCardSkeleton';
-
-const meta: Meta = {
-  title: 'Blocks/Card Patterns',
-  decorators: [
-    Story => (
-      <div className="bg-muted rounded-xl p-8 w-full flex items-start justify-center">
-        <Story />
-      </div>
-    ),
-  ],
-};
-export default meta;
-
-// ─── ActivityCard ─────────────────────────────────────────────────────────────
-
-const ACTIVITY_ITEMS = [
-  {
-    id: '1',
-    user: { name: 'Ana Souza', initials: 'AS' },
-    action: 'criou o projeto',
-    target: 'Xertica Dashboard',
-    time: 'há 2 min',
-    type: 'create' as const,
-  },
-  {
-    id: '2',
-    user: { name: 'Bruno Lima', initials: 'BL' },
-    action: 'atualizou',
-    target: 'componente Button',
-    time: 'há 8 min',
-    type: 'update' as const,
-  },
-  {
-    id: '3',
-    user: { name: 'Carla Rocha', initials: 'CR' },
-    action: 'comentou em',
-    target: 'PR #42',
-    time: 'há 15 min',
-    type: 'comment' as const,
-  },
-  {
-    id: '4',
-    user: { name: 'Diego Ferraz', initials: 'DF' },
-    action: 'fez deploy de',
-    target: 'v2.1.0',
-    time: 'há 1h',
-    type: 'deploy' as const,
-  },
-  {
-    id: '5',
-    user: { name: 'Elena Moura', initials: 'EM' },
-    action: 'removeu',
-    target: 'badge legado',
-    time: 'há 2h',
-    type: 'delete' as const,
-  },
-];
-
-export const Activity: StoryObj = {
-  render: () => (
-    <ActivityCard
-      items={ACTIVITY_ITEMS}
-      action={
-        <Button variant="ghost" size="sm">
-          <MoreHorizontal className="size-4" />
-        </Button>
-      }
-      className="max-w-md"
-    />
-  ),
-};
-
-// ─── ProfileCard ──────────────────────────────────────────────────────────────
-
-export const Profile: StoryObj = {
-  render: () => (
-    <ProfileCard
-      name="Ana Souza"
-      role="Senior Frontend Engineer"
-      department="Design System"
-      initials="AS"
-      status="online"
-      stats={[
-        { label: 'Projetos', value: 12 },
-        { label: 'Commits', value: 348 },
-        { label: 'Reviews', value: 57 },
-      ]}
-      primaryAction={{ label: 'Ver Perfil' }}
-      secondaryAction={{ label: 'Mensagem' }}
-      className="w-64"
-    />
-  ),
-};
-
-// ─── ProjectCard ──────────────────────────────────────────────────────────────
-
-const MEMBERS = [
-  { name: 'Ana', initials: 'AS' },
-  { name: 'Bruno', initials: 'BL' },
-  { name: 'Carla', initials: 'CR' },
-  { name: 'Diego', initials: 'DF' },
-  { name: 'Elena', initials: 'EM' },
-];
-
-export const Project: StoryObj = {
-  render: () => (
-    <div className="grid gap-4 md:grid-cols-2 w-full max-w-2xl">
-      <ProjectCard
-        title="Xertica Dashboard v3"
-        description="Redesign completo do painel com novos componentes."
-        status="active"
-        progress={68}
-        dueDate="Vence em 12 dias"
-        members={MEMBERS}
-      />
-      <ProjectCard
-        title="Design System Tokens"
-        description="Migração dos tokens de design para CSS variables."
-        status="review"
-        progress={91}
-        dueDate="Vence amanhã"
-        members={MEMBERS.slice(0, 2)}
-      />
-      <ProjectCard
-        title="App Mobile"
-        description="Versão móvel do Xertica com React Native."
-        status="at-risk"
-        progress={34}
-        dueDate="Atrasado 3 dias"
-        members={MEMBERS.slice(0, 3)}
-      />
-      <ProjectCard
-        title="Onboarding Flow"
-        description="Fluxo de cadastro e primeiros passos."
-        status="done"
-        progress={100}
-        dueDate="Entregue"
-        members={MEMBERS.slice(0, 4)}
-      />
-    </div>
-  ),
-};
-
-// ─── QuickActionCard ──────────────────────────────────────────────────────────
-
-export const QuickActions: StoryObj = {
-  render: () => (
-    <div className="grid gap-4 grid-cols-2 md:grid-cols-3 max-w-2xl w-full">
-      <QuickActionCard
-        title="Novo Relatório"
-        description="Gere relatórios personalizados de métricas."
-        icon={<FileText className="size-5" />}
-        actionLabel="Criar Relatório"
-      />
-      <QuickActionCard
-        title="Convidar Membro"
-        description="Adicione novos colaboradores ao workspace."
-        icon={<Users className="size-5" />}
-        actionLabel="Convidar"
-        actionVariant="outline"
-        badge="Novo"
-        badgeVariant="success"
-      />
-      <QuickActionCard
-        title="Exportar Dados"
-        description="Exporte suas métricas em CSV ou JSON."
-        icon={<Download className="size-5" />}
-        actionLabel="Exportar"
-        actionVariant="secondary"
-      />
-      <QuickActionCard
-        title="Automação"
-        description="Configure gatilhos e ações automáticas."
-        icon={<Zap className="size-5" />}
-        actionLabel="Configurar"
-        badge="Pro"
-        badgeVariant="warning"
-      />
-      <QuickActionCard
-        title="Compartilhar"
-        description="Compartilhe o dashboard com sua equipe."
-        icon={<Share2 className="size-5" />}
-        actionLabel="Compartilhar"
-        actionVariant="outline"
-      />
-      <QuickActionCard
-        title="Novo Projeto"
-        description="Inicie um projeto a partir de um template."
-        icon={<Plus className="size-5" />}
-        actionLabel="Criar Projeto"
-        badge="Beta"
-        badgeVariant="info"
-      />
-    </div>
-  ),
-};
-
-// ─── NotificationCard ─────────────────────────────────────────────────────────
-
-const NOTIFICATIONS = [
-  {
-    id: '1',
-    title: 'Deploy concluído',
-    message: 'v2.1.0 foi publicado com sucesso em produção.',
-    time: 'há 2 min',
-    read: false,
-    type: 'success' as const,
-  },
-  {
-    id: '2',
-    title: 'Revisão solicitada',
-    message: 'Ana pediu revisão no PR #42: Novos tokens de cor.',
-    time: 'há 10 min',
-    read: false,
-    type: 'info' as const,
-  },
-  {
-    id: '3',
-    title: 'Erro em produção',
-    message: 'Serviço de auth com falha intermitente — 503.',
-    time: 'há 1h',
-    read: false,
-    type: 'error' as const,
-  },
-  {
-    id: '4',
-    title: 'Licença expirando',
-    message: 'Sua licença Pro expira em 7 dias. Renove para continuar.',
-    time: 'há 3h',
-    read: true,
-    type: 'warning' as const,
-  },
-];
-
-export const Notifications: StoryObj = {
-  render: () => (
-    <NotificationCard
-      items={NOTIFICATIONS}
-      onMarkAllRead={() => {}}
-      onViewAll={() => {}}
-      className="max-w-sm"
-    />
-  ),
-};
-
-// ─── ChartCard ────────────────────────────────────────────────────────────────
-
-const REVENUE_DATA = [
-  { month: 'Jan', receita: 18000, despesa: 12000 },
-  { month: 'Fev', receita: 22000, despesa: 14000 },
-  { month: 'Mar', receita: 19500, despesa: 13500 },
-  { month: 'Abr', receita: 27000, despesa: 15000 },
-  { month: 'Mai', receita: 31000, despesa: 17500 },
-  { month: 'Jun', receita: 28500, despesa: 16000 },
-];
-
-const REVENUE_CONFIG: ChartConfig = {
-  receita: { label: 'Receita', color: 'var(--chart-1)' },
-  despesa: { label: 'Despesa', color: 'var(--chart-5)' },
-};
-
-const CHART_SERIES = [
-  { key: 'receita', label: 'Receita' },
-  { key: 'despesa', label: 'Despesa' },
-];
-
-export const Chart: StoryObj = {
-  render: () => (
-    <ChartCard
-      title="Receita vs Despesa"
-      description="Últimos 6 meses"
-      action={
-        <Button variant="ghost" size="sm">
-          <RefreshCw className="size-4" />
-        </Button>
-      }
-      footer="Dados atualizados em tempo real via API financeira."
-      className="max-w-xl w-full"
-      contentClassName="h-[260px]"
-    >
-      <DashboardBarChart
-        data={REVENUE_DATA}
-        config={REVENUE_CONFIG}
-        series={CHART_SERIES}
-        indexKey="month"
-        barSize="md"
-        className="h-full w-full"
-      />
-    </ChartCard>
-  ),
-};
-
-// ─── Dashboard completo ───────────────────────────────────────────────────────
-
-const LINE_DATA = [
-  { dia: 'Seg', usuarios: 240 },
-  { dia: 'Ter', usuarios: 380 },
-  { dia: 'Qua', usuarios: 310 },
-  { dia: 'Qui', usuarios: 470 },
-  { dia: 'Sex', usuarios: 520 },
-  { dia: 'Sáb', usuarios: 290 },
-  { dia: 'Dom', usuarios: 180 },
-];
-
-const LINE_CONFIG: ChartConfig = {
-  usuarios: { label: 'Usuários', color: 'var(--chart-1)' },
-};
-
-export const DashboardLayout: StoryObj = {
-  render: () => (
-    <div className="grid gap-4 w-full max-w-5xl">
-      <div className="grid gap-4 md:grid-cols-3">
-        <QuickActionCard
-          title="Novo Projeto"
-          description="Inicie a partir de um template."
-          icon={<Briefcase className="size-5" />}
-          actionLabel="Criar"
-        />
-        <QuickActionCard
-          title="Convidar Equipe"
-          description="Adicione membros ao workspace."
-          icon={<Users className="size-5" />}
-          actionLabel="Convidar"
-          actionVariant="outline"
-        />
-        <QuickActionCard
-          title="Ver Relatórios"
-          description="Métricas e KPIs do período."
-          icon={<BarChart2 className="size-5" />}
-          actionLabel="Abrir"
-          actionVariant="secondary"
-          badge="Novo"
-          badgeVariant="success"
-        />
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <div className="md:col-span-2">
-          <ChartCard title="Usuários Ativos" description="Esta semana" contentClassName="h-[220px]">
-            <DashboardLineChart
-              data={LINE_DATA}
-              config={LINE_CONFIG}
-              series={[{ key: 'usuarios', label: 'Usuários' }]}
-              indexKey="dia"
-              className="h-full w-full"
-            />
-          </ChartCard>
-        </div>
-        <NotificationCard title="Alertas" items={NOTIFICATIONS.slice(0, 3)} onViewAll={() => {}} />
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <ActivityCard items={ACTIVITY_ITEMS} className="h-full" />
-        <div className="grid gap-4">
-          <ProfileCard
-            name="Ana Souza"
-            role="Product Designer"
-            initials="AS"
-            status="online"
-            stats={[
-              { label: 'Projetos', value: 12 },
-              { label: 'Tarefas', value: 34 },
-              { label: 'Reviews', value: 8 },
-            ]}
-          />
-          <ProjectCard
-            title="Xertica Dashboard v3"
-            status="active"
-            progress={68}
-            dueDate="12 dias restantes"
-            members={MEMBERS.slice(0, 3)}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ─── FeatureCard ──────────────────────────────────────────────────────────────
-
-export const Feature: StoryObj = {
-  render: () => (
-    <FeatureCard
-      title="Template CLI"
-      description="Página de template pronta para uso CLI com todos os componentes configurados."
-      icon={<FileText />}
-      color="chart-2"
-      badge="Novo"
-      actionLabel="Visualizar"
-    />
-  ),
-};
-
-export const FeatureColors: StoryObj = {
-  render: () => (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-4xl">
-      <FeatureCard
-        title="Dashboard"
-        description="Visualize métricas e KPIs em tempo real com gráficos interativos."
-        icon={<LayoutDashboard />}
-        color="primary"
-        badge="Popular"
-        badgeVariant="default"
-        actionLabel="Abrir"
-      />
-      <FeatureCard
-        title="Integrações"
-        description="Conecte APIs externas e serviços de terceiros com um clique."
-        icon={<Globe />}
-        color="chart-1"
-        actionLabel="Explorar"
-      />
-      <FeatureCard
-        title="Automação"
-        description="Crie fluxos automáticos com gatilhos e ações personalizadas."
-        icon={<Zap />}
-        color="chart-2"
-        badge="Beta"
-        badgeVariant="warning"
-        actionLabel="Configurar"
-      />
-      <FeatureCard
-        title="IA Generativa"
-        description="Potencialize sua equipe com assistentes inteligentes e geração de conteúdo."
-        icon={<Sparkles />}
-        color="chart-3"
-        badge="Pro"
-        badgeVariant="info"
-        actionLabel="Ativar"
-      />
-      <FeatureCard
-        title="Equipes"
-        description="Gerencie membros, permissões e workspaces de forma centralizada."
-        icon={<Users />}
-        color="chart-4"
-        actionLabel="Gerenciar"
-      />
-      <FeatureCard
-        title="Pacotes"
-        description="Publique e distribua seus componentes como biblioteca reutilizável."
-        icon={<Package />}
-        color="chart-5"
-        actionLabel="Publicar"
-      />
-    </div>
-  ),
-};
-
-export const FeatureSemanticColors: StoryObj = {
-  render: () => (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 w-full max-w-4xl">
-      <FeatureCard
-        title="Segurança"
-        description="Proteção avançada com autenticação multifator e logs de auditoria."
-        icon={<Shield />}
-        color="success"
-        actionLabel="Configurar"
-      />
-      <FeatureCard
-        title="Insights"
-        description="Análises aprofundadas com relatórios automáticos e alertas inteligentes."
-        icon={<BarChart2 />}
-        color="info"
-        actionLabel="Ver Dados"
-      />
-      <FeatureCard
-        title="Permissões"
-        description="Controle granular de acessos por função, projeto e recurso."
-        icon={<Lock />}
-        color="warning"
-        badge="Atenção"
-        badgeVariant="warning"
-        actionLabel="Revisar"
-      />
-      <FeatureCard
-        title="Compartilhar"
-        description="Distribua relatórios e dashboards com stakeholders externos."
-        icon={<Share2 />}
-        color="destructive"
-        badge="Restrito"
-        badgeVariant="destructive"
-        actionLabel="Solicitar"
-      />
-    </div>
-  ),
-};
-
-// ─── Skeletons ────────────────────────────────────────────────────────────────
-
-type SkeletonStory = StoryObj;
-
-/** All card-pattern skeletons side by side to compare proportions with their data counterparts. */
-export const SkeletonShowcase: SkeletonStory = {
-  name: 'Skeletons / All Card Patterns',
-  render: () => (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-5xl">
-      <ActivityCardSkeleton rows={4} />
-      <ProfileCardSkeleton showStats showActions />
-      <ProjectCardSkeleton memberCount={3} />
-      <NotificationCardSkeleton rows={3} showViewAll />
-      <QuickActionCardSkeleton />
-      <FeatureCardSkeleton showAction />
-    </div>
-  ),
-};
-
-export const ActivitySkeleton: SkeletonStory = {
-  name: 'Skeletons / ActivityCard',
-  render: () => (
-    <div className="w-[380px]">
-      <ActivityCardSkeleton rows={5} />
-    </div>
-  ),
-};
-
-export const ProfileSkeleton: SkeletonStory = {
-  name: 'Skeletons / ProfileCard',
-  render: () => (
-    <div className="w-[280px]">
-      <ProfileCardSkeleton showStats showActions />
-    </div>
-  ),
-};
-
-export const ProjectSkeleton: SkeletonStory = {
-  name: 'Skeletons / ProjectCard',
-  render: () => (
-    <div className="w-[320px]">
-      <ProjectCardSkeleton memberCount={4} />
-    </div>
-  ),
-};
-
-export const NotificationSkeleton: SkeletonStory = {
-  name: 'Skeletons / NotificationCard',
-  render: () => (
-    <div className="w-[400px]">
-      <NotificationCardSkeleton rows={4} showViewAll />
-    </div>
-  ),
-};
-
-export const QuickActionSkeleton: SkeletonStory = {
-  name: 'Skeletons / QuickActionCard',
-  render: () => (
-    <div className="w-[260px]">
-      <QuickActionCardSkeleton />
-    </div>
-  ),
-};
-
-export const FeatureSkeleton: SkeletonStory = {
-  name: 'Skeletons / FeatureCard',
-  render: () => (
-    <div className="w-[300px]">
-      <FeatureCardSkeleton showAction />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import {
+  BarChart2,
+  Bell,
+  Briefcase,
+  Download,
+  FileText,
+  Globe,
+  LayoutDashboard,
+  Lock,
+  MoreHorizontal,
+  Package,
+  Plus,
+  RefreshCw,
+  Share2,
+  Shield,
+  Sparkles,
+  Users,
+  Zap,
+} from 'lucide-react';
+import { Button } from '../../ui/button';
+import { ChartCard, ChartConfig, DashboardBarChart, DashboardLineChart } from '../../ui/chart';
+import { ActivityCard } from './ActivityCard';
+import { ActivityCardSkeleton } from './ActivityCardSkeleton';
+import { FeatureCard } from './FeatureCard';
+import { FeatureCardSkeleton } from './FeatureCardSkeleton';
+import { NotificationCard } from './NotificationCard';
+import { NotificationCardSkeleton } from './NotificationCardSkeleton';
+import { ProfileCard } from './ProfileCard';
+import { ProfileCardSkeleton } from './ProfileCardSkeleton';
+import { ProjectCard } from './ProjectCard';
+import { ProjectCardSkeleton } from './ProjectCardSkeleton';
+import { QuickActionCard } from './QuickActionCard';
+import { QuickActionCardSkeleton } from './QuickActionCardSkeleton';
+
+const meta: Meta = {
+  title: 'Blocks/Card Patterns',
+  decorators: [
+    Story => (
+      <div className="bg-muted rounded-xl p-8 w-full flex items-start justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+// ─── ActivityCard ─────────────────────────────────────────────────────────────
+
+const ACTIVITY_ITEMS = [
+  {
+    id: '1',
+    user: { name: 'Ana Souza', initials: 'AS' },
+    action: 'criou o projeto',
+    target: 'Xertica Dashboard',
+    time: 'há 2 min',
+    type: 'create' as const,
+  },
+  {
+    id: '2',
+    user: { name: 'Bruno Lima', initials: 'BL' },
+    action: 'atualizou',
+    target: 'componente Button',
+    time: 'há 8 min',
+    type: 'update' as const,
+  },
+  {
+    id: '3',
+    user: { name: 'Carla Rocha', initials: 'CR' },
+    action: 'comentou em',
+    target: 'PR #42',
+    time: 'há 15 min',
+    type: 'comment' as const,
+  },
+  {
+    id: '4',
+    user: { name: 'Diego Ferraz', initials: 'DF' },
+    action: 'fez deploy de',
+    target: 'v2.1.0',
+    time: 'há 1h',
+    type: 'deploy' as const,
+  },
+  {
+    id: '5',
+    user: { name: 'Elena Moura', initials: 'EM' },
+    action: 'removeu',
+    target: 'badge legado',
+    time: 'há 2h',
+    type: 'delete' as const,
+  },
+];
+
+export const Activity: StoryObj = {
+  render: () => (
+    <ActivityCard
+      items={ACTIVITY_ITEMS}
+      action={
+        <Button variant="ghost" size="sm">
+          <MoreHorizontal className="size-4" />
+        </Button>
+      }
+      className="max-w-md"
+    />
+  ),
+};
+
+// ─── ProfileCard ──────────────────────────────────────────────────────────────
+
+export const Profile: StoryObj = {
+  render: () => (
+    <ProfileCard
+      name="Ana Souza"
+      role="Senior Frontend Engineer"
+      department="Design System"
+      initials="AS"
+      status="online"
+      stats={[
+        { label: 'Projetos', value: 12 },
+        { label: 'Commits', value: 348 },
+        { label: 'Reviews', value: 57 },
+      ]}
+      primaryAction={{ label: 'Ver Perfil' }}
+      secondaryAction={{ label: 'Mensagem' }}
+      className="w-64"
+    />
+  ),
+};
+
+// ─── ProjectCard ──────────────────────────────────────────────────────────────
+
+const MEMBERS = [
+  { name: 'Ana', initials: 'AS' },
+  { name: 'Bruno', initials: 'BL' },
+  { name: 'Carla', initials: 'CR' },
+  { name: 'Diego', initials: 'DF' },
+  { name: 'Elena', initials: 'EM' },
+];
+
+export const Project: StoryObj = {
+  render: () => (
+    <div className="grid gap-4 md:grid-cols-2 w-full max-w-2xl">
+      <ProjectCard
+        title="Xertica Dashboard v3"
+        description="Redesign completo do painel com novos componentes."
+        status="active"
+        progress={68}
+        dueDate="Vence em 12 dias"
+        members={MEMBERS}
+      />
+      <ProjectCard
+        title="Design System Tokens"
+        description="Migração dos tokens de design para CSS variables."
+        status="review"
+        progress={91}
+        dueDate="Vence amanhã"
+        members={MEMBERS.slice(0, 2)}
+      />
+      <ProjectCard
+        title="App Mobile"
+        description="Versão móvel do Xertica com React Native."
+        status="at-risk"
+        progress={34}
+        dueDate="Atrasado 3 dias"
+        members={MEMBERS.slice(0, 3)}
+      />
+      <ProjectCard
+        title="Onboarding Flow"
+        description="Fluxo de cadastro e primeiros passos."
+        status="done"
+        progress={100}
+        dueDate="Entregue"
+        members={MEMBERS.slice(0, 4)}
+      />
+    </div>
+  ),
+};
+
+// ─── QuickActionCard ──────────────────────────────────────────────────────────
+
+export const QuickActions: StoryObj = {
+  render: () => (
+    <div className="grid gap-4 grid-cols-2 md:grid-cols-3 max-w-2xl w-full">
+      <QuickActionCard
+        title="Novo Relatório"
+        description="Gere relatórios personalizados de métricas."
+        icon={<FileText className="size-5" />}
+        actionLabel="Criar Relatório"
+      />
+      <QuickActionCard
+        title="Convidar Membro"
+        description="Adicione novos colaboradores ao workspace."
+        icon={<Users className="size-5" />}
+        actionLabel="Convidar"
+        actionVariant="outline"
+        badge="Novo"
+        badgeVariant="success"
+      />
+      <QuickActionCard
+        title="Exportar Dados"
+        description="Exporte suas métricas em CSV ou JSON."
+        icon={<Download className="size-5" />}
+        actionLabel="Exportar"
+        actionVariant="secondary"
+      />
+      <QuickActionCard
+        title="Automação"
+        description="Configure gatilhos e ações automáticas."
+        icon={<Zap className="size-5" />}
+        actionLabel="Configurar"
+        badge="Pro"
+        badgeVariant="warning"
+      />
+      <QuickActionCard
+        title="Compartilhar"
+        description="Compartilhe o dashboard com sua equipe."
+        icon={<Share2 className="size-5" />}
+        actionLabel="Compartilhar"
+        actionVariant="outline"
+      />
+      <QuickActionCard
+        title="Novo Projeto"
+        description="Inicie um projeto a partir de um template."
+        icon={<Plus className="size-5" />}
+        actionLabel="Criar Projeto"
+        badge="Beta"
+        badgeVariant="info"
+      />
+    </div>
+  ),
+};
+
+// ─── NotificationCard ─────────────────────────────────────────────────────────
+
+const NOTIFICATIONS = [
+  {
+    id: '1',
+    title: 'Deploy concluído',
+    message: 'v2.1.0 foi publicado com sucesso em produção.',
+    time: 'há 2 min',
+    read: false,
+    type: 'success' as const,
+  },
+  {
+    id: '2',
+    title: 'Revisão solicitada',
+    message: 'Ana pediu revisão no PR #42: Novos tokens de cor.',
+    time: 'há 10 min',
+    read: false,
+    type: 'info' as const,
+  },
+  {
+    id: '3',
+    title: 'Erro em produção',
+    message: 'Serviço de auth com falha intermitente — 503.',
+    time: 'há 1h',
+    read: false,
+    type: 'error' as const,
+  },
+  {
+    id: '4',
+    title: 'Licença expirando',
+    message: 'Sua licença Pro expira em 7 dias. Renove para continuar.',
+    time: 'há 3h',
+    read: true,
+    type: 'warning' as const,
+  },
+];
+
+export const Notifications: StoryObj = {
+  render: () => (
+    <NotificationCard
+      items={NOTIFICATIONS}
+      onMarkAllRead={() => {}}
+      onViewAll={() => {}}
+      className="max-w-sm"
+    />
+  ),
+};
+
+// ─── ChartCard ────────────────────────────────────────────────────────────────
+
+const REVENUE_DATA = [
+  { month: 'Jan', receita: 18000, despesa: 12000 },
+  { month: 'Fev', receita: 22000, despesa: 14000 },
+  { month: 'Mar', receita: 19500, despesa: 13500 },
+  { month: 'Abr', receita: 27000, despesa: 15000 },
+  { month: 'Mai', receita: 31000, despesa: 17500 },
+  { month: 'Jun', receita: 28500, despesa: 16000 },
+];
+
+const REVENUE_CONFIG: ChartConfig = {
+  receita: { label: 'Receita', color: 'var(--chart-1)' },
+  despesa: { label: 'Despesa', color: 'var(--chart-5)' },
+};
+
+const CHART_SERIES = [
+  { key: 'receita', label: 'Receita' },
+  { key: 'despesa', label: 'Despesa' },
+];
+
+export const Chart: StoryObj = {
+  render: () => (
+    <ChartCard
+      title="Receita vs Despesa"
+      description="Últimos 6 meses"
+      action={
+        <Button variant="ghost" size="sm">
+          <RefreshCw className="size-4" />
+        </Button>
+      }
+      footer="Dados atualizados em tempo real via API financeira."
+      className="max-w-xl w-full"
+      contentClassName="h-[260px]"
+    >
+      <DashboardBarChart
+        data={REVENUE_DATA}
+        config={REVENUE_CONFIG}
+        series={CHART_SERIES}
+        indexKey="month"
+        barSize="md"
+        className="h-full w-full"
+      />
+    </ChartCard>
+  ),
+};
+
+// ─── Dashboard completo ───────────────────────────────────────────────────────
+
+const LINE_DATA = [
+  { dia: 'Seg', usuarios: 240 },
+  { dia: 'Ter', usuarios: 380 },
+  { dia: 'Qua', usuarios: 310 },
+  { dia: 'Qui', usuarios: 470 },
+  { dia: 'Sex', usuarios: 520 },
+  { dia: 'Sáb', usuarios: 290 },
+  { dia: 'Dom', usuarios: 180 },
+];
+
+const LINE_CONFIG: ChartConfig = {
+  usuarios: { label: 'Usuários', color: 'var(--chart-1)' },
+};
+
+export const DashboardLayout: StoryObj = {
+  render: () => (
+    <div className="grid gap-4 w-full max-w-5xl">
+      <div className="grid gap-4 md:grid-cols-3">
+        <QuickActionCard
+          title="Novo Projeto"
+          description="Inicie a partir de um template."
+          icon={<Briefcase className="size-5" />}
+          actionLabel="Criar"
+        />
+        <QuickActionCard
+          title="Convidar Equipe"
+          description="Adicione membros ao workspace."
+          icon={<Users className="size-5" />}
+          actionLabel="Convidar"
+          actionVariant="outline"
+        />
+        <QuickActionCard
+          title="Ver Relatórios"
+          description="Métricas e KPIs do período."
+          icon={<BarChart2 className="size-5" />}
+          actionLabel="Abrir"
+          actionVariant="secondary"
+          badge="Novo"
+          badgeVariant="success"
+        />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="md:col-span-2">
+          <ChartCard title="Usuários Ativos" description="Esta semana" contentClassName="h-[220px]">
+            <DashboardLineChart
+              data={LINE_DATA}
+              config={LINE_CONFIG}
+              series={[{ key: 'usuarios', label: 'Usuários' }]}
+              indexKey="dia"
+              className="h-full w-full"
+            />
+          </ChartCard>
+        </div>
+        <NotificationCard title="Alertas" items={NOTIFICATIONS.slice(0, 3)} onViewAll={() => {}} />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <ActivityCard items={ACTIVITY_ITEMS} className="h-full" />
+        <div className="grid gap-4">
+          <ProfileCard
+            name="Ana Souza"
+            role="Product Designer"
+            initials="AS"
+            status="online"
+            stats={[
+              { label: 'Projetos', value: 12 },
+              { label: 'Tarefas', value: 34 },
+              { label: 'Reviews', value: 8 },
+            ]}
+          />
+          <ProjectCard
+            title="Xertica Dashboard v3"
+            status="active"
+            progress={68}
+            dueDate="12 dias restantes"
+            members={MEMBERS.slice(0, 3)}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ─── FeatureCard ──────────────────────────────────────────────────────────────
+
+export const Feature: StoryObj = {
+  render: () => (
+    <FeatureCard
+      title="Template CLI"
+      description="Página de template pronta para uso CLI com todos os componentes configurados."
+      icon={<FileText />}
+      color="chart-2"
+      badge="Novo"
+      actionLabel="Visualizar"
+    />
+  ),
+};
+
+export const FeatureColors: StoryObj = {
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-4xl">
+      <FeatureCard
+        title="Dashboard"
+        description="Visualize métricas e KPIs em tempo real com gráficos interativos."
+        icon={<LayoutDashboard />}
+        color="primary"
+        badge="Popular"
+        badgeVariant="default"
+        actionLabel="Abrir"
+      />
+      <FeatureCard
+        title="Integrações"
+        description="Conecte APIs externas e serviços de terceiros com um clique."
+        icon={<Globe />}
+        color="chart-1"
+        actionLabel="Explorar"
+      />
+      <FeatureCard
+        title="Automação"
+        description="Crie fluxos automáticos com gatilhos e ações personalizadas."
+        icon={<Zap />}
+        color="chart-2"
+        badge="Beta"
+        badgeVariant="warning"
+        actionLabel="Configurar"
+      />
+      <FeatureCard
+        title="IA Generativa"
+        description="Potencialize sua equipe com assistentes inteligentes e geração de conteúdo."
+        icon={<Sparkles />}
+        color="chart-3"
+        badge="Pro"
+        badgeVariant="info"
+        actionLabel="Ativar"
+      />
+      <FeatureCard
+        title="Equipes"
+        description="Gerencie membros, permissões e workspaces de forma centralizada."
+        icon={<Users />}
+        color="chart-4"
+        actionLabel="Gerenciar"
+      />
+      <FeatureCard
+        title="Pacotes"
+        description="Publique e distribua seus componentes como biblioteca reutilizável."
+        icon={<Package />}
+        color="chart-5"
+        actionLabel="Publicar"
+      />
+    </div>
+  ),
+};
+
+export const FeatureSemanticColors: StoryObj = {
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 w-full max-w-4xl">
+      <FeatureCard
+        title="Segurança"
+        description="Proteção avançada com autenticação multifator e logs de auditoria."
+        icon={<Shield />}
+        color="success"
+        actionLabel="Configurar"
+      />
+      <FeatureCard
+        title="Insights"
+        description="Análises aprofundadas com relatórios automáticos e alertas inteligentes."
+        icon={<BarChart2 />}
+        color="info"
+        actionLabel="Ver Dados"
+      />
+      <FeatureCard
+        title="Permissões"
+        description="Controle granular de acessos por função, projeto e recurso."
+        icon={<Lock />}
+        color="warning"
+        badge="Atenção"
+        badgeVariant="warning"
+        actionLabel="Revisar"
+      />
+      <FeatureCard
+        title="Compartilhar"
+        description="Distribua relatórios e dashboards com stakeholders externos."
+        icon={<Share2 />}
+        color="destructive"
+        badge="Restrito"
+        badgeVariant="destructive"
+        actionLabel="Solicitar"
+      />
+    </div>
+  ),
+};
+
+// ─── Skeletons ────────────────────────────────────────────────────────────────
+
+type SkeletonStory = StoryObj;
+
+/** All card-pattern skeletons side by side to compare proportions with their data counterparts. */
+export const SkeletonShowcase: SkeletonStory = {
+  name: 'Skeletons / All Card Patterns',
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-5xl">
+      <ActivityCardSkeleton rows={4} />
+      <ProfileCardSkeleton showStats showActions />
+      <ProjectCardSkeleton memberCount={3} />
+      <NotificationCardSkeleton rows={3} showViewAll />
+      <QuickActionCardSkeleton />
+      <FeatureCardSkeleton showAction />
+    </div>
+  ),
+};
+
+export const ActivitySkeleton: SkeletonStory = {
+  name: 'Skeletons / ActivityCard',
+  render: () => (
+    <div className="w-[380px]">
+      <ActivityCardSkeleton rows={5} />
+    </div>
+  ),
+};
+
+export const ProfileSkeleton: SkeletonStory = {
+  name: 'Skeletons / ProfileCard',
+  render: () => (
+    <div className="w-[280px]">
+      <ProfileCardSkeleton showStats showActions />
+    </div>
+  ),
+};
+
+export const ProjectSkeleton: SkeletonStory = {
+  name: 'Skeletons / ProjectCard',
+  render: () => (
+    <div className="w-[320px]">
+      <ProjectCardSkeleton memberCount={4} />
+    </div>
+  ),
+};
+
+export const NotificationSkeleton: SkeletonStory = {
+  name: 'Skeletons / NotificationCard',
+  render: () => (
+    <div className="w-[400px]">
+      <NotificationCardSkeleton rows={4} showViewAll />
+    </div>
+  ),
+};
+
+export const QuickActionSkeleton: SkeletonStory = {
+  name: 'Skeletons / QuickActionCard',
+  render: () => (
+    <div className="w-[260px]">
+      <QuickActionCardSkeleton />
+    </div>
+  ),
+};
+
+export const FeatureSkeleton: SkeletonStory = {
+  name: 'Skeletons / FeatureCard',
+  render: () => (
+    <div className="w-[300px]">
+      <FeatureCardSkeleton showAction />
+    </div>
+  ),
+};