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

@@ -7,42 +7,46 @@ import wretch from 'wretch';
 const urls = getUrls();
 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);
@@ -55,7 +59,7 @@ export async function save({ pageUrlParams, payload }: Input) {
     .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) {
@@ -65,28 +69,30 @@ export async function retract({ pageUrlParams, payload }: Input) {
     .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 getDocumentTypes({ pageUrlParams }: Input) {
+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 }: Input) {
+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 async function uploadDocument({
+export function uploadDocument({
   pageUrlParams,
   document,
   formData,
@@ -100,5 +106,15 @@ export async function uploadDocument({
   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' | 'TEXTAREA';
+  fieldType: 'CHECKBOX' | 'DECIMAL' | 'INT' | 'STRING' | 'BIGSTRING';
   label: string;
   max: number;
   min: number;
@@ -16,11 +16,9 @@ export type DocumentType = {
   name: string;
 };
 
-export type Document = {
+export type Document = DocumentType & {
-  documentId: string;
+  documentId?: string;
-  documentTypeId: string;
+  href?: string;
-  href: string;
-  name: string;
 };
 
 export type ResponseGetData = Record<string, Value>;

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,14 +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 }),
-        apiIUS.getDocumentTypes({ pageUrlParams }),
+        apiIUS.getDocumentTypes({ cookie, pageUrlParams }),
-        apiIUS.getDocuments({ pageUrlParams }),
+        apiIUS.getDocuments({ cookie, pageUrlParams }),
       ]).then(([data, metaData, { title }, documentTypes, documents]) => {
-        const props = { data, documentTypes, documents, metaData, pageUrlParams, title };
+        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,6 +46,7 @@ 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>

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;

apps/web/components/Form/Buttons.tsx

@@ -1,99 +0,0 @@
-/* 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 { useRouter } from 'next/navigation';
-import { pick } from 'radash';
-import { useCallback } from 'react';
-import { useContext } from 'react';
-import { Button } from 'ui';
-
-const ERROR_UPLOAD_DOCUMENT = 'Произошла ошибка при загрузке документов';
-
-export function Buttons() {
-  const { reset, resetValidation, setValidation, values } = useFormStore();
-  const { formFiles, pageUrlParams, setFormState } = useContext(FormContext);
-
-  const router = useRouter();
-
-  const handleSave = useCallback(() => {
-    apiIus.save({ pageUrlParams, payload: values }).then((res) => {
-      if (typeof res !== 'boolean') {
-        setTimeout(() => {
-          setFormState({ status: 'edit' });
-        }, 300);
-        Object.keys(res.errors).forEach((name) => {
-          const elementValidation = res?.errors?.[name];
-          if (elementValidation)
-            setValidation({ message: elementValidation[0] ?? '', name, valid: false });
-        });
-      } else {
-        setFormState({ status: 'success' });
-        setTimeout(() => {
-          router.refresh();
-        }, 500);
-      }
-    });
-  }, [pageUrlParams, router, setFormState, setValidation, values]);
-
-  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.allSettled(uploadFiles).catch(() => {
-      setFormState({ status: 'error', text: ERROR_UPLOAD_DOCUMENT });
-      throw new Error(ERROR_UPLOAD_DOCUMENT);
-    });
-  }, [formFiles, pageUrlParams, resetValidation, setFormState]);
-
-  const handleRetract = useCallback(() => {
-    setFormState({ status: 'pending' });
-    resetValidation();
-    apiIus.retract({ pageUrlParams, payload: values }).then((res) => {
-      if (typeof res !== 'boolean') {
-        setTimeout(() => {
-          setFormState({ status: 'edit' });
-        }, 300);
-        Object.keys(res.errors).forEach((name) => {
-          const elementValidation = res?.errors?.[name];
-          if (elementValidation)
-            setValidation({ message: elementValidation[0] ?? '', name, valid: false });
-        });
-      } else {
-        setFormState({ status: 'success' });
-        setTimeout(() => {
-          router.refresh();
-        }, 500);
-      }
-    });
-  }, [pageUrlParams, resetValidation, router, 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={() => handleUploadFiles().then(() => handleSave())}>Сохранить</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

@@ -1,19 +1,10 @@
-import type { Props } from './types';
+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';
-import { ElementContainer } from 'ui';
-
-function compatMetadata(metaData: Props['metaData']) {
-  const { comment, ...meta } = metaData;
-  if (comment) {
-    comment.fieldType = 'TEXTAREA';
-
-    return { ...meta, comment };
-  }
-
-  return metaData;
-}
 
 function RenderElement({
   fieldType,
@@ -23,7 +14,7 @@ function RenderElement({
   name,
   visible,
   ...props
-}: Props['metaData'][number] & { readonly name: string }) {
+}: MetaObject & { readonly name: string }) {
   const { setValue, validation, values } = useFormStore();
 
   if (!visible) return false;
@@ -40,15 +31,16 @@ function RenderElement({
     >
       <Element
         loading={!Object.keys(values).length}
-        checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
+        checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) ?? false : false}
         id={name}
-        value={values[name] || ''}
+        value={values[name] ?? ''}
         min={min}
         max={max}
         onChange={(e) => {
           setValue({
             name,
-            value: fieldType === 'CHECKBOX' ? e.target.checked : e.target.value,
+            value:
+              fieldType === 'CHECKBOX' ? (e.target as HTMLInputElement).checked : e.target.value,
           });
         }}
         {...props}
@@ -57,23 +49,31 @@ function RenderElement({
   );
 }
 
-export function Elements({ data, metaData }: Props) {
+export function Elements({ data, metaData }: FormComponentProps) {
   const { init } = useFormStore();
 
   useEffect(() => {
     init(data);
   }, [data, init]);
 
-  const { comment, ...meta } = compatMetadata(metaData);
+  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">
-        {Object.keys(meta).map((name) => (
+        {defaultElements.map((name) => (
-          <RenderElement key={name} {...metaData[name]} name={name} />
+          <RenderElement key={name} {...get(metaData, name)} name={name} />
         ))}
       </div>
-      <RenderElement {...comment} name="comment" />
+      {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/Files.tsx

@@ -1,71 +0,0 @@
-import { FormContext } from './context/form-context';
-import type { Props } from './types';
-import type * as IUS from '@/api/ius/types';
-import { ArrowDownTrayIcon } from '@heroicons/react/24/solid';
-import Link from 'next/link';
-import { useContext } from 'react';
-import { Heading, InputFile } from 'ui';
-
-type DownloadDocumentProps = Pick<FileProps, 'document'>;
-
-function DownloadDocument({ document }: DownloadDocumentProps) {
-  return document ? (
-    <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: IUS.Document | undefined;
-  readonly documentType: IUS.DocumentType;
-};
-
-function File({ document, documentType }: FileProps) {
-  const { documentTypeId, name } = documentType;
-  const { formFiles, setFormFiles } = useContext(FormContext);
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files) {
-      setFormFiles([
-        ...formFiles.filter((x) => x.documentTypeId !== documentTypeId),
-        { documentTypeId, file: event.target.files[0], name },
-      ]);
-    }
-  };
-
-  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 onChange={handleFileChange} />
-      <DownloadDocument document={document} />
-    </div>
-  );
-}
-
-export function Files({ documentTypes, documents }: Props) {
-  return (
-    <div className="grid gap-4">
-      <Heading className="text-sms">Документы</Heading>
-      <div className="flex flex-col gap-2">
-        {documentTypes.map((documentType) => (
-          <File
-            key={documentType.documentTypeId}
-            documentType={documentType}
-            document={documents.find((x) => x.documentTypeId === documentType.documentTypeId)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

apps/web/components/Form/Header.tsx

@@ -1,5 +1,5 @@
+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 (

apps/web/components/Form/Overlay.tsx

@@ -1,44 +1,61 @@
 'use client';
 import { FormContext } from './context/form-context';
 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="absolute left-0 top-0 grid h-full w-full place-items-center bg-opacity-80 backdrop-blur-sm">
-      <div className="absolute bottom-[50vh] flex flex-row items-center gap-2 md:relative md:bottom-0">
+      <div className="absolute bottom-[50vh] flex flex-col items-center gap-2 md:relative md:bottom-0">
         {children}
       </div>
     </Background>
   );
 }
+
+function StateContentWrapper({ children }: PropsWithChildren) {
+  return <div className="flex flex-row items-center gap-2">{children}</div>;
+}
+
 export function Overlay() {
-  const { formState } = useContext(FormContext);
+  const { formState, setFormState } = useContext(FormContext);
   const { status, text } = formState;
 
-  if (status === 'pending')
+  let stateContent: JSX.Element | false = false;
-    return (
+
-      <OverlayWrapper>
+  if (status === 'pending') {
+    stateContent = (
+      <StateContentWrapper>
         {LoadingSpinner} <p className="font-medium">Загрузка...</p>
-      </OverlayWrapper>
+      </StateContentWrapper>
     );
-  if (status === 'success')
+  }
-    return (
+  if (status === 'success') {
-      <OverlayWrapper>
+    stateContent = (
-        <CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />{' '}
+      <StateContentWrapper>
+        <CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />
         <p className="font-medium">Данные сохранены</p>
-      </OverlayWrapper>
+      </StateContentWrapper>
-    );
-  if (status === 'error') {
-    return (
-      <OverlayWrapper>
-        <XCircleIcon className="h-10 w-10 fill-red-500" title="Error" />{' '}
-        <p className="font-medium">{text}</p>
-      </OverlayWrapper>
     );
   }
 
-  return false;
+  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/index.tsx

@@ -1,17 +1,16 @@
 '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 { Files } from './Files';
 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);
 
@@ -19,16 +18,17 @@ function Content(props: Props) {
     <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 />
-      <Files {...props} />
+      <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,10 +1,10 @@
+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 combinedDocuments: CombinedDocuments;
   readonly data: IUS.ResponseGetData;
-  readonly documentTypes: IUS.ResponseDocumentTypes;
-  readonly documents: IUS.ResponseDocuments;
   readonly metaData: IUS.ResponseMetaData;
   readonly pageUrlParams: PageUrlParams;
   readonly title: string;

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,14 +1,14 @@
 import type { MetaObject } from '@/api/ius/types';
-import { Checkbox, Input, InputNumber, Textarea } 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,
   STRING: Input,
-  TEXTAREA: Textarea,
 });

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,10 +1,10 @@
-import { getEnv } from './env';
+import { getServerEnv } from './env';
 import proxyUrls from '@/constants/urls';
 import { isServer } from '@/utils/common';
 
 export function getUrls() {
   if (isServer()) {
-    const env = getEnv();
+    const env = getServerEnv();
     const { URL_IUS_DIRECT } = env;
 
     return {

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/next.config.js

@@ -1,12 +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),
@@ -24,7 +24,7 @@ const nextConfig = {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
   reactStrictMode: true,
-  transpilePackages: ['ui', 'radash'],
+  transpilePackages: ['@repo/ui', 'radash'],
   async rewrites() {
     return [
       {
@@ -34,6 +34,7 @@ const nextConfig = {
       ...favicons.map((fileName) => buildFaviconRewrite(`/${fileName}`)),
     ];
   },
+  env,
 };
 
 module.exports = nextConfig;

apps/web/package.json

@@ -10,21 +10,21 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "next": "^14.0.3",
+    "@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

@@ -15,6 +15,7 @@ type FormState = {
   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;
 };
@@ -24,10 +25,12 @@ export const useFormStore = create<FormState>((set) => ({
   init: (values) =>
     set(() => ({
       defaultValues: values,
+      status: 'init',
       values,
     })),
   reset: () =>
     set((state) => ({
+      status: 'init',
       validation: {},
       values: state.defaultValues,
     })),
@@ -44,6 +47,7 @@ export const useFormStore = create<FormState>((set) => ({
     })),
   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/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 = {

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

@@ -22,6 +22,7 @@ const variants = cva(
           'border border-primary text-primary-500 hover:bg-primary-500 hover:text-white',
         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/input.tsx

@@ -29,7 +29,7 @@ export const InputFile = forwardRef<HTMLInputElement, InputProps>((props, 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:px-4 file:py-2 file:text-sm file:font-semibold
-        file:font-semibold hover:file:cursor-pointer"
+        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/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"
 }