stack-dev 0.1.0

package/apps/cli/src/packages/react-package/css-react-package/create-css-react-package.ts

@@ -0,0 +1,103 @@
+import path from 'path';
+import { PackageJsonGenerator } from '../../../file-generator';
+import { Dependency, PackageJSON } from '../../../package-json';
+import { PackageGenerator } from '../../../utils/package-generator';
+import { getNamespace, getWorkspaceRoot } from '../../../utils/workspace';
+import { BUTTON_CSS_MODULE_FILE_GENERATOR } from './files/button-css-module-file-generator';
+import { BUTTON_FILE_GENERATOR } from './files/button-file-generator';
+import { BUTTON_SPEC_FILE_GENERATOR } from './files/button-spec-file-generator';
+import { ESLINT_CONFIG_FILE_GENERATOR } from './files/eslint-config-file-generator';
+import { INDEX_FILE_GENERATOR } from './files/index-file-generator';
+import { PRETTIER_CONFIG_FILE_GENERATOR } from './files/prettier-config-file-generator';
+import { TSCONFIG_FILE_GENERATOR } from './files/tsconfig-file-generator';
+import { TSUP_CONFIG_FILE_GENERATOR } from './files/tsup-config-file-generator';
+import { VITEST_CONFIG_FILE_GENERATOR } from './files/vitest-config-file-generator';
+
+export async function createCssReactPackage(name: string): Promise<void> {
+  const rootDir = await getWorkspaceRoot();
+  const directory = path.join(rootDir, 'packages', name);
+
+  const namespace = await getNamespace(rootDir);
+  const packageName = `${namespace}/${name}`;
+
+  console.log(`✨ Creating CSS Modules React library: ${packageName}`);
+
+  const generator = new PackageGenerator(
+    directory,
+    makePackageGenerator(packageName, namespace),
+    [
+      INDEX_FILE_GENERATOR,
+      BUTTON_FILE_GENERATOR,
+      BUTTON_CSS_MODULE_FILE_GENERATOR,
+      BUTTON_SPEC_FILE_GENERATOR,
+      TSUP_CONFIG_FILE_GENERATOR,
+      TSCONFIG_FILE_GENERATOR,
+      PRETTIER_CONFIG_FILE_GENERATOR,
+      ESLINT_CONFIG_FILE_GENERATOR,
+      VITEST_CONFIG_FILE_GENERATOR,
+    ],
+  );
+
+  await generator.generate();
+
+  console.log(`✅ Library created at: ${directory}`);
+}
+
+function makePackageGenerator(packageName: string, namespace: string) {
+  const packageJsonModel = new PackageJSON({
+    name: packageName,
+    peerDependencies: [
+      new Dependency('react', '>=18'),
+      new Dependency('react-dom', '>=18'),
+    ],
+    devDependencies: [
+      new Dependency(`${namespace}/eslint-config`, 'workspace:*'),
+      new Dependency(`${namespace}/prettier-config`, 'workspace:*'),
+      new Dependency(`${namespace}/typescript-config`, 'workspace:*'),
+      // Development React binaries
+      new Dependency('react', '^18.3.1'),
+      new Dependency('react-dom', '^18.3.1'),
+      new Dependency('@types/react', '^18.3.1'),
+      new Dependency('@types/react-dom', '^18.3.1'),
+      // Linting & Formatting
+      new Dependency('eslint', '^9.32.0'),
+      new Dependency('prettier', '^3.6.2'),
+      new Dependency('prettier-plugin-organize-imports', '^4.2.0'),
+      // Build
+      new Dependency('tsup', '^8.0.0'),
+      new Dependency('postcss', '^8.4.0'),
+      // Testing
+      new Dependency('vitest', '^3.2.4'),
+      new Dependency('@vitest/coverage-v8', '^3.2.4'),
+      new Dependency('@testing-library/react', '^16.0.0'),
+      new Dependency('@testing-library/jest-dom', '^6.0.0'),
+      new Dependency('jsdom', '^25.0.0'),
+    ],
+    additionalData: {
+      version: '0.1.0',
+      private: true,
+      main: 'dist/index.js',
+      module: 'dist/index.mjs',
+      types: 'dist/index.d.ts',
+      exports: {
+        '.': {
+          development: './src/index.ts',
+          import: './dist/index.mjs',
+          require: './dist/index.js',
+          types: './dist/index.d.ts',
+        },
+        './index.css': './dist/index.css',
+      },
+      scripts: {
+        build: 'tsup',
+        lint: 'eslint .',
+        format: 'prettier . --write',
+        test: 'vitest run',
+        'test:watch': 'vitest',
+      },
+      sideEffects: ['**/*.css'],
+    },
+  });
+
+  return new PackageJsonGenerator(packageJsonModel, namespace);
+}

