@t1ep1l0t/create-fsd 1.0.1 → 1.0.2

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**
 
 [![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. Get started with a fully configured project in seconds!
 
-> 🎯 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!
 
 ---
 
@@ -38,7 +38,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`)

package/package.json

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