@shohojdhara/atomix 0.3.14 → 0.4.0

package/scripts/cli/templates/scss-templates.js

@@ -1,84 +1,81 @@
 /**
- * SCSS Templates
- * Templates for styling components with SCSS
+ * SCSS Component and Settings Templates
+ * Templates for SCSS files generation following ITCSS methodology
  */
 
 /**
- * Main SCSS component template
+ * SCSS component template
  */
-export const scssTemplate = (name) => `// =============================================================================
-// ${name.toUpperCase()}
-// =============================================================================
+export const scssComponentTemplate = (name) => `// ${name} Component Styles
+// Generated by Atomix CLI
+// Located in src/styles/06-components/_components.${name.toLowerCase()}.scss
 
-@use '../01-settings/settings.${name.toLowerCase()}' as ${name.toLowerCase()};
+@use '../01-settings/settings.config' as config;
 
 .c-${name.toLowerCase()} {
-  // CSS Custom Properties (from settings)
-  --#{config.$prefix}${name.toLowerCase()}-width: #{${name.toLowerCase()}.$${name.toLowerCase()}-width};
-  --#{config.$prefix}${name.toLowerCase()}-padding-x: #{${name.toLowerCase()}.$${name.toLowerCase()}-padding-x};
-  --#{config.$prefix}${name.toLowerCase()}-padding-y: #{${name.toLowerCase()}.$${name.toLowerCase()}-padding-y};
-  --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-bg};
-  --#{config.$prefix}${name.toLowerCase()}-color: #{${name.toLowerCase()}.$${name.toLowerCase()}-color};
-  --#{config.$prefix}${name.toLowerCase()}-border: #{${name.toLowerCase()}.$${name.toLowerCase()}-border};
-  --#{config.$prefix}${name.toLowerCase()}-border-radius: #{${name.toLowerCase()}.$${name.toLowerCase()}-border-radius};
-  --#{config.$prefix}${name.toLowerCase()}-transition: #{${name.toLowerCase()}.$${name.toLowerCase()}-transition};
-
-  // Base styles
-  width: var(#{config.$prefix}${name.toLowerCase()}-width);
-  padding: var(#{config.$prefix}${name.toLowerCase()}-padding-y) var(#{config.$prefix}${name.toLowerCase()}-padding-x);
-  background-color: var(#{config.$prefix}${name.toLowerCase()}-bg);
-  color: var(#{config.$prefix}${name.toLowerCase()}-color);
-  border: var(#{config.$prefix}${name.toLowerCase()}-border);
-  border-radius: var(#{config.$prefix}${name.toLowerCase()}-border-radius);
-  transition: var(#{config.$prefix}${name.toLowerCase()}-transition);
+  // Using CSS custom properties defined in settings
+  --#{config.$prefix}${name.toLowerCase()}-padding: var(--atomix-spacing-4);
+  --#{config.$prefix}${name.toLowerCase()}-margin: var(--atomix-spacing-2);
+  --#{config.$prefix}${name.toLowerCase()}-border: var(--atomix-border-default);
+  --#{config.$prefix}${name.toLowerCase()}-border-radius: var(--atomix-border-radius-md);
+  --#{config.$prefix}${name.toLowerCase()}-bg: var(--atomix-bg-surface);
+  --#{config.$prefix}${name.toLowerCase()}-color: var(--atomix-text-primary);
+  --#{config.$prefix}${name.toLowerCase()}-font-size: var(--atomix-font-size-base);
+  --#{config.$prefix}${name.toLowerCase()}-transition: var(--atomix-transition-all);
   
-  // Reset and base
-  box-sizing: border-box;
-  margin: 0;
-  font-family: inherit;
-  font-size: var(#{config.$prefix}${name.toLowerCase()}-font-size);
-  line-height: var(#{config.$prefix}${name.toLowerCase()}-line-height);
-  font-weight: var(#{config.$prefix}${name.toLowerCase()}-font-weight);
+  // State-specific properties
+  --#{config.$prefix}${name.toLowerCase()}-hover-bg: var(--atomix-bg-surface-hover);
+  --#{config.$prefix}${name.toLowerCase()}-focus-bg: var(--atomix-bg-surface-focus);
+  --#{config.$prefix}${name.toLowerCase()}-disabled-bg: var(--atomix-bg-surface-disabled);
+  --#{config.$prefix}${name.toLowerCase()}-disabled-color: var(--atomix-text-disabled);
+  --#{config.$prefix}${name.toLowerCase()}-disabled-opacity: var(--atomix-opacity-disabled);
+
+  padding: var(--#{config.$prefix}${name.toLowerCase()}-padding);
+  margin: var(--#{config.$prefix}${name.toLowerCase()}-margin);
+  border: var(--#{config.$prefix}${name.toLowerCase()}-border);
+  border-radius: var(--#{config.$prefix}${name.toLowerCase()}-border-radius);
+  background: var(--#{config.$prefix}${name.toLowerCase()}-bg);
+  color: var(--#{config.$prefix}${name.toLowerCase()}-color);
+  font-size: var(--#{config.$prefix}${name.toLowerCase()}-font-size);
+  transition: var(--#{config.$prefix}${name.toLowerCase()}-transition);
 
   // Size variants
   &--sm {
-    --#{config.$prefix}${name.toLowerCase()}-padding-x: #{${name.toLowerCase()}.$${name.toLowerCase()}-sm-padding-x};
-    --#{config.$prefix}${name.toLowerCase()}-padding-y: #{${name.toLowerCase()}.$${name.toLowerCase()}-sm-padding-y};
-    --#{config.$prefix}${name.toLowerCase()}-font-size: #{${name.toLowerCase()}.$${name.toLowerCase()}-sm-font-size};
+    --#{config.$prefix}${name.toLowerCase()}-padding: var(--atomix-spacing-2);
+    --#{config.$prefix}${name.toLowerCase()}-font-size: var(--atomix-font-size-sm);
   }
 
   &--lg {
-    --#{config.$prefix}${name.toLowerCase()}-padding-x: #{${name.toLowerCase()}.$${name.toLowerCase()}-lg-padding-x};
-    --#{config.$prefix}${name.toLowerCase()}-padding-y: #{${name.toLowerCase()}.$${name.toLowerCase()}-lg-padding-y};
-    --#{config.$prefix}${name.toLowerCase()}-font-size: #{${name.toLowerCase()}.$${name.toLowerCase()}-lg-font-size};
+    --#{config.$prefix}${name.toLowerCase()}-padding: var(--atomix-spacing-6);
+    --#{config.$prefix}${name.toLowerCase()}-font-size: var(--atomix-font-size-lg);
   }
 
   // Interactive states
   &:hover {
-    --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-hover-bg};
+    background: var(--#{config.$prefix}${name.toLowerCase()}-hover-bg);
     cursor: pointer;
   }
 
   &:focus {
-    --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-focus-bg};
+    background: var(--#{config.$prefix}${name.toLowerCase()}-focus-bg);
     outline: 2px solid var(--atomix-focus-color);
     outline-offset: 2px;
   }
 
   // Disabled state
   &.is-disabled {
-    --#{config.$prefix}${name.toLowerCase()}-bg: #{${name.toLowerCase()}.$${name.toLowerCase()}-disabled-bg};
-    --#{config.$prefix}${name.toLowerCase()}-color: #{${name.toLowerCase()}.$${name.toLowerCase()}-disabled-color};
-    opacity: var(#{config.$prefix}${name.toLowerCase()}-disabled-opacity);
+    background: var(--#{config.$prefix}${name.toLowerCase()}-disabled-bg);
+    color: var(--#{config.$prefix}${name.toLowerCase()}-disabled-color);
+    opacity: var(--#{config.$prefix}${name.toLowerCase()}-disabled-opacity);
     cursor: not-allowed;
     pointer-events: none;
   }
 
   // Glass variant
   &--glass {
-    background: #{${name.toLowerCase()}.$${name.toLowerCase()}-glass-bg};
-    backdrop-filter: #{${name.toLowerCase()}.$${name.toLowerCase()}-glass-backdrop};
-    border-color: #{${name.toLowerCase()}.$${name.toLowerCase()}-glass-border};
+    background: var(--#{config.$prefix}${name.toLowerCase()}-glass-bg, rgba(255, 255, 255, 0.1));
+    backdrop-filter: var(--#{config.$prefix}${name.toLowerCase()}-glass-backdrop, blur(10px));
+    border-color: var(--#{config.$prefix}${name.toLowerCase()}-glass-border, rgba(255, 255, 255, 0.2));
   }
 
   // Data states for JavaScript interaction
@@ -97,60 +94,62 @@ export const scssTemplate = (name) => `// ======================================
  */
 export const scssSettingsTemplate = (name) => `// ${name} Component Settings
 // Generated by Atomix CLI
-
-// Core component dimensions
-$${name.toLowerCase()}-width: 100% !default;
-$${name.toLowerCase()}-padding-x: map.get($spacing-sizes, 5) !default;
-$${name.toLowerCase()}-padding-y: map.get($spacing-sizes, 3) !default;
-$${name.toLowerCase()}-margin-bottom: map.get($spacing-sizes, 2) !default;
-
-// Typography settings
-$${name.toLowerCase()}-font-size: map.get($font-sizes, base) !default;
-$${name.toLowerCase()}-font-weight: map.get($font-weights, normal) !default;
-$${name.toLowerCase()}-line-height: map.get($line-heights, base) !default;
-
-// Border and radius
-$${name.toLowerCase()}-border: 1px solid var(--atomix-border-default) !default;
-$${name.toLowerCase()}-border-radius: var(--atomix-border-radius-md) !default;
-$${name.toLowerCase()}-border-style: solid !default;
-
-// Colors (using CSS custom properties)
-$${name.toLowerCase()}-bg: var(--atomix-bg-surface) !default;
-$${name.toLowerCase()}-color: var(--atomix-text-primary) !default;
-$${name.toLowerCase()}-border-color: var(--atomix-border-default) !default;
-
-// Transitions
-$${name.toLowerCase()}-transition: var(--atomix-transition-all) !default;
-$${name.toLowerCase()}-transition-duration: var(--atomix-duration-base) !default;
-$${name.toLowerCase()}-transition-timing: var(--atomix-easing-smooth) !default;
-
-// State-specific settings
-$${name.toLowerCase()}-hover-bg: var(--atomix-bg-surface-hover) !default;
-$${name.toLowerCase()}-focus-bg: var(--atomix-bg-surface-focus) !default;
-$${name.toLowerCase()}-disabled-bg: var(--atomix-bg-surface-disabled) !default;
-$${name.toLowerCase()}-disabled-color: var(--atomix-text-disabled) !default;
-$${name.toLowerCase()}-disabled-opacity: var(--atomix-opacity-disabled) !default;
+// Located in src/styles/01-settings/_settings.${name.toLowerCase()}.scss
+
+@use 'sass:map';
+@use 'settings.colors' as *;
+@use 'settings.spacing' as spacing;
+@use 'settings.border-radius' as *;
+@use 'settings.typography' as *;
+@use '../02-tools/tools.color-functions' as *;
+
+// Component-specific variables
+$${name.toLowerCase()}-padding-x: map.get(spacing.$spacing-sizes, 3) !default;
+$${name.toLowerCase()}-padding-y: map.get(spacing.$spacing-sizes, 2) !default;
+$${name.toLowerCase()}-gap: map.get(spacing.$spacing-sizes, 2) !default;
+$${name.toLowerCase()}-border-radius: $border-radius-md !default;
+$${name.toLowerCase()}-transition: all 0.2s ease !default;
 
 // Size variants
-$${name.toLowerCase()}-sm-padding-x: map.get($spacing-sizes, 3) !default;
-$${name.toLowerCase()}-sm-padding-y: map.get($spacing-sizes, 2) !default;
-$${name.toLowerCase()}-sm-font-size: map.get($font-sizes, sm) !default;
+$${name.toLowerCase()}-sm-padding-x: map.get(spacing.$spacing-sizes, 2) !default;
+$${name.toLowerCase()}-sm-padding-y: map.get(spacing.$spacing-sizes, 1) !default;
+$${name.toLowerCase()}-sm-font-size: $font-size-sm !default;
+
+$${name.toLowerCase()}-lg-padding-x: map.get(spacing.$spacing-sizes, 4) !default;
+$${name.toLowerCase()}-lg-padding-y: map.get(spacing.$spacing-sizes, 3) !default;
+$${name.toLowerCase()}-lg-font-size: $font-size-lg !default;
+
+// Color variants
+$${name.toLowerCase()}-primary-bg: $primary !default;
+$${name.toLowerCase()}-primary-color: color-contrast($primary) !default;
+$${name.toLowerCase()}-primary-border: shade($primary, 10%) !default;
 
-$${name.toLowerCase()}-lg-padding-x: map.get($spacing-sizes, 7) !default;
-$${name.toLowerCase()}-lg-padding-y: map.get($spacing-sizes, 4) !default;
-$${name.toLowerCase()}-lg-font-size: map.get($font-sizes, lg) !default;
+$${name.toLowerCase()}-secondary-bg: $secondary !default;
+$${name.toLowerCase()}-secondary-color: color-contrast($secondary) !default;
+$${name.toLowerCase()}-secondary-border: shade($secondary, 10%) !default;
 
-// Glass variant settings
+// State variables
+$${name.toLowerCase()}-disabled-opacity: 0.6 !default;
+$${name.toLowerCase()}-disabled-cursor: not-allowed !default;
+
+// Glass variant
 $${name.toLowerCase()}-glass-bg: rgba(255, 255, 255, 0.1) !default;
-$${name.toLowerCase()}-glass-backdrop: blur(10px) !default;
 $${name.toLowerCase()}-glass-border: rgba(255, 255, 255, 0.2) !default;
+$${name.toLowerCase()}-glass-backdrop: blur(10px) !default;
 `;
 
 /**
- * SCSS templates object
+ * SCSS template combining both
  */
+export const scssTemplate = (name) => {
+  return {
+    component: scssComponentTemplate(name),
+    settings: scssSettingsTemplate(name)
+  };
+};
+
 export const scssTemplates = {
-  scss: scssTemplate,
-  scssModule: () => '', // Disabled/Empty as we prefer global SCSS
-  scssSettings: scssSettingsTemplate,
+  component: scssComponentTemplate,
+  settings: scssSettingsTemplate,
+  full: scssTemplate
 };

package/scripts/cli/templates/testing-templates.js

@@ -1,38 +1,217 @@
 /**
- * Testing Templates
- * Templates for component testing
+ * Enhanced Testing Templates
+ * Comprehensive test templates with accessibility and advanced patterns
  */
 
 /**
- * Vitest test template for React components
+ * Enhanced Vitest test template for React components
  */
-export const testTemplate = (name) => `import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+export const testTemplate = (name) => `import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import { ${name} } from './${name}';
 
+// Extend Vitest matchers
+expect.extend(toHaveNoViolations);
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn()
+}));
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn()
+}));
+
 describe('${name}', () => {
-  it('renders children correctly', () => {
-    render(<${name}>Test Content</${name}>);
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-  
-  it('applies size variant classes', () => {
-    const { container } = render(<${name} size="lg">Content</${name}>);
-    const element = container.firstChild;
-    expect(element).toHaveClass('c-${name.toLowerCase()}--lg');
-  });
-  
-  it('handles disabled state', () => {
-    const { container } = render(<${name} disabled>Content</${name}>);
-    const element = container.firstChild;
-    expect(element).toHaveAttribute('aria-disabled', 'true');
-    expect(element).toHaveClass('is-disabled');
-  });
-  
-  it('forwards ref correctly', () => {
-    const ref = React.createRef<HTMLDivElement>();
-    render(<${name} ref={ref}>Content</${name}>);
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have no accessibility violations', async () => {
+      const { container } = render(<${name}>Accessible Content</${name}>);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should have proper aria attributes', () => {
+      render(<${name} aria-label="Test component">Content</${name}>);
+      const element = screen.getByLabelText('Test component');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should support keyboard navigation', () => {
+      render(<${name}>Focusable Content</${name}>);
+      const element = screen.getByText('Focusable Content');
+      element.focus();
+      expect(element).toHaveFocus();
+    });
+  });
+
+  // Rendering Tests
+  describe('Rendering', () => {
+    it('renders children correctly', () => {
+      render(<${name}>Test Content</${name}>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('applies className prop', () => {
+      const { container } = render(<${name} className="custom-class">Content</${name}>);
+      const element = container.firstChild;
+      expect(element).toHaveClass('custom-class');
+    });
+
+    it('renders with custom attributes', () => {
+      render(<${name} data-testid="test-${name.toLowerCase()}">Content</${name}>);
+      expect(screen.getByTestId('test-${name.toLowerCase()}')).toBeInTheDocument();
+    });
+  });
+
+  // Props Tests
+  describe('Props', () => {
+    it('applies size variant classes', () => {
+      const { container } = render(<${name} size="lg">Content</${name}>);
+      const element = container.firstChild;
+      expect(element).toHaveClass('c-${name.toLowerCase()}--lg');
+    });
+
+    it('handles disabled state', () => {
+      const { container } = render(<${name} disabled>Content</${name}>);
+      const element = container.firstChild;
+      expect(element).toHaveAttribute('aria-disabled', 'true');
+      expect(element).toHaveClass('is-disabled');
+    });
+
+    it('passes through data attributes', () => {
+      const { container } = render(<${name} data-custom="value">Content</${name}>);
+      const element = container.firstChild;
+      expect(element).toHaveAttribute('data-custom', 'value');
+    });
+  });
+
+  // Event Handling Tests
+  describe('Event Handling', () => {
+    it('calls onClick handler when clicked', () => {
+      const handleClick = vi.fn();
+      render(<${name} onClick={handleClick}>Clickable</${name}>);
+      
+      fireEvent.click(screen.getByText('Clickable'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when disabled', () => {
+      const handleClick = vi.fn();
+      render(<${name} onClick={handleClick} disabled>Disabled</${name}>);
+      
+      fireEvent.click(screen.getByText('Disabled'));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('handles mouse events', () => {
+      const handleMouseEnter = vi.fn();
+      const handleMouseLeave = vi.fn();
+      
+      render(
+        <${name} 
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          Hoverable
+        </${name}>
+      );
+      
+      const element = screen.getByText('Hoverable');
+      fireEvent.mouseEnter(element);
+      fireEvent.mouseLeave(element);
+      
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1);
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Ref Forwarding Tests
+  describe('Ref Forwarding', () => {
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      render(<${name} ref={ref}>Content</${name}>);
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+
+    it('allows imperative methods access', () => {
+      const ref = React.createRef<{ focus: () => void }>();
+      render(<${name} ref={ref}>Focusable</${name}>);
+      
+      // Assuming component exposes focus method
+      if (ref.current && ref.current.focus) {
+        const spy = vi.spyOn(ref.current, 'focus');
+        ref.current.focus();
+        expect(spy).toHaveBeenCalled();
+      }
+    });
+  });
+
+  // Performance Tests
+  describe('Performance', () => {
+    it('renders efficiently without unnecessary re-renders', () => {
+      const renderSpy = vi.fn();
+      const TestWrapper = () => {
+        renderSpy();
+        return <${name}>Performance Test</${name}>;
+      };
+      
+      render(<TestWrapper />);
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Edge Cases
+  describe('Edge Cases', () => {
+    it('handles empty children gracefully', () => {
+      const { container } = render(<${name}></${name}>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles null children', () => {
+      const { container } = render(<${name}>{null}</${name}>);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles undefined props', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      expect(() => {
+        render(<${name} size={undefined}>Content</${name}>);
+      }).not.toThrow();
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  // Async Behavior Tests
+  describe('Async Behavior', () => {
+    it('handles async state changes', async () => {
+      const AsyncComponent = () => {
+        const [loaded, setLoaded] = React.useState(false);
+        
+        React.useEffect(() => {
+          setTimeout(() => setLoaded(true), 100);
+        }, []);
+        
+        return <${name}>{loaded ? 'Loaded' : 'Loading...'}</${name}>;
+      };
+      
+      render(<AsyncComponent />);
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 150));
+      });
+      
+      expect(screen.getByText('Loaded')).toBeInTheDocument();
+    });
   });
 });
 `;