create-alistt69-kit 0.1.0

package/src/core/prepare-target-directory.js

@@ -0,0 +1,70 @@
+import { confirm, isCancel } from '@clack/prompts';
+import { access, readdir, rm } from 'node:fs/promises';
+import process from 'node:process';
+import { resolve } from 'node:path';
+
+async function pathExists(targetDirPath) {
+    try {
+        await access(targetDirPath);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export async function prepareTargetDirectory({
+    projectName,
+    force = false,
+    yes = false,
+}) {
+    const targetDirPath = resolve(process.cwd(), projectName);
+    const exists = await pathExists(targetDirPath);
+
+    if (!exists) {
+        return {
+            targetDirPath,
+            wasOverwritten: false,
+        };
+    }
+
+    const directoryEntries = await readdir(targetDirPath);
+    const isEmpty = directoryEntries.length === 0;
+
+    if (isEmpty) {
+        return {
+            targetDirPath,
+            wasOverwritten: false,
+        };
+    }
+
+    if (force) {
+        await rm(targetDirPath, { recursive: true, force: true });
+
+        return {
+            targetDirPath,
+            wasOverwritten: true,
+        };
+    }
+
+    if (yes) {
+        throw new Error(
+            `Directory already exists and is not empty: ${targetDirPath}. Use --force to overwrite it.`,
+        );
+    }
+
+    const overwriteAnswer = await confirm({
+        message: `Directory "${projectName}" already exists and will be overwritten. Continue?`,
+        initialValue: false,
+    });
+
+    if (isCancel(overwriteAnswer) || !overwriteAnswer) {
+        process.exit(0);
+    }
+
+    await rm(targetDirPath, { recursive: true, force: true });
+
+    return {
+        targetDirPath,
+        wasOverwritten: true,
+    };
+}

package/src/core/replace-tokens.js

@@ -0,0 +1,46 @@
+import { readFile, readdir, stat, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const replaceTokensInFile = async (filePath, tokens) => {
+    const fileContent = await readFile(filePath, 'utf8');
+
+    let updatedContent = fileContent;
+
+    for (const [token, value] of Object.entries(tokens)) {
+        updatedContent = updatedContent.replaceAll(token, value);
+    }
+
+    await writeFile(filePath, updatedContent, 'utf8');
+};
+
+const replaceTokensRecursively = async (targetPath, tokens) => {
+    const targetStat = await stat(targetPath);
+
+    if (targetStat.isFile()) {
+        await replaceTokensInFile(targetPath, tokens);
+        return;
+    }
+
+    if (!targetStat.isDirectory()) {
+        return;
+    }
+
+    const entries = await readdir(targetPath, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const entryPath = resolve(targetPath, entry.name);
+
+        if (entry.isDirectory()) {
+            await replaceTokensRecursively(entryPath, tokens);
+            continue;
+        }
+
+        if (entry.isFile()) {
+            await replaceTokensInFile(entryPath, tokens);
+        }
+    }
+};
+
+export async function replaceTokens(targetDirPath, tokens) {
+    await replaceTokensRecursively(targetDirPath, tokens);
+}

package/src/core/restore-special-files.js

@@ -0,0 +1,19 @@
+import { access, rename } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+async function renameIfExists(fromPath, toPath) {
+    try {
+        await access(fromPath);
+    } catch {
+        return;
+    }
+
+    await rename(fromPath, toPath);
+}
+
+export async function restoreSpecialFiles(projectPath) {
+    await renameIfExists(
+        resolve(projectPath, 'gitignore'),
+        resolve(projectPath, '.gitignore'),
+    );
+}

package/src/features/autoprefixer/files/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer'),
+    ],
+};

package/src/features/autoprefixer/index.js

@@ -0,0 +1,23 @@
+import { cp } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { addDevDependencies } from '../../utils/package-json.js';
+
+const currentFilePath = fileURLToPath(import.meta.url);
+const currentDirPath = dirname(currentFilePath);
+
+export const autoprefixerFeature = {
+    id: 'autoprefixer',
+    title: 'Autoprefixer',
+    apply: async ({ projectPath }) => {
+        await addDevDependencies(projectPath, {
+            autoprefixer: '^10.4.21',
+        });
+
+        const filesDirPath = resolve(currentDirPath, 'files');
+
+        await cp(filesDirPath, projectPath, {
+            recursive: true,
+        });
+    },
+};

package/src/features/eslint/files/eslint.config.mjs

@@ -0,0 +1,128 @@
+import js from '@eslint/js';
+import stylistic from '@stylistic/eslint-plugin';
+import importPlugin from 'eslint-plugin-import';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import unused from 'eslint-plugin-unused-imports';
+import tseslint from 'typescript-eslint';
+
+export default [
+    js.configs.recommended,
+    {
+        ignores: ['**/dist', '**/node_modules', '**/build', 'webpack.config.ts'],
+    },
+
+    // TS base + parser
+    ...tseslint.configs.recommended,
+    ...tseslint.configs.stylistic, // TS-стилистика
+    {
+        files: ['**/*.ts', '**/*.tsx'],
+        languageOptions: {
+            parser: tseslint.parser,
+            parserOptions: { sourceType: 'module' },
+        },
+    },
+
+    // Глобальные стилевые правила (замена prettier)
+    stylistic.configs['recommended'],
+
+    // Реакт / импорты / утиль
+    {
+        plugins: {
+            react,
+            'react-hooks': reactHooks,
+            '@stylistic': stylistic,
+            import: importPlugin,
+            'unused-imports': unused,
+        },
+        settings: { react: { version: 'detect' } },
+        rules: {
+            // ==== БАЗОВОЕ ФОРМАТИРОВАНИЕ (как prettier) ====
+            '@stylistic/indent': ['error', 4, { SwitchCase: 1 }],
+            '@stylistic/semi': ['error', 'always'],
+            '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
+            '@stylistic/comma-dangle': ['error', 'always-multiline'],
+            '@stylistic/object-curly-spacing': ['error', 'always'],
+            '@stylistic/array-bracket-spacing': ['error', 'never'],
+            '@stylistic/eol-last': ['error', 'always'],
+            '@stylistic/arrow-parens': ['error', 'always'],
+            '@stylistic/quote-props': ['error', 'as-needed', { keywords: false }],
+            '@stylistic/member-delimiter-style': ['error', {
+                multiline: { delimiter: 'semi', requireLast: true },
+                singleline: { delimiter: 'semi', requireLast: false },
+            }],
+            // запрет однострочного return (<JSX/>)
+            // (через строгую трактовку лишних скобок вокруг однострочного выражения)
+            '@stylistic/no-extra-parens': 'off',
+            '@stylistic/jsx-indent-props': 'off',
+            '@stylistic/multiline-ternary': 'off',
+
+            // Пустые строки/пробелы
+            'no-trailing-spaces': ['warn', { skipBlankLines: false }],
+            'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 1 }],
+            'comma-style': ['error', 'last'],
+            'max-len': ['error', {
+                code: 120,
+                tabWidth: 4,
+                ignoreUrls: true,
+                ignoreStrings: true,
+                ignoreComments: false,
+                ignoreTemplateLiterals: true,
+            }],
+
+            // Импорты
+            'unused-imports/no-unused-imports': 'warn',
+            'unused-imports/no-unused-vars': ['warn', {
+                args: 'after-used',
+                argsIgnorePattern: '^_',
+                varsIgnorePattern: '^_',
+                caughtErrorsIgnorePattern: '^_',
+            }],
+            'import/order': ['error', {
+                groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
+                pathGroups: [
+                    { pattern: '@/**', group: 'internal', position: 'after' },
+                    { pattern: '@app/**', group: 'internal', position: 'after' },
+                    { pattern: '@pages/**', group: 'internal', position: 'after' },
+                    { pattern: '@widgets/**', group: 'internal', position: 'after' },
+                    { pattern: '@features/**', group: 'internal', position: 'after' },
+                    { pattern: '@entities/**', group: 'internal', position: 'after' },
+                    { pattern: '@shared/**', group: 'internal', position: 'after' },
+                ],
+                pathGroupsExcludedImportTypes: ['builtin', 'external'],
+                'newlines-between': 'never',
+                alphabetize: { order: 'asc', caseInsensitive: true },
+            }],
+
+            // React / JSX
+            ...react.configs.recommended.rules,
+            ...reactHooks.configs.recommended.rules,
+            'react/react-in-jsx-scope': 'off',
+            'react/jsx-uses-react': 'off',
+            'react/prop-types': 'off',
+
+            'react/jsx-indent': ['error', 4],
+            'react/jsx-indent-props': ['error', 4],
+            'react/jsx-curly-spacing': ['error', { when: 'never', children: true }],
+            'react/jsx-equals-spacing': ['error', 'never'],
+            'react/jsx-tag-spacing': ['error', {
+                closingSlash: 'never',
+                beforeSelfClosing: 'always',
+                afterOpening: 'never',
+                beforeClosing: 'never',
+            }],
+            'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+            'react/jsx-max-props-per-line': ['error', { maximum: 1, when: 'multiline' }],
+            'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
+
+            // Прочее
+            '@typescript-eslint/no-unused-vars': 'off', // перекрываем unused-imports
+            'no-console': ['warn', { allow: ['error'] }],
+            'no-restricted-imports': ['error', {
+                name: 'react',
+                importNames: ['default'],
+                message: 'React импортировать не надо (v17+). Удалите import React from "react".',
+            }],
+        },
+    },
+];

package/src/features/eslint/index.js

@@ -0,0 +1,35 @@
+import { cp } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { addDevDependencies, addScripts } from '../../utils/package-json.js';
+
+const currentFilePath = fileURLToPath(import.meta.url);
+const currentDirPath = dirname(currentFilePath);
+
+export const eslintFeature = {
+    id: 'eslint',
+    title: 'ESLint + Stylistic',
+    apply: async ({ projectPath }) => {
+        await addDevDependencies(projectPath, {
+            "eslint": "^9.0.0",
+            "@eslint/js": "^9.0.0",
+            "@stylistic/eslint-plugin": "^5.0.0",
+            "typescript-eslint": "^8.0.0",
+            "eslint-plugin-import": "^2.0.0",
+            "eslint-plugin-react": "^7.0.0",
+            "eslint-plugin-react-hooks": "^7.0.0",
+            "eslint-plugin-unused-imports": "^4.0.0"
+        });
+
+        await addScripts(projectPath, {
+            lint: 'eslint .',
+            'lint:fix': 'eslint . --fix',
+        });
+
+        const filesDirPath = resolve(currentDirPath, 'files');
+
+        await cp(filesDirPath, projectPath, {
+            recursive: true,
+        });
+    },
+};

package/src/features/index.js

@@ -0,0 +1,15 @@
+import { autoprefixerFeature } from './autoprefixer/index.js';
+import { eslintFeature } from './eslint/index.js';
+import { reactRouterFeature } from './react-router/index.js';
+import { stylelintFeature } from './stylelint/index.js';
+
+export const features = [
+    autoprefixerFeature,
+    eslintFeature,
+    reactRouterFeature,
+    stylelintFeature,
+];
+
+export const featuresById = new Map(
+    features.map((feature) => [feature.id, feature]),
+);

package/src/features/react-router/files/src/app/App.tsx

@@ -0,0 +1,10 @@
+import { RouterProvider } from 'react-router-dom';
+import { appRouter } from './providers/router/config/router';
+
+function App() {
+    return (
+        <RouterProvider router={appRouter} />
+    );
+}
+
+export default App;

package/src/features/react-router/files/src/app/layouts/app/index.tsx

@@ -0,0 +1,17 @@
+import { Link, Outlet } from 'react-router-dom';
+
+export default function AppLayout() {
+    return (
+        <div>
+            <header>
+                <nav>
+                    <Link to="/">Home</Link>
+                </nav>
+            </header>
+
+            <main>
+                <Outlet />
+            </main>
+        </div>
+    );
+}

package/src/features/react-router/files/src/app/providers/router/config/router.tsx

@@ -0,0 +1,13 @@
+import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
+import AppLayout from '../../../layouts/app';
+import { Main } from '../../../../pages/main';
+import { Error } from '../../../../pages/error';
+
+export const appRouter = createBrowserRouter(
+    createRoutesFromElements(
+        <Route path="/" element={<AppLayout />}>
+            <Route index element={<Main />} />
+            <Route path="*" element={<Error />} />
+        </Route>,
+    ),
+);

package/src/features/react-router/files/src/pages/error/index.ts

@@ -0,0 +1 @@
+export { LazyError as Error } from './lazy';

package/src/features/react-router/files/src/pages/error/lazy.ts

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const LazyError = lazy(() => import('./page'));

package/src/features/react-router/files/src/pages/error/page.tsx

@@ -0,0 +1,7 @@
+function ErrorPage() {
+    return (
+        <h2>Error page</h2>
+    )
+}
+
+export default ErrorPage;

package/src/features/react-router/files/src/pages/main/index.ts

@@ -0,0 +1 @@
+export { LazyMain as Main } from './lazy';

package/src/features/react-router/files/src/pages/main/lazy.ts

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const LazyMain = lazy(() => import('./page'));

package/src/features/react-router/files/src/pages/main/page.tsx

@@ -0,0 +1,7 @@
+function MainPage() {
+    return (
+        <h2>main page</h2>
+    )
+}
+
+export default MainPage;

package/src/features/react-router/index.js

@@ -0,0 +1,23 @@
+import { cp } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { addDependencies } from '../../utils/package-json.js';
+
+const currentFilePath = fileURLToPath(import.meta.url);
+const currentDirPath = dirname(currentFilePath);
+
+export const reactRouterFeature = {
+    id: 'react-router',
+    title: 'React Router DOM',
+    apply: async ({ projectPath }) => {
+        await addDependencies(projectPath, {
+            'react-router-dom': '^7.13.2',
+        });
+
+        const filesDirPath = resolve(currentDirPath, 'files');
+
+        await cp(filesDirPath, projectPath, {
+            recursive: true,
+        });
+    },
+};

package/src/features/stylelint/files/stylelint.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('stylelint').Config} */
+export default {
+    extends: ['stylelint-config-standard-scss'],
+    rules: {
+        'scss/no-global-function-names': null,
+        'selector-class-pattern': [
+            '^[a-z][a-z0-9-_]*$',
+            {
+                message: 'Class names should be lowercase and can include numbers, hyphens, and underscores.',
+            },
+        ],
+        'at-rule-empty-line-before': null,
+    },
+};

