@shohojdhara/atomix 0.4.7 → 0.4.9

package/src/lib/theme/devtools/__tests__/useHistory.test.tsx

@@ -0,0 +1,150 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useHistory } from '../useHistory';
+
+describe('useHistory', () => {
+  it('initializes with default values', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    expect(result.current.state).toBe('initial');
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.canRedo).toBe(false);
+    expect(result.current.getHistoryStats()).toEqual({ currentIndex: 0, totalEntries: 1 });
+  });
+
+  it('updates state and history on setState', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    act(() => {
+      result.current.setState('step 1');
+    });
+
+    expect(result.current.state).toBe('step 1');
+    expect(result.current.canUndo).toBe(true);
+    expect(result.current.canRedo).toBe(false);
+    expect(result.current.getHistoryStats()).toEqual({ currentIndex: 1, totalEntries: 2 });
+  });
+
+  it('handles undo correctly', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    act(() => {
+      result.current.setState('step 1');
+    });
+
+    act(() => {
+      result.current.undo();
+    });
+
+    expect(result.current.state).toBe('initial');
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.canRedo).toBe(true);
+    expect(result.current.getHistoryStats()).toEqual({ currentIndex: 0, totalEntries: 2 });
+  });
+
+  it('handles redo correctly', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    act(() => {
+      result.current.setState('step 1');
+    });
+
+    act(() => {
+      result.current.undo();
+    });
+
+    act(() => {
+      result.current.redo();
+    });
+
+    expect(result.current.state).toBe('step 1');
+    expect(result.current.canUndo).toBe(true);
+    expect(result.current.canRedo).toBe(false);
+    expect(result.current.getHistoryStats()).toEqual({ currentIndex: 1, totalEntries: 2 });
+  });
+
+  it('truncates future history when setState is called after undo', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    act(() => {
+      result.current.setState('step 1');
+    });
+    act(() => {
+      result.current.setState('step 2');
+    });
+    act(() => {
+      result.current.undo();
+    });
+
+    expect(result.current.state).toBe('step 1');
+
+    act(() => {
+      result.current.setState('step 1.5');
+    });
+
+    expect(result.current.state).toBe('step 1.5');
+    expect(result.current.canUndo).toBe(true);
+    expect(result.current.canRedo).toBe(false);
+    expect(result.current.getHistoryStats()).toEqual({ currentIndex: 2, totalEntries: 3 });
+  });
+
+  it('respects maxHistorySize limit', () => {
+    const { result } = renderHook(() => useHistory({ initialState: '0', maxHistorySize: 3 }));
+
+    act(() => { result.current.setState('1'); });
+    act(() => { result.current.setState('2'); });
+    act(() => { result.current.setState('3'); });
+    act(() => { result.current.setState('4'); });
+
+    // If maxHistorySize is 3, then total entries should be 3.
+    expect(result.current.state).toBe('4');
+    expect(result.current.getHistoryStats().totalEntries).toBe(3);
+    expect(result.current.getHistoryStats().currentIndex).toBe(2);
+
+    // Test that the oldest state has been removed by attempting to undo completely
+    act(() => { result.current.undo(); }); // state: 3
+    act(() => { result.current.undo(); }); // state: 2
+    expect(result.current.state).toBe('2');
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it('handles clearHistory', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    act(() => { result.current.setState('step 1'); });
+    act(() => { result.current.setState('step 2'); });
+
+    act(() => {
+      result.current.clearHistory();
+    });
+
+    expect(result.current.state).toBe('step 2');
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.canRedo).toBe(false);
+    expect(result.current.getHistoryStats()).toEqual({ currentIndex: 0, totalEntries: 1 });
+  });
+
+  it('does nothing when undoing at beginning of history', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    act(() => {
+      result.current.undo();
+    });
+
+    expect(result.current.state).toBe('initial');
+  });
+
+  it('does nothing when redoing at end of history', () => {
+    const { result } = renderHook(() => useHistory({ initialState: 'initial' }));
+
+    act(() => {
+      result.current.setState('step 1');
+    });
+
+    act(() => {
+      result.current.redo();
+    });
+
+    expect(result.current.state).toBe('step 1');
+  });
+});

package/src/lib/theme/tokens/centralized-tokens.ts

@@ -0,0 +1,120 @@
+/**
+ * Centralized Design Token Library
+ * 
+ * This file serves as the single source of truth for all design tokens 
+ * in the Atomix Design System. It consolidates colors, typography, 
+ * spacing, shadows, and animations.
+ */
+
+import { DesignTokens } from './tokens';
+
+export const COLORS = {
+  primary: '#7c3aed',
+  secondary: '#64748b',
+  success: '#22c55e',
+  info: '#3b82f6',
+  warning: '#eab308',
+  error: '#ef4444',
+  light: '#f8fafc',
+  dark: '#0f172a',
+  gray: {
+    1: '#f8fafc',
+    2: '#f1f5f9',
+    3: '#e2e8f0',
+    4: '#cbd5e1',
+    5: '#94a3b8',
+    6: '#64748b',
+    7: '#475569',
+    8: '#334155',
+    9: '#1e293b',
+    10: '#0f172a',
+  },
+};
+
+export const TYPOGRAPHY = {
+  fontFamily: {
+    base: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    heading: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    mono: "'Fira Code', 'JetBrains Mono', monospace",
+  },
+  fontSize: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+  },
+  fontWeight: {
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+  lineHeight: {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+  },
+};
+
+export const SPACING = {
+  0: '0',
+  1: '0.25rem',
+  2: '0.5rem',
+  3: '0.75rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  8: '2rem',
+  10: '2.5rem',
+  12: '3rem',
+  16: '4rem',
+  20: '5rem',
+};
+
+export const SHADOWS = {
+  xs: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+};
+
+export const ANIMATIONS = {
+  duration: {
+    fast: '150ms',
+    normal: '300ms',
+    slow: '500ms',
+  },
+  easing: {
+    linear: 'linear',
+    in: 'cubic-bezier(0.4, 0, 1, 1)',
+    out: 'cubic-bezier(0, 0, 0.2, 1)',
+    inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  },
+};
+
+/**
+ * Helper to convert centralized tokens to the DesignTokens interface format
+ */
+export function getDesignTokens(): Partial<DesignTokens> {
+  // This would map the nested structure to the flat structure expected by the system
+  return {
+    primary: COLORS.primary,
+    secondary: COLORS.secondary,
+    success: COLORS.success,
+    info: COLORS.info,
+    warning: COLORS.warning,
+    error: COLORS.error,
+    'body-font-family': TYPOGRAPHY.fontFamily.base,
+    'body-font-size': TYPOGRAPHY.fontSize.base,
+    // ... more mappings
+  };
+}

package/src/lib/theme/utils/__tests__/domUtils.test.ts

