@shohojdhara/atomix 0.3.12 → 0.3.14

package/scripts/cli/utils.js

@@ -7,6 +7,18 @@ import { resolve, relative, isAbsolute, normalize } from 'path';
 import { existsSync } from 'fs';
 import { access } from 'fs/promises';
 
+/**
+ * Enhanced Error Class for CLI
+ */
+export class AtomixCLIError extends Error {
+  constructor(message, code, suggestions = []) {
+    super(message);
+    this.name = 'AtomixCLIError';
+    this.code = code;
+    this.suggestions = suggestions;
+  }
+}
+
 /**
  * Validates and sanitizes file paths to prevent directory traversal attacks
  * @param {string} inputPath - The path to validate
@@ -17,13 +29,13 @@ 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 
+    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 {
@@ -32,7 +44,7 @@ export function validatePath(inputPath, basePath = process.cwd()) {
         error: 'Path is outside the project directory'
       };
     }
-    
+
     // Additional checks for sensitive paths
     const sensitivePatterns = [
       /^\.git/,
@@ -43,7 +55,7 @@ export function validatePath(inputPath, basePath = process.cwd()) {
       /private/i,
       /secret/i
     ];
-    
+
     for (const pattern of sensitivePatterns) {
       if (pattern.test(relativePath)) {
         return {
@@ -53,7 +65,7 @@ export function validatePath(inputPath, basePath = process.cwd()) {
         };
       }
     }
-    
+
     return {
       isValid: true,
       safePath: normalizedInput,
@@ -80,7 +92,7 @@ export function validateComponentName(name) {
       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 {
@@ -88,20 +100,20 @@ export function validateComponentName(name) {
       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 {
@@ -109,7 +121,7 @@ export function validateComponentName(name) {
       error: 'Component name must be at least 2 characters long'
     };
   }
-  
+
   return { isValid: true };
 }
 
@@ -125,7 +137,7 @@ export function validateThemeName(name) {
       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 {
@@ -133,7 +145,7 @@ export function validateThemeName(name) {
       error: 'Theme name must be lowercase and use hyphens (e.g., dark-theme)'
     };
   }
-  
+
   // Check for consecutive hyphens
   if (/--/.test(name)) {
     return {
@@ -141,7 +153,7 @@ export function validateThemeName(name) {
       error: 'Theme name cannot contain consecutive hyphens'
     };
   }
-  
+
   // Check for trailing hyphen
   if (name.endsWith('-')) {
     return {
@@ -149,7 +161,7 @@ export function validateThemeName(name) {
       error: 'Theme name cannot end with a hyphen'
     };
   }
-  
+
   return { isValid: true };
 }
 
@@ -162,7 +174,7 @@ export function sanitizeInput(input) {
   if (typeof input !== 'string') {
     return String(input);
   }
-  
+
   // Remove any shell metacharacters that could be dangerous
   return input
     .replace(/[;&|`$<>\\]/g, '')
@@ -190,7 +202,7 @@ export async function fileExists(filePath) {
  */
 export function isCI() {
   return !!(
-    process.env.CI || 
+    process.env.CI ||
     process.env.CONTINUOUS_INTEGRATION ||
     process.env.GITHUB_ACTIONS ||
     process.env.GITLAB_CI ||
@@ -205,9 +217,9 @@ export function isCI() {
  * @returns {boolean}
  */
 export function isDebug() {
-  return process.env.ATOMIX_DEBUG === 'true' || 
-         process.argv.includes('--debug') ||
-         process.argv.includes('-d');
+  return process.env.ATOMIX_DEBUG === 'true' ||
+    process.argv.includes('--debug') ||
+    process.argv.includes('-d');
 }
 
 /**
@@ -271,7 +283,7 @@ export function isValidColor(color) {
     /^hsla\(/i,                // hsla()
     /^var\(--/                 // CSS custom property
   ];
-  
+
   return patterns.some(pattern => pattern.test(color));
 }
 
@@ -284,7 +296,7 @@ export function isValidColor(color) {
 export function validateNpmScripts(packageJson, requiredScripts = []) {
   const scripts = packageJson.scripts || {};
   const missing = requiredScripts.filter(script => !scripts[script]);
-  
+
   return {
     valid: missing.length === 0,
     missing
@@ -311,7 +323,7 @@ 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]) {
@@ -321,7 +333,7 @@ export function checkNodeVersion(requiredVersion = '18.0.0') {
       break;
     }
   }
-  
+
   return {
     compatible,
     current: currentVersion,

package/src/components/Accordion/Accordion.stories.tsx

@@ -145,7 +145,7 @@ export const AccordionGroup: Story = {
   render: () => (
     <div>
       <h2>Accordion Group</h2>
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '500px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '500px' }}>
         <Accordion title="First Accordion" defaultOpen={true}>
           <p>Content of the first accordion.</p>
         </Accordion>
@@ -186,7 +186,7 @@ export const AllVariants: Story = {
   render: () => (
     <div>
       <h2>All Accordion Variants</h2>
-      <div className="u-d-flex u-flex-column u-gap-5">
+      <div className="u-flex u-flex-column u-gap-5">
         <div>
           <h3>Default</h3>
           <Accordion title="Default Accordion">
@@ -445,7 +445,7 @@ export const GlassGroup: Story = {
         Glass Accordion Group
       </h2>
       <div
-        className="u-d-flex u-flex-column u-gap-3"
+        className="u-flex u-flex-column u-gap-3"
         style={{ width: '100%', maxWidth: '600px', margin: '0 auto' }}
       >
         <Accordion title="First Glass Accordion" defaultOpen={true} glass>
@@ -835,7 +835,7 @@ export const GlassInteractiveShowcase: Story = {
             Interactive Glass Accordion Showcase
           </h2>
 
-          <div className="u-d-flex u-flex-column u-gap-3">
+          <div className="u-flex u-flex-column u-gap-3">
             <Accordion
               title="Features & Benefits"
               isOpen={openIndex === 0}
@@ -975,7 +975,7 @@ export const GlassRichContent: Story = {
           Glass Accordion with Rich Content
         </h2>
 
-        <div className="u-d-flex u-flex-column u-gap-3">
+        <div className="u-flex u-flex-column u-gap-3">
           <Accordion title="Design Philosophy" defaultOpen={true} glass={true}>
             <div>
               <p style={{ marginBottom: '1rem' }}>

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Accordion } from './Accordion';
+import React from 'react';
+
+describe('Accordion Component', () => {
+    it('renders correctly with title', () => {
+        render(<Accordion title="Test Accordion">Content</Accordion>);
+        expect(screen.getByText('Test Accordion')).toBeInTheDocument();
+        expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+
+    it('toggles when clicked', () => {
+        const onOpenChange = vi.fn();
+        render(<Accordion title="Test" onOpenChange={onOpenChange}>Content</Accordion>);
+        const button = screen.getByRole('button');
+
+        fireEvent.click(button);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+        expect(button).toHaveAttribute('aria-expanded', 'true');
+
+        fireEvent.click(button);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('calls legacy onOpen/onClose handlers', () => {
+        const onOpen = vi.fn();
+        const onClose = vi.fn();
+        render(<Accordion title="Test" onOpen={onOpen} onClose={onClose}>Content</Accordion>);
+        const button = screen.getByRole('button');
+
+        fireEvent.click(button);
+        expect(onOpen).toHaveBeenCalled();
+
+        fireEvent.click(button);
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('handles controlled state', () => {
+        const onOpenChange = vi.fn();
+        const { rerender } = render(<Accordion title="Test" isOpen={false} onOpenChange={onOpenChange}>Content</Accordion>);
+        const button = screen.getByRole('button');
+
+        fireEvent.click(button);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+        expect(button).toHaveAttribute('aria-expanded', 'false'); // Should not change internally
+
+        rerender(<Accordion title="Test" isOpen={true} onOpenChange={onOpenChange}>Content</Accordion>);
+        expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('supports glass effect', () => {
+        const { container } = render(<Accordion title="Test" glass>Content</Accordion>);
+        expect(container.querySelector('.c-accordion--glass')).toBeInTheDocument();
+    });
+});

package/src/components/Accordion/Accordion.tsx

@@ -12,6 +12,8 @@ export const Accordion: React.FC<AccordionProps> = memo(({
   defaultOpen = false,
   isOpen: controlledOpen,
   onOpenChange,
+  onOpen,
+  onClose,
   disabled = false,
   iconPosition = 'right',
   icon,
@@ -39,6 +41,8 @@ export const Accordion: React.FC<AccordionProps> = memo(({
     iconPosition,
     isOpen: controlledOpen,
     onOpenChange,
+    onOpen,
+    onClose,
   });
 
   // Default icon

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -14,6 +14,9 @@ import { ATOMIX_GLASS } from '../../lib/constants/components';
 
 const { CONSTANTS } = ATOMIX_GLASS;
 
+// Module-level counter for deterministic ID generation
+let idCounter = 0;
+
 // Module-level shared shader cache with LRU eviction
 const MAX_CACHE_SIZE = 15;
 interface ShaderCacheEntry {
@@ -131,16 +134,10 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     ref
   ) => {
     // Generate a stable, deterministic ID for SSR compatibility
-    // Use a counter-based approach to avoid hydration mismatches
-    const [filterId] = useState(() => {
-      // Use a simple counter for deterministic IDs
-      if (typeof window === 'undefined') {
-        // Server-side: use a predictable pattern
-        return `atomix-glass-filter-ssr-${Math.random().toString(36).substring(2, 11)}`;
-      }
-      // Client-side: use timestamp + random for uniqueness
-      return `atomix-glass-filter-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
-    });
+    // Use a module-level counter that's consistent across server and client
+    const filterId = useMemo(() => {
+      return `atomix-glass-filter-${++idCounter}`;
+    }, []);
 
     const [shaderMapUrl, setShaderMapUrl] = useState<string>('');
     const shaderGeneratorRef = useRef<any>(null);
@@ -207,27 +204,20 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               fragment: selectedShader,
             });
 
-            // Use requestIdleCallback if available for non-blocking generation
-            const generate = () => {
+            // Defer shader generation with longer delay to avoid blocking
+            setTimeout(() => {
               const url = shaderGeneratorRef.current?.updateShader() || '';
               setCachedShader(cacheKey, url);
               setShaderMapUrl(url);
-            };
-
-            if (typeof requestIdleCallback !== 'undefined') {
-              requestIdleCallback(generate, { timeout: 1000 });
-            } else {
-              // Fallback to setTimeout for browsers without requestIdleCallback
-              setTimeout(generate, 0);
-            }
+            }, 100);
           } catch (error) {
             console.warn('AtomixGlassContainer: Error generating shader map', error);
             setShaderMapUrl(''); // Fallback to empty string
           }
         };
 
-        // Debounce with 300ms delay
-        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 300);
+        // Debounce with 500ms delay to reduce frequency
+        shaderDebounceTimeoutRef.current = setTimeout(generateShader, 500);
       } else {
         // Not in shader mode, clear URL
         setShaderMapUrl('');
@@ -406,7 +396,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         };
       }
     }, [
-      filterId,
       liquidBlur,
       saturation,
       blurAmount,
@@ -484,10 +473,12 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       >
         <div
           className={ATOMIX_GLASS.INNER_CLASS}
-          style={{
-            padding: `var(--atomix-glass-container-padding)`,
-            boxShadow: `var(--atomix-glass-container-box-shadow)`,
-          }}
+          style={
+            {
+              padding: `var(--atomix-glass-container-padding)`,
+              boxShadow: `var(--atomix-glass-container-box-shadow)`,
+            } as CSSProperties
+          }
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           onMouseDown={onMouseDown}
@@ -513,31 +504,37 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             {/* Enhanced Apple Liquid Glass Inner Shadow Layer */}
             <div
               className={ATOMIX_GLASS.FILTER_OVERLAY_CLASS}
-              style={{
-                filter: `url(#${filterId})`,
-                backdropFilter: `var(--atomix-glass-container-backdrop)`,
-                borderRadius: `var(--atomix-glass-container-radius)`,
-              }}
+              style={
+                {
+                  filter: `url(#${filterId})`,
+                  backdropFilter: `var(--atomix-glass-container-backdrop)`,
+                  borderRadius: `var(--atomix-glass-container-radius)`,
+                } as CSSProperties
+              }
             />
             <div
               className={ATOMIX_GLASS.FILTER_SHADOW_CLASS}
-              style={{
-                boxShadow: `var(--atomix-glass-container-shadow)`,
-                opacity: `var(--atomix-glass-container-shadow-opacity)`,
-                background: `var(--atomix-glass-container-bg)`,
-                borderRadius: `var(--atomix-glass-container-radius)`,
-              }}
+              style={
+                {
+                  boxShadow: `var(--atomix-glass-container-shadow)`,
+                  opacity: `var(--atomix-glass-container-shadow-opacity)`,
+                  background: `var(--atomix-glass-container-bg)`,
+                  borderRadius: `var(--atomix-glass-container-radius)`,
+                } as CSSProperties
+              }
             />
           </div>
 
           <div
             ref={contentRef}
             className={ATOMIX_GLASS.CONTENT_CLASS}
-            style={{
-              position: 'relative',
-              textShadow: `var(--atomix-glass-container-text-shadow)`,
-              ...(elasticity > 0 ? { zIndex: 100 } : {}),
-            }}
+            style={
+              {
+                position: 'relative',
+                textShadow: `var(--atomix-glass-container-text-shadow)`,
+                ...(elasticity > 0 ? { zIndex: 100 } : {}),
+              } as CSSProperties
+            }
           >
             {children}
           </div>
@@ -547,4 +544,4 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
   }
 );
 
-AtomixGlassContainer.displayName = 'AtomixGlassContainer';
+AtomixGlassContainer.displayName = 'AtomixGlassContainer';

package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx

@@ -946,7 +946,7 @@ export const PerformanceOptimization: Story = {
       <div style={{ margin: '0 auto', width: '100%' }}>
         {/* Header Section */}
         <div style={{ textAlign: 'center', marginBottom: '60px' }}>
-          <Badge variant="primary" label="Performance Guide" glass={{className: 'u-d-inline-block', children:<></>}} />
+          <Badge variant="primary" label="Performance Guide" glass={{className: 'u-inline-block', children:<></>}} />
           <h1
             style={{
               color: '#fff',