.
└── src/
    ├── components/
    │   ├── ordinary
    │   ├── simple
    │   ├── smart
    │   └── ui
    └── ...

.
└── src/
    ├── components/
    │   ├── ordinary
    │   ├── simple
    │   ├── smart
    │   └── ui
    ├── containers
    ├── pages
    └── ...

// index.tsx
import React, { memo } from "react";
import * as S from "./styled"; // Импортируем стилизованные компоненты
const Align = memo(({ children, axis, isAdaptable = false }: Readonly<Props>) => {
  return (
    <S.Align $axis={axis} $isAdaptable={isAdaptable}>
      {children}
    </S.Align>
  );
});
export { Align };
export interface Props {
  axis: S.Axis;
  children?: React.ReactNode;
  isAdaptable?: boolean;
}

// styled.ts
import styled, { css } from "styled-components";
const notAdaptableMixin = css`
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
`;
const adaptableMixin = css<AlignProps>`
  width: ${(props) => !props.$axis.includes("x") && "100%"};
  height: ${(props) => !props.$axis.includes("y") && "100%"};
  min-width: ${(props) => props.$axis.includes("x") && "100%"};
  min-height: ${(props) => props.$axis.includes("y") && "100%"};
`;
export const Align = styled.div<AlignProps>`
  display: flex;
  flex-grow: 1;
  justify-content: ${(props) => (props.$axis.includes("x") ? "center" : "start")};
  align-items: ${(props) => (props.$axis.includes("y") ? "center" : "start")};
  ${(props) => (props.$isAdaptable ? adaptableMixin : notAdaptableMixin)};
`;
export interface AlignProps {
  $axis: Axis;
  $isAdaptable?: boolean;
}
export type Axis = ("y" | "x")[] | "x" | "y";

// config/api.config.ts
export const serverURI = "http://localhost:8080";
export const routesPrefix = '/api/v1';
// config/routes.config.ts
import { routesPrefix } from "./api.config";
export const productBrowserRoutes = {
  getOne: (to: string = ":code") => `/product/${to}`,
  search: (param: string = ":search") => `/search/${param}`,
};
export const productAPIRoutes = {
  getOne: (code: string) => `${routesPrefix}/product/code/${code}`,
  search: () => `${routesPrefix}/product/search`,
};

// constants/message.constants.ts
export const UNKNOWN_ERROR = "Неизвестная ошибка";

// hooks/useAPI.ts
// Хук для взаимодействия с сервисами
/* eslint-disable react-hooks/exhaustive-deps */
import { useCallback, useEffect } from "react";
import { useLocalObservable } from "mobx-react-lite";
import type { API, Schema, Take } from "@core/types";
function useAPI<
  F extends API.Service.Function<API.Response<any>>,
  R extends Take.FromServiceFunction.Response<F>,
  P extends Parameters<F>
>(service: F, { isPendingAfterMount = false, isIgnoreHTTPErrors = false }: Options = {}) {
  const localStore = useLocalObservable<Store>(() => ({
    isPending: {
      value: isPendingAfterMount,
      set: function (value) {
        this.value = value;
      },
    },
  }));
  const call = useCallback(
    async (...params: P): Promise<R["result"]> => {
      localStore.isPending.set(true);
      try {
        const { data } = await service(...params);
        const { result } = data;
        localStore.isPending.set(false);
        return result;
      } catch (error) {
        if (isIgnoreHTTPErrors === false) {
          console.error(error);
        }
        localStore.isPending.set(false);
        throw error;
      }
    },
    [service, isIgnoreHTTPErrors]
  );
  const isPending = useCallback(() => {
    return localStore.isPending.value;
  }, []);
  useEffect(() => {
    localStore.isPending.set(isPendingAfterMount);
  }, [isPendingAfterMount]);
  return {
    call,
    isPending,
  };
}
export { useAPI };
export interface Options {
  isPendingAfterMount?: boolean;
  isIgnoreHTTPErrors?: boolean;
}
type Store = Schema.Store<{ isPending: boolean }>;

// models/product.model.ts
// Описание модели товара
export interface ProductModel {
  id: number;
  name: string;
  code: string;
  info: {
    description: string;
    note: string;
  };
  config: {
    isAllowedForPurchaseIfInStockZero: boolean;
    isInStock: boolean;
  };
  seo: {
    title: string;
    keywords: string;
    description: string;
  };
}

