create-alistt69-kit 0.3.4 → 0.3.6

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

@@ -1,18 +1,18 @@
-import { ReactNode } from 'react';
-import CreatedBy from '@/widgets/created-by';
-import styles from './styles.module.scss';
-
-interface AppProps {
-    router: ReactNode;
-}
-
-function App({ router }: AppProps) {
-    return (
-        <div className={styles.app_wrapper}>
-            {router}
-            <CreatedBy />
-        </div>
-    );
-}
-
-export default App;
+import { ReactNode } from 'react';
+import CreatedBy from '@/widgets/created-by';
+import styles from './styles.module.scss';
+
+interface AppProps {
+    router: ReactNode;
+}
+
+function App({ router }: AppProps) {
+    return (
+        <div className={styles.app_wrapper}>
+            {router}
+            <CreatedBy />
+        </div>
+    );
+}
+
+export default App;

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

@@ -1,44 +1,44 @@
-import { Component, ErrorInfo, ReactNode } from 'react';
-import ErrorScreen from '../../ui/error-screen';
-
-interface ErrorBoundaryProps {
-    children: ReactNode;
-}
-
-interface ErrorBoundaryState {
-    hasError: boolean;
-    error: Error | null;
-}
-
-class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-
-    static getDerivedStateFromError(error: Error) {
-        return {
-            hasError: true,
-            error,
-        };
-    }
-
-    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.error('ErrorBoundary caught:', error, errorInfo);
-    }
-
-    public render(): ReactNode {
-        if (this.state.hasError) {
-            return (
-                <ErrorScreen
-                    errorMessage={this.state.error?.message}
-                    onRetry={() => window.location.reload()}
-                />
-            );
-        }
-
-        return this.props.children;
-    }
-}
-
-export default ErrorBoundary;
+import { Component, ErrorInfo, ReactNode } from 'react';
+import ErrorScreen from '../../ui/error-screen';
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error('ErrorBoundary caught:', error, errorInfo);
+    }
+
+    public render(): ReactNode {
+        if (this.state.hasError) {
+            return (
+                <ErrorScreen
+                    errorMessage={this.state.error?.message}
+                    onRetry={() => window.location.reload()}
+                />
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

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

@@ -1,151 +1,151 @@
-interface ErrorScreenProps {
-    title?: string;
-    description?: string;
-    errorMessage?: string;
-    onRetry?: () => void;
-}
-
-function ErrorScreen({
-    title = 'Something went wrong',
-    description = 'An unexpected error occurred. Try again or reload the page.',
-    errorMessage,
-    onRetry,
-}: ErrorScreenProps) {
-    return (
-        <main
-            style={{
-                minHeight: '100vh',
-                display: 'grid',
-                placeItems: 'center',
-                padding: '24px',
-                background:
-                    'radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 40%), #0b0d12',
-                color: '#f5f7fa',
-            }}
-        >
-            <section
-                style={{
-                    width: '100%',
-                    maxWidth: '560px',
-                    padding: '32px',
-                    borderRadius: '24px',
-                    border: '1px solid rgba(255,255,255,0.08)',
-                    background: 'rgba(255,255,255,0.04)',
-                    backdropFilter: 'blur(12px)',
-                    boxShadow: '0 20px 80px rgba(0,0,0,0.35)',
-                }}
-            >
-                <div
-                    style={{
-                        width: '56px',
-                        height: '56px',
-                        borderRadius: '16px',
-                        display: 'grid',
-                        placeItems: 'center',
-                        fontSize: '28px',
-                        background: 'rgba(255,255,255,0.08)',
-                        marginBottom: '20px',
-                    }}
-                >
-                    ⚠️
-                </div>
-
-                <h1
-                    style={{
-                        margin: 0,
-                        fontSize: '32px',
-                        lineHeight: 1.1,
-                        fontWeight: 700,
-                    }}
-                >
-                    {title}
-                </h1>
-
-                <p
-                    style={{
-                        marginTop: '12px',
-                        marginBottom: 0,
-                        fontSize: '16px',
-                        lineHeight: 1.6,
-                        color: 'rgba(245,247,250,0.78)',
-                    }}
-                >
-                    {description}
-                </p>
-
-                {errorMessage ? (
-                    <pre
-                        style={{
-                            marginTop: '20px',
-                            padding: '16px',
-                            overflowX: 'auto',
-                            borderRadius: '16px',
-                            background: 'rgba(0,0,0,0.28)',
-                            border: '1px solid rgba(255,255,255,0.08)',
-                            color: '#ffb4b4',
-                            fontSize: '13px',
-                            lineHeight: 1.5,
-                            whiteSpace: 'pre-wrap',
-                            wordBreak: 'break-word',
-                        }}
-                    >
-                        {errorMessage}
-                    </pre>
-                ) : null}
-
-                <div
-                    style={{
-                        display: 'flex',
-                        gap: '12px',
-                        flexWrap: 'wrap',
-                        marginTop: '24px',
-                    }}
-                >
-                    {onRetry ? (
-                        <button
-                            type="button"
-                            onClick={onRetry}
-                            style={buttonPrimaryStyle}
-                        >
-                            Try again
-                        </button>
-                    ) : null}
-
-                    <button
-                        type="button"
-                        onClick={() => window.location.reload()}
-                        style={buttonSecondaryStyle}
-                    >
-                        Reload page
-                    </button>
-                </div>
-            </section>
-        </main>
-    );
-}
-
-const buttonBaseStyle: React.CSSProperties = {
-    appearance: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    borderRadius: '14px',
-    padding: '12px 16px',
-    fontSize: '14px',
-    fontWeight: 600,
-    transition: 'transform 0.15s ease, opacity 0.15s ease',
-};
-
-const buttonPrimaryStyle: React.CSSProperties = {
-    ...buttonBaseStyle,
-    background: '#ffffff',
-    color: '#0b0d12',
-};
-
-const buttonSecondaryStyle: React.CSSProperties = {
-    ...buttonBaseStyle,
-    background: 'rgba(255,255,255,0.08)',
-    color: '#f5f7fa',
-    border: '1px solid rgba(255,255,255,0.1)',
-};
-
-export default ErrorScreen;
+interface ErrorScreenProps {
+    title?: string;
+    description?: string;
+    errorMessage?: string;
+    onRetry?: () => void;
+}
+
+function ErrorScreen({
+    title = 'Something went wrong',
+    description = 'An unexpected error occurred. Try again or reload the page.',
+    errorMessage,
+    onRetry,
+}: ErrorScreenProps) {
+    return (
+        <main
+            style={{
+                minHeight: '100vh',
+                display: 'grid',
+                placeItems: 'center',
+                padding: '24px',
+                background:
+                    'radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 40%), #0b0d12',
+                color: '#f5f7fa',
+            }}
+        >
+            <section
+                style={{
+                    width: '100%',
+                    maxWidth: '560px',
+                    padding: '32px',
+                    borderRadius: '24px',
+                    border: '1px solid rgba(255,255,255,0.08)',
+                    background: 'rgba(255,255,255,0.04)',
+                    backdropFilter: 'blur(12px)',
+                    boxShadow: '0 20px 80px rgba(0,0,0,0.35)',
+                }}
+            >
+                <div
+                    style={{
+                        width: '56px',
+                        height: '56px',
+                        borderRadius: '16px',
+                        display: 'grid',
+                        placeItems: 'center',
+                        fontSize: '28px',
+                        background: 'rgba(255,255,255,0.08)',
+                        marginBottom: '20px',
+                    }}
+                >
+                    ⚠️
+                </div>
+
+                <h1
+                    style={{
+                        margin: 0,
+                        fontSize: '32px',
+                        lineHeight: 1.1,
+                        fontWeight: 700,
+                    }}
+                >
+                    {title}
+                </h1>
+
+                <p
+                    style={{
+                        marginTop: '12px',
+                        marginBottom: 0,
+                        fontSize: '16px',
+                        lineHeight: 1.6,
+                        color: 'rgba(245,247,250,0.78)',
+                    }}
+                >
+                    {description}
+                </p>
+
+                {errorMessage ? (
+                    <pre
+                        style={{
+                            marginTop: '20px',
+                            padding: '16px',
+                            overflowX: 'auto',
+                            borderRadius: '16px',
+                            background: 'rgba(0,0,0,0.28)',
+                            border: '1px solid rgba(255,255,255,0.08)',
+                            color: '#ffb4b4',
+                            fontSize: '13px',
+                            lineHeight: 1.5,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        }}
+                    >
+                        {errorMessage}
+                    </pre>
+                ) : null}
+
+                <div
+                    style={{
+                        display: 'flex',
+                        gap: '12px',
+                        flexWrap: 'wrap',
+                        marginTop: '24px',
+                    }}
+                >
+                    {onRetry ? (
+                        <button
+                            type="button"
+                            onClick={onRetry}
+                            style={buttonPrimaryStyle}
+                        >
+                            Try again
+                        </button>
+                    ) : null}
+
+                    <button
+                        type="button"
+                        onClick={() => window.location.reload()}
+                        style={buttonSecondaryStyle}
+                    >
+                        Reload page
+                    </button>
+                </div>
+            </section>
+        </main>
+    );
+}
+
+const buttonBaseStyle: React.CSSProperties = {
+    appearance: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    borderRadius: '14px',
+    padding: '12px 16px',
+    fontSize: '14px',
+    fontWeight: 600,
+    transition: 'transform 0.15s ease, opacity 0.15s ease',
+};
+
+const buttonPrimaryStyle: React.CSSProperties = {
+    ...buttonBaseStyle,
+    background: '#ffffff',
+    color: '#0b0d12',
+};
+
+const buttonSecondaryStyle: React.CSSProperties = {
+    ...buttonBaseStyle,
+    background: 'rgba(255,255,255,0.08)',
+    color: '#f5f7fa',
+    border: '1px solid rgba(255,255,255,0.1)',
+};
+
+export default ErrorScreen;

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

@@ -1,17 +1,17 @@
-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
-    ERoutePath,
-    IRouteConfig,
-    routesConfig,
-    RouterProvider,
-    useGetCurrentRouteConfig,
-
-    // Error Boundary
-    ErrorBoundary,
-};
+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
+    ERoutePath,
+    IRouteConfig,
+    routesConfig,
+    RouterProvider,
+    useGetCurrentRouteConfig,
+
+    // Error Boundary
+    ErrorBoundary,
+};

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

@@ -1,21 +1,21 @@
-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]);
-
-    return (
-        <RouterDomProvider
-            router={router}
-        />
-    );
-}
-
-export default RouterProvider;
+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]);
+
+    return (
+        <RouterDomProvider
+            router={router}
+        />
+    );
+}
+
+export default RouterProvider;

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

@@ -1,24 +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>,
-    ),
-);
+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'; // todo: @
+/* @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

@@ -1,10 +1,10 @@
-export enum ERoutePath {
-    MAIN = '',
-    // @route-enum
-    ERROR = '*',
-}
-
-export interface IRouteConfig {
-    path: ERoutePath;
-    title: string;
-}
+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

@@ -1,36 +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>
-    );
-}
+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>
+    );
+}