apps/web: add BIGSTRING metaObject fieldType

This reverts commit 36e158cb19894f6ce40c2f6b3cc41e8106384900.

.env

@@ -1,3 +0,0 @@
-USE_DEV_COLORS=
-
-URL_IUS_DIRECT=

.gitignore

@@ -1,9 +1,14 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# dependencies
+# Logs
-node_modules
+logs
-.pnp
+*.log
-.pnp.js
+npm-debug.log*
+
+# Dependency directory
+**/node_modules/**
+_node_modules
+.pnp.cjs
 
 # testing
 coverage

.vscode/settings.json

@@ -31,5 +31,6 @@
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "editor.inlineSuggest.showToolbar": "always"
 }

README.md

@@ -18,9 +18,9 @@ This Turborepo includes the following packages/apps:
 
 - `docs`: a [Next.js](https://nextjs.org/) app
 - `web`: another [Next.js](https://nextjs.org/) app
-- `ui`: a stub React component library shared by both `web` and `docs` applications
+- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
-- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
+- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
+- `@repo/tsconfig`: `tsconfig.json`s used throughout the monorepo
 
 Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
 

apps/web/Dockerfile

@@ -1,16 +1,19 @@
 FROM node:alpine AS builder
+RUN corepack enable && corepack prepare pnpm@latest --activate
+ENV PNPM_HOME=/usr/local/bin
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 RUN apk update
 # Set working directory
 WORKDIR /app
-RUN yarn global add turbo
+RUN pnpm add -g turbo
-RUN yarn global add dotenv-cli
 COPY . .
 RUN turbo prune --scope=web --docker
 
 # Add lockfile and package.json's of isolated subworkspace
 FROM node:alpine AS installer
+RUN corepack enable && corepack prepare pnpm@latest --activate
+ENV PNPM_HOME=/usr/local/bin
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
@@ -18,14 +21,16 @@ WORKDIR /app
 # First install the dependencies (as they change less often)
 COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/yarn.lock ./yarn.lock
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
-RUN yarn install
+COPY --from=builder /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
+RUN pnpm install
 
 # Build the project
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
-COPY .env .env
+ARG URL_IUS_DIRECT
-RUN yarn dotenv -e .env turbo run build --filter=web...
+ARG NEXT_PUBLIC_USE_DEV_COLORS
+RUN pnpm turbo run build --filter=web...
 
 FROM node:alpine AS runner
 WORKDIR /app

apps/web/api/ius/query.ts

@@ -1,4 +1,3 @@
-'use server';
 import type * as t from './types';
 import { getUrls } from '@/config/urls';
 import { createUrl, type PageUrlParams } from '@/utils/url';
@@ -6,55 +5,116 @@ import type { WretchError } from 'wretch';
 import wretch from 'wretch';
 
 const urls = getUrls();
-const api = wretch(urls.URL_UIS).errorType('json');
+const api = wretch(urls.URL_IUS).options({ cache: 'no-store' }).errorType('json');
 
-type Input = { pageUrlParams: PageUrlParams; payload?: unknown };
+type Input = { cookie?: string; pageUrlParams: PageUrlParams; payload?: unknown };
 
-export async function getData({ pageUrlParams }: Input) {
+export async function getData({ pageUrlParams, cookie = '' }: Input) {
   const url = createUrl({
     ...pageUrlParams,
     route: '',
   });
 
   return api
+    .headers({ cookie })
     .get(url)
     .res<t.ResponseGetData>((cb) => cb.json())
     .then((res) => res);
 }
 
-export async function getMetaData({ pageUrlParams }: Input) {
+export async function getMetaData({ pageUrlParams, cookie = '' }: Input) {
   const url = createUrl({ ...pageUrlParams, route: '/meta' });
 
   return api
+    .headers({ cookie })
     .get(url)
     .res<t.ResponseMetaData>((res) => res.json())
     .then((res) => res);
 }
 
-export async function getConfig({ pageUrlParams }: Input) {
+export async function getConfig({ pageUrlParams, cookie = '' }: Input) {
   const url = createUrl({ ...pageUrlParams, route: '/config' });
 
   return api
+    .headers({ cookie })
     .get(url)
     .res<t.ResponseConfig>((res) => res.json())
     .then((res) => res);
 }
 
-export async function getConditions({ pageUrlParams }: Input) {
+export async function getConditions({ pageUrlParams, cookie = '' }: Input) {
   const url = createUrl({ ...pageUrlParams, route: '/conditions' });
 
   return api
+    .headers({ cookie })
     .get(url)
     .res<t.ResponseConditions>((res) => res.text())
     .then((res) => res);
 }
 
-export async function validate({ pageUrlParams, payload }: Input) {
+export async function save({ pageUrlParams, payload }: Input) {
-  const url = createUrl({ ...pageUrlParams, route: '/validate' });
+  const url = createUrl({ ...pageUrlParams, route: '/transfer' });
 
   return api
     .post(payload, url)
     .res<boolean>((res) => res.ok)
     .then((res) => res)
-    .catch((error: WretchError) => error.json as t.HttpValidationError);
+    .catch((error: WretchError) => error.json as t.HttpValidationError | t.HttpError);
+}
+
+export async function retract({ pageUrlParams, payload }: Input) {
+  const url = createUrl({ ...pageUrlParams, route: '/return' });
+
+  return api
+    .post(payload, url)
+    .res<boolean>((res) => res.ok)
+    .then((res) => res)
+    .catch((error: WretchError) => error.json as t.HttpValidationError | t.HttpError);
+}
+
+export async function getDocumentTypes({ pageUrlParams, cookie = '' }: Input) {
+  const url = createUrl({ ...pageUrlParams, route: '/documenttypes' });
+
+  return api
+    .headers({ cookie })
+    .get(url)
+    .res<t.ResponseDocumentTypes>((res) => res.json())
+    .then((res) => res);
+}
+
+export async function getDocuments({ pageUrlParams, cookie = '' }: Input) {
+  const url = createUrl({ ...pageUrlParams, route: '/documents' });
+
+  return api
+    .headers({ cookie })
+    .get(url)
+    .res<t.ResponseDocuments>((res) => res.json())
+    .then((res) => res);
+}
+
+export function uploadDocument({
+  pageUrlParams,
+  document,
+  formData,
+}: Input & { document: Pick<t.DocumentType, 'documentTypeId'>; formData: FormData }) {
+  const url = createUrl({
+    ...pageUrlParams,
+    route: '/document',
+    urlSearchParams: { ...pageUrlParams.urlSearchParams, ...document },
+  });
+
+  return fetch(urls.URL_IUS + url, {
+    body: formData,
+    method: 'POST',
+  })
+    .then((res) => {
+      if (res.ok) {
+        return true;
+      }
+
+      return res.json();
+    })
+    .catch((error) => {
+      throw error as t.HttpError;
+    });
 }

apps/web/api/ius/tools.ts

@@ -0,0 +1,34 @@
+import type { Document, DocumentType } from './types';
+
+export function combineDocuments({
+  documentTypes,
+  documents,
+}: {
+  documentTypes: DocumentType[];
+  documents: Document[];
+}) {
+  if (!documents.length) {
+    return documentTypes.map((x) => ({ ...(x as Document), canUpload: true }));
+  }
+
+  const nonUploadableDocuments = documents
+    .filter(
+      (document) =>
+        !documentTypes.some(
+          (documentType) => documentType.documentTypeId === document.documentTypeId
+        )
+    )
+    .map((document) => ({ ...document, canUpload: false }));
+
+  return documentTypes
+    .map((documentType) => {
+      const targetDocument = documents.find(
+        (document) => document.documentTypeId === documentType.documentTypeId
+      );
+
+      return { ...documentType, ...targetDocument, canUpload: true };
+    })
+    .concat(nonUploadableDocuments);
+}
+
+export type CombinedDocuments = ReturnType<typeof combineDocuments>;

apps/web/api/ius/types.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export type MetaObject = {
   disabled: boolean;
-  fieldType: 'CHECKBOX' | 'DECIMAL' | 'INT' | 'STRING';
+  fieldType: 'CHECKBOX' | 'DECIMAL' | 'INT' | 'STRING' | 'BIGSTRING';
   label: string;
   max: number;
   min: number;
@@ -11,10 +11,22 @@ export type MetaObject = {
 
 type Value = any;
 
+export type DocumentType = {
+  documentTypeId: string;
+  name: string;
+};
+
+export type Document = DocumentType & {
+  documentId?: string;
+  href?: string;
+};
+
 export type ResponseGetData = Record<string, Value>;
 export type ResponseMetaData = Record<string, MetaObject>;
 export type ResponseConfig = { title: string };
 export type ResponseConditions = string;
+export type ResponseDocumentTypes = DocumentType[];
+export type ResponseDocuments = Document[];
 
 export type HttpError = {
   errors: string[];

apps/web/app/globals.css

@@ -18,3 +18,24 @@
 body {
   background-color: var(--color-background);
 }
+
+/* Scroll bar stylings */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.4);
+}

