@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/templates/DashboardLayout/DashboardLayout.stories.tsx

@@ -0,0 +1,273 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { expect, userEvent, within, waitFor } from '@storybook/test';
+import { DashboardLayout } from './DashboardLayout';
+import { Button, Text } from '../../atoms';
+import { SideNavbar } from '../../organisms';
+import { Home, Settings, Users, FileText } from 'lucide-react';
+
+const meta: Meta<typeof DashboardLayout> = {
+  title: 'Templates/DashboardLayout',
+  component: DashboardLayout,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+## DashboardLayout
+
+A complete dashboard page layout that combines SideNavbar, Container, and Stack.
+This template provides a full page structure with header, sidebar, main content, and footer.
+
+### Components Used
+- SideNavbar (organism)
+- Container (layout)
+- Stack (layout)
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| \`onSidebarToggle\` | Sidebar toggle | \`(collapsed: boolean) => void\` | Quando a sidebar é expandida/colapsada |
+| \`onNavItemClick\` | Item de navegação clicado | \`(item: { id: string; label: string }) => void\` | Quando um item de navegação é clicado |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`default\` | Default layout | Initial render | Full layout with sidebar |
+| \`collapsed\` | Collapsed sidebar | \`defaultCollapsed={true}\` | Sidebar collapsed |
+| \`no-sidebar\` | No sidebar | No sidebar prop | No sidebar visible |
+| \`minimal\` | Layout minimal | Sem header e footer | Apenas sidebar e conteúdo |
+        `,
+      },
+    },
+  },
+  argTypes: {
+    defaultCollapsed: {
+      control: 'boolean',
+      description: 'Sidebar collapsed by default',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DashboardLayout>;
+
+const mockSidebar = (
+  <SideNavbar.Navbar>
+    <SideNavbar.Navbar.Item id="home" icon={<Home className="h-5 w-5" />} label="Home" />
+    <SideNavbar.Navbar.Item id="users" icon={<Users className="h-5 w-5" />} label="Users" />
+    <SideNavbar.Navbar.Item id="documents" icon={<FileText className="h-5 w-5" />} label="Documents" />
+    <SideNavbar.Navbar.Item id="settings" icon={<Settings className="h-5 w-5" />} label="Settings" />
+  </SideNavbar.Navbar>
+);
+
+export const Default: Story = {
+  args: {
+    sidebar: mockSidebar,
+    header: (
+      <div className="flex items-center justify-between">
+        <Text variant="heading" size="lg">
+          Dashboard
+        </Text>
+        <div className="flex gap-2">
+          <Button variant="outline">Settings</Button>
+          <Button variant="primary">New Item</Button>
+        </div>
+      </div>
+    ),
+    children: (
+      <div className="space-y-4">
+        <Text variant="heading" size="xl">
+          Welcome to Dashboard
+        </Text>
+        <Text>
+          This is the main content area. You can add any content here.
+        </Text>
+        <div className="grid grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="bg-gray-100 p-4 rounded">
+              <Text variant="heading" size="md">
+                Card {i}
+              </Text>
+              <Text size="sm">Content for card {i}</Text>
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+    footer: (
+      <div className="flex items-center justify-between">
+        <Text size="sm" className="text-gray-600">
+          © 2024 Company Name
+        </Text>
+        <Text size="sm" className="text-gray-600">
+          Version 1.0.0
+        </Text>
+      </div>
+    ),
+  },
+};
+
+export const CollapsedSidebar: Story = {
+  args: {
+    ...Default.args,
+    defaultCollapsed: true,
+  },
+};
+
+export const NoSidebar: Story = {
+  args: {
+    sidebar: undefined,
+    header: Default.args?.header,
+    children: Default.args?.children,
+    footer: Default.args?.footer,
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    sidebar: mockSidebar,
+    children: (
+      <div>
+        <Text variant="heading">Minimal Dashboard</Text>
+        <Text>No header or footer, just sidebar and content.</Text>
+      </div>
+    ),
+  },
+};
+
+// Event Stories
+export const WithEvents: Story = {
+  render: () => {
+    const handleSidebarToggle = fn((collapsed: boolean) => {
+      console.log('Sidebar toggled:', collapsed);
+    });
+    const handleNavItemClick = fn((item: { id: string; label: string }) => {
+      console.log('Nav item clicked:', item);
+    });
+    
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          Toggle sidebar or click navigation items. Check the Actions panel to see events being fired.
+        </p>
+        <DashboardLayout
+          sidebar={mockSidebar}
+          header={Default.args?.header}
+          children={Default.args?.children}
+          footer={Default.args?.footer}
+        />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => {
+      expect(canvas.getByText(/dashboard/i)).toBeInTheDocument();
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates layout events. Toggle sidebar or click navigation items and check the Actions panel to see events being logged.',
+      },
+    },
+  },
+};
+
+// State Stories
+export const DefaultState: Story = {
+  args: {
+    sidebar: mockSidebar,
+    header: (
+      <div className="flex items-center justify-between">
+        <Text variant="heading" size="lg">
+          Dashboard
+        </Text>
+        <div className="flex gap-2">
+          <Button variant="outline">Settings</Button>
+          <Button variant="primary">New Item</Button>
+        </div>
+      </div>
+    ),
+    children: (
+      <div className="space-y-4">
+        <Text variant="heading" size="xl">
+          Welcome to Dashboard
+        </Text>
+        <Text>
+          This is the main content area. You can add any content here.
+        </Text>
+      </div>
+    ),
+    footer: (
+      <div className="flex items-center justify-between">
+        <Text size="sm" className="text-gray-600">
+          © 2024 Company Name
+        </Text>
+        <Text size="sm" className="text-gray-600">
+          Version 1.0.0
+        </Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default state - full layout with sidebar, header, content, and footer.',
+      },
+    },
+  },
+};
+
+export const CollapsedState: Story = {
+  args: {
+    ...Default.args,
+    defaultCollapsed: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Collapsed state - sidebar is collapsed by default.',
+      },
+    },
+  },
+};
+
+export const NoSidebarState: Story = {
+  args: {
+    sidebar: undefined,
+    header: Default.args?.header,
+    children: Default.args?.children,
+    footer: Default.args?.footer,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'No sidebar state - sidebar is not visible.',
+      },
+    },
+  },
+};
+
+export const MinimalState: Story = {
+  args: {
+    sidebar: mockSidebar,
+    children: (
+      <div>
+        <Text variant="heading">Minimal Dashboard</Text>
+        <Text>No header or footer, just sidebar and content.</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Minimal state - no header or footer, only sidebar and content.',
+      },
+    },
+  },
+};

