@shohojdhara/atomix 0.3.6 → 0.3.8

package/src/lib/theme/utils/themeUtils.ts

@@ -5,7 +5,7 @@
  * spacing helpers, and theme value accessors.
  */
 
-import type { Theme, SpacingFunction, SpacingOptions } from '../types';
+import type { SpacingFunction, SpacingOptions } from '../types';
 
 // ============================================================================
 // Color Manipulation Utilities
@@ -184,172 +184,3 @@ export function createSpacing(spacingInput: SpacingOptions = 4): SpacingFunction
     };
 }
 
-/**
- * Get spacing value from theme
- * 
- * @param theme - Theme object
- * @param values - Spacing multipliers
- * @returns Spacing string
- */
-export function spacing(theme: Theme, ...values: number[]): string {
-    return theme.spacing(...values);
-}
-
-// ============================================================================
-// Theme Value Accessors
-// ============================================================================
-
-/**
- * Safely get a nested value from theme using dot notation
- * 
- * @param theme - Theme object
- * @param path - Dot-notation path (e.g., 'palette.primary.main')
- * @param fallback - Fallback value if path not found
- * @returns Theme value or fallback
- */
-export function getThemeValue<T = any>(theme: Theme, path: string, fallback?: T): T {
-    const keys = path.split('.');
-    let value: any = theme;
-
-    for (const key of keys) {
-        if (value && typeof value === 'object' && key in value) {
-            value = value[key];
-        } else {
-            return fallback as T;
-        }
-    }
-
-    return value as T;
-}
-
-/**
- * Check if a theme is a JS theme (created with createTheme)
- */
-export function isJSTheme(theme: any): theme is Theme {
-    return theme && typeof theme === 'object' && theme.__isJSTheme === true;
-}
-
-// ============================================================================
-// Responsive Utilities
-// ============================================================================
-
-/**
- * Get media query for breakpoint up
- */
-export function breakpointUp(theme: Theme, key: keyof Theme['breakpoints']['values'] | number): string {
-    return theme.breakpoints.up(key);
-}
-
-/**
- * Get media query for breakpoint down
- */
-export function breakpointDown(theme: Theme, key: keyof Theme['breakpoints']['values'] | number): string {
-    return theme.breakpoints.down(key);
-}
-
-/**
- * Get media query for breakpoint between
- */
-export function breakpointBetween(
-    theme: Theme,
-    start: keyof Theme['breakpoints']['values'] | number,
-    end: keyof Theme['breakpoints']['values'] | number
-): string {
-    return theme.breakpoints.between(start, end);
-}
-
-// ============================================================================
-// Typography Utilities
-// ============================================================================
-
-/**
- * Get typography variant styles
- */
-export function getTypography(theme: Theme, variant: keyof Theme['typography']): any {
-    return theme.typography[variant] ?? {};
-}
-
-/**
- * Convert rem to px based on theme font size
- */
-export function remToPx(theme: Theme, rem: number): number {
-    return rem * theme.typography.fontSize;
-}
-
-/**
- * Convert px to rem based on theme font size
- */
-export function pxToRem(theme: Theme, px: number): string {
-    return `${px / theme.typography.fontSize}rem`;
-}
-
-// ============================================================================
-// Shadow Utilities
-// ============================================================================
-
-/**
- * Get shadow value from theme
- */
-export function getShadow(theme: Theme, level: keyof Theme['shadows']): string {
-    return theme.shadows[level] || 'none';
-}
-
-// ============================================================================
-// Transition Utilities
-// ============================================================================
-
-/**
- * Create a transition string
- */
-export function createTransition(
-    theme: Theme,
-    props: string | string[],
-    options?: {
-        duration?: keyof Theme['transitions']['duration'] | number;
-        easing?: keyof Theme['transitions']['easing'] | string;
-        delay?: number;
-    }
-): string {
-    const properties = Array.isArray(props) ? props : [props];
-    const duration =
-        typeof options?.duration === 'number'
-            ? options.duration
-            : theme.transitions.duration[options?.duration || 'standard'];
-    const easing =
-        typeof options?.easing === 'string' && !options.easing.includes('(')
-            ? theme.transitions.easing[options.easing as keyof Theme['transitions']['easing']]
-            : options?.easing || theme.transitions.easing.easeInOut;
-    const delay = options?.delay || 0;
-
-    return properties
-        .map((prop) => `${prop} ${duration}ms ${easing}${delay ? ` ${delay}ms` : ''}`)
-        .join(', ');
-}
-
-/**
- * Get transition duration
- */
-export function getTransitionDuration(
-    theme: Theme,
-    key: keyof Theme['transitions']['duration']
-): number {
-    return theme.transitions.duration[key] ?? 300;
-}
-
-/**
- * Get transition easing
- */
-export function getTransitionEasing(theme: Theme, key: keyof Theme['transitions']['easing']): string {
-    return theme.transitions.easing[key] ?? 'cubic-bezier(0.4, 0, 0.2, 1)';
-}
-
-// ============================================================================
-// Z-Index Utilities
-// ============================================================================
-
-/**
- * Get z-index value from theme
- */
-export function getZIndex(theme: Theme, key: keyof Theme['zIndex']): number {
-    return theme.zIndex[key] ?? 0;
-}