package/src/features/stylelint/index.js

@@ -0,0 +1,29 @@
+import { cp } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { addDevDependencies, addScripts } from '../../utils/package-json.js';
+
+const currentFilePath = fileURLToPath(import.meta.url);
+const currentDirPath = dirname(currentFilePath);
+
+export const stylelintFeature = {
+    id: 'stylelint',
+    title: 'Stylelint',
+    apply: async ({ projectPath }) => {
+        await addDevDependencies(projectPath, {
+            stylelint: '^17.6.0',
+            'stylelint-config-standard-scss': '^17.0.0',
+        });
+
+        await addScripts(projectPath, {
+            'lint:styles': 'stylelint "src/**/*.{scss,css}"',
+            'lint:styles:fix': 'stylelint "src/**/*.{scss,css}" --fix',
+        });
+
+        const filesDirPath = resolve(currentDirPath, 'files');
+
+        await cp(filesDirPath, projectPath, {
+            recursive: true,
+        });
+    },
+};

package/src/templates/base/.editorconfig

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

package/src/templates/base/README.md

@@ -0,0 +1,3 @@
+# __PROJECT_NAME__
+
+Created with create-alistt69-kit

package/src/templates/base/babel.config.json

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}

package/src/templates/base/config/build/buildDevServer.ts

