evo/Evo.External.App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: evo:main
Branches Tags
evo:main
evo:dev
evo:experimental/migrate-to-pnpm
evo:experimental/server-actions
..
compare: evo:experimental/server-actions
Branches Tags
evo:dev
evo:main
evo:experimental/migrate-to-pnpm
evo:experimental/server-actions

No commits in common. "main" and "experimental/server-actions" have entirely different histories.
main ... experiment

63 changed files with 6276 additions and 8475 deletions
Show Stats Expand all files Collapse all files

3
.env Normal file
View File

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

13
.gitignore vendored
View File

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

3
.vscode/settings.json vendored
View File

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

6
README.md
View File

@ -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
- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
- `@repo/tsconfig`: `tsconfig.json`s used throughout the monorepo
- `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`)
- `tsconfig`: `tsconfig.json`s used throughout the monorepo
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

17
apps/web/Dockerfile
View File

@ -1,19 +1,16 @@
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 pnpm add -g turbo
RUN yarn global add 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
@ -21,16 +18,14 @@ 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/pnpm-lock.yaml ./pnpm-lock.yaml
COPY --from=builder /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
RUN pnpm install
COPY --from=builder /app/out/yarn.lock ./yarn.lock
RUN yarn install
# Build the project
COPY --from=builder /app/out/full/ .
COPY turbo.json turbo.json
ARG URL_IUS_DIRECT
ARG NEXT_PUBLIC_USE_DEV_COLORS
RUN pnpm turbo run build --filter=web...
COPY .env .env
RUN yarn dotenv -e .env turbo run build --filter=web...
FROM node:alpine AS runner
WORKDIR /app

80
apps/web/api/ius/query.ts
View File

@ -1,3 +1,4 @@
'use server';
import type * as t from './types';
import { getUrls } from '@/config/urls';
import { createUrl, type PageUrlParams } from '@/utils/url';
@ -5,116 +6,55 @@ import type { WretchError } from 'wretch';
import wretch from 'wretch';
const urls = getUrls();
const api = wretch(urls.URL_IUS).options({ cache: 'no-store' }).errorType('json');
const api = wretch(urls.URL_UIS).errorType('json');
type Input = { cookie?: string; pageUrlParams: PageUrlParams; payload?: unknown };
type Input = { pageUrlParams: PageUrlParams; payload?: unknown };
export async function getData({ pageUrlParams, cookie = '' }: Input) {
export async function getData({ pageUrlParams }: 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, cookie = '' }: Input) {
export async function getMetaData({ pageUrlParams }: 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, cookie = '' }: Input) {
export async function getConfig({ pageUrlParams }: 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, cookie = '' }: Input) {
export async function getConditions({ pageUrlParams }: 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 save({ pageUrlParams, payload }: Input) {
const url = createUrl({ ...pageUrlParams, route: '/transfer' });
export async function validate({ pageUrlParams, payload }: Input) {
const url = createUrl({ ...pageUrlParams, route: '/validate' });
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 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;
});
.catch((error: WretchError) => error.json as t.HttpValidationError);
}

34
apps/web/api/ius/tools.ts
View File

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

14
apps/web/api/ius/types.ts
View File

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
export type MetaObject = {
disabled: boolean;
fieldType: 'CHECKBOX' | 'DECIMAL' | 'INT' | 'STRING' | 'BIGSTRING';
fieldType: 'CHECKBOX' | 'DECIMAL' | 'INT' | 'STRING';
label: string;
max: number;
min: number;
@ -11,22 +11,10 @@ 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[];

21
apps/web/app/globals.css
View File

@ -18,24 +18,3 @@
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);
}

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

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

30
apps/web/app/ius/[slug]/page.tsx
View File

@ -1,19 +1,13 @@
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 headersList = headers();
const cookie = headersList.get('cookie') ?? '';
const { title } = await apiIUS.getConfig({ cookie, pageUrlParams });
const { title } = await apiIUS.getConfig({ pageUrlParams });
const text = `${title} | Эволюция`;
return {
@ -31,24 +25,12 @@ 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({ cookie, pageUrlParams }),
apiIUS.getMetaData({ cookie, pageUrlParams }),
apiIUS.getConfig({ cookie, pageUrlParams }),
apiIUS.getDocumentTypes({ cookie, pageUrlParams }),
apiIUS.getDocuments({ cookie, pageUrlParams }),
]).then(([data, metaData, { title }, documentTypes, documents]) => {
const combinedDocuments = combineDocuments({ documentTypes, documents });
const props: FormComponentProps = {
combinedDocuments,
data,
metaData,
pageUrlParams,
title,
};
apiIUS.getData({ pageUrlParams }),
apiIUS.getMetaData({ pageUrlParams }),
apiIUS.getConfig({ pageUrlParams }),
]).then(([data, metaData, { title }]) => {
const props = { data, metaData, pageUrlParams, title };
return <Form {...props} />;
});

9
apps/web/app/layout.tsx
View File

@ -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,17 +46,16 @@ 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>
<Content>
<div className="flex flex-col items-center ">
<Controls />
{children}
</Content>
<Content>{children}</Content>
</div>
</body>
</html>
);

25
apps/web/app/manifest.ts Normal file
View File

@ -0,0 +1,25 @@
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',
};
}

2
apps/web/app/not-found.tsx
View File

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

4
apps/web/components/Conditions.tsx
View File

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

46
apps/web/components/Form/Buttons.tsx Normal file
View File

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

95
apps/web/components/Form/Common/Buttons.tsx
View File

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

79
apps/web/components/Form/Common/Elements.tsx
View File

@ -1,79 +0,0 @@
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" />
))}
</>
);
}

