kybernus 3.1.0 → 3.2.0

package/templates/ecommerce/apps/web/src/shared/components/ErrorBoundary.tsx

@@ -0,0 +1,112 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: { componentStack: string }) {
+    console.error('[ErrorBoundary] Unhandled render error:', error, info.componentStack);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <main
+          style={{
+            textAlign: 'center',
+            padding: '5rem 2rem',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '1rem',
+          }}
+        >
+          <p style={{ fontSize: '3rem', lineHeight: 1 }}>⚠️</p>
+          <h1 style={{ fontSize: '1.4rem', fontWeight: 700, color: '#111827' }}>
+            Algo deu errado
+          </h1>
+          <p style={{ color: '#6b7280', maxWidth: '400px', fontSize: '0.9rem' }}>
+            Ocorreu um erro inesperado. Tente recarregar a página ou voltar ao início.
+          </p>
+          <div style={{ display: 'flex', gap: '0.75rem', marginTop: '0.5rem' }}>
+            <button
+              type="button"
+              onClick={this.handleReset}
+              style={{
+                background: 'var(--color-primary)',
+                color: '#fff',
+                border: 'none',
+                padding: '0.6rem 1.5rem',
+                borderRadius: '6px',
+                fontWeight: 600,
+                fontSize: '0.9rem',
+                cursor: 'pointer',
+              }}
+            >
+              Tentar novamente
+            </button>
+            <a
+              href="/"
+              style={{
+                background: 'transparent',
+                border: '1px solid #d1d5db',
+                color: '#374151',
+                padding: '0.6rem 1.5rem',
+                borderRadius: '6px',
+                fontWeight: 600,
+                fontSize: '0.9rem',
+                textDecoration: 'none',
+              }}
+            >
+              Ir para o início
+            </a>
+          </div>
+          {import.meta.env.DEV && this.state.error && (
+            <pre
+              style={{
+                marginTop: '1.5rem',
+                textAlign: 'left',
+                background: '#fef2f2',
+                border: '1px solid #fecaca',
+                borderRadius: '6px',
+                padding: '1rem',
+                fontSize: '0.75rem',
+                color: '#991b1b',
+                maxWidth: '600px',
+                overflow: 'auto',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+              }}
+            >
+              {this.state.error.message}
+            </pre>
+          )}
+        </main>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/templates/ecommerce/apps/web/src/shared/components/Layout.tsx

@@ -0,0 +1,143 @@
+import { Link, Outlet, useNavigate } from 'react-router-dom';
+import { useAuthStore } from '../../modules/auth/useAuthStore';
+import { CookieConsent } from './CookieConsent';
+import { siteConfig } from '../config/siteConfig';
+
+const link: React.CSSProperties = {
+  color: 'white',
+  textDecoration: 'none',
+  padding: '0.3rem 0.6rem',
+  borderRadius: '4px',
+  fontSize: '0.95rem',
+  whiteSpace: 'nowrap',
+};
+
+export function Layout() {
+  const { user, accessToken, logout } = useAuthStore();
+  const navigate = useNavigate();
+
+  async function handleLogout() {
+    await logout();
+    navigate('/login');
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', fontFamily: 'var(--font-family)' }}>
+      <nav
+        className="site-nav"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1rem',
+          background: 'var(--color-primary)',
+          boxShadow: '0 2px 6px rgba(0,0,0,0.18)',
+          flexWrap: 'wrap',
+        }}
+      >
+        <Link to="/" style={{ ...link, fontWeight: 700, fontSize: '1.15rem', marginRight: '0.5rem' }}>
+          {siteConfig.logo} {siteConfig.name}
+        </Link>
+
+        <Link to="/" style={link}>
+          Produtos
+        </Link>
+
+        {accessToken && (
+          <>
+            <Link to="/profile" style={link}>
+              Meu Perfil
+            </Link>
+            <Link to="/orders" style={link}>
+              Meus Pedidos
+            </Link>
+            <Link to="/checkout" style={link}>
+              Checkout
+            </Link>
+          </>
+        )}
+
+        {user?.role === 'ADMIN' && (
+          <Link to="/admin" style={{ ...link, background: 'rgba(255,255,255,0.15)' }}>
+            Admin ⚙
+          </Link>
+        )}
+
+        <div style={{ flex: 1 }} />
+
+        {accessToken ? (
+          <>
+            <span style={{ color: 'rgba(255,255,255,0.85)', fontSize: '0.875rem' }}>
+              {user?.name ?? user?.email ?? ''}
+            </span>
+            <button
+              type="button"
+              onClick={handleLogout}
+              style={{
+                background: 'rgba(255,255,255,0.18)',
+                border: '1px solid rgba(255,255,255,0.4)',
+                color: 'white',
+                cursor: 'pointer',
+                padding: '0.35rem 0.85rem',
+                borderRadius: '4px',
+                fontSize: '0.875rem',
+                fontFamily: 'var(--font-family)',
+              }}
+            >
+              Sair
+            </button>
+          </>
+        ) : (
+          <>
+            <Link to="/login" style={link}>
+              Entrar
+            </Link>
+            <Link
+              to="/register"
+              style={{
+                ...link,
+                background: 'rgba(255,255,255,0.18)',
+                border: '1px solid rgba(255,255,255,0.4)',
+              }}
+            >
+              Cadastrar
+            </Link>
+          </>
+        )}
+      </nav>
+
+      <main
+        className="site-main"
+        style={{
+          flex: 1,
+          maxWidth: '1200px',
+          width: '100%',
+          margin: '0 auto',
+          boxSizing: 'border-box',
+        }}
+      >
+        <Outlet />
+      </main>
+
+      <footer
+        style={{
+          textAlign: 'center',
+          padding: '1.25rem 1rem',
+          fontSize: '0.8rem',
+          color: 'var(--color-text-muted)',
+          borderTop: '1px solid #e5e7eb',
+        }}
+      >
+        <div style={{ marginBottom: '0.5rem', display: 'flex', justifyContent: 'center', gap: '1.25rem', flexWrap: 'wrap' }}>
+          <Link to="/terms" style={{ color: 'inherit', textDecoration: 'underline' }}>Termos de Serviço</Link>
+          <Link to="/privacy" style={{ color: 'inherit', textDecoration: 'underline' }}>Política de Privacidade</Link>
+          {siteConfig.supportEmail && (
+            <a href={`mailto:${siteConfig.supportEmail}`} style={{ color: 'inherit', textDecoration: 'underline' }}>Suporte</a>
+          )}
+        </div>
+        {siteConfig.name} © {new Date().getFullYear()} — {siteConfig.legal.companyName}
+      </footer>
+
+      <CookieConsent />
+    </div>
+  );
+}

