@starodubenko/fsd-gen 0.1.0

package/dist/lib/templates/templateLoader.js

@@ -0,0 +1,122 @@
+/**
+ * Template loading and processing.
+ *
+ * Responsible for finding, reading, and processing template files. Handles variable
+ * substitution in template content and resolves template paths based on layers and types.
+ */
+import { readFile, readdir, stat } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { TEMPLATE_FILES, PRESET_DIRS } from '../constants.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+/**
+ * Resolve the list of directories to search for templates
+ * Custom directory is checked first, then internal templates
+ */
+export function resolveTemplateDirs(customTemplatesDir) {
+    const internalTemplatesDir = join(__dirname, '../../../templates');
+    if (customTemplatesDir) {
+        return [customTemplatesDir, internalTemplatesDir];
+    }
+    return [internalTemplatesDir];
+}
+/**
+ * Find the template directory in the search directories
+ * @returns The path to the template directory or null if not found
+ */
+export async function findTemplateDir(layer, type, searchDirs) {
+    for (const templatesDir of searchDirs) {
+        const templateDir = layer
+            ? join(templatesDir, layer, type)
+            : join(templatesDir, type);
+        try {
+            await stat(templateDir);
+            return templateDir;
+        }
+        catch {
+            // Not found in this dir, continue
+        }
+    }
+    return null;
+}
+/**
+ * Read the component template file
+ */
+export async function readComponentTemplate(templateDir) {
+    const componentPath = join(templateDir, TEMPLATE_FILES.COMPONENT);
+    return await readFile(componentPath, 'utf-8');
+}
+/**
+ * Read the styles template file (optional)
+ * @returns The styles content or empty string if not found
+ */
+export async function readStylesTemplate(templateDir) {
+    const stylesPath = join(templateDir, TEMPLATE_FILES.STYLES);
+    try {
+        return await readFile(stylesPath, 'utf-8');
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Load a template for a given layer and type
+ * Orchestrates finding and reading template files
+ */
+export async function loadTemplate(layer, type = 'ui', customTemplatesDir) {
+    const searchDirs = resolveTemplateDirs(customTemplatesDir);
+    const templateDir = await findTemplateDir(layer, type, searchDirs);
+    if (!templateDir) {
+        console.warn(`Template not found: ${layer}/${type} in paths: ${searchDirs.join(', ')}`);
+        throw new Error(`Template not found: ${layer}/${type}`);
+    }
+    const component = await readComponentTemplate(templateDir);
+    const styles = await readStylesTemplate(templateDir);
+    console.log(`Loaded template from: ${templateDir}`);
+    return { component, styles };
+}
+export function processTemplate(content, variables) {
+    return content.replace(/\{\s*\{\s*(\w+)\s*\}\s*\}/g, (_, key) => String(variables[key] ?? ''));
+}
+export async function listPresets(customTemplatesDir) {
+    const internalTemplatesDir = join(__dirname, '../../../templates');
+    const presets = new Set();
+    const dirsToCheck = [internalTemplatesDir];
+    if (customTemplatesDir) {
+        dirsToCheck.unshift(customTemplatesDir);
+    }
+    for (const dir of dirsToCheck) {
+        const presetDir = join(dir, PRESET_DIRS.ROOT);
+        try {
+            const entries = await readdir(presetDir, { withFileTypes: true });
+            for (const entry of entries) {
+                if (entry.isDirectory()) {
+                    presets.add(entry.name);
+                }
+            }
+        }
+        catch {
+            // Ignore if directory doesn't exist
+        }
+    }
+    return Array.from(presets);
+}
+export async function resolvePresetDir(presetName, customTemplatesDir) {
+    const internalTemplatesDir = join(__dirname, '../../../templates');
+    const dirsToCheck = [internalTemplatesDir];
+    if (customTemplatesDir) {
+        dirsToCheck.unshift(customTemplatesDir);
+    }
+    for (const dir of dirsToCheck) {
+        const presetDir = join(dir, PRESET_DIRS.ROOT, presetName);
+        try {
+            await stat(presetDir);
+            return presetDir;
+        }
+        catch {
+            // Check next
+        }
+    }
+    return null;
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@starodubenko/fsd-gen",
+  "version": "0.1.0",
+  "description": "A powerful CLI tool for scaffolding Feature-Sliced Design (FSD) components, slices, and layers.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "fsd-gen": "cli.js"
+  },
+  "files": [
+    "dist",
+    "cli.js",
+    "templates",
+    "README.md",
+    "package.json"
+  ],
+  "author": "Rodion Starodubenko",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rodionstarodubenko/fsd-generator.git"
+  },
+  "keywords": [
+    "fsd",
+    "feature-sliced-design",
+    "generator",
+    "cli",
+    "react",
+    "scaffold"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "node cli.js",
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint .",
+    "test": "yarn build && vitest run",
+    "test:ui": "yarn build && vitest --ui",
+    "test:coverage": "yarn build && vitest run --coverage",
+    "prepublishOnly": "yarn build && yarn test"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "commander": "^13.0.1",
+    "enquirer": "^2.4.1",
+    "inquirer": "^12.3.0",
+    "jiti": "^2.6.1",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^25.0.6",
+    "@vitest/coverage-v8": "4.0.16",
+    "@vitest/ui": "^4.0.16",
+    "eslint": "^9.39.1",
+    "tsx": "^4.19.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite-tsconfig-paths": "^6.0.4",
+    "vitest": "^4.0.16"
+  }
+}

