create-alistt69-kit 0.1.20 → 0.1.22

package/package.json

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

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/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,8 @@
+import { ERoutePath, IRouteConfig } from '../../types';
+
+export const routesConfig: Record<Exclude<ERoutePath, ERoutePath.ERROR>, IRouteConfig> = {
+    [ERoutePath.MAIN]: {
+        path: ERoutePath.MAIN,
+        title: 'Main',
+    },
+};

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

@@ -0,0 +1,21 @@
+import { ComponentType, ReactNode } from 'react';
+import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
+import { Error } from '../../../../../pages/error';
+import { Main } from '../../../../../pages/main';
+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 path="*" element={<Error />} />
+        </Route>,
+    ),
+);

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

@@ -0,0 +1,9 @@
+export enum ERoutePath {
+    MAIN = '',
+    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/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>,
-    ),
-);