@shohojdhara/atomix 0.3.13 → 0.3.15

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

@@ -0,0 +1,155 @@
+/**
+ * SCSS Component and Settings Templates
+ * Templates for SCSS files generation following ITCSS methodology
+ */
+
+/**
+ * SCSS component template
+ */
+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.config' as config;
+
+.c-${name.toLowerCase()} {
+  // 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);
+  
+  // 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: var(--atomix-spacing-2);
+    --#{config.$prefix}${name.toLowerCase()}-font-size: var(--atomix-font-size-sm);
+  }
+
+  &--lg {
+    --#{config.$prefix}${name.toLowerCase()}-padding: var(--atomix-spacing-6);
+    --#{config.$prefix}${name.toLowerCase()}-font-size: var(--atomix-font-size-lg);
+  }
+
+  // Interactive states
+  &:hover {
+    background: var(--#{config.$prefix}${name.toLowerCase()}-hover-bg);
+    cursor: pointer;
+  }
+
+  &:focus {
+    background: var(--#{config.$prefix}${name.toLowerCase()}-focus-bg);
+    outline: 2px solid var(--atomix-focus-color);
+    outline-offset: 2px;
+  }
+
+  // Disabled state
+  &.is-disabled {
+    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: 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
+  &[data-state="open"] {
+    // Styles for open state
+  }
+
+  &[data-state="closed"] {
+    // Styles for closed state
+  }
+}
+`;
+
+/**
+ * SCSS settings template
+ */
+export const scssSettingsTemplate = (name) => `// ${name} Component Settings
+// Generated by Atomix CLI
+// 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.$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()}-secondary-bg: $secondary !default;
+$${name.toLowerCase()}-secondary-color: color-contrast($secondary) !default;
+$${name.toLowerCase()}-secondary-border: shade($secondary, 10%) !default;
+
+// 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-border: rgba(255, 255, 255, 0.2) !default;
+$${name.toLowerCase()}-glass-backdrop: blur(10px) !default;
+`;
+
+/**
+ * SCSS template combining both
+ */
+export const scssTemplate = (name) => {
+  return {
+    component: scssComponentTemplate(name),
+    settings: scssSettingsTemplate(name)
+  };
+};
+
+export const scssTemplates = {
+  component: scssComponentTemplate,
+  settings: scssSettingsTemplate,
+  full: scssTemplate
+};

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

@@ -0,0 +1,236 @@
+/**
+ * Storybook Templates
+ * Templates for Storybook stories and documentation
+ */
+
+/**
+ * Basic Storybook story template
+ */
+export const basicStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+import { ${name} } from './${name}';
+
+const meta: Meta<typeof ${name}> = {
+  title: 'Components/${name}',
+  component: ${name},
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    glass: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '${name} Component',
+    size: 'md',
+    variant: 'primary',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: 'lg',
+  },
+};
+
+export const Glass: Story = {
+  args: {
+    ...Default.args,
+    glass: true,
+  },
+};
+`;
+
+/**
+ * Enhanced Storybook story template with detailed documentation
+ */
+export const enhancedStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+import { ${name} } from './${name}';
+
+const meta: Meta<typeof ${name}> = {
+  title: 'Components/${name}',
+  component: ${name},
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A versatile ${name.toLowerCase()} component built with Atomix Design System.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Content to be rendered inside the component',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant of the component',
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error'],
+      description: 'Color variant of the component',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the component is disabled',
+    },
+    glass: {
+      control: 'boolean',
+      description: 'Whether to apply glass effect',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '${name} Component',
+    size: 'md',
+    variant: 'primary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default ${name.toLowerCase()} component with primary variant and medium size.',
+      },
+    },
+  },
+};
+
+export const Playground: Story = {
+  args: {
+    children: 'Interactive ${name}',
+    size: 'md',
+    variant: 'primary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive playground to test different combinations of props.',
+      },
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: 'sm',
+    children: 'Small ${name}',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: 'lg',
+    children: 'Large ${name}',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Default.args,
+    variant: 'secondary',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    ...Default.args,
+    variant: 'success',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    variant: 'error',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+export const Glass: Story = {
+  args: {
+    ...Default.args,
+    glass: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '${name} with glass morphism effect applied.',
+      },
+    },
+  },
+};
+
+export const CustomContent: Story = {
+  args: {
+    children: (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span>🎨</span>
+        <span>Custom ${name} Content</span>
+      </div>
+    ),
+    size: 'lg',
+    variant: 'primary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example with custom content including icons and complex markup.',
+      },
+    },
+  },
+};
+`;
+
+/**
+ * Storybook templates object
+ */
+export const storybookTemplates = {
+  story: basicStoryTemplate,
+  storyEnhanced: enhancedStoryTemplate,
+};

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

@@ -0,0 +1,224 @@
+/**
+ * Enhanced Testing Templates
+ * Comprehensive test templates with accessibility and advanced patterns
+ */
+
+/**
+ * Enhanced Vitest test template for React components
+ */
+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}', () => {
+  // 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();
+    });
+  });
+});
+`;
+
+/**
+ * Testing templates object
+ */
+export const testingTemplates = {
+  test: testTemplate,
+};