package/templates/entity/model-ui-basic/Component.styles.ts

@@ -0,0 +1 @@
+// Styles for {{componentName}}

package/templates/entity/model-ui-basic/Component.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export const {{componentName}}Root = styled.div`
+  padding: 1rem;
+  border: 1px solid #ccc;
+`;
+
+export interface {{componentName}}Props {
+  className?: string;
+}
+
+export const {{componentName}} = ({ className }: {{componentName}}Props) => {
+  return (
+    <{{componentName}}Root className={className}>
+      {{componentName}} Entity
+    </{{componentName}}Root>
+  );
+};

package/templates/feature/ui-model-basic/Component.styles.ts

@@ -0,0 +1 @@
+// Styles for Feature {{componentName}}

package/templates/feature/ui-model-basic/Component.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const {{componentName}}Root = styled.div`
+  padding: 1rem;
+`;
+
+export interface {{componentName}}Props {
+  className?: string;
+}
+
+export const {{componentName}} = ({ className }: {{componentName}}Props) => {
+  return (
+    <{{componentName}}Root className={className}>
+      Feature: {{componentName}}
+    </{{componentName}}Root>
+  );
+};

package/templates/page/ui-basic/Component.styles.ts

@@ -0,0 +1 @@
+// Styles for Page {{componentName}}

package/templates/page/ui-basic/Component.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const {{componentName}}Root = styled.div`
+  min-height: 100vh;
+`;
+
+export interface {{componentName}}Props {
+  className?: string;
+}
+
+export const {{componentName}} = ({ className }: {{componentName}}Props) => {
+  return (
+    <{{componentName}}Root className={className}>
+      <h1>Page: {{componentName}}</h1>
+    </{{componentName}}Root>
+  );
+};

package/templates/preset/table/entity/api/create/Component.tsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import type { {{componentName}} } from '../model/types';
+
+// Mock API delay
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+export function useCreate{{componentName}}() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const mutate = async (newItem: Omit<{{componentName}}, 'id'>) => {
+    setIsLoading(true);
+    await delay(500);
+    console.log('Created:', newItem);
+    setIsLoading(false);
+    return { ...newItem, id: Math.random().toString() } as {{componentName}};
+  };
+
+  return { mutate, isLoading };
+}

package/templates/preset/table/entity/api/delete/Component.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+// Mock API delay
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+export function useDelete{{componentName}}() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const mutate = async (id: string) => {
+    setIsLoading(true);
+    await delay(500);
+    console.log('Deleted:', id);
+    setIsLoading(false);
+  };
+
+  return { mutate, isLoading };
+}

package/templates/preset/table/entity/api/get/Component.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import type { {{componentName}} } from '../model/types';
+import { mock{{componentName}}Data } from '../model/types';
+
+// Mock API delay
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+export function useGet{{componentName}}s() {
+  const [data, setData] = useState<{{componentName}}[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    
+    async function fetchData() {
+      setIsLoading(true);
+      try {
+        await delay(500);
+        if (mounted) setData(mock{{componentName}}Data);
+      } catch (e) {
+        if (mounted) setError(e as Error);
+      } finally {
+        if (mounted) setIsLoading(false);
+      }
+    }
+
+    fetchData();
+
+    return () => { mounted = false; };
+  }, []);
+
+  return { data, isLoading, error };
+}

