@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/lib/utils/fontPreloader.ts

@@ -0,0 +1,148 @@
+/**
+ * Font Preloading Utilities
+ * 
+ * Provides utilities for preloading fonts to improve performance
+ * and prevent Flash of Invisible Text (FOIT).
+ */
+
+export interface FontPreloadConfig {
+  /**
+   * Font family name
+   */
+  family: string;
+  /**
+   * Font file path (relative to public/assets/fonts or absolute URL)
+   */
+  path: string;
+  /**
+   * Font weight
+   */
+  weight?: string | number;
+  /**
+   * Font style
+   */
+  style?: 'normal' | 'italic';
+  /**
+   * Font format (woff2 is preferred)
+   */
+  format?: 'woff2' | 'woff';
+  /**
+   * Cross-origin setting
+   */
+  crossorigin?: 'anonymous' | 'use-credentials';
+}
+
+/**
+ * Creates a preload link element for a font
+ * 
+ * @param config - Font preload configuration
+ * @returns HTML link element for preloading
+ * 
+ * @example
+ * ```tsx
+ * const preloadLink = createFontPreloadLink({
+ *   family: 'Nunito Sans',
+ *   path: '/fonts/nunito-sans/nunito-sans-regular.woff2',
+ *   weight: 400
+ * });
+ * document.head.appendChild(preloadLink);
+ * ```
+ */
+export function createFontPreloadLink(config: FontPreloadConfig): HTMLLinkElement {
+  const {
+    path,
+    format = 'woff2',
+    crossorigin = 'anonymous',
+  } = config;
+
+  const link = document.createElement('link');
+  link.rel = 'preload';
+  link.as = 'font';
+  link.href = path;
+  link.type = `font/${format}`;
+  link.crossOrigin = crossorigin;
+
+  return link;
+}
+
+/**
+ * Preloads multiple fonts
+ * 
+ * @param fonts - Array of font configurations to preload
+ * @returns Array of created link elements
+ * 
+ * @example
+ * ```tsx
+ * const links = preloadFonts([
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-regular.woff2', weight: 400 },
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-bold.woff2', weight: 700 },
+ * ]);
+ * links.forEach(link => document.head.appendChild(link));
+ * ```
+ */
+export function preloadFonts(fonts: FontPreloadConfig[]): HTMLLinkElement[] {
+  return fonts.map(createFontPreloadLink);
+}
+
+/**
+ * Generates preload link HTML tags as strings
+ * Useful for server-side rendering or static HTML generation
+ * 
+ * @param fonts - Array of font configurations
+ * @returns Array of HTML string representations
+ * 
+ * @example
+ * ```tsx
+ * const htmlTags = generateFontPreloadTags([
+ *   { family: 'Nunito Sans', path: '/fonts/nunito-sans/nunito-sans-regular.woff2' },
+ * ]);
+ * // Returns: ['<link rel="preload" as="font" href="/fonts/..." type="font/woff2" crossorigin="anonymous">']
+ * ```
+ */
+export function generateFontPreloadTags(fonts: FontPreloadConfig[]): string[] {
+  return fonts.map((config) => {
+    const {
+      path,
+      format = 'woff2',
+      crossorigin = 'anonymous',
+    } = config;
+
+    return `<link rel="preload" as="font" href="${path}" type="font/${format}" crossorigin="${crossorigin}">`;
+  });
+}
+
+/**
+ * Default font configurations for Atomix Design System
+ * These can be used as a starting point for font preloading
+ */
+export const DEFAULT_ATOMIX_FONTS: FontPreloadConfig[] = [
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-regular.woff2',
+    weight: 400,
+    style: 'normal',
+    format: 'woff2',
+  },
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-bold.woff2',
+    weight: 700,
+    style: 'normal',
+    format: 'woff2',
+  },
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-italic.woff2',
+    weight: 400,
+    style: 'italic',
+    format: 'woff2',
+  },
+  {
+    family: 'Nunito Sans',
+    path: '/fonts/nunito-sans/nunito-sans-bold-italic.woff2',
+    weight: 700,
+    style: 'italic',
+    format: 'woff2',
+  },
+];
+

package/src/lib/utils/index.ts

