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

package/cli/generator-templates/styles.js

@@ -0,0 +1,64 @@
+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;
+    }
+  }
+}
+`;

package/cli/generator-templates/svelte.js

@@ -0,0 +1,66 @@
+export const buildSvelteComponent = (name, pascalName, options = {}) => {
+  const atomsPackage = options.atomsPackage || null;
+  const hasController = options.hasController !== false;
+  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>`;
+
+  const controllerImport = hasController
+    ? `import { create${pascalName}Controller } from './${name}.controller';\n`
+    : '';
+
+  const controllerLogic = hasController
+    ? `const controller = create${pascalName}Controller({
+  initialState: { status: 'idle' },
+  onAction
+});`
+    : `const controller = {
+  canProceed: true,
+  descriptor: { text: 'Ready', className: '${name}__badge ${name}__badge--ready' },
+  handleAction: () => onAction?.()
+};`;
+
+  return `<script lang="ts">
+import type { ${pascalName}Props } from './types';
+${atomImport}${controllerImport}
+const {
+  title,
+  subtitle = '',
+  variant = 'standard',
+  onAction
+}: ${pascalName}Props = $props();
+
+${controllerLogic}
+</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>
+`;
+};

package/cli/generator-templates/types.js

@@ -0,0 +1,29 @@
+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)}`;

package/cli/generator-templates/views.js

@@ -0,0 +1,76 @@
+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);
+  });
+});
+`;

package/cli/generator-templates/vue.js

@@ -0,0 +1,62 @@
+export const buildVueComponent = (name, pascalName, options = {}) => {
+  const atomsPackage = options.atomsPackage || null;
+  const hasController = options.hasController !== false;
+  const actionButton = atomsPackage
+    ? `      <a-button
+        :disabled="!canProceed"
+        @click="handleAction"
+      >
+        {{ variant }}
+      </a-button>`
+    : `      <button
+        type="button"
+        class="${name}__action"
+        :disabled="!canProceed"
+        @click="handleAction"
+      >
+        {{ variant }}
+      </button>`;
+
+  const controllerImport = hasController
+    ? `import { use${pascalName}Controller } from './${name}.controller';\n`
+    : '';
+
+  const controllerLogic = hasController
+    ? `const { state, canProceed, descriptor, handleAction } = use${pascalName}Controller({
+  initialState: { status: 'idle' },
+  onAction: () => emit('action', props.title)
+});`
+    : `const canProceed = true;
+const descriptor = { text: 'Ready', className: '${name}__badge ${name}__badge--ready' };
+const handleAction = () => emit('action', props.title);`;
+
+  return `<script setup lang="ts">
+import type { ${pascalName}Props, ${pascalName}Emits } from './types';
+${controllerImport}
+const props = withDefaults(defineProps<${pascalName}Props>(), {
+  variant: 'standard'
+});
+
+const emit = defineEmits<${pascalName}Emits>();
+
+${controllerLogic}
+</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>
+`;
+};

package/cli/generator-templates.d.ts

@@ -0,0 +1,35 @@
+export interface TemplateOptions {
+  readonly atomsPackage?: string | null;
+  readonly hasController?: boolean;
+}
+
+export declare function toPascalCase(str: string): string;
+export declare function toCamelCase(str: string): string;
+
+export declare function buildReactComponent(name: string, pascalName: string, options?: TemplateOptions): string;
+export declare function buildVueComponent(name: string, pascalName: string, options?: TemplateOptions): string;
+export declare function buildSvelteComponent(name: string, pascalName: string, options?: TemplateOptions): string;
+
+export declare function buildController(name: string, pascalName: string): string;
+export declare function buildComponentSpec(name: string, pascalName: string, hasController?: boolean): string;
+export declare function buildIndex(name: string, pascalName: string, ext: string, hasController?: boolean): string;
+
+export declare function buildPropsType(name: string, pascalName: string): string;
+export declare function buildStateType(name: string, pascalName: string): string;
+export declare function buildTypesIndex(fileNames?: string[]): string;
+export declare function buildTypes(name: string, pascalName: string): string;
+
+export declare function buildScss(name: string): string;
+
+export declare function buildHook(name: string, camelName: string, pascalName: string): string;
+export declare function buildHookOptionsType(pascalName: string): string;
+export declare function buildHookReturnType(pascalName: string): string;
+export declare function buildHookIndex(name: string, camelName: string): string;
+export declare function buildHookSpec(name: string, camelName: string): string;
+
+export declare function buildReactView(name: string, pascalName: string): string;
+export declare function buildVueView(name: string, pascalName: string): string;
+export declare function buildSvelteView(name: string, pascalName: string): string;
+export declare function buildViewParamsType(pascalName: string): string;
+export declare function buildViewIndex(name: string, pascalName: string, ext: string): string;
+export declare function buildViewSpec(name: string, pascalName: string): string;