2
apps/web/components/Form/Common/index.ts
View File

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

76
apps/web/components/Form/Documents/Buttons.tsx
View File

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

75
apps/web/components/Form/Documents/Files.tsx
View File

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

2
apps/web/components/Form/Documents/index.ts
View File

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

51
apps/web/components/Form/Elements.tsx Normal file
View File

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

4
apps/web/components/Form/Header.tsx
View File

@ -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 flex-col justify-between md:flex-row">
<div className="flex justify-between">
<Heading size={2}>{title}</Heading>
<Link href={link} className="text-primary-600 text-sm font-medium hover:underline" prefetch>
Посмотреть условия

58
apps/web/components/Form/Overlay.tsx
View File

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

19
apps/web/components/Form/context/form-context.tsx
View File

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

21
apps/web/components/Form/index.tsx
View File

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

10
apps/web/components/Form/types.ts
View File

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

2
apps/web/components/layout/controls.tsx
View File

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

8
apps/web/components/layout/logo.tsx
View File

@ -1,12 +1,10 @@
import { getClientEnv } from '@/config/env';
import { getEnv } 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 = getClientEnv();
const env = getEnv();
export function Logo() {
return (
<Image priority alt="logo" src={env.NEXT_PUBLIC_USE_DEV_COLORS ? logoDev : logo} height="24" />
);
return <Image priority alt="logo" src={env.USE_DEV_COLORS ? logoDev : logo} height="24" />;
}

3
apps/web/config/elements.ts
View File

@ -1,12 +1,11 @@
import type { MetaObject } from '@/api/ius/types';
import { Checkbox, Input, InputNumber, Textarea } from '@repo/ui';
import { Checkbox, Input, InputNumber } from '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,

7
apps/web/config/env.js
View File

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

12
apps/web/config/schema/env.js
View File

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

17
apps/web/config/urls.ts
View File

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

6
apps/web/constants/colors.ts
View File

@ -1,4 +1,4 @@
import { getClientEnv } from '../config/env';
import { getEnv } 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 = getClientEnv();
export const COLORS = env.NEXT_PUBLIC_USE_DEV_COLORS ? COLORS_DEV : COLORS_PROD;
const env = getEnv();
export const COLORS = env.USE_DEV_COLORS ? COLORS_DEV : COLORS_PROD;

3
apps/web/constants/urls.js
View File

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

16
apps/web/next.config.js
View File

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

15
apps/web/package.json
View File

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

21
apps/web/public/manifest.webmanifest
View File

@ -1,21 +0,0 @@
{
"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"
}

19
apps/web/store/ius/form.ts
View File

@ -12,10 +12,8 @@ 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;
};
@ -25,29 +23,24 @@ 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: () =>
set(() => ({
validation: {},
})),
setValidation: ({ message, name, valid }) =>
}));
},
setValidation: ({ message, name, valid }) => {
set((state) => ({
validation: {
...state.validation,
[name]: { message, valid },
},
})),
}));
},
setValue: ({ name, value }) =>
set((state) => ({
status: 'edited',
validation: {
...state.validation,
[name]: undefined,

2
apps/web/tsconfig.json
View File

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

2
apps/web/types/page.ts
View File

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

2
apps/web/utils/error.tsx
View File

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

2
apps/web/utils/url.ts
View File

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

20
docker-compose.yml
View File

@ -1,20 +0,0 @@
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

13
package.json
View File

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

19
packages/tsconfig/base.json
View File

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

16
packages/tsconfig/nextjs.json
View File

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

2
packages/tsconfig/package.json
View File

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

5
packages/tsconfig/react-library.json
View File

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

10
packages/ui/button.tsx
View File

@ -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-semibold text-white transition-all ease-in-out',
'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
{
defaultVariants: {
intent: 'default',
@ -13,16 +13,14 @@ const variants = cva(
variants: {
intent: {
danger: 'bg-danger hover:bg-danger-700',
default: 'bg-primary hover:bg-primary-600',
default: 'bg-primary hover:bg-primary-700',
'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':
'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',
'opacity-70 bg-transparent text-secondary border border-secondary hover:bg-secondary hover:text-white',
secondary: 'bg-secondary hover:bg-secondary-700',
},
},
}

2
packages/ui/container.tsx
View File

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

6
packages/ui/content.tsx
View File

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

3
packages/ui/heading.tsx
View File

@ -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: 1,
size: 'default',
},
variants: {
size: {
@ -19,6 +19,7 @@ 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',
},
},
});

1
packages/ui/index.tsx
View File

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

12
packages/ui/input.tsx
View File

@ -21,15 +21,3 @@ 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"
/>
));

12
packages/ui/package.json
View File

@ -1,6 +1,8 @@
{
"name": "@repo/ui",
"name": "ui",
"version": "0.0.0",
"main": "./index.tsx",
"types": "./index.tsx",
"license": "MIT",
"scripts": {
"lint": "eslint .",
@ -8,15 +10,15 @@
},
"devDependencies": {
"@turbo/gen": "^1.10.16",
"@types/node": "^20.10.0",
"@types/react": "^18.2.39",
"@types/react-dom": "^18.2.17",
"@types/node": "^20.8.10",
"@types/react": "^18.2.34",
"@types/react-dom": "^18.2.14",
"@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",
"@repo/tsconfig": "workspace:*",
"tsconfig": "*",
"typescript": "^5.2.2"
}
}

19
packages/ui/textarea.tsx
View File

@ -1,19 +0,0 @@
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} />;
}
);

2
packages/ui/tsconfig.json
View File

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

7671
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

3
pnpm-workspace.yaml
View File

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

2
tsconfig.json
View File

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

5986
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff