@shohojdhara/atomix 0.5.0 → 0.5.2

package/scripts/cli/__tests__/utils.test.js

@@ -1,165 +0,0 @@
-/**
- * CLI Utilities Tests
- */
-
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { 
-  validatePath,
-  validateComponentName,
-  validateThemeName,
-  sanitizeInput,
-  fileExists,
-  AtomixCLIError
-} from '../utils.js';
-import { mkdtemp, rm, writeFile } from 'fs/promises';
-import { join } from 'path';
-import { tmpdir } from 'os';
-
-describe('CLI Utils', () => {
-  let tempDir;
-
-  beforeEach(async () => {
-    tempDir = await mkdtemp(join(tmpdir(), 'atomix-test-'));
-  });
-
-  afterEach(async () => {
-    await rm(tempDir, { recursive: true, force: true });
-  });
-
-  describe('validatePath', () => {
-    it('should accept valid relative paths', () => {
-      const result = validatePath('./src/components', tempDir);
-      expect(result.isValid).toBe(true);
-      expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
-    });
-
-    it('should reject paths outside project directory', () => {
-      const result = validatePath('../../etc/passwd', tempDir);
-      expect(result.isValid).toBe(false);
-      expect(result.error).toMatch(/outside|traversal/);
-    });
-
-    it('should reject sensitive files', () => {
-      const result = validatePath('.env', tempDir);
-      expect(result.isValid).toBe(false);
-      expect(result.error).toContain('sensitive path');
-    });
-
-    it('should handle absolute paths within project', () => {
-      const validPath = join(tempDir, 'src', 'components');
-      const result = validatePath(validPath, tempDir);
-      expect(result.isValid).toBe(true);
-    });
-
-    it('should normalize paths correctly', () => {
-      const result = validatePath('./src/../src/components', tempDir);
-      expect(result.isValid).toBe(true);
-      expect(result.safePath != null ? result.safePath : '').toMatch(/src\/components/);
-    });
-  });
-
-  describe('validateComponentName', () => {
-    it('should accept valid PascalCase names', () => {
-      const validNames = ['Button', 'CardHeader', 'ModalDialog', 'FormInput'];
-      
-      validNames.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(true);
-      });
-    });
-
-    it('should reject invalid names', () => {
-      const invalidNames = ['123Button', '', '1', 'Component', 'React'];
-
-      invalidNames.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-
-    it('should reject reserved words', () => {
-      const reservedWords = ['Component', 'React', 'Fragment', 'Suspense'];
-      
-      reservedWords.forEach(name => {
-        const result = validateComponentName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-  });
-
-  describe('validateThemeName', () => {
-    it('should accept valid kebab-case names', () => {
-      const validNames = ['dark-theme', 'light', 'high-contrast', 'custom-brand'];
-      
-      validNames.forEach(name => {
-        const result = validateThemeName(name);
-        expect(result.isValid).toBe(true);
-      });
-    });
-
-    it('should reject invalid theme names', () => {
-      const invalidNames = ['DarkTheme', 'theme_dark', 'Theme-Dark', '123theme', ''];
-      
-      invalidNames.forEach(name => {
-        const result = validateThemeName(name);
-        expect(result.isValid).toBe(false);
-      });
-    });
-  });
-
-  describe('sanitizeInput', () => {
-    it('should remove dangerous shell characters', () => {
-      const dangerousInputs = [
-        'test; rm -rf /',
-        'input && malicious-command',
-        'command | pipe',
-        '`substitution`',
-        '$(command)',
-        'input > /dev/null',
-        '"quoted"',
-        "'singlequoted'",
-        '" $(whoami) "',
-        "' ; rm -rf / '"
-      ];
-      
-      dangerousInputs.forEach(input => {
-        const sanitized = sanitizeInput(input);
-        expect(sanitized).not.toMatch(/[;&|`$<>\\"']/);
-      });
-    });
-
-    it('should preserve safe characters', () => {
-      const safeInput = 'Button-Component_123';
-      const sanitized = sanitizeInput(safeInput);
-      expect(sanitized).toBe(safeInput);
-    });
-  });
-
-  describe('fileExists', () => {
-    it('should return true for existing files', async () => {
-      const testFile = join(tempDir, 'test.txt');
-      await writeFile(testFile, 'test content');
-      
-      const exists = await fileExists(testFile);
-      expect(exists).toBe(true);
-    });
-
-    it('should return false for non-existing files', async () => {
-      const nonExistent = join(tempDir, 'nonexistent.txt');
-      const exists = await fileExists(nonExistent);
-      expect(exists).toBe(false);
-    });
-  });
-
-  describe('AtomixCLIError', () => {
-    it('should create error with code and suggestions', () => {
-      const suggestions = ['Use PascalCase', 'Start with letter'];
-      const error = new AtomixCLIError('Invalid name', 'INVALID_NAME', suggestions);
-      
-      expect(error.message).toBe('Invalid name');
-      expect(error.code).toBe('INVALID_NAME');
-      expect(error.suggestions).toEqual(suggestions);
-      expect(error.name).toBe('AtomixCLIError');
-    });
-  });
-});

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

@@ -1,95 +0,0 @@
-/**
- * Quick Test Story for Phase 1 Animations
- * 
- * This is a minimal test to verify the animation pipeline is working
- */
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { AtomixGlass } from '../AtomixGlass';
-
-const meta = {
-  title: 'Testing/Phase 1 Animation Quick Test',
-  component: AtomixGlass,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['!autodocs'], // Exclude from production docs - test stories only
-  argTypes: {
-    withTimeAnimation: { control: 'boolean' },
-    animationSpeed: { control: { type: 'range', min: 0.1, max: 5.0, step: 0.1 } },
-    distortionOctaves: { control: { type: 'range', min: 1, max: 8, step: 1 } },
-    distortionQuality: { 
-      control: 'select', 
-      options: ['low', 'medium', 'high', 'ultra'] 
-    },
-  },
-} satisfies Meta<typeof AtomixGlass>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default test with animations enabled
-export const Animated: Story = {
-  args: {
-    children: (
-      <div style={{ padding: '40px', color: 'white', textAlign: 'center' }}>
-        <h2>Phase 1 Animation Test</h2>
-        <p>If you see flowing liquid glass effects, it's working!</p>
-      </div>
-    ),
-    mode: 'shader',
-    withTimeAnimation: true,
-    animationSpeed: 1.0,
-    distortionOctaves: 4,
-    distortionQuality: 'high',
-    displacementScale: 30,
-    blurAmount: 8,
-    saturation: 180,
-    aberrationIntensity: 3,
-    // Dark background to make effects visible
-    style: {
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-    },
-  },
-};
-
-// Comparison: Same config without animations
-export const Static: Story = {
-  args: {
-    ...Animated.args,
-    withTimeAnimation: false,
-  },
-};
-
-// Speed comparison
-export const FastAnimation: Story = {
-  args: {
-    ...Animated.args,
-    animationSpeed: 3.0,
-  },
-};
-
-export const SlowAnimation: Story = {
-  args: {
-    ...Animated.args,
-    animationSpeed: 0.3,
-  },
-};
-
-// High complexity FBM
-export const HighDetailFBM: Story = {
-  args: {
-    ...Animated.args,
-    distortionOctaves: 7,
-    distortionQuality: 'ultra',
-  },
-};
-
-// Mobile optimized (low quality)
-export const MobileOptimized: Story = {
-  args: {
-    ...Animated.args,
-    distortionOctaves: 2,
-    distortionQuality: 'low',
-  },
-};

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

@@ -1,212 +0,0 @@
-/**
- * CardExamples.stories.tsx
- *
- * Card-based layouts and content containers using AtomixGlass.
- * Perfect for dashboards, profiles, and content grids.
- *
- * @package Atomix
- * @component AtomixGlass
- */
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import AtomixGlass from '../AtomixGlass';
-import { BackgroundWrapper, backgroundImages, StoryErrorBoundary } from './shared-components';
-import { baseArgTypes } from './argTypes';
-
-import { Button } from '../../Button';
-import { Badge } from '../../Badge';
-import { Avatar } from '../../Avatar';
-import { Icon } from '../../Icon/Icon';
-
-const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Examples/Card Examples',
-  component: AtomixGlass,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Card-based examples demonstrating AtomixGlass for content containers, profiles, and dashboard elements.',
-      },
-    },
-  },
-  tags: ['!autodocs'],
-  argTypes: {
-    ...baseArgTypes,
-    children: { control: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AtomixGlass>;
-
-/**
- * Profile Card
- *
- * User profile card with avatar and social links.
- */
-export const ProfileCard: Story = {
-  render: () => (
-    <StoryErrorBoundary>
-      <BackgroundWrapper backgroundImage={backgroundImages[1]} overlay overlayOpacity={0.3}>
-        <div style={{ maxWidth: '400px' }}>
-          <AtomixGlass
-            displacementScale={70}
-            blurAmount={0.5}
-            saturation={140}
-            borderRadius={24}
-            mode="standard"
-            padding="32px"
-          >
-            <div className="u-text-center u-text-white">
-              <Avatar
-                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop"
-                alt="User avatar"
-                size="xl"
-                className="u-mb-4"
-              />
-              <h3 className="u-mt-0 u-text-xl u-font-bold u-mb-2">Sarah Johnson</h3>
-              <p className="u-text-sm u-opacity-90 u-mb-4">Senior Product Designer</p>
-              <Badge variant="secondary" className="u-mb-4">
-                Available for hire
-              </Badge>
-              <div className="u-flex u-gap-2 u-justify-center u-flex-wrap" style={{ gap: '12px' }}>
-                <Button glass size="sm" variant="primary">
-                  Follow
-                </Button>
-                <Button glass size="sm" variant="outline-light">
-                  Message
-                </Button>
-              </div>
-            </div>
-          </AtomixGlass>
-        </div>
-      </BackgroundWrapper>
-    </StoryErrorBoundary>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'User profile card with avatar, badges, and action buttons.',
-      },
-    },
-  },
-};
-
-/**
- * Stats Card
- *
- * Dashboard statistics card with icon and metrics.
- */
-export const StatsCard: Story = {
-  render: () => (
-    <StoryErrorBoundary>
-      <BackgroundWrapper backgroundImage={backgroundImages[3]}>
-        <div style={{ maxWidth: '320px' }}>
-          <AtomixGlass
-            displacementScale={60}
-            blurAmount={0.4}
-            saturation={130}
-            borderRadius={20}
-            mode="standard"
-            padding="28px"
-          >
-            <div className="u-text-white">
-              <div className="u-flex u-items-center u-justify-between u-mb-3">
-                <div
-                  style={{
-                    width: '48px',
-                    height: '48px',
-                    borderRadius: '12px',
-                    background: 'rgba(99, 102, 241, 0.2)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '24px',
-                  }}
-                >
-                  📊
-                </div>
-                <Badge variant="success">+12.5%</Badge>
-              </div>
-              <p className="u-text-sm u-opacity-80 u-mb-1">Total Revenue</p>
-              <h3 className="u-mt-0 u-text-3xl u-font-bold u-mb-2">$48,295</h3>
-              <p className="u-text-xs u-opacity-70">Compared to $42,890 last month</p>
-            </div>
-          </AtomixGlass>
-        </div>
-      </BackgroundWrapper>
-    </StoryErrorBoundary>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dashboard statistics card displaying metrics with trend indicators.',
-      },
-    },
-  },
-};
-
-/**
- * Content Card
- *
- * Blog post or article preview card.
- */
-export const ContentCard: Story = {
-  render: () => (
-    <StoryErrorBoundary>
-      <BackgroundWrapper backgroundImage={backgroundImages[6]}>
-        <div style={{ maxWidth: '420px' }}>
-          <AtomixGlass
-            displacementScale={65}
-            blurAmount={0.5}
-            saturation={135}
-            borderRadius={20}
-            mode="standard"
-            padding="0"
-          >
-            <div className="u-text-white">
-              <div
-                style={{
-                  height: '200px',
-                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                  borderRadius: '20px 20px 0 0',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '64px',
-                }}
-                aria-hidden="true"
-              >
-                🎨
-              </div>
-              <div style={{ padding: '24px' }}>
-                <div className="u-flex u-items-center u-gap-2 u-mb-3">
-                  <Badge variant="primary">Design</Badge>
-                  <span className="u-text-xs u-opacity-70">5 min read</span>
-                </div>
-                <h3 className="u-mt-0 u-text-xl u-font-bold u-mb-2">
-                  The Future of Glass Morphism in UI Design
-                </h3>
-                <p className="u-text-sm u-opacity-80 u-line-height-relaxed u-mb-4">
-                  Exploring how glass morphism continues to shape modern interface design trends
-                  and user expectations.
-                </p>
-                <Button glass size="sm" variant="outline-light" className="u-w-full">
-                  Read Article
-                </Button>
-              </div>
-            </div>
-          </AtomixGlass>
-        </div>
-      </BackgroundWrapper>
-    </StoryErrorBoundary>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Content card for blog posts or articles with category badge and call-to-action.',
-      },
-    },
-  },
-};

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

@@ -1,131 +0,0 @@
-/**
- * Customization.stories.tsx
- *
- * Stories showcasing customization options and integration with other components.
- *
- * @package Atomix
- * @component AtomixGlass
- */
-
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import AtomixGlass from '../AtomixGlass';
-import Button from '../../Button/Button';
-import Badge from '../../Badge/Badge';
-import { BackgroundWrapper, backgroundImages } from './shared-components';
-import { Icon } from '../../Icon/Icon'; // Assuming Icon is used or might be useful, added from Examples
-
-const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Features/Customization',
-  component: AtomixGlass,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Examples of how to customize AtomixGlass with styles and integrate it with other Atomix components.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AtomixGlass>;
-
-export const WithCustomStyling: Story = {
-  args: {
-    children: (
-      <div className="u-text-center">
-        <h2 className="u-text-4 u-font-semibold u-mb-4 u-text-white">Custom Styled Glass</h2>
-        <p className="u-text-base u-mb-6 u-text-white">
-          This glass uses custom styling properties.
-        </p>
-        <Button
-          variant="primary"
-          className="u-rounded-lg u-py-3 u-px-6"
-          style={{ boxShadow: '0 5px 15px rgba(0,0,0,0.2)' }}
-        >
-          Premium Effect
-        </Button>
-      </div>
-    ),
-    displacementScale: 70,
-    blurAmount: 0.4,
-    saturation: 160,
-    aberrationIntensity: 1.8,
-    borderRadius: 30,
-    padding: '40px',
-    style: {
-      width: '100%',
-      maxWidth: '400px',
-      margin: '0 auto',
-      boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
-      transition: 'transform 0.3s ease-in-out',
-    },
-  },
-  render: args => (
-    <BackgroundWrapper backgroundImage={backgroundImages[2]}>
-      <div className="u-flex u-justify-center u-items-center u-w-full u-h-full">
-        <AtomixGlass {...args} />
-      </div>
-    </BackgroundWrapper>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Shows how to customize the AtomixGlass component with additional CSS styles and enhanced interactivity.',
-      },
-    },
-  },
-};
-
-export const WithOtherComponents: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Demonstrates how AtomixGlass integrates with other components in the design system.',
-      },
-    },
-  },
-  render: () => {
-    return (
-      <BackgroundWrapper backgroundImage={backgroundImages[0]}>
-        <div className="u-flex u-items-center u-justify-center u-w-full u-h-full">
-          <AtomixGlass
-            displacementScale={85}
-            blurAmount={0.6}
-            saturation={170}
-            aberrationIntensity={2.2}
-            elasticity={0.18}
-            borderRadius={28}
-            padding="36px"
-            className="u-w-11/12 u-max-w-2xl"
-          >
-            <div className="u-mb-6">
-              <h2 className="u-m-0 u-text-white u-text-28 u-mb-2">Integrated UI</h2>
-              <p className="u-m-0 u-text-white u-opacity-90">
-                Glass effect with multiple components
-              </p>
-            </div>
-
-            <div className="u-flex u-flex-col u-gap-4 u-items-center">
-              <Button variant="primary" glass className="u-w-full">
-                Primary Action
-              </Button>
-              <Button variant="secondary" glass className="u-w-full">
-                Secondary Action
-              </Button>
-
-              <div className="u-flex u-gap-3 u-mt-4">
-                <Badge variant="success" label="Success" glass />
-                <Badge variant="warning" label="Warning" glass />
-              </div>
-            </div>
-          </AtomixGlass>
-        </div>
-      </BackgroundWrapper>
-    );
-  },
-};