package/templates/ecommerce/apps/web/src/shared/components/ProtectedRoute.tsx

@@ -0,0 +1,21 @@
+import { Navigate } from 'react-router-dom';
+import { useAuthStore } from '../../modules/auth/useAuthStore';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  requiredRole?: string;
+}
+
+export function ProtectedRoute({ children, requiredRole }: ProtectedRouteProps) {
+  const { accessToken, user } = useAuthStore();
+
+  if (!accessToken) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (requiredRole && user?.role !== requiredRole) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+}

package/templates/ecommerce/apps/web/src/shared/config/siteConfig.ts

@@ -0,0 +1,57 @@
+/**
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Site Configuration — White-Label
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Centralizes every store-specific detail so that a new tenant only needs to
+ * edit this file. Theme colors live in apps/web/src/index.css (CSS variables).
+ *
+ * HOW TO CUSTOMIZE:
+ *  1. Change the values below to match your brand.
+ *  2. Replace `logo` with an <img> path or emoji; see Layout.tsx.
+ *  3. Fill in `legal.*` — Brazilian law requires CNPJ + address on invoices.
+ *  4. Update `privacyEmail` with the actual DPO / privacy contact.
+ */
+
+export const siteConfig = {
+  // ── Brand ──────────────────────────────────────────────────────────────────
+  name: 'Minha Loja',
+  tagline: 'Os melhores produtos para você',
+
+  /** Emoji, text, or relative URL to an image (e.g. "/logo.png") */
+  logo: '🛒',
+
+  /** Canonical URL — used in legal pages and meta tags */
+  url: 'https://minhaloja.com.br',
+
+  // ── Contact ────────────────────────────────────────────────────────────────
+  supportEmail: 'suporte@minhaloja.com.br',
+
+  /** Data Protection Officer — required by LGPD art. 5, XVIII */
+  privacyEmail: 'privacidade@minhaloja.com.br',
+
+  // ── Legal (required for Brazilian e-commerce — Lei 7.962/2013) ─────────────
+  legal: {
+    companyName: 'Minha Loja LTDA',
+    cnpj: '00.000.000/0001-00',
+    address: 'Rua Exemplo, 123 — São Paulo, SP, CEP 01000-000',
+
+    /** Date the current Terms of Service / Privacy Policy became effective */
+    termsEffectiveDate: '1º de janeiro de 2025',
+  },
+
+  // ── Social ─────────────────────────────────────────────────────────────────
+  social: {
+    instagram: '',
+    twitter: '',
+    facebook: '',
+    whatsapp: '',
+  },
+
+  // ── Cookie consent ─────────────────────────────────────────────────────────
+  cookies: {
+    /** localStorage key used to store the user's consent decision */
+    storageKey: 'cookieConsent',
+  },
+} as const;
+
+export type SiteConfig = typeof siteConfig;

