@t1ep1l0t/create-fsd 1.0.0 → 1.0.2

package/README.md

@@ -1,28 +1,58 @@
-# create-fsd
+<div align="center">
 
-CLI tool to create React projects with Feature-Sliced Design (FSD) architecture.
+# 🚀 @t1ep1l0t/create-fsd
 
-## Features
+**Scaffold modern frontend applications with Feature-Sliced Design architecture**
 
-- Feature-Sliced Design architecture
-- React 18 with Vite
-- Pre-configured libraries:
-  - React Router DOM (routing)
-  - Zustand (state management)
-  - Axios (HTTP client with interceptors)
-  - React Query (server state management)
-  - i18next (internationalization)
-  - TailwindCSS v4 (styling)
-- Example code for all libraries
-- Path aliases configured (@app, @pages, @widgets, @features, @entities, @shared)
-- ESLint configured
+[![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)
+[![Node.js Version](https://img.shields.io/badge/node-%3E%3D16.0.0-brightgreen)](https://nodejs.org/)
 
-## Usage
+</div>
+
+---
+
+## 📖 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!
+
+> 🎯 Currently supports **React** template. More frameworks (Vue, Next, Nuxt, Svelte) coming soon!
+
+---
+
+## ✨ Features
+
+### 🏗️ **Architecture**
+- **Feature-Sliced Design (FSD)** - Scalable and maintainable project structure
+- Clear separation of concerns across layers
+- Ready-to-use folder structure
+
+### ⚡ **Modern Stack**
+- **React 18** - Latest React with concurrent features
+- **Vite** - Lightning-fast build tool and dev server
+- **TailwindCSS v4** - Utility-first CSS framework
+
+### 📦 **Pre-configured Libraries**
+- **React Router DOM** - Declarative routing
+- **Zustand** - Lightweight state management
+- **Axios** - HTTP client with interceptors configured
+- **React Query** - Powerful server state management
+- **i18next** - Internationalization (i18n) support
+- **ESLint & Prettier** - Code quality and consistency
+
+### 🎨 **Developer Experience**
+- Path aliases configured (`@app`, `@pages`, `@widgets`, `@features`, `@entities`, `@shared`)
+- Example code demonstrating best practices
+- Zero configuration needed - start coding immediately
+
+---
+
+## 🚀 Quick Start
 
 ### Using npm
 
 ```bash
-npm create fsd my-app -- --template react
+npm create @t1ep1l0t/fsd my-app
 cd my-app
 npm run dev
 ```
@@ -30,132 +60,148 @@ npm run dev
 ### Using npx
 
 ```bash
-npx create-fsd my-app --template react
+npx @t1ep1l0t/create-fsd my-app
 cd my-app
 npm run dev
 ```
 
-### Local testing
+### With template option
 
 ```bash
-node bin/cli.js my-app --template react
-cd my-app
-npm run dev
+npx @t1ep1l0t/create-fsd my-app --template react
 ```
 
-## Command Line Options
+---
+
+## 📂 Project Structure
+
+The generated project follows the FSD architecture with clear layer separation:
 
-```bash
-create-fsd <project-name> [options]
+```
+src/
+├── 📱 app/              # Application initialization layer
+│   ├── providers/       # App providers (Router, i18n, Query Client)
+│   ├── styles/          # Global styles
+│   └── App.jsx          # Root component
+│
+├── 📄 pages/            # Pages layer - route components
+│   ├── home/            # Home page
+│   └── about/           # About page
+│
+├── 🧩 widgets/          # Widgets layer - composite UI blocks
+│   ├── Header/          # Header widget
+│   └── layouts/         # Layout components
+│
+├── ⚙️ features/         # Features layer - user scenarios
+│   └── .gitkeep         # (Ready for your features)
+│
+├── 🗂️ entities/         # Entities layer - business entities
+│   └── .gitkeep         # (Ready for your entities)
+│
+└── 🔧 shared/           # Shared layer - reusable code
+    ├── api/             # API client configuration
+    ├── store/           # Zustand stores
+    └── ui/              # UI kit components
 ```
 
-### Options
+### Layer Responsibilities
 
-- `-t, --template <template>` - Template to use (default: "react")
+| Layer | Purpose | Examples |
+|-------|---------|----------|
+| **app** | Application initialization and setup | Providers, global styles, routing setup |
+| **pages** | Route-level components | HomePage, AboutPage, ProfilePage |
+| **widgets** | Complex composite components | Header, Footer, Sidebar, UserCard |
+| **features** | User interactions and business features | LoginForm, CommentsList, ProductFilters |
+| **entities** | Business domain models | User, Product, Order |
+| **shared** | Reusable utilities and UI | Button, Input, formatDate, API client |
 
-### Examples
+---
 
-```bash
-# Create a new React project with FSD architecture
-create-fsd my-awesome-app --template react
+## 🎯 What's Included
 
-# Short form
-create-fsd my-awesome-app -t react
-```
+### Example Implementations
 
-## Project Structure
+The generated project includes working examples for all included libraries:
 
-The generated project follows FSD architecture:
+- ✅ **Routing** - Multi-page setup with React Router
+- ✅ **State Management** - Counter example with Zustand
+- ✅ **API Integration** - Axios client with interceptors
+- ✅ **Data Fetching** - React Query setup and usage
+- ✅ **Internationalization** - i18n configuration with language switching
+- ✅ **Styling** - TailwindCSS components and utilities
+- ✅ **Code Quality** - ESLint rules configured
 
-```
-src/
-├── app/              # Application initialization
-│   ├── providers/    # Providers (router, i18n, etc.)
-│   ├── styles/       # Global styles
-│   └── App.jsx       # Root component
-├── pages/            # Application pages
-│   ├── home/
-│   └── about/
-├── widgets/          # Composite UI components
-│   ├── Header/
-│   └── layouts/
-├── features/         # Business features (empty, ready for your code)
-├── entities/         # Business entities (empty, ready for your code)
-└── shared/           # Shared code
-    ├── api/          # API client & query configuration
-    ├── store/        # Zustand stores
-    └── ui/           # Reusable UI components
-```
+---
+
+## 🛠️ Available Templates
+
+| Template | Status | Description |
+|----------|--------|-------------|
+| **React** | ✅ Available | React 18 + Vite + FSD architecture |
+| **Vue** | 🔜 Coming Soon | Vue 3 + Vite + FSD architecture |
+| **Next.js** | 🔜 Coming Soon | Next.js + FSD architecture |
+| **Nuxt** | 🔜 Coming Soon | Nuxt 3 + FSD architecture |
+| **Svelte** | 🔜 Coming Soon | Svelte + Vite + FSD architecture |
 
-## Publishing to npm
+---
 
-### 1. Login to npm
+## 📋 CLI Options
 
 ```bash
-npm login
+create-fsd <project-name> [options]
 ```
 
-### 2. Update package.json
+### Options
 
-Make sure your package.json has:
-- Unique package name
-- Correct version
-- Valid author information
+| Option | Alias | Description | Default |
+|--------|-------|-------------|---------|
+| `--template <name>` | `-t` | Template to use | `react` |
 
-### 3. Publish
+### Examples
 
 ```bash
-npm publish
-```
+# Create project with React template (default)
+npx @t1ep1l0t/create-fsd my-app
 
-### 4. Test published package
+# Explicitly specify template
+npx @t1ep1l0t/create-fsd my-app --template react
 
-```bash
-npm create fsd test-app -- --template react
+# Short form
+npx @t1ep1l0t/create-fsd my-app -t react
 ```
 
-## Development
-
-### Install dependencies
+---
 
-```bash
-npm install
-```
+## 🎓 Learn More
 
-### Test locally
+- [Feature-Sliced Design Documentation](https://feature-sliced.design/)
+- [React Documentation](https://react.dev/)
+- [Vite Documentation](https://vitejs.dev/)
+- [TailwindCSS Documentation](https://tailwindcss.com/)
 
-```bash
-npm test
-# or
-node bin/cli.js test-project --template react
-```
+---
 
-### Add new templates
+## 🤝 Contributing
 
-1. Create a new folder in `templates/` directory
-2. Add all necessary files for the template
-3. Update CLI help text if needed
+Contributions are welcome! Feel free to:
 
-## Adding More Libraries
+- Report bugs
+- Suggest new features
+- Submit pull requests
+- Add new framework templates
 
-To add more libraries to the template:
+---
 
-1. Add the library to `templates/react/package.json`
-2. Create example usage in the appropriate FSD layer
-3. Add configuration if needed (e.g., in `src/app/providers/`)
-4. Update the template README with the new library
+## 📄 License
 
-### Example: Adding React Hook Form
+MIT © [t1ep1l0t](https://github.com/t1ep1l0t)
 
-1. Add to dependencies:
-```json
-"react-hook-form": "^7.50.0"
-```
+---
 
-2. Create example in `src/features/auth/LoginForm.jsx`
+<div align="center">
 
-3. Update documentation
+**Made with ❤️ for the developer community**
 
-## License
+[Report Bug](https://github.com/t1ep1l0t/create-fsd/issues) · [Request Feature](https://github.com/t1ep1l0t/create-fsd/issues)
 
-MIT
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t1ep1l0t/create-fsd",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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/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'),
     },
   },
-});
+})