@@ -0,0 +1,101 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  isBrowser,
+  isServer,
+  getThemeLinkId,
+  removeThemeCSS,
+} from '../domUtils';
+import { THEME_LINK_ID_PREFIX } from '../../constants/constants';
+
+describe('DOM Utils', () => {
+  describe('isBrowser', () => {
+    it('should return true in a browser environment', () => {
+      // With happy-dom environment, window and document are defined
+      expect(isBrowser()).toBe(true);
+    });
+  });
+
+  describe('isServer', () => {
+    it('should return false in a browser environment', () => {
+      expect(isServer()).toBe(false);
+    });
+  });
+
+  describe('getThemeLinkId', () => {
+    it('should correctly format theme link ID', () => {
+      const themeName = 'dark-theme';
+      expect(getThemeLinkId(themeName)).toBe(`${THEME_LINK_ID_PREFIX}${themeName}`);
+    });
+  });
+
+  describe('removeThemeCSS', () => {
+    beforeEach(() => {
+      // Clear document body before each test
+      document.body.innerHTML = '';
+      document.head.innerHTML = '';
+      vi.restoreAllMocks();
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it('should do nothing if on server', () => {
+      // Mock window to be undefined to simulate server
+      const originalWindow = global.window;
+      // @ts-ignore
+      delete (global as any).window;
+
+      const getElementByIdSpy = vi.spyOn(document, 'getElementById');
+      removeThemeCSS('test-theme');
+
+      expect(getElementByIdSpy).not.toHaveBeenCalled();
+
+      // Restore window
+      global.window = originalWindow;
+    });
+
+    it('should remove element found by direct ID', () => {
+      const linkId = 'my-custom-theme-link';
+      const link = document.createElement('link');
+      link.id = linkId;
+      document.head.appendChild(link);
+
+      const removeSpy = vi.spyOn(link, 'remove');
+
+      removeThemeCSS(linkId);
+
+      expect(removeSpy).toHaveBeenCalled();
+      expect(document.getElementById(linkId)).toBeNull();
+    });
+
+    it('should remove element found by generated theme link ID', () => {
+      const themeName = 'dark';
+      const expectedLinkId = getThemeLinkId(themeName);
+
+      const link = document.createElement('link');
+      link.id = expectedLinkId;
+      document.head.appendChild(link);
+
+      const removeSpy = vi.spyOn(link, 'remove');
+
+      // Pass the theme name, not the link ID directly
+      removeThemeCSS(themeName);
+
+      expect(removeSpy).toHaveBeenCalled();
+      expect(document.getElementById(expectedLinkId)).toBeNull();
+    });
+
+    it('should do nothing if element is not found', () => {
+      // No element added to DOM
+      const getElementByIdSpy = vi.spyOn(document, 'getElementById');
+
+      removeThemeCSS('non-existent-theme');
+
+      expect(getElementByIdSpy).toHaveBeenCalledTimes(2); // Once for direct ID, once for generated ID
+    });
+  });
+});

package/src/lib/types/components.ts

@@ -245,6 +245,17 @@ export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
     | 'waves'
     | 'noise';
 
+  /**
+   * Phase 1: Animation System props
+   */
+  withTimeAnimation?: boolean;
+  animationSpeed?: number;
+  withMultiLayerDistortion?: boolean;
+  distortionOctaves?: number;
+  distortionLacunarity?: number;
+  distortionGain?: number;
+  distortionQuality?: 'low' | 'medium' | 'high' | 'ultra';
+
   /**
    * Performance and accessibility options
    */
@@ -283,6 +294,32 @@ export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
    * </AtomixGlass>
    */
   debugOverLight?: boolean;
+
+  /**
+   * Phase 3: Responsive & Performance Optimization props
+   */
+  
+  /**
+   * Device preset for responsive optimization
+   * 
+   * Pre-configured presets that adjust glass parameters based on device capabilities
+   * - 'performance': Optimized for low-end devices (reduced octaves, lower quality)
+   * - 'balanced': Balanced quality and performance (default)
+   * - 'quality': Maximum visual quality (high octaves, ultra quality)
+   * 
+   * @default 'balanced'
+   */
+  devicePreset?: 'performance' | 'balanced' | 'quality';
+  
+  /**
+   * Disable responsive breakpoint system
+   * 
+   * When true, disables automatic parameter adjustment based on viewport size
+   * Use this when you want full manual control over all parameters
+   * 
+   * @default false
+   */
+  disableResponsiveBreakpoints?: boolean;
 }
 
 /**
@@ -812,17 +849,6 @@ export interface AccordionProps extends BaseComponentProps {
    */
   onOpenChange?: (open: boolean) => void;
 
-  /**
-   * @deprecated Use onOpenChange instead
-   * Optional open handler
-   */
-  onOpen?: () => void;
-
-  /**
-   * @deprecated Use onOpenChange instead
-   * Optional close handler
-   */
-  onClose?: () => void;
   /**
    * Glass morphism effect for the accordion
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect

package/src/lib/types/glass.ts

@@ -0,0 +1,35 @@
+/**
+ * Glass effect parameters for responsive breakpoints
+ */
+export interface GlassParams {
+  distortionOctaves?: number;
+  displacementScale?: number;
+  blurAmount?: number;
+  saturation?: number;
+  aberrationIntensity?: number;
+  animationSpeed?: number;
+  chromaticIntensity?: number;
+  distortionLacunarity?: number;
+  distortionGain?: number;
+}
+
+/**
+ * Responsive breakpoint configuration
+ */
+export interface ResponsiveBreakpoint {
+  maxWidth?: number;
+  minWidth?: number;
+  params: GlassParams;
+}
+
+/**
+ * Design system theme tokens for glass component
+ */
+export interface GlassThemeTokens {
+  glassOpacity?: string;
+  glassBlur?: string;
+  glassBorderRadius?: string;
+  glassBorderColor?: string;
+  glassShadow?: string;
+  glassSaturation?: string;
+}

package/src/lib/types/index.ts

@@ -1,2 +1,3 @@
 // Export all component types
 export * from './components.js';
+export * from './glass.js';

package/src/lib/utils/displacement-generator.ts

@@ -10,7 +10,7 @@ export interface ShaderOptions {
 }
 
 function smoothStep(a: number, b: number, t: number): number {
-  t = Math.max(0, Math.min(1, (t - a) / (b - a)));
+  t = Math.max(0, Math.min(1, (t - a) / (b - a));
   return t * t * (3 - 2 * t);
 }
 

package/src/styles/01-settings/_settings.testtypecheck.scss

@@ -0,0 +1,53 @@
+// TestTypeCheck Component Settings
+// Generated by Atomix CLI
+// =============================================================================
+
+@use 'sass:color';
+@use '../../lib/functions' as *;
+@use '../../lib/mixins' as *;
+
+// Component-specific CSS Custom Properties
+// These override or extend global design tokens
+
+:root {
+  // Brand Colors
+  --testtypecheck-primary: var(--atomix-color-primary);
+  --testtypecheck-primary-hover: color.adjust(var(--atomix-color-primary), $lightness: -10%);
+  --testtypecheck-primary-active: color.adjust(var(--atomix-color-primary), $lightness: -20%);
+  
+  // Spacing
+  --testtypecheck-padding-x: var(--atomix-spacing-4);
+  --testtypecheck-padding-y: calc(var(--atomix-spacing-4) * 0.5);
+  --testtypecheck-gap: var(--atomix-spacing-4);
+  
+  // Border Radius
+  --testtypecheck-radius: var(--atomix-radius-md);
+  
+  // Typography
+  --testtypecheck-font-size: var(--atomix-font-size-base);
+  --testtypecheck-font-weight: var(--atomix-font-weight-medium);
+  --testtypecheck-line-height: var(--atomix-line-height-tight);
+  
+  // States
+  --testtypecheck-disabled-opacity: 0.5;
+  --testtypecheck-focus-ring: 0 0 0 2px var(--atomix-color-primary-200);
+}
+
+// Dark mode overrides
+.dark {
+  :root {
+    --testtypecheck-focus-ring: 0 0 0 2px var(--atomix-color-primary-800);
+  }
+}
+
+// Component configuration map
+$testtypecheck-config: (
+  'primary': var(--testtypecheck-primary),
+  'padding-x': var(--testtypecheck-padding-x),
+  'padding-y': var(--testtypecheck-padding-y),
+  'gap': var(--testtypecheck-gap),
+  'radius': var(--testtypecheck-radius),
+  'font-size': var(--testtypecheck-font-size),
+  'font-weight': var(--testtypecheck-font-weight),
+  'line-height': var(--testtypecheck-line-height),
+) !default;

package/src/styles/01-settings/_settings.typedbutton.scss

@@ -0,0 +1,53 @@
+// TypedButton Component Settings
+// Generated by Atomix CLI
+// =============================================================================
+
+@use 'sass:color';
+@use '../../lib/functions' as *;
+@use '../../lib/mixins' as *;
+
+// Component-specific CSS Custom Properties
+// These override or extend global design tokens
+
+:root {
+  // Brand Colors
+  --typedbutton-primary: var(--atomix-color-primary);
+  --typedbutton-primary-hover: color.adjust(var(--atomix-color-primary), $lightness: -10%);
+  --typedbutton-primary-active: color.adjust(var(--atomix-color-primary), $lightness: -20%);
+  
+  // Spacing
+  --typedbutton-padding-x: var(--atomix-spacing-4);
+  --typedbutton-padding-y: calc(var(--atomix-spacing-4) * 0.5);
+  --typedbutton-gap: var(--atomix-spacing-4);
+  
+  // Border Radius
+  --typedbutton-radius: var(--atomix-radius-md);
+  
+  // Typography
+  --typedbutton-font-size: var(--atomix-font-size-base);
+  --typedbutton-font-weight: var(--atomix-font-weight-medium);
+  --typedbutton-line-height: var(--atomix-line-height-tight);
+  
+  // States
+  --typedbutton-disabled-opacity: 0.5;
+  --typedbutton-focus-ring: 0 0 0 2px var(--atomix-color-primary-200);
+}
+
+// Dark mode overrides
+.dark {
+  :root {
+    --typedbutton-focus-ring: 0 0 0 2px var(--atomix-color-primary-800);
+  }
+}
+
+// Component configuration map
+$typedbutton-config: (
+  'primary': var(--typedbutton-primary),
+  'padding-x': var(--typedbutton-padding-x),
+  'padding-y': var(--typedbutton-padding-y),
+  'gap': var(--typedbutton-gap),
+  'radius': var(--typedbutton-radius),
+  'font-size': var(--typedbutton-font-size),
+  'font-weight': var(--typedbutton-font-weight),
+  'line-height': var(--typedbutton-line-height),
+) !default;

package/src/styles/06-components/_components.atomix-glass.scss

@@ -7,13 +7,8 @@
   position: relative;
 
   // CSS custom property defaults
-  --atomix-glass-radius: var(--atomix-radius-md, 16px);
-  --atomix-glass-transform: none;
-  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
-    cubic-bezier(0.22, 1, 0.36, 1);
+  --atomix-glass-transition: all 0.15s ease;
   --atomix-glass-position: absolute;
-  --atomix-glass-container-width: 100%;
-  --atomix-glass-container-height: 100%;
   --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
 
   // =========================================================================
@@ -42,13 +37,15 @@
   --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
   --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
   --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
+  position: relative;
 
   // Base layer styles for all effect layers (hover, border, overlay)
   &__hover-1,
   &__hover-2,
   &__hover-3 {
-    position: absolute;
-    inset: 0;
+    position: var(--atomix-glass-position);
+    top: var(--atomix-glass-top);
+    left: var(--atomix-glass-left);
     pointer-events: none;
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
@@ -58,8 +55,6 @@
 
   &__base,
   &__overlay {
-    position: absolute;
-    inset: 0;
     pointer-events: none;
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
@@ -167,9 +162,9 @@
     background: var(--atomix-glass-border-gradient-1, none);
     box-shadow: var(
       --atomix-glass-border-shadow,
-      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+      0 0 0 0.5px rgba(255, 255, 255, 0.5) inset,
+      0 1px 3px rgba(255, 255, 255, 0.25) inset,
+      0 1px 4px rgba(0, 0, 0, 0.35)
     );
   }
 
@@ -179,25 +174,26 @@
     background: var(--atomix-glass-border-gradient-2, none);
     box-shadow: var(
       --atomix-glass-border-shadow,
-      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+      0 0 0 0.5px rgba(255, 255, 255, 0.5) inset,
+      0 1px 3px rgba(255, 255, 255, 0.25) inset,
+      0 1px 4px rgba(0, 0, 0, 0.35)
     );
   }
 
   // Container styles
   &__container {
-    width: var(--atomix-glass-container-width);
-    height: var(--atomix-glass-container-height);
-    position: relative;
+    position: var(--atomix-glass-position);
+    top: var(--atomix-glass-top);
+    left: var(--atomix-glass-left);
     border-radius: var(--atomix-glass-radius);
     transition: var(--atomix-glass-transition);
+    transform: var(--atomix-glass-transform);
     z-index: var(--_glass-z-container);
   }
 
   &__inner {
-    width: var(--atomix-glass-container-width);
-    height: var(--atomix-glass-container-height);
+    width: 100%;
+    height: 100%;
     position: relative;
     border-radius: var(--atomix-glass-radius);
     padding: var(--atomix-glass-container-padding);