@shohojdhara/atomix 0.5.1 → 0.5.2

package/src/lib/composables/useModal.ts

@@ -1,110 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-
-export interface UseModalProps {
-  /**
-   * Whether the modal is open
-   */
-  isOpen?: boolean;
-
-  /**
-   * Callback when modal state changes
-   */
-  onOpenChange?: (isOpen: boolean) => void;
-
-  /**
-   * Callback when modal opens
-   */
-  onOpen?: () => void;
-
-  /**
-   * Callback when modal closes
-   */
-  onClose?: () => void;
-}
-
-export interface UseModalReturn {
-  /**
-   * Current open state
-   */
-  isOpen: boolean;
-
-  /**
-   * Function to open the modal
-   */
-  open: () => void;
-
-  /**
-   * Function to close the modal
-   */
-  close: () => void;
-
-  /**
-   * Function to toggle the modal
-   */
-  toggle: () => void;
-}
-
-/**
- * Hook for managing modal state
- */
-export function useModal({
-  isOpen: isOpenProp,
-  onOpenChange,
-  onOpen,
-  onClose,
-}: UseModalProps = {}): UseModalReturn {
-  // For uncontrolled usage
-  const [isOpenState, setIsOpenState] = useState(false);
-
-  // Determine if we're in controlled or uncontrolled mode
-  const isControlled = isOpenProp !== undefined;
-  const isOpen = isControlled ? !!isOpenProp : isOpenState;
-
-  // Update internal state when prop changes (for controlled mode)
-  useEffect(() => {
-    if (isControlled) {
-      setIsOpenState(!!isOpenProp);
-    }
-  }, [isOpenProp, isControlled]);
-
-  const updateOpen = useCallback(
-    (nextIsOpen: boolean) => {
-      // For uncontrolled mode, update internal state
-      if (!isControlled) {
-        setIsOpenState(nextIsOpen);
-      }
-
-      // Call the change handler in either mode
-      if (onOpenChange) {
-        onOpenChange(nextIsOpen);
-      }
-
-      // Call the specific handler
-      if (nextIsOpen && onOpen) {
-        onOpen();
-      } else if (!nextIsOpen && onClose) {
-        onClose();
-      }
-    },
-    [isControlled, onOpenChange, onOpen, onClose]
-  );
-
-  const open = useCallback(() => {
-    updateOpen(true);
-  }, [updateOpen]);
-
-  const close = useCallback(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-
-  const toggle = useCallback(() => {
-    updateOpen(!isOpen);
-  }, [isOpen, updateOpen]);
-
-  return {
-    isOpen,
-    open,
-    close,
-    toggle,
-  };
-}

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -1,148 +0,0 @@
-/**
- * Performance Monitoring Hook
- *
- * Tracks component render times and re-render counts
- * for performance analysis and optimization
- */
-
-import { useEffect, useRef } from 'react';
-
-export interface PerformanceMetrics {
-  /**
-   * Component name
-   */
-  componentName: string;
-  /**
-   * Number of renders
-   */
-  renderCount: number;
-  /**
-   * Average render time in milliseconds
-   */
-  averageRenderTime: number;
-  /**
-   * Total render time in milliseconds
-   */
-  totalRenderTime: number;
-  /**
-   * Maximum render time in milliseconds
-   */
-  maxRenderTime: number;
-  /**
-   * Minimum render time in milliseconds
-   */
-  minRenderTime: number;
-}
-
-/**
- * Options for performance monitoring
- */
-export interface UsePerformanceMonitorOptions {
-  /**
-   * Component name to track
-   */
-  componentName: string;
-  /**
-   * Whether to log metrics to console (development only)
-   */
-  logToConsole?: boolean;
-  /**
-   * Threshold in milliseconds to warn about slow renders
-   */
-  warnThreshold?: number;
-  /**
-   * Callback to report metrics (e.g., to analytics)
-   */
-  onMetrics?: (metrics: PerformanceMetrics) => void;
-}
-
-/**
- * Hook to monitor component performance
- *
- * @param options - Performance monitoring options
- * @returns Performance metrics
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   usePerformanceMonitor({
- *     componentName: 'MyComponent',
- *     warnThreshold: 16, // Warn if render takes > 16ms (1 frame)
- *   });
- *
- *   return <div>Content</div>;
- * }
- * ```
- */
-export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
-  const {
-    componentName,
-    logToConsole = typeof process === 'undefined' || process.env?.NODE_ENV === 'development',
-    warnThreshold = 16,
-    onMetrics,
-  } = options;
-
-  const metricsRef = useRef<PerformanceMetrics>({
-    componentName,
-    renderCount: 0,
-    averageRenderTime: 0,
-    totalRenderTime: 0,
-    maxRenderTime: 0,
-    minRenderTime: Infinity,
-  });
-
-  const renderStartRef = useRef<number>(0);
-
-  useEffect(() => {
-    // Start timing the render
-    renderStartRef.current = performance.now();
-  });
-
-  useEffect(() => {
-    // Calculate render time
-    const renderTime = performance.now() - renderStartRef.current;
-    const metrics = metricsRef.current;
-
-    // Update metrics
-    metrics.renderCount += 1;
-    metrics.totalRenderTime += renderTime;
-    metrics.averageRenderTime = metrics.totalRenderTime / metrics.renderCount;
-    metrics.maxRenderTime = Math.max(metrics.maxRenderTime, renderTime);
-    metrics.minRenderTime = Math.min(metrics.minRenderTime, renderTime);
-
-    // Warn if render is slow
-    if (renderTime > warnThreshold && logToConsole) {
-      console.warn(
-        `[Performance] ${componentName} render took ${renderTime.toFixed(2)}ms ` +
-          `(threshold: ${warnThreshold}ms)`
-      );
-    }
-
-    // Log metrics in development
-    if (logToConsole && metrics.renderCount % 10 === 0) {
-      console.log(`[Performance] ${componentName} metrics:`, {
-        renderCount: metrics.renderCount,
-        averageRenderTime: metrics.averageRenderTime.toFixed(2) + 'ms',
-        maxRenderTime: metrics.maxRenderTime.toFixed(2) + 'ms',
-        minRenderTime: metrics.minRenderTime.toFixed(2) + 'ms',
-      });
-    }
-
-    // Report metrics via callback
-    if (onMetrics) {
-      onMetrics({ ...metrics });
-    }
-  });
-
-  return metricsRef.current;
-}
-
-/**
- * Get all performance metrics for all monitored components
- * (useful for debugging and analytics)
- */
-export function getPerformanceMetrics(): PerformanceMetrics[] {
-  // This would need to be implemented with a global store
-  // For now, this is a placeholder
-  return [];
-}

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

