@t1ep1l0t/create-fsd 1.0.2 → 2.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 # 🚀 @t1ep1l0t/create-fsd
 
-**Scaffold modern frontend applications with Feature-Sliced Design architecture**
+**Scaffold modern frontend applications with Feature-Sliced Design architecture and generate FSD structures on-the-fly**
 
 [![npm version](https://img.shields.io/npm/v/@t1ep1l0t/create-fsd.svg)](https://www.npmjs.com/package/@t1ep1l0t/create-fsd)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -14,7 +14,7 @@
 
 ## 📖 About
 
-**@t1ep1l0t/create-fsd** is a powerful CLI tool that helps you quickly bootstrap production-ready React applications following the [Feature-Sliced Design (FSD)](https://feature-sliced.design/) architectural methodology. Get started with a fully configured project in seconds!
+**@t1ep1l0t/create-fsd** is a powerful CLI tool that helps you quickly bootstrap production-ready React applications following the [Feature-Sliced Design (FSD)](https://feature-sliced.design/) architectural methodology. Not only can you create fully configured projects in seconds, but you can also generate FSD-compliant structures for features, entities, widgets, and pages on-demand!
 
 > 🎯 Currently supports **React** template. More frameworks (Vue, Next, Nuxt, Svelte) coming soon!
 
@@ -24,8 +24,9 @@
 
 ### 🏗️ **Architecture**
 - **Feature-Sliced Design (FSD)** - Scalable and maintainable project structure
+- **FSD Structure Generator** - Quickly generate features, entities, widgets, and pages
 - Clear separation of concerns across layers
-- Ready-to-use folder structure
+- Ready-to-use folder structure with automated scaffolding
 
 ### ⚡ **Modern Stack**
 - **React 18** - Latest React with concurrent features
@@ -73,6 +74,68 @@ npx @t1ep1l0t/create-fsd my-app --template react
 
 ---
 
+## 🏗️ FSD Structure Generator
+
+After creating your project, you can use the `fsd` command to quickly generate FSD-compliant directory structures for features, entities, widgets, and pages.
+
+### Usage
+
+```bash
+create-fsd fsd [options]
+```
+
+### Options
+
+| Option | Alias | Description |
+|--------|-------|-------------|
+| `--feature <name>` | `-f` | Create feature in `features/` |
+| `--entity <name>` | `-e` | Create entity in `entities/` |
+| `--widget <name>` | `-w` | Create widget in `widgets/` |
+| `--page <name>` | `-p` | Create page in `pages/` |
+| `--segments <segments...>` | `-s` | Segments to create (e.g., model ui api lib) |
+| `--index` | `-i` | Create index files in root and all segments |
+
+### Examples
+
+```bash
+# Create a feature with UI and model segments
+create-fsd fsd -f user -s ui model -i
+
+# Result:
+# src/features/user/
+# ├── ui/
+# │   └── index.js
+# ├── model/
+# │   └── index.js
+# └── index.js (exports all segments)
+
+# Create an entity with API and lib segments
+create-fsd fsd -e product -s api lib -i
+
+# Create a widget without index files (uses .gitkeep)
+create-fsd fsd -w header -s ui model
+
+# Create a page
+create-fsd fsd -p home -s ui api -i
+
+# Add more segments to existing structure
+create-fsd fsd -f user -s api config -i
+# This will add api/ and config/ folders and update the root index.js
+```
+
+### Common Segment Names
+
+| Segment | Purpose |
+|---------|---------|
+| `ui` | UI components |
+| `model` | Business logic, state, hooks |
+| `api` | API requests and endpoints |
+| `lib` | Helper functions and utilities |
+| `config` | Configuration and constants |
+| `types` | TypeScript types/interfaces |
+
+---
+
 ## 📂 Project Structure
 
 The generated project follows the FSD architecture with clear layer separation:
@@ -145,19 +208,21 @@ The generated project includes working examples for all included libraries:
 
 ---
 
-## 📋 CLI Options
+## 📋 CLI Commands
+
+### Create Project
 
 ```bash
 create-fsd <project-name> [options]
 ```
 
-### Options
+#### Options
 
 | Option | Alias | Description | Default |
 |--------|-------|-------------|---------|
 | `--template <name>` | `-t` | Template to use | `react` |
 
-### Examples
+#### Examples
 
 ```bash
 # Create project with React template (default)
@@ -170,6 +235,39 @@ npx @t1ep1l0t/create-fsd my-app --template react
 npx @t1ep1l0t/create-fsd my-app -t react
 ```
 
+### Generate FSD Structure
+
+```bash
+create-fsd fsd [options]
+```
+
+#### Options
+
+| Option | Alias | Description | Required |
+|--------|-------|-------------|----------|
+| `--feature <name>` | `-f` | Create feature in `features/` | One layer required |
+| `--entity <name>` | `-e` | Create entity in `entities/` | One layer required |
+| `--widget <name>` | `-w` | Create widget in `widgets/` | One layer required |
+| `--page <name>` | `-p` | Create page in `pages/` | One layer required |
+| `--segments <segments...>` | `-s` | Segments to create | Yes |
+| `--index` | `-i` | Create index files | No |
+
+#### Examples
+
+```bash
+# Create feature with index files
+create-fsd fsd -f authentication -s ui model api -i
+
+# Create entity without index files
+create-fsd fsd -e user -s model api
+
+# Create widget
+create-fsd fsd -w sidebar -s ui lib -i
+
+# Create page
+create-fsd fsd -p dashboard -s ui model -i
+```
+
 ---
 
 ## 🎓 Learn More

package/bin/cli.js

@@ -16,7 +16,7 @@ const program = new Command();
 program
   .name('create-fsd')
   .description('CLI to create React projects with FSD architecture')
-  .version('1.0.0')
+  .version('2.0.0')
   .argument('<project-name>', 'name of the project')
   .option('-t, --template <template>', 'template to use', 'react')
   .action(async (projectName, options) => {
@@ -81,4 +81,148 @@ program
     console.log();
   });
 
+// FSD structure generation command
+program
+  .command('fsd')
+  .description('Generate FSD (Feature-Sliced Design) structure')
+  .option('-f, --feature <name>', 'create feature in features/')
+  .option('-e, --entity <name>', 'create entity in entities/')
+  .option('-w, --widget <name>', 'create widget in widgets/')
+  .option('-p, --page <name>', 'create page in pages/')
+  .option('-s, --segments <segments...>', 'segments to create (e.g., model ui api lib)')
+  .option('-i, --index', 'create index files in root and all segments', false)
+  .action(async (options) => {
+    const { feature, entity, widget, page, segments, index } = options;
+
+    // Determine layer and name based on which flag was used
+    let layer, name, layerType;
+
+    if (feature) {
+      layer = 'features';
+      name = feature;
+      layerType = 'Feature';
+    } else if (entity) {
+      layer = 'entities';
+      name = entity;
+      layerType = 'Entity';
+    } else if (widget) {
+      layer = 'widgets';
+      name = widget;
+      layerType = 'Widget';
+    } else if (page) {
+      layer = 'pages';
+      name = page;
+      layerType = 'Page';
+    } else {
+      console.log(chalk.red('❌ Layer flag is required! Use -f (feature), -e (entity), -w (widget), or -p (page)'));
+      process.exit(1);
+    }
+
+    // Validation
+    if (!segments || segments.length === 0) {
+      console.log(chalk.red('❌ At least one segment is required! Use -s or --segments'));
+      process.exit(1);
+    }
+
+    console.log(chalk.blue.bold(`\n🏗️  Generating FSD structure...\n`));
+    console.log(chalk.cyan(`Layer: ${layer}`));
+    console.log(chalk.cyan(`${layerType}: ${name}`));
+    console.log(chalk.cyan(`Segments: ${segments.join(', ')}`));
+    console.log(chalk.cyan(`Index files: ${index ? 'Yes' : 'No'}\n`));
+
+    const baseDir = path.join(process.cwd(), 'src', layer, name);
+
+    // Check if directory already exists
+    if (fs.existsSync(baseDir)) {
+      console.log(chalk.yellow(`⚠️  Directory ${layer}/${name} already exists!`));
+      console.log(chalk.yellow('Adding segments to existing structure...\n'));
+    }
+
+    // Create directory
+    fs.mkdirSync(baseDir, { recursive: true });
+
+    // Create segments
+    const spinner = ora('Creating segments...').start();
+    try {
+      for (const segment of segments) {
+        const segmentDir = path.join(baseDir, segment);
+        fs.mkdirSync(segmentDir, { recursive: true });
+
+        // Create index file in segment if requested
+        if (index) {
+          const segmentIndexPath = path.join(segmentDir, 'index.js');
+          fs.writeFileSync(segmentIndexPath, '');
+        } else {
+          // Create a .gitkeep file to ensure empty directories are tracked
+          const gitkeepPath = path.join(segmentDir, '.gitkeep');
+          fs.writeFileSync(gitkeepPath, '');
+        }
+      }
+      spinner.succeed('Segments created!');
+    } catch (error) {
+      spinner.fail('Failed to create segments');
+      console.error(error);
+      process.exit(1);
+    }
+
+    // Create index file if requested
+    if (index) {
+      const indexSpinner = ora('Creating root index file...').start();
+      try {
+        const indexPath = path.join(baseDir, 'index.js');
+
+        // If index file exists, read existing exports and merge with new ones
+        let existingExports = new Set();
+        if (fs.existsSync(indexPath)) {
+          const existingContent = fs.readFileSync(indexPath, 'utf-8');
+          const exportMatches = existingContent.matchAll(/export \* from ['"]\.\/(.+?)['"]/g);
+          for (const match of exportMatches) {
+            existingExports.add(match[1]);
+          }
+        }
+
+        // Add new segments to existing exports
+        segments.forEach(segment => existingExports.add(segment));
+
+        // Generate exports for all segments
+        let indexContent = `// ${name} exports\n\n`;
+
+        // Sort segments for consistency
+        const allSegments = Array.from(existingExports).sort();
+        for (const segment of allSegments) {
+          indexContent += `export * from './${segment}';\n`;
+        }
+
+        fs.writeFileSync(indexPath, indexContent);
+
+        if (existingExports.size > segments.length) {
+          indexSpinner.succeed('Root index file updated with new exports!');
+        } else {
+          indexSpinner.succeed('Root index file created!');
+        }
+      } catch (error) {
+        indexSpinner.fail('Failed to create root index file');
+        console.error(error);
+        process.exit(1);
+      }
+    }
+
+    // Success message
+    console.log(chalk.green.bold('\n✅ FSD structure generated successfully!\n'));
+    console.log(chalk.cyan('Generated structure:'));
+    console.log(chalk.white(`  src/${layer}/${name}/`));
+    segments.forEach((segment, idx) => {
+      const isLast = idx === segments.length - 1;
+      const prefix = index ? '├──' : (isLast ? '└──' : '├──');
+      console.log(chalk.white(`    ${prefix} ${segment}/`));
+      if (index) {
+        console.log(chalk.white(`    │   └── index.js`));
+      }
+    });
+    if (index) {
+      console.log(chalk.white(`    └── index.js`));
+    }
+    console.log();
+  });
+
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t1ep1l0t/create-fsd",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "CLI tool to create React projects with FSD architecture",
   "type": "module",
   "bin": {

package/templates/react/src/app/styles/global.css

@@ -0,0 +1,15 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 14px;
+}
+
+body {
+  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;
+}

package/templates/react/src/app/styles/index.css

@@ -7,22 +7,3 @@
   --color-danger: #ef4444;
   --color-warning: #f59e0b;
 }
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  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;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/templates/react/src/main.jsx

@@ -1,11 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from '@app/App';
-import '@app/styles/index.css';
-import '@app/providers/i18n';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import React from 'react'
+
+import ReactDOM from 'react-dom/client'
+
+import { App } from '@app/App'
+import '@app/styles/index.css'
+import '@app/styles/global.css'
+import '@app/providers/i18n'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)