@shohojdhara/atomix 0.4.8 → 0.4.9

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

@@ -0,0 +1,72 @@
+/**
+ * Next.js Component Templates
+ * Optimized for Server Components and App Router
+ */
+
+export const nextTemplates = {
+  /**
+   * Simple Server Component
+   */
+  simple: (name) => `/**
+ * ${name} Component (Server Component)
+ */
+import React from 'react';
+
+export default function ${name}() {
+  return (
+    <div className="${name.toLowerCase()}">
+      <h1>${name} Component</h1>
+    </div>
+  );
+}
+`,
+
+  /**
+   * Client Component
+   */
+  client: (name) => `'use client';
+
+/**
+ * ${name} Component (Client Component)
+ */
+import React, { useState } from 'react';
+
+export default function ${name}() {
+  const [active, setActive] = useState(false);
+
+  return (
+    <div className="${name.toLowerCase()}">
+      <h1>${name} Component</h1>
+      <button onClick={() => setActive(!active)}>
+        Toggle: {active ? 'On' : 'Off'}
+      </button>
+    </div>
+  );
+}
+`,
+
+  /**
+   * Complex Server Component with async data
+   */
+  complex: (name) => `/**
+ * ${name} Component (Server Component with Data)
+ */
+import React from 'react';
+
+async function getData() {
+  // Simulating data fetch
+  return { title: '${name}' };
+}
+
+export default async function ${name}() {
+  const data = await getData();
+
+  return (
+    <div className="${name.toLowerCase()}">
+      <h1>{data.title}</h1>
+      <p>This is a complex Next.js server component.</p>
+    </div>
+  );
+}
+`
+};

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

@@ -146,20 +146,26 @@ export default ${name};`;
  * Simple component template
  */
 export const simpleTemplate = (name) => `import React, { forwardRef } from 'react';