@@ -1,92 +0,0 @@
-export interface Vec2 {
-  x: number;
-  y: number;
-}
-
-export interface ShaderOptions {
-  width: number;
-  height: number;
-  fragment: (uv: Vec2) => Vec2;
-}
-
-function smoothStep(a: number, b: number, t: number): number {
-  t = Math.max(0, Math.min(1, (t - a) / (b - a)));
-  return t * t * (3 - 2 * t);
-}
-
-function length(x: number, y: number): number {
-  return Math.sqrt(x * x + y * y);
-}
-
-function roundedRectSDF(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radius: number
-): number {
-  const qx = Math.abs(x) - width + radius;
-  const qy = Math.abs(y) - height + radius;
-  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
-}
-
-export const fragmentShaders = {
-  liquidGlass: (uv: Vec2): Vec2 => {
-    const ix = uv.x - 0.5;
-    const iy = uv.y - 0.5;
-    const distanceToEdge = roundedRectSDF(ix, iy, 0.3, 0.2, 0.6);
-    const displacement = smoothStep(0.8, 0, distanceToEdge - 0.15);
-    const scaled = smoothStep(0, 1, displacement);
-    return { x: ix * scaled + 0.5, y: iy * scaled + 0.5 };
-  },
-};
-
-export class ShaderDisplacementGenerator {
-  private canvas: HTMLCanvasElement;
-  private context: CanvasRenderingContext2D;
-
-  constructor(private options: ShaderOptions) {
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = options.width;
-    this.canvas.height = options.height;
-    this.canvas.style.display = 'none';
-
-    const context = this.canvas.getContext('2d');
-    if (!context) {
-      throw new Error('Could not get 2D context');
-    }
-    this.context = context;
-  }
-
-  updateShader(): string {
-    const { width, height } = this.options;
-    const imageData = this.context.createImageData(width, height);
-    const data = imageData.data;
-
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const uv: Vec2 = { x: x / width, y: y / height };
-        const pos = this.options.fragment(uv);
-
-        const dx = pos.x * width - x;
-        const dy = pos.y * height - y;
-
-        const r = dx / 10 + 0.5;
-        const g = dy / 10 + 0.5;
-
-        const pixelIndex = (y * width + x) * 4;
-        data[pixelIndex] = Math.max(0, Math.min(255, r * 255));
-        data[pixelIndex + 1] = Math.max(0, Math.min(255, g * 255));
-        data[pixelIndex + 2] = Math.max(0, Math.min(255, g * 255));
-        data[pixelIndex + 3] = 255;
-      }
-    }
-
-    this.context.putImageData(imageData, 0, 0);
-    return this.canvas.toDataURL();
-  }
-
-  destroy(): void {
-    this.canvas.remove();
-  }
-}

package/src/lib/utils/memoryMonitor.ts