package/templates/preset/table/entity/api/update/Component.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import type { {{componentName}} } from '../model/types';
+
+// Mock API delay
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+export function useUpdate{{componentName}}() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const mutate = async (id: string, updates: Partial<{{componentName}}>) => {
+    setIsLoading(true);
+    await delay(500);
+    console.log('Updated:', id, updates);
+    setIsLoading(false);
+  };
+
+  return { mutate, isLoading };
+}

package/templates/preset/table/entity/model.ts

@@ -0,0 +1,9 @@
+export interface { { componentName } } {
+    id: string;
+    name: string;
+}
+
+export const mock{{ componentName }}Data: { { componentName } } [] = [
+    { id: '1', name: 'Test {{componentName}} 1' },
+    { id: '2', name: 'Test {{componentName}} 2' },
+];

package/templates/preset/table/entity/ui/Component.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import type { {{componentName}} as {{componentName}}Type } from '../model/types';
+
+const Root = styled.div`
+    padding: 10px;
+    border: 1px solid #ccc;
+`;
+
+export const {{componentName}} = (props: { data: {{componentName}}Type }) => {
+  return <Root>{props.data.name}</Root>;
+};

package/templates/preset/table/feature/buttons/create/Component.styles.ts

@@ -0,0 +1 @@
+// No styles

package/templates/preset/table/feature/buttons/create/Component.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { useCreate{{componentName}} } from '{{apiImportPath}}';
+
+const Button = styled.button`
+  padding: 0.5rem 1rem;
+  margin: 0 0.5rem;
+  border-radius: 4px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  
+  &:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: #0056b3;
+  }
+`;
+
+export const Create{{componentName}}Button = () => {
+  const { mutate, isLoading } = useCreate{{componentName}}();
+  return (
+    <Button onClick={() => mutate({ /* mock data */ } as any)} disabled={isLoading}>
+      {isLoading ? 'Creating...' : 'Create {{componentName}}'}
+    </Button>
+  );
+};

package/templates/preset/table/feature/buttons/delete/Component.styles.ts

@@ -0,0 +1 @@
+// No styles

package/templates/preset/table/feature/buttons/delete/Component.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { useDelete{{componentName}} } from '{{apiImportPath}}';
+
+const Button = styled.button`
+  padding: 0.5rem 1rem;
+  margin: 0 0.5rem;
+  border-radius: 4px;
+  border: none;
+  background-color: #dc3545;
+  color: white;
+  cursor: pointer;
+  
+  &:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: #c82333;
+  }
+`;
+
+export const Delete{{componentName}}Button = ({ id }: { id: string }) => {
+  const { mutate, isLoading } = useDelete{{componentName}}();
+  return (
+    <Button onClick={() => mutate(id)} disabled={isLoading}>
+      {isLoading ? 'Deleting...' : 'Delete'}
+    </Button>
+  );
+};

package/templates/preset/table/feature/buttons/edit/Component.styles.ts

@@ -0,0 +1 @@
+// No styles

package/templates/preset/table/feature/buttons/edit/Component.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { useUpdate{{componentName}} } from '{{apiImportPath}}';
+
+const Button = styled.button`
+  padding: 0.5rem 1rem;
+  margin: 0 0.5rem;
+  border-radius: 4px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  
+  &:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: #0056b3;
+  }
+`;
+
+export const Edit{{componentName}}Button = ({ id }: { id: string }) => {
+  const { mutate, isLoading } = useUpdate{{componentName}}();
+  return (
+    <Button onClick={() => mutate(id, {})} disabled={isLoading}>
+      {isLoading ? 'Saving...' : 'Edit'}
+    </Button>
+  );
+};

package/templates/preset/table/feature/buttons.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const Button = styled.button`
+  padding: 8px 16px;
+  margin: 0 4px;
+  cursor: pointer;
+`;
+
+export const Create{{componentName}}Button = () => <Button>Create</Button>;
+export const Edit{{componentName}}Button = () => <Button>Edit</Button>;
+export const Delete{{componentName}}Button = () => <Button>Delete</Button>;