@@ -19,3 +19,14 @@ export {
 export type {
   MergePropsOptions,
 } from './componentUtils';
+
+export {
+  createFontPreloadLink,
+  preloadFonts,
+  generateFontPreloadTags,
+  DEFAULT_ATOMIX_FONTS,
+} from './fontPreloader';
+
+export type {
+  FontPreloadConfig,
+} from './fontPreloader';

package/src/lib/utils/memoryMonitor.ts

@@ -0,0 +1,189 @@
+/**
+ * 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 &&
+    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 (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 && process.env.NODE_ENV === 'development') {
+          console.warn(
+            `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
+            leakInfo
+          );
+        }
+      }
+      return after;
+    },
+  };
+}
+

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

@@ -3,15 +3,12 @@ $assets-fonts-path: '../assets/fonts/' !default;
 @mixin font-face($name, $foldername, $filename, $weight: normal, $style: normal) {
   @font-face {
     font-family: $name;
-    src: url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.eot');
     src:
-      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.eot?#iefix')
-        format('embedded-opentype'),
       url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff2') format('woff2'),
-      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff') format('woff'),
-      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.ttf') format('truetype');
+      url('#{$assets-fonts-path}/#{$foldername}/#{$filename}.woff') format('woff');
     font-weight: $weight;
     font-style: $style;
+    font-display: swap;
     text-rendering: optimizeLegibility;
   }
 }

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

@@ -24,7 +24,7 @@ $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;
 
 // Mobile toggler
-$navbar-toggler-size: 30px !default;
+$navbar-toggler-size: 2rem !default; 
 $navbar-toggler-color: var(--#{$prefix}body-color) !default;
 $navbar-toggler-bg: transparent !default;
 $navbar-toggler-border: 0 !default;

package/src/styles/03-generic/_generated-root.css

@@ -0,0 +1,26 @@
+/* AUTO-GENERATED - DO NOT EDIT MANUALLY */
+/* Generated on: 2025-12-23T09:44:24.463Z */
+/* This file is generated from atomix.config.ts */
+/* Edit atomix.config.ts and run 'npm run sync:config' to regenerate */
+
+:root {
+  --atomix-primary: #3b82f6;
+  --atomix-primary-1: #d8e6fd;
+  --atomix-primary-10: #183462;
+  --atomix-primary-2: #b8d2fc;
+  --atomix-primary-3: #99befa;
+  --atomix-primary-4: #7aaaf9;
+  --atomix-primary-5: #5a96f7;
+  --atomix-primary-6: #3b82f6;
+  --atomix-primary-7: #326fd1;
+  --atomix-primary-8: #295bac;
+  --atomix-primary-9: #204887;
+  --atomix-primary-bg-subtle: rgba(59, 130, 246, 0.1);
+  --atomix-primary-border-subtle: rgba(59, 130, 246, 0.2);
+  --atomix-primary-dark: #204887;
+  --atomix-primary-hover: #326fd1;
+  --atomix-primary-light: #99befa;
+  --atomix-primary-main: #3b82f6;
+  --atomix-primary-rgb: 59, 130, 246;
+  --atomix-primary-text-emphasis: #5895f7;
+}

package/src/styles/06-components/_components.navbar.scss

@@ -72,6 +72,7 @@
   }
 
   &__toggler {
+    position: relative;
     display: none;
     align-items: center;
     justify-content: center;
@@ -99,17 +100,13 @@
 
     &-icon {
       position: relative;
-      display: inline-block;
-      width: 1.5em;
-      height: 1.5em;
-      vertical-align: middle;
 
       &::before,
       &::after,
       & {
         position: absolute;
         height: 2px;
-        width: 100%;
+        width: var(--#{$prefix}navbar-toggler-size);
         background-color: var(--#{$prefix}navbar-toggler-color);
         border-radius: 1px;
         transition: transform 0.15s ease;
@@ -228,6 +225,10 @@
       #{$root}__collapse {
         display: flex !important;
       }
+
+      #{$root}__toggler {
+        display: none !important;
+      }
     }
   }
 

package/src/themes/README.md

@@ -1,8 +1,7 @@
-# Atomix Design System Themes
 
 # Atomix Design System Themes
 
-This guide documents how to build SCSS-based themes for the Atomix Design System, using the existing `shaj-default` theme as the reference implementation. It covers the architecture, creation process, best practices, testing and validation, and maintenance guidelines. Real code excerpts are taken from `./src/themes/shaj-default` to ensure your new themes align with the established patterns.
+This guide documents how to build SCSS-based themes for the Atomix Design System
 
 ## Theme Architecture
 

package/src/themes/themes.config.js

@@ -1,186 +1,37 @@
 /**
  * Theme Configuration
  *
- * This file is auto-generated from theme.config.ts
- * DO NOT EDIT MANUALLY - Edit theme.config.ts instead
+ * This file is auto-generated from atomix.config.ts
+ * DO NOT EDIT MANUALLY - Edit atomix.config.ts instead
  * Run 'npm run sync:config' to regenerate
  * 
- * Generated on: 2025-12-18T01:03:26.168Z
+ * Generated on: 2025-12-23T09:44:24.454Z
  */
 
 export const themesConfig = {
+  // CSS variable prefix (from atomix.config.ts)
+  prefix: 'atomix',
+  
   // Theme metadata
-  metadata: {
-    shaj-default: {
-        name: "Shaj Default",
-        description: "The default theme for the Atomix Design System",
-        author: "Shohoj Dhara",
-        version: "1.0.0",
-        tags: [
-            "default",
-            "light"
-        ],
-        supportsDarkMode: true,
-        status: "stable",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#3b82f6"
-    },
-    boomdevs: {
-        name: "BoomDevs",
-        description: "BoomDevs theme for the Atomix Design System",
-        author: "BoomDevs Team",
-        version: "1.0.0",
-        tags: [
-            "dark",
-            "modern"
-        ],
-        supportsDarkMode: true,
-        status: "beta",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#8b5cf6"
-    },
-    esrar: {
-        name: "Esrar",
-        description: "Esrar theme for the Atomix Design System",
-        author: "Esrar Team",
-        version: "1.0.0",
-        tags: [
-            "light",
-            "minimal"
-        ],
-        supportsDarkMode: true,
-        status: "beta",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#10b981"
-    },
-    mashroom: {
-        name: "Mashroom",
-        description: "Mashroom theme for the Atomix Design System",
-        author: "Mashroom Team",
-        version: "1.0.0",
-        tags: [
-            "dark",
-            "contrast"
-        ],
-        supportsDarkMode: true,
-        status: "beta",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#f59e0b"
-    },
-    applemix: {
-        name: "Applemix",
-        description: "Apple Mac OS 2026 Liquid Glass inspired theme with morphism effects",
-        author: "Atomix Design System",
-        version: "1.0.0",
-        tags: [
-            "glass",
-            "apple",
-            "modern",
-            "liquid",
-            "morphism"
-        ],
-        supportsDarkMode: true,
-        status: "experimental",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "light",
-                "dark"
-            ]
-        },
-        color: "#f5f5f5",
-        features: [
-            "Liquid glass morphism effects",
-            "Apple-inspired color palette",
-            "Chromatic aberration effects",
-            "Smooth animations and transitions",
-            "AtomixGlass component integration",
-            "Comprehensive component overrides",
-            "Light and dark mode support"
-        ]
-    },
-    flashtrade: {
-        name: "Flash Trade",
-        description: "Professional dark crypto perpetuals trading platform theme inspired by flash.trade",
-        author: "Atomix Design System",
-        version: "1.1.0",
-        tags: [
-            "dark",
-            "crypto",
-            "trading",
-            "glass",
-            "modern",
-            "decentralized",
-            "defi"
-        ],
-        supportsDarkMode: true,
-        status: "stable",
-        a11y: {
-            contrastTarget: 4.5,
-            modes: [
-                "dark"
-            ]
-        },
-        color: "#06b6d4",
-        features: [
-            "Ultra-dark trading interface aesthetic matching flash.trade",
-            "Bright cyan (#06b6d4) primary color for brand consistency",
-            "High contrast for financial data readability",
-            "Trading-focused color palette (green for long/profit, red for short/loss)",
-            "Glass morphism effects for modern UI depth",
-            "Optimized Inter typography for trading information",
-            "Fast animations for real-time data updates",
-            "Professional navbar with asset selector bar",
-            "Trading cards with hover effects and glass morphism",
-            "Comprehensive button styles for trading actions",
-            "Price change badges with glow effects",
-            "Responsive mobile-first design",
-            "AtomixGlass component integration"
-        ]
-    }
-},
+  metadata: {},
 
   // Build configuration
   build: {
     output: {
-        directory: "themes",
-        formats: {
-            expanded: ".css",
-            compressed: ".min.css"
-        }
+      directory: 'dist/themes',
+      formats: {
+        expanded: '.css',
+        compressed: '.min.css'
+      }
     },
     sass: {
-        style: "expanded",
-        sourceMap: true,
-        loadPaths: [
-            "src"
-        ]
+      style: 'expanded',
+      sourceMap: true,
+      loadPaths: [
+        'src'
+      ]
     }
-},
+  },
 
   // Export configuration for package.json
   exports: {
@@ -191,28 +42,26 @@ export const themesConfig = {
   // Theme integration settings
   integration: {
     cssVariables: {
-        colorMode: "--storybook-color-mode"
+      colorMode: '--color-mode'
     },
     classNames: {
-        theme: "data-theme",
-        colorMode: "data-atomix-color-mode"
+      theme: 'data-theme',
+      colorMode: 'data-color-mode'
     }
-},
+  },
 
   // Runtime theme loading configuration
   runtime: {
-    basePath: "/themes",
+    basePath: '/themes',
     cdnPath: null,
-    preload: [
-        "shaj-default"
-    ],
-    lazy: true,
-    defaultTheme: "shaj-default",
-    storageKey: "atomix-theme",
-    dataAttribute: "data-theme",
+    preload: [],
+    lazy: false,
+    defaultTheme: null,
+    storageKey: 'atomix-theme',
+    dataAttribute: 'data-atomix-theme',
     enablePersistence: true,
-    useMinified: process.env.NODE_ENV === 'production'
-},
+    useMinified: false
+  },
 
   // Theme dependencies (if a theme requires another theme to be loaded)
   dependencies: {},