@shohojdhara/atomix 0.3.4 → 0.3.6

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.stories.tsx

@@ -4,6 +4,9 @@ import { Accordion } from './Accordion';
 import { ACCORDION } from '../../lib/constants/components';
 import type { AtomixGlassProps } from '../../lib/types/components';
 
+// Helper type for glass props in stories (without children requirement)
+type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
+
 // Extract class names without the leading dots
 const ACCORDION_CLASS = ACCORDION.SELECTORS.ACCORDION.replace('.', '');
 const HEADER_CLASS = ACCORDION.SELECTORS.HEADER.replace('.', '');
@@ -24,15 +27,18 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     iconPosition: {
       control: { type: 'radio' },
       options: ['right', 'left'],
       description: 'Position of the icon',
+      defaultValue: 'right',
     },
     defaultOpen: {
       control: 'boolean',
       description: 'Whether the accordion is initially open',
+      defaultValue: false,
     },
     disabled: {
       control: 'boolean',
@@ -56,7 +62,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default Accordion (Closed)
+/**
+ * Default accordion in closed state.
+ */
 export const Default: Story = {
   args: {
     title: 'Accordion Title',
@@ -64,7 +72,9 @@ export const Default: Story = {
   },
 };
 
-// Open Accordion
+/**
+ * Accordion in open state by default.
+ */
 export const Open: Story = {
   args: {
     title: 'Open Accordion',
@@ -73,7 +83,9 @@ export const Open: Story = {
   },
 };
 
-// Disabled Accordion
+/**
+ * Disabled accordion - non-interactive state.
+ */
 export const Disabled: Story = {
   args: {
     title: 'Disabled Accordion',
@@ -82,7 +94,9 @@ export const Disabled: Story = {
   },
 };
 
-// Icon on Left
+/**
+ * Accordion with icon positioned on the left side.
+ */
 export const IconLeft: Story = {
   args: {
     title: 'Icon on Left',
@@ -91,7 +105,9 @@ export const IconLeft: Story = {
   },
 };
 
-// Custom Icon
+/**
+ * Accordion with custom icon instead of default chevron.
+ */
 export const CustomIcon: Story = {
   args: {
     title: 'Custom Icon',
@@ -118,7 +134,9 @@ export const CustomIcon: Story = {
   },
 };
 
-// Accordion Group
+/**
+ * Multiple accordions grouped together.
+ */
 export const AccordionGroup: Story = {
   args: {
     title: 'Accordion Group',
@@ -150,12 +168,21 @@ export const AccordionGroup: Story = {
   ),
 };
 
-// All Variants
+/**
+ * Showcase of all accordion variants and states.
+ */
 export const AllVariants: Story = {
   args: {
     title: 'All Variants',
     children: <p>See render function for all variants</p>,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive showcase of all accordion variants including default, open, disabled, icon positions, and custom icons.',
+      },
+    },
+  },
   render: () => (
     <div>
       <h2>All Accordion Variants</h2>
@@ -246,7 +273,9 @@ export const AllVariants: Story = {
   ),
 };
 
-// Controlled Accordion
+/**
+ * Controlled accordion using external state management.
+ */
 export const Controlled: Story = {
   args: {
     title: 'Controlled Accordion',
@@ -275,7 +304,9 @@ export const Controlled: Story = {
   },
 };
 
-// Glass Variant
+/**
+ * Accordion with glass morphism effect enabled.
+ */
 export const Glass: Story = {
   args: {
     title: 'Glass Accordion',
@@ -312,7 +343,9 @@ export const Glass: Story = {
   },
 };
 
-// Glass with Custom Settings
+/**
+ * Accordion with custom glass morphism settings.
+ */
 export const GlassCustom: Story = {
   args: {
     title: 'Custom Glass Accordion',
@@ -322,7 +355,7 @@ export const GlassCustom: Story = {
       blurAmount: 3,
       saturation: 60,
       mode: 'polar',
-    } as AtomixGlassProps as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -505,7 +538,7 @@ export const GlassModePolar: Story = {
       blurAmount: 1.5,
       saturation: 180,
       aberrationIntensity: 3,
-    } as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -550,7 +583,7 @@ export const GlassModeProminent: Story = {
       blurAmount: 2.5,
       saturation: 200,
       aberrationIntensity: 4,
-    } as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -595,7 +628,7 @@ export const GlassModeShader: Story = {
       displacementScale: 70,
       blurAmount: 1.8,
       saturation: 170,
-    } as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -700,7 +733,7 @@ export const AllGlassModesComparison: Story = {
                   blurAmount: 1.5,
                   saturation: 180,
                   aberrationIntensity: 3,
-                } as any
+                } as GlassProps
               }
             >
               <p>Radial distortion effects emanating from the center point.</p>
@@ -728,7 +761,7 @@ export const AllGlassModesComparison: Story = {
                   blurAmount: 2.5,
                   saturation: 200,
                   aberrationIntensity: 4,
-                } as any
+                } as GlassProps
               }
             >
               <p>Enhanced distortion with maximum depth and visual impact.</p>
@@ -756,7 +789,7 @@ export const AllGlassModesComparison: Story = {
                   displacementScale: 70,
                   blurAmount: 1.8,
                   saturation: 170,
-                } as any
+                } as GlassProps
               }
             >
               <p>GPU-accelerated liquid glass with smooth animations.</p>

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';