From f0803ca6ec6210689d4983b7bdc6da8677d89004 Mon Sep 17 00:00:00 2001 From: Pijus Kamandulis Date: Sun, 20 Oct 2024 13:40:33 +0300 Subject: [PATCH] Code cleanup --- .gitignore | 5 ++ src/components/Card.tsx | 11 +++-- src/components/CopyInput.tsx | 17 ++----- src/components/Drawer.tsx | 36 ++++++++++---- src/components/GridList.tsx | 2 +- src/components/Header.tsx | 2 +- src/components/Input.tsx | 14 +++--- src/components/index.ts | 16 ++++-- src/index.css | 4 ++ src/lib/context/estimation.tsx | 27 +++++----- src/lib/parsers/ticketUpload.ts | 4 +- src/lib/types/index.ts | 1 + src/main.tsx | 16 ++---- src/pages/Estimation/Estimation.tsx | 3 +- .../Estimation/components/EditTicketForm.tsx | 3 +- .../components/EstimationResult.tsx | 5 +- .../Estimation/components/PlayerList.tsx | 6 +-- .../Estimation/components/TaskSidebar.tsx | 4 +- .../components/TicketImportForm.tsx | 37 ++++++++------ src/pages/Estimation/components/VoteList.tsx | 24 +++++---- .../Estimation/components/VoteSelection.tsx | 11 +++-- src/pages/Home.tsx | 49 ------------------- src/pages/Home/Home.tsx | 35 +++++++++++++ .../CreateEstimationSessionForm.tsx | 5 +- .../Home/components/EstimationSessionCard.tsx | 30 ++++++++++++ src/pages/Join.tsx | 31 +++++------- src/pages/Login.tsx | 25 +++++----- src/pages/Profile.tsx | 17 ++++--- src/pages/index.ts | 7 +++ tsconfig.app.json | 8 ++- vite.config.ts | 20 ++++++-- 31 files changed, 269 insertions(+), 206 deletions(-) delete mode 100644 src/pages/Home.tsx create mode 100644 src/pages/Home/Home.tsx rename src/{components/forms => pages/Home/components}/CreateEstimationSessionForm.tsx (93%) create mode 100644 src/pages/Home/components/EstimationSessionCard.tsx create mode 100644 src/pages/index.ts diff --git a/.gitignore b/.gitignore index a547bf3..4560b81 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,8 @@ node_modules dist dist-ssr *.local +tsconfig.app.tsbuildinfo +tsconfig.node.tsbuildinfo # Editor directories and files .vscode/* @@ -22,3 +24,6 @@ dist-ssr *.njsproj *.sln *.sw? + +# Test sandbox +playground diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 6f0ad86..7e32f1e 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -4,6 +4,8 @@ import { PencilIcon } from './icons'; interface CardProps extends React.PropsWithChildren { title: string; description?: string; + className?: string; + transparent?: boolean; onClick?: () => void; onEdit?: () => void; } @@ -11,22 +13,25 @@ interface CardProps extends React.PropsWithChildren { const Card: React.FC = ({ title, description, + className, + transparent = false, onClick, onEdit, children, }) => { - const className = classNames( + const containerClassName = classNames( + className, 'p-4 border rounded-lg shadow-sm transition', { 'hover:bg-gray-100 dark:hover:bg-nero-800 cursor-pointer': onClick, + 'bg-white dark:bg-nero-900': !transparent, }, 'border-gray-300 dark:border-nero-700', - 'bg-white dark:bg-nero-900', 'text-gray-800 dark:text-nero-200', ); return ( -
+

{title}