package/templates/preset/table/page/page/Component.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { {{componentName}}Table } from '{{widgetImportPath}}/ui/{{componentName}}Table';
+
+const PageWrapper = styled.div`
+  padding: 2rem;
+`;
+
+const Title = styled.h1`
+  margin-bottom: 2rem;
+`;
+
+export const {{componentName}}Page = () => {
+  return (
+    <PageWrapper>
+      <Title>{{componentName}} Management</Title>
+      <{{componentName}}Table />
+    </PageWrapper>
+  );
+};

package/templates/preset/table/page/page.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { {{componentName}}Table } from '../../widgets/{{componentName}}Table/ui/{{componentName}}Table';
+
+const PageWrapper = styled.div`
+  padding: 2rem;
+`;
+
+const Title = styled.h1`
+  margin-bottom: 2rem;
+`;
+
+export const {{componentName}}Page = () => {
+  return (
+    <PageWrapper>
+      <Title>{{componentName}} Management</Title>
+      <{{componentName}}Table />
+    </PageWrapper>
+  );
+};

package/templates/preset/table/widget/table/Component.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { mock{{componentName}}Data } from '{{entityImportPath}}/model/types';
+import { Create{{componentName}}Button, Edit{{componentName}}Button, Delete{{componentName}}Button } from '{{featureImportPath}}/ui';
+
+const TableWrapper = styled.div`
+  border: 1px solid #eee;
+  padding: 1rem;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  
+  th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+`;
+
+export const {{componentName}}Table = () => {
+  return (
+    <TableWrapper>
+      <div style={{ marginBottom: '1rem' }}>
+        <Create{{componentName}}Button />
+      </div>
+      <Table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {mock{{componentName}}Data.map((item) => (
+            <tr key={item.id}>
+              <td>{item.id}</td>
+              <td>{item.name}</td>
+              <td>
+                <Edit{{componentName}}Button id={item.id} />
+                <Delete{{componentName}}Button id={item.id} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </TableWrapper>
+  );
+};

package/templates/preset/table/widget/table.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { {{componentName}}, mock{{componentName}}Data } from '../../../entities/{{componentName}}/model';
+import { Create{{componentName}}Button, Edit{{componentName}}Button, Delete{{componentName}}Button } from '../../../features/Manage{{componentName}}/ui/Manage{{componentName}}';
+
+const TableWrapper = styled.div`
+  border: 1px solid #eee;
+  padding: 1rem;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  
+  th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+`;
+
+export const {{componentName}}Table = () => {
+  return (
+    <TableWrapper>
+      <div style={{ marginBottom: '1rem' }}>
+        <Create{{componentName}}Button />
+      </div>
+      <Table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {mock{{componentName}}Data.map((item) => (
+            <tr key={item.id}>
+              <td>{item.id}</td>
+              <td>{item.name}</td>
+              <td>
+                <Edit{{componentName}}Button />
+                <Delete{{componentName}}Button />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </TableWrapper>
+  );
+};

package/templates/shared/ui-basic/Component.styles.ts

@@ -0,0 +1 @@
+// Styles for {{componentName}}

package/templates/shared/ui-basic/Component.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export const {{componentName}}Root = styled.div`
+  display: flex;
+`;
+
+export interface {{componentName}}Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const {{componentName}} = ({ className, children }: {{componentName}}Props) => {
+  return (
+    <{{componentName}}Root className={className}>
+      {children}
+    </{{componentName}}Root>
+  );
+};

package/templates/widget/ui-basic/Component.styles.ts

@@ -0,0 +1 @@
+// Styles for Widget {{componentName}}

package/templates/widget/ui-basic/Component.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export const {{componentName}}Root = styled.div`
+  display: grid;
+  gap: 1rem;
+`;
+
+export interface {{componentName}}Props {
+  className?: string;
+}
+
+export const {{componentName}} = ({ className }: {{componentName}}Props) => {
+  return (
+    <{{componentName}}Root className={className}>
+      Widget: {{componentName}}
+    </{{componentName}}Root>
+  );
+};