-import type { ${name}Props } from './${name}.types';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import type { ${name}Props } from '../../lib/types/components';
 
 /**
  * ${name} - Simple Presentational Component
  * 
- * A basic component for rendering content with minimal overhead.
+ * @param {${name}Props} props - Component properties
+ * @returns {JSX.Element} The rendered component
  */
 export const ${name} = forwardRef<HTMLDivElement, ${name}Props>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <div ref={ref} className={\`c-${name.toLowerCase()} \${className || ''}\`} {...props}>
+  ({ children, className = '', glass, 'aria-label': ariaLabel, ...props }, ref) => {
+    const componentClass = [\`c-${name.toLowerCase()}\`, className].filter(Boolean).join(' ');
+
+    const content = (
+      <div ref={ref} className={componentClass} aria-label={ariaLabel} {...props}>
         {children}
       </div>
     );
+
+    return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
   }
 );
 
@@ -172,58 +178,38 @@ ${name}.displayName = '${name}';
 export const mediumTemplate = (name) => `import React, { forwardRef, useId, memo } from 'react';
 import { ${name.toUpperCase()} } from '../../lib/constants/components';
 import { use${name} } from '../../lib/composables/use${name}';
-import type { ${name}Props, ${name}State } from '../../lib/types/components';
-
-export interface ${name}Props {
-  /**
-   * Content to be rendered
-   */
-  children?: React.ReactNode;
-  
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  
-  /**
-   * Disabled state
-   */
-  disabled?: boolean;
-
-  /**
-   * Inline styles
-   */
-  style?: React.CSSProperties;
-  
-  /**
-   * Other component-specific props would go here
-   */
-}
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import type { ${name}Props } from '../../lib/types/components';
 
-export interface ${name}State {
-  // Define state interface for the component
-}
+/**
+ * ${name} - Medium Presentational Component
+ * 
+ * @param {${name}Props} props - Component properties
+ * @returns {JSX.Element} The rendered component
+ */
+export const ${name} = memo(
+  forwardRef<HTMLDivElement, ${name}Props>(
+    ({ children, className = '', disabled = false, glass, style, 'aria-label': ariaLabel, ...props }, ref) => {
+      const instanceId = useId();
+      const { generateClassNames } = use${name}({ disabled });
+      
+      const content = (
+        <div
+          ref={ref}
+          className={generateClassNames(className)}
+          style={style}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+          {...props}
+        >
+          {children}
+        </div>
+      );
 
-export const ${name}: React.FC<${name}Props> = memo(({
-  children,
-  className = '',
-  disabled = false,
-  style,
-  ...props
-}) => {
-  const instanceId = useId();
-  const { generateClassNames } = use${name}({ disabled });
-  
-  return (
-    <div
-      className={generateClassNames(className)}
-      style={style}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
+      return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
+    }
+  )
+);
 
 ${name}.displayName = '${name}';
 
@@ -236,80 +222,38 @@ export default ${name};
 export const complexTemplate = (name) => `import React, { forwardRef, useId, memo } from 'react';
 import { ${name.toUpperCase()} } from '../../lib/constants/components';
 import { use${name} } from '../../lib/composables/use${name}';
-import type { ${name}Props, ${name}State } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
-import type { AtomixGlassProps } from '../AtomixGlass/AtomixGlass';
-
-export interface ${name}Props {
-  /**
-   * Content to be rendered
-   */
-  children?: React.ReactNode;
-  
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  
-  /**
-   * Disabled state
-   */
-  disabled?: boolean;
-
-  /**
-   * Glass effect options
-   */
-  glass?: boolean | AtomixGlassProps;
-
-  /**
-   * Inline styles
-   */
-  style?: React.CSSProperties;
-  
-  /**
-   * Callback when component state changes
-   */
-  onStateChange?: (state: ${name}State) => void;
-}
-
-export interface ${name}State {
-  // Define state interface for the component
-}
-
-export const ${name}: React.FC<${name}Props> = memo(({
-  children,
-  className = '',
-  disabled = false,
-  glass,
-  style,
-  onStateChange,
-  ...props
-}) => {
-  const instanceId = useId();
-  const { generateClassNames } = use${name}({ disabled, onStateChange });
-  
-  const componentContent = (
-    <div
-      className={generateClassNames(className)}
-      style={style}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-
-  if (glass) {
-    const defaultGlassProps = {
-      // Default glass settings specific to this component
-    };
-
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+import type { ${name}Props, ${name}State } from '../../lib/types/components';
 
-    return <AtomixGlass {...glassProps}>{componentContent}</AtomixGlass>;
-  }
+/**
+ * ${name} - Complex Functional Component
+ * 
+ * @param {${name}Props} props - Component properties
+ * @returns {JSX.Element} The rendered component
+ */
+export const ${name} = memo(
+  forwardRef<HTMLDivElement, ${name}Props>(
+    ({ children, className = '', disabled = false, glass, style, onStateChange, 'aria-label': ariaLabel, ...props }, ref) => {
+      const instanceId = useId();
+      const { generateClassNames } = use${name}({ disabled, onStateChange });
+      
+      const content = (
+        <div
+          ref={ref}
+          className={generateClassNames(className)}
+          style={style}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+          {...props}
+        >
+          {children}
+        </div>
+      );
 
-  return componentContent;
-});
+      return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
+    }
+  )
+);
 
 ${name}.displayName = '${name}';
 

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

@@ -10,72 +10,72 @@ 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;
+@use '../01-settings/settings.config' as *;
 
 .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);
+  --#{$prefix}${name.toLowerCase()}-padding: var(--atomix-spacing-4);
+  --#{$prefix}${name.toLowerCase()}-margin: var(--atomix-spacing-2);
+  --#{$prefix}${name.toLowerCase()}-border: var(--atomix-border-default);
+  --#{$prefix}${name.toLowerCase()}-border-radius: var(--atomix-border-radius-md);
+  --#{$prefix}${name.toLowerCase()}-bg: var(--atomix-bg-surface);
+  --#{$prefix}${name.toLowerCase()}-color: var(--atomix-text-primary);
+  --#{$prefix}${name.toLowerCase()}-font-size: var(--atomix-font-size-base);
+  --#{$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);
+  --#{$prefix}${name.toLowerCase()}-hover-bg: var(--atomix-bg-surface-hover);
+  --#{$prefix}${name.toLowerCase()}-focus-bg: var(--atomix-bg-surface-focus);
+  --#{$prefix}${name.toLowerCase()}-disabled-bg: var(--atomix-bg-surface-disabled);
+  --#{$prefix}${name.toLowerCase()}-disabled-color: var(--atomix-text-disabled);
+  --#{$prefix}${name.toLowerCase()}-disabled-opacity: var(--atomix-opacity-disabled);
+
+  padding: var(--#{$prefix}${name.toLowerCase()}-padding);
+  margin: var(--#{$prefix}${name.toLowerCase()}-margin);
+  border: var(--#{$prefix}${name.toLowerCase()}-border);
+  border-radius: var(--#{$prefix}${name.toLowerCase()}-border-radius);
+  background: var(--#{$prefix}${name.toLowerCase()}-bg);
+  color: var(--#{$prefix}${name.toLowerCase()}-color);
+  font-size: var(--#{$prefix}${name.toLowerCase()}-font-size);
+  transition: var(--#{$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);
+    --#{$prefix}${name.toLowerCase()}-padding: var(--atomix-spacing-2);
+    --#{$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);
+    --#{$prefix}${name.toLowerCase()}-padding: var(--atomix-spacing-6);
+    --#{$prefix}${name.toLowerCase()}-font-size: var(--atomix-font-size-lg);
   }
 
   // Interactive states
   &:hover {
-    background: var(--#{config.$prefix}${name.toLowerCase()}-hover-bg);
+    background: var(--#{$prefix}${name.toLowerCase()}-hover-bg);
     cursor: pointer;
   }
 
   &:focus {
-    background: var(--#{config.$prefix}${name.toLowerCase()}-focus-bg);
+    background: var(--#{$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);
+    background: var(--#{$prefix}${name.toLowerCase()}-disabled-bg);
+    color: var(--#{$prefix}${name.toLowerCase()}-disabled-color);
+    opacity: var(--#{$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));
+    background: var(--#{$prefix}${name.toLowerCase()}-glass-bg, rgba(255, 255, 255, 0.1));
+    backdrop-filter: var(--#{$prefix}${name.toLowerCase()}-glass-backdrop, blur(10px));
+    border-color: var(--#{$prefix}${name.toLowerCase()}-glass-border, rgba(255, 255, 255, 0.2));
   }
 
   // Data states for JavaScript interaction

package/scripts/cli/templates/stories/storybook-story.ts

@@ -0,0 +1,241 @@
+/**
+ * Storybook Story Templates
+ * Templates for generating Storybook stories with documentation
+ */
+
+/**
+ * Generates a comprehensive Storybook story with full documentation
+ */
+export const enhancedStoryTemplate = (name: string): string => `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.',
+      },
+    },
+  },
+};
+`;
+
+/**
+ * Generates a basic Storybook story (minimal setup)
+ */
+export const basicStoryTemplate = (name: string): string => `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,
+  },
+};
+`;
+
+/**
+ * All Storybook story templates
+ */
+export const storybookStoryTemplates = {
+  story: basicStoryTemplate,
+  storyEnhanced: enhancedStoryTemplate,
+};
+
+/**
+ * Type for Storybook story templates object
+ */
+export type StorybookStoryTemplates = typeof storybookStoryTemplates;