{onEdit && ( diff --git a/src/components/CopyInput.tsx b/src/components/CopyInput.tsx index 460cc5c..d864519 100644 --- a/src/components/CopyInput.tsx +++ b/src/components/CopyInput.tsx @@ -1,4 +1,6 @@ import { useState } from 'react'; +import Input from './Input'; +import Button from './Button'; interface CopyInputProps { value: string; @@ -19,19 +21,8 @@ const CopyInput: React.FC = ({ value }) => { return (
- - - + +
); }; diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx index 5d5b227..2bd3334 100644 --- a/src/components/Drawer.tsx +++ b/src/components/Drawer.tsx @@ -2,13 +2,25 @@ import React, { useEffect } from 'react'; import classNames from 'classnames'; import Button, { ButtonColor } from './Button'; +export enum DrawerSize { + Small, + Medium, + Big, +} + interface DrawerProps { isOpen: boolean; onClose: () => void; children: React.ReactNode; + size?: DrawerSize; } -const Drawer: React.FC = ({ isOpen, onClose, children }) => { +const Drawer: React.FC = ({ + isOpen, + onClose, + children, + size = DrawerSize.Medium, +}) => { useEffect(() => { const handleEsc = (event: KeyboardEvent) => { if (event.key === 'Escape') { @@ -23,6 +35,18 @@ const Drawer: React.FC = ({ isOpen, onClose, children }) => { if (!isOpen) return null; + const containerClassName = classNames( + 'relative h-full transform space-y-6 overflow-auto bg-white p-6 shadow-lg transition-transform dark:bg-nero-900', + { + 'translate-x-0': isOpen, + 'translate-x-full': !isOpen, + + 'w-1/4': size === DrawerSize.Small, + 'w-3/6': size === DrawerSize.Medium, + 'w-4/6': size === DrawerSize.Big, + }, + ); + return (
= ({ isOpen, onClose, children }) => { onClick={onClose} /> -
+
{children} + ))}
); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx deleted file mode 100644 index 70df86f..0000000 --- a/src/pages/Home.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { getRouteApi } from '@tanstack/react-router'; -import { useEstimationsList } from '../lib/context/estimationsList'; -import { - Card, - CreateEstimationSessionForm, - Drawer, - GridList, -} from '../components'; -import { useState } from 'react'; - -const route = getRouteApi('/_authenticated/'); - -function Home() { - const navigate = route.useNavigate(); - const estimationsList = useEstimationsList(); - const [isDrawerOpen, setIsDrawerOpen] = useState(false); - - return ( -
-

Estimation sessions

- - ( - { - navigate({ - to: '/estimate/session/$sessionId', - params: { sessionId: item.id }, - }); - }} - /> - )} - addItemLabel="+ Create Estimation Session" - onAddItem={() => setIsDrawerOpen(true)} - /> - - setIsDrawerOpen(false)}> - setIsDrawerOpen(false)} /> - -
- ); -} - -export default Home; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx new file mode 100644 index 0000000..302c135 --- /dev/null +++ b/src/pages/Home/Home.tsx @@ -0,0 +1,35 @@ +import { useEstimationsList } from 'src/lib/context/estimationsList'; +import { Drawer, DrawerSize, GridList } from 'src/components'; +import { useState } from 'react'; +import CreateEstimationSessionForm from './components/CreateEstimationSessionForm'; +import EstimationSessionCard from './components/EstimationSessionCard'; + +function Home() { + const estimationsList = useEstimationsList(); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + + return ( +
+

Estimation sessions

+ + setIsDrawerOpen(true)} + /> + + setIsDrawerOpen(false)} + > + setIsDrawerOpen(false)} /> + +
+ ); +} + +export default Home; diff --git a/src/components/forms/CreateEstimationSessionForm.tsx b/src/pages/Home/components/CreateEstimationSessionForm.tsx similarity index 93% rename from src/components/forms/CreateEstimationSessionForm.tsx rename to src/pages/Home/components/CreateEstimationSessionForm.tsx index c2d7ec6..b095c97 100644 --- a/src/components/forms/CreateEstimationSessionForm.tsx +++ b/src/pages/Home/components/CreateEstimationSessionForm.tsx @@ -1,9 +1,8 @@ import { useForm } from '@tanstack/react-form'; -import { useEstimationsList } from '../../lib/context/estimationsList'; -import Input from '../Input'; -import Button from '../Button'; +import { useEstimationsList } from 'src/lib/context/estimationsList'; import { yupValidator } from '@tanstack/yup-form-adapter'; import * as yup from 'yup'; +import { Input, Button } from 'src/components'; interface CreateEstimationSessionFormProps { onCreated: () => void; diff --git a/src/pages/Home/components/EstimationSessionCard.tsx b/src/pages/Home/components/EstimationSessionCard.tsx new file mode 100644 index 0000000..df9b15c --- /dev/null +++ b/src/pages/Home/components/EstimationSessionCard.tsx @@ -0,0 +1,30 @@ +import { getRouteApi } from '@tanstack/react-router'; +import { Card } from 'src/components'; +import { EntityModels } from 'src/lib/types'; + +interface EstimationSessionCardProps { + item: EntityModels.EstimationSession; +} + +const route = getRouteApi('/_authenticated/'); + +const EstimationSessionCard: React.FC = ({ + item, +}) => { + const navigate = route.useNavigate(); + + return ( + { + navigate({ + to: '/estimate/session/$sessionId', + params: { sessionId: item.id }, + }); + }} + /> + ); +}; + +export default EstimationSessionCard; diff --git a/src/pages/Join.tsx b/src/pages/Join.tsx index a12953f..a2bc20a 100644 --- a/src/pages/Join.tsx +++ b/src/pages/Join.tsx @@ -3,9 +3,9 @@ import { getInviteInfo, joinSession, SessionInviteInfo, -} from '../lib/functions/estimationSessionInvite'; +} from 'src/lib/functions/estimationSessionInvite'; import { getRouteApi } from '@tanstack/react-router'; -import { Loader } from '../components'; +import { Button, ButtonColor, Card, Loader } from 'src/components'; const route = getRouteApi('/_authenticated/join/$sessionId'); @@ -50,28 +50,21 @@ const Join = () => { return (
-
-

- You have been invited to join a new estimation session! -

+

Session Name: {sessionInfo.name}

- - + +
-
+
); }; diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 6d31eb8..ce9d99b 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,8 +1,9 @@ import { useForm } from '@tanstack/react-form'; -import { useUser } from '../lib/context/user'; -import { Button, ButtonColor, Input } from '../components'; +import { useUser } from 'src/lib/context/user'; +import { Button, ButtonColor, Card, Input } from 'src/components'; import { yupValidator } from '@tanstack/yup-form-adapter'; import * as yup from 'yup'; +import { Link } from '@tanstack/react-router'; const Login = () => { const user = useUser(); @@ -24,14 +25,11 @@ const Login = () => { }); return ( -
-
-

- Sign in to your account -

-
- -
+
+
{(field) => ( @@ -107,15 +105,14 @@ const Login = () => {

Don't want to create an account?{' '} - user.loginAsGuest()} > Sign in as a guest - +

-
+
); }; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 1001054..0d19c85 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,6 +1,6 @@ import { useForm } from '@tanstack/react-form'; -import { Button, Input } from '../components'; -import { useUser } from '../lib/context/user'; +import { Button, Card, Input } from 'src/components'; +import { useUser } from 'src/lib/context/user'; import { yupValidator } from '@tanstack/yup-form-adapter'; import * as yup from 'yup'; @@ -15,7 +15,7 @@ const Profile = () => { updateUsernameForm.reset(); }, validators: { - onChange: yup.object({ + onSubmit: yup.object({ name: yup.string().label('Name').max(128).required(), }), }, @@ -24,10 +24,11 @@ const Profile = () => { return (
-
-

- Update Name -

+ { @@ -65,7 +66,7 @@ const Profile = () => { )} -
+
); }; diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..f5dccdf --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,7 @@ +import Estimation from './Estimation/Estimation'; +import Home from './Home/Home'; +import Join from './Join'; +import Login from './Login'; +import Profile from './Profile'; + +export { Estimation, Home, Join, Login, Profile }; diff --git a/tsconfig.app.json b/tsconfig.app.json index f0a2350..a3d982d 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -18,7 +18,13 @@ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + + /* Paths */ + "baseUrl": ".", + "paths": { + "src/*": ["./src/*"] + } }, "include": ["src"] } diff --git a/vite.config.ts b/vite.config.ts index 861b04b..5b2498b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,21 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react-swc'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) + build: { + rollupOptions: { + output: { + manualChunks: { + RichEditor: ['src/components/RichEditor'], + }, + }, + }, + }, + resolve: { + alias: { + src: '/src', + }, + }, +});