@shohojdhara/atomix 0.3.7 → 0.3.9

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/styles/06-components/_components.data-table.scss

@@ -64,6 +64,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    position: relative;
+  }
+
+  &__header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
   }
 
   &__sort-icon {
@@ -76,6 +83,55 @@
     }
   }
 
+  &__column-filter {
+    width: 120px;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    border: 1px solid var(--#{config.$prefix}border-color);
+    border-radius: 4px;
+    background-color: var(--#{config.$prefix}white);
+    color: var(--#{config.$prefix}body-color);
+
+    &:focus {
+      outline: none;
+      border-color: var(--#{config.$prefix}primary);
+    }
+  }
+
+  &__resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 4px;
+    height: 100%;
+    cursor: col-resize;
+    background-color: transparent;
+    z-index: 1;
+
+    &:hover {
+      background-color: var(--#{config.$prefix}primary);
+      opacity: 0.5;
+    }
+
+    &:active {
+      background-color: var(--#{config.$prefix}primary);
+      opacity: 1;
+    }
+  }
+
+  &__header-cell {
+    position: relative;
+
+    &--dragging {
+      opacity: 0.5;
+      cursor: move;
+    }
+
+    &--drag-over {
+      border-left: 2px solid var(--#{config.$prefix}primary);
+    }
+  }
+
   // Body cells
   &__cell {
     padding: data-table.$data-table-cell-padding-y data-table.$data-table-cell-padding-x;
@@ -95,6 +151,21 @@
     &[role='button'] {
       cursor: pointer;
     }
+
+    &--selected {
+      @include dynamic-background(rgba(var(--#{config.$prefix}primary-rgb), 0.1));
+    }
+  }
+
+  // Selection cell
+  &__cell--selection {
+    width: 48px;
+    text-align: center;
+    padding: data-table.$data-table-cell-padding-y 0.5rem;
+  }
+
+  &__radio {
+    cursor: pointer;
   }
 
   // Loading state
@@ -143,6 +214,15 @@
   &--loading {
     opacity: 0.7;
   }
+
+  &--sticky-header {
+    thead {
+      position: sticky;
+      top: var(--sticky-header-offset, 0);
+      z-index: 10;
+      @include dynamic-background(var(--#{config.$prefix}data-table-header-bg));
+    }
+  }
 }
 
 // Toolbar
@@ -151,6 +231,21 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 }
 
 // Search

package/src/lib/hooks/useThemeTokens.ts

@@ -1,105 +0,0 @@
-import { useContext } from 'react';
-import { ThemeContext } from '../theme/runtime/ThemeContext';
-import { useTheme } from '../theme/runtime/useTheme';
-
-/**
- * Standardized hook for accessing theme tokens in components
- * 
- * Provides consistent access to theme values across all components
- * using either CSS custom properties or theme object values.
- */
-export function useThemeTokens() {
-  const { theme, activeTheme } = useTheme();
-
-  // Helper function to get CSS variable value
-  const getToken = useCallback((tokenName: string, fallback?: string) => {
-    if (typeof window === 'undefined') return fallback || '';
-
-    const cssVarName = `--atomix-${tokenName}`;
-    const computedStyle = getComputedStyle(document.documentElement);
-    return computedStyle.getPropertyValue(cssVarName).trim() || fallback || '';
-  }, []);
-
-  // Helper function to get theme object value
-  const getThemeValue = useCallback((path: string, fallback?: any) => {
-    if (!activeTheme) return fallback;
-
-    // Navigate through nested theme object using dot notation
-    return path.split('.').reduce((obj, key) => obj?.[key], activeTheme) || fallback;
-  }, [activeTheme]);
-
-  // Return unified API for accessing theme values
-  return {
-    theme,
-    activeTheme,
-    getToken,
-    getThemeValue,
-    // Commonly used tokens with fallbacks
-    colors: {
-      primary: getToken('primary', '#3b82f6'),
-      secondary: getToken('secondary', '#10b981'),
-      error: getToken('error', '#ef4444'),
-      success: getToken('success', '#22c55e'),
-      warning: getToken('warning', '#eab308'),
-      info: getToken('info', '#3b82f6'),
-      light: getToken('light', '#f9fafb'),
-      dark: getToken('dark', '#111827'),
-    },
-    spacing: {
-      1: getToken('spacing-1', '0.25rem'),
-      2: getToken('spacing-2', '0.5rem'),
-      3: getToken('spacing-3', '0.75rem'),
-      4: getToken('spacing-4', '1rem'),
-      5: getToken('spacing-5', '1.25rem'),
-      6: getToken('spacing-6', '1.5rem'),
-      8: getToken('spacing-8', '2rem'),
-      10: getToken('spacing-10', '2.5rem'),
-      12: getToken('spacing-12', '3rem'),
-      16: getToken('spacing-16', '4rem'),
-      20: getToken('spacing-20', '5rem'),
-    },
-    borderRadius: {
-      sm: getToken('border-radius-sm', '0.25rem'),
-      md: getToken('border-radius-md', '0.5rem'),
-      lg: getToken('border-radius-lg', '0.75rem'),
-      xl: getToken('border-radius-xl', '1rem'),
-      full: getToken('border-radius-full', '9999px'),
-    },
-    typography: {
-      fontFamily: {
-        sans: getToken('font-sans-serif', 'Inter, system-ui, sans-serif'),
-        serif: getToken('font-serif', 'Georgia, serif'),
-        mono: getToken('font-monospace', 'Fira Code, monospace'),
-      },
-      fontSize: {
-        xs: getToken('font-size-xs', '0.75rem'),
-        sm: getToken('font-size-sm', '0.875rem'),
-        md: getToken('font-size-md', '1rem'),
-        lg: getToken('font-size-lg', '1.125rem'),
-        xl: getToken('font-size-xl', '1.25rem'),
-        '2xl': getToken('font-size-2xl', '1.5rem'),
-        '3xl': getToken('font-size-3xl', '1.875rem'),
-        '4xl': getToken('font-size-4xl', '2.25rem'),
-      },
-      fontWeight: {
-        light: getToken('font-weight-light', '300'),
-        normal: getToken('font-weight-normal', '400'),
-        medium: getToken('font-weight-medium', '500'),
-        semibold: getToken('font-weight-semibold', '600'),
-        bold: getToken('font-weight-bold', '700'),
-      },
-    },
-    shadows: {
-      sm: getToken('box-shadow-sm', '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
-      md: getToken('box-shadow-md', '0 4px 6px -1px rgba(0, 0, 0, 0.1)'),
-      lg: getToken('box-shadow-lg', '0 10px 15px -3px rgba(0, 0, 0, 0.1)'),
-      xl: getToken('box-shadow-xl', '0 20px 25px -5px rgba(0, 0, 0, 0.1)'),
-      inset: getToken('box-shadow-inset', 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'),
-    },
-    transitions: {
-      fast: getToken('transition-fast', '150ms'),
-      base: getToken('transition-base', '200ms'),
-      slow: getToken('transition-slow', '300ms'),
-    },
-  };
-}