@dhayalesh/create-ktern-component 1.0.0

package/bin/cli.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const inquirer = require('inquirer');
+const ejs = require('ejs');
+const { promisify } = require('util');
+
+const copyFile = promisify(fs.copyFile);
+const mkdir = promisify(fs.mkdir);
+const readdir = promisify(fs.readdir);
+const stat = promisify(fs.stat);
+const writeFile = promisify(fs.writeFile);
+const readFile = promisify(fs.readFile);
+
+async function copyTemplate(src, dest, data) {
+    const stats = await stat(src);
+    if (stats.isDirectory()) {
+        if (!fs.existsSync(dest)) {
+            await mkdir(dest, { recursive: true });
+        }
+        const files = await readdir(src);
+        for (const file of files) {
+            await copyTemplate(path.join(src, file), path.join(dest, file), data);
+        }
+    } else {
+        let content = await readFile(src, 'utf8');
+        // Simple template replacement if no EJS variables are found or if we want to use EJS
+        try {
+            content = ejs.render(content, data);
+        } catch (err) {
+            // If EJS fails (e.g. invalid syntax in non-template files), just use raw content
+        }
+
+        // Remove .template or .tmpl suffix if present in destination filename
+        const finalDest = dest.replace(/\.template$/, '').replace(/\.tmpl$/, '');
+        await writeFile(finalDest, content);
+    }
+}
+
+async function run() {
+    console.log('🚀 Welcome to the KTERN Generator!');
+
+    const questions = [
+        {
+            type: 'input',
+            name: 'name',
+            message: 'What is the project name?',
+            validate: (input) => input.length > 0 || 'Project name is required',
+        },
+        {
+            type: 'input',
+            name: 'directory',
+            message: 'In which directory should the project be created?',
+            default: (answers) => path.join(process.cwd(), answers.name),
+        },
+        {
+            type: 'number',
+            name: 'port',
+            message: 'What port should the service run on?',
+            default: 3000,
+        },
+    ];
+
+    const answers = await inquirer.prompt(questions);
+    const targetDir = path.resolve(answers.directory);
+
+    if (fs.existsSync(targetDir)) {
+        const { overwrite } = await inquirer.prompt([
+            {
+                type: 'confirm',
+                name: 'overwrite',
+                message: `Directory ${targetDir} already exists. Overwrite?`,
+                default: false,
+            },
+        ]);
+        if (!overwrite) {
+            console.log('Exiting...');
+            process.exit(0);
+        }
+    }
+
+    console.log(`\nCreating project "${answers.name}" in ${targetDir}...`);
+
+    const templateDir = path.join(__dirname, '../templates');
+    await copyTemplate(templateDir, targetDir, {
+        name: answers.name,
+        port: answers.port,
+        // Add more default variables if needed
+    });
+
+    console.log('\n✅ Project created successfully!');
+    console.log(`\nNext steps:`);
+    console.log(`  cd ${targetDir}`);
+    console.log(`  npm install`);
+    console.log(`  npm start`);
+}
+
+run().catch((err) => {
+    console.error('❌ Error:', err.message);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@dhayalesh/create-ktern-component",
+  "version": "1.0.0",
+  "description": "Standalone KTERN component generator",
+  "bin": {
+    "create-ktern-component": "./bin/cli.js"
+  },
+  "dependencies": {
+    "inquirer": "^8.2.4",
+    "ejs": "^3.1.8"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  }
+}

package/templates/component/component.spec.tsx.template

@@ -0,0 +1,58 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { <%= className %> } from './<%= className %>';
+
+describe('<%= className %>', () => {
+  it('should render successfully', () => {
+    render(<<%= className %>>Test</<%= className %>>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('should apply the correct variant class', () => {
+    const { rerender } = render(<<%= className %> variant="primary">Test</<%= className %>>);
+    const button = screen.getByText('Test');
+    expect(button).toHaveClass('bg-blue-600');
+
+    rerender(<<%= className %> variant="secondary">Test</<%= className %>>);
+    expect(button).toHaveClass('bg-purple-600');
+
+    rerender(<<%= className %> variant="accent">Test</<%= className %>>);
+    expect(button).toHaveClass('bg-green-600');
+  });
+
+  it('should apply the correct size class', () => {
+    const { rerender } = render(<<%= className %> size="sm">Test</<%= className %>>);
+    const button = screen.getByText('Test');
+    expect(button).toHaveClass('px-3');
+
+    rerender(<<%= className %> size="md">Test</<%= className %>>);
+    expect(button).toHaveClass('px-4');
+
+    rerender(<<%= className %> size="lg">Test</<%= className %>>);
+    expect(button).toHaveClass('px-6');
+  });
+
+  it('should handle click events', () => {
+    const handleClick = vi.fn();
+    render(<<%= className %> onClick={handleClick}>Test</<%= className %>>);
+    
+    const button = screen.getByText('Test');
+    fireEvent.click(button);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be disabled when disabled prop is true', () => {
+    render(<<%= className %> disabled>Test</<%= className %>>);
+    const button = screen.getByText('Test');
+    
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass('opacity-50');
+  });
+
+  it('should apply custom className', () => {
+    render(<<%= className %> className="custom-class">Test</<%= className %>>);
+    const button = screen.getByText('Test');
+    
+    expect(button).toHaveClass('custom-class');
+  });
+});

package/templates/component/component.stories.tsx.template

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { <%= className %> } from './<%= className %>';
+
+/**
+ * <%= className %> Component Stories
+ * 
+ * Demonstrates the component in various states and configurations.
+ * This follows the Separation of Concerns principle - stories are separate from implementation.
+ */
+const meta: Meta<typeof <%= className %>> = {
+  title: 'Components/<%= className %>',
+  component: <%= className %>,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'accent'],
+      description: 'Visual variant of the component',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the component is disabled',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Click event handler',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof <%= className %>>;
+
+/**
+ * Default state of the component
+ */
+export const Default: Story = {
+  args: {
+    children: 'Click me',
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+  },
+};
+
+/**
+ * Primary variant
+ */
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+    size: 'md',
+  },
+};
+
+/**
+ * Secondary variant
+ */
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+    size: 'md',
+  },
+};
+
+/**
+ * Accent variant
+ */
+export const Accent: Story = {
+  args: {
+    children: 'Accent Button',
+    variant: 'accent',
+    size: 'md',
+  },
+};
+
+/**
+ * Small size
+ */
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    variant: 'primary',
+    size: 'sm',
+  },
+};
+
+/**
+ * Large size
+ */
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    variant: 'primary',
+    size: 'lg',
+  },
+};
+
+/**
+ * Disabled state
+ */
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    variant: 'primary',
+    size: 'md',
+    disabled: true,
+  },
+};
+
+/**
+ * All variants side by side
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <<%= className %> variant="primary">Primary</<%= className %>>
+      <<%= className %> variant="secondary">Secondary</<%= className %>>
+      <<%= className %> variant="accent">Accent</<%= className %>>
+    </div>
+  ),
+};
+
+/**
+ * All sizes side by side
+ */
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <<%= className %> size="sm">Small</<%= className %>>
+      <<%= className %> size="md">Medium</<%= className %>>
+      <<%= className %> size="lg">Large</<%= className %>>
+    </div>
+  ),
+};