package/src/lib/types/components.ts

@@ -1644,6 +1644,46 @@ export interface DataTableColumn {
    * Width of the column (CSS value)
    */
   width?: string;
+
+  /**
+   * Minimum width for resizable columns (CSS value)
+   */
+  minWidth?: string;
+
+  /**
+   * Maximum width for resizable columns (CSS value)
+   */
+  maxWidth?: string;
+
+  /**
+   * Whether the column is resizable
+   */
+  resizable?: boolean;
+
+  /**
+   * Whether the column is visible by default
+   */
+  visible?: boolean;
+
+  /**
+   * Whether the column can be reordered
+   */
+  reorderable?: boolean;
+
+  /**
+   * Custom filter function for column-specific filtering
+   */
+  filterFunction?: (value: any, filterValue: string) => boolean;
+
+  /**
+   * Filter type for column-specific filtering
+   */
+  filterType?: 'text' | 'select' | 'date' | 'number' | 'custom';
+
+  /**
+   * Options for select-type filters
+   */
+  filterOptions?: Array<{ label: string; value: any }>;
 }
 
 /**
@@ -1661,6 +1701,16 @@ export interface SortConfig {
   direction: 'asc' | 'desc';
 }
 
+/**
+ * Row selection mode
+ */
+export type SelectionMode = 'single' | 'multiple' | 'none';
+
+/**
+ * Export format
+ */
+export type ExportFormat = 'csv' | 'excel' | 'json';
+
 /**
  * DataTable component properties
  */
