Code cleanup

.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

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<CardProps> = ({
   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 (
-    <div className={className} onClick={onClick} title={title}>
+    <div className={containerClassName} onClick={onClick} title={title}>
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-bold">{title}</h3>
         {onEdit && (

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<CopyInputProps> = ({ value }) => {
 
   return (
     <div className="flex items-center space-x-2">
-      <input
-        type="text"
-        value={value}
-        readOnly
-        className="w-full rounded-md border border-gray-300 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-600 dark:bg-nero-800 dark:text-gray-100"
-      />
-
-      <button
-        onClick={handleCopy}
-        className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-500"
-      >
-        {copied ? 'Copied!' : 'Copy'}
-      </button>
+      <Input type="text" value={value} readOnly />
+      <Button onClick={handleCopy}>{copied ? 'Copied!' : 'Copy'}</Button>
     </div>
   );
 };

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<DrawerProps> = ({ isOpen, onClose, children }) => {
+const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  children,
+  size = DrawerSize.Medium,
+}) => {
   useEffect(() => {
     const handleEsc = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -23,6 +35,18 @@ const Drawer: React.FC<DrawerProps> = ({ 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 (
     <div className="fixed inset-0 z-50 flex items-center justify-end">
       <div
@@ -30,15 +54,7 @@ const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, children }) => {
         onClick={onClose}
       />
 
-      <div
-        className={classNames(
-          'relative h-full w-2/3 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,
-          },
-        )}
-      >
+      <div className={containerClassName}>
         {children}
 
         <Button onClick={onClose} color={ButtonColor.Secondary} fullWidth>

src/components/GridList.tsx

@@ -6,7 +6,7 @@ interface GridListProps<T> {
   className?: string;
   addItemLabel?: string;
   onAddItem?: () => void;
-  itemComponent: React.ComponentType<{ item: T }>;
+  itemComponent: React.FC<{ item: T }>;
 }
 
 const AddItemButton = ({

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router';
 import { useState } from 'react';
-import { useUser } from '../lib/context/user';
+import { useUser } from 'src/lib/context/user';
 
 const Header = () => {
   const { current, isLoading, logout } = useUser();

src/components/Input.tsx

@@ -14,14 +14,14 @@ const Input = ({
   return (
     <div>
       {label && (
-        <label className="block text-sm font-medium leading-6">{label}</label>
+        <label className="mb-2 block text-sm font-medium leading-6">
+          {label}
+        </label>
       )}
-      <div className="mt-2">
       <input
-          className="w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm hover:border-slate-300 focus:border-slate-50 focus:shadow focus:outline-none"
+        className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm hover:border-slate-300 focus:border-slate-50 focus:shadow focus:outline-none dark:border-gray-600 dark:bg-nero-800 dark:text-gray-100"
         {...props}
       />
-      </div>
       {errors?.map((error, key) => (
         <em key={`${error}-${key}`} role="alert">
           {error}

src/components/index.ts

@@ -1,18 +1,26 @@
 import Button, { ButtonColor } from './Button';
 import Card from './Card';
-import CreateEstimationSessionForm from './forms/CreateEstimationSessionForm';
-import Drawer from './Drawer';
+import CopyInput from './CopyInput';
+import Drawer, { DrawerSize } from './Drawer';
 import GridList from './GridList';
+import Header from './Header';
+import HtmlEmbed from './HtmlEmbed';
 import Input from './Input';
-import Loader from './Loader';
+import Loader, { LoaderSize } from './Loader';
+import RichEditor from './RichEditor';
 
 export {
   Button,
   ButtonColor,
   Card,
-  CreateEstimationSessionForm,
+  CopyInput,
   Drawer,
+  DrawerSize,
   GridList,
+  Header,
+  HtmlEmbed,
   Input,
   Loader,
+  LoaderSize,
+  RichEditor,
 };

src/index.css

@@ -17,6 +17,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.ck .ck-editor__main {
+  color: #1a1a1a;
+}
+
 a {
   font-weight: 500;
   color: #646cff;

src/lib/context/estimation.tsx

@@ -10,21 +10,21 @@ import {
   DATABASE_ID,
   databases,
   ESTIMATION_SESSION_COLLECTION_ID,
-} from '../appwrite';
-import { DatabaseModels, EntityModels } from '../types';
+} from 'src/lib/appwrite';
 import { useUser } from './user';
-import { mapDatabaseToEntity } from '../mappers/estimationSession';
-import { EditTicketRequest, CreateTicketRequest } from '../types/requestModels';
-import { EstimationSessionTicket } from '../types/entityModels';
+import { mapDatabaseToEntity } from 'src/lib/mappers/estimationSession';
+import { RequestModels, DatabaseModels, EntityModels } from 'src/lib/types';
 
 interface EstimationContextType {
   setSessionId: (sessionId: string) => void;
   setActiveTicket: (ticketId: string) => Promise<void>;
   setRevealed: (revealed: boolean) => Promise<void>;
   setVote: (estimate: string) => Promise<void>;
-  createTicket: (ticket: CreateTicketRequest) => Promise<void>;
-  createTickets: (tickets: CreateTicketRequest[]) => Promise<void>;
-  updateTicket: (ticket: EditTicketRequest) => Promise<void>;
+  createTicket: (ticket: RequestModels.CreateTicketRequest) => Promise<void>;
+  createTickets: (
+    tickets: RequestModels.CreateTicketRequest[],
+  ) => Promise<void>;
+  updateTicket: (ticket: RequestModels.EditTicketRequest) => Promise<void>;
   currentSessionData?: EntityModels.EstimationSession;
 }
 
@@ -121,10 +121,13 @@ export const EstimationContextProvider = (props: PropsWithChildren) => {
     });
   };
 
-  const createTicket = (ticket: CreateTicketRequest) => createTickets([ticket]);
+  const createTicket = (ticket: RequestModels.CreateTicketRequest) =>
+    createTickets([ticket]);
 
-  const createTickets = async (tickets: CreateTicketRequest[]) => {
-    const newTickets = tickets.map<EstimationSessionTicket>(
+  const createTickets = async (
+    tickets: RequestModels.CreateTicketRequest[],
+  ) => {
+    const newTickets = tickets.map<EntityModels.EstimationSessionTicket>(
       ({ content, name, estimate }) => ({
         id: crypto.randomUUID(),
         name,
@@ -152,7 +155,7 @@ export const EstimationContextProvider = (props: PropsWithChildren) => {
     name,
     content,
     estimate,
-  }: EditTicketRequest) => {
+  }: RequestModels.EditTicketRequest) => {
     const editedTicket = currentSessionData?.tickets.find((x) => x.id === id);
     if (!editedTicket) {
       return;

src/lib/parsers/ticketUpload.ts

@@ -1,4 +1,4 @@
-import { EntityModels } from '../types';
+import { EntityModels } from 'src/lib/types';
 import Papa from 'papaparse';
 import Showdown from 'showdown';
 
@@ -56,7 +56,7 @@ const parseJiraCSV = (
     return data.map<EntityModels.EstimationSessionTicket>((row) => ({
       id: crypto.randomUUID(),
       name: row['Summary'],
-      estimate: row['Story point estimate'] || '',
+      estimate: row['Custom field (Story point estimate)'],
       content: converter.makeHtml(row['Description'] || ''),
     }));
   } catch (error) {

src/lib/types/index.ts

@@ -1,2 +1,3 @@
 export * as DatabaseModels from './databaseModels';
 export * as EntityModels from './entityModels';
+export * as RequestModels from './requestModels';

src/main.tsx

@@ -9,16 +9,11 @@ import {
   redirect,
   RouterProvider,
 } from '@tanstack/react-router';
-import Home from './pages/Home';
-import { UserContextType, UserProvider, useUser } from './lib/context/user';
-import Login from './pages/Login';
-import { EstimationsListContextProvider } from './lib/context/estimationsList';
-import { EstimationContextProvider } from './lib/context/estimation';
-import Estimation from './pages/Estimation/Estimation';
-import Header from './components/Header';
-import Profile from './pages/Profile';
-import Join from './pages/Join';
-import { Loader } from './components';
+import { UserContextType, UserProvider, useUser } from 'src/lib/context/user';
+import { EstimationsListContextProvider } from 'src/lib/context/estimationsList';
+import { EstimationContextProvider } from 'src/lib/context/estimation';
+import { Header, Loader } from 'src/components';
+import { Estimation, Home, Join, Login, Profile } from 'src/pages';
 
 interface RouterContext {
   userContext: UserContextType;
@@ -120,7 +115,6 @@ createRoot(document.getElementById('root')!).render(
     <UserProvider>
       <EstimationsListContextProvider>
         <EstimationContextProvider>
-          {/* TODO: Move ctx providers to layout */}
           <InnerApp />
         </EstimationContextProvider>
       </EstimationsListContextProvider>

src/pages/Estimation/Estimation.tsx

@@ -4,11 +4,10 @@ import { getRouteApi } from '@tanstack/react-router';
 import TaskSidebar from './components/TaskSidebar';
 import VoteSelection from './components/VoteSelection';
 import VoteList from './components/VoteList';
-import { Drawer, Loader } from '../../components';
 import EditTicketForm from './components/EditTicketForm';
 import PlayerList from './components/PlayerList';
-import HtmlEmbed from '../../components/HtmlEmbed';
 import EstimationResult from './components/EstimationResult';
+import { Drawer, HtmlEmbed, Loader } from 'src/components';
 
 const fibonacciSequence = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 100];
 

src/pages/Estimation/components/EditTicketForm.tsx

@@ -1,6 +1,5 @@
 import { useForm } from '@tanstack/react-form';
-import { Button, Input } from '../../../components';
-import RichEditor from '../../../components/RichEditor';
+import { Button, Input, RichEditor } from 'src/components';
 import { yupValidator } from '@tanstack/yup-form-adapter';
 import * as yup from 'yup';
 

src/pages/Estimation/components/EstimationResult.tsx

@@ -1,6 +1,6 @@
 import { useForm } from '@tanstack/react-form';
-import { Button, ButtonColor, Input } from '../../../components';
-import { PlayerVote } from '../../../lib/types/entityModels';
+import { Button, ButtonColor, Input } from 'src/components';
+import { PlayerVote } from 'src/lib/types/entityModels';
 import { yupValidator } from '@tanstack/yup-form-adapter';
 import * as yup from 'yup';
 
@@ -77,7 +77,6 @@ const EstimationResult: React.FC<VoteListProps> = ({
               value={field.state.value}
               onBlur={field.handleBlur}
               onChange={(e) => field.handleChange(e.target.value)}
-              errors={field.state.meta.errors}
             />
           )}
         </form.Field>

src/pages/Estimation/components/PlayerList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { EntityModels } from '../../../lib/types';
-import CopyInput from '../../../components/CopyInput';
+import { EntityModels } from 'src/lib/types';
+import { CopyInput } from 'src/components';
 
 interface PlayerListProps {
   sessionId: string;
@@ -14,7 +14,7 @@ const PlayerList: React.FC<PlayerListProps> = ({
   title = 'Players',
 }) => {
   return (
-    <div className="flex w-full max-w-sm flex-col justify-between rounded-lg bg-white p-6 shadow-lg dark:bg-nero-800">
+    <div className="flex w-full max-w-sm flex-col justify-between bg-white p-6 shadow-lg dark:bg-nero-800">
       <h2 className="mb-4 text-xl font-semibold text-gray-900 dark:text-gray-100">
         {title}
       </h2>

src/pages/Estimation/components/TaskSidebar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { Button, Card, Drawer, GridList } from '../../../components';
-import { EstimationSessionTicket } from '../../../lib/types/entityModels';
+import { Button, Card, Drawer, GridList } from 'src/components';
+import { EstimationSessionTicket } from 'src/lib/types/entityModels';
 import TicketImportForm from './TicketImportForm';
 import { useState } from 'react';
 

src/pages/Estimation/components/TicketImportForm.tsx

@@ -2,21 +2,36 @@ import { useState } from 'react';
 import {
   handleTicketFileUpload,
   TicketFileUploadResponse,
-} from '../../../lib/parsers/ticketUpload';
-import { EstimationSessionTicket } from '../../../lib/types/entityModels';
-import { Button, Card, GridList, Loader } from '../../../components';
-import HtmlEmbed from '../../../components/HtmlEmbed';
-import { useEstimationContext } from '../../../lib/context/estimation';
+} from 'src/lib/parsers/ticketUpload';
+import { EntityModels } from 'src/lib/types';
+import { Button, Card, GridList, HtmlEmbed, Loader } from 'src/components';
+import { useEstimationContext } from 'src/lib/context/estimation';
 
 interface TicketImportFormProps {
   onTicketsImported: () => void;
 }
 
+const TicketItem = ({
+  item,
+}: {
+  item: EntityModels.EstimationSessionTicket;
+}) => (
+  <Card
+    key={item.id}
+    title={item.name}
+    description={`Estimate: ${item.estimate ? item.estimate : 'N/A'}`}
+  >
+    <HtmlEmbed className="h-16 w-full" body={item.content} />
+  </Card>
+);
+
 const TicketImportForm: React.FC<TicketImportFormProps> = ({
   onTicketsImported,
 }) => {
   const [error, setError] = useState<string>('');
-  const [tickets, setTickets] = useState<EstimationSessionTicket[]>([]);
+  const [tickets, setTickets] = useState<
+    EntityModels.EstimationSessionTicket[]
+  >([]);
   const estimationContext = useEstimationContext();
 
   if (!estimationContext) {
@@ -65,15 +80,7 @@ const TicketImportForm: React.FC<TicketImportFormProps> = ({
             className="no-scrollbar overflow-y-scroll"
             items={tickets}
             colNum={1}
-            itemComponent={({ item }) => (
-              <Card
-                key={item.id}
-                title={item.name}
-                description={`Estimate: ${item.estimate || 'N/A'}`}
-              >
-                <HtmlEmbed className="h-16 w-full" body={item.content} />
-              </Card>
-            )}
+            itemComponent={TicketItem}
           />
           <Button className="mt-4" fullWidth onClick={onCreateTickets}>
             Import

src/pages/Estimation/components/VoteList.tsx

@@ -1,5 +1,5 @@
-import { Card, GridList } from '../../../components';
-import { PlayerVote } from '../../../lib/types/entityModels';
+import { Card, GridList } from 'src/components';
+import { PlayerVote } from 'src/lib/types/entityModels';
 
 interface VoteListProps {
   className?: string;
@@ -8,22 +8,20 @@ interface VoteListProps {
 }
 
 const VoteList: React.FC<VoteListProps> = ({ className, votes, revealed }) => {
-  return (
-    <div className={className}>
-      {votes.length > 0 && (
-        <h2 className="mb-4 text-xl font-bold">Player Votes</h2>
-      )}
-      <GridList
-        colNum={5}
-        itemComponent={({ item }, idx) => (
+  const voteListItem = ({ item }: { item: PlayerVote }, idx: string) => (
     <Card
       key={idx}
       title={item.username}
       description={revealed ? item.estimate : 'Hidden'}
     />
+  );
+
+  return (
+    <div className={className}>
+      {votes.length > 0 && (
+        <h2 className="mb-4 text-xl font-bold">Player Votes</h2>
       )}
-        items={votes}
-      />
+      <GridList colNum={5} itemComponent={voteListItem} items={votes} />
     </div>
   );
 };

src/pages/Estimation/components/VoteSelection.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { Button } from 'src/components';
 
 interface VoteSelectionProps {
   className: string;
@@ -15,20 +16,20 @@ const VoteSelection: React.FC<VoteSelectionProps> = ({
 }) => {
   const getItemClassName = (option: string) =>
     classNames('rounded-md px-4 py-2 text-white transition-colors', {
-      'bg-indigo-800': value !== option,
-      'bg-indigo-600 hover:bg-indigo-500': value === option,
+      'bg-indigo-800': value === option,
+      'bg-indigo-600 hover:bg-indigo-500': value !== option,
     });
 
   return (
     <div className={className}>
       {options.map((option) => (
-        <button
+        <Button
           key={option}
-          className={getItemClassName(option)}
           onClick={() => onSelect(option)}
+          className={getItemClassName(option)}
         >
           {option}
-        </button>
+        </Button>
       ))}
     </div>
   );

src/pages/Home.tsx

@@ -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 (
-    <div className="p-6">
-      <h1 className="text-3xl font-bold">Estimation sessions</h1>
-
-      <GridList
-        colNum={2}
-        className="my-3"
-        items={estimationsList?.current ?? []}
-        itemComponent={({ item }) => (
-          <Card
-            key={item.id}
-            title={item.name}
-            onClick={() => {
-              navigate({
-                to: '/estimate/session/$sessionId',
-                params: { sessionId: item.id },
-              });
-            }}
-          />
-        )}
-        addItemLabel="+ Create Estimation Session"
-        onAddItem={() => setIsDrawerOpen(true)}
-      />
-
-      <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
-        <CreateEstimationSessionForm onCreated={() => setIsDrawerOpen(false)} />
-      </Drawer>
-    </div>
-  );
-}
-
-export default Home;

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 (
+    <div className="p-6">
+      <h1 className="text-3xl font-bold">Estimation sessions</h1>
+
+      <GridList
+        colNum={2}
+        className="my-3"
+        items={estimationsList?.current ?? []}
+        itemComponent={EstimationSessionCard}
+        addItemLabel="+ Create Estimation Session"
+        onAddItem={() => setIsDrawerOpen(true)}
+      />
+
+      <Drawer
+        size={DrawerSize.Small}
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+      >
+        <CreateEstimationSessionForm onCreated={() => setIsDrawerOpen(false)} />
+      </Drawer>
+    </div>
+  );
+}
+
+export default Home;

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;

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<EstimationSessionCardProps> = ({
+  item,
+}) => {
+  const navigate = route.useNavigate();
+
+  return (
+    <Card
+      key={item.id}
+      title={item.name}
+      onClick={() => {
+        navigate({
+          to: '/estimate/session/$sessionId',
+          params: { sessionId: item.id },
+        });
+      }}
+    />
+  );
+};
+
+export default EstimationSessionCard;

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 (
     <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 transition-colors dark:bg-nero-900">
-      <div className="max-w-lg rounded-lg bg-white p-8 text-center shadow-lg dark:bg-nero-800">
-        <h1 className="mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
-          You have been invited to join a new estimation session!
-        </h1>
+      <Card
+        title="You have been invited to join a new estimation session!"
+        className="bg-white shadow-lg dark:bg-nero-800"
+        transparent
+      >
         <p className="mb-6 text-lg text-gray-700 dark:text-gray-300">
           Session Name: <strong>{sessionInfo.name}</strong>
         </p>
         <div className="flex justify-center gap-4">
-          <button
-            onClick={handleAccept}
-            className="rounded-md bg-indigo-600 px-6 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-500"
-          >
-            Accept
-          </button>
-          <button
-            onClick={handleReturnHome}
-            className="rounded-md bg-gray-300 px-6 py-2 text-sm font-semibold text-gray-900 shadow-sm transition-colors hover:bg-gray-200 dark:bg-nero-700 dark:text-gray-100 dark:hover:bg-gray-600"
-          >
-            Return to Home
-          </button>
-        </div>
+          <Button onClick={handleAccept}>Accept</Button>
+          <Button onClick={handleReturnHome} color={ButtonColor.Secondary}>
+            Return Home
+          </Button>
         </div>
+      </Card>
     </div>
   );
 };

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 (
-    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-        <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight">
-          Sign in to your account
-        </h2>
-      </div>
-
-      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+    <div className="flex h-screen flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+      <Card
+        title="Sign in to your account"
+        className="sm:mx-auto sm:w-full sm:max-w-sm"
+      >
         <form className="space-y-6">
           <form.Field name="email">
             {(field) => (
@@ -107,15 +105,14 @@ const Login = () => {
 
         <p className="mt-10 text-center text-sm text-gray-500">
           Don't want to create an account?{' '}
-          <a
-            href="#"
+          <Link
             className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
             onClick={() => user.loginAsGuest()}
           >
             Sign in as a guest
-          </a>
+          </Link>
         </p>
-      </div>
+      </Card>
     </div>
   );
 };

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 (
     <div className="flex min-h-screen items-center justify-center bg-gray-50 transition-colors dark:bg-nero-900">
-      <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-lg dark:bg-nero-800">
-        <h1 className="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">
-          Update Name
-        </h1>
+      <Card
+        title="Update Name"
+        className="w-full max-w-md bg-white shadow-lg dark:bg-nero-800"
+        transparent
+      >
         <form
           className="space-y-6"
           onSubmit={(e) => {
@@ -65,7 +66,7 @@ const Profile = () => {
             )}
           </updateUsernameForm.Subscribe>
         </form>
-      </div>
+      </Card>
     </div>
   );
 };

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 };

tsconfig.app.json

@@ -18,7 +18,13 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "src/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

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',
+    },
+  },
+});