package/templates/component/component.tsx.template

@@ -0,0 +1,98 @@
+import React from 'react';
+
+/**
+ * Props interface for <%= className %> component
+ * Following Inversion of Control principle - component behavior is configured via props
+ */
+export interface <%= className %>Props {
+  /**
+   * The content to display inside the component
+   */
+  children?: React.ReactNode;
+  
+  /**
+   * Optional CSS class name for custom styling
+   */
+  className?: string;
+  
+  /**
+   * Variant of the component
+   */
+  variant?: 'primary' | 'secondary' | 'accent';
+  
+  /**
+   * Size of the component
+   */
+  size?: 'sm' | 'md' | 'lg';
+  
+  /**
+   * Whether the component is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * <%= className %> Component
+ * 
+ * A reusable UI component built with React and Tailwind CSS.
+ * Follows Clean Architecture principles:
+ * - Dependency Rule: Depends only on React and design tokens (CSS variables)
+ * - Separation of Concerns: Presentation logic separated from business logic
+ * - Inversion of Control: Behavior configured via props interface
+ */
+export const <%= className %>: React.FC<<%= className %>Props> = ({
+  children,
+  className = '',
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+}) => {
+  // Variant styles - using Tailwind classes that reference design tokens
+  const variantClasses = {
+    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+    secondary: 'bg-purple-600 hover:bg-purple-700 text-white',
+    accent: 'bg-green-600 hover:bg-green-700 text-white',
+  };
+  
+  // Size styles
+  const sizeClasses = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-6 py-3 text-lg',
+  };
+  
+  // Combine classes
+  const classes = [
+    'rounded-lg',
+    'font-medium',
+    'transition-all',
+    'duration-200',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-offset-2',
+    'focus:ring-offset-gray-900',
+    variantClasses[variant],
+    sizeClasses[size],
+    disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+    className,
+  ].join(' ');
+  
+  return (
+    <button
+      className={classes}
+      onClick={onClick}
+      disabled={disabled}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default <%= className %>;

package/templates/library/README.md.template

@@ -0,0 +1,15 @@
+# <%= className %>
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build <%= projectName %>` to build the library.
+
+## Running unit tests
+
+Run `nx test <%= projectName %>` to execute the unit tests via [Vitest](https://vitest.dev/).
+
+## Running Storybook
+
+Run `nx storybook <%= projectName %>` to start the Storybook development server.

package/templates/library/eslint.config.mjs.template

@@ -0,0 +1,17 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    rules: {},
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    rules: {},
+  },
+];

package/templates/library/package.json.template

@@ -0,0 +1,20 @@
+{
+  "name": "@ktern/<%= projectName %>",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "vitest": "^1.0.0",
+    "@vitest/ui": "^1.0.0",
+    "jsdom": "^23.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/templates/library/src/index.ts.template

@@ -0,0 +1 @@
+export * from './components/<%= className %>/<%= className %>';

package/templates/library/src/styles.css.template

@@ -0,0 +1,50 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Design System Tokens */
+:root {
+  /* Colors */
+  --color-primary: #3b82f6;
+  --color-secondary: #8b5cf6;
+  --color-accent: #10b981;
+  --color-background: #0a0a0a;
+  --color-surface: #1a1a1a;
+  --color-text: #ffffff;
+  --color-text-secondary: #a3a3a3;
+  
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+/* Base Styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--color-background);
+  color: var(--color-text);
+}

package/templates/library/src/test-setup.ts.template

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});

package/templates/library/tsconfig.json.template

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "../../dist/out-tsc",
+    "rootDir": "src",
+    "types": ["node", "vitest"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/templates/library/tsconfig.lib.json.template

@@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.js",
+    "src/**/*.jsx"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ]
+}

package/templates/library/tsconfig.spec.json.template

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "node"]
+  },
+  "include": [
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

package/templates/library/vite.config.ts.template

@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/<%= projectName %>',
+
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+
+  build: {
+    outDir: '../../dist/<%= projectRoot %>',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      entry: 'src/index.ts',
+      name: '<%= className %>',
+      fileName: 'index',
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/<%= projectRoot %>',
+      provider: 'v8',
+    },
+  },
+});