// services/product.service.ts
// Сервисы для взаимодействия с товарами
import { api } from "../api";
import { routesConfig } from "../config";
import type { ProductModel } from "../models";
import type { API } from "../types";
export function getOne(code: string) {
  return api.get<API.Service.Response.GetOne<ProductModel>>(
    routesConfig.productAPIRoutes.getOne(code)
  );
}

// theme/index.ts
// Тема приложения
import { DefaultTheme } from "styled-components";
export const theme: DefaultTheme = {
  colors: {
      primary: "#2648f1",
      intense: "#151e27",
      green: "#53d769",
      grey: "#626b73",
      red: "#f73d34",
      orange: "#fdb549",
      yellow: "#ffe243",
      white: "white",
    },
};

// types/index.tsx
// Вспомогательные типы
import type { AxiosResponse } from "axios";
export namespace API {
  export namespace Service {
    export namespace Response {
      export type Upsert<T> = Response<T | null>;
      export type GetOne<T> = Response<T | null>;
      export type GetMany<T> = Response<{
        rows: T[];
        totalRowCount: number;
        totalPageCount: number;
      }>;
    }
    export type Function<T extends API.Response<any>, U extends any[] = any[]> = (
      ...params: U
    ) => Promise<AxiosResponse<T>>;
  }
  export type Response<T> = {
    status: number;
    result: T;
  };
}

// utils/throttle.ts
function throttle<P extends any[]>(func: (...params: P) => any, limit: number) {
  let inThrottle: boolean;
  return function (...params: P): any {
    if (!inThrottle) {
      inThrottle = true;
      func(...params);
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}
export { throttle };

// store/index.tsx
import { createContext } from "react";
import { useLocalObservable } from "mobx-react-lite";
import { app, App } from "./segments/app";
import { layout, Layout } from "./segments/layout";
import { counters, Counters } from "./segments/counters";
export const combinedStore = { layout, app, counters };
export const storeContext = createContext<StoreContext>(combinedStore);
export function StoreProvider({ children }: { children: React.ReactNode }) {
  const store = useLocalObservable(() => combinedStore);
  return <storeContext.Provider value={store}>{children}</storeContext.Provider>;
}
export type StoreContext = {
  app: App;
  layout: Layout;
  counters: Counters;
};

// api.ts
// Экземпляр AXIOS для взаимодействия с сервером
import axios from "axios";
import { apiConfig } from "./config";
const api = axios.create({
  baseURL: apiConfig.serverURI,
});
api.interceptors.request.use((req) => {
  return {
    ...req,
    baseURL: apiConfig.serverURI,
  };
});
export { api };

// routes/index.tsx
import { Switch, Route } from "react-router-dom";
// Экспортируем страницы
import { Product } from "../pages/Product";
...
import { NotFound } from "../pages/NotFound";
import { routesConfig } from "../core/config";
const Routes = () => {
  return (
    <Switch>
      <Route exact path={routesConfig.productBrowserRoutes.getOne()}>
        <Product />
      </Route>
      {/* Объявляем как-то роуты */}
      <Route>
        <NotFound />
      </Route>
    </Switch>
  );
};
export { Routes };

// app.tsx
import React, { useEffect } from "react";
// Импортирует роуты
import { Routes } from "./routes";
const App = () => {
  return (
      <Routes />
  );
};
export { App };

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { ThemeProvider } from "styled-components";
// импортируем наше
import { App } from "./app";
// импортируем глобальные стили
import { BodyStyles } from "./styles";
import { StoreProvider } from "../core/store";
// импортируем тему
import { theme } from "../core/theme";
import reportWebVitals from "./reportWebVitals";
const app = document.getElementById("app");
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <BodyStyles />
      <BrowserRouter>
        <StoreProvider>
          <App />
        </StoreProvider>
      </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>,
  app
);
reportWebVitals();

.
└── src/
    ├── assets/
    │   ├── fonts
    │   └── icons
    ├── components/
    │   ├── ordinary
    │   ├── simple
    │   ├── smart
    │   └── ui
    ├── containers
    ├── core/
    │   ├── config
    │   ├── constants
    │   ├── hooks
    │   ├── models
    │   ├── schemes
    │   ├── services
    │   ├── store
    │   ├── theme
    │   ├── types
    │   ├── utils
    │   └── api.ts
    ├── pages
    ├── routes
    ├── styles
    ├── app.tsx
    └── index.tsx