diff --git a/.vscode/settings.json b/.vscode/settings.json index 8766ac6..9a37c8c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -18,9 +18,7 @@ "source.removeUnusedImports": true }, "workbench.editor.labelFormat": "short", - "eslint.workingDirectories": [ - { "directory": "apps/web", "changeProcessCWD": true } - ], + "eslint.workingDirectories": [{ "directory": "apps/web", "changeProcessCWD": true }], "eslint.validate": [ "javascript", "javascriptreact", @@ -29,5 +27,9 @@ "typescriptreact", "yaml" ], - "eslint.lintTask.enable": true + "eslint.lintTask.enable": true, + "tailwindCSS.experimental.classRegex": [ + ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], + ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] + ] } diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index fd81e88..73df465 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -3,25 +3,18 @@ @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + --color-background: #f9fafb; + /* --color-background: #f3f4f6; */ } -@media (prefers-color-scheme: dark) { +/* @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } -} +} */ body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + background-color: var(--color-background); } diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index ca3293c..cd884e0 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,6 +1,8 @@ import './globals.css'; +import { Auth, Logo } from '@/components/layout'; import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; +import { Header } from 'ui'; const inter = Inter({ subsets: ['latin'] }); @@ -11,8 +13,14 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { readonly children: React.ReactNode }) { return ( - - {children} + + +
+ + +
+ {children} + ); } diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 3cfaf2f..d78fd73 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,113 +1,213 @@ -/* eslint-disable react/jsx-newline */ -/* eslint-disable react/forbid-component-props */ -import Image from 'next/image'; +/* eslint-disable unicorn/no-unused-properties */ +import { Background, Button, Content, Input } from 'ui'; -export default function Home() { +const mockMeta = { + accountName: { + disable: true, + fieldType: 'STRING', + label: 'Контраген', + required: false, + visible: true, + }, + ageDrivers: { + disable: true, + fieldType: 'STRING', + label: 'Ограничение лиц, допущенных к управлению', + required: false, + visible: true, + }, + comment: { + disable: true, + fieldType: 'STRING', + label: 'Комментарий', + required: false, + visible: true, + }, + dgoPrice: { + disable: true, + fieldType: 'DECIMAL', + label: 'ДГО', + required: false, + visible: true, + }, + enginePower: { + disable: true, + fieldType: 'DECIMAL', + label: 'л.с', + required: false, + visible: true, + }, + evokaskoPrice: { + disable: true, + fieldType: 'DECIMAL', + label: 'Evo_КАСКО', + required: false, + visible: true, + }, + expDrivers: { + disable: true, + fieldType: 'INT', + label: 'Наименьший стаж водителей', + required: false, + visible: true, + }, + franchise: { + disable: true, + fieldType: 'DECIMAL', + label: 'Франшиза', + required: false, + visible: true, + }, + inn: { + disable: true, + fieldType: 'STRING', + label: 'ИНН', + required: false, + visible: true, + }, + inspectionRequired: { + disable: true, + fieldType: 'CHECKBOX', + label: 'Требуется осмотр', + required: false, + visible: true, + }, + insurancePrice: { + disable: true, + fieldType: 'DECIMAL', + label: 'ФинGAP', + required: false, + visible: true, + }, + kaskoPrice: { + disable: false, + fieldType: 'DECIMAL', + label: 'КАСКО/СМР', + required: false, + visible: true, + }, + kpp: { + disable: true, + fieldType: 'STRING', + label: 'КПП', + required: false, + visible: true, + }, + leasingobjectCategory: { + disable: true, + fieldType: 'STRING', + label: 'Ктегория ТС', + required: false, + visible: true, + }, + leasingobjectYear: { + disable: true, + fieldType: 'INT', + label: 'Год выпуска', + required: false, + visible: true, + }, + newPolicy: { + disable: true, + fieldType: 'CHECKBOX', + label: 'Требуется оформление нового полиса', + required: false, + visible: true, + }, + nsPrice: { + disable: true, + fieldType: 'DECIMAL', + label: 'НС', + required: false, + visible: true, + }, + nsibPrice: { + disable: true, + fieldType: 'DECIMAL', + label: 'НСиБ', + required: false, + visible: true, + }, + osagoPrice: { + disable: true, + fieldType: 'DECIMAL', + label: 'ОСАГО', + required: false, + visible: true, + }, + passportBrandModel: { + disable: true, + fieldType: 'STRING', + label: 'ТС', + required: false, + visible: true, + }, + polisNumber: { + disable: true, + fieldType: 'STRING', + label: 'Полис', + required: false, + visible: true, + }, + risk: { + disable: true, + fieldType: 'STRING', + label: 'Риски', + required: false, + visible: true, + }, + territoryPrice: { + disable: true, + fieldType: 'DECIMAL', + label: 'Расширение', + required: false, + visible: true, + }, + vin: { + disable: true, + fieldType: 'STRING', + label: 'VIN/Заводской номер машины', + required: false, + visible: true, + }, +}; + +const mockData = { + accountName: 'ООО "КУПЕР"', + ageDrivers: 'Без ограничений', + enginePower: 149, + expDrivers: 0, + franchise: 0, + leasingobjectCategory: '100000001', + leasingobjectYear: 2021, + passportBrandModel: '3008A1', + polisNumber: '0002810-0000103/23ТЮЛ', + risk: 'КАСКО, ДГО, НС', + vin: 'XZV3008A1M0000016', +}; + +export default function Page() { return ( -
-
-

- Get started by editing  - app/page.tsx -

-
- - By{' '} - Vercel Logo + +
+ {Object.keys(mockData).map((name) => ( + - + ))}
-
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

Explore the Next.js 13 playground.

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
+
+ + + +
+ + ); } diff --git a/apps/web/components/layout/auth.tsx b/apps/web/components/layout/auth.tsx new file mode 100644 index 0000000..ba00bb5 --- /dev/null +++ b/apps/web/components/layout/auth.tsx @@ -0,0 +1,9 @@ +export function Auth() { + return ( +
+ + Выход + +
+ ); +} diff --git a/apps/web/components/layout/index.ts b/apps/web/components/layout/index.ts new file mode 100644 index 0000000..2569579 --- /dev/null +++ b/apps/web/components/layout/index.ts @@ -0,0 +1,2 @@ +export * from './auth'; +export * from './logo'; diff --git a/apps/web/components/layout/logo.tsx b/apps/web/components/layout/logo.tsx new file mode 100644 index 0000000..f329ced --- /dev/null +++ b/apps/web/components/layout/logo.tsx @@ -0,0 +1,6 @@ +import Image from 'next/image'; +import logo from 'public/assets/images/logo-primary.svg'; + +export function Logo() { + return logo; +} diff --git a/apps/web/constants/colors.ts b/apps/web/constants/colors.ts new file mode 100644 index 0000000..eafd83e --- /dev/null +++ b/apps/web/constants/colors.ts @@ -0,0 +1,11 @@ +export const COLORS_PROD = { + COLOR_DANGER: '#D10000', + COLOR_PRIMARY: '#1C01A9', + COLOR_SECONDARY: '#3A0185', + COLOR_TERTIARTY: '#580161', +}; +export const COLORS_DEV = { + COLOR_PRIMARY: '#BF3676', + COLOR_SECONDARY: '#FD4047', + COLOR_TERTIARTY: '#FF9112', +}; diff --git a/apps/web/package.json b/apps/web/package.json index f8be6f2..fd4574a 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -12,7 +12,9 @@ "next": "^14", "react": "^18", "react-dom": "^18", - "tsconfig": "*" + "tailwind-tints": "^1.1.0", + "tsconfig": "*", + "ui": "*" }, "devDependencies": { "@types/node": "^20", diff --git a/apps/web/public/assets/images/logo-primary.svg b/apps/web/public/assets/images/logo-primary.svg new file mode 100644 index 0000000..12a7540 --- /dev/null +++ b/apps/web/public/assets/images/logo-primary.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/web/public/next.svg b/apps/web/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/apps/web/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/web/public/vercel.svg b/apps/web/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/apps/web/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts index c7ead80..9e96cae 100644 --- a/apps/web/tailwind.config.ts +++ b/apps/web/tailwind.config.ts @@ -1,20 +1,30 @@ -import type { Config } from 'tailwindcss' +import { COLORS_PROD } from './constants/colors'; +import tailwindTints from 'tailwind-tints'; +import type { Config } from 'tailwindcss'; + +const tints = tailwindTints({ + primary: COLORS_PROD.COLOR_PRIMARY, + secondary: COLORS_PROD.COLOR_SECONDARY, + tertiarty: COLORS_PROD.COLOR_TERTIARTY, + danger: COLORS_PROD.COLOR_DANGER, +}); const config: Config = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', + '../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, + // extend: { + // colors: { + // primary: COLORS_PROD.COLOR_PRIMARY, + // secondary: COLORS_PROD.COLOR_SECONDARY, + // tertiarty: COLORS_PROD.COLOR_TERTIARTY, + // }, + // }, }, - plugins: [], -} -export default config + plugins: [tints], +}; +export default config; diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js index 8b2a762..6537119 100644 --- a/packages/ui/.eslintrc.js +++ b/packages/ui/.eslintrc.js @@ -5,4 +5,9 @@ module.exports = createConfig('react-typescript', { project: './tsconfig.json', tsconfigRootDir: __dirname, }, + rules: { + 'react/forbid-component-props': 'off', + 'import/no-duplicates': 'off', + }, + ignorePatterns: ['*.config.js', '.eslintrc.js'], }); diff --git a/packages/ui/background.tsx b/packages/ui/background.tsx new file mode 100644 index 0000000..8360d07 --- /dev/null +++ b/packages/ui/background.tsx @@ -0,0 +1,5 @@ +import type { PropsWithChildren } from 'react'; + +export function Background({ children }: PropsWithChildren) { + return
{children}
; +} diff --git a/packages/ui/button.tsx b/packages/ui/button.tsx new file mode 100644 index 0000000..4632515 --- /dev/null +++ b/packages/ui/button.tsx @@ -0,0 +1,25 @@ +import { cn } from './utils'; +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; +import type { ButtonHTMLAttributes } from 'react'; +import { forwardRef } from 'react'; + +const variants = cva('rounded-sm px-5 py-2.5 text-sm font-medium text-white', { + defaultVariants: { + color: 'default', + }, + variants: { + color: { + danger: 'bg-danger hover:bg-danger-700', + default: 'bg-primary hover:bg-primary-700', + }, + }, +}); + +export type ButtonProps = ButtonHTMLAttributes & VariantProps; + +export const Button = forwardRef( + ({ className, color, ...props }, ref) => ( +