package/templates/ecommerce/apps/web/src/shared/hooks/usePageTitle.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { siteConfig } from '../config/siteConfig';
+
+/**
+ * Sets document.title to "<title> | <siteConfig.name>" while the component is
+ * mounted, then restores the base site name on unmount.
+ */
+export function usePageTitle(title: string) {
+  useEffect(() => {
+    const prev = document.title;
+    document.title = title ? `${title} | ${siteConfig.name}` : siteConfig.name;
+    return () => {
+      document.title = prev;
+    };
+  }, [title]);
+}

package/templates/ecommerce/apps/web/src/shared/lib/apiFetch.ts

@@ -0,0 +1,16 @@
+import { useAuthStore } from '../../modules/auth/useAuthStore';
+
+export async function apiFetch<T>(url: string, opts: RequestInit = {}): Promise<T> {
+  const token = useAuthStore.getState().accessToken;
+  const res = await fetch(url, {
+    ...opts,
+    credentials: 'include', // always send httpOnly cookies (e.g. refreshToken)
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(opts.headers as Record<string, string> | undefined),
+    },
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json() as Promise<T>;
+}

package/templates/ecommerce/apps/web/src/shared/pages/NotFoundPage.tsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import { siteConfig } from '../config/siteConfig';
+
+export function NotFoundPage() {
+  return (
+    <main
+      style={{
+        textAlign: 'center',
+        padding: '5rem 2rem',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '1rem',
+      }}
+    >
+      <p style={{ fontSize: '6rem', lineHeight: 1, fontWeight: 800, color: '#e5e7eb' }}>
+        404
+      </p>
+      <h1 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#111827' }}>
+        Página não encontrada
+      </h1>
+      <p style={{ color: '#6b7280', maxWidth: '360px' }}>
+        O endereço que você tentou acessar não existe ou foi removido.
+      </p>
+      <Link
+        to="/"
+        style={{
+          marginTop: '0.5rem',
+          background: 'var(--color-primary)',
+          color: '#fff',
+          textDecoration: 'none',
+          padding: '0.6rem 1.5rem',
+          borderRadius: '6px',
+          fontWeight: 600,
+          fontSize: '0.9rem',
+        }}
+      >
+        Voltar para {siteConfig.name}
+      </Link>
+    </main>
+  );
+}

package/templates/ecommerce/apps/web/src/shared/theme/ThemeProvider.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { type ThemeConfig } from './tokens';
+import { createTheme, themeToCSSVars } from './createTheme';
+
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+// ── Context ───────────────────────────────────────────────────────────────────
+interface ThemeContextValue {
+  theme: ThemeConfig;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+// ── Provider ──────────────────────────────────────────────────────────────────
+interface ThemeProviderProps {
+  children: ReactNode;
+  /**
+   * Partial theme overrides for white-label customisation.
+   * Only the keys you provide will differ from the default theme.
+   * Example: <ThemeProvider customTheme={{ colors: { primary: '#FF0000' } }}>
+   */
+  customTheme?: DeepPartial<ThemeConfig>;
+}
+
+export function ThemeProvider({ children, customTheme }: ThemeProviderProps) {
+  const theme = useMemo(() => createTheme(customTheme), [customTheme]);
+  const cssVars = useMemo(() => themeToCSSVars(theme), [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme }}>
+      {/* The wrapper div injects all design tokens as CSS custom properties
+          so every descendant can use var(--color-primary) etc. */}
+      <div style={{ ...(cssVars as React.CSSProperties), background: 'var(--color-background)', color: 'var(--color-text)', fontFamily: 'var(--font-family)', minHeight: '100%' }}>{children}</div>
+    </ThemeContext.Provider>
+  );
+}
+
+// ── Consumer hook ─────────────────────────────────────────────────────────────
+export function useTheme(): ThemeConfig {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider');
+  return ctx.theme;
+}

package/templates/ecommerce/apps/web/src/shared/theme/__tests__/ThemeProvider.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider, useTheme } from '../ThemeProvider';
+
+// ── Helper component that exposes theme values via data-* attrs ─────────────
+const ThemeConsumer = () => {
+  const theme = useTheme();
+  return (
+    <div
+      data-testid="consumer"
+      data-primary={theme.colors.primary}
+      data-store-name={theme.storeName}
+    >
+      consumer
+    </div>
+  );
+};
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+describe('ThemeProvider', () => {
+  it('deve renderizar filhos com o tema padrão', () => {
+    render(
+      <ThemeProvider>
+        <div>child content</div>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByText('child content')).toBeInTheDocument();
+  });
+
+  it('deve sobrescrever cor primária via prop customTheme', () => {
+    render(
+      <ThemeProvider customTheme={{ colors: { primary: '#FF0000' } }}>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('consumer')).toHaveAttribute('data-primary', '#FF0000');
+  });
+
+  it('deve manter demais tokens intactos ao sobrescrever apenas primary', () => {
+    render(
+      <ThemeProvider customTheme={{ colors: { primary: '#FF0000' } }}>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+
+    // storeName não foi alterado — mantém o default
+    expect(screen.getByTestId('consumer')).toHaveAttribute('data-store-name', 'My Store');
+  });
+
+  it('deve expor tokens CSS custom properties no DOM via inline style', () => {
+    const { container } = render(
+      <ThemeProvider>
+        <div>content</div>
+      </ThemeProvider>,
+    );
+
+    // ThemeProvider envolve os filhos num <div> com CSS vars aplicadas
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.style.getPropertyValue('--color-primary')).not.toBe('');
+  });
+
+  it('deve lançar erro ao usar useTheme fora do ThemeProvider', () => {
+    // Suppress the expected console.error from React during this test
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const BareConsumer = () => {
+      useTheme(); // deve lançar
+      return <div />;
+    };
+
+    expect(() => render(<BareConsumer />)).toThrow(
+      'useTheme must be used within a ThemeProvider',
+    );
+
+    consoleError.mockRestore();
+  });
+});

