@t1ep1l0t/create-fsd 2.0.2 → 3.0.0

package/templates/react-ts/eslint.config.js

@@ -0,0 +1,143 @@
+import js from '@eslint/js'
+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'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules', '.vite'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: {
+      react: { version: '18.3' },
+      'import/resolver': {
+        node: {
+          extensions: ['.ts', '.tsx'],
+        },
+      },
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      '@tanstack/query': reactQuery,
+      import: importPlugin,
+      'jsx-a11y': jsxA11y,
+      prettier,
+    },
+    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',
+
+      // TypeScript rules
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+
+      // 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-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FSD React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/react-ts/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "fsd-react-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,css}\"",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.0",
+    "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",
+    "classnames": "^2.5.1",
+    "react-hook-form": "^7.65.0",
+    "@hookform/resolvers": "^5.2.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.3",
+    "typescript": "^5.6.3",
+    "@eslint/js": "^9.17.0",
+    "eslint": "^9.17.0",
+    "globals": "^15.14.0",
+    "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",
+    "typescript-eslint": "^8.18.2"
+  }
+}

package/templates/react-ts/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-ts/public/locales/ru/basic.json

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

package/templates/react-ts/src/app/App.tsx

@@ -0,0 +1,11 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from '@app/providers/router';
+import { queryClient } from '@shared/api/query-client';
+
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider />
+    </QueryClientProvider>
+  );
+}

package/templates/react-ts/src/app/providers/i18n/index.ts

@@ -0,0 +1,37 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    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-ts/src/app/providers/router/index.tsx

@@ -0,0 +1,25 @@
+import { createBrowserRouter, RouterProvider as RRDRouterProvider } from 'react-router-dom';
+import { HomePage } from '@pages/home';
+import { AboutPage } from '@pages/about';
+import { BaseLayout } from '@widgets/layouts/BaseLayout';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <BaseLayout />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'about',
+        element: <AboutPage />,
+      },
+    ],
+  },
+]);
+
+export function RouterProvider() {
+  return <RRDRouterProvider router={router} />;
+}

package/templates/react-ts/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-ts/src/app/styles/index.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #3b82f6;
+  --color-secondary: #8b5cf6;
+  --color-success: #10b981;
+  --color-danger: #ef4444;
+  --color-warning: #f59e0b;
+}

package/templates/react-ts/src/main.tsx

@@ -0,0 +1,14 @@
+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-ts/src/pages/about/AboutPage.tsx

@@ -0,0 +1,91 @@
+import { Card } from '@shared/ui/Card';
+import { useTranslation } from 'react-i18next';
+
+export function AboutPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <h1 className="text-4xl font-bold text-gray-900">{t('about')}</h1>
+
+      <Card title="FSD Architecture">
+        <p className="text-gray-700 leading-relaxed mb-4">
+          This project follows Feature-Sliced Design (FSD) architecture, which provides
+          a clear and scalable folder structure for your React applications.
+        </p>
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">app/</span>
+            <span className="text-gray-600">- Application initialization and providers</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">pages/</span>
+            <span className="text-gray-600">- Application pages</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">widgets/</span>
+            <span className="text-gray-600">- Complex UI components</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">features/</span>
+            <span className="text-gray-600">- Business features</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">entities/</span>
+            <span className="text-gray-600">- Business entities</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">shared/</span>
+            <span className="text-gray-600">- Reusable code and UI components</span>
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Configured Libraries">
+        <ul className="space-y-3">
+          <li>
+            <strong className="text-blue-600">React Router DOM</strong>
+            <p className="text-gray-600 text-sm">Client-side routing with nested routes</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">Zustand</strong>
+            <p className="text-gray-600 text-sm">Lightweight state management</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">Axios</strong>
+            <p className="text-gray-600 text-sm">HTTP client with interceptors configured</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">React Query</strong>
+            <p className="text-gray-600 text-sm">Server state management and caching</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">i18next</strong>
+            <p className="text-gray-600 text-sm">Internationalization (EN/RU)</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">TailwindCSS v4</strong>
+            <p className="text-gray-600 text-sm">Utility-first CSS framework</p>
+          </li>
+        </ul>
+      </Card>
+
+      <Card title="Get Started">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-semibold mb-2">Development</h4>
+            <code className="block bg-gray-900 text-green-400 p-3 rounded">
+              npm run dev
+            </code>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-2">Build for production</h4>
+            <code className="block bg-gray-900 text-green-400 p-3 rounded">
+              npm run build
+            </code>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/react-ts/src/pages/about/index.ts

