@shohojdhara/atomix 0.3.15 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.3.15",
+  "version": "0.4.1",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -302,4 +302,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/scripts/atomix-cli.js

@@ -78,6 +78,15 @@ const packageJson = JSON.parse(
 // CLI Configuration
 const DEBUG = process.env.ATOMIX_DEBUG === 'true' || process.argv.includes('--debug');
 
+const SENSITIVE_KEYS = /password|secret|token|api[-_]?key|access[-_]?key|auth[-_]?token|authorization|credential/i;
+
+function sensitiveDataReplacer(key, value) {
+  if (key && SENSITIVE_KEYS.test(key)) {
+    return '***REDACTED***';
+  }
+  return value;
+}
+
 /**
  * Debug logger
  */
@@ -85,7 +94,7 @@ function debug(message, data = null) {
   if (DEBUG) {
     console.log(chalk.gray(`[DEBUG] ${message}`));
     if (data) {
-      console.log(chalk.gray(JSON.stringify(data, null, 2),));
+      console.log(chalk.gray(JSON.stringify(data, sensitiveDataReplacer, 2)));
     }
   }
 }

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

@@ -115,12 +115,16 @@ describe('CLI Utils', () => {
         'command | pipe',
         '`substitution`',
         '$(command)',
-        'input > /dev/null'
+        'input > /dev/null',
+        '"quoted"',
+        "'singlequoted'",
+        '" $(whoami) "',
+        "' ; rm -rf / '"
       ];
       
       dangerousInputs.forEach(input => {
         const sanitized = sanitizeInput(input);
-        expect(sanitized).not.toMatch(/[;&|`$<>]/);
+        expect(sanitized).not.toMatch(/[;&|`$<>\\"']/);
       });
     });
 

package/scripts/cli/migration-tools.js

@@ -3,7 +3,7 @@
  * Helps migrate from other design systems and CSS frameworks
  */
 
-import { readFile, writeFile, readdir, stat } from 'fs/promises';
+import { readFile, writeFile, readdir, lstat } from 'fs/promises';
 import { join, extname, relative } from 'path';
 import chalk from 'chalk';
 import ora from 'ora';
@@ -329,7 +329,7 @@ async function getAllFiles(dir, extensions = []) {
 
     for (const entry of entries) {
       const fullPath = join(currentPath, entry);
-      const stats = await stat(fullPath);
+      const stats = await lstat(fullPath);
 
       if (stats.isDirectory()) {
         // Skip node_modules and hidden directories

package/scripts/cli/theme-bridge.js

@@ -3,11 +3,11 @@
  *
  * Bridges the TypeScript theme devtools CLI (src/lib/theme/devtools/CLI.ts) with the main JavaScript CLI.
  *
- * @dependency ts-node
+ * @dependency tsx
  * Theme subcommands (atomix theme validate|list|inspect|compare|export|create) run the TypeScript
- * theme CLI via ts-node. Ensure ts-node is installed in the project when using these commands:
- *   npm install --save-dev ts-node
- * If ts-node is missing, theme subcommands will fail; run `atomix doctor` to check availability.
+ * theme CLI via tsx. Ensure tsx is installed in the project when using these commands:
+ *   npm install --save-dev tsx
+ * If tsx is missing, theme subcommands will fail; run `atomix doctor` to check availability.
  */
 
 import { spawn } from 'child_process';
@@ -29,13 +29,11 @@ export async function executeThemeCommand(command, args = [], options = {}) {
     // Path to the theme CLI
     const themeCliPath = join(__dirname, '../../src/lib/theme/devtools/CLI.ts');
 
-    // Use ts-node to execute TypeScript CLI
-    const tsNodePath = join(__dirname, '../../node_modules/.bin/ts-node');
+    // Use tsx to execute TypeScript CLI
+    const tsxPath = join(__dirname, '../../node_modules/.bin/tsx');
 
     return new Promise((resolve, reject) => {
-      const child = spawn(tsNodePath, [
-        '--esm',
-        '--experimental-specifier-resolution=node',
+      const child = spawn(tsxPath, [
         themeCliPath,
         command,
         ...args

package/scripts/cli/utils.js

@@ -175,8 +175,9 @@ export function sanitizeInput(input) {
   }
 
   // Remove any shell metacharacters that could be dangerous
+  // Added single and double quotes to the blacklist to prevent shell injection
   return input
-    .replace(/[;&|`$<>\\]/g, '')
+    .replace(/[;&|`$<>\\"']/g, '')
     .replace(/\0/g, '') // Remove null bytes
     .trim();
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Accordion } from './Accordion'; 
+import { Accordion } from './Accordion';
 import { ACCORDION } from '../../lib/constants/components';
 import type { AtomixGlassProps } from '../../lib/types/components';
 
@@ -29,9 +29,7 @@ const mockHandlers = {
 // Sample content for stories
 const sampleContent = (
   <div>
-    <p>
-      This accordion contains rich HTML content including headings, paragraphs, and lists.
-    </p>
+    <p>This accordion contains rich HTML content including headings, paragraphs, and lists.</p>
     <ul>
       <li>
         List item with <a href="#">link</a>
@@ -65,6 +63,7 @@ The Accordion component provides an expandable/collapsible container for content
 - Glass morphism effect support
 - Keyboard navigation support
 - Disabled state handling
+- **Compound Component Pattern** (new)
 
 ## Accessibility
 
@@ -83,6 +82,19 @@ The Accordion component provides an expandable/collapsible container for content
 </Accordion>
 \`\`\`
 
+### Compound Component Usage
+
+\`\`\`tsx
+<Accordion>
+  <Accordion.Header>
+    <span>Custom Header Content</span>
+  </Accordion.Header>
+  <Accordion.Body>
+    <p>Content goes here</p>
+  </Accordion.Body>
+</Accordion>
+\`\`\`
+
 ### With Custom Icon
 
 \`\`\`tsx
@@ -268,6 +280,32 @@ export const WithAllProps: Story = {
   },
 };
 
+export const CompoundUsage: Story = {
+  render: args => (
+    <Accordion {...args}>
+      <Accordion.Header>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <strong>Custom Header Layout</strong>
+          <span style={{ fontSize: '0.8em', color: '#666' }}>(with subtitle)</span>
+        </div>
+      </Accordion.Header>
+      <Accordion.Body>
+        <p>
+          This accordion uses the Compound Component pattern (Accordion.Header and Accordion.Body).
+          This allows for complete control over the header layout and content structure.
+        </p>
+      </Accordion.Body>
+    </Accordion>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the Compound Component usage pattern for custom header layouts.',
+      },
+    },
+  },
+};
+
 // ============================================================================
 // VARIANTS & STATES STORIES
 // ============================================================================
@@ -396,28 +434,22 @@ export const ControlledState: Story = {
     title: 'Controlled Accordion',
     children: <p>This accordion is controlled by external state.</p>,
   },
-  render: (args) => {
+  render: args => {
     const [open, setOpen] = React.useState(false);
     return (
       <div>
-        <button 
-          className="c-btn c-btn--primary u-mb-3" 
-          onClick={() => setOpen(prev => !prev)}
-        >
+        <button className="c-btn c-btn--primary u-mb-3" onClick={() => setOpen(prev => !prev)}>
           Toggle Accordion (Controlled)
         </button>
-        <Accordion 
-          {...args} 
-          isOpen={open} 
-          onOpenChange={setOpen}
-        />
+        <Accordion {...args} isOpen={open} onOpenChange={setOpen} />
       </div>
     );
   },
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
+        story:
+          'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
       },
     },
   },
@@ -489,8 +521,14 @@ export const GlassEffect: Story = {
     children: <p>This accordion has a glass morphism effect applied.</p>,
     glass: true,
   },
-  render: (args) => (
-    <div className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center" style={{backgroundImage: 'url(https://images.unsplash.com/photo-1759915995309-404c743bfbf9?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)'}}>
+  render: args => (
+    <div
+      className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center"
+      style={{
+        backgroundImage:
+          'url(https://images.unsplash.com/photo-1759915995309-404c743bfbf9?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+      }}
+    >
       <div className="u-w-full u-max-w-md">
         <Accordion {...args} />
       </div>
@@ -499,7 +537,8 @@ export const GlassEffect: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates an Accordion with glass morphism effect enabled against a gradient background.',
+        story:
+          'This story demonstrates an Accordion with glass morphism effect enabled against a gradient background.',
       },
     },
   },
@@ -516,8 +555,16 @@ export const GlassCustom: Story = {
       mode: 'polar',
     } as GlassProps,
   },
-  render: (args) => (
-    <div className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center" style={{backgroundImage: 'url(https://images.unsplash.com/photo-1754147965582-edcb63324a81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)', backgroundSize: '120%', animation: 'gradient 15s ease infinite'}}>
+  render: args => (
+    <div
+      className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center"
+      style={{
+        backgroundImage:
+          'url(https://images.unsplash.com/photo-1754147965582-edcb63324a81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: '120%',
+        animation: 'gradient 15s ease infinite',
+      }}
+    >
       <style>
         {`
           @keyframes gradient {
@@ -538,7 +585,8 @@ export const GlassCustom: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates an Accordion with custom glass morphism settings against a scenic background image.',
+        story:
+          'This story demonstrates an Accordion with custom glass morphism settings against a scenic background image.',
       },
     },
   },
@@ -567,7 +615,8 @@ export const KeyboardNavigation: Story = {
     title: 'Keyboard Accessible',
     children: (
       <p>
-        This accordion is fully operable via keyboard navigation. Press Tab to focus and Enter/Space to toggle.
+        This accordion is fully operable via keyboard navigation. Press Tab to focus and Enter/Space
+        to toggle.
       </p>
     ),
   },
@@ -578,4 +627,4 @@ export const KeyboardNavigation: Story = {
       },
     },
   },
-};
+};

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

@@ -4,54 +4,74 @@ 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();
-    });
+  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();
+  });
 });