@chemx/starter-kit 26.9.16-668 → 26.9.17-309

package/cli/generator-templates.js

@@ -1,480 +1,28 @@
-export const toPascalCase = (str) =>
-  str
-    .replace(/^(?:[a-z]|use|v)-/, '')
-    .split('-')
-    .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
-    .join('');
-
-export const toCamelCase = (str) => {
-  const p = toPascalCase(str);
-  if (str.startsWith('use-') || str.startsWith('use')) {
-    return `use${p}`;
-  }
-  return p.charAt(0).toLowerCase() + p.slice(1);
-};
-
-export const buildReactComponent = (name, pascalName, options = {}) => {
-  const atomsPackage = options.atomsPackage || null;
-  const atomImport = atomsPackage ? `import { AtomButton } from '${atomsPackage}';\n` : '';
-  const actionButton = atomsPackage
-    ? `        <AtomButton
-          disabled={!canProceed}
-          onClick={handleAction}
-        >
-          {variant}
-        </AtomButton>`
-    : `        <button
-          type="button"
-          className="${name}__action"
-          disabled={!canProceed}
-          onClick={handleAction}
-        >
-          {variant}
-        </button>`;
-
-  return `import React from 'react';
-${atomImport}import type { ${pascalName}Props } from './types';
-import { use${pascalName}Controller } from './${name}.controller';
-
-export const ${pascalName}: React.FC<${pascalName}Props> = ({
-  title,
-  subtitle,
-  variant = 'standard',
-  onAction
-}) => {
-  const { state, canProceed, descriptor, handleAction } = use${pascalName}Controller({
-    initialState: { status: 'idle' },
-    onAction
-  });
-
-  return (
-    <div className="${name}">
-      <div className="${name}__header">
-        <h3 className="${name}__title">{title}</h3>
-        {subtitle && <p className="${name}__subtitle">{subtitle}</p>}
-        <span className={descriptor.className}>{descriptor.text}</span>
-      </div>
-      <div className="${name}__body">
-${actionButton}
-      </div>
-    </div>
-  );
-};
-
-export default ${pascalName};
-`;
-};
-
-export const buildVueComponent = (name, pascalName, options = {}) => {
-  const atomsPackage = options.atomsPackage || null;
-  const actionButton = atomsPackage
-    ? `      <a-button
-        :disabled="!canProceed"
-        @click="handleAction"
-      >
-        {{ variant }}
-      </a-button>`
-    : `      <button
-        type="button"
-        class="${name}__action"
-        :disabled="!canProceed"
-        @click="handleAction"
-      >
-        {{ variant }}
-      </button>`;
-
-  return `<script setup lang="ts">
-import type { ${pascalName}Props, ${pascalName}Emits } from './types';
-import { use${pascalName}Controller } from './${name}.controller';
-
-const props = withDefaults(defineProps<${pascalName}Props>(), {
-  variant: 'standard'
-});
-
-const emit = defineEmits<${pascalName}Emits>();
-
-const { state, canProceed, descriptor, handleAction } = use${pascalName}Controller({
-  initialState: { status: 'idle' },
-  onAction: () => emit('action', props.title)
-});
-</script>
-
-<template>
-  <div class="${name}">
-    <div class="${name}__header">
-      <h3 class="${name}__title">{{ title }}</h3>
-      <p v-if="subtitle" class="${name}__subtitle">{{ subtitle }}</p>
-      <span :class="descriptor.className">{{ descriptor.text }}</span>
-    </div>
-    <div class="${name}__body">
-${actionButton}
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@use './_${name}.scss';
-</style>
-`;
-};
-
-export const buildSvelteComponent = (name, pascalName, options = {}) => {
-  const atomsPackage = options.atomsPackage || null;
-  const atomImport = atomsPackage ? `import { AtomButton } from '${atomsPackage}';\n` : '';
-  const actionButton = atomsPackage
-    ? `    <AtomButton
-      disabled={!controller.canProceed}
-      onclick={controller.handleAction}
-    >
-      {variant}
-    </AtomButton>`
-    : `    <button
-      type="button"
-      class="${name}__action"
-      disabled={!controller.canProceed}
-      onclick={controller.handleAction}
-    >
-      {variant}
-    </button>`;
-
-  return `<script lang="ts">
-import type { ${pascalName}Props } from './types';
-${atomImport}import { create${pascalName}Controller } from './${name}.controller';
-
-const {
-  title,
-  subtitle = '',
-  variant = 'standard',
-  onAction
-}: ${pascalName}Props = $props();
-
-const controller = create${pascalName}Controller({
-  initialState: { status: 'idle' },
-  onAction
-});
-</script>
-
-<div class="${name}">
-  <div class="${name}__header">
-    <h3 class="${name}__title">{title}</h3>
-    {#if subtitle}
-      <p class="${name}__subtitle">{subtitle}</p>
-    {/if}
-    <span class={controller.descriptor.className}>{controller.descriptor.text}</span>
-  </div>
-  <div class="${name}__body">
-${actionButton}
-  </div>
-</div>
-
-<style lang="scss">
-@use './_${name}.scss';
-</style>
-`;
-};
-
-export const buildController = (name, pascalName) => `import { useState, useMemo } from 'react';
-import type { ${pascalName}State, ${pascalName}Descriptor } from './types';
-
-interface ControllerOptions {
-  readonly initialState?: ${pascalName}State;
-  readonly onAction?: () => void;
-}
-
-export const use${pascalName}Controller = (options: ControllerOptions = {}) => {
-  const [state, setState] = useState<${pascalName}State>(
-    options.initialState || { status: 'idle' }
-  );
-
-  const isIdle = state.status === 'idle';
-  const isPending = state.status === 'loading';
-  const canProceed = isIdle && !isPending;
-
-  const descriptor: ${pascalName}Descriptor = useMemo(() => {
-    if (state.status === 'loading') {
-      return { text: 'Loading...', className: '${name}__badge ${name}__badge--pending' };
-    }
-    if (state.status === 'active') {
-      return { text: 'Active', className: '${name}__badge ${name}__badge--active' };
-    }
-    return { text: 'Ready', className: '${name}__badge ${name}__badge--ready' };
-  }, [state.status]);
-
-  const handleAction = () => {
-    if (!canProceed) return;
-    setState({ status: 'active', activeId: 'item-1' });
-    options.onAction?.();
-  };
-
-  return { state, canProceed, descriptor, handleAction };
-};
-`;
-
-export const buildPropsType = (name, pascalName) => `export interface ${pascalName}Props {
-  readonly title: string;
-  readonly subtitle?: string;
-  readonly variant?: 'standard' | 'highlight';
-  readonly onAction?: () => void;
-}
-
-export interface ${pascalName}Emits {
-  (e: 'action', title: string): void;
-}
-`;
-
-export const buildStateType = (name, pascalName) => `export type ${pascalName}State =
-  | { readonly status: 'idle' }
-  | { readonly status: 'loading'; readonly progress: number }
-  | { readonly status: 'active'; readonly activeId: string }
-  | { readonly status: 'fault'; readonly faultMessage: string };
-
-export interface ${pascalName}Descriptor {
-  readonly text: string;
-  readonly className: string;
-}
-`;
-
-export const buildTypesIndex = (fileNames = ['props', 'state']) =>
-  fileNames.map((f) => `export type * from './${f}.d.ts';`).join('\n') + '\n';
-
-export const buildTypes = (name, pascalName) => `${buildStateType(name, pascalName)}
-${buildPropsType(name, pascalName)}`;
-
-export const buildComponentSpec = (name, pascalName, hasController = true) => {
-  if (hasController) {
-    return `import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import { use${pascalName}Controller } from './${name}.controller.ts';
-
-describe('${pascalName} Capsule Controller', () => {
-  it('exports pure controller hook', () => {
-    assert.equal(typeof use${pascalName}Controller, 'function');
-  });
-});
-`;
-  }
-
-  return `import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-
-describe('${pascalName} Atom Foundation', () => {
-  it('defines foundational UI atom contract', () => {
-    assert.ok(true);
-  });
-});
-`;
-};
-
-export const buildScss = (name) => `.${name} {
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  background: rgba(19, 30, 58, 0.7);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(98, 201, 255, 0.15);
-  border-radius: 8px;
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__title {
-    margin: 0;
-    font-size: 16px;
-    color: #ffffff;
-  }
-
-  &__subtitle {
-    margin: 4px 0 0;
-    font-size: 12px;
-    color: #94a3b8;
-  }
-
-  &__badge {
-    font-size: 11px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    background: #0b1329;
-
-    &--ready { color: #62c9ff; }
-    &--active { color: #4ade80; }
-    &--pending { color: #facc15; }
-  }
-
-  &__body {
-    margin-top: 14px;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &__action {
-    padding: 6px 14px;
-    border-radius: 4px;
-    background: #1e293b;
-    border: 1px solid #334155;
-    color: #ffffff;
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-      background: #334155;
-      border-color: #62c9ff;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-`;
-
-export const buildIndex = (name, pascalName, ext) => {
-  const compExport = ext === 'vue' || ext === 'svelte'
-    ? `export { default as ${pascalName} } from './${name}.${ext}';`
-    : `export { ${pascalName} } from './${name}';`;
-
-  return `${compExport}
-export { use${pascalName}Controller } from './${name}.controller';
-export type * from './types';
-`;
-};
-
-export const buildHook = (name, camelName, pascalName) => `import { useState, useCallback, useEffect } from 'react';
-import type { ${pascalName}HookOptions, ${pascalName}HookReturn } from './types';
-
-export const ${camelName} = (options: ${pascalName}HookOptions = {}): ${pascalName}HookReturn => {
-  const [data, setData] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const execute = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      setData('ready');
-      options.onSuccess?.();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      setError(message);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [options]);
-
-  useEffect(() => {
-    if (options.immediate) {
-      execute();
-    }
-  }, [options.immediate, execute]);
-
-  return { data, isLoading, error, execute };
-};
-`;
-
-export const buildHookOptionsType = (pascalName) => `export interface ${pascalName}HookOptions {
-  readonly immediate?: boolean;
-  readonly onSuccess?: () => void;
-}
-`;
-
-export const buildHookReturnType = (pascalName) => `export interface ${pascalName}HookReturn {
-  readonly data: string | null;
-  readonly isLoading: boolean;
-  readonly error: string | null;
-  readonly execute: () => Promise<void>;
-}
-`;
-
-export const buildHookIndex = (name, camelName) => `export { ${camelName} } from './${name}';
-export type * from './types';
-`;
-
-export const buildHookSpec = (name, camelName) => `import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import { ${camelName} } from './${name}.ts';
-
-describe('${camelName} Hook Composable', () => {
-  it('exports pure hook function', () => {
-    assert.equal(typeof ${camelName}, 'function');
-  });
-});
-`;
-
-export const buildReactView = (name, pascalName) => `import React from 'react';
-import type { ${pascalName}ViewParams } from './types';
-
-export const ${pascalName}View: React.FC<${pascalName}ViewParams> = ({
-  HeaderMolecule,
-  MainOrganism,
-  FooterMolecule
-}) => (
-  <main className="${name}">
-    {HeaderMolecule}
-    {MainOrganism}
-    {FooterMolecule}
-  </main>
-);
-
-export default ${pascalName}View;
-`;
-
-export const buildVueView = (name, pascalName) => `<script setup lang="ts">
-import type { ${pascalName}ViewParams } from './types';
-
-defineProps<${pascalName}ViewParams>();
-</script>
-
-<template>
-  <main class="${name}">
-    <component :is="HeaderMolecule" />
-    <component :is="MainOrganism" />
-    <component :is="FooterMolecule" />
-  </main>
-</template>
-`;
-
-export const buildSvelteView = (name, pascalName) => `<script lang="ts">
-import type { ${pascalName}ViewParams } from './types';
-
-const {
-  HeaderMolecule,
-  MainOrganism,
-  FooterMolecule
-}: ${pascalName}ViewParams = $props();
-</script>
-
-<main class="${name}">
-  {@render HeaderMolecule?.()}
-  {@render MainOrganism?.()}
-  {@render FooterMolecule?.()}
-</main>
-`;
-
-export const buildViewParamsType = (pascalName) => `export interface ${pascalName}ViewParams {
-  readonly HeaderMolecule?: unknown;
-  readonly MainOrganism?: unknown;
-  readonly FooterMolecule?: unknown;
-}
-`;
-
-export const buildViewIndex = (name, pascalName, ext) => {
-  const compExport = ext === 'vue' || ext === 'svelte'
-    ? `export { default as ${pascalName}View } from './${name}.${ext}';`
-    : `export { ${pascalName}View } from './${name}';`;
-
-  return `${compExport}
-export type * from './types';
-`;
-};
-
-export const buildViewSpec = (name, pascalName) => `import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-
-describe('${pascalName}View Table of Contents', () => {
-  it('defines pure declarative blueprint layout', () => {
-    assert.ok(true);
-  });
-});
-`;
+export { toPascalCase, toCamelCase } from './generator-templates/naming.js';
+export { buildReactComponent } from './generator-templates/react.js';
+export { buildVueComponent } from './generator-templates/vue.js';
+export { buildSvelteComponent } from './generator-templates/svelte.js';
+export { buildController } from './generator-templates/controller.js';
+export { buildComponentSpec, buildIndex } from './generator-templates/specs.js';
+export {
+  buildPropsType,
+  buildStateType,
+  buildTypesIndex,
+  buildTypes
+} from './generator-templates/types.js';
+export { buildScss } from './generator-templates/styles.js';
+export {
+  buildHook,
+  buildHookOptionsType,
+  buildHookReturnType,
+  buildHookIndex,
+  buildHookSpec
+} from './generator-templates/hooks.js';
+export {
+  buildReactView,
+  buildVueView,
+  buildSvelteView,
+  buildViewParamsType,
+  buildViewIndex,
+  buildViewSpec
+} from './generator-templates/views.js';