package/templates/ecommerce/apps/web/src/shared/theme/createTheme.ts

@@ -0,0 +1,58 @@
+import { ThemeConfig, defaultTheme } from './tokens';
+
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+/**
+ * Merges user overrides with the default theme.
+ * Only the top-level and second-level keys are merged (deep enough for the
+ * current data shape; extend if nesting grows).
+ */
+export function createTheme(overrides: DeepPartial<ThemeConfig> = {}): ThemeConfig {
+  return {
+    ...defaultTheme,
+    ...overrides,
+    colors: { ...defaultTheme.colors, ...overrides.colors },
+    typography: {
+      ...defaultTheme.typography,
+      ...overrides.typography,
+      fontSize: {
+        ...defaultTheme.typography.fontSize,
+        ...overrides.typography?.fontSize,
+      },
+    },
+    borderRadius: { ...defaultTheme.borderRadius, ...overrides.borderRadius },
+    logo: { ...defaultTheme.logo, ...overrides.logo },
+  };
+}
+
+/**
+ * Converts a ThemeConfig into a flat map of CSS custom properties.
+ * The result can be spread onto an element's inline style to expose
+ * the full design token set to all descendant components via var().
+ */
+export function themeToCSSVars(theme: ThemeConfig): Record<string, string> {
+  return {
+    '--color-primary': theme.colors.primary,
+    '--color-secondary': theme.colors.secondary,
+    '--color-accent': theme.colors.accent,
+    '--color-background': theme.colors.background,
+    '--color-surface': theme.colors.surface,
+    '--color-error': theme.colors.error,
+    '--color-text': theme.colors.text,
+    '--color-text-muted': theme.colors.textMuted,
+    '--font-family': theme.typography.fontFamily,
+    '--font-size-xs': theme.typography.fontSize.xs,
+    '--font-size-sm': theme.typography.fontSize.sm,
+    '--font-size-base': theme.typography.fontSize.base,
+    '--font-size-lg': theme.typography.fontSize.lg,
+    '--font-size-xl': theme.typography.fontSize.xl,
+    '--font-size-2xl': theme.typography.fontSize['2xl'],
+    '--font-size-3xl': theme.typography.fontSize['3xl'],
+    '--border-radius-sm': theme.borderRadius.sm,
+    '--border-radius-md': theme.borderRadius.md,
+    '--border-radius-lg': theme.borderRadius.lg,
+    '--border-radius-full': theme.borderRadius.full,
+  };
+}