@@ -0,0 +1,11 @@
+import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+import { BuildOptions } from './types/config';
+
+export function buildDevServer(options: BuildOptions): DevServerConfiguration {
+    return {
+        port: options.port,
+        open: true,
+        historyApiFallback: true,
+        hot: true,
+    };
+}

package/src/templates/base/config/build/buildLoaders.ts

@@ -0,0 +1,39 @@
+import webpack from 'webpack';
+import { BuildOptions } from './types/config';
+import { buildCssLoader } from './loaders/buildCssLoader';
+
+export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
+    const svgLoader = {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+    };
+
+    const babelLoader = {
+        test: /\.(tsx|js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+            loader: 'babel-loader',
+            options: {
+                presets: ['@babel/preset-env'],
+            },
+        },
+    };
+
+    const cssLoader = buildCssLoader(isDev);
+
+    const typescriptLoader = {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+    };
+
+    const fileLoader = {
+        test: /\.(png|jpg|jpeg|gif|woff2|woff)$/i,
+        type: 'asset/resource',
+        generator: {
+            filename: 'static/media/[name].[hash][ext]',
+        },
+    };
+
+    return [fileLoader, svgLoader, babelLoader, typescriptLoader, cssLoader];
+}

package/src/templates/base/config/build/buildPlugins.ts

