create-alistt69-kit 0.1.0 → 0.1.2

package/README.md

@@ -17,18 +17,18 @@ It generates a ready-to-run **React + TypeScript + Webpack** starter with a prac
 
 ## 🔧  What’s inside
 
-| Tool | Purpose | Included |
-|------|---------|----------|
-| [React](https://react.dev/) | UI library | Default  |
-| [TypeScript](https://www.typescriptlang.org/) | Static typing | Default  |
-| [Webpack](https://webpack.js.org/) | Bundling and build pipeline | Default  |
-| [SCSS Modules](https://github.com/css-modules/css-modules) | Scoped styling | Default  |
-| [SVGR](https://react-svgr.com/) | Import SVGs as React components | Default  |
-| [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) | Bundle size inspection | Default  |
+| Tool | Purpose                          | Included |
+|------|----------------------------------|----------|
+| [React](https://react.dev/) | Web framework                    | Default  |
+| [TypeScript](https://www.typescriptlang.org/) | Static typing                    | Default  |
+| [Webpack](https://webpack.js.org/) | Bundling and build pipeline      | Default  |
+| [SCSS Modules](https://github.com/css-modules/css-modules) | Scoped styling                   | Default  |
+| [SVGR](https://react-svgr.com/) | Import SVGs as React components  | Default  |
+| [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) | Bundle size inspection           | Default  |
 | [ESLint](https://eslint.org/) + [eslint-stylistic](https://eslint.style/) | Code quality and stylistic rules | Optional |
-| [Stylelint](https://stylelint.io/) | Stylesheet linting | Optional |
-| [Autoprefixer](https://github.com/postcss/autoprefixer) | Automatic CSS vendor prefixes | Optional |
-| [React Router](https://reactrouter.com/) | Client-side routing | Optional |
+| [Stylelint](https://stylelint.io/) | Stylesheet linting               | Optional |
+| [Autoprefixer](https://github.com/postcss/autoprefixer) | Automatic CSS vendor prefixes    | Optional |
+| [React Router](https://reactrouter.com/) | Client-side routing              | Optional |
 
 ---
 
@@ -59,38 +59,38 @@ This starter removes that boilerplate so you can get straight to building.
 Create a new app interactively:
 
 ```bash
-npm create alistt69-kit
+npm create alistt69-kit@latest
 ```
 
 Follow the prompts — or skip them entirely:
 
 ```bash
-npm create alistt69-kit my-app --yes
+npm create alistt69-kit@latest my-app --yes
 ```
 
 ## 🛠️  Usage examples
 
 ```bash
 # Interactive setup
-npm create alistt69-kit my-app
+npm create alistt69-kit@latest my-app
 
 # All defaults, no prompts
-npm create alistt69-kit my-app --yes
+npm create alistt69-kit@latest my-app --yes
 
 # Skip dependency installation
-npm create alistt69-kit my-app --no-install
+npm create alistt69-kit@latest my-app --no-install
 
 # Enable only selected features
-npm create alistt69-kit my-app --features=eslint,react-router
+npm create alistt69-kit@latest my-app --features=eslint,react-router
 
 # Enable all optional features
-npm create alistt69-kit my-app --features=all
+npm create alistt69-kit@latest my-app --features=all
 
 # Use pnpm as package manager
-npm create alistt69-kit my-app --pm pnpm
+npm create alistt69-kit@latest my-app --pm pnpm
 
 # Overwrite existing directory
-npm create alistt69-kit my-app --yes --force
+npm create alistt69-kit@latest my-app --yes --overwrite
 ```
 
 ## ⚙️ CLI options
@@ -98,7 +98,7 @@ npm create alistt69-kit my-app --yes --force
 | Option | Alias | Description |
 |--------|-------|-------------|
 | `--yes` | `-y` | Skip prompts, use defaults |
-| `--force` | — | Overwrite target directory if it exists |
+| `--overwrite` | — | Overwrite target directory if it exists |
 | `--no-install` | — | Skip dependency installation |
 | `--features <list>` | — | Enable specific features (`eslint`, `react-router`, `all`) |
 | `--pm <name>` | — | Choose package manager (`npm`, `pnpm`, `yarn`) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-alistt69-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Opinionated React + TypeScript + Webpack project generator by alistt69",
   "keywords": [
     "create",

package/src/core/create-project.js

@@ -1,5 +1,4 @@
 import { outro, spinner } from '@clack/prompts';
-import process from 'node:process';
 import { format } from '../utils/console-format.js';
 import { getRunScriptCommand } from '../utils/package-manager.js';
 import { applyFeatures } from './apply-features.js';
@@ -9,6 +8,7 @@ import { installDependencies } from './install-dependencies.js';
 import { prepareTargetDirectory } from './prepare-target-directory.js';
 import { replaceTokens } from './replace-tokens.js';
 import { restoreSpecialFiles } from './restore-special-files.js';
+import { renderProjectReadme } from './render-project-readme.js';
 
 export async function createProject(cliArgs = {}) {
     const {
@@ -20,7 +20,7 @@ export async function createProject(cliArgs = {}) {
 
     const { targetDirPath } = await prepareTargetDirectory({
         projectName,
-        force: cliArgs.force,
+        overwrite: cliArgs.overwrite,
         yes: cliArgs.yes,
     });
 
@@ -50,6 +50,15 @@ export async function createProject(cliArgs = {}) {
             progress.stop('Features applied');
         }
 
+        progress.start('Generating README...');
+        await renderProjectReadme({
+            projectPath: targetDirPath,
+            projectName,
+            selectedFeatureIds,
+            packageManager,
+        });
+        progress.stop('README generated');
+
         if (shouldInstallDependencies) {
             progress.start(`Installing dependencies with ${packageManager}...`);
             await installDependencies(targetDirPath, packageManager);

package/src/core/parse-cli-args.js

@@ -29,7 +29,7 @@ export function formatHelpMessage() {
         '',
         'Options:',
         '  -y, --yes                    Skip prompts and use defaults',
-        '  --force                      Overwrite target directory if it exists',
+        '  --overwrite                      Overwrite target directory if it exists',
         '  --no-install                 Do not install dependencies',
         '  --features <comma-list>      Example: eslint,stylelint,react-router',
         '  --features all               Enable all features',
@@ -46,7 +46,7 @@ export function formatHelpMessage() {
         '  create-alistt69-kit my-app --features=all',
         '  create-alistt69-kit my-app --pm pnpm --no-install',
         '  create-alistt69-kit my-app --yes',
-        '  create-alistt69-kit my-app --yes --force',
+        '  create-alistt69-kit my-app --yes --overwrite',
     ].join('\n');
 }
 
@@ -57,7 +57,7 @@ export function parseCliArgs(argv) {
         shouldInstallDependencies: undefined,
         packageManager: undefined,
         yes: false,
-        force: false,
+        overwrite: false,
         showHelp: false,
     };
 
@@ -74,8 +74,8 @@ export function parseCliArgs(argv) {
             continue;
         }
 
-        if (arg === '--force') {
-            result.force = true;
+        if (arg === '--overwrite') {
+            result.overwrite = true;
             continue;
         }
 

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

@@ -14,7 +14,7 @@ async function pathExists(targetDirPath) {
 
 export async function prepareTargetDirectory({
     projectName,
-    force = false,
+    overwrite = false,
     yes = false,
 }) {
     const targetDirPath = resolve(process.cwd(), projectName);
@@ -37,8 +37,8 @@ export async function prepareTargetDirectory({
         };
     }
 
-    if (force) {
-        await rm(targetDirPath, { recursive: true, force: true });
+    if (overwrite) {
+        await rm(targetDirPath, { recursive: true, overwrite: true });
 
         return {
             targetDirPath,
@@ -48,7 +48,7 @@ export async function prepareTargetDirectory({
 
     if (yes) {
         throw new Error(
-            `Directory already exists and is not empty: ${targetDirPath}. Use --force to overwrite it.`,
+            `Directory already exists and is not empty: ${targetDirPath}. Use --overwrite to overwrite it.`,
         );
     }
 
@@ -61,7 +61,7 @@ export async function prepareTargetDirectory({
         process.exit(0);
     }
 
-    await rm(targetDirPath, { recursive: true, force: true });
+    await rm(targetDirPath, { recursive: true, overwrite: true });
 
     return {
         targetDirPath,

package/src/core/render-project-readme.js

@@ -0,0 +1,76 @@
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { featuresById } from '../features/index.js';
+import { readPackageJson } from '../utils/package-json.js';
+import { getRunScriptCommand } from '../utils/package-manager.js';
+
+const scriptDescriptions = {
+    dev: 'Start development server',
+    start: 'Start development server',
+    build: 'Build for production',
+    'build:dev': 'Build in development mode',
+    'build:prod': 'Build in production mode',
+    typecheck: 'Run TypeScript type check',
+    lint: 'Run ESLint',
+    'lint:fix': 'Run ESLint with autofix',
+    'lint:styles': 'Run Stylelint',
+    'lint:styles:fix': 'Run Stylelint with autofix',
+};
+
+function formatFeatureList(selectedFeatureIds) {
+    if (selectedFeatureIds.length === 0) {
+        return '- None';
+    }
+
+    return selectedFeatureIds
+        .map((featureId) => {
+            const feature = featuresById.get(featureId);
+
+            return `- ${feature?.title ?? featureId}`;
+        })
+        .join('\n');
+}
+
+function formatScripts(packageManager, scripts) {
+    const entries = Object.entries(scripts);
+
+    if (entries.length === 0) {
+        return '_No scripts available._';
+    }
+
+    return entries.map(([scriptName]) => {
+        const command = getRunScriptCommand(packageManager, scriptName);
+        const description = scriptDescriptions[scriptName] ?? 'Project script';
+
+        return `- \`${command}\` — ${description}`;
+    }).join('\n');
+}
+
+export async function renderProjectReadme({
+    projectPath,
+    projectName,
+    selectedFeatureIds,
+    packageManager,
+}) {
+    const packageJson = await readPackageJson(projectPath);
+
+    const readmeContent = [
+        `# ${projectName}`,
+        '',
+        'Created with `create-alistt69-kit`.',
+        '',
+        '## Enabled features',
+        '',
+        formatFeatureList(selectedFeatureIds),
+        '',
+        '## Available scripts',
+        '',
+        formatScripts(packageManager, packageJson.scripts ?? {}),
+    ].join('\n');
+
+    await writeFile(
+        resolve(projectPath, 'README.md'),
+        `${readmeContent}\n`,
+        'utf8',
+    );
+}

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

@@ -7,14 +7,19 @@ import unused from 'eslint-plugin-unused-imports';
 import tseslint from 'typescript-eslint';
 
 export default [
+    // ESLint recommended rules
     js.configs.recommended,
+
+    // Paths to ignore
     {
-        ignores: ['**/dist', '**/node_modules', '**/build', 'webpack.config.ts'],
+        ignores: ['**/dist', '**/node_modules', '**/build', 'webpack.config.ts', 'postcss.config.cjs'],
     },
 
-    // TS base + parser
+    // TypeScript rules
     ...tseslint.configs.recommended,
-    ...tseslint.configs.stylistic, // TS-стилистика
+    ...tseslint.configs.stylistic,
+
+    // TypeScript parser configuration
     {
         files: ['**/*.ts', '**/*.tsx'],
         languageOptions: {
@@ -23,10 +28,10 @@ export default [
         },
     },
 
-    // Глобальные стилевые правила (замена prettier)
-    stylistic.configs['recommended'],
+    // Stylistic rules (Prettier alternative)
+    stylistic.configs.recommended,
 
-    // Реакт / импорты / утиль
+    // Main rule configuration
     {
         plugins: {
             react,
@@ -37,7 +42,7 @@ export default [
         },
         settings: { react: { version: 'detect' } },
         rules: {
-            // ==== БАЗОВОЕ ФОРМАТИРОВАНИЕ (как prettier) ====
+            // === Formatting ===
             '@stylistic/indent': ['error', 4, { SwitchCase: 1 }],
             '@stylistic/semi': ['error', 'always'],
             '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
@@ -51,16 +56,16 @@ export default [
                 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',
 
-            // Пустые строки/пробелы
+            // === Whitespace ===
             'no-trailing-spaces': ['warn', { skipBlankLines: false }],
             'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 1 }],
             'comma-style': ['error', 'last'],
+
+            // === Line length ===
             'max-len': ['error', {
                 code: 120,
                 tabWidth: 4,
@@ -70,7 +75,7 @@ export default [
                 ignoreTemplateLiterals: true,
             }],
 
-            // Импорты
+            // === Imports ===
             'unused-imports/no-unused-imports': 'warn',
             'unused-imports/no-unused-vars': ['warn', {
                 args: 'after-used',
@@ -94,13 +99,14 @@ export default [
                 alphabetize: { order: 'asc', caseInsensitive: true },
             }],
 
-            // React / JSX
+            // === React ===
             ...react.configs.recommended.rules,
             ...reactHooks.configs.recommended.rules,
-            'react/react-in-jsx-scope': 'off',
-            'react/jsx-uses-react': 'off',
-            'react/prop-types': 'off',
+            'react/react-in-jsx-scope': 'off',      // Not needed in React 17+
+            'react/jsx-uses-react': 'off',          // Not needed in React 17+
+            'react/prop-types': 'off',              // TypeScript handles this
 
+            // === JSX formatting ===
             'react/jsx-indent': ['error', 4],
             'react/jsx-indent-props': ['error', 4],
             'react/jsx-curly-spacing': ['error', { when: 'never', children: true }],
@@ -115,14 +121,14 @@ export default [
             '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
+            // === General ===
+            '@typescript-eslint/no-unused-vars': 'off', // Handled by unused-imports
             'no-console': ['warn', { allow: ['error'] }],
             'no-restricted-imports': ['error', {
                 name: 'react',
                 importNames: ['default'],
-                message: 'React импортировать не надо (v17+). Удалите import React from "react".',
+                message: 'React import is not needed in React 17+. Remove import React from "react".',
             }],
         },
     },
-];
+];

package/src/features/eslint/index.js

@@ -22,8 +22,8 @@ export const eslintFeature = {
         });
 
         await addScripts(projectPath, {
-            lint: 'eslint .',
-            'lint:fix': 'eslint . --fix',
+            lint: 'eslint . --ext .js,.jsx,.ts,.tsx',
+            'lint:fix': 'eslint . --ext .js,.jsx,.ts,.tsx --fix',
         });
 
         const filesDirPath = resolve(currentDirPath, 'files');

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

@@ -14,4 +14,4 @@ export default function AppLayout() {
             </main>
         </div>
     );
-}
+}

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

@@ -10,4 +10,4 @@ export const appRouter = createBrowserRouter(
             <Route path="*" element={<Error />} />
         </Route>,
     ),
-);
+);

package/src/templates/base/src/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './app/App';
 import './styles/index.scss';
@@ -10,7 +10,7 @@ if (!container) {
 }
 
 createRoot(container).render(
-    <React.StrictMode>
+    <StrictMode>
         <App />
-    </React.StrictMode>,
-);
+    </StrictMode>,
+);