create-alistt69-kit 0.1.20 → 0.2.2

package/README.md

@@ -55,6 +55,41 @@ This starter removes that boilerplate so you can get straight to building.
 
 ---
 
+## ⚡ Generated project helpers
+
+Some optional features also add local project generators to the scaffolded app.
+
+### Page generator
+
+When `React Router DOM` is enabled, the project includes a built-in page generator.
+
+```bash
+npm run generate:page about
+```
+This will create:
+
+* `src/pages/about/index.ts`
+* `src/pages/about/lazy.ts`
+* `src/pages/about/page.tsx`
+
+If the standard router files are present, the generator will also register the page automatically in:
+
+* `src/app/providers/router/types/index.ts`
+* `src/app/providers/router/model/config/index.ts`
+* `src/app/providers/router/model/router/index.tsx`
+
+You can also configure custom paths in `scripts/generate/page.mjs`:
+* `ROUTER_TYPES_PATH`
+* `ROUTER_CONFIG_PATH`
+* `ROUTER_FILE_PATH`
+
+#### Important
+
+Route auto-registration relies on special marker comments `@route-...` inside the router files.
+Do not remove these markers unless you also want to disable automatic updates.
+
+---
+
 ## 📦 Requirements
 
 - **Node.js** `18.18` or higher

package/package.json

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

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