apps/web/app/ius/[slug]/conditions/page.tsx

@@ -4,10 +4,14 @@ import type { PageProps } from '@/types/page';
 import { withError } from '@/utils/error';
 import { getPageUrlParams } from '@/utils/url';
 import type { Metadata } from 'next';
+import { headers } from 'next/headers';
 
 export async function generateMetadata(pageProps: PageProps): Promise<Metadata> {
   const pageUrlParams = getPageUrlParams(pageProps);
-  const { title } = await apiIUS.getConfig({ pageUrlParams });
+  const headersList = headers();
+  const cookie = headersList.get('cookie') ?? '';
+
+  const { title } = await apiIUS.getConfig({ cookie, pageUrlParams });
   const text = `Условия: ${title} | Эволюция`;
 
   return {
@@ -24,7 +28,10 @@ export default async function Page(pageProps: PageProps) {
   return withError({
     render: async () => {
       const pageUrlParams = getPageUrlParams(pageProps);
-      const conditions = await apiIUS.getConditions({ pageUrlParams });
+      const headersList = headers();
+      const cookie = headersList.get('cookie') ?? '';
+
+      const conditions = await apiIUS.getConditions({ cookie, pageUrlParams });
 
       return <Conditions html={conditions} />;
     },

apps/web/app/ius/[slug]/page.tsx

@@ -1,13 +1,19 @@
 import * as apiIUS from '@/api/ius/query';
+import { combineDocuments } from '@/api/ius/tools';
 import { Form } from '@/components/Form';
+import type { FormComponentProps } from '@/components/Form/types';
 import type { PageProps } from '@/types/page';
 import { withError } from '@/utils/error';
 import { getPageUrlParams } from '@/utils/url';
 import type { Metadata } from 'next';
+import { headers } from 'next/headers';
 
 export async function generateMetadata(pageProps: PageProps): Promise<Metadata> {
   const pageUrlParams = getPageUrlParams(pageProps);
-  const { title } = await apiIUS.getConfig({ pageUrlParams });
+  const headersList = headers();
+  const cookie = headersList.get('cookie') ?? '';
+
+  const { title } = await apiIUS.getConfig({ cookie, pageUrlParams });
   const text = `${title} | Эволюция`;
 
   return {
@@ -25,12 +31,24 @@ export default async function Page(pageProps: PageProps) {
     render: async () => {
       const pageUrlParams = getPageUrlParams(pageProps);
 
+      const headersList = headers();
+      const cookie = headersList.get('cookie') ?? '';
+
       return Promise.all([
-        apiIUS.getData({ pageUrlParams }),
+        apiIUS.getData({ cookie, pageUrlParams }),
-        apiIUS.getMetaData({ pageUrlParams }),
+        apiIUS.getMetaData({ cookie, pageUrlParams }),
-        apiIUS.getConfig({ pageUrlParams }),
+        apiIUS.getConfig({ cookie, pageUrlParams }),
-      ]).then(([data, metaData, { title }]) => {
+        apiIUS.getDocumentTypes({ cookie, pageUrlParams }),
-        const props = { data, metaData, pageUrlParams, title };
+        apiIUS.getDocuments({ cookie, pageUrlParams }),
+      ]).then(([data, metaData, { title }, documentTypes, documents]) => {
+        const combinedDocuments = combineDocuments({ documentTypes, documents });
+        const props: FormComponentProps = {
+          combinedDocuments,
+          data,
+          metaData,
+          pageUrlParams,
+          title,
+        };
 
         return <Form {...props} />;
       });

apps/web/app/layout.tsx

@@ -1,9 +1,9 @@
 import './globals.css';
 import { Auth, Logo } from '@/components/layout';
 import { Controls } from '@/components/layout/controls';
+import { Content, Header } from '@repo/ui';
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
-import { Content, Header } from 'ui';
 
 const inter = localFont({
   src: [
@@ -46,16 +46,17 @@ export default function RootLayout({ children }: { readonly children: React.Reac
       <head>
         <meta charSet="utf-8" />
         <meta name="theme-color" content="#000000" />
+        <link rel="manifest" href="/manifest.webmanifest" crossOrigin="use-credentials" />
       </head>
       <body className={inter.className}>
         <Header>
           <Logo />
           <Auth />
         </Header>
-        <div className="flex flex-col items-center ">
+        <Content>
           <Controls />
-          <Content>{children}</Content>
+          {children}
-        </div>
+        </Content>
       </body>
     </html>
   );

apps/web/app/manifest.ts

@@ -1,25 +0,0 @@
-import type { MetadataRoute } from 'next';
-
-export default function manifest(): MetadataRoute.Manifest {
-  return {
-    background_color: '#fff',
-    description: 'External | Эволюция',
-    display: 'standalone',
-    icons: [
-      {
-        sizes: '192x192',
-        src: '/android-chrome-192x192.png',
-        type: 'image/png',
-      },
-      {
-        sizes: '512x512',
-        src: '/android-chrome-512x512.png',
-        type: 'image/png',
-      },
-    ],
-    name: 'External | Эволюция',
-    short_name: 'External | Эволюция',
-    start_url: '/',
-    theme_color: '#fff',
-  };
-}

apps/web/app/not-found.tsx

@@ -1,4 +1,4 @@
-import { HttpError } from 'ui';
+import { HttpError } from '@repo/ui';
 
 export default function NotFound() {
   return <HttpError code="404" title="Страница не найдена" />;

apps/web/components/Conditions.tsx

@@ -1,4 +1,4 @@
-import { Background } from 'ui';
+import { Background } from '@repo/ui';
 
 type Props = {
   readonly html: string;
@@ -8,7 +8,7 @@ export function Conditions({ html }: Props) {
   return (
     <Background
       dangerouslySetInnerHTML={{ __html: html }}
-      className="lg:w-standard grid w-full justify-center p-5 font-[calibri]"
+      className="grid w-full justify-center p-5 font-[calibri]"
     />
   );
 }

apps/web/components/Form/Buttons.tsx

@@ -1,46 +0,0 @@
-import { FormContext } from './context/form-context';
-import * as apiIus from '@/api/ius/query';
-import { useFormStore } from '@/store/ius/form';
-import { useContext } from 'react';
-import { Button } from 'ui';
-
-export function Buttons() {
-  const { reset, setValidation, values } = useFormStore();
-  const { pageUrlParams, setFormStatus } = useContext(FormContext);
-
-  return (
-    <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
-      <Button
-        intent="outline-danger"
-        onClick={() => {
-          reset();
-        }}
-      >
-        Отмена
-      </Button>
-      <Button
-        intent="secondary"
-        onClick={() => {
-          setFormStatus('pending');
-        }}
-      >
-        Возврат на доработку
-      </Button>
-      <Button
-        onClick={() => {
-          apiIus.validate({ pageUrlParams, payload: values }).then((res) => {
-            if (typeof res !== 'boolean') {
-              Object.keys(res.errors).forEach((name) => {
-                const elementValidation = res?.errors?.[name];
-                if (elementValidation)
-                  setValidation({ message: elementValidation[0] ?? '', name, valid: false });
-              });
-            }
-          });
-        }}
-      >
-        Сохранить
-      </Button>
-    </div>
-  );
-}

apps/web/components/Form/Common/Buttons.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable react/jsx-curly-newline */
+/* eslint-disable no-negated-condition */
+import { FormContext } from '../context/form-context';
+import * as apiIus from '@/api/ius/query';
+import { useFormStore } from '@/store/ius/form';
+import { Button } from '@repo/ui';
+import { useCallback, useContext } from 'react';
+
+const ERROR_RETRACT = 'Произошла ошибка при возврате на доработку';
+const ERROR_SAVE = 'Произошла ошибка при сохранении';
+
+export function Buttons() {
+  const { reset, resetValidation, setValidation, status, values } = useFormStore();
+  const { pageUrlParams, setFormState } = useContext(FormContext);
+
+  const handleSave = useCallback(() => {
+    setFormState({ status: 'pending' });
+    resetValidation();
+    apiIus.save({ pageUrlParams, payload: values }).then((res) => {
+      if (typeof res !== 'boolean') {
+        const { errors } = res;
+
+        if (Array.isArray(errors)) {
+          setFormState({ status: 'error', text: errors?.at(0) || ERROR_SAVE });
+
+          return;
+        }
+
+        Object.keys(errors).forEach((name) => {
+          const elementValidation = errors?.[name];
+          if (elementValidation)
+            setValidation({ message: elementValidation[0] ?? '', name, valid: false });
+        });
+
+        setTimeout(() => {
+          setFormState({ status: 'edit' });
+        }, 300);
+      } else {
+        setFormState({ status: 'success' });
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      }
+    });
+  }, [pageUrlParams, resetValidation, setFormState, setValidation, values]);
+
+  const handleRetract = useCallback(() => {
+    setFormState({ status: 'pending' });
+    resetValidation();
+    apiIus.retract({ pageUrlParams, payload: values }).then((res) => {
+      if (typeof res !== 'boolean') {
+        const { errors } = res;
+
+        if (Array.isArray(errors)) {
+          setFormState({ status: 'error', text: errors?.at(0) || ERROR_RETRACT });
+
+          return;
+        }
+
+        setTimeout(() => {
+          setFormState({ status: 'edit' });
+        }, 300);
+        Object.keys(errors).forEach((name) => {
+          const elementValidation = errors?.[name];
+          if (elementValidation)
+            setValidation({ message: elementValidation[0] ?? '', name, valid: false });
+        });
+      } else {
+        setFormState({ status: 'success' });
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      }
+    });
+  }, [pageUrlParams, resetValidation, setFormState, setValidation, values]);
+
+  return (
+    <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
+      <Button
+        intent="outline-danger"
+        onClick={() => {
+          reset();
+        }}
+      >
+        Отмена
+      </Button>
+      <Button intent="outline-secondary" onClick={handleRetract}>
+        Возврат на доработку
+      </Button>
+      <Button onClick={handleSave} disabled={status !== 'edited'}>
+        Сохранить
+      </Button>
+    </div>
+  );
+}

apps/web/components/Form/Common/Elements.tsx

@@ -0,0 +1,79 @@
+import type { FormComponentProps } from '../types';
+import type { MetaObject } from '@/api/ius/types';
+import { mapFieldTypeElement } from '@/config/elements';
+import { useFormStore } from '@/store/ius/form';
+import { ElementContainer } from '@repo/ui';
+import { get } from 'radash';
+import { useEffect } from 'react';
+
+function RenderElement({
+  fieldType,
+  label,
+  max,
+  min = 0,
+  name,
+  visible,
+  ...props
+}: MetaObject & { readonly name: string }) {
+  const { setValue, validation, values } = useFormStore();
+
+  if (!visible) return false;
+
+  const Element = mapFieldTypeElement[fieldType];
+
+  return (
+    <ElementContainer
+      intent={validation[name] ? 'danger' : 'default'}
+      message={validation[name]?.message}
+      key={name}
+      id={name}
+      title={label}
+    >
+      <Element
+        loading={!Object.keys(values).length}
+        checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) ?? false : false}
+        id={name}
+        value={values[name] ?? ''}
+        min={min}
+        max={max}
+        onChange={(e) => {
+          setValue({
+            name,
+            value:
+              fieldType === 'CHECKBOX' ? (e.target as HTMLInputElement).checked : e.target.value,
+          });
+        }}
+        {...props}
+      />
+    </ElementContainer>
+  );
+}
+
+export function Elements({ data, metaData }: FormComponentProps) {
+  const { init } = useFormStore();
+
+  useEffect(() => {
+    init(data);
+  }, [data, init]);
+
+  const defaultElements = Object.keys(metaData).filter(
+    (x) => metaData[x]?.fieldType !== 'BIGSTRING'
+  );
+
+  const bigStringElements = Object.keys(metaData).filter(
+    (x) => metaData[x]?.fieldType === 'BIGSTRING'
+  );
+
+  return (
+    <>
+      <div className="mt-2 grid gap-2 gap-x-4 md:grid md:grid-cols-2 lg:grid-cols-3">
+        {defaultElements.map((name) => (
+          <RenderElement key={name} {...get(metaData, name)} name={name} />
+        ))}
+      </div>
+      {bigStringElements.map((name) => (
+        <RenderElement key={name} {...get(metaData, name)} name={name} fieldType="BIGSTRING" />
+      ))}
+    </>
+  );
+}

apps/web/components/Form/Common/index.ts

@@ -0,0 +1,2 @@
+export * from './Buttons';
+export * from './Elements';

apps/web/components/Form/Documents/Buttons.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react/jsx-curly-newline */
+/* eslint-disable no-negated-condition */
+import { FormContext } from '../context/form-context';
+import * as apiIus from '@/api/ius/query';
+import type { HttpError } from '@/api/ius/types';
+import { useFormStore } from '@/store/ius/form';
+import { Button } from '@repo/ui';
+import { pick } from 'radash';
+import { useCallback, useContext } from 'react';
+
+const ERROR_UPLOAD_DOCUMENT = 'Произошла ошибка при загрузке документов';
+const SUCCESS_UPLOAD_DOCUMENTS = 'Файлы успешно загружены';
+
+export function Buttons() {
+  const { resetValidation } = useFormStore();
+  const { formFiles, pageUrlParams, setFormFiles, setFormState } = useContext(FormContext);
+
+  const handleUploadFiles = useCallback(() => {
+    setFormState({ status: 'pending' });
+    resetValidation();
+    const uploadFiles = formFiles.map((formFile) => {
+      const formData = new FormData();
+      formData.append('file', formFile.file);
+      const document = pick(formFile, ['documentTypeId']);
+
+      return apiIus.uploadDocument({
+        document,
+        formData,
+        pageUrlParams,
+      });
+    });
+
+    return Promise.all(uploadFiles)
+      .then(async (res) => {
+        const errors = res.filter((x) => typeof x !== 'boolean') as HttpError[];
+
+        if (!errors.length) {
+          setFormState({
+            status: 'success',
+            text: SUCCESS_UPLOAD_DOCUMENTS,
+          });
+
+          setTimeout(() => {
+            window.location.reload();
+          }, 500);
+
+          return;
+        }
+
+        const error = errors.find((x) => x.errors.length)?.errors.at(0) || ERROR_UPLOAD_DOCUMENT;
+
+        setFormState({ status: 'error', text: error });
+      })
+      .catch((error) => {
+        setFormState({
+          status: 'error',
+          text: error ? JSON.stringify(error) : ERROR_UPLOAD_DOCUMENT,
+        });
+      });
+  }, [formFiles, pageUrlParams, resetValidation, setFormState]);
+
+  const handleCancel = () => {
+    setFormFiles([]);
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
+      <Button intent="outline-danger" onClick={handleCancel} disabled={!formFiles.length}>
+        Отмена
+      </Button>
+      <Button onClick={handleUploadFiles} disabled={!formFiles.length}>
+        Загрузить файлы
+      </Button>
+    </div>
+  );
+}

apps/web/components/Form/Documents/Files.tsx

@@ -0,0 +1,75 @@
+import { FormContext } from '../context/form-context';
+import type { FormComponentProps } from '../types';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/solid';
+import { Heading, InputFile } from '@repo/ui';
+import Link from 'next/link';
+import { useContext, useEffect, useRef } from 'react';
+
+type DownloadDocumentProps = Pick<FileProps, 'document'>;
+
+function DownloadDocument({ document }: DownloadDocumentProps) {
+  return document?.href ? (
+    <Link
+      href={'/api/ius' + document.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary-600 h-10 px-5 py-2.5 text-sm font-medium hover:underline"
+    >
+      <div className="flex flex-row items-center gap-1">
+        <ArrowDownTrayIcon className="h-4 w-4" />
+        Скачать
+      </div>
+    </Link>
+  ) : (
+    false
+  );
+}
+
+type FileProps = {
+  readonly document: FormComponentProps['combinedDocuments'][number];
+};
+
+function File({ document }: FileProps) {
+  const { formFiles, setFormFiles } = useContext(FormContext);
+
+  const { canUpload, documentTypeId, name } = document;
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files !== null) {
+      const file = event.target.files.item(0);
+      if (file)
+        setFormFiles([
+          ...formFiles.filter((x) => x.documentTypeId !== documentTypeId),
+          { documentTypeId, file, name },
+        ]);
+    }
+  };
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const uploadableFile = formFiles.some((x) => x.documentTypeId === document.documentTypeId);
+    if (!uploadableFile && inputRef.current) inputRef.current.value = '';
+  }, [document.documentTypeId, formFiles]);
+
+  return (
+    <div key={documentTypeId} className="flex flex-col gap-1">
+      <label className="mb-2 block text-sm font-normal text-gray-900">{name}:</label>
+      <InputFile ref={inputRef} onChange={handleFileChange} disabled={!canUpload} />
+      <DownloadDocument document={document} />
+    </div>
+  );
+}
+
+export function Files({ combinedDocuments }: FormComponentProps) {
+  return (
+    <div className="grid gap-4">
+      <Heading className="text-sm">Документы</Heading>
+      <div className="grid gap-2 md:grid-cols-2">
+        {combinedDocuments.map((document) => (
+          <File key={document.documentTypeId} document={document} />
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/Form/Documents/index.ts

@@ -0,0 +1,2 @@
+export * from './Buttons';
+export * from './Files';

apps/web/components/Form/Elements.tsx

@@ -1,51 +0,0 @@
-import type { Props } from './types';
-import { mapFieldTypeElement } from '@/config/elements';
-import { useFormStore } from '@/store/ius/form';
-import { useEffect } from 'react';
-import { ElementContainer } from 'ui';
-
-export function Elements({ data, metaData }: Props) {
-  const { init, setValue, validation, values } = useFormStore();
-
-  useEffect(() => {
-    init(data);
-  }, [data, init]);
-
-  return (
-    <div className="mt-2 grid auto-rows-auto grid-cols-1 gap-2 gap-x-4 md:grid-cols-2 lg:grid-cols-3">
-      {Object.keys(metaData).map((name) => {
-        const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];
-
-        if (!visible) return false;
-
-        const Element = mapFieldTypeElement[fieldType];
-
-        return (
-          <ElementContainer
-            intent={validation[name] ? 'danger' : 'default'}
-            message={validation[name]?.message}
-            key={name}
-            id={name}
-            title={label}
-          >
-            <Element
-              loading={!Object.keys(values).length}
-              checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
-              id={name}
-              value={values[name] || ''}
-              min={min}
-              max={max}
-              onChange={(e) => {
-                setValue({
-                  name,
-                  value: fieldType === 'CHECKBOX' ? e.target.checked : e.target.value,
-                });
-              }}
-              {...props}
-            />
-          </ElementContainer>
-        );
-      })}
-    </div>
-  );
-}

apps/web/components/Form/Header.tsx

@@ -1,9 +1,9 @@
+import { Heading } from '@repo/ui';
 import Link from 'next/link';
-import { Heading } from 'ui';
 
 export function Header({ link, title }: { readonly link: string; readonly title: string }) {
   return (
-    <div className="flex justify-between">
+    <div className="flex flex-col justify-between md:flex-row">
       <Heading size={2}>{title}</Heading>
       <Link href={link} className="text-primary-600 text-sm font-medium hover:underline" prefetch>
         Посмотреть условия

apps/web/components/Form/Overlay.tsx

@@ -1,33 +1,61 @@
 'use client';
 import { FormContext } from './context/form-context';
-import { CheckCircleIcon } from '@heroicons/react/24/solid';
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
+import { Background, Button, LoadingSpinner } from '@repo/ui';
 import type { PropsWithChildren } from 'react';
 import { useContext } from 'react';
-import { Background, LoadingSpinner } from 'ui';
 
 function OverlayWrapper({ children }: PropsWithChildren) {
   return (
-    <Background className="lg:w-standard absolute grid h-full w-full items-center justify-center border-none bg-opacity-80 backdrop-blur-sm">
+    <Background className="absolute left-0 top-0 grid h-full w-full place-items-center bg-opacity-80 backdrop-blur-sm">
-      <div className="flex flex-row items-center gap-2">{children} </div>
+      <div className="absolute bottom-[50vh] flex flex-col items-center gap-2 md:relative md:bottom-0">
+        {children}
+      </div>
     </Background>
   );
 }
-export function Overlay() {
-  const { formStatus } = useContext(FormContext);
 
-  if (formStatus === 'pending')
+function StateContentWrapper({ children }: PropsWithChildren) {
-    return (
+  return <div className="flex flex-row items-center gap-2">{children}</div>;
-      <OverlayWrapper>
+}
-        {LoadingSpinner} <p className="font-medium">Загрузка...</p>
+
-      </OverlayWrapper>
+export function Overlay() {
-    );
+  const { formState, setFormState } = useContext(FormContext);
-  if (formStatus === 'success')
+  const { status, text } = formState;
-    return (
+
-      <OverlayWrapper>
+  let stateContent: JSX.Element | false = false;
-        <CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />{' '}
+
-        <p className="font-medium">Данные сохранены</p>
+  if (status === 'pending') {
-      </OverlayWrapper>
+    stateContent = (
-    );
+      <StateContentWrapper>
-
+        {LoadingSpinner} <p className="font-medium">Загрузка...</p>
-  return false;
+      </StateContentWrapper>
+    );
+  }
+  if (status === 'success') {
+    stateContent = (
+      <StateContentWrapper>
+        <CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />
+        <p className="font-medium">Данные сохранены</p>
+      </StateContentWrapper>
+    );
+  }
+
+  if (status === 'error') {
+    stateContent = (
+      <>
+        <StateContentWrapper>
+          <XCircleIcon className="h-10 w-10 fill-red-500" title="Error" />
+          <p className="font-medium">{text}</p>
+        </StateContentWrapper>{' '}
+        <Button type="button" intent="text" onClick={() => setFormState({ status: 'edit' })}>
+          Закрыть
+        </Button>
+      </>
+    );
+  }
+
+  if (!stateContent) return false;
+
+  return <OverlayWrapper>{stateContent}</OverlayWrapper>;
 }

apps/web/components/Form/context/form-context.tsx

@@ -1,13 +1,19 @@
+import type { DocumentType } from '@/api/ius/types';
 import type { PageUrlParams } from '@/utils/url';
 import type { PropsWithChildren } from 'react';
 import { createContext, useMemo, useState } from 'react';
 
-type FormStatus = 'pending' | 'edit' | 'success';
+type FormStatus = 'pending' | 'edit' | 'success' | 'error';
+type FormState = { status: FormStatus; text?: string };
+
+type FormFile = DocumentType & { file: File };
 
 type ContextType = {
-  readonly formStatus: FormStatus;
+  readonly formFiles: FormFile[];
+  readonly formState: FormState;
   readonly pageUrlParams: PageUrlParams;
-  readonly setFormStatus: (status: FormStatus) => void;
+  readonly setFormFiles: (files: FormFile[]) => void;
+  readonly setFormState: (formState: FormState) => void;
 };
 
 export const FormContext = createContext<ContextType>({} as ContextType);
@@ -16,10 +22,11 @@ export function FormContextProvider({
   children,
   ...initialData
 }: PropsWithChildren & Pick<ContextType, 'pageUrlParams'>) {
-  const [formStatus, setFormStatus] = useState<FormStatus>('edit');
+  const [formState, setFormState] = useState<FormState>({ status: 'edit' });
+  const [formFiles, setFormFiles] = useState<FormFile[]>([]);
   const value = useMemo(
-    () => ({ ...initialData, formStatus, setFormStatus }),
+    () => ({ ...initialData, formFiles, formState, setFormFiles, setFormState }),
-    [formStatus, initialData]
+    [formFiles, formState, initialData]
   );
 
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;

apps/web/components/Form/index.tsx

@@ -1,31 +1,34 @@
 'use client';
-import { Buttons } from './Buttons';
+import * as Common from './Common';
 import { FormContext, FormContextProvider } from './context/form-context';
-import { Elements } from './Elements';
+import * as Documents from './Documents';
 import { Header } from './Header';
 import { Overlay } from './Overlay';
-import type { Props } from './types';
+import type { FormComponentProps } from './types';
 import { createUrl } from '@/utils/url';
+import { Background, Divider } from '@repo/ui';
 import type { FC } from 'react';
 import { useContext } from 'react';
-import { Background, Divider } from 'ui';
 
-function Content(props: Props) {
+function Content(props: FormComponentProps) {
   const { title } = props;
   const { pageUrlParams } = useContext(FormContext);
 
   return (
-    <Background className="lg:w-standard relative grid w-full gap-2 p-5">
+    <Background className="relative flex w-full flex-col gap-2 p-5">
       <Overlay />
       <Header title={title} link={'/ius' + createUrl({ ...pageUrlParams, route: '/conditions' })} />
-      <Elements {...props} />
+      <Common.Elements {...props} />
+      <Common.Buttons />
+      <Divider />
+      <Documents.Files {...props} />
+      <Documents.Buttons />
       <Divider />
-      <Buttons />
     </Background>
   );
 }
 
-function withContext<T extends Props>(Component: FC<T>) {
+function withContext<T extends FormComponentProps>(Component: FC<T>) {
   return (props: T) => {
     const { pageUrlParams } = props;
 

apps/web/components/Form/types.ts

@@ -1,9 +1,11 @@
-import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
+import type { CombinedDocuments } from '@/api/ius/tools';
+import type * as IUS from '@/api/ius/types';
 import type { PageUrlParams } from '@/utils/url';
 
-export type Props = {
+export type FormComponentProps = {
-  readonly data: ResponseGetData;
+  readonly combinedDocuments: CombinedDocuments;
-  readonly metaData: ResponseMetaData;
+  readonly data: IUS.ResponseGetData;
+  readonly metaData: IUS.ResponseMetaData;
   readonly pageUrlParams: PageUrlParams;
   readonly title: string;
 };

apps/web/components/layout/controls.tsx

@@ -6,7 +6,7 @@ export function Controls() {
   const router = useRouter();
 
   return (
-    <div className="lg:w-standard flex w-full flex-row px-5 pt-5">
+    <div className="flex w-full flex-row px-5 pt-5">
       <button
         className="flex flex-row items-center gap-2 text-sm"
         type="button"

apps/web/components/layout/logo.tsx

@@ -1,10 +1,12 @@
-import { getEnv } from '@/config/env';
+import { getClientEnv } from '@/config/env';
 import Image from 'next/image';
 import logo from 'public/assets/images/logo-primary.svg';
 import logoDev from 'public/assets/images/logo-primary-dev.svg';
 
-const env = getEnv();
+const env = getClientEnv();
 
 export function Logo() {
-  return <Image priority alt="logo" src={env.USE_DEV_COLORS ? logoDev : logo} height="24" />;
+  return (
+    <Image priority alt="logo" src={env.NEXT_PUBLIC_USE_DEV_COLORS ? logoDev : logo} height="24" />
+  );
 }

apps/web/config/elements.ts

@@ -1,11 +1,12 @@
 import type { MetaObject } from '@/api/ius/types';
-import { Checkbox, Input, InputNumber } from 'ui';
+import { Checkbox, Input, InputNumber, Textarea } from '@repo/ui';
 
 function wrapMap<C, T extends Record<MetaObject['fieldType'], C>>(arg: T) {
   return arg;
 }
 
 export const mapFieldTypeElement = wrapMap({
+  BIGSTRING: Textarea,
   CHECKBOX: Checkbox,
   DECIMAL: InputNumber,
   INT: InputNumber,

apps/web/config/env.js

@@ -1,5 +1,6 @@
-const envSchema = require('./schema/env.js');
+const { clientEnvSchema, serverEnvSchema } = require('./schema/env');
 
-const getEnv = () => envSchema.parse(process.env);
+const getClientEnv = () => clientEnvSchema.parse(process.env);
+const getServerEnv = () => serverEnvSchema.parse(process.env);
 
-module.exports = { getEnv };
+module.exports = { getClientEnv, getServerEnv };

apps/web/config/schema/env.js

@@ -2,7 +2,15 @@ const { z } = require('zod');
 
 const envSchema = z.object({
   URL_IUS_DIRECT: z.string(),
-  USE_DEV_COLORS: z.string().optional(),
+  NEXT_PUBLIC_USE_DEV_COLORS: z.string().optional(),
 });
 
-module.exports = envSchema;
+const serverEnvSchema = envSchema.pick({
+  URL_IUS_DIRECT: true,
+});
+
+const clientEnvSchema = envSchema.pick({
+  NEXT_PUBLIC_USE_DEV_COLORS: true,
+});
+
+module.exports = { envSchema, serverEnvSchema, clientEnvSchema };

apps/web/config/urls.ts

@@ -1,9 +1,18 @@
-import { getEnv } from './env';
+import { getServerEnv } from './env';
-
+import proxyUrls from '@/constants/urls';
-const { URL_IUS_DIRECT } = getEnv();
+import { isServer } from '@/utils/common';
 
 export function getUrls() {
+  if (isServer()) {
+    const env = getServerEnv();
+    const { URL_IUS_DIRECT } = env;
+
+    return {
+      URL_IUS: URL_IUS_DIRECT,
+    };
+  }
+
   return {
-    URL_UIS: URL_IUS_DIRECT,
+    URL_IUS: proxyUrls.URL_IUS_PROXY,
   };
 }

apps/web/constants/colors.ts

@@ -1,4 +1,4 @@
-import { getEnv } from '../config/env';
+import { getClientEnv } from '../config/env';
 
 export const COLORS_PROD = {
   COLOR_DANGER: '#B20004',
@@ -12,5 +12,5 @@ export const COLORS_DEV = {
   COLOR_SECONDARY: '#c54a84',
   COLOR_TERTIARTY: '#FF9112',
 };
-const env = getEnv();
+const env = getClientEnv();
-export const COLORS = env.USE_DEV_COLORS ? COLORS_DEV : COLORS_PROD;
+export const COLORS = env.NEXT_PUBLIC_USE_DEV_COLORS ? COLORS_DEV : COLORS_PROD;

apps/web/constants/urls.js

@@ -0,0 +1,3 @@
+module.exports = {
+  URL_IUS_PROXY: '/api/ius',
+};

apps/web/next.config.js

@@ -1,11 +1,12 @@
 const fs = require('fs');
 const path = require('path');
-const envSchema = require('./config/schema/env');
+const { envSchema } = require('./config/schema/env');
+const urls = require('./constants/urls');
 
 const env = envSchema.parse(process.env);
 
 const favicons = fs.readdirSync('./public/favicon/prod');
-const faviconSubPath = env.USE_DEV_COLORS ? '/favicon/dev' : '/favicon/prod';
+const faviconSubPath = env.NEXT_PUBLIC_USE_DEV_COLORS ? '/favicon/dev' : '/favicon/prod';
 function buildFaviconRewrite(source) {
   return {
     destination: String.prototype.concat(faviconSubPath, source),
@@ -23,10 +24,17 @@ const nextConfig = {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
   reactStrictMode: true,
-  transpilePackages: ['ui'],
+  transpilePackages: ['@repo/ui', 'radash'],
   async rewrites() {
-    return [...favicons.map((fileName) => buildFaviconRewrite(`/${fileName}`))];
+    return [
+      {
+        destination: env.URL_IUS_DIRECT + '/:path*',
+        source: urls.URL_IUS_PROXY + '/:path*',
+      },
+      ...favicons.map((fileName) => buildFaviconRewrite(`/${fileName}`)),
+    ];
   },
+  env,
 };
 
 module.exports = nextConfig;

apps/web/package.json

@@ -10,20 +10,21 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "next": "^14.0.1",
+    "@repo/tsconfig": "workspace:*",
+    "@repo/ui": "workspace:*",
+    "next": "^14.1.0",
+    "radash": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsconfig": "*",
-    "ui": "*",
     "wretch": "^2.7.0",
     "zod": "^3.22.4",
-    "zustand": "^4.4.6"
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.6",
-    "@types/node": "^20.9.0",
+    "@types/node": "^20.10.0",
-    "@types/react": "^18.2.37",
+    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^18.2.17",
     "@vchikalkin/eslint-config-awesome": "^1.1.5",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.53.0",

apps/web/public/manifest.webmanifest

@@ -0,0 +1,21 @@
+{
+  "background_color": "#fff",
+  "description": "External | Эволюция",
+  "display": "standalone",
+  "icons": [
+    {
+      "sizes": "192x192",
+      "src": "/android-chrome-192x192.png",
+      "type": "image/png"
+    },
+    {
+      "sizes": "512x512",
+      "src": "/android-chrome-512x512.png",
+      "type": "image/png"
+    }
+  ],
+  "name": "External | Эволюция",
+  "short_name": "External | Эволюция",
+  "start_url": "/",
+  "theme_color": "#fff"
+}

apps/web/store/ius/form.ts

@@ -12,8 +12,10 @@ type FormState = {
   defaultValues: Values;
   init: (values: Values) => void;
   reset: () => void;
+  resetValidation: () => void;
   setValidation: (input: { name: string } & ElementValidation) => void;
   setValue: ({ name, value }: { name: string; value: Values[number] }) => void;
+  status?: 'init' | 'edited';
   validation: Record<string, ElementValidation | undefined>;
   values: Values;
 };
@@ -23,24 +25,29 @@ export const useFormStore = create<FormState>((set) => ({
   init: (values) =>
     set(() => ({
       defaultValues: values,
+      status: 'init',
       values,
     })),
-  reset: () => {
+  reset: () =>
     set((state) => ({
+      status: 'init',
       validation: {},
       values: state.defaultValues,
-    }));
+    })),
-  },
+  resetValidation: () =>
-  setValidation: ({ message, name, valid }) => {
+    set(() => ({
+      validation: {},
+    })),
+  setValidation: ({ message, name, valid }) =>
     set((state) => ({
       validation: {
         ...state.validation,
         [name]: { message, valid },
       },
-    }));
+    })),
-  },
   setValue: ({ name, value }) =>
     set((state) => ({
+      status: 'edited',
       validation: {
         ...state.validation,
         [name]: undefined,

apps/web/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "tsconfig/nextjs.json",
+  "extends": "@repo/tsconfig/nextjs.json",
   "compilerOptions": {
     "plugins": [{ "name": "next" }],
     "paths": {

apps/web/types/page.ts

@@ -1,4 +1,4 @@
 export type PageProps = {
   params: { slug: string };
-  searchParams: string | string[][] | Record<string, string>;
+  searchParams: Record<string, string>;
 };

apps/web/utils/error.tsx

@@ -1,5 +1,5 @@
 import type * as t from '@/api/ius/types';
-import { HttpError } from 'ui';
+import { HttpError } from '@repo/ui';
 import type { WretchError } from 'wretch/types';
 
 type Props = {

apps/web/utils/url.ts

@@ -1,7 +1,7 @@
 import type { PageProps } from '@/types/page';
 
 export function getPageUrlParams({ params, searchParams }: PageProps) {
-  return { path: `/${params.slug}`, urlSearchParams: new URLSearchParams(searchParams) };
+  return { path: `/${params.slug}`, urlSearchParams: searchParams };
 }
 
 export type PageUrlParams = ReturnType<typeof getPageUrlParams>;

docker-compose.yml

@@ -0,0 +1,20 @@
+version: '3.3'
+services:
+  external_client:
+    environment:
+      - URL_IUS_DIRECT=${URL_IUS_DIRECT}
+      - NEXT_PUBLIC_USE_DEV_COLORS=${NEXT_PUBLIC_USE_DEV_COLORS}
+    build:
+      args:
+        - URL_IUS_DIRECT=${URL_IUS_DIRECT}
+        - NEXT_PUBLIC_USE_DEV_COLORS=${NEXT_PUBLIC_USE_DEV_COLORS}
+      context: .
+      dockerfile: ./apps/web/Dockerfile
+    networks:
+      - external_network
+    restart: always
+
+networks:
+  external_network:
+    external:
+      name: external_network

package.json

@@ -7,7 +7,7 @@
     "lint:fix": "dotenv -e .env.local turbo run lint:fix",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "prepare": "husky install",
-    "precommit": "yarn format && yarn lint:fix",
+    "precommit": "pnpm format && pnpm lint:fix",
     "clean": "turbo run clean"
   },
   "devDependencies": {
@@ -17,15 +17,14 @@
     "lint-staged": "^15.0.2",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
-    "tsconfig": "*",
+    "@repo/tsconfig": "workspace:*",
     "turbo": "latest"
   },
   "name": "Evo.External.App",
-  "packageManager": "yarn@1.22.19",
+  "packageManager": "pnpm@8.9.0",
-  "workspaces": [
+  "engines": {
-    "apps/*",
+    "node": ">=18"
-    "packages/*"
+  },
-  ],
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --ignore-pattern **/graphql/* --ext js,jsx,ts,tsx --quiet --fix --"

packages/tsconfig/base.json

@@ -2,20 +2,19 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
   "compilerOptions": {
-    "composite": false,
     "declaration": true,
     "declarationMap": true,
     "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+    "incremental": false,
-    "inlineSources": false,
     "isolatedModules": true,
-    "moduleResolution": "node",
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
-    "noUnusedLocals": false,
+    "module": "NodeNext",
-    "noUnusedParameters": false,
+    "moduleDetection": "force",
-    "preserveWatchOutput": true,
+    "moduleResolution": "NodeNext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "strictNullChecks": true
+    "target": "ES2022"
-  },
+  }
-  "exclude": ["node_modules"]
 }

packages/tsconfig/nextjs.json

@@ -4,18 +4,10 @@
   "extends": "./base.json",
   "compilerOptions": {
     "plugins": [{ "name": "next" }],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "allowJs": true,
-    "declaration": false,
-    "declarationMap": false,
-    "incremental": true,
     "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "noEmit": true
-    "module": "esnext",
+  }
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "strict": false,
-    "target": "es5"
-  },
-  "include": ["src", "next-env.d.ts"],
-  "exclude": ["node_modules"]
 }

packages/tsconfig/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tsconfig",
+  "name": "@repo/tsconfig",
   "version": "0.0.0",
   "private": true,
   "license": "MIT",

packages/tsconfig/react-library.json

@@ -3,9 +3,6 @@
   "display": "React Library",
   "extends": "./base.json",
   "compilerOptions": {
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
-    "lib": ["ES2015", "DOM"],
-    "module": "ESNext",
-    "target": "es6"
   }
 }

packages/ui/button.tsx

@@ -5,7 +5,7 @@ import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
 const variants = cva(
-  'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
+  'rounded-sm h-10 px-5 py-2.5 text-sm font-semibold text-white transition-all ease-in-out',
   {
     defaultVariants: {
       intent: 'default',
@@ -13,14 +13,16 @@ const variants = cva(
     variants: {
       intent: {
         danger: 'bg-danger hover:bg-danger-700',
-        default: 'bg-primary hover:bg-primary-700',
+        default: 'bg-primary hover:bg-primary-600',
         'outline-danger':
           'bg-transparent text-danger border border-danger hover:bg-danger hover:text-white',
         'outline-default':
           'bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
         'outline-secondary':
-          'opacity-70 bg-transparent text-secondary border border-secondary hover:bg-secondary hover:text-white',
+          'border border-primary text-primary-500 hover:bg-primary-500 hover:text-white',
-        secondary: 'bg-secondary hover:bg-secondary-700',
+        secondary:
+          'bg-primary-50 text-primary-500 border border-transparent hover:bg-primary-100 hover:text-primary-600',
+        text: 'bg-none text-primary-500 hover:bg-primary-50',
       },
     },
   }

packages/ui/container.tsx

@@ -5,7 +5,7 @@ import { forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react';
 
 export type ContainerProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren;
 
-const variants = cva('flex h-9 items-center', {
+const variants = cva('flex min-h-[36px] items-center', {
   defaultVariants: {
     intent: 'default',
   },

packages/ui/content.tsx

@@ -1,5 +1,9 @@
 import type { PropsWithChildren } from 'react';
 
 export function Content({ children }: PropsWithChildren) {
-  return <div className="flex w-full justify-center gap-2 py-5">{children}</div>;
+  return (
+    <div className="grid w-full place-items-center">
+      <div className="xl:w-standard grid w-screen gap-5">{children}</div>
+    </div>
+  );
 }

packages/ui/heading.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 
 const variants = cva('font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight', {
   defaultVariants: {
-    size: 'default',
+    size: 1,
   },
   variants: {
     size: {
@@ -19,7 +19,6 @@ const variants = cva('font-bold leading-7 text-gray-900 sm:truncate sm:tracking-
       7: 'text-6xl sm:text-7xl',
       8: 'text-7xl sm:text-8xl',
       9: 'text-8xl sm:text-9xl',
-      default: 'text-lg',
     },
   },
 });

packages/ui/index.tsx

@@ -12,3 +12,4 @@ export * from './http-error';
 export * from './icons';
 export * from './input';
 export * from './select';
+export * from './textarea';

packages/ui/input.tsx

@@ -21,3 +21,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 export const InputNumber = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
   <Input ref={ref} type="number" {...props} />
 ));
+
+export const InputFile = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
+  <input
+    {...props}
+    ref={ref}
+    type="file"
+    className="file:bg-primary-50 file:text-primary-500 hover:file:bg-primary-100 block w-full text-sm
+        text-slate-500 file:mr-4 file:rounded-sm file:border-0
+        file:px-4 file:py-2 file:text-sm file:font-semibold
+        hover:file:cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 disabled:file:cursor-not-allowed"
+  />
+));

packages/ui/package.json

@@ -1,8 +1,6 @@
 {
-  "name": "ui",
+  "name": "@repo/ui",
   "version": "0.0.0",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
   "license": "MIT",
   "scripts": {
     "lint": "eslint .",
@@ -10,15 +8,15 @@
   },
   "devDependencies": {
     "@turbo/gen": "^1.10.16",
-    "@types/node": "^20.8.10",
+    "@types/node": "^20.10.0",
-    "@types/react": "^18.2.34",
+    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.14",
+    "@types/react-dom": "^18.2.17",
     "@vchikalkin/eslint-config-awesome": "^1.1.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "tailwind-merge": "^2.0.0",
-    "tsconfig": "*",
+    "@repo/tsconfig": "workspace:*",
     "typescript": "^5.2.2"
   }
 }

packages/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+
+const variants = cva(
+  'focus:ring-0 min-h-[36px] resize-y h-auto hover:border-primary-500 focus:border-primary-500 w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 p-2 px-3 text-sm text-gray-900 outline-none transition-colors ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
+);
+
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  VariantProps<typeof variants> & { readonly loading?: boolean };
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ className, loading, ...props }, ref) => {
+    if (loading) return <div className="h-[98px] w-full animate-pulse rounded bg-gray-100" />;
+
+    return <textarea rows={4} ref={ref} className={cn(variants({ className }))} {...props} />;
+  }
+);

packages/ui/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "tsconfig/react-library.json",
+  "extends": "@repo/tsconfig/react-library.json",
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"]
 }

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"

tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "tsconfig/base.json"
+  "extends": "@repo/tsconfig/base.json"
 }