package/templates/ecommerce/apps/web/src/shared/theme/tokens.ts

@@ -0,0 +1,81 @@
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  accent: string;
+  background: string;
+  surface: string;
+  error: string;
+  text: string;
+  textMuted: string;
+}
+
+export interface ThemeTypography {
+  fontFamily: string;
+  fontSize: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+  };
+}
+
+export interface ThemeBorderRadius {
+  sm: string;
+  md: string;
+  lg: string;
+  full: string;
+}
+
+export interface ThemeLogo {
+  src: string;
+  alt: string;
+  width: number;
+}
+
+export interface ThemeConfig {
+  storeName: string;
+  colors: ThemeColors;
+  typography: ThemeTypography;
+  borderRadius: ThemeBorderRadius;
+  logo: ThemeLogo;
+}
+
+export const defaultTheme: ThemeConfig = {
+  storeName: 'My Store',
+  colors: {
+    primary: '#6366F1',
+    secondary: '#8B5CF6',
+    accent: '#F59E0B',
+    background: '#F9FAFB',
+    surface: '#FFFFFF',
+    error: '#EF4444',
+    text: '#111827',
+    textMuted: '#6B7280',
+  },
+  typography: {
+    fontFamily: "'Inter', system-ui, sans-serif",
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+    },
+  },
+  borderRadius: {
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '9999px',
+  },
+  logo: {
+    src: '/logo.svg',
+    alt: 'My Store',
+    width: 120,
+  },
+};

package/templates/ecommerce/apps/web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />