@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/lib/theme/__tests__/ThemeBuilder.test.ts

@@ -1,223 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { ThemeBuilder, createThemeBuilder, createTheme } from '../builders/ThemeBuilder';
-
-describe('ThemeBuilder', () => {
-  describe('Basic Builder Operations', () => {
-    it('should create a theme with name', () => {
-      const theme = new ThemeBuilder()
-        .setName('test-theme')
-        .build();
-
-      expect(theme.name).toBe('test-theme');
-    });
-
-    it('should set CSS variables', () => {
-      const theme = new ThemeBuilder()
-        .setCSSVars({
-          '--color-primary': '#FF0000',
-          '--spacing-base': '16px',
-        })
-        .build();
-
-      expect(theme.cssVars).toEqual({
-        '--color-primary': '#FF0000',
-        '--spacing-base': '16px',
-      });
-    });
-
-    it('should add individual CSS variable', () => {
-      const theme = new ThemeBuilder()
-        .addCSSVar('--color-primary', '#FF0000')
-        .addCSSVar('--spacing-base', '16px')
-        .build();
-
-      expect(theme.cssVars).toEqual({
-        '--color-primary': '#FF0000',
-        '--spacing-base': '16px',
-      });
-    });
-  });
-
-  describe('Typography', () => {
-    it('should set typography', () => {
-      const typography = {
-        fontFamily: 'Inter, sans-serif',
-        fontSize: {
-          sm: '0.875rem',
-          md: '1rem',
-          lg: '1.125rem',
-        },
-        fontWeight: {
-          normal: 400,
-          medium: 500,
-          bold: 700,
-        },
-      };
-
-      const theme = new ThemeBuilder()
-        .setTypography(typography)
-        .build();
-
-      expect(theme.typography).toEqual(typography);
-    });
-  });
-
-  describe('Palette', () => {
-    it('should set color palette', () => {
-      const palette = {
-        primary: {
-          500: '#7AFFD7',
-          600: '#00E6C3',
-        },
-        secondary: {
-          500: '#FF4785',
-        },
-      };
-
-      const theme = new ThemeBuilder()
-        .setPalette(palette)
-        .build();
-
-      expect(theme.palette).toEqual(palette);
-    });
-  });
-
-  describe('Component Overrides', () => {
-    it('should override component with CSS variables', () => {
-      const theme = new ThemeBuilder()
-        .overrideComponent('Button', {
-          cssVars: {
-            '--atomix-button-bg': '#FF0000',
-            '--atomix-button-border-radius': '20px',
-          },
-        })
-        .build();
-
-      expect(theme.components?.Button?.cssVars).toEqual({
-        '--atomix-button-bg': '#FF0000',
-        '--atomix-button-border-radius': '20px',
-      });
-    });
-
-    it('should set component CSS variables directly', () => {
-      const theme = new ThemeBuilder()
-        .setComponentCSSVars('Button', {
-          '--atomix-button-bg': '#FF0000',
-        })
-        .build();
-
-      expect(theme.components?.Button?.cssVars).toEqual({
-        '--atomix-button-bg': '#FF0000',
-      });
-    });
-
-    it('should set component part configuration', () => {
-      const theme = new ThemeBuilder()
-        .setComponentPart('Button', 'icon', {
-          cssVars: { '--atomix-button-icon-size': '20px' },
-          className: 'custom-icon',
-        })
-        .build();
-
-      expect(theme.components?.Button?.parts?.icon).toEqual({
-        cssVars: { '--atomix-button-icon-size': '20px' },
-        className: 'custom-icon',
-      });
-    });
-
-    it('should override multiple components', () => {
-      const theme = new ThemeBuilder()
-        .overrideComponent('Button', {
-          cssVars: { '--atomix-button-bg': '#FF0000' },
-        })
-        .overrideComponent('Card', {
-          cssVars: { '--atomix-card-bg': '#FFFFFF' },
-        })
-        .build();
-
-      expect(theme.components?.Button?.cssVars).toEqual({
-        '--atomix-button-bg': '#FF0000',
-      });
-      expect(theme.components?.Card?.cssVars).toEqual({
-        '--atomix-card-bg': '#FFFFFF',
-      });
-    });
-  });
-
-  describe('Builder Methods', () => {
-    it('should build partial theme', () => {
-      const builder = new ThemeBuilder()
-        .setName('test-theme')
-        .setCSSVars({ '--color-primary': '#FF0000' });
-
-      const partial = builder.buildPartial();
-
-      expect(partial.name).toBe('test-theme');
-      expect(partial.cssVars).toEqual({ '--color-primary': '#FF0000' });
-    });
-
-    it('should reset builder', () => {
-      const builder = new ThemeBuilder()
-        .setName('test-theme')
-        .setCSSVars({ '--color-primary': '#FF0000' })
-        .reset();
-
-      const theme = builder.build();
-
-      expect(theme.name).toBeUndefined();
-      expect(theme.cssVars).toBeUndefined();
-    });
-
-    it('should get current theme state', () => {
-      const builder = new ThemeBuilder()
-        .setName('test-theme')
-        .setCSSVars({ '--color-primary': '#FF0000' });
-
-      const state = builder.getTheme();
-
-      expect(state.name).toBe('test-theme');
-      expect(state.cssVars).toEqual({ '--color-primary': '#FF0000' });
-    });
-  });
-
-  describe('Factory Functions', () => {
-    it('should create theme builder', () => {
-      const builder = createThemeBuilder();
-      expect(builder).toBeInstanceOf(ThemeBuilder);
-    });
-
-    it('should create theme with config', () => {
-      const theme = createTheme({
-        name: 'test-theme',
-        cssVars: { '--color-primary': '#FF0000' },
-        palette: {
-          primary: { 500: '#7AFFD7' },
-        },
-      });
-
-      expect(theme.name).toBe('test-theme');
-      expect(theme.cssVars).toEqual({ '--color-primary': '#FF0000' });
-      expect(theme.palette).toEqual({
-        primary: { 500: '#7AFFD7' },
-      });
-    });
-  });
-
-  describe('Method Chaining', () => {
-    it('should support fluent API', () => {
-      const theme = new ThemeBuilder()
-        .setName('test-theme')
-        .setCSSVars({ '--color-primary': '#FF0000' })
-        .setPalette({ primary: { 500: '#7AFFD7' } })
-        .overrideComponent('Button', {
-          cssVars: { '--atomix-button-bg': '#FF0000' },
-        })
-        .build();
-
-      expect(theme.name).toBe('test-theme');
-      expect(theme.cssVars).toBeDefined();
-      expect(theme.palette).toBeDefined();
-      expect(theme.components?.Button).toBeDefined();
-    });
-  });
-});

package/src/lib/theme/builders/ThemeBuilder.ts

@@ -1,372 +0,0 @@
-/**
- * Theme Builder
- * 
- * Fluent API for building theme configurations with type safety and validation.
- */
-
-import type { Theme, ThemeComponentOverrides, ComponentThemeOverride } from '../types';
-
-/**
- * Theme builder class with fluent API
- */
-export class ThemeBuilder {
-  private theme: Partial<Theme> = {};
-
-  /**
-   * Set theme name
-   */
-  setName(name: string): this {
-    this.theme.name = name;
-    return this;
-  }
-
-  /**
-   * Set global CSS variables
-   */
-  setCSSVars(vars: Record<string, string | number>): this {
-    this.theme.cssVars = { ...this.theme.cssVars, ...vars };
-    return this;
-  }
-
-  /**
-   * Add a single CSS variable
-   */
-  addCSSVar(key: string, value: string | number): this {
-    if (!this.theme.cssVars) {
-      this.theme.cssVars = {};
-    }
-    this.theme.cssVars[key] = value;
-    return this;
-  }
-
-  /**
-   * Set typography configuration
-   */
-  setTypography(typography: Theme['typography']): this {
-    this.theme.typography = typography;
-    return this;
-  }
-
-  /**
-   * Set font family
-   */
-  setFontFamily(fontFamily: string): this {
-    if (!this.theme.typography) {
-      this.theme.typography = {};
-    }
-    this.theme.typography.fontFamily = fontFamily;
-    return this;
-  }
-
-  /**
-   * Set font sizes
-   */
-  setFontSizes(fontSize: Record<string, string>): this {
-    if (!this.theme.typography) {
-      this.theme.typography = {};
-    }
-    this.theme.typography.fontSize = fontSize;
-    return this;
-  }
-
-  /**
-   * Set font weights
-   */
-  setFontWeights(fontWeight: Record<string, number>): this {
-    if (!this.theme.typography) {
-      this.theme.typography = {};
-    }
-    this.theme.typography.fontWeight = fontWeight;
-    return this;
-  }
-
-  /**
-   * Set line heights
-   */
-  setLineHeights(lineHeight: Record<string, number>): this {
-    if (!this.theme.typography) {
-      this.theme.typography = {};
-    }
-    this.theme.typography.lineHeight = lineHeight;
-    return this;
-  }
-
-  /**
-   * Set spacing system
-   */
-  setSpacing(spacing: Record<string, string | number>): this {
-    this.theme.spacing = spacing;
-    return this;
-  }
-
-  /**
-   * Set color palette
-   */
-  setPalette(palette: Theme['palette']): this {
-    this.theme.palette = palette;
-    return this;
-  }
-
-  /**
-   * Set a specific color scale
-   */
-  setColorScale(
-    colorName: keyof NonNullable<Theme['palette']>,
-    scale: NonNullable<Theme['palette']>[typeof colorName]
-  ): this {
-    if (!this.theme.palette) {
-      this.theme.palette = {};
-    }
-    this.theme.palette[colorName] = scale;
-    return this;
-  }
-
-  /**
-   * Override a component's configuration
-   */
-  overrideComponent<C extends keyof ThemeComponentOverrides>(
-    component: C,
-    override: ThemeComponentOverrides[C]
-  ): this {
-    if (!this.theme.components) {
-      this.theme.components = {};
-    }
-    this.theme.components[component] = override;
-    return this;
-  }
-
-  /**
-   * Set component CSS variables
-   */
-  setComponentCSSVars<C extends keyof ThemeComponentOverrides>(
-    component: C,
-    vars: Record<string, string | number>
-  ): this {
-    if (!this.theme.components) {
-      this.theme.components = {};
-    }
-    if (!this.theme.components[component]) {
-      this.theme.components[component] = {} as any;
-    }
-    const componentOverride = this.theme.components[component] as ComponentThemeOverride;
-    componentOverride.cssVars = { ...componentOverride.cssVars, ...vars };
-    return this;
-  }
-
-  /**
-   * Set component default props
-   */
-  setComponentDefaultProps<C extends keyof ThemeComponentOverrides>(
-    component: C,
-    defaultProps: Record<string, any>
-  ): this {
-    if (!this.theme.components) {
-      this.theme.components = {};
-    }
-    if (!this.theme.components[component]) {
-      this.theme.components[component] = {} as any;
-    }
-    const componentOverride = this.theme.components[component] as ComponentThemeOverride;
-    componentOverride.defaultProps = { ...componentOverride.defaultProps, ...defaultProps };
-    return this;
-  }
-
-  /**
-   * Set component part styles
-   */
-  setComponentPart<C extends keyof ThemeComponentOverrides>(
-    component: C,
-    partName: string,
-    partConfig: {
-      cssVars?: Record<string, string | number>;
-      className?: string;
-    }
-  ): this {
-    if (!this.theme.components) {
-      this.theme.components = {};
-    }
-    if (!this.theme.components[component]) {
-      this.theme.components[component] = {} as any;
-    }
-    const componentOverride = this.theme.components[component] as ComponentThemeOverride;
-    if (!componentOverride.parts) {
-      componentOverride.parts = {};
-    }
-    componentOverride.parts[partName] = partConfig;
-    return this;
-  }
-
-  /**
-   * Set component variant styles
-   */
-  setComponentVariant<C extends keyof ThemeComponentOverrides>(
-    component: C,
-    variantName: string,
-    variantConfig: {
-      cssVars?: Record<string, string | number>;
-      className?: string;
-    }
-  ): this {
-    if (!this.theme.components) {
-      this.theme.components = {};
-    }
-    if (!this.theme.components[component]) {
-      this.theme.components[component] = {} as any;
-    }
-    const componentOverride = this.theme.components[component] as ComponentThemeOverride;
-    if (!componentOverride.variants) {
-      componentOverride.variants = {};
-    }
-    componentOverride.variants[variantName] = variantConfig;
-    return this;
-  }
-
-  /**
-   * Merge with another theme
-   */
-  merge(otherTheme: Partial<Theme>): this {
-    // Deep merge logic
-    if (otherTheme.name) this.theme.name = otherTheme.name;
-    
-    if (otherTheme.cssVars) {
-      this.theme.cssVars = { ...this.theme.cssVars, ...otherTheme.cssVars };
-    }
-
-    if (otherTheme.typography) {
-      this.theme.typography = {
-        ...this.theme.typography,
-        ...otherTheme.typography,
-        fontSize: {
-          ...this.theme.typography?.fontSize,
-          ...otherTheme.typography.fontSize,
-        },
-        fontWeight: {
-          ...this.theme.typography?.fontWeight,
-          ...otherTheme.typography.fontWeight,
-        },
-        lineHeight: {
-          ...this.theme.typography?.lineHeight,
-          ...otherTheme.typography.lineHeight,
-        },
-      };
-    }
-
-    if (otherTheme.spacing) {
-      this.theme.spacing = { ...this.theme.spacing, ...otherTheme.spacing };
-    }
-
-    if (otherTheme.palette) {
-      this.theme.palette = {
-        ...this.theme.palette,
-        ...otherTheme.palette,
-      };
-    }
-
-    if (otherTheme.components) {
-      this.theme.components = {
-        ...this.theme.components,
-        ...otherTheme.components,
-      };
-    }
-
-    return this;
-  }
-
-  /**
-   * Clone the current builder
-   */
-  clone(): ThemeBuilder {
-    const newBuilder = new ThemeBuilder();
-    newBuilder.theme = JSON.parse(JSON.stringify(this.theme));
-    return newBuilder;
-  }
-
-  /**
-   * Build and return the theme
-   */
-  build(): Theme {
-    if (!this.theme.name) {
-      throw new Error('Theme name is required. Use setName() to set it.');
-    }
-
-    return this.theme as Theme;
-  }
-
-  /**
-   * Build without validation (returns partial theme)
-   */
-  buildPartial(): Partial<Theme> {
-    return { ...this.theme };
-  }
-
-  /**
-   * Reset the builder
-   */
-  reset(): this {
-    this.theme = {};
-    return this;
-  }
-
-  /**
-   * Get current theme state
-   */
-  getTheme(): Partial<Theme> {
-    return { ...this.theme };
-  }
-}
-
-/**
- * Create a new theme builder
- */
-export function createThemeBuilder(): ThemeBuilder {
-  return new ThemeBuilder();
-}
-
-/**
- * Create a theme from a base theme
- */
-export function extendTheme(baseTheme: Theme): ThemeBuilder {
-  const builder = new ThemeBuilder();
-  builder.merge(baseTheme);
-  return builder;
-}
-
-/**
- * Quick theme creation helper
- */
-export function createTheme(config: {
-  name: string;
-  cssVars?: Record<string, string | number>;
-  typography?: Theme['typography'];
-  spacing?: Record<string, string | number>;
-  palette?: Theme['palette'];
-  components?: ThemeComponentOverrides;
-}): Theme {
-  const builder = new ThemeBuilder();
-  
-  builder.setName(config.name);
-  
-  if (config.cssVars) {
-    builder.setCSSVars(config.cssVars);
-  }
-  
-  if (config.typography) {
-    builder.setTypography(config.typography);
-  }
-  
-  if (config.spacing) {
-    builder.setSpacing(config.spacing);
-  }
-  
-  if (config.palette) {
-    builder.setPalette(config.palette);
-  }
-  
-  if (config.components) {
-    Object.entries(config.components).forEach(([component, override]) => {
-      builder.overrideComponent(component as any, override as any);
-    });
-  }
-  
-  return builder.build();
-}