package/src/ui/templates/DashboardLayout/DashboardLayout.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { SideNavbar } from '../../organisms';
+import { Container } from '../../layouts/Container/Container';
+import { Stack } from '../../layouts/Stack/Stack';
+
+export interface DashboardLayoutProps {
+  /**
+   * Sidebar content - use SideNavbar.Navbar and SideNavbar.Sidebar subcomponents
+   */
+  sidebar?: React.ReactNode;
+  /**
+   * Main content area
+   */
+  children: React.ReactNode;
+  /**
+   * Header content
+   */
+  header?: React.ReactNode;
+  /**
+   * Footer content
+   */
+  footer?: React.ReactNode;
+  /**
+   * Sidebar collapsed by default
+   * @default false
+   */
+  defaultCollapsed?: boolean;
+  /**
+   * SideNavbar props
+   */
+  sidebarProps?: Omit<React.ComponentProps<typeof SideNavbar>, 'children'>;
+}
+
+/**
+ * DashboardLayout - A complete dashboard page layout
+ * 
+ * Combines SideNavbar, Container, and Stack to create a full dashboard structure.
+ * This template provides a complete page layout with sensible defaults.
+ * 
+ * @example
+ * ```tsx
+ * <DashboardLayout
+ *   sidebar={
+ *     <>
+ *       <SideNavbar.Navbar>
+ *         <SideNavbar.Navbar.Item icon={<Home />} label="Home" />
+ *       </SideNavbar.Navbar>
+ *       <SideNavbar.Sidebar>
+ *         <SideNavbar.Sidebar.Content>Content</SideNavbar.Sidebar.Content>
+ *       </SideNavbar.Sidebar>
+ *     </>
+ *   }
+ *   header={<Header />}
+ * >
+ *   <MainContent />
+ * </DashboardLayout>
+ * ```
+ */
+export function DashboardLayout({
+  sidebar,
+  children,
+  header,
+  footer,
+  defaultCollapsed = false,
+  sidebarProps,
+}: DashboardLayoutProps) {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      {/* Sidebar */}
+      {sidebar && (
+        <SideNavbar defaultCollapsed={defaultCollapsed} {...sidebarProps}>
+          {sidebar}
+        </SideNavbar>
+      )}
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Header */}
+        {header && (
+          <header className="border-b bg-white">
+            <Container maxWidth="full" paddingX="base" paddingY="sm">
+              {header}
+            </Container>
+          </header>
+        )}
+
+        {/* Main Content */}
+        <main className="flex-1 overflow-y-auto">
+          <Container maxWidth="xl" paddingX="base" paddingY="base">
+            {children}
+          </Container>
+        </main>
+
+        {/* Footer */}
+        {footer && (
+          <footer className="border-t bg-white">
+            <Container maxWidth="full" paddingX="base" paddingY="sm">
+              {footer}
+            </Container>
+          </footer>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/templates/DashboardLayout/index.ts

@@ -0,0 +1 @@
+export { DashboardLayout, type DashboardLayoutProps } from './DashboardLayout';

package/src/ui/templates/index.ts

@@ -0,0 +1,4 @@
+// Templates - Complete page layouts that combine organisms, molecules, and atoms
+// These are full page structures that are configurable but have sensible defaults
+
+export { DashboardLayout, type DashboardLayoutProps } from './DashboardLayout';

package/src/ui/themes/README.md

@@ -0,0 +1,281 @@
+# Advanced Theme System
+
+Sistema avançado de temas para o React Design System, com suporte a múltiplos temas, CSS variables, herança de temas e transições suaves.
+
+## Características
+
+- ✅ **Múltiplos Temas Simultâneos**: Registre e use vários temas na mesma aplicação
+- ✅ **CSS Variables**: Geração automática de variáveis CSS a partir de tokens
+- ✅ **Theme Inheritance**: Herde de temas base (light/dark) e customize apenas o necessário
+- ✅ **Transições Suaves**: Transições animadas entre temas
+- ✅ **Persistência**: Salva preferências de tema no localStorage
+- ✅ **Type-Safe**: Totalmente tipado com TypeScript
+
+## Uso Básico
+
+### Usando o AdvancedThemeProvider
+
+```tsx
+import { AdvancedThemeProvider, useAdvancedTheme } from '@fabio.caffarello/react-design-system';
+
+function App() {
+  return (
+    <AdvancedThemeProvider
+      defaultTheme="light"
+      options={{
+        enableCSSVariables: true,
+        enableTransitions: true,
+        transitionDuration: '200ms',
+      }}
+    >
+      <MyComponent />
+    </AdvancedThemeProvider>
+  );
+}
+
+function MyComponent() {
+  const { currentTheme, setTheme, tokens } = useAdvancedTheme();
+  
+  return (
+    <div>
+      <p>Current theme: {currentTheme}</p>
+      <button onClick={() => setTheme('dark')}>Switch to Dark</button>
+    </div>
+  );
+}
+```
+
+## Criando Temas Customizados
+
+### Usando ThemeBuilder
+
+```tsx
+import { ThemeBuilder } from '@fabio.caffarello/react-design-system';
+
+const customTheme = ThemeBuilder.create({
+  name: 'my-custom-theme',
+  base: 'light', // Herda de 'light'
+  colors: {
+    primary: {
+      DEFAULT: {
+        hex: '#8b5cf6', // Roxo customizado
+        rgb: { r: 139, g: 92, b: 246 },
+      },
+    },
+  },
+  spacing: {
+    // Override spacing tokens se necessário
+  },
+}).build();
+```
+
+### Registrando Temas no Provider
+
+```tsx
+<AdvancedThemeProvider
+  defaultTheme="light"
+  initialThemes={[
+    {
+      name: 'brand-theme',
+      base: 'light',
+      colors: {
+        primary: {
+          DEFAULT: { hex: '#your-brand-color' },
+        },
+      },
+    },
+  ]}
+>
+  <App />
+</AdvancedThemeProvider>
+```
+
+### Registrando Temas Dinamicamente
+
+```tsx
+function ThemeManager() {
+  const { registerTheme, setTheme } = useAdvancedTheme();
+  
+  const handleCreateTheme = () => {
+    const newTheme = registerTheme({
+      name: 'dynamic-theme',
+      base: 'dark',
+      colors: {
+        primary: {
+          DEFAULT: { hex: '#ff6b6b' },
+        },
+      },
+    });
+    
+    setTheme(newTheme.name);
+  };
+  
+  return <button onClick={handleCreateTheme}>Create Theme</button>;
+}
+```
+
+## CSS Variables
+
+Quando `enableCSSVariables` está ativado, o sistema gera automaticamente variáveis CSS:
+
+```css
+:root {
+  --color-primary-default: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --font-size-h1: 2.25rem;
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  /* ... */
+}
+```
+
+Você pode usar essas variáveis em seu CSS:
+
+```css
+.my-component {
+  background-color: var(--color-primary-default);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow-md);
+}
+```
+
+## API
+
+### AdvancedThemeProvider Props
+
+```typescript
+interface AdvancedThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: string; // Nome do tema padrão (default: 'light')
+  options?: ThemeBuilderOptions;
+  initialThemes?: CustomThemeConfig[]; // Temas para registrar na inicialização
+}
+```
+
+### ThemeBuilderOptions
+
+```typescript
+interface ThemeBuilderOptions {
+  enableCSSVariables?: boolean; // Gerar CSS variables (default: true)
+  enableTransitions?: boolean; // Habilitar transições (default: true)
+  transitionDuration?: string; // Duração da transição (default: '200ms')
+  storageKey?: string; // Chave do localStorage (default: 'theme')
+}
+```
+
+### useAdvancedTheme Hook
+
+```typescript
+interface AdvancedThemeContextValue {
+  currentTheme: string; // Nome do tema atual
+  themes: Record<string, Theme>; // Todos os temas registrados
+  setTheme: (themeName: string) => void; // Mudar tema
+  registerTheme: (config: CustomThemeConfig) => Theme; // Registrar novo tema
+  removeTheme: (themeName: string) => boolean; // Remover tema
+  getTheme: (themeName?: string) => Theme | undefined; // Obter tema
+  tokens: Theme | null; // Tokens do tema atual
+  options: ThemeBuilderOptions; // Opções atuais
+  setOptions: (options: Partial<ThemeBuilderOptions>) => void; // Atualizar opções
+}
+```
+
+## Theme Inheritance
+
+Temas podem herdar de temas base (light ou dark) e sobrescrever apenas o necessário:
+
+```tsx
+const brandTheme = ThemeBuilder.create({
+  name: 'brand',
+  base: 'light', // Herda todos os tokens de 'light'
+  colors: {
+    // Apenas sobrescreve cores
+    primary: {
+      DEFAULT: { hex: '#custom-color' },
+    },
+  },
+  // Outros tokens são herdados de 'light'
+}).build();
+```
+
+## Exemplos
+
+### Toggle de Tema
+
+```tsx
+function ThemeToggle() {
+  const { currentTheme, setTheme, themes } = useAdvancedTheme();
+  
+  return (
+    <select
+      value={currentTheme}
+      onChange={(e) => setTheme(e.target.value)}
+    >
+      {Object.keys(themes).map((name) => (
+        <option key={name} value={name}>
+          {name}
+        </option>
+      ))}
+    </select>
+  );
+}
+```
+
+### Criar Tema Dinamicamente
+
+```tsx
+function ThemeCreator() {
+  const { registerTheme, setTheme } = useAdvancedTheme();
+  const [color, setColor] = useState('#6366f1');
+  
+  const createTheme = () => {
+    const theme = registerTheme({
+      name: `custom-${Date.now()}`,
+      base: 'light',
+      colors: {
+        primary: {
+          DEFAULT: { hex: color },
+        },
+      },
+    });
+    
+    setTheme(theme.name);
+  };
+  
+  return (
+    <div>
+      <input
+        type="color"
+        value={color}
+        onChange={(e) => setColor(e.target.value)}
+      />
+      <button onClick={createTheme}>Create Theme</button>
+    </div>
+  );
+}
+```
+
+## Migração do ThemeProvider Original
+
+O `ThemeProvider` original ainda está disponível e funciona normalmente. Para migrar para o sistema avançado:
+
+**Antes:**
+```tsx
+import { ThemeProvider, useTheme } from '@fabio.caffarello/react-design-system';
+
+<ThemeProvider defaultTheme="light">
+  <App />
+</ThemeProvider>
+```
+
+**Depois:**
+```tsx
+import { AdvancedThemeProvider, useAdvancedTheme } from '@fabio.caffarello/react-design-system';
+
+<AdvancedThemeProvider defaultTheme="light">
+  <App />
+</AdvancedThemeProvider>
+```
+
+O `AdvancedThemeProvider` é compatível com os temas `light` e `dark` padrão, então a migração é simples.