package/cli/generator-templates.spec.js

@@ -0,0 +1,108 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  toPascalCase,
+  toCamelCase,
+  buildReactComponent,
+  buildVueComponent,
+  buildSvelteComponent,
+  buildController,
+  buildPropsType,
+  buildStateType,
+  buildTypesIndex,
+  buildTypes,
+  buildComponentSpec,
+  buildIndex,
+  buildScss,
+  buildHook,
+  buildHookOptionsType,
+  buildHookReturnType,
+  buildHookIndex,
+  buildHookSpec,
+  buildReactView,
+  buildVueView,
+  buildSvelteView,
+  buildViewParamsType,
+  buildViewIndex,
+  buildViewSpec
+} from './generator-templates.js';
+
+test('naming: toPascalCase and toCamelCase handle prefixes and hyphens', () => {
+  assert.equal(toPascalCase('m-user-avatar'), 'UserAvatar');
+  assert.equal(toPascalCase('use-spark-feed'), 'SparkFeed');
+  assert.equal(toPascalCase('v-dashboard-overview'), 'DashboardOverview');
+  assert.equal(toCamelCase('use-spark-feed'), 'useSparkFeed');
+  assert.equal(toCamelCase('m-spark-kpi'), 'sparkKpi');
+});
+
+test('components: buildReactComponent handles options', () => {
+  const standard = buildReactComponent('m-card', 'Card');
+  assert.ok(standard.includes('export const Card: React.FC<CardProps>'));
+  assert.ok(standard.includes('useCardController'));
+
+  const withAtoms = buildReactComponent('m-card', 'Card', { atomsPackage: '@chemx/x-atoms' });
+  assert.ok(withAtoms.includes("import { AtomButton } from '@chemx/x-atoms';"));
+
+  const lean = buildReactComponent('a-pill', 'Pill', { hasController: false });
+  assert.ok(!lean.includes('usePillController'));
+  assert.ok(lean.includes('const canProceed = true;'));
+});
+
+test('components: buildVueComponent and buildSvelteComponent handle options', () => {
+  const vue = buildVueComponent('m-card', 'Card', { atomsPackage: '@chemx/x-atoms' });
+  assert.ok(vue.includes('<a-button'));
+
+  const svelte = buildSvelteComponent('m-card', 'Card', { atomsPackage: '@chemx/x-atoms' });
+  assert.ok(svelte.includes('<AtomButton'));
+});
+
+test('controller: buildController generates valid react hook code', () => {
+  const code = buildController('m-card', 'Card');
+  assert.ok(code.includes('export const useCardController ='));
+  assert.ok(code.includes('useState<CardState>'));
+});
+
+test('types: buildPropsType, buildStateType, and buildTypes produce contract definitions', () => {
+  const types = buildTypes('m-card', 'Card');
+  assert.ok(types.includes('CardState'));
+  assert.ok(types.includes('CardProps'));
+  assert.ok(buildTypesIndex().includes("export type * from './props.d.ts';"));
+});
+
+test('specs and styles: buildComponentSpec, buildIndex, and buildScss generate expected assets', () => {
+  const specWithCtrl = buildComponentSpec('m-card', 'Card', true);
+  assert.ok(specWithCtrl.includes('useCardController'));
+  const specLean = buildComponentSpec('a-pill', 'Pill', false);
+  assert.ok(specLean.includes('Pill Atom Foundation'));
+
+  const idxVue = buildIndex('m-card', 'Card', 'vue');
+  assert.ok(idxVue.includes("export { default as Card } from './m-card.vue';"));
+
+  const scss = buildScss('m-card');
+  assert.ok(scss.includes('.m-card {'));
+});
+
+test('hooks: buildHook and related generators produce full composable suite', () => {
+  const hook = buildHook('use-feed', 'useFeed', 'Feed');
+  assert.ok(hook.includes('export const useFeed ='));
+  assert.ok(buildHookOptionsType('Feed').includes('FeedHookOptions'));
+  assert.ok(buildHookReturnType('Feed').includes('FeedHookReturn'));
+  assert.ok(buildHookIndex('use-feed', 'useFeed').includes("export { useFeed } from './use-feed';"));
+  assert.ok(buildHookSpec('use-feed', 'useFeed').includes("describe('useFeed Hook Composable'"));
+});
+
+test('views: buildReactView, buildVueView, buildSvelteView, and view helpers generate TOC templates', () => {
+  const reactView = buildReactView('v-home', 'Home');
+  assert.ok(reactView.includes('export const HomeView: React.FC<HomeViewParams>'));
+  assert.ok(reactView.includes('<main className="v-home">'));
+
+  const vueView = buildVueView('v-home', 'Home');
+  assert.ok(vueView.includes('<main class="v-home">'));
+
+  const svelteView = buildSvelteView('v-home', 'Home');
+  assert.ok(svelteView.includes('<main class="v-home">'));
+
+  assert.ok(buildViewParamsType('Home').includes('HomeViewParams'));
+  assert.ok(buildViewIndex('v-home', 'Home', 'tsx').includes("export { HomeView } from './v-home';"));
+  assert.ok(buildViewSpec('v-home', 'Home').includes("describe('HomeView Table of Contents'"));
+});

package/cli/generator.js

@@ -151,10 +151,10 @@ export const createCapsuleFiles = ({
     const specFile = `${capsuleName}.spec.ts`;
     const hasController = !isLean && selectedTier.tier !== 'atom';
     const installedFamily = detectInstalledFamily(cwd);
-    const templateOpts = { atomsPackage: installedFamily.atomsPackage };
+    const templateOpts = { atomsPackage: installedFamily.atomsPackage, hasController };
 
     fs.writeFileSync(path.join(targetDir, compFile), selectedFramework.compBuilder(capsuleName, pascalName, templateOpts), 'utf-8');
-    fs.writeFileSync(path.join(targetDir, 'index.ts'), buildIndex(capsuleName, pascalName, selectedFramework.ext), 'utf-8');
+    fs.writeFileSync(path.join(targetDir, 'index.ts'), buildIndex(capsuleName, pascalName, selectedFramework.ext, hasController), 'utf-8');
     fs.writeFileSync(path.join(targetDir, specFile), buildComponentSpec(capsuleName, pascalName, hasController), 'utf-8');
 
     fs.writeFileSync(path.join(typesDir, 'props.d.ts'), buildPropsType(capsuleName, pascalName), 'utf-8');