@@ -1,191 +0,0 @@
-/**
- * Memory Monitoring Utilities
- *
- * Detects memory leaks and tracks component lifecycle memory usage
- * Only available in development mode
- */
-
-/**
- * Memory snapshot for comparison
- */
-export interface MemorySnapshot {
-  /**
-   * Used JavaScript heap size in bytes
-   */
-  usedJSHeapSize: number;
-  /**
-   * Total JavaScript heap size in bytes
-   */
-  totalJSHeapSize: number;
-  /**
-   * JavaScript heap size limit in bytes
-   */
-  jsHeapSizeLimit: number;
-  /**
-   * Timestamp of the snapshot
-   */
-  timestamp: number;
-}
-
-/**
- * Check if memory monitoring is available
- */
-export function isMemoryMonitoringAvailable(): boolean {
-  return (
-    typeof performance !== 'undefined' &&
-    'memory' in performance &&
-    (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
-  );
-}
-
-/**
- * Get current memory usage snapshot
- *
- * @returns Memory snapshot or null if not available
- */
-export function getMemorySnapshot(): MemorySnapshot | null {
-  if (!isMemoryMonitoringAvailable()) {
-    return null;
-  }
-
-  const memory = (performance as any).memory;
-
-  return {
-    usedJSHeapSize: memory.usedJSHeapSize,
-    totalJSHeapSize: memory.totalJSHeapSize,
-    jsHeapSizeLimit: memory.jsHeapSizeLimit,
-    timestamp: performance.now(),
-  };
-}
-
-/**
- * Format bytes to human-readable string
- *
- * @param bytes - Number of bytes
- * @returns Formatted string (e.g., "1.5 MB")
- */
-export function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 Bytes';
-
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
-}
-
-/**
- * Compare two memory snapshots and detect potential leaks
- *
- * @param before - Snapshot before operation
- * @param after - Snapshot after operation
- * @param threshold - Threshold in bytes to consider a leak (default: 5MB)
- * @returns Object with leak detection results
- */
-export function detectMemoryLeak(
-  before: MemorySnapshot | null,
-  after: MemorySnapshot | null,
-  threshold: number = 5 * 1024 * 1024 // 5MB
-): {
-  hasLeak: boolean;
-  memoryIncrease: number;
-  formattedIncrease: string;
-  percentageIncrease: number;
-} {
-  if (!before || !after) {
-    return {
-      hasLeak: false,
-      memoryIncrease: 0,
-      formattedIncrease: '0 Bytes',
-      percentageIncrease: 0,
-    };
-  }
-
-  const memoryIncrease = after.usedJSHeapSize - before.usedJSHeapSize;
-  const percentageIncrease = (memoryIncrease / before.usedJSHeapSize) * 100;
-
-  return {
-    hasLeak: memoryIncrease > threshold,
-    memoryIncrease,
-    formattedIncrease: formatBytes(memoryIncrease),
-    percentageIncrease,
-  };
-}
-
-/**
- * Monitor memory usage over time
- *
- * @param interval - Interval in milliseconds to check memory
- * @param callback - Callback function called with each snapshot
- * @returns Function to stop monitoring
- */
-export function monitorMemoryUsage(
-  interval: number = 5000,
-  callback?: (snapshot: MemorySnapshot) => void
-): () => void {
-  if (!isMemoryMonitoringAvailable()) {
-    console.warn('[Memory Monitor] Memory monitoring is not available');
-    return () => {};
-  }
-
-  const checkMemory = () => {
-    const snapshot = getMemorySnapshot();
-    if (snapshot) {
-      if (callback) {
-        callback(snapshot);
-      } else if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
-        console.log('[Memory Monitor]', {
-          used: formatBytes(snapshot.usedJSHeapSize),
-          total: formatBytes(snapshot.totalJSHeapSize),
-          limit: formatBytes(snapshot.jsHeapSizeLimit),
-        });
-      }
-    }
-  };
-
-  const intervalId = setInterval(checkMemory, interval);
-
-  // Initial check
-  checkMemory();
-
-  // Return cleanup function
-  return () => {
-    clearInterval(intervalId);
-  };
-}
-
-/**
- * Track component lifecycle memory usage
- *
- * @param componentName - Name of the component
- * @returns Object with start and end tracking functions
- */
-export function trackComponentMemory(componentName: string) {
-  const before = getMemorySnapshot();
-
-  return {
-    /**
-     * Get memory snapshot at component mount
-     */
-    getBeforeSnapshot: () => before,
-    /**
-     * Get memory snapshot at component unmount and detect leaks
-     */
-    getAfterSnapshot: () => {
-      const after = getMemorySnapshot();
-      if (before && after) {
-        const leakInfo = detectMemoryLeak(before, after);
-        if (
-          leakInfo.hasLeak &&
-          (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
-        ) {
-          console.warn(
-            `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
-            leakInfo
-          );
-        }
-      }
-      return after;
-    },
-  };
-}

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

@@ -1,53 +0,0 @@
-// 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

@@ -1,53 +0,0 @@
-// 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;