migrate to pnpm

.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": "onHover"
 }

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 dotenv-cli
-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,15 @@ 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
-RUN yarn dotenv -e .env turbo run build --filter=web...
+RUN pnpm dotenv -e .env turbo run build --filter=web...
 
 FROM node:alpine AS runner
 WORKDIR /app

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: [

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

@@ -3,11 +3,11 @@
 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 { useRouter } from 'next/navigation';
 import { pick } from 'radash';
 import { useCallback } from 'react';
 import { useContext } from 'react';
-import { Button } from 'ui';
 
 const ERROR_UPLOAD_DOCUMENT = 'Произошла ошибка при загрузке документов';
 

apps/web/components/Form/Elements.tsx

@@ -1,19 +1,10 @@
 import type { Props } 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, omit } 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;
@@ -48,7 +39,8 @@ function RenderElement({
         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}
@@ -64,16 +56,14 @@ export function Elements({ data, metaData }: Props) {
     init(data);
   }, [data, init]);
 
-  const { comment, ...meta } = compatMetadata(metaData);
-
   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) => (
+        {(Object.keys(omit(metaData, ['comment'])) as Array<keyof MetaObject>).map((name) => (
-          <RenderElement key={name} {...metaData[name]} name={name} />
+          <RenderElement key={name} {...get(metaData, name)} name={name} />
         ))}
       </div>
-      <RenderElement {...comment} name="comment" />
+      <RenderElement {...get(metaData, 'comment')} fieldType="TEXTAREA" name="comment" />
     </>
   );
 }

apps/web/components/Form/Files.tsx

@@ -2,9 +2,9 @@ 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 { Heading, InputFile } from '@repo/ui';
 import Link from 'next/link';
 import { useContext } from 'react';
-import { Heading, InputFile } from 'ui';
 
 type DownloadDocumentProps = Pick<FileProps, 'document'>;
 
@@ -36,11 +36,13 @@ function File({ document, documentType }: FileProps) {
   const { formFiles, setFormFiles } = useContext(FormContext);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files) {
+    if (event.target.files !== null) {
-      setFormFiles([
+      const file = event.target.files.item(0);
-        ...formFiles.filter((x) => x.documentTypeId !== documentTypeId),
+      if (file)
-        { documentTypeId, file: event.target.files[0], name },
+        setFormFiles([
-      ]);
+          ...formFiles.filter((x) => x.documentTypeId !== documentTypeId),
+          { documentTypeId, file, name },
+        ]);
     }
   };
 

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,9 +1,9 @@
 'use client';
 import { FormContext } from './context/form-context';
 import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
+import { Background, LoadingSpinner } from '@repo/ui';
 import type { PropsWithChildren } from 'react';
 import { useContext } from 'react';
-import { Background, LoadingSpinner } from 'ui';
 
 function OverlayWrapper({ children }: PropsWithChildren) {
   return (

apps/web/components/Form/index.tsx

@@ -7,9 +7,9 @@ import { Header } from './Header';
 import { Overlay } from './Overlay';
 import type { Props } 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) {
   const { title } = props;

apps/web/config/elements.ts

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

apps/web/next.config.js

@@ -24,7 +24,7 @@ const nextConfig = {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
   reactStrictMode: true,
-  transpilePackages: ['ui', 'radash'],
+  transpilePackages: ['@repo/ui', 'radash'],
   async rewrites() {
     return [
       {

apps/web/package.json

@@ -10,21 +10,21 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
+    "@repo/tsconfig": "workspace:*",
     "next": "^14.0.3",
     "radash": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsconfig": "*",
+    "@repo/ui": "workspace:*",
-    "ui": "*",
     "wretch": "^2.7.0",
     "zod": "^3.22.4",
     "zustand": "^4.4.6"
   },
   "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/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,12 @@
+version: '3.3'
+services:
+  external_client:
+    ports:
+      - '3000:3000'
+    environment:
+      - URL_IUS_DIRECT=${URL_IUS_DIRECT}
+      - USE_DEV_COLORS=${USE_DEV_COLORS}
+    build:
+      context: .
+      dockerfile: ./apps/web/Dockerfile
+    restart: always

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/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"
 }