@@ -28,7 +28,7 @@ export function formatHelpMessage() {
         '  create-alistt69-kit <project-name> [options]',
         '',
         'Options:',
-        '  -def, --defaults                    Skip prompts and use defaults',
+        '  -def, --defaults             Skip prompts and use defaults',
         '  --overwrite                  Overwrite target directory if it exists',
         '  --no-install                 Do not install dependencies',
         '  --features <comma-list>      Example: eslint,stylelint,react-router',

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

@@ -49,6 +49,7 @@ const scriptDescriptions = {
     'lint:fix': 'Run ESLint with autofix',
     'lint:styles': 'Run Stylelint',
     'lint:styles:fix': 'Run Stylelint with autofix',
+    'generate:page': 'Generate a new page and auto-register it in the router when available',
 };
 
 function formatMarkdownList(items, fallback = '- None') {
@@ -105,10 +106,10 @@ function formatScripts(packageManager, scripts) {
 }
 
 function formatQuickStart({
-                              projectName,
-                              packageManager,
-                              shouldInstallDependencies,
-                          }) {
+    projectName,
+    packageManager,
+    shouldInstallDependencies,
+}) {
     const steps = [`cd ${projectName}`];
 
     if (!shouldInstallDependencies) {
@@ -128,24 +129,64 @@ function formatQuickStart({
     ].join('\n');
 }
 
-function formatProjectStructure() {
-    return [
+function formatProjectStructure(selectedFeatureIds) {
+    const items = [
         '- `public/` — static assets and HTML template',
         '- `src/` — application source code',
         '- `src/app/` — app bootstrap, providers, entry-level setup',
         '- `src/styles/` — global styles and shared styling layer',
         '- `config/build/` — split webpack configuration',
-    ].join('\n');
+    ];
+
+    if (selectedFeatureIds.includes('react-router')) {
+        items.splice(3, 0, '- `src/pages/` — route-level pages');
+    }
+
+    return items.join('\n');
+}
+
+function formatFeatureSpecificSections({ selectedFeatureIds, packageManager }) {
+    const sections = [];
+
+    if (selectedFeatureIds.includes('react-router')) {
+        sections.push([
+            '## Page generator',
+            '',
+            'When `React Router DOM` is enabled, you can scaffold a new page with one command.',
+            '',
+            '```bash',
+            `${getRunScriptCommand(packageManager, 'generate:page')} about`,
+            '```',
+            '',
+            'This creates:',
+            '',
+            '- `src/pages/about/index.ts`',
+            '- `src/pages/about/lazy.ts`',
+            '- `src/pages/about/page.tsx`',
+            '',
+            'If the standard router files are still present, the generator also updates:',
+            '',
+            '- `src/app/providers/router/types/index.ts`',
+            '- `src/app/providers/router/model/config/index.ts`',
+            '- `src/app/providers/router/model/router/index.tsx`',
+        ].join('\n'));
+    }
+
+    return sections.join('\n\n');
 }
 
 export async function renderProjectReadme({
-                                              projectPath,
-                                              projectName,
-                                              selectedFeatureIds,
-                                              packageManager,
-                                              shouldInstallDependencies,
-                                          }) {
+    projectPath,
+    projectName,
+    selectedFeatureIds,
+    packageManager,
+    shouldInstallDependencies,
+}) {
     const packageJson = await readPackageJson(projectPath);
+    const featureSpecificSections = formatFeatureSpecificSections({
+        selectedFeatureIds,
+        packageManager,
+    });
 
     const readmeContent = [
         `# ${projectName}`,
@@ -174,11 +215,12 @@ export async function renderProjectReadme({
         '',
         '## Project structure',
         '',
-        formatProjectStructure(),
+        formatProjectStructure(selectedFeatureIds),
         '',
         '## Available scripts',
         '',
         formatScripts(packageManager, packageJson.scripts ?? {}),
+        ...(featureSpecificSections ? ['', featureSpecificSections] : []),
     ].join('\n');
 
     await writeFile(

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

@@ -102,9 +102,10 @@ export default [
             // === React ===
             ...react.configs.recommended.rules,
             ...reactHooks.configs.recommended.rules,
-            '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
+            '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
+            'react-hooks/set-state-in-effect': 'warn',
 
             // === JSX formatting ===
             'react/jsx-indent': ['error', 4],

package/src/features/react-router/files/scripts/generate/page.mjs

@@ -0,0 +1,341 @@
+import { access, mkdir, readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+const ROUTER_TYPES_PATH = path.join(
+    'src',
+    'app',
+    'providers',
+    'router',
+    'types',
+    'index.ts',
+);
+
+const ROUTER_CONFIG_PATH = path.join(
+    'src',
+    'app',
+    'providers',
+    'router',
+    'model',
+    'config',
+    'index.ts',
+);
+
+const ROUTER_FILE_PATH = path.join(
+    'src',
+    'app',
+    'providers',
+    'router',
+    'model',
+    'router',
+    'index.tsx',
+);
+
+async function main() {
+    const rawPageName = process.argv[2];
+
+    if (!rawPageName) {
+        printUsageAndExit();
+    }
+
+    const pageSlug = normalizePageSlug(rawPageName);
+
+    if (!pageSlug) {
+        fail('Page name cannot be empty.');
+    }
+
+    const pageDirPath = path.join(process.cwd(), 'src', 'pages', pageSlug);
+
+    if (await pathExists(pageDirPath)) {
+        fail(`Page "${pageSlug}" already exists: ${toRelativeProjectPath(pageDirPath)}`);
+    }
+
+    const pageMeta = buildPageMeta(pageSlug);
+
+    await createPageFiles(pageDirPath, pageMeta);
+
+    const autoRegisterResult = await autoRegisterPage(pageMeta);
+
+    console.log(`✔ Page "${pageSlug}" created.`);
+
+    if (autoRegisterResult.status === 'registered') {
+        console.log('✔ Route registration updated.');
+        return;
+    }
+
+    console.log(`ℹ ${autoRegisterResult.message}`);
+}
+
+function printUsageAndExit() {
+    console.error('Usage: npm run generate:page -- <page-name>');
+    console.error('Example: npm run generate:page -- about');
+    process.exit(1);
+}
+
+function fail(message) {
+    console.error(`✖ ${message}`);
+    process.exit(1);
+}
+
+function normalizePageSlug(value) {
+    return value
+        .trim()
+        .toLowerCase()
+        .replace(/[_\s]+/g, '-')
+        .replace(/[^a-z0-9-]/g, '')
+        .replace(/-+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+
+function buildPageMeta(pageSlug) {
+    return {
+        pageSlug,
+        pageComponentName: toPascalCase(pageSlug),
+        pageTitle: toTitleCase(pageSlug),
+        routeEnumKey: toScreamingSnake(pageSlug),
+    };
+}
+
+function toPascalCase(value) {
+    return value
+        .split('-')
+        .filter(Boolean)
+        .map((part) => part[0].toUpperCase() + part.slice(1))
+        .join('');
+}
+
+function toScreamingSnake(value) {
+    return value
+        .split('-')
+        .filter(Boolean)
+        .join('_')
+        .toUpperCase();
+}
+
+function toTitleCase(value) {
+    return value
+        .split('-')
+        .filter(Boolean)
+        .map((part) => part[0].toUpperCase() + part.slice(1))
+        .join(' ');
+}
+
+async function createPageFiles(pageDirPath, pageMeta) {
+    const { pageComponentName, pageTitle } = pageMeta;
+
+    await mkdir(pageDirPath, {
+        recursive: true,
+    });
+
+    await writeFile(
+        path.join(pageDirPath, 'index.ts'),
+        `export { Lazy${pageComponentName} as ${pageComponentName} } from './lazy';\n`,
+        'utf8',
+    );
+
+    await writeFile(
+        path.join(pageDirPath, 'lazy.ts'),
+        [
+            "import { lazy } from 'react';",
+            '',
+            `export const Lazy${pageComponentName} = lazy(() => import('./page'));`,
+            '',
+        ].join('\n'),
+        'utf8',
+    );
+
+    await writeFile(
+        path.join(pageDirPath, 'page.tsx'),
+        [
+            `function ${pageComponentName}Page() {`,
+            '    return (',
+            `        <h2>${pageTitle} page</h2>`,
+            '    );',
+            '}',
+            '',
+            `export default ${pageComponentName}Page;`,
+            '',
+        ].join('\n'),
+        'utf8',
+    );
+}
+
+async function autoRegisterPage(pageMeta) {
+    const projectRoot = process.cwd();
+
+    const typesFilePath = path.join(projectRoot, ROUTER_TYPES_PATH);
+    const configFilePath = path.join(projectRoot, ROUTER_CONFIG_PATH);
+    const routerFilePath = path.join(projectRoot, ROUTER_FILE_PATH);
+
+    const [hasTypesFile, hasConfigFile, hasRouterFile] = await Promise.all([
+        pathExists(typesFilePath),
+        pathExists(configFilePath),
+        pathExists(routerFilePath),
+    ]);
+
+    if (!hasTypesFile || !hasConfigFile || !hasRouterFile) {
+        const missingFiles = [
+            !hasTypesFile ? ROUTER_TYPES_PATH : null,
+            !hasConfigFile ? ROUTER_CONFIG_PATH : null,
+            !hasRouterFile ? ROUTER_FILE_PATH : null,
+        ].filter(Boolean);
+
+        return {
+            status: 'skipped',
+            message: `Route auto-registration skipped. Missing files: ${missingFiles.join(', ')}`,
+        };
+    }
+
+    await insertRouteEnum(typesFilePath, pageMeta);
+    await insertRouteConfig(configFilePath, pageMeta);
+    await insertRouteImport(routerFilePath, pageMeta);
+    await insertRouteDefinition(routerFilePath, pageMeta);
+
+    return {
+        status: 'registered',
+    };
+}
+
+async function insertRouteEnum(filepath, pageMeta) {
+    await insertBeforeMarkerLine({
+        filepath,
+        marker: '// @route-enum',
+        block: `${pageMeta.routeEnumKey} = '${pageMeta.pageSlug}',`,
+    });
+}
+
+async function insertRouteConfig(filepath, pageMeta) {
+    await insertBeforeMarkerLine({
+        filepath,
+        marker: '// @route-config',
+        block: [
+            `[ERoutePath.${pageMeta.routeEnumKey}]: {`,
+            `    path: ERoutePath.${pageMeta.routeEnumKey},`,
+            `    title: '${pageMeta.pageTitle}',`,
+            '},',
+        ].join('\n'),
+    });
+}
+
+async function insertRouteImport(filepath, pageMeta) {
+    await insertBeforeMarkerLine({
+        filepath,
+        marker: '/* @route-imports */',
+        block: `import { ${pageMeta.pageComponentName} } from '../../../../../pages/${pageMeta.pageSlug}';`,
+    });
+}
+
+async function insertRouteDefinition(filepath, pageMeta) {
+    await insertBeforeMarkerLine({
+        filepath,
+        marker: '{/* @route-routes */}',
+        block: `<Route path={ERoutePath.${pageMeta.routeEnumKey}} element={<${pageMeta.pageComponentName} />} />`,
+    });
+}
+
+async function insertBeforeMarkerLine({ filepath, marker, block }) {
+    const fileContent = await readFile(filepath, 'utf8');
+    const eol = detectEol(fileContent);
+    const hadTrailingNewline = /\r?\n$/.test(fileContent);
+
+    const lines = fileContent.split(/\r?\n/);
+
+    if (hadTrailingNewline && lines.at(-1) === '') {
+        lines.pop();
+    }
+
+    const markerLineIndex = lines.findIndex((line) => line.includes(marker));
+
+    if (markerLineIndex === -1) {
+        fail(`Marker "${marker}" not found in ${toRelativeProjectPath(filepath)}`);
+    }
+
+    const markerLine = lines[markerLineIndex];
+    const baseIndent = getLineIndent(markerLine);
+    const normalizedBlock = indentBlock(block, baseIndent);
+    const normalizedBlockLines = normalizedBlock.split('\n');
+
+    if (blockAlreadyInserted(lines, normalizedBlockLines)) {
+        return;
+    }
+
+    lines.splice(markerLineIndex, 0, ...normalizedBlockLines);
+
+    let nextContent = lines.join(eol);
+
+    if (hadTrailingNewline) {
+        nextContent += eol;
+    }
+
+    await writeFile(filepath, nextContent, 'utf8');
+}
+
+function detectEol(content) {
+    return content.includes('\r\n') ? '\r\n' : '\n';
+}
+
+function getLineIndent(line) {
+    const match = line.match(/^\s*/);
+
+    return match ? match[0] : '';
+}
+
+function indentBlock(block, baseIndent) {
+    const rawLines = block.split('\n');
+
+    return rawLines
+        .map((line) => {
+            if (!line.trim()) {
+                return '';
+            }
+
+            const lineIndentSize = countLeadingSpaces(line);
+            const relativeIndentLevel = Math.floor(lineIndentSize / 4);
+            const relativeIndent = ' '.repeat(relativeIndentLevel * 4);
+
+            return `${baseIndent}${relativeIndent}${line.trimStart()}`;
+        })
+        .join('\n');
+}
+
+function countLeadingSpaces(line) {
+    const match = line.match(/^ */);
+
+    return match ? match[0].length : 0;
+}
+
+function blockAlreadyInserted(lines, normalizedBlockLines) {
+    const comparableLines = normalizedBlockLines.filter((line) => line.trim() !== '');
+
+    if (comparableLines.length === 0) {
+        return false;
+    }
+
+    for (let index = 0; index <= lines.length - comparableLines.length; index += 1) {
+        const currentSlice = lines.slice(index, index + comparableLines.length);
+
+        if (currentSlice.join('\n') === comparableLines.join('\n')) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+async function pathExists(filepath) {
+    try {
+        await access(filepath);
+        return true;
+    } catch (_) {
+        return false;
+    }
+}
+
+function toRelativeProjectPath(filepath) {
+    return path.relative(process.cwd(), filepath) || '.';
+}
+
+main().catch((error) => {
+    const message = error instanceof Error ? error.message : String(error);
+
+    fail(message);
+});

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

@@ -3,10 +3,10 @@ import Logo from '../../public/create-alistt69-kit-logo.svg';
 import styles from './styles.module.scss';
 
 interface AppProps {
-    children: ReactNode;
+    router: ReactNode;
 }
 
-function App({ children }: AppProps) {
+function App({ router }: AppProps) {
     return (
         <div className={styles.app_wrapper}>
             <div className={styles.created_by_section}>
@@ -15,7 +15,7 @@ function App({ children }: AppProps) {
                     created by create-alistt69-kit
                 </p>
             </div>
-            {children}
+            {router}
         </div>
     );
 }

package/src/features/react-router/files/src/app/providers/error-boundary/lib/provider/index.tsx

@@ -1,14 +1,14 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import ErrorScreen from '../../ui/error-screen';
 
-type ErrorBoundaryProps = {
+interface ErrorBoundaryProps {
     children: ReactNode;
-};
+}
 
-type ErrorBoundaryState = {
+interface ErrorBoundaryState {
     hasError: boolean;
     error: Error | null;
-};
+}
 
 class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     constructor(props: ErrorBoundaryProps) {

package/src/features/react-router/files/src/app/providers/error-boundary/ui/error-screen/index.tsx

@@ -1,9 +1,9 @@
-type ErrorScreenProps = {
+interface ErrorScreenProps {
     title?: string;
     description?: string;
     errorMessage?: string;
     onRetry?: () => void;
-};
+}
 
 function ErrorScreen({
     title = 'Something went wrong',
@@ -148,4 +148,4 @@ const buttonSecondaryStyle: React.CSSProperties = {
     border: '1px solid rgba(255,255,255,0.1)',
 };
 
-export default ErrorScreen;
+export default ErrorScreen;

package/src/features/react-router/files/src/app/providers/index.ts

@@ -1,7 +1,17 @@
-import ErrorBoundary from './error-boundary/lib/provider'
-import Router from './router/lib/provider'
+import ErrorBoundary from './error-boundary/lib/provider';
+import { useGetCurrentRouteConfig } from './router/lib/hooks/useGetCurrentRouteConfig';
+import RouterProvider from './router/lib/provider';
+import { routesConfig } from './router/model/config';
+import { ERoutePath, IRouteConfig } from './router/types';
 
 export {
-    Router as AppRouter,
-    ErrorBoundary as AppErrorBoundary,
+    // Router
+    ERoutePath,
+    IRouteConfig,
+    routesConfig,
+    RouterProvider,
+    useGetCurrentRouteConfig,
+
+    // Error Boundary
+    ErrorBoundary,
 };

package/src/features/react-router/files/src/app/providers/router/lib/hooks/useGetCurrentRouteConfig.ts

@@ -0,0 +1,13 @@
+import { useLocation } from 'react-router-dom';
+import { routesConfig } from '../../model/config';
+import { IRouteConfig, ERoutePath } from '../../types';
+
+export const useGetCurrentRouteConfig = (): IRouteConfig => {
+    const location = useLocation();
+
+    const firstPathSegment = location.pathname.split('/')[1] || '';
+
+    const matchedRoute = Object.values(routesConfig).find((route) => route.path === firstPathSegment);
+
+    return matchedRoute || routesConfig[ERoutePath.MAIN];
+};

package/src/features/react-router/files/src/app/providers/router/lib/provider/index.tsx

@@ -1,10 +1,21 @@
-import { RouterProvider } from 'react-router-dom';
-import { router } from '../router';
+import { ComponentType, ReactNode, useMemo } from 'react';
+import { RouterProvider as RouterDomProvider } from 'react-router-dom';
+import { getRouter } from '../../model/router';
+
+interface RouterProviderProps {
+    errorBoundary: ComponentType<{ children: ReactNode }>;
+}
+
+function RouterProvider({ errorBoundary }: RouterProviderProps) {
+    const router = useMemo(() => (
+        getRouter(errorBoundary)
+    ), [errorBoundary]);
 
-function Router() {
     return (
-        <RouterProvider router={router} />
+        <RouterDomProvider
+            router={router}
+        />
     );
 }
 
-export default Router;
+export default RouterProvider;

package/src/features/react-router/files/src/app/providers/router/model/config/index.ts

@@ -0,0 +1,9 @@
+import { ERoutePath, IRouteConfig } from '../../types';
+
+export const routesConfig: Record<Exclude<ERoutePath, ERoutePath.ERROR>, IRouteConfig> = {
+    [ERoutePath.MAIN]: {
+        path: ERoutePath.MAIN,
+        title: 'Main',
+    },
+    // @route-config
+};

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

@@ -0,0 +1,24 @@
+import { ComponentType, ReactNode } from 'react';
+import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
+import { ERoutePath } from '../../types';
+import { Error } from '../../../../../pages/error';
+import { Main } from '../../../../../pages/main';
+/* @route-imports */
+import AppLayout from '../../ui/app';
+
+export const getRouter = (ErrorBoundary: ComponentType<{ children: ReactNode }>) => createBrowserRouter(
+    createRoutesFromElements(
+        <Route
+            path="/"
+            element={(
+                <ErrorBoundary>
+                    <AppLayout />
+                </ErrorBoundary>
+            )}
+        >
+            <Route index element={<Main />} />
+            {/* @route-routes */}
+            <Route path={ERoutePath.ERROR} element={<Error />} />
+        </Route>,
+    ),
+);

package/src/features/react-router/files/src/app/providers/router/types/index.ts

@@ -0,0 +1,10 @@
+export enum ERoutePath {
+    MAIN = '',
+    // @route-enum
+    ERROR = '*',
+}
+
+export interface IRouteConfig {
+    path: ERoutePath;
+    title: string;
+}

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

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import { NavLink, Outlet } from 'react-router-dom';
+import styles from './styles.module.scss';
+
+export default function AppLayout() {
+    return (
+        <div className={styles.layout_wrapper}>
+            <aside className={styles.sidebar}>
+                <nav>
+                    <NavLink
+                        className={({ isActive }) => clsx({
+                            [styles.active]: isActive,
+                        })}
+                        to="/"
+                    >
+                        Main
+                    </NavLink>
+                </nav>
+                <nav>
+                    <NavLink
+                        className={({ isActive }) => clsx({
+                            [styles.active]: isActive,
+                        })}
+                        to="/error-route"
+                    >
+                        Error
+                    </NavLink>
+                </nav>
+            </aside>
+
+            <main>
+                <Outlet />
+            </main>
+        </div>
+    );
+}

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

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from '@/app/App';
-import { AppRouter } from '@/app/providers';
+import { RouterProvider, ErrorBoundary } from '@/app/providers';
 import './styles/index.scss';
 
 const container = document.getElementById('root');
@@ -12,8 +12,12 @@ if (!container) {
 
 createRoot(container).render(
     <StrictMode>
-        <App>
-            <AppRouter />
-        </App>
+        <App
+            router={(
+                <RouterProvider
+                    errorBoundary={ErrorBoundary}
+                />
+            )}
+        />
     </StrictMode>,
 );

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

@@ -14,6 +14,9 @@ export const reactRouterFeature = defineFeature({
         dependencies: {
             'react-router-dom': '^7.13.2',
         },
+        scripts: {
+            'generate:page': 'node ./scripts/generate/page.mjs',
+        },
     },
     copyFiles: resolve(currentDirPath, 'files'),
 });

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

@@ -6,7 +6,7 @@ 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 = [
+    const plugins: webpack.WebpackPluginInstance[] = [
         new HTMLWebpackPlugin({
             template: paths.html,
         }),

package/src/templates/base/src/styles/index.scss

@@ -7,7 +7,7 @@ body,
 }
 
 body {
-    font-family: Bahnschrift;
+    font-family: Bahnschrift, serif;
     background: #141617;
     color: #A6A8AAFF;
 }

package/src/templates/base/src/styles/normalize.scss

@@ -0,0 +1,36 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  border: none;
+  list-style: none;
+  text-decoration: none;
+  box-sizing: border-box;
+  color: inherit;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+input,
+button,
+textarea {
+  font-size: inherit;
+  font-family: inherit;
+
+  &::placeholder {
+    user-select: none;
+  }
+}
+
+button {
+  user-select: none;
+  cursor: pointer;
+}
+
+img {
+  user-select: none;
+}

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

@@ -1,39 +0,0 @@
-import clsx from 'clsx';
-import { NavLink, Outlet } from 'react-router-dom';
-import { AppErrorBoundary } from '@/app/providers';
-import styles from './styles.module.scss';
-
-export default function AppLayout() {
-    return (
-        <AppErrorBoundary>
-            <div className={styles.layout_wrapper}>
-                <aside className={styles.sidebar}>
-                    <nav>
-                        <NavLink
-                            className={({ isActive }) => clsx({
-                                [styles.active]: isActive,
-                            })}
-                            to="/"
-                        >
-                            Main
-                        </NavLink>
-                    </nav>
-                    <nav>
-                        <NavLink
-                            className={({ isActive }) => clsx({
-                                [styles.active]: isActive,
-                            })}
-                            to="/error-route"
-                        >
-                            Error
-                        </NavLink>
-                    </nav>
-                </aside>
-
-                <main>
-                    <Outlet />
-                </main>
-            </div>
-        </AppErrorBoundary>
-    );
-}

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

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