From fd5c7243421df57877482c12cf29df88f8f7604f Mon Sep 17 00:00:00 2001 From: it-is-not-alright Date: Mon, 21 Oct 2024 01:02:12 +0400 Subject: [PATCH] [front]: form --- front/package-lock.json | 6 +- front/public/images/svg/delete.svg | 12 ++++ front/public/images/svg/plus.svg | 7 +++ front/src/api/floris/index.ts | 0 front/src/components/app/index.tsx | 3 +- .../components/pages/form-page/component.tsx | 12 ---- front/src/components/pages/form-page/index.ts | 1 - .../pages/form-page/styles.module.scss | 11 ---- .../components/pages/home-page/component.tsx | 18 +----- .../pages/home-page/styles.module.scss | 15 ++--- front/src/components/pages/index.tsx | 1 - front/src/components/ui/calendar/types.ts | 2 +- .../src/components/ui/checkbox/component.tsx | 13 +--- .../components/ui/checkbox/styles.module.scss | 36 +++++------ .../components/ui/date-input/component.tsx | 6 +- front/src/components/ui/date-input/types.ts | 2 +- .../components/ui/input/styles.module.scss | 1 + front/src/components/ux/header/component.tsx | 5 -- front/src/components/ux/index.tsx | 3 +- .../components/ux/login-form/component.tsx | 57 ------------------ .../src/components/ux/login-form/constants.ts | 14 ----- front/src/components/ux/login-form/index.tsx | 1 - front/src/components/ux/login-form/types.ts | 12 ---- .../components/ux/windmill-form/component.tsx | 50 ++++++++++++++++ .../components/ux/windmill-form/constants.ts | 5 ++ .../src/components/ux/windmill-form/index.tsx | 2 + .../styles.module.scss | 13 ++-- .../src/components/ux/windmill-form/types.ts | 13 ++++ .../ux/windmill-table/component.tsx | 60 +++++++++++++++++++ .../components/ux/windmill-table/index.tsx | 1 + .../ux/windmill-table/styles.module.scss | 26 ++++++++ .../src/components/ux/windmill-table/types.ts | 6 ++ server/requirements.txt | 2 +- 33 files changed, 229 insertions(+), 187 deletions(-) create mode 100644 front/public/images/svg/delete.svg create mode 100644 front/public/images/svg/plus.svg create mode 100644 front/src/api/floris/index.ts delete mode 100644 front/src/components/pages/form-page/component.tsx delete mode 100644 front/src/components/pages/form-page/index.ts delete mode 100644 front/src/components/pages/form-page/styles.module.scss delete mode 100644 front/src/components/ux/login-form/component.tsx delete mode 100644 front/src/components/ux/login-form/constants.ts delete mode 100644 front/src/components/ux/login-form/index.tsx delete mode 100644 front/src/components/ux/login-form/types.ts create mode 100644 front/src/components/ux/windmill-form/component.tsx create mode 100644 front/src/components/ux/windmill-form/constants.ts create mode 100644 front/src/components/ux/windmill-form/index.tsx rename front/src/components/ux/{login-form => windmill-form}/styles.module.scss (68%) create mode 100644 front/src/components/ux/windmill-form/types.ts create mode 100644 front/src/components/ux/windmill-table/component.tsx create mode 100644 front/src/components/ux/windmill-table/index.tsx create mode 100644 front/src/components/ux/windmill-table/styles.module.scss create mode 100644 front/src/components/ux/windmill-table/types.ts diff --git a/front/package-lock.json b/front/package-lock.json index a0bcd0d..e3e3155 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -2811,7 +2811,7 @@ "version": "15.7.13", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", - "dev": true + "devOptional": true }, "node_modules/@types/qs": { "version": "6.9.16", @@ -2829,7 +2829,7 @@ "version": "18.3.8", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz", "integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -4262,7 +4262,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "devOptional": true }, "node_modules/debug": { "version": "4.3.7", diff --git a/front/public/images/svg/delete.svg b/front/public/images/svg/delete.svg new file mode 100644 index 0000000..6cb625a --- /dev/null +++ b/front/public/images/svg/delete.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/front/public/images/svg/plus.svg b/front/public/images/svg/plus.svg new file mode 100644 index 0000000..9940452 --- /dev/null +++ b/front/public/images/svg/plus.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/front/src/api/floris/index.ts b/front/src/api/floris/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/front/src/components/app/index.tsx b/front/src/components/app/index.tsx index 75b826d..fec961b 100644 --- a/front/src/components/app/index.tsx +++ b/front/src/components/app/index.tsx @@ -2,7 +2,7 @@ import './styles.scss'; import '@public/fonts/styles.css'; import { MainLayout } from '@components/layouts'; -import { FormPage, HomePage } from '@components/pages'; +import { HomePage } from '@components/pages'; import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; @@ -12,7 +12,6 @@ function App() { }> } /> - } /> diff --git a/front/src/components/pages/form-page/component.tsx b/front/src/components/pages/form-page/component.tsx deleted file mode 100644 index 78af987..0000000 --- a/front/src/components/pages/form-page/component.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { LoginForm } from '@components/ux'; -import React from 'react'; - -import styles from './styles.module.scss'; - -export function FormPage() { - return ( -
- -
- ); -} diff --git a/front/src/components/pages/form-page/index.ts b/front/src/components/pages/form-page/index.ts deleted file mode 100644 index e136094..0000000 --- a/front/src/components/pages/form-page/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { FormPage } from './component'; diff --git a/front/src/components/pages/form-page/styles.module.scss b/front/src/components/pages/form-page/styles.module.scss deleted file mode 100644 index 00762eb..0000000 --- a/front/src/components/pages/form-page/styles.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.about { - display: grid; - padding: 20px; - grid-template: - '. form .' auto - / auto minmax(0, 380px) auto; -} - -.form { - grid-area: form; -} diff --git a/front/src/components/pages/home-page/component.tsx b/front/src/components/pages/home-page/component.tsx index a301768..351f970 100644 --- a/front/src/components/pages/home-page/component.tsx +++ b/front/src/components/pages/home-page/component.tsx @@ -1,10 +1,4 @@ -import { ButtonPreview } from '@components/ui/button'; -import { CheckboxGroupPreview } from '@components/ui/checkbox-group'; -import { DateInputPreview } from '@components/ui/date-input'; -import { PasswordInputPreview } from '@components/ui/password-input'; -import { RadioGroupPreview } from '@components/ui/radio-group'; -import { SelectPreview } from '@components/ui/select'; -import { TextInputPreview } from '@components/ui/text-input'; +import { WindmillForm } from '@components/ux'; import React from 'react'; import styles from './styles.module.scss'; @@ -12,14 +6,8 @@ import styles from './styles.module.scss'; export function HomePage() { return (
-
- - - - - - - +
+
); diff --git a/front/src/components/pages/home-page/styles.module.scss b/front/src/components/pages/home-page/styles.module.scss index 5a8812c..00762eb 100644 --- a/front/src/components/pages/home-page/styles.module.scss +++ b/front/src/components/pages/home-page/styles.module.scss @@ -1,14 +1,11 @@ -.home { +.about { display: grid; + padding: 20px; grid-template: - '. content .' auto - / auto minmax(0, 1000px) auto; + '. form .' auto + / auto minmax(0, 380px) auto; } -.content { - display: flex; - flex-direction: column; - padding: 20px 20px 60px 20px; - gap: 30px; - grid-area: content; +.form { + grid-area: form; } diff --git a/front/src/components/pages/index.tsx b/front/src/components/pages/index.tsx index 449826b..1ae4201 100644 --- a/front/src/components/pages/index.tsx +++ b/front/src/components/pages/index.tsx @@ -1,2 +1 @@ -export { FormPage } from './form-page'; export { HomePage } from './home-page'; diff --git a/front/src/components/ui/calendar/types.ts b/front/src/components/ui/calendar/types.ts index ea2b469..107f219 100644 --- a/front/src/components/ui/calendar/types.ts +++ b/front/src/components/ui/calendar/types.ts @@ -1,6 +1,6 @@ export type CalendarProps = { value?: string; - onChange: (value: string) => void; + onChange?: (value: string) => void; min: Date | null; max: Date | null; } & Omit, 'onChange'>; diff --git a/front/src/components/ui/checkbox/component.tsx b/front/src/components/ui/checkbox/component.tsx index 68b4a1f..fc287ed 100644 --- a/front/src/components/ui/checkbox/component.tsx +++ b/front/src/components/ui/checkbox/component.tsx @@ -9,18 +9,10 @@ import styles from './styles.module.scss'; import { CheckboxProps } from './types'; function CheckboxInner( - { - scale = 'm', - label = {}, - required, - checked, - ...props - }: Omit, + { scale = 'm', label = {}, required, ...props }: Omit, ref: ForwardedRef, ) { - const wrapperClassName = clsx(styles.wrapper, styles[scale], { - [styles.checked]: checked, - }); + const wrapperClassName = clsx(styles.wrapper, styles[scale]); const labelProps: LabelProps = { position: 'right', @@ -37,7 +29,6 @@ function CheckboxInner( type="checkbox" ref={ref} required={required} - checked={checked} {...props} />
diff --git a/front/src/components/ui/checkbox/styles.module.scss b/front/src/components/ui/checkbox/styles.module.scss index c04a5f5..560f3c8 100644 --- a/front/src/components/ui/checkbox/styles.module.scss +++ b/front/src/components/ui/checkbox/styles.module.scss @@ -19,6 +19,24 @@ height: 100%; margin: 0; opacity: 0; + + &:checked { + & ~ .checkbox { + border-width: 0; + background-color: var(--clr-primary); + + .icon { + width: 100%; + fill: white; + } + } + + &:hover { + & ~ .checkbox { + background-color: var(--clr-primary-hover); + } + } + } } .checkbox { @@ -36,24 +54,6 @@ transition: all var(--td-100) ease-in-out; } -.checked { - .checkbox { - border-width: 0; - background-color: var(--clr-primary); - } - - &:hover { - .checkbox { - background-color: var(--clr-primary-hover); - } - } - - .icon { - width: 100%; - fill: white; - } -} - .s { padding: 3px; diff --git a/front/src/components/ui/date-input/component.tsx b/front/src/components/ui/date-input/component.tsx index eb2f9ad..5eaf3c6 100644 --- a/front/src/components/ui/date-input/component.tsx +++ b/front/src/components/ui/date-input/component.tsx @@ -58,16 +58,16 @@ export function DateInput({ (!minDate || date >= minDate) && (!maxDate || date <= maxDate) ) { - onChange(newValue); + onChange?.(newValue); } else { - onChange(''); + onChange?.(''); } } setDirtyDate(newDirtyDate); }; const handleCalendarChange = (newValue: string) => { - onChange(newValue); + onChange?.(newValue); setCalendarVisible(false); }; diff --git a/front/src/components/ui/date-input/types.ts b/front/src/components/ui/date-input/types.ts index 1db9b22..53b1e9a 100644 --- a/front/src/components/ui/date-input/types.ts +++ b/front/src/components/ui/date-input/types.ts @@ -2,7 +2,7 @@ import { TextInputProps } from '../text-input'; export type DateInputProps = { value?: string; - onChange: (value: string) => void; + onChange?: (value: string) => void; max?: string; min?: string; } & Omit; diff --git a/front/src/components/ui/input/styles.module.scss b/front/src/components/ui/input/styles.module.scss index 9d67d3c..c4d2fc2 100644 --- a/front/src/components/ui/input/styles.module.scss +++ b/front/src/components/ui/input/styles.module.scss @@ -13,6 +13,7 @@ } .wrapperFocus { + z-index: 1; border-color: var(--clr-primary); background-color: var(--clr-layer-200); outline-width: 3px; diff --git a/front/src/components/ux/header/component.tsx b/front/src/components/ux/header/component.tsx index 10ee181..5380148 100644 --- a/front/src/components/ux/header/component.tsx +++ b/front/src/components/ux/header/component.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Link } from 'react-router-dom'; import { ThemeSelect } from '../theme-select'; import styles from './styles.module.scss'; @@ -8,10 +7,6 @@ export function Header() { return (
-
- Home - Form -
); } diff --git a/front/src/components/ux/index.tsx b/front/src/components/ux/index.tsx index 5038b1d..7b1bb7a 100644 --- a/front/src/components/ux/index.tsx +++ b/front/src/components/ux/index.tsx @@ -1,3 +1,4 @@ export { Header } from './header'; -export { LoginForm } from './login-form'; export { ThemeSelect } from './theme-select'; +export { WindmillForm } from './windmill-form'; +export { WindmillTable } from './windmill-table'; diff --git a/front/src/components/ux/login-form/component.tsx b/front/src/components/ux/login-form/component.tsx deleted file mode 100644 index 555c74a..0000000 --- a/front/src/components/ux/login-form/component.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { - Button, - Paragraph, - PasswordInput, - Select, - TextInput, -} from '@components/ui'; -import { Controller, useForm } from '@utils/form'; -import clsx from 'clsx'; -import React, { useState } from 'react'; - -import { fruits, initialValues } from './constants'; -import styles from './styles.module.scss'; -import { LoginFormProps, LoginFormStore } from './types'; - -export function LoginForm({ className, ...props }: LoginFormProps) { - const [result, setResult] = useState(''); - const { register, control, getValues, reset } = useForm({ - initialValues, - }); - const classNames = clsx(className, styles.form); - - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault(); - setResult(JSON.stringify(getValues(), null, 4)); - }; - - const handleResetButtonClick = () => { - reset({ email: 'haha' }); - }; - - return ( -
- - - ( -