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

package/dist/ui/tokens/themes/dark.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Dark Theme Tokens
+ *
+ * Dark theme color palette and tokens.
+ */
+export declare const DARK_THEME: {
+    readonly colors: Record<import("../colors").ColorRole, import("../colors").SemanticColor>;
+    readonly spacing: {
+        readonly none: import("../spacing").SpacingToken;
+        readonly xs: import("../spacing").SpacingToken;
+        readonly sm: import("../spacing").SpacingToken;
+        readonly md: import("../spacing").SpacingToken;
+        readonly base: import("../spacing").SpacingToken;
+        readonly lg: import("../spacing").SpacingToken;
+        readonly xl: import("../spacing").SpacingToken;
+        readonly '2xl': import("../spacing").SpacingToken;
+        readonly '3xl': import("../spacing").SpacingToken;
+        readonly '4xl': import("../spacing").SpacingToken;
+        readonly '5xl': import("../spacing").SpacingToken;
+        readonly '6xl': import("../spacing").SpacingToken;
+    };
+    readonly typography: {
+        readonly h1: import("../typography").TypographyToken;
+        readonly h2: import("../typography").TypographyToken;
+        readonly h3: import("../typography").TypographyToken;
+        readonly h4: import("../typography").TypographyToken;
+        readonly h5: import("../typography").TypographyToken;
+        readonly h6: import("../typography").TypographyToken;
+        readonly body: import("../typography").TypographyToken;
+        readonly bodySmall: import("../typography").TypographyToken;
+        readonly bodyLarge: import("../typography").TypographyToken;
+        readonly label: import("../typography").TypographyToken;
+        readonly caption: import("../typography").TypographyToken;
+        readonly button: import("../typography").TypographyToken;
+    };
+    readonly breakpoints: Record<import("../breakpoints").BreakpointName, import("../breakpoints").BreakpointToken>;
+    readonly mode: "dark";
+};

package/dist/ui/tokens/themes/light.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Light Theme Tokens
+ *
+ * Light theme color palette and tokens.
+ */
+export declare const LIGHT_THEME: {
+    readonly colors: Record<import("../colors").ColorRole, import("../colors").SemanticColor>;
+    readonly spacing: {
+        readonly none: import("../spacing").SpacingToken;
+        readonly xs: import("../spacing").SpacingToken;
+        readonly sm: import("../spacing").SpacingToken;
+        readonly md: import("../spacing").SpacingToken;
+        readonly base: import("../spacing").SpacingToken;
+        readonly lg: import("../spacing").SpacingToken;
+        readonly xl: import("../spacing").SpacingToken;
+        readonly '2xl': import("../spacing").SpacingToken;
+        readonly '3xl': import("../spacing").SpacingToken;
+        readonly '4xl': import("../spacing").SpacingToken;
+        readonly '5xl': import("../spacing").SpacingToken;
+        readonly '6xl': import("../spacing").SpacingToken;
+    };
+    readonly typography: {
+        readonly h1: import("../typography").TypographyToken;
+        readonly h2: import("../typography").TypographyToken;
+        readonly h3: import("../typography").TypographyToken;
+        readonly h4: import("../typography").TypographyToken;
+        readonly h5: import("../typography").TypographyToken;
+        readonly h6: import("../typography").TypographyToken;
+        readonly body: import("../typography").TypographyToken;
+        readonly bodySmall: import("../typography").TypographyToken;
+        readonly bodyLarge: import("../typography").TypographyToken;
+        readonly label: import("../typography").TypographyToken;
+        readonly caption: import("../typography").TypographyToken;
+        readonly button: import("../typography").TypographyToken;
+    };
+    readonly breakpoints: Record<import("../breakpoints").BreakpointName, import("../breakpoints").BreakpointToken>;
+    readonly mode: "light";
+};

package/dist/ui/tokens/tokens.factory.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Tokens Factory
+ *
+ * Main factory for creating all types of tokens.
+ * Implements Factory Pattern for unified token creation.
+ */
+import { type SpacingScale, type SpacingToken } from './spacing';
+import { type TypographyToken, type FontSize, type LineHeight, type FontWeight } from './typography';
+import { type ColorRole, type SemanticColor } from './colors';
+import { type BreakpointName, type BreakpointToken } from './breakpoints';
+export type ThemeMode = 'light' | 'dark';
+export interface TokenSet {
+    spacing: Record<string, SpacingToken>;
+    typography: Record<string, TypographyToken>;
+    colors: Record<ColorRole, SemanticColor>;
+    breakpoints: Record<BreakpointName, BreakpointToken>;
+}
+/**
+ * Tokens Factory
+ * Main factory for creating complete token sets
+ */
+export declare class TokensFactory {
+    private colorFactory;
+    constructor(theme?: ThemeMode);
+    /**
+     * Create spacing token
+     */
+    createSpacing(scale: SpacingScale): SpacingToken;
+    /**
+     * Create typography token
+     */
+    createTypography(size: FontSize, lineHeight?: LineHeight, weight?: FontWeight): TypographyToken;
+    /**
+     * Create color palette
+     */
+    createColorPalette(): Record<ColorRole, SemanticColor>;
+    /**
+     * Create breakpoint token
+     */
+    createBreakpoint(name: BreakpointName): BreakpointToken;
+    /**
+     * Create complete token set for a theme
+     */
+    createTokenSet(): TokenSet;
+    /**
+     * Switch theme
+     */
+    setTheme(theme: ThemeMode): void;
+}
+/**
+ * Default factory instance (light theme)
+ */
+export declare const defaultTokensFactory: TokensFactory;
+/**
+ * Helper function to create token set
+ */
+export declare function createTokenSet(theme?: ThemeMode): TokenSet;

package/dist/ui/tokens/typography.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Typography Tokens
+ *
+ * Centralized typography system with font families, sizes, weights, and line heights.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+export type FontFamily = 'sans' | 'serif' | 'mono';
+export type FontWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+export type FontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type LineHeight = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+export interface TypographyToken {
+    fontSize: {
+        value: number;
+        rem: string;
+        px: string;
+        tailwind: string;
+    };
+    lineHeight: {
+        value: number;
+        tailwind: string;
+    };
+    fontWeight: {
+        value: number;
+        tailwind: string;
+    };
+}
+export interface FontFamilyToken {
+    name: string;
+    stack: string;
+    tailwind: string;
+}
+export interface FontWeightToken {
+    value: number;
+    tailwind: string;
+}
+/**
+ * Typography Token Factory
+ * Creates typography tokens with consistent values
+ */
+export declare class TypographyTokenFactory {
+    /**
+     * Create font size token
+     */
+    static createFontSize(size: FontSize): TypographyToken['fontSize'];
+    /**
+     * Create line height token
+     */
+    static createLineHeight(height: LineHeight): TypographyToken['lineHeight'];
+    /**
+     * Create font weight token
+     */
+    static createFontWeight(weight: FontWeight): FontWeightToken;
+    /**
+     * Create complete typography token
+     */
+    static create(size: FontSize, lineHeight?: LineHeight, weight?: FontWeight): TypographyToken;
+}
+/**
+ * Font family tokens
+ */
+export declare const FONT_FAMILY_TOKENS: Record<FontFamily, FontFamilyToken>;
+/**
+ * Font weight tokens
+ */
+export declare const FONT_WEIGHT_TOKENS: Record<FontWeight, FontWeightToken>;
+/**
+ * Pre-defined typography tokens for common use cases
+ */
+export declare const TYPOGRAPHY_TOKENS: {
+    readonly h1: TypographyToken;
+    readonly h2: TypographyToken;
+    readonly h3: TypographyToken;
+    readonly h4: TypographyToken;
+    readonly h5: TypographyToken;
+    readonly h6: TypographyToken;
+    readonly body: TypographyToken;
+    readonly bodySmall: TypographyToken;
+    readonly bodyLarge: TypographyToken;
+    readonly label: TypographyToken;
+    readonly caption: TypographyToken;
+    readonly button: TypographyToken;
+};
+/**
+ * Helper function to get typography token
+ */
+export declare function getTypography(variant: keyof typeof TYPOGRAPHY_TOKENS): TypographyToken;
+/**
+ * Helper function to get typography classes as string
+ */
+export declare function getTypographyClasses(variant: keyof typeof TYPOGRAPHY_TOKENS): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,8 @@
   },
   "peerDependencies": {
     "react": ">=19",
-    "react-dom": ">=19"
+    "react-dom": ">=19",
+    "lucide-react": "^0.552.0"
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.16",

package/src/ui/atoms/Button/Button.stories.tsx

@@ -1,16 +1,86 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
 
 const meta: Meta<typeof Button> = {
-  title: "UI/Atoms/Button",
+  title: 'Atoms/Button',
   component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'error', 'outline', 'ghost'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    isLoading: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
 };
 
-export const Primary: StoryObj<typeof Button> = {
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
   args: {
-    children: "Hello from Storybook",
-    variant: "regular",
+    variant: 'primary',
+    children: 'Primary Button',
   },
 };
 
-export default meta;
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary Button',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'Error Button',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Outline Button',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Ghost Button',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    children: 'Loading Button',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled Button',
+  },
+};

package/src/ui/atoms/Button/Button.tsx

@@ -1,35 +1,183 @@
-import type { ButtonHTMLAttributes } from "react";
+'use client';
 
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "regular" | "error" | "secondary";
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { getColorClass } from '../../tokens/colors';
+
+export type ButtonVariant = 'primary' | 'regular' | 'secondary' | 'error' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
 }
 