@@ -0,0 +1,34 @@
+import HTMLWebpackPlugin from 'html-webpack-plugin';
+import webpack from 'webpack';
+import { BuildOptions } from './types/config';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+
+export function buildPlugins({ paths, isDev, apiUrl }: BuildOptions): webpack.WebpackPluginInstance[] {
+    const plugins = [
+        new HTMLWebpackPlugin({
+            template: paths.html,
+        }),
+        new webpack.ProgressPlugin(),
+        new MiniCssExtractPlugin({
+            filename: 'css/[name].[contenthash:8].css',
+            chunkFilename: 'css/[name].[contenthash:8].css',
+        }),
+        new webpack.DefinePlugin({
+            __IS_DEV__: JSON.stringify(isDev),
+            __API__: JSON.stringify(apiUrl),
+        }),
+    ];
+
+    if (isDev) {
+        plugins.push(
+            new ReactRefreshWebpackPlugin(),
+            new BundleAnalyzerPlugin({
+                openAnalyzer: false,
+            }),
+        );
+    }
+
+    return plugins;
+}

package/src/templates/base/config/build/buildResolvers.ts

@@ -0,0 +1,14 @@
+import { ResolveOptions } from 'webpack';
+import { BuildOptions } from './types/config';
+
+export function buildResolvers(options: BuildOptions): ResolveOptions {
+    return {
+        extensions: ['.tsx', '.ts', '.js'],
+        preferAbsolute: true,
+        modules: [options.paths.src, 'node_modules'],
+        mainFiles: ['index'],
+        alias: {
+            '@': options.paths.src,
+        },
+    };
+}

package/src/templates/base/config/build/buildWebpackConfig.ts

@@ -0,0 +1,27 @@
+import { BuildOptions } from './types/config';
+import webpack from 'webpack';
+import { buildPlugins } from './buildPlugins';
+import { buildLoaders } from './buildLoaders';
+import { buildResolvers } from './buildResolvers';
+import { buildDevServer } from './buildDevServer';
+
+export function buildWebpackConfig(options: BuildOptions): webpack.Configuration {
+    const { paths, mode, isDev } = options;
+
+    return {
+        mode: mode,
+        entry: paths.entry,
+        output: {
+            filename: '[name].[contenthash].js',
+            path: paths.build,
+            clean: true,
+        },
+        plugins: buildPlugins(options),
+        module: {
+            rules: buildLoaders(options),
+        },
+        resolve: buildResolvers(options),
+        devtool: isDev ? 'inline-source-map' : undefined,
+        devServer: isDev ? buildDevServer(options) : undefined,
+    };
+}