@dhayalesh/create-component 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# create-component
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build create-component` to build the library.
+
+## Running unit tests
+
+Run `nx test create-component` to execute the unit tests via [Jest](https://jestjs.io).

package/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/library/package.json.template

@@ -0,0 +1,20 @@
+{
+  "name": "@dhayalesh/<%= 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/generators/create-component/files/library/src/index.ts.template

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

package/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/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/generators/create-component/files/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',
+    },
+  },
+});

package/generators/create-component/generator.d.ts

@@ -0,0 +1,12 @@
+import type { Tree } from '@nx/devkit';
+import type { UIComponentGeneratorSchema } from './schema';
+/**
+ * UI Component Generator
+ *
+ * This generator follows Clean Architecture principles:
+ * 1. Dependency Rule: Dependencies point inward (UI components depend on design tokens, not vice versa)
+ * 2. Inversion of Control: Components are configured via props/interfaces, not hardcoded dependencies
+ * 3. Separation of Concerns: Component logic, styles, and stories are separated
+ */
+export default function (tree: Tree, options: UIComponentGeneratorSchema): Promise<() => void>;
+//# sourceMappingURL=generator.d.ts.map

package/generators/create-component/generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../../packages/create-component/src/generators/create-component/generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AASvC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D;;;;;;;GAOG;AACH,yBACE,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,0BAA0B,uBA+BpC"}

package/generators/create-component/generator.js

@@ -0,0 +1,220 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path = tslib_1.__importStar(require("path"));
+/**
+ * UI Component Generator
+ *
+ * This generator follows Clean Architecture principles:
+ * 1. Dependency Rule: Dependencies point inward (UI components depend on design tokens, not vice versa)
+ * 2. Inversion of Control: Components are configured via props/interfaces, not hardcoded dependencies
+ * 3. Separation of Concerns: Component logic, styles, and stories are separated
+ */
+async function default_1(tree, options) {
+    const normalizedOptions = normalizeOptions(tree, options);
+    // Step 1: Generate library structure
+    addLibraryFiles(tree, normalizedOptions);
+    // Step 2: Update workspace configuration
+    updateWorkspaceConfig(tree, normalizedOptions);
+    // Step 3: Add Storybook configuration
+    addStorybookConfig(tree, normalizedOptions);
+    // Step 4: Generate initial component template
+    addComponentTemplate(tree, normalizedOptions);
+    // Step 5: Format files
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return () => {
+        console.log(`
+✅ Successfully created UI component library: ${normalizedOptions.projectName}
+
+📍 Location: ${normalizedOptions.projectRoot}
+
+💡 Your component is ready to customize at:
+   ${normalizedOptions.projectRoot}/src/components/${normalizedOptions.className}/${normalizedOptions.className}.tsx
+    `);
+    };
+}
+function normalizeOptions(tree, options) {
+    const basePath = 'packages/ui';
+    const name = (0, devkit_1.names)(options.name).fileName;
+    const projectDirectory = options.directory
+        ? `${(0, devkit_1.names)(options.directory).fileName}/${name}`
+        : name;
+    const projectName = projectDirectory.replace(new RegExp('/', 'g'), '-');
+    const projectRoot = `${basePath}/${name}`;
+    const parsedTags = [];
+    const componentNames = (0, devkit_1.names)(options.componentName);
+    return {
+        ...options,
+        projectName,
+        projectRoot,
+        projectDirectory,
+        parsedTags,
+        fileName: componentNames.fileName,
+        className: componentNames.className,
+        constantName: componentNames.constantName,
+        propertyName: componentNames.propertyName,
+    };
+}
+function addLibraryFiles(tree, options) {
+    const templateOptions = {
+        ...options,
+        ...(0, devkit_1.names)(options.name),
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.projectRoot),
+        template: '',
+    };
+    (0, devkit_1.generateFiles)(tree, path.join(__dirname, 'files/library'), options.projectRoot, templateOptions);
+}
+function updateWorkspaceConfig(tree, options) {
+    // Create project.json
+    const projectJson = {
+        name: options.projectName,
+        $schema: `${(0, devkit_1.offsetFromRoot)(options.projectRoot)}node_modules/nx/schemas/project-schema.json`,
+        sourceRoot: `${options.projectRoot}/src`,
+        projectType: 'library',
+        tags: options.parsedTags,
+        targets: {
+            build: {
+                executor: '@nx/vite:build',
+                outputs: ['{options.outputPath}'],
+                options: {
+                    outputPath: `dist/${options.projectRoot}`,
+                },
+            },
+            lint: {
+                executor: '@nx/eslint:lint',
+            },
+            test: {
+                executor: '@nx/vitest:test',
+                outputs: ['{workspaceRoot}/coverage/{projectRoot}'],
+                options: {
+                    passWithNoTests: true,
+                    reportsDirectory: `../../coverage/${options.projectRoot}`,
+                },
+            },
+            storybook: {
+                executor: '@nx/storybook:storybook',
+                options: {
+                    port: 4400,
+                    configDir: `${options.projectRoot}/.storybook`,
+                },
+            },
+            'build-storybook': {
+                executor: '@nx/storybook:build',
+                outputs: ['{options.outputDir}'],
+                options: {
+                    outputDir: `dist/storybook/${options.projectName}`,
+                    configDir: `${options.projectRoot}/.storybook`,
+                },
+            },
+        },
+    };
+    tree.write(`${options.projectRoot}/project.json`, JSON.stringify(projectJson, null, 2));
+    // Update tsconfig.base.json paths
+    (0, devkit_1.updateJson)(tree, 'tsconfig.base.json', (json) => {
+        const paths = json.compilerOptions?.paths || {};
+        paths[`@dhayalesh/${options.projectName}`] = [
+            `${options.projectRoot}/src/index.ts`,
+        ];
+        json.compilerOptions = {
+            ...json.compilerOptions,
+            paths,
+        };
+        return json;
+    });
+}
+function addStorybookConfig(tree, options) {
+    const storybookDir = `${options.projectRoot}/.storybook`;
+    // Main Storybook configuration
+    const mainConfig = `
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;
+`.trim();
+    tree.write(`${storybookDir}/main.ts`, mainConfig);
+    // Preview configuration with Tailwind
+    const previewConfig = `
+import type { Preview } from '@storybook/react';
+import '../src/styles.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#0a0a0a',
+        },
+        {
+          name: 'light',
+          value: '#ffffff',
+        },
+      ],
+    },
+  },
+};
+
+export default preview;
+`.trim();
+    tree.write(`${storybookDir}/preview.ts`, previewConfig);
+}
+function addComponentTemplate(tree, options) {
+    const componentDir = `${options.projectRoot}/src/components/${options.className}`;
+    const templateOptions = {
+        ...options,
+        template: '',
+    };
+    // Generate component files from templates
+    (0, devkit_1.generateFiles)(tree, path.join(__dirname, 'files/component'), componentDir, templateOptions);
+    // Rename the template files to use the actual component name
+    const componentFile = `${componentDir}/component.tsx`;
+    const storiesFile = `${componentDir}/component.stories.tsx`;
+    const specFile = `${componentDir}/component.spec.tsx`;
+    if (tree.exists(componentFile)) {
+        const content = tree.read(componentFile, 'utf-8');
+        if (content) {
+            tree.delete(componentFile);
+            tree.write(`${componentDir}/${options.className}.tsx`, content);
+        }
+    }
+    if (tree.exists(storiesFile)) {
+        const content = tree.read(storiesFile, 'utf-8');
+        if (content) {
+            tree.delete(storiesFile);
+            tree.write(`${componentDir}/${options.className}.stories.tsx`, content);
+        }
+    }
+    if (tree.exists(specFile)) {
+        const content = tree.read(specFile, 'utf-8');
+        if (content) {
+            tree.delete(specFile);
+            tree.write(`${componentDir}/${options.className}.spec.tsx`, content);
+        }
+    }
+}

package/generators/create-component/schema.d.ts

@@ -0,0 +1,6 @@
+export interface UIComponentGeneratorSchema {
+  name: string;
+  directory?: string;
+  componentName: string;
+  skipFormat?: boolean;
+}

package/generators/create-component/schema.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "UIComponent",
+  "title": "Create a UI Component Library",
+  "description": "Creates a new UI component library with Storybook and Tailwind CSS",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the component library",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the component library?"
+    },
+    "directory": {
+      "type": "string",
+      "description": "The directory where the library will be created",
+      "default": "libs"
+    },
+    "componentName": {
+      "type": "string",
+      "description": "The name of the initial component to create",
+      "x-prompt": "What should the initial component be called?"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files",
+      "default": false
+    }
+  },
+  "required": ["name", "componentName"]
+}

package/generators.json

@@ -0,0 +1,9 @@
+{
+    "generators": {
+        "create-component": {
+            "factory": "./generators/create-component/generator",
+            "schema": "./generators/create-component/schema.json",
+            "description": "Creates a new component"
+        }
+    }
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/create-component/src/index.ts"],"names":[],"mappings":""}

package/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@dhayalesh/create-component",
+  "version": "0.0.1",
+  "private": false,
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@org/source": "./src/index.ts",
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "executor": "@nx/js:tsc",
+        "outputs": [
+          "{options.outputPath}"
+        ],
+        "options": {
+          "outputPath": "dist/packages/create-component",
+          "main": "packages/create-component/src/index.ts",
+          "tsConfig": "packages/create-component/tsconfig.lib.json",
+          "rootDir": "packages/create-component/src",
+          "generatePackageJson": false,
+          "assets": [
+            {
+              "input": "./packages/create-component/src",
+              "glob": "**/!(*.ts)",
+              "output": "."
+            },
+            {
+              "input": "./packages/create-component/src",
+              "glob": "**/*.d.ts",
+              "output": "."
+            },
+            {
+              "input": "./packages/create-component",
+              "glob": "generators.json",
+              "output": "."
+            },
+            {
+              "input": "./packages/create-component",
+              "glob": "package.json",
+              "output": "."
+            },
+            {
+              "input": "./packages/create-component",
+              "glob": "README.md",
+              "output": "."
+            }
+          ]
+        }
+      }
+    }
+  },
+  "generators": "./generators.json",
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@nx/devkit": "^22.3.3"
+  }
+}