@t1ep1l0t/create-fsd 1.0.1 → 2.0.0

package/README.md

@@ -1,8 +1,8 @@
 <div align="center">
 
-# 🚀 create-fsd
+# 🚀 @t1ep1l0t/create-fsd
 
-**Scaffold modern React 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,9 +14,9 @@
 
 ## 📖 About
 
-**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.js, Nuxt, Svelte) coming soon!
+> 🎯 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
@@ -38,7 +39,7 @@
 - **Axios** - HTTP client with interceptors configured
 - **React Query** - Powerful server state management
 - **i18next** - Internationalization (i18n) support
-- **ESLint** - Code quality and consistency
+- **ESLint & Prettier** - Code quality and consistency
 
 ### 🎨 **Developer Experience**
 - Path aliases configured (`@app`, `@pages`, `@widgets`, `@features`, `@entities`, `@shared`)
@@ -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.1",
+  "version": "2.0.0",
   "description": "CLI tool to create React projects with FSD architecture",
   "type": "module",
   "bin": {

package/templates/react/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/templates/react/.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+build
+.vite
+coverage
+*.min.js
+package-lock.json

package/templates/react/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/templates/react/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

package/templates/react/eslint.config.js

@@ -3,9 +3,14 @@ import globals from 'globals'
 import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
+import reactQuery from '@tanstack/eslint-plugin-query'
+import importPlugin from 'eslint-plugin-import'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import prettier from 'eslint-plugin-prettier'
+import prettierConfig from 'eslint-config-prettier'
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'node_modules', '.vite'] },
   {
     files: ['**/*.{js,jsx}'],
     languageOptions: {
@@ -17,23 +22,117 @@ export default [
         sourceType: 'module',
       },
     },
-    settings: { react: { version: '18.3' } },
+    settings: {
+      react: { version: '18.3' },
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx'],
+        },
+      },
+    },
     plugins: {
       react,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
+      '@tanstack/query': reactQuery,
+      import: importPlugin,
+      'jsx-a11y': jsxA11y,
+      prettier,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
       ...react.configs['jsx-runtime'].rules,
       ...reactHooks.configs.recommended.rules,
+      ...jsxA11y.configs.recommended.rules,
+      ...prettierConfig.rules,
+
+      // React rules
       'react/jsx-no-target-blank': 'off',
+      'react/prop-types': 'off',
       'react-refresh/only-export-components': [
         'warn',
         { allowConstantExport: true },
       ],
-      'react/prop-types': 'off',
+
+      // React Query rules
+      '@tanstack/query/exhaustive-deps': 'error',
+      '@tanstack/query/no-rest-destructuring': 'warn',
+      '@tanstack/query/stable-query-client': 'error',
+
+      // Import rules
+      'import/order': [
+        'error',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            ['parent', 'sibling'],
+            'index',
+            'object',
+            'type',
+          ],
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+          pathGroups: [
+            {
+              pattern: 'react',
+              group: 'external',
+              position: 'before',
+            },
+            {
+              pattern: '@app/**',
+              group: 'internal',
+              position: 'before',
+            },
+            {
+              pattern: '@pages/**',
+              group: 'internal',
+              position: 'before',
+            },
+            {
+              pattern: '@widgets/**',
+              group: 'internal',
+              position: 'before',
+            },
+            {
+              pattern: '@features/**',
+              group: 'internal',
+              position: 'before',
+            },
+            {
+              pattern: '@entities/**',
+              group: 'internal',
+              position: 'before',
+            },
+            {
+              pattern: '@shared/**',
+              group: 'internal',
+              position: 'before',
+            },
+          ],
+          pathGroupsExcludedImportTypes: ['react'],
+        },
+      ],
+      'import/no-unresolved': 'off',
+      'import/no-duplicates': 'error',
+      'import/newline-after-import': 'error',
+
+      // Accessibility rules
+      'jsx-a11y/anchor-is-valid': [
+        'error',
+        {
+          components: ['Link'],
+          specialLink: ['to'],
+        },
+      ],
+
+      // Prettier integration
+      'prettier/prettier': 'error',
     },
   },
 ]

package/templates/react/package.json

@@ -7,6 +7,9 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,json,css}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,json,css}\"",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -16,8 +19,13 @@
     "zustand": "^4.5.0",
     "axios": "^1.6.7",
     "i18next": "^23.8.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-http-backend": "^3.0.2",
     "react-i18next": "^14.0.5",
-    "@tanstack/react-query": "^5.22.2"
+    "@tanstack/react-query": "^5.22.2",
+    "classnames": "^2.5.1",
+    "react-hook-form": "^7.65.0",
+    "@hookform/resolvers": "^5.2.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
@@ -30,6 +38,13 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
+    "@tanstack/eslint-plugin-query": "^5.62.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "@tailwindcss/vite": "^4.0.0",
     "tailwindcss": "^4.0.0"
   }

package/templates/react/public/locales/en/basic.json

@@ -0,0 +1,9 @@
+{
+  "welcome": "Welcome to FSD React App",
+  "home": "Home",
+  "about": "About",
+  "counter": "Counter",
+  "increment": "Increment",
+  "decrement": "Decrement",
+  "reset": "Reset"
+}

package/templates/react/public/locales/ru/basic.json

@@ -0,0 +1,9 @@
+{
+  "welcome": "Добро пожаловать в FSD React приложение",
+  "home": "Главная",
+  "about": "О нас",
+  "counter": "Счетчик",
+  "increment": "Увеличить",
+  "decrement": "Уменьшить",
+  "reset": "Сбросить"
+}

package/templates/react/src/app/providers/i18n/index.js

@@ -1,40 +1,37 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-
-const resources = {
-  en: {
-    translation: {
-      welcome: 'Welcome to FSD React App',
-      home: 'Home',
-      about: 'About',
-      counter: 'Counter',
-      increment: 'Increment',
-      decrement: 'Decrement',
-      reset: 'Reset',
-    },
-  },
-  ru: {
-    translation: {
-      welcome: 'Добро пожаловать в FSD React приложение',
-      home: 'Главная',
-      about: 'О нас',
-      counter: 'Счетчик',
-      increment: 'Увеличить',
-      decrement: 'Уменьшить',
-      reset: 'Сбросить',
-    },
-  },
-};
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
 
 i18n
+  .use(Backend)
+  .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    resources,
     lng: 'en',
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false,
     },
+    detection: {
+      order: ['path', 'cookie', 'localStorage'],
+      caches: ['cookie', 'localStorage'],
+    },
+    fallbackNS: 'basic',
+    ns: ['basic'],
+    defaultNS: 'basic',
+    backend: {
+      loadPath: '/locales/{{lng}}/{{ns}}.json',
+    },
+    missingKeyHandler: (lng, ns, key) => {
+      console.warn(`Missing translation: ${lng}:${ns}:${key}`);
+    },
   });
 
+document.documentElement.lang = i18n.language;
+
+i18n.on('languageChanged', (lng) => {
+  document.documentElement.lang = lng;
+});
+
 export default i18n;

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>
+)

package/templates/react/vite.config.js

@@ -1,7 +1,11 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
-import path from 'path';
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
@@ -16,4 +20,4 @@ export default defineConfig({
       '@shared': path.resolve(__dirname, './src/shared'),
     },
   },
-});
+})