+/**
+ * Button Component Builder
+ * Uses Builder Pattern for constructing button classes
+ */
+class ButtonClassBuilder {
+  private classes: string[] = [];
+
+  addBase(): this {
+    this.classes.push(
+      'inline-flex',
+      'items-center',
+      'justify-center',
+      'font-medium',
+      'rounded-md',
+      'transition-colors',
+      'focus:outline-none',
+      'focus:ring-2',
+      'focus:ring-offset-2',
+      'disabled:opacity-50',
+      'disabled:cursor-not-allowed'
+    );
+    return this;
+  }
+
+  addVariant(variant: ButtonVariant): this {
+    // Map 'regular' to 'primary' for backward compatibility
+    const normalizedVariant = variant === 'regular' ? 'primary' : variant;
+    
+    const variantClasses: Record<'primary' | 'secondary' | 'error' | 'outline' | 'ghost', string[]> = {
+      primary: [
+        getColorClass('primary', 'DEFAULT', 'bg'),
+        getColorClass('primary', 'DEFAULT', 'text'),
+        'hover:opacity-90',
+        'focus:ring-indigo-500',
+      ],
+      secondary: [
+        getColorClass('secondary', 'DEFAULT', 'bg'),
+        getColorClass('secondary', 'DEFAULT', 'text'),
+        'hover:opacity-90',
+        'focus:ring-violet-500',
+      ],
+      error: [
+        getColorClass('error', 'DEFAULT', 'bg'),
+        getColorClass('error', 'DEFAULT', 'text'),
+        'hover:opacity-90',
+        'focus:ring-red-500',
+      ],
+      outline: [
+        'border-2',
+        'border-gray-300',
+        'bg-transparent',
+        'text-gray-700',
+        'hover:bg-gray-50',
+        'focus:ring-gray-500',
+      ],
+      ghost: [
+        'bg-transparent',
+        'text-gray-700',
+        'hover:bg-gray-100',
+        'focus:ring-gray-500',
+      ],
+    };
+
+    this.classes.push(...variantClasses[normalizedVariant]);
+    return this;
+  }
+
+  addSize(size: ButtonSize): this {
+    const sizeClasses: Record<ButtonSize, string[]> = {
+      sm: ['px-3', 'py-1.5', 'text-sm'],
+      md: ['px-4', 'py-2', 'text-base'],
+      lg: ['px-6', 'py-3', 'text-lg'],
+    };
+
+    this.classes.push(...sizeClasses[size]);
+    return this;
+  }
+
+  addCustom(className: string): this {
+    if (className) {
+      this.classes.push(className);
+    }
+    return this;
+  }
+
+  build(): string {
+    return this.classes.filter(Boolean).join(' ');
+  }
+}
+
+/**
+ * Button Component
+ * 
+ * A styled button component with variants and sizes.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Builder Pattern for class construction.
+ * 
+ * @example
+ * ```tsx
+ * <Button 
+ *   variant="primary"
+ *   size="md"
+ *   onClick={handleClick}
+ * >
+ *   Click me
+ * </Button>
+ * ```
+ */
 export default function Button({
-  className,
-  variant = "regular",
+  variant = 'primary',
+  size = 'md',
+  isLoading = false,
+  leftIcon,
+  rightIcon,
+  className = '',
+  disabled = false,
+  children,
   ...props
-}: Props) {
-  const classNames = [
-    className,
-    "rounded",
-    "h-form-element",
-    "lh-form-element",
-    "px-large",
-    "text-base",
-  ];
-
-  switch (variant) {
-    case "error":
-      classNames.push("bg-red-light", "text-red-dark", "font-bold");
-      break;
-    case "secondary":
-      classNames.push("bg-transparent", "text-grey-minor", "px-0");
-      break;
-    case "regular":
-    default:
-      classNames.push("bg-blue-light", "text-blue-dark", "font-bold");
-      break;
-  }
+}: ButtonProps) {
+  const builder = new ButtonClassBuilder();
+  const classes = builder
+    .addBase()
+    .addVariant(variant)
+    .addSize(size)
+    .addCustom(className)
+    .build();
 
-  return <button className={classNames.join(" ")} {...props} />;
+  return (
+    <button
+      className={classes}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <>
+          <svg
+            className="animate-spin -ml-1 mr-2 h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+          Loading...
+        </>
+      ) : (
+        <>
+          {leftIcon && <span className="mr-2">{leftIcon}</span>}
+          {children}
+          {rightIcon && <span className="ml-2">{rightIcon}</span>}
+        </>
+      )}
+    </button>
+  );
 }

package/src/ui/atoms/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Atoms/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    checked: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    label: 'I agree to the terms and conditions',
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'Subscribe to newsletter',
+    checked: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Accept terms',
+    error: true,
+    helperText: 'You must accept the terms to continue',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'This option is disabled',
+    disabled: true,
+    checked: false,
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    checked: false,
+  },
+};

package/src/ui/atoms/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import Checkbox from './Checkbox';
+
+describe('Checkbox', () => {
+  it('renders checkbox with label', () => {
+    render(<Checkbox label="Test checkbox" />);
+    expect(screen.getByLabelText('Test checkbox')).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const handleChange = vi.fn();
+    render(<Checkbox label="Test" onChange={handleChange} />);
+    
+    const checkbox = screen.getByLabelText('Test');
+    await userEvent.click(checkbox);
+    
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows error state', () => {
+    render(<Checkbox label="Test" error helperText="Error message" />);
+    expect(screen.getByText('Error message')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Checkbox label="Test" disabled />);
+    expect(screen.getByRole('checkbox')).toBeDisabled();
+  });
+});