@@ -1735,6 +1785,101 @@ export interface DataTableProps extends BaseComponentProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Row selection mode ('single', 'multiple', or 'none')
+   */
+  selectionMode?: SelectionMode;
+
+  /**
+   * Selected row IDs (for controlled selection)
+   */
+  selectedRowIds?: (string | number)[];
+
+  /**
+   * Callback when selection changes
+   */
+  onSelectionChange?: (selectedRows: any[], selectedIds: (string | number)[]) => void;
+
+  /**
+   * Key to use as unique identifier for rows (defaults to 'id')
+   */
+  rowKey?: string | ((row: any) => string | number);
+
+  /**
+   * Whether columns are resizable
+   */
+  resizable?: boolean;
+
+  /**
+   * Whether columns can be reordered
+   */
+  reorderable?: boolean;
+
+  /**
+   * Callback when column order changes
+   */
+  onColumnReorder?: (columnKeys: string[]) => void;
+
+  /**
+   * Whether to show column visibility toggle
+   */
+  showColumnVisibility?: boolean;
+
+  /**
+   * Callback when column visibility changes
+   */
+  onColumnVisibilityChange?: (visibleColumns: string[]) => void;
+
+  /**
+   * Whether to enable sticky headers
+   */
+  stickyHeader?: boolean;
+
+  /**
+   * Offset from top for sticky headers (CSS value)
+   */
+  stickyHeaderOffset?: string;
+
+  /**
+   * Whether to enable virtual scrolling for large datasets
+   */
+  virtualScrolling?: boolean;
+
+  /**
+   * Estimated row height for virtual scrolling (in pixels)
+   */
+  estimatedRowHeight?: number;
+
+  /**
+   * Number of rows to render outside visible area (overscan)
+   */
+  overscan?: number;
+
+  /**
+   * Whether to enable export functionality
+   */
+  exportable?: boolean;
+
+  /**
+   * Export formats available
+   */
+  exportFormats?: ExportFormat[];
+
+  /**
+   * Custom export filename
+   */
+  exportFilename?: string;
+
+  /**
+   * Callback for custom export logic
+   */
+  onExport?: (format: ExportFormat, data: any[]) => void;
+
+  /**
+   * Whether to show column-specific filters
+   */
+  columnFilters?: boolean;
 }
 
 /**

package/src/lib/utils/componentUtils.ts

@@ -114,7 +114,7 @@ export function hasCustomization(props: {
  * Create data attributes for debugging
  */
 export function createDebugAttrs(componentName: string, variant?: string): Record<string, string> {
-  if (process.env.NODE_ENV !== 'development') return {};
+  if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'development') return {};
   
   return {
     'data-component': componentName,

package/src/lib/utils/dataTableExport.ts

@@ -0,0 +1,143 @@
+import { DataTableColumn, ExportFormat } from '../types/components';
+
+/**
+ * Sanitize cell content to prevent CSV injection
+ */
+function sanitizeCSVCell(cell: any): string {
+  const sanitized = String(cell ?? '').replace(/[\r\n\t]/g, ' ').replace(/"/g, '""');
+  // Prevent formula injection by prefixing dangerous characters
+  const dangerous = /^[=+\-@]/;
+  return dangerous.test(sanitized) ? `'${sanitized}` : sanitized;
+}
+
+/**
+ * Export data as CSV
+ */
+export function exportToCSV(
+  data: any[],
+  columns: DataTableColumn[],
+  filename: string = 'data-table.csv'
+): void {
+  if (!data.length || !columns.length) return;
+
+  // Create headers
+  const headers = columns.map(col => col.title || col.key);
+
+  // Create rows
+  const rows = data.map(row => {
+    return columns.map(col => {
+      const value = row[col.key];
+      if (col.render) {
+        // For rendered cells, try to extract text content
+        // This is a simplified approach - in production you might want to handle React elements differently
+        return value ?? '';
+      }
+      return value ?? '';
+    });
+  });
+
+  // Convert to CSV string
+  const csvContent = [
+    headers.map(h => `"${sanitizeCSVCell(h)}"`).join(','),
+    ...rows.map(row => row.map(cell => `"${sanitizeCSVCell(cell)}"`).join(',')),
+  ].join('\n');
+
+  // Download
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.download = filename.endsWith('.csv') ? filename : `${filename}.csv`;
+  link.href = url;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Export data as JSON
+ */
+export function exportToJSON(
+  data: any[],
+  filename: string = 'data-table.json'
+): void {
+  if (!data.length) return;
+
+  const jsonContent = JSON.stringify(data, null, 2);
+  const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.download = filename.endsWith('.json') ? filename : `${filename}.json`;
+  link.href = url;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Export data as Excel (XLSX) - simplified version using CSV with .xlsx extension
+ * Note: For true Excel format, you would need a library like xlsx or exceljs
+ */
+export function exportToExcel(
+  data: any[],
+  columns: DataTableColumn[],
+  filename: string = 'data-table.xlsx'
+): void {
+  // For now, we'll export as CSV but with .xlsx extension
+  // In a production environment, you'd want to use a library like 'xlsx' or 'exceljs'
+  // to create a proper Excel file
+  if (!data.length || !columns.length) return;
+
+  // Create headers
+  const headers = columns.map(col => col.title || col.key);
+
+  // Create rows
+  const rows = data.map(row => {
+    return columns.map(col => {
+      const value = row[col.key];
+      return value ?? '';
+    });
+  });
+
+  // Convert to CSV format (Excel can open CSV files)
+  const csvContent = [
+    headers.map(h => `"${sanitizeCSVCell(h)}"`).join(','),
+    ...rows.map(row => row.map(cell => `"${sanitizeCSVCell(cell)}"`).join(',')),
+  ].join('\n');
+
+  // Download with .xlsx extension (though it's actually CSV)
+  // In production, use a proper Excel library
+  const blob = new Blob([csvContent], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.download = filename.endsWith('.xlsx') ? filename : `${filename}.xlsx`;
+  link.href = url;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Export data in the specified format
+ */
+export function exportData(
+  format: ExportFormat,
+  data: any[],
+  columns: DataTableColumn[],
+  filename?: string
+): void {
+  const defaultFilename = filename || 'data-table';
+
+  switch (format) {
+    case 'csv':
+      exportToCSV(data, columns, defaultFilename);
+      break;
+    case 'excel':
+      exportToExcel(data, columns, defaultFilename);
+      break;
+    case 'json':
+      exportToJSON(data, defaultFilename);
+      break;
+    default:
+      console.warn(`Unsupported export format: ${format}`);
+  }
+}
+

package/src/lib/utils/memoryMonitor.ts

@@ -34,7 +34,7 @@ export function isMemoryMonitoringAvailable(): boolean {
   return (
     typeof performance !== 'undefined' &&
     'memory' in performance &&
-    process.env.NODE_ENV === 'development'
+    (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')
   );
 }
 
@@ -133,7 +133,7 @@ export function monitorMemoryUsage(
     if (snapshot) {
       if (callback) {
         callback(snapshot);
-      } else if (process.env.NODE_ENV === 'development') {
+      } else if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
         console.log('[Memory Monitor]', {
           used: formatBytes(snapshot.usedJSHeapSize),
           total: formatBytes(snapshot.totalJSHeapSize),
@@ -175,7 +175,7 @@ export function trackComponentMemory(componentName: string) {
       const after = getMemorySnapshot();
       if (before && after) {
         const leakInfo = detectMemoryLeak(before, after);
-        if (leakInfo.hasLeak && process.env.NODE_ENV === 'development') {
+        if (leakInfo.hasLeak && (typeof process === 'undefined' || process.env?.NODE_ENV === 'development')) {
           console.warn(
             `[Memory Monitor] Potential memory leak detected in ${componentName}:`,
             leakInfo

package/src/lib/utils/themeNaming.ts

@@ -0,0 +1,135 @@
+/**
+ * Theme Naming Utility
+ * 
+ * Provides consistent naming conventions for CSS classes, CSS variables,
+ * and JavaScript properties throughout the theme system.
+ */
+
+export class ThemeNaming {
+  private static prefix = 'atomix';
+
+  /**
+   * Set the global prefix for all theme tokens
+   * @param newPrefix - New prefix to use
+   */
+  static setPrefix(newPrefix: string): void {
+    this.prefix = newPrefix;
+  }
+
+  /**
+   * Get the current prefix
+   */
+  static getPrefix(): string {
+    return this.prefix;
+  }
+
+  /**
+   * Convert camelCase to kebab-case for CSS variables
+   * @param str - String to convert
+   */
+  static camelToKebab(str: string): string {
+    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+  }
+
+  /**
+   * Convert kebab-case to camelCase for JavaScript properties
+   * @param str - String to convert
+   */
+  static kebabToCamel(str: string): string {
+    return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  }
+
+  /**
+   * Create a CSS variable name
+   * @param token - Token name in camelCase
+   */
+  static cssVar(token: string): string {
+    return `--${this.prefix}-${this.camelToKebab(token)}`;
+  }
+
+  /**
+   * Create a BEM CSS class name
+   * @param block - Block name
+   * @param element - Element name (optional)
+   * @param modifier - Modifier name (optional)
+   */
+  static bemClass(block: string, element?: string, modifier?: string): string {
+    let className = `c-${block}`;
+
+    if (element) {
+      className += `__${element}`;
+    }
+
+    if (modifier) {
+      className += `--${modifier}`;
+    }
+
+    return className;
+  }
+
+  /**
+   * Create a variant class name
+   * @param component - Component name
+   * @param variant - Variant name
+   */
+  static variantClass(component: string, variant: string): string {
+    return `c-${component}--${variant}`;
+  }
+
+  /**
+   * Create a size class name
+   * @param component - Component name
+   * @param size - Size name
+   */
+  static sizeClass(component: string, size: string): string {
+    return `c-${component}--${size}`;
+  }
+
+  /**
+   * Create a state class name
+   * @param component - Component name
+   * @param state - State name
+   */
+  static stateClass(component: string, state: string): string {
+    return `c-${component}--${state}`;
+  }
+
+  /**
+   * Create a utility class name
+   * @param utility - Utility name
+   */
+  static utilityClass(utility: string): string {
+    return `u-${utility}`;
+  }
+
+  /**
+   * Create a layout class name
+   * @param layout - Layout name
+   */
+  static layoutClass(layout: string): string {
+    return `l-${layout}`;
+  }
+
+  /**
+   * Create an object class name
+   * @param object - Object name
+   */
+  static objectClass(object: string): string {
+    return `o-${object}`;
+  }
+}
+
+// Export constants for common naming patterns
+export const THEME_NAMING = {
+  PREFIX: 'atomix',
+  CSS_VAR: ThemeNaming.cssVar,
+  BEM_CLASS: ThemeNaming.bemClass,
+  VARIANT_CLASS: ThemeNaming.variantClass,
+  SIZE_CLASS: ThemeNaming.sizeClass,
+  STATE_CLASS: ThemeNaming.stateClass,
+  UTILITY_CLASS: ThemeNaming.utilityClass,
+  LAYOUT_CLASS: ThemeNaming.layoutClass,
+  OBJECT_CLASS: ThemeNaming.objectClass,
+  CAMEL_TO_KEBAB: ThemeNaming.camelToKebab,
+  KEBAB_TO_CAMEL: ThemeNaming.kebabToCamel,
+};