@@ -0,0 +1 @@
+export { AboutPage } from './AboutPage';

package/templates/react-ts/src/pages/home/HomePage.tsx

@@ -0,0 +1,94 @@
+import { useTranslation } from 'react-i18next';
+import { Card } from '@shared/ui/Card';
+import { Button } from '@shared/ui/Button';
+import { useCounterStore } from '@shared/store/counter';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@shared/api/client';
+
+interface Post {
+  id: number;
+  title: string;
+  body: string;
+  userId: number;
+}
+
+export function HomePage() {
+  const { t } = useTranslation();
+  const { count, increment, decrement, reset } = useCounterStore();
+
+  const { data: posts, isLoading } = useQuery<Post[]>({
+    queryKey: ['posts'],
+    queryFn: async () => {
+      const response = await apiClient.get<Post[]>('/posts?_limit=5');
+      return response.data;
+    },
+  });
+
+  return (
+    <div className="space-y-8">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('welcome')}</h1>
+        <p className="text-lg text-gray-600">
+          React + Vite + FSD Architecture + TailwindCSS v4
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-6">
+        <Card title={t('counter')}>
+          <div className="text-center space-y-4">
+            <div className="text-6xl font-bold text-blue-600">{count}</div>
+            <div className="flex gap-2 justify-center">
+              <Button onClick={decrement} variant="danger">
+                {t('decrement')}
+              </Button>
+              <Button onClick={reset} variant="secondary">
+                {t('reset')}
+              </Button>
+              <Button onClick={increment} variant="success">
+                {t('increment')}
+              </Button>
+            </div>
+            <p className="text-sm text-gray-500">Powered by Zustand</p>
+          </div>
+        </Card>
+
+        <Card title="React Query Example">
+          {isLoading ? (
+            <div className="text-center text-gray-500">Loading posts...</div>
+          ) : (
+            <ul className="space-y-2">
+              {posts?.map((post) => (
+                <li key={post.id} className="p-2 bg-gray-50 rounded">
+                  <div className="font-medium text-sm">{post.title}</div>
+                </li>
+              ))}
+            </ul>
+          )}
+          <p className="text-sm text-gray-500 mt-4">Powered by React Query + Axios</p>
+        </Card>
+      </div>
+
+      <Card title="Technologies Used">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[
+            'React Router',
+            'Zustand',
+            'Axios',
+            'i18next',
+            'React Query',
+            'TailwindCSS v4',
+            'Vite',
+            'FSD Architecture',
+          ].map((tech) => (
+            <div
+              key={tech}
+              className="p-3 bg-blue-50 text-blue-700 rounded-lg text-center font-medium"
+            >
+              {tech}
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/react-ts/src/pages/home/index.ts

@@ -0,0 +1 @@
+export { HomePage } from './HomePage';

package/templates/react-ts/src/shared/api/client.ts

@@ -0,0 +1,32 @@
+import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || 'https://jsonplaceholder.typicode.com',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+apiClient.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  }
+);
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('token');
+    }
+    return Promise.reject(error);
+  }
+);

package/templates/react-ts/src/shared/api/query-client.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    },
+  },
+});

package/templates/react-ts/src/shared/store/counter.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface CounterState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+}
+
+export const useCounterStore = create<CounterState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 }),
+}));

package/templates/react-ts/src/shared/ui/Button/Button.tsx

@@ -0,0 +1,31 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'outline';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  className?: string;
+}
+
+export function Button({ children, variant = 'primary', onClick, className = '', ...props }: ButtonProps) {
+  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors duration-200';
+
+  const variantStyles: Record<ButtonVariant, string> = {
+    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+    secondary: 'bg-gray-600 hover:bg-gray-700 text-white',
+    success: 'bg-green-600 hover:bg-green-700 text-white',
+    danger: 'bg-red-600 hover:bg-red-700 text-white',
+    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${className}`}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/react-ts/src/shared/ui/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/templates/react-ts/src/shared/ui/Card/Card.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  title?: string;
+}
+
+export function Card({ children, className = '', title }: CardProps) {
+  return (
+    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
+      {title && <h3 className="text-xl font-bold mb-4">{title}</h3>}
+      {children}
+    </div>
+  );
+}

package/templates/react-ts/src/shared/ui/Card/index.ts

@@ -0,0 +1 @@
+export { Card } from './Card';