package/apps/cli/src/packages/react-package/css-react-package/files/button-css-module-file-generator.ts

@@ -0,0 +1,16 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const BUTTON_CSS_MODULE = `.styledButton {
+  background: blue;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+`;
+
+export const BUTTON_CSS_MODULE_FILE_GENERATOR = new FileGeneratorImp(
+  'src/button.module.css',
+  BUTTON_CSS_MODULE,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/button-file-generator.ts

@@ -0,0 +1,14 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const BUTTON = `import React from 'react';
+import * as styles from './button.module.css';
+
+export function Button(props: HTMLAttributes<HTMLButtonElement>) {
+  return <button className={styles.styledButton} {...props} />;
+}
+`;
+
+export const BUTTON_FILE_GENERATOR = new FileGeneratorImp(
+  'src/button.tsx',
+  BUTTON,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/button-spec-file-generator.ts

@@ -0,0 +1,33 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const BUTTON_SPEC = `import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders the label correctly', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeDefined();
+  });
+
+  it('is a button element', () => {
+    render(<Button>Submit</Button>);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+
+  /* Note: Testing for specific CSS classes with CSS Modules is tricky 
+     because class names are mangled (e.g., _styledButton_123). 
+     Usually, we just test that the class attribute exists.
+  */
+  it('applies a class name', () => {
+    render(<Button>Styled</Button>);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.className).toBeTruthy();
+  });
+});
+`;
+
+export const BUTTON_SPEC_FILE_GENERATOR = new FileGeneratorImp(
+  'src/button.spec.tsx',
+  BUTTON_SPEC,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/eslint-config-file-generator.ts

@@ -0,0 +1,18 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const ESLINT_CONFIG = `import base from '@stack-dev/eslint-config/base.mjs';
+import react from '@stack-dev/eslint-config/react.mjs';
+
+export default [
+  ...base,
+  ...react,
+  { 
+    ignores: ['**/dist/**', '**/coverage/**'] 
+  }
+];
+`;
+
+export const ESLINT_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'eslint.config.mjs',
+  ESLINT_CONFIG,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/index-file-generator.ts

@@ -0,0 +1,9 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const INDEX_TS = `export * from './button';
+`;
+
+export const INDEX_FILE_GENERATOR = new FileGeneratorImp(
+  'src/index.ts',
+  INDEX_TS,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/prettier-config-file-generator.ts

@@ -0,0 +1,11 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const PRETTIER_CONFIG = `import base from '@stack-dev/prettier-config/base.mjs';
+
+export default base;
+`;
+
+export const PRETTIER_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'prettier.config.mjs',
+  PRETTIER_CONFIG,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/tsconfig-file-generator.ts

@@ -0,0 +1,15 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const TSCONFIG = `{
+  "extends": "@stack-dev/typescript-config/tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}
+`;
+
+export const TSCONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'tsconfig.json',
+  TSCONFIG,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/tsup-config-file-generator.ts

@@ -0,0 +1,24 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const TSUP_CONFIG = `import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  minify: true,
+  clean: true,
+  injectStyle: true,
+  external: ['react', 'react-dom'],
+  outExtension({ format }) {
+    return {
+      js: format === 'esm' ? '.mjs' : '.js',
+    };
+  },
+});
+`;
+
+export const TSUP_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'tsup.config.ts',
+  TSUP_CONFIG,
+);

package/apps/cli/src/packages/react-package/css-react-package/files/vitest-config-file-generator.ts

@@ -0,0 +1,23 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const VITEST_CONFIG = `import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+    css: true,
+  },
+});
+`;
+
+export const VITEST_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'vitest.config.ts',
+  VITEST_CONFIG,
+);

package/apps/cli/src/packages/react-package/index.ts

@@ -0,0 +1 @@
+export * from './create-react-package';

package/apps/cli/src/packages/react-package/styled-components-react-package/create-styled-components-react-package.ts

@@ -0,0 +1,112 @@
+import path from 'path';
+import { PackageJsonGenerator } from '../../../file-generator';
+import { Dependency, PackageJSON } from '../../../package-json';
+import { PackageGenerator } from '../../../utils/package-generator';
+import { getNamespace, getWorkspaceRoot } from '../../../utils/workspace';
+import { BUTTON_FILE_GENERATOR } from './files/button-file-generator';
+import { BUTTON_SPEC_FILE_GENERATOR } from './files/button-spec-file-generator';
+import { ESLINT_CONFIG_FILE_GENERATOR } from './files/eslint-config-file-generator';
+import { INDEX_FILE_GENERATOR } from './files/index-file-generator';
+import { PRETTIER_CONFIG_FILE_GENERATOR } from './files/prettier-config-file-generator';
+import { TSCONFIG_FILE_GENERATOR } from './files/tsconfig-file-generator';
+import { TSUP_CONFIG_FILE_GENERATOR } from './files/tsup-config-file-generator';
+import { VITEST_CONFIG_FILE_GENERATOR } from './files/vitest-config-file-generator';
+
+export async function createStyledComponentsReactPackage(
+  name: string,
+): Promise<void> {
+  const rootDir = await getWorkspaceRoot();
+  const directory = path.join(rootDir, 'packages', name);
+
+  const namespace = await getNamespace(rootDir);
+  const packageName = `${namespace}/${name}`;
+
+  console.log(
+    `✨ Creating Styled Components Modules React library: ${packageName}`,
+  );
+
+  const generator = new PackageGenerator(
+    directory,
+    makePackageGenerator(packageName, namespace),
+    [
+      INDEX_FILE_GENERATOR,
+      BUTTON_FILE_GENERATOR,
+      BUTTON_SPEC_FILE_GENERATOR,
+      TSUP_CONFIG_FILE_GENERATOR,
+      TSCONFIG_FILE_GENERATOR,
+      PRETTIER_CONFIG_FILE_GENERATOR,
+      ESLINT_CONFIG_FILE_GENERATOR,
+      VITEST_CONFIG_FILE_GENERATOR,
+    ],
+  );
+
+  await generator.generate();
+
+  console.log(`✅ Library created at: ${directory}`);
+}
+
+function makePackageGenerator(packageName: string, namespace: string) {
+  const packageJsonModel = new PackageJSON({
+    name: packageName,
+    // Peer deps are crucial for Styled Components to prevent "Multiple instances" errors
+    peerDependencies: [
+      new Dependency('react', '>=18'),
+      new Dependency('react-dom', '>=18'),
+      new Dependency('styled-components', '>=6'),
+    ],
+    devDependencies: [
+      new Dependency(`${namespace}/eslint-config`, 'workspace:*'),
+      new Dependency(`${namespace}/prettier-config`, 'workspace:*'),
+      new Dependency(`${namespace}/typescript-config`, 'workspace:*'),
+      // Development React binaries
+      new Dependency('react', '^18.3.1'),
+      new Dependency('react-dom', '^18.3.1'),
+      new Dependency('@types/react', '^18.3.1'),
+      new Dependency('@types/react-dom', '^18.3.1'),
+      // Styled Components types and binary for build time
+      new Dependency('styled-components', '^6.1.13'),
+      new Dependency('@types/styled-components', '^5.1.34'),
+      // Linting & Formatting
+      new Dependency('eslint', '^9.32.0'),
+      new Dependency('prettier', '^3.6.2'),
+      new Dependency('prettier-plugin-organize-imports', '^4.2.0'),
+      // Build
+      new Dependency('tsup', '^8.0.0'),
+      // Testing
+      new Dependency('vitest', '^3.2.4'),
+      new Dependency('@vitest/coverage-v8', '^3.2.4'),
+      new Dependency('@testing-library/react', '^16.0.0'),
+      new Dependency('@testing-library/jest-dom', '^6.0.0'),
+      new Dependency('jsdom', '^25.0.0'),
+    ],
+    additionalData: {
+      version: '0.1.0',
+      private: true,
+      type: 'module', // Added this to ensure ESM consistency
+      main: 'dist/index.js',
+      module: 'dist/index.mjs',
+      types: 'dist/index.d.ts',
+      exports: {
+        '.': {
+          development: './src/index.ts',
+          import: './dist/index.mjs',
+          require: './dist/index.js',
+          types: './dist/index.d.ts',
+        },
+        // Removed './index.css' as it's no longer produced by Styled Components
+      },
+      scripts: {
+        build: 'tsup',
+        dev: 'tsup --watch', // Helpful for local lib dev
+        lint: 'eslint .',
+        format: 'prettier . --write',
+        test: 'vitest run',
+        'test:watch': 'vitest',
+      },
+      // Set to false or removed because Styled Components are pure JS/TS
+      sideEffects: false,
+    },
+  });
+
+  return new PackageJsonGenerator(packageJsonModel, namespace);
+}

package/apps/cli/src/packages/react-package/styled-components-react-package/files/button-file-generator.ts

@@ -0,0 +1,30 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const BUTTON = `import React, { HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+// This is your "Styled" version of the button
+// No more imports, no more "empty objects"
+const StyledButton = styled.button\`
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+\`;
+
+export function Button(props: HTMLAttributes<HTMLButtonElement>) {
+  return <StyledButton {...props} />;
+}
+`;
+
+export const BUTTON_FILE_GENERATOR = new FileGeneratorImp(
+  'src/button.tsx',
+  BUTTON,
+);

package/apps/cli/src/packages/react-package/styled-components-react-package/files/button-spec-file-generator.ts

@@ -0,0 +1,33 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const BUTTON_SPEC = `import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders the label correctly', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeDefined();
+  });
+
+  it('is a button element', () => {
+    render(<Button>Submit</Button>);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+
+  /* Note: Testing for specific CSS classes with CSS Modules is tricky 
+     because class names are mangled (e.g., _styledButton_123). 
+     Usually, we just test that the class attribute exists.
+  */
+  it('applies a class name', () => {
+    render(<Button>Styled</Button>);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.className).toBeTruthy();
+  });
+});
+`;
+
+export const BUTTON_SPEC_FILE_GENERATOR = new FileGeneratorImp(
+  'src/button.spec.tsx',
+  BUTTON_SPEC,
+);

package/apps/cli/src/packages/react-package/styled-components-react-package/files/eslint-config-file-generator.ts

@@ -0,0 +1,18 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const ESLINT_CONFIG = `import base from '@stack-dev/eslint-config/base.mjs';
+import react from '@stack-dev/eslint-config/react.mjs';
+
+export default [
+  ...base,
+  ...react,
+  { 
+    ignores: ['**/dist/**', '**/coverage/**'] 
+  }
+];
+`;
+
+export const ESLINT_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'eslint.config.mjs',
+  ESLINT_CONFIG,
+);

package/apps/cli/src/packages/react-package/styled-components-react-package/files/index-file-generator.ts

@@ -0,0 +1,9 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const INDEX_TS = `export * from './button';
+`;
+
+export const INDEX_FILE_GENERATOR = new FileGeneratorImp(
+  'src/index.ts',
+  INDEX_TS,
+);

package/apps/cli/src/packages/react-package/styled-components-react-package/files/prettier-config-file-generator.ts

@@ -0,0 +1,11 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const PRETTIER_CONFIG = `import base from '@stack-dev/prettier-config/base.mjs';
+
+export default base;
+`;
+
+export const PRETTIER_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'prettier.config.mjs',
+  PRETTIER_CONFIG,
+);

