@shohojdhara/atomix 0.5.0 → 0.5.2

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

@@ -3,22 +3,40 @@
  * Optimized for Server Components and App Router
  */
 
+/**
+ * Simple Server Component — valid displayName, Props, JSDoc, a11y; no forwardRef (server).
+ */
 export const nextTemplates = {
-  /**
-   * Simple Server Component
-   */
-  simple: (name) => `/**
- * ${name} Component (Server Component)
+  simple: (name) => `import React from 'react';
+
+export interface ${name}Props {
+  /** Optional heading override */
+  title?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * ${name} — presentational server component (Atomix scaffold).
+ *
+ * @param props - ${name} properties
  */
-import React from 'react';
+export default function ${name}(props: ${name}Props) {
+  const { title = '${name}', children } = props;
 
-export default function ${name}() {
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>${name} Component</h1>
-    </div>
+    <section
+      className={\`c-${name.toLowerCase()}\`}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1 className={\`c-${name.toLowerCase()}__title\`}>{title}</h1>
+      {children}
+    </section>
   );
 }
+
+${name}.displayName = '${name}';
 `,
 
   /**
@@ -26,47 +44,80 @@ export default function ${name}() {
    */
   client: (name) => `'use client';
 
+import React, { forwardRef, useState } from 'react';
+
+export interface ${name}Props {
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
 /**
- * ${name} Component (Client Component)
+ * ${name} — client component with local state (Atomix scaffold).
  */
-import React, { useState } from 'react';
-
-export default function ${name}() {
+const ${name}Inner = forwardRef<HTMLDivElement, ${name}Props>(function ${name}Inner(
+  { title = '${name}', children, className = '' },
+  ref
+) {
   const [active, setActive] = useState(false);
 
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>${name} Component</h1>
-      <button onClick={() => setActive(!active)}>
+    <section
+      ref={ref}
+      className={[\`c-${name.toLowerCase()}\`, className].filter(Boolean).join(' ')}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1 className={\`c-${name.toLowerCase()}__title\`}>{title}</h1>
+      {children}
+      <button type="button" onClick={() => setActive(!active)} aria-pressed={active}>
         Toggle: {active ? 'On' : 'Off'}
       </button>
-    </div>
+    </section>
   );
-}
+});
+
+${name}Inner.displayName = '${name}';
+
+export default ${name}Inner;
 `,
 
   /**
    * Complex Server Component with async data
    */
-  complex: (name) => `/**
- * ${name} Component (Server Component with Data)
- */
-import React from 'react';
+  complex: (name) => `import React from 'react';
 
-async function getData() {
-  // Simulating data fetch
+export interface ${name}Props {
+  title?: string;
+}
+
+async function getData(): Promise<{ title: string }> {
   return { title: '${name}' };
 }
 
-export default async function ${name}() {
+/**
+ * ${name} — async server component (Atomix scaffold).
+ */
+async function ${name}(props: ${name}Props) {
   const data = await getData();
+  const title = props.title ?? data.title;
 
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>{data.title}</h1>
-      <p>This is a complex Next.js server component.</p>
-    </div>
+    <section
+      className={\`c-${name.toLowerCase()}\`}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1>{title}</h1>
+      <p>This is a complex Next.js server component scaffold.</p>
+    </section>
   );
 }
+
+${name}.displayName = '${name}';
+
+export default ${name};
 `
 };

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

@@ -5,8 +5,13 @@
 
 /**
  * Basic Storybook story template
+ * @param {string} name - Component name
+ * @param {{ storybookCssImport?: string }} [opts]
  */
-export const basicStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+export const basicStoryTemplate = (name, opts = {}) => {
+  const cssImport = opts.storybookCssImport || '@shohojdhara/atomix/scss';
+  return `import '${cssImport}';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ${name} } from './${name}';
 
 const meta: Meta<typeof ${name}> = {
@@ -66,11 +71,15 @@ export const Glass: Story = {
   },
 };
 `;
+};
 
 /**
  * Enhanced Storybook story template with detailed documentation
  */
-export const enhancedStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+export const enhancedStoryTemplate = (name, opts = {}) => {
+  const cssImport = opts.storybookCssImport || '@shohojdhara/atomix/scss';
+  return `import '${cssImport}';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ${name} } from './${name}';
 
 const meta: Meta<typeof ${name}> = {
@@ -226,6 +235,7 @@ export const CustomContent: Story = {
   },
 };
 `;
+};
 
 /**
  * Storybook templates object

package/scripts/cli/utils/detector.js

@@ -7,15 +7,52 @@ import { readFile } from 'fs/promises';
 import { join } from 'path';
 import { existsSync } from 'fs';
 
+const NEXT_CONFIG_FILES = [
+  'next.config.js',
+  'next.config.mjs',
+  'next.config.ts',
+  'next.config.cjs'
+];
+
+const VITE_CONFIG_FILES = [
+  'vite.config.js',
+  'vite.config.mjs',
+  'vite.config.ts',
+  'vite.config.cjs'
+];
+
+function hasFileInRoot(projectRoot, filenames) {
+  return filenames.some((name) => existsSync(join(projectRoot, name)));
+}
+
+function hasNextSignals(projectRoot, allDeps) {
+  if (allDeps.next) return true;
+  return hasFileInRoot(projectRoot, NEXT_CONFIG_FILES);
+}
+
+function hasViteSignals(projectRoot, allDeps) {
+  if (allDeps.vite) return true;
+  return hasFileInRoot(projectRoot, VITE_CONFIG_FILES);
+}
+
 /**
  * Detect the framework from package.json and project structure
  * @param {string} projectRoot - The root directory of the project
+ * @param {{ framework?: string }} [options] - Optional override: 'react' | 'next' | 'vanilla'
  * @returns {Promise<'react' | 'next' | 'vanilla'>}
  */
-export async function detectFramework(projectRoot = process.cwd()) {
+export async function detectFramework(projectRoot = process.cwd(), options = {}) {
+  const override = options.framework;
+  if (override) {
+    const o = String(override).toLowerCase();
+    if (o === 'react' || o === 'next' || o === 'vanilla') {
+      return o;
+    }
+  }
+
   try {
     const packageJsonPath = join(projectRoot, 'package.json');
-    
+
     if (!existsSync(packageJsonPath)) {
       return 'vanilla';
     }
@@ -26,17 +63,18 @@ export async function detectFramework(projectRoot = process.cwd()) {
       ...(packageJson.devDependencies || {})
     };
 
-    if (allDeps.next) {
+    if (hasNextSignals(projectRoot, allDeps)) {
       return 'next';
     }
 
-    if (allDeps.react) {
+    const hasReact = Boolean(allDeps.react);
+
+    if (hasViteSignals(projectRoot, allDeps) && hasReact) {
       return 'react';
     }
 
-    // Check for framework specific files
-    if (existsSync(join(projectRoot, 'next.config.js')) || existsSync(join(projectRoot, 'next.config.mjs'))) {
-      return 'next';
+    if (hasReact) {
+      return 'react';
     }
 
     return 'vanilla';

package/scripts/cli/utils/diagnostics.js

@@ -9,6 +9,7 @@ import { join } from 'path';
 import { readFile } from 'fs/promises';
 import { logger } from './logger.js';
 import { configLoader } from '../internal/config-loader.js';
+import { templateEngine } from '../internal/template-engine.js';
 
 /**
  * Check Node.js and NPM versions
@@ -256,6 +257,83 @@ export async function checkTokens(projectRoot = process.cwd()) {
   return results;
 }
 
+/**
+ * Generator: writable output path, optional Storybook, template registry
+ */
+export async function checkGenerator(projectRoot = process.cwd()) {
+  const results = [];
+
+  const config = await configLoader.load(projectRoot);
+  const gen = config.generator || {};
+  const out = gen.outputPath || './src/components';
+  const outPath = join(projectRoot, out);
+
+  if (existsSync(outPath)) {
+    try {
+      accessSync(outPath, constants.W_OK);
+      results.push({
+        name: 'Generator: output path',
+        status: 'pass',
+        message: `Writable: ${out}`,
+        suggestion: null
+      });
+    } catch {
+      results.push({
+        name: 'Generator: output path',
+        status: 'fail',
+        message: `Not writable: ${out}`,
+        suggestion: 'Fix permissions or set generator.outputPath in atomix.config.'
+      });
+    }
+  } else {
+    results.push({
+      name: 'Generator: output path',
+      status: 'warn',
+      message: `Missing (will be created): ${out}`,
+      suggestion: 'Create the directory or run generate to scaffold components.'
+    });
+  }
+
+  const storybookHints = ['@storybook/react', '@storybook/react-vite', '@storybook/nextjs', 'storybook'];
+  let hasStorybook = false;
+  const pkgPath = join(projectRoot, 'package.json');
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
+      const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+      hasStorybook = storybookHints.some((d) => Boolean(deps[d]));
+    } catch {
+      /* ignore */
+    }
+  }
+
+  results.push({
+    name: 'Storybook (optional)',
+    status: hasStorybook ? 'pass' : 'warn',
+    message: hasStorybook ? 'Storybook-related dependency found' : 'No Storybook in package.json',
+    suggestion: hasStorybook ? null : 'Add Storybook if you rely on generated .stories.tsx files.'
+  });
+
+  try {
+    const frameworks = templateEngine.getSupportedFrameworks();
+    results.push({
+      name: 'Generator: template registry',
+      status: frameworks.length ? 'pass' : 'fail',
+      message: frameworks.length ? `Frameworks: ${frameworks.join(', ')}` : 'Empty registry',
+      suggestion: frameworks.length ? null : 'CLI template registry failed to load.'
+    });
+  } catch (error) {
+    results.push({
+      name: 'Generator: template registry',
+      status: 'fail',
+      message: error.message,
+      suggestion: 'Reinstall the Atomix package or check scripts/cli installation.'
+    });
+  }
+
+  return results;
+}
+
 /**
  * Check directory permissions
  */

package/scripts/cli/utils/telemetry.js

@@ -14,6 +14,16 @@ class Telemetry {
     this.logs = [];
     this.startTime = null;
     this.currentCommand = null;
+    /** @type {Record<string, unknown>} */
+    this.pendingExtra = {};
+  }
+
+  /**
+   * Merge fields into the next stop() log entry (e.g. generate framework).
+   * @param {Record<string, unknown>} extra
+   */
+  recordExtra(extra) {
+    this.pendingExtra = { ...this.pendingExtra, ...extra };
   }
 
   /**
@@ -43,9 +53,12 @@ class Telemetry {
       duration: parseFloat(duration.toFixed(2)),
       timestamp: new Date().toISOString(),
       success,
+      ...this.pendingExtra,
       ...extra
     };
 
+    this.pendingExtra = {};
+
     // Anonymize if needed
     if (config.anonymize !== false) {
       delete logEntry.path;

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

@@ -263,6 +263,10 @@ export const WithAllProps: Story = {
 };
 
 export const CompoundUsage: Story = {
+  args: {
+    title: 'Compound Accordion Example',
+    children: <p>Compound pattern content</p>
+  },
   render: args => (
     <Accordion {...args}>
       <Accordion.Header>