@shohojdhara/atomix 0.3.7 → 0.3.8

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

@@ -7,6 +7,7 @@
 
 import type { ThemeMetadata, ThemeValidationResult } from '../types';
 import { THEME_LINK_ID_PREFIX } from '../constants/constants';
+import { ThemeError, ThemeErrorCode } from '../errors/errors';
 
 /**
  * Check if code is running in a browser environment
@@ -29,6 +30,20 @@ export const getThemeLinkId = (themeName: string): string => {
     return `${THEME_LINK_ID_PREFIX}${themeName}`;
 };
 
+/**
+ * Sanitize path to prevent path injection attacks
+ * 
+ * @param path - Path to sanitize
+ * @returns Sanitized path
+ */
+const sanitizePath = (path: string): string => {
+    return path
+        .replace(/[<>"']/g, '') // Remove dangerous characters
+        .replace(/\.\./g, '') // Remove path traversal attempts
+        .replace(/\/+/g, '/') // Normalize multiple slashes
+        .replace(/^\/+|\/+$/g, ''); // Trim leading/trailing slashes
+};
+
 /**
  * Build the CSS file path for a theme
  * 
@@ -37,6 +52,7 @@ export const getThemeLinkId = (themeName: string): string => {
  * @param useMinified - Whether to use minified CSS
  * @param cdnPath - Optional CDN path
  * @returns Full path to the theme CSS file
+ * @throws Error if theme name is invalid
  */
 export const buildThemePath = (
     themeName: string,
@@ -46,21 +62,24 @@ export const buildThemePath = (
 ): string => {
     // Validate theme name to prevent path injection
     if (!isValidThemeName(themeName)) {
-        throw new Error(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens.`);
+        throw new ThemeError(
+            `Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens (e.g., "my-theme").`,
+            ThemeErrorCode.INVALID_THEME_NAME,
+            { themeName, pattern: /^[a-z0-9]+(-[a-z0-9]+)*$/ }
+        );
     }
 
     const extension = useMinified ? '.min.css' : '.css';
     const fileName = `${themeName}${extension}`;
 
     if (cdnPath) {
-        // Validate CDN path doesn't contain dangerous characters
-        const cleanCdnPath = cdnPath.replace(/[<>"']/g, '');
+        // Sanitize CDN path to prevent path injection
+        const cleanCdnPath = sanitizePath(cdnPath);
         return `${cleanCdnPath}/${fileName}`;
     }
 
-    // Ensure basePath doesn't end with slash and fileName doesn't start with slash
-    // Also sanitize basePath to prevent path injection
-    const cleanBasePath = basePath.replace(/\/$/, '').replace(/[<>"']/g, '');
+    // Sanitize basePath to prevent path injection
+    const cleanBasePath = sanitizePath(basePath);
     const cleanFileName = fileName.replace(/^\//, '');
 
     return `${cleanBasePath}/${cleanFileName}`;
@@ -110,7 +129,11 @@ export const loadThemeCSS = (
         link.onerror = () => {
             // Remove failed link element
             link.remove();
-            reject(new Error(`Failed to load theme CSS: ${fullPath}`));
+            reject(new ThemeError(
+                `Failed to load theme CSS from: ${fullPath}. Please check that the file exists and is accessible.`,
+                ThemeErrorCode.THEME_LOAD_FAILED,
+                { fullPath, linkId }
+            ));
         };
 
         // Append to head
@@ -166,8 +189,10 @@ export const applyThemeAttributes = (
         return;
     }
 
-    // Set data attribute on body
-    document.body.setAttribute(dataAttribute, themeName);
+    // Set data attribute on body (with null check)
+    if (document.body) {
+        document.body.setAttribute(dataAttribute, themeName);
+    }
 
     // Also set on documentElement for broader compatibility
     document.documentElement.setAttribute(dataAttribute, themeName);
@@ -185,7 +210,12 @@ export const removeThemeAttributes = (
         return;
     }
 
-    document.body.removeAttribute(dataAttribute);
+    // Remove from body (with null check)
+    if (document.body) {
+        document.body.removeAttribute(dataAttribute);
+    }
+
+    // Remove from documentElement
     document.documentElement.removeAttribute(dataAttribute);
 };
 
@@ -202,8 +232,10 @@ export const getCurrentThemeFromDOM = (
         return null;
     }
 
-    return document.body.getAttribute(dataAttribute) ||
-        document.documentElement.getAttribute(dataAttribute);
+    // Add null checks for SSR safety
+    const bodyTheme = document.body?.getAttribute(dataAttribute);
+    const htmlTheme = document.documentElement?.getAttribute(dataAttribute);
+    return bodyTheme || htmlTheme || null;
 };
 
 /**
@@ -377,15 +409,15 @@ export const createLocalStorageAdapter = () => {
  * 
  * @param func - Function to debounce
  * @param wait - Wait time in milliseconds
- * @returns Debounced function
+ * @returns Debounced function with cancel method
  */
 export const debounce = <T extends (...args: any[]) => any>(
     func: T,
     wait: number
-): ((...args: Parameters<T>) => void) => {
+): ((...args: Parameters<T>) => void) & { cancel: () => void } => {
     let timeout: ReturnType<typeof setTimeout> | null = null;
 
-    return function executedFunction(...args: Parameters<T>) {
+    const debounced = function executedFunction(...args: Parameters<T>) {
         const later = () => {
             timeout = null;
             func(...args);
@@ -396,4 +428,14 @@ export const debounce = <T extends (...args: any[]) => any>(
         }
         timeout = setTimeout(later, wait);
     };
+
+    // Add cancel method for cleanup
+    debounced.cancel = () => {
+        if (timeout !== null) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+
+    return debounced;
 };

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

@@ -34,7 +34,6 @@ export function injectCSS(
   id: string = 'atomix-theme'
 ): void {
   if (!isBrowser()) {
-    console.warn('injectCSS: Not in browser environment, CSS not injected');
     return;
   }
 

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

@@ -1,34 +1,10 @@
 /**
  * Theme Helper Functions
  * 
- * Utility functions for working with themes and DesignTokens
+ * Utility functions for working with DesignTokens
  */
 
-import type { Theme } from '../types';
 import type { DesignTokens } from '../tokens/tokens';
-import { createDesignTokensFromTheme } from '../adapters/themeAdapter';
-
-/**
- * Get DesignTokens from current theme
- * 
- * Converts a Theme object to DesignTokens. Useful when you need to
- * work with DesignTokens but have a Theme object.
- * 
- * @param theme - Theme object to convert
- * @returns DesignTokens object
- * 
- * @example
- * ```typescript
- * // If you have a Theme object, convert it to DesignTokens
- * const tokens = getDesignTokensFromTheme(theme);
- * // Now you can use tokens with unified theme system
- * const css = createTheme(tokens);
- * ```
- */
-export function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | null {
-  if (!theme) return null;
-  return createDesignTokensFromTheme(theme);
-}
 
 /**
  * Check if a value is DesignTokens
@@ -62,17 +38,3 @@ export function isDesignTokens(value: unknown): value is DesignTokens {
   return hasDesignTokenKeys;
 }
 
-/**
- * Check if a value is a Theme object
- * 
- * Type guard to check if an object is a Theme.
- * 
- * @param value - Value to check
- * @returns True if value is Theme
- */
-export function isThemeObject(value: unknown): value is Theme {
-  if (!value || typeof value !== 'object') return false;
-  const obj = value as Record<string, unknown>;
-  return '__isJSTheme' in obj || ('palette' in obj && 'typography' in obj);
-}
-

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 = unknown>(theme: Theme, path: string, fallback?: T): T {
-    const keys = path.split('.');
-    let value: unknown = theme;
-
-    for (const key of keys) {
-        if (value && typeof value === 'object' && key in value) {
-            value = (value as Record<string, unknown>)[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: unknown): theme is Theme {
-    return typeof theme === 'object' && theme !== null && '__isJSTheme' in theme && 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']): Theme['typography'][keyof Theme['typography']] {
-    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/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}`);
+  }
+}
+