package/apps/cli/src/packages/react-package/styled-components-react-package/files/tsconfig-file-generator.ts

@@ -0,0 +1,15 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const TSCONFIG = `{
+  "extends": "@stack-dev/typescript-config/tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}
+`;
+
+export const TSCONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'tsconfig.json',
+  TSCONFIG,
+);

package/apps/cli/src/packages/react-package/styled-components-react-package/files/tsup-config-file-generator.ts

@@ -0,0 +1,21 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const TSUP_CONFIG = `import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  dts: true,
+  clean: true,
+  external: ['react', 'react-dom', 'styled-components'],
+  outExtension({ format }) {
+    return {
+      js: format === 'esm' ? '.mjs' : '.js',
+    };
+  },
+});`;
+
+export const TSUP_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'tsup.config.ts',
+  TSUP_CONFIG,
+);

package/apps/cli/src/packages/react-package/styled-components-react-package/files/vitest-config-file-generator.ts

@@ -0,0 +1,23 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const VITEST_CONFIG = `import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+    css: true,
+  },
+});
+`;
+
+export const VITEST_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'vitest.config.ts',
+  VITEST_CONFIG,
+);

package/apps/cli/src/packages/vite-react-app/create-vite-react-app.ts

@@ -0,0 +1,79 @@
+import path from 'path';
+import { PackageJsonGenerator } from '../../file-generator';
+import { Dependency, PackageJSON } from '../../package-json';
+import { PackageGenerator } from '../../utils/package-generator';
+import { getNamespace, getWorkspaceRoot } from '../../utils/workspace';
+
+import { INDEX_HTML_FILE_GENERATOR } from './files/index-html-file-generator';
+import { MAIN_FILE_GENERATOR } from './files/main-file-generator';
+import { VITE_CONFIG_FILE_GENERATOR } from './files/vite-config-file-generator';
+
+import { APP_FILE_GENERATOR } from './files/app-file-generator';
+import { ESLINT_CONFIG_FILE_GENERATOR } from './files/eslint-config-file-generator';
+import { PRETTIER_CONFIG_FILE_GENERATOR } from './files/prettier-config-file-generator';
+import { TSCONFIG_FILE_GENERATOR } from './files/tsconfig-file-generator';
+import { VITEST_CONFIG_FILE_GENERATOR } from './files/vitest-config-file-generator';
+
+export async function createViteReactApp(name: string): Promise<void> {
+  const rootDir = await getWorkspaceRoot();
+  const directory = path.join(rootDir, 'apps', name);
+
+  const namespace = await getNamespace(rootDir);
+  const packageName = `${namespace}/${name}`;
+
+  console.log(`🚀 Creating Vite React App: ${packageName}`);
+
+  const generator = new PackageGenerator(
+    directory,
+    makeAppPackageGenerator(packageName, namespace),
+    [
+      VITE_CONFIG_FILE_GENERATOR,
+      INDEX_HTML_FILE_GENERATOR,
+      MAIN_FILE_GENERATOR,
+      APP_FILE_GENERATOR,
+      TSCONFIG_FILE_GENERATOR,
+      PRETTIER_CONFIG_FILE_GENERATOR,
+      ESLINT_CONFIG_FILE_GENERATOR,
+      VITEST_CONFIG_FILE_GENERATOR,
+    ],
+  );
+
+  await generator.generate();
+}
+
+function makeAppPackageGenerator(packageName: string, namespace: string) {
+  const packageJsonModel = new PackageJSON({
+    name: packageName,
+    dependencies: [
+      new Dependency('react', '^18.3.1'),
+      new Dependency('react-dom', '^18.3.1'),
+    ],
+    devDependencies: [
+      new Dependency(`${namespace}/eslint-config`, 'workspace:*'),
+      new Dependency(`${namespace}/prettier-config`, 'workspace:*'),
+      new Dependency(`${namespace}/typescript-config`, 'workspace:*'),
+      new Dependency('@types/react', '^18.3.1'),
+      new Dependency('@types/react-dom', '^18.3.1'),
+      new Dependency('@vitejs/plugin-react', '^4.3.1'),
+      new Dependency('vite', '^5.4.2'),
+      new Dependency('typescript', '^5.5.4'),
+      new Dependency('eslint', '^9.32.0'),
+      new Dependency('prettier', '^3.6.2'),
+    ],
+    additionalData: {
+      version: '0.1.0',
+      private: true,
+      type: 'module',
+      scripts: {
+        dev: 'vite',
+        build: 'tsc && vite build',
+        preview: 'vite preview',
+        start: 'pnpm run preview',
+        lint: 'eslint .',
+        format: 'prettier . --write',
+      },
+    },
+  });
+
+  return new PackageJsonGenerator(packageJsonModel, namespace);
+}