@shohojdhara/atomix 0.3.4 → 0.3.5

package/scripts/cli/utils.js

@@ -0,0 +1,347 @@
+/**
+ * CLI Utility Functions
+ * Provides common utilities for the Atomix CLI including security, validation, and helpers
+ */
+
+import { resolve, relative, isAbsolute, normalize } from 'path';
+import { existsSync } from 'fs';
+import { access } from 'fs/promises';
+
+/**
+ * Validates and sanitizes file paths to prevent directory traversal attacks
+ * @param {string} inputPath - The path to validate
+ * @param {string} basePath - The base directory (defaults to process.cwd())
+ * @returns {Object} { isValid: boolean, safePath: string, error?: string }
+ */
+export function validatePath(inputPath, basePath = process.cwd()) {
+  try {
+    // Normalize the paths to remove any '..' or '.' segments
+    const normalizedBase = normalize(resolve(basePath));
+    const normalizedInput = normalize(isAbsolute(inputPath) 
+      ? inputPath 
+      : resolve(basePath, inputPath));
+    
+    // Check if the resolved path is within the base directory
+    const relativePath = relative(normalizedBase, normalizedInput);
+    
+    // If the relative path starts with '..', it's outside the base directory
+    if (relativePath.startsWith('..')) {
+      return {
+        isValid: false,
+        safePath: null,
+        error: 'Path is outside the project directory'
+      };
+    }
+    
+    // Additional checks for sensitive paths
+    const sensitivePatterns = [
+      /^\.git/,
+      /node_modules/,
+      /^\.env/,
+      /\.pem$/,
+      /\.key$/,
+      /private/i,
+      /secret/i
+    ];
+    
+    for (const pattern of sensitivePatterns) {
+      if (pattern.test(relativePath)) {
+        return {
+          isValid: false,
+          safePath: null,
+          error: `Access to sensitive path is restricted: ${pattern}`
+        };
+      }
+    }
+    
+    return {
+      isValid: true,
+      safePath: normalizedInput,
+      error: null
+    };
+  } catch (error) {
+    return {
+      isValid: false,
+      safePath: null,
+      error: `Invalid path: ${error.message}`
+    };
+  }
+}
+
+/**
+ * Validates component names according to PascalCase convention
+ * @param {string} name - The component name to validate
+ * @returns {Object} { isValid: boolean, error?: string }
+ */
+export function validateComponentName(name) {
+  if (!name || typeof name !== 'string') {
+    return {
+      isValid: false,
+      error: 'Component name must be a non-empty string'
+    };
+  }
+  
+  // Check PascalCase: starts with uppercase, only contains letters and numbers
+  if (!/^[A-Z][a-zA-Z0-9]*$/.test(name)) {
+    return {
+      isValid: false,
+      error: 'Component name must be in PascalCase (e.g., Button, CardHeader)'
+    };
+  }
+  
+  // Check for reserved words
+  const reservedWords = [
+    'Component', 'React', 'Fragment', 'Suspense', 'StrictMode',
+    'Error', 'Loading', 'App', 'Root', 'Document', 'Html'
+  ];
+  
+  if (reservedWords.includes(name)) {
+    return {
+      isValid: false,
+      error: `"${name}" is a reserved word. Please choose a different name.`
+    };
+  }
+  
+  // Check minimum length
+  if (name.length < 2) {
+    return {
+      isValid: false,
+      error: 'Component name must be at least 2 characters long'
+    };
+  }
+  
+  return { isValid: true };
+}
+
+/**
+ * Validates theme names according to kebab-case convention
+ * @param {string} name - The theme name to validate
+ * @returns {Object} { isValid: boolean, error?: string }
+ */
+export function validateThemeName(name) {
+  if (!name || typeof name !== 'string') {
+    return {
+      isValid: false,
+      error: 'Theme name must be a non-empty string'
+    };
+  }
+  
+  // Check kebab-case: lowercase letters, numbers, and hyphens
+  if (!/^[a-z][a-z0-9-]*$/.test(name)) {
+    return {
+      isValid: false,
+      error: 'Theme name must be lowercase and use hyphens (e.g., dark-theme)'
+    };
+  }
+  
+  // Check for consecutive hyphens
+  if (/--/.test(name)) {
+    return {
+      isValid: false,
+      error: 'Theme name cannot contain consecutive hyphens'
+    };
+  }
+  
+  // Check for trailing hyphen
+  if (name.endsWith('-')) {
+    return {
+      isValid: false,
+      error: 'Theme name cannot end with a hyphen'
+    };
+  }
+  
+  return { isValid: true };
+}
+
+/**
+ * Sanitizes user input to prevent injection attacks
+ * @param {string} input - The user input to sanitize
+ * @returns {string} Sanitized input
+ */
+export function sanitizeInput(input) {
+  if (typeof input !== 'string') {
+    return String(input);
+  }
+  
+  // Remove any shell metacharacters that could be dangerous
+  return input
+    .replace(/[;&|`$<>\\]/g, '')
+    .replace(/\0/g, '') // Remove null bytes
+    .trim();
+}
+
+/**
+ * Checks if a file exists and is accessible
+ * @param {string} filePath - Path to check
+ * @returns {Promise<boolean>}
+ */
+export async function fileExists(filePath) {
+  try {
+    await access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Checks if running in CI environment
+ * @returns {boolean}
+ */
+export function isCI() {
+  return !!(
+    process.env.CI || 
+    process.env.CONTINUOUS_INTEGRATION ||
+    process.env.GITHUB_ACTIONS ||
+    process.env.GITLAB_CI ||
+    process.env.CIRCLECI ||
+    process.env.TRAVIS ||
+    process.env.JENKINS_URL
+  );
+}
+
+/**
+ * Checks if running in debug mode
+ * @returns {boolean}
+ */
+export function isDebug() {
+  return process.env.ATOMIX_DEBUG === 'true' || 
+         process.argv.includes('--debug') ||
+         process.argv.includes('-d');
+}
+
+/**
+ * Formats file size in human readable format
+ * @param {number} bytes - File size in bytes
+ * @returns {string} Formatted size
+ */
+export function formatFileSize(bytes) {
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  if (bytes === 0) return '0 B';
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+}
+
+/**
+ * Debounce function for watch mode
+ * @param {Function} func - Function to debounce
+ * @param {number} wait - Wait time in milliseconds
+ * @returns {Function} Debounced function
+ */
+export function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+/**
+ * Creates a safe file path for cross-platform compatibility
+ * @param {...string} segments - Path segments
+ * @returns {string} Safe file path
+ */
+export function safePath(...segments) {
+  // Filter out empty segments and join with proper separator
+  return segments
+    .filter(Boolean)
+    .join('/')
+    .replace(/\/+/g, '/') // Remove duplicate slashes
+    .replace(/\\/g, '/'); // Convert Windows backslashes
+}
+
+/**
+ * Validates SCSS/CSS color values
+ * @param {string} color - Color value to validate
+ * @returns {boolean}
+ */
+export function isValidColor(color) {
+  const patterns = [
+    /^#[0-9A-F]{3}$/i,        // #RGB
+    /^#[0-9A-F]{4}$/i,        // #RGBA
+    /^#[0-9A-F]{6}$/i,        // #RRGGBB
+    /^#[0-9A-F]{8}$/i,        // #RRGGBBAA
+    /^rgb\(/i,                 // rgb()
+    /^rgba\(/i,                // rgba()
+    /^hsl\(/i,                 // hsl()
+    /^hsla\(/i,                // hsla()
+    /^var\(--/                 // CSS custom property
+  ];
+  
+  return patterns.some(pattern => pattern.test(color));
+}
+
+/**
+ * Extracts and validates npm scripts from package.json
+ * @param {Object} packageJson - Parsed package.json content
+ * @param {Array<string>} requiredScripts - List of required script names
+ * @returns {Object} { valid: boolean, missing: Array<string> }
+ */
+export function validateNpmScripts(packageJson, requiredScripts = []) {
+  const scripts = packageJson.scripts || {};
+  const missing = requiredScripts.filter(script => !scripts[script]);
+  
+  return {
+    valid: missing.length === 0,
+    missing
+  };
+}
+
+/**
+ * Generates a unique ID for components/themes
+ * @param {string} prefix - Prefix for the ID
+ * @returns {string} Unique ID
+ */
+export function generateId(prefix = 'atomix') {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 7);
+  return `${prefix}-${timestamp}-${random}`;
+}
+
+/**
+ * Checks Node.js version compatibility
+ * @param {string} requiredVersion - Minimum required version (e.g., '18.0.0')
+ * @returns {Object} { compatible: boolean, current: string, required: string }
+ */
+export function checkNodeVersion(requiredVersion = '18.0.0') {
+  const currentVersion = process.version.substring(1); // Remove 'v' prefix
+  const current = currentVersion.split('.').map(Number);
+  const required = requiredVersion.split('.').map(Number);
+  
+  let compatible = true;
+  for (let i = 0; i < required.length; i++) {
+    if (current[i] < required[i]) {
+      compatible = false;
+      break;
+    } else if (current[i] > required[i]) {
+      break;
+    }
+  }
+  
+  return {
+    compatible,
+    current: currentVersion,
+    required: requiredVersion
+  };
+}
+
+export default {
+  validatePath,
+  validateComponentName,
+  validateThemeName,
+  sanitizeInput,
+  fileExists,
+  isCI,
+  isDebug,
+  formatFileSize,
+  debounce,
+  safePath,
+  isValidColor,
+  validateNpmScripts,
+  generateId,
+  checkNodeVersion
+};

package/src/components/Accordion/Accordion.tsx

@@ -1,61 +1,12 @@
-import React, { ReactNode, useId } from 'react';
+import React, { ReactNode, useId, memo } from 'react';
 import { ACCORDION } from '../../lib/constants/components';
 import { useAccordion } from '../../lib/composables/useAccordion';
-import { BaseComponentProps, IconPosition, AtomixGlassProps } from '../../lib/types/components';
+import type { AccordionProps as AccordionPropsType, AtomixGlassProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-/**
- * Accordion component for showing/hiding content panels
- */
-export interface AccordionProps extends BaseComponentProps {
-  /**
-   * Title of the accordion
-   */
-  title: string;
+export type AccordionProps = AccordionPropsType;
 
-  /**
-   * Content to be shown when accordion is expanded
-   */
-  children: ReactNode;
-
-  /**
-   * Whether the accordion is initially open
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * Position of the icon (right or left)
-   */
-  iconPosition?: IconPosition;
-
-  /**
-   * Custom icon for the accordion
-   */
-  icon?: ReactNode;
-
-  /**
-   * Controlled open state (overrides defaultOpen)
-   */
-  isOpen?: boolean;
-
-  /**
-   * Callback when open state changes (for controlled mode)
-   */
-  onOpenChange?: (open: boolean) => void;
-
-  /**
-   * Glass morphism effect for the accordion
-   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
-   */
-  glass?: AtomixGlassProps | boolean;
-
-  /**
-   * Custom style for the accordion
-   */
-  style?: React.CSSProperties;
-}
-
-export const Accordion: React.FC<AccordionProps> = ({
+export const Accordion: React.FC<AccordionProps> = memo(({
   title,
   children,
   defaultOpen = false,
@@ -159,7 +110,7 @@ export const Accordion: React.FC<AccordionProps> = ({
   }
 
   return accordionContent;
-};
+});
 
 // Set display name for debugging
 Accordion.displayName = 'Accordion';

package/src/components/Accordion/index.ts

@@ -1,3 +1,3 @@
 export { Accordion } from './Accordion';
 export { default } from './Accordion';
-export type { AccordionProps } from './Accordion';
+export type { AccordionProps } from '../../lib/types/components';

package/src/components/Avatar/Avatar.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, memo } from 'react';
 import { AvatarProps } from '../../lib/types/components';
 import { AVATAR } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
 
-export const Avatar: React.FC<AvatarProps> = ({
+export const Avatar: React.FC<AvatarProps> = memo(({
   src,
   alt = 'Avatar',
   initials,
@@ -62,7 +62,7 @@ export const Avatar: React.FC<AvatarProps> = ({
       )}
     </div>
   );
-};
+});
 
 Avatar.displayName = 'Avatar';
 

package/src/components/Badge/Badge.tsx

@@ -1,10 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useRef, memo } from 'react';
 import { useBadge } from '../../lib/composables/useBadge';
 import { BADGE } from '../../lib/constants/components';
 import { BadgeProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Badge: React.FC<BadgeProps> = ({
+export const Badge: React.FC<BadgeProps> = memo(({
   label,
   variant = 'primary',
   size = 'md',
@@ -53,7 +53,7 @@ export const Badge: React.FC<BadgeProps> = ({
   }
 
   return badgeElement;
-};
+});
 
 Badge.displayName = 'Badge';
 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, memo } from 'react';
 import { BREADCRUMB } from '../../lib/constants/components';
 
 export interface BreadcrumbItem {
@@ -69,7 +69,7 @@ export interface BreadcrumbProps {
    */
   style?: React.CSSProperties;
 }
-export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+export const Breadcrumb: React.FC<BreadcrumbProps> = memo(({
   items,
   divider,
   className = '',
@@ -129,7 +129,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
       </ol>
     </nav>
   );
-};
+});
 
 Breadcrumb.displayName = 'Breadcrumb';
 

package/src/components/Card/ElevationCard.tsx

@@ -24,7 +24,7 @@ export const ElevationCard: React.FC<ElevationCardProps> = ({
   return (
     <div
       className={`${className} ${cardProps.className}`}
-      ref={cardProps.ref}
+      ref={cardProps.ref as React.LegacyRef<HTMLDivElement>}
       style={style}
       tabIndex={cardProps.tabIndex}
       role={cardProps.role}

package/src/components/Chart/AnimatedChart.tsx

@@ -45,6 +45,22 @@ const AnimatedChart = memo(
         }>
       >([]);
 
+      // Animation time tracking - moved outside callback
+      useEffect(() => {
+        const animateFrame = (timestamp: number) => {
+          timeRef.current = timestamp;
+          animationRef.current = requestAnimationFrame(animateFrame);
+        };
+
+        animationRef.current = requestAnimationFrame(animateFrame);
+
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+          }
+        };
+      }, []);
+
       const renderContent = useCallback(
         ({
           scales,
@@ -57,21 +73,6 @@ const AnimatedChart = memo(
         }: ChartRenderContentParams) => {
           // Use toolbar state if available, fallback to config for backward compatibility
           const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? true;
-          // Animation time tracking
-          useEffect(() => {
-            const animateFrame = (timestamp: number) => {
-              timeRef.current = timestamp;
-              animationRef.current = requestAnimationFrame(animateFrame);
-            };
-
-            animationRef.current = requestAnimationFrame(animateFrame);
-
-            return () => {
-              if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-              }
-            };
-          }, []);
 
           if (!chartDatasets.length) return null;
 
@@ -117,7 +118,7 @@ const AnimatedChart = memo(
 
               case 'area':
               case 'line':
-              default:
+              default: {
                 // Create animated line/area
                 const points = dataset.data.map((point: any, pointIndex: number) => ({
                   x: padding + (pointIndex / (dataset.data.length - 1)) * chartWidth,
@@ -181,6 +182,7 @@ const AnimatedChart = memo(
                   });
                 }
                 break;
+              }
             }
           });
 
@@ -213,7 +215,7 @@ const AnimatedChart = memo(
       return (
         <BaseChart
           ref={ref}
-          type="animated"
+          type="line"
           datasets={datasets}
           config={config}
           renderContent={renderContent}

package/src/components/Chart/AreaChart.tsx

@@ -100,7 +100,11 @@ const AreaChart = memo(
             {showTooltips && hoveredPoint && (
               <ChartTooltip
                 dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] ?? {
+                    label: '',
+                    value: 0,
+                    color: '',
+                  }
                 }
                 datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
                 datasetColor={

package/src/components/Chart/BarChart.tsx

@@ -58,6 +58,7 @@ const BarChart = memo(
           <>
             {barDimensions.map((bar, index) => {
               const dataset = renderedDatasets[bar.datasetIndex];
+              if (!dataset) return null;
               const point = dataset.data?.[bar.pointIndex];
               const color = dataset.color || colors[bar.datasetIndex];
               const isHovered =

package/src/components/Chart/BubbleChart.tsx

@@ -8,7 +8,7 @@ export interface BubbleDataPoint {
   x: number;
   y: number;
   size: number;
-  value?: number;
+  value: number;
   color?: string;
   metadata?: Record<string, any>;
 }
@@ -109,7 +109,7 @@ const BubbleChart = memo(
         hoveredPoint,
         toolbarState,
         config: renderConfig,
-      }: ChartRenderContentParams) => {
+      }: any) => {
         if (!bubbleData.length) return null;
 
         // Use toolbar state if available, fallback to config for backward compatibility
@@ -197,9 +197,10 @@ const BubbleChart = memo(
             {bubbles}
             {showTooltips &&
               hoveredPoint &&
-              hoveredPoint.pointIndex < bubbleData.length && (
+              hoveredPoint.pointIndex < bubbleData.length &&
+              bubbleData[hoveredPoint.pointIndex] && (
                 <ChartTooltip
-                  dataPoint={bubbleData[hoveredPoint.pointIndex]}
+                  dataPoint={bubbleData[hoveredPoint.pointIndex]!}
                   datasetLabel="Bubbles"
                   datasetColor={
                     bubbleData[hoveredPoint.pointIndex]?.color ||
@@ -220,7 +221,7 @@ const BubbleChart = memo(
         <BaseChart
           ref={ref}
           type="bubble"
-          datasets={datasets}
+          datasets={datasets as any}
           config={config}
           renderContent={renderContent}
           onDataPointClick={onDataPointClick}

package/src/components/Chart/ChartToolbar.tsx

@@ -201,6 +201,7 @@ const ChartToolbar = memo(
             document.removeEventListener('mousedown', handleClickOutside);
           };
         }
+        return undefined;
       }, [showExportMenu, showSettingsMenu]);
 
       // Handle keyboard shortcuts

package/src/components/Chart/FunnelChart.tsx

@@ -281,7 +281,7 @@ const FunnelChart = memo(
             <g>{elements}</g>
             {showTooltips && hoveredPoint && funnelData[hoveredPoint.pointIndex] && (
               <ChartTooltip
-                dataPoint={funnelData[hoveredPoint.pointIndex]}
+                dataPoint={funnelData[hoveredPoint.pointIndex]!}
                 datasetLabel="Funnel Data"
                 datasetColor={funnelData[hoveredPoint.pointIndex]?.color || colors[hoveredPoint.pointIndex % colors.length]}
                 position={{