started work on availability-color-selector

2025-01-17 21:58:17 +00:00
parent a3c6fd685d
commit e37310b774
22 changed files with 9961 additions and 9155 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -1,38 +1,38 @@
 {
-	"name": "client",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"dev": "next dev --turbopack",
-		"build": "next build",
-		"start": "next start",
-		"lint": "next lint"
-	},
-	"dependencies": {
-		"@carbon/icons-react": "^11.53.0",
-		"@internationalized/date": "^3.6.0",
-		"@nextui-org/react": "^2.6.11",
-		"@nextui-org/system": "^2.4.6",
-		"@nextui-org/theme": "^2.4.5",
-		"@react-aria/i18n": "^3.12.4",
-		"@react-stately/data": "^3.12.0",
-		"framer-motion": "^11.15.0",
-		"next": "15.1.3",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
-		"zustand": "^5.0.2"
-	},
-	"devDependencies": {
-		"@eslint/eslintrc": "^3",
-		"@types/node": "^20",
-		"@types/react": "^19",
-		"@types/react-dom": "^19",
-		"eslint": "^9",
-		"eslint-config-next": "15.1.3",
-		"postcss": "^8",
-		"prettier": "^3.4.2",
-		"prettier-plugin-tailwindcss": "^0.6.9",
-		"tailwindcss": "^3.4.1",
-		"typescript": "^5"
-	}
+ "name": "client",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+  "dev": "next dev --turbopack",
+  "build": "next build",
+  "start": "next start",
+  "lint": "next lint"
+ },
+ "dependencies": {
+  "@carbon/icons-react": "^11.53.0",
+  "@internationalized/date": "^3.6.0",
+  "@heroui/react": "2.6.13",
+  "@heroui/system": "2.4.6",
+  "@heroui/theme": "2.4.5",
+  "@react-aria/i18n": "^3.12.4",
+  "@react-stately/data": "^3.12.0",
+  "framer-motion": "^11.15.0",
+  "next": "15.1.3",
+  "react": "^19.0.0",
+  "react-dom": "^19.0.0",
+  "zustand": "^5.0.2"
+ },
+ "devDependencies": {
+  "@eslint/eslintrc": "^3",
+  "@types/node": "^20",
+  "@types/react": "^19",
+  "@types/react-dom": "^19",
+  "eslint": "^9",
+  "eslint-config-next": "15.1.3",
+  "postcss": "^8",
+  "prettier": "^3.4.2",
+  "prettier-plugin-tailwindcss": "^0.6.9",
+  "tailwindcss": "^3.4.1",
+  "typescript": "^5"
+ }
 }
--- a/client/src/app/Footer.tsx
+++ b/client/src/app/Footer.tsx
@@ -3,7 +3,7 @@
 import { usePathname } from "next/navigation";
 import React from "react";
 import { SiteLink } from "./layout";
-import { Divider, Link } from "@nextui-org/react";
+import { Divider, Link } from "@heroui/react";

 export default function Footer({ sites }: { sites: SiteLink[] }) {
 	const pathname = usePathname();
--- a/client/src/app/Header.tsx
+++ b/client/src/app/Header.tsx
@@ -18,7 +18,7 @@ import {
 	NavbarMenuToggle,
 	Tab,
 	Tabs,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import zustand from "@/Zustand";
 import { SiteLink } from "./layout";
 import React, { useEffect, useState } from "react";
--- a/client/src/app/Main.tsx
+++ b/client/src/app/Main.tsx
@@ -2,7 +2,7 @@

 import { apiCall } from "@/lib";
 import zustand from "@/Zustand";
-import { Spinner } from "@nextui-org/react";
+import { Spinner } from "@heroui/react";
 import { usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";

--- a/client/src/app/Overview.tsx
+++ b/client/src/app/Overview.tsx
@@ -3,7 +3,7 @@
 import { Add } from "@carbon/icons-react";
 import { useState } from "react";
 import AddEvent from "../components/Event/AddEvent";
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";

 export default function EventVolunteer() {
 	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);
--- a/client/src/app/account/page.tsx
+++ b/client/src/app/account/page.tsx
@@ -9,7 +9,7 @@ import {
 	CardHeader,
 	Form,
 	Input,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { FormEvent, useState } from "react";

 export default function Account() {
--- a/client/src/app/admin/AddUser.tsx
+++ b/client/src/app/admin/AddUser.tsx
@@ -9,7 +9,7 @@ import {
 	ModalContent,
 	ModalFooter,
 	ModalHeader,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { FormEvent, useState } from "react";

 export default function AddUser(props: {
--- a/client/src/app/admin/Availabilities.tsx
+++ b/client/src/app/admin/Availabilities.tsx
@@ -0,0 +1,9 @@
+import ColorSelector from "@/components/Colorselector";
+
+export default function Availabilities() {
+	return (
+		<div>
+			<ColorSelector />
+		</div>
+	);
+}
--- a/client/src/app/admin/EditUser.tsx
+++ b/client/src/app/admin/EditUser.tsx
@@ -14,7 +14,7 @@ import {
 	ModalContent,
 	ModalFooter,
 	ModalHeader,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { FormEvent, useEffect, useState } from "react";

 export default function EditUser(props: {
--- a/client/src/app/admin/Users.tsx
+++ b/client/src/app/admin/Users.tsx
@@ -10,7 +10,7 @@ import {
 	TableHeader,
 	TableRow,
 	Tooltip,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useAsyncList } from "@react-stately/data";
 import { FormEvent, useState } from "react";
 import AddUser from "./AddUser";
--- a/client/src/app/admin/page.tsx
+++ b/client/src/app/admin/page.tsx
@@ -1,7 +1,8 @@
 "use client";

-import { Tab, Tabs } from "@nextui-org/react";
+import { Tab, Tabs } from "@heroui/react";
 import Users from "./Users";
+import Availabilities from "./Availabilities";

 export default function AdminDashboard() {
 	return (
@@ -11,7 +12,7 @@ export default function AdminDashboard() {
 					<Users />
 				</Tab>
 				<Tab title="Tasks">Tasks</Tab>
-				<Tab title="Availabilities">Availabilities</Tab>
+				<Tab title="Availabilities"><Availabilities /></Tab>
 			</Tabs>
 		</div>
 	);
--- a/client/src/app/assignments/page.tsx
+++ b/client/src/app/assignments/page.tsx
@@ -34,7 +34,7 @@ import {
 	TableHeader,
 	TableRow,
 	Tooltip,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { useAsyncList } from "@react-stately/data";
 import React, { Key, useState } from "react";

--- a/client/src/app/events/page.tsx
+++ b/client/src/app/events/page.tsx
@@ -5,7 +5,7 @@ import Event from "@/components/Event/Event";
 import { apiCall } from "@/lib";
 import zustand, { EventData } from "@/Zustand";
 import { Add } from "@carbon/icons-react";
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import { useEffect, useState } from "react";

 export default function Events() {
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { NextUIProvider } from "@nextui-org/system";
+import { HeroUIProvider } from "@heroui/system";
 import React from "react";
 import Footer from "./Footer";
 import Header from "./Header";
@@ -57,7 +57,7 @@ export default function RootLayout({
 	return (
 		<html>
 			<body className="bg-background text-foreground antialiased">
-				<NextUIProvider>
+				<HeroUIProvider>
 					<div className="flex min-h-screen flex-col p-4">
 						<header>
 							<Header sites={headerSites} />
@@ -69,7 +69,7 @@ export default function RootLayout({
 							<Footer sites={footerSites} />
 						</footer>
 					</div>
-				</NextUIProvider>
+				</HeroUIProvider>
 			</body>
 		</html>
 	);
--- a/client/src/app/login/page.tsx
+++ b/client/src/app/login/page.tsx
@@ -8,7 +8,7 @@ import {
 	ViewOffFilled,
 	WarningHexFilled,
 } from "@carbon/icons-react";
-import { Alert, Button, Form, Input } from "@nextui-org/react";
+import { Alert, Button, Form, Input } from "@heroui/react";
 import { useRouter } from "next/navigation";
 import { FormEvent, useState } from "react";

--- a/client/src/components/CheckboxIcon.tsx
+++ b/client/src/components/CheckboxIcon.tsx
@@ -1,4 +1,4 @@
-import { SwitchProps, useSwitch, VisuallyHidden } from "@nextui-org/react";
+import { SwitchProps, useSwitch, VisuallyHidden } from "@heroui/react";
 import React from "react";

 export default function CheckboxIcon(props: SwitchProps) {
--- a/client/src/components/Colorselector.tsx
+++ b/client/src/components/Colorselector.tsx
@@ -0,0 +1,58 @@
+import {
+	RadioGroup,
+	RadioProps,
+	useRadio,
+	VisuallyHidden,
+} from "@heroui/react";
+
+export default function ColorSelector() {
+	const colors = [
+		{ value: "Red", tailwind: "red-600" },
+		{ value: "Orange", tailwind: "orange-600" },
+		{ value: "Amber", tailwind: "amber-600" },
+		{ value: "Yellow", tailwind: "yellow-600" },
+		{ value: "Lime", tailwind: "lime-600" },
+		{ value: "Green", tailwind: "green-600" },
+		{ value: "Emerald", tailwind: "emerald-600" },
+		{ value: "Teal", tailwind: "teal-600" },
+		{ value: "Cyan", tailwind: "cyan-600" },
+		{ value: "Sky", tailwind: "sky-600" },
+		{ value: "Blue", tailwind: "blue-600" },
+		{ value: "Indigo", tailwind: "indigo-600" },
+		{ value: "Violet", tailwind: "violet-600" },
+		{ value: "Purple", tailwind: "purple-600" },
+		{ value: "Fuchsia", tailwind: "fuchsia-600" },
+		{ value: "Pink", tailwind: "pink-600" },
+	];
+
+	return (
+		<RadioGroup classNames={{ wrapper: "grid grid-cols-4" }}>
+			{colors.map((color) => (
+				<ColorRadio
+					description={color.value}
+					value={color.value}
+					key={color.value}
+					radioColor={`bg-${color.tailwind}`}
+				>
+					<div>{color.value}</div>
+				</ColorRadio>
+			))}
+		</RadioGroup>
+	);
+}
+
+function ColorRadio(props: { radioColor: string } & RadioProps) {
+	const { Component, children, getBaseProps, getInputProps } = useRadio(props);
+
+	return (
+		<Component
+			{...getBaseProps()}
+			className={`aspect-square cursor-pointer rounded-lg border-2 border-default tap-highlight-transparent hover:opacity-70 active:opacity-50 data-[selected=true]:border-primary ${props.radioColor} flex items-center justify-center p-1`}
+		>
+			<VisuallyHidden>
+				<input {...getInputProps()} />
+			</VisuallyHidden>
+			{children}
+		</Component>
+	);
+}
--- a/client/src/components/Event/AddEvent.tsx
+++ b/client/src/components/Event/AddEvent.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import EditEvent, { EventSubmitData } from "./EditEvent";
 import { apiCall } from "@/lib";
 import { AddLarge } from "@carbon/icons-react";
--- a/client/src/components/Event/EditEvent.tsx
+++ b/client/src/components/Event/EditEvent.tsx
@@ -18,7 +18,7 @@ import {
 	ModalHeader,
 	Spinner,
 	Textarea,
-} from "@nextui-org/react";
+} from "@heroui/react";
 import { getTasks, Task } from "@/lib";
 import { EventData } from "@/Zustand";

--- a/client/src/components/Event/Event.tsx
+++ b/client/src/components/Event/Event.tsx
@@ -2,7 +2,7 @@

 import LocalDate from "../LocalDate";
 import { EventData } from "@/Zustand";
-import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
+import { Card, CardBody, CardHeader, Divider } from "@heroui/react";
 import React from "react";

 export default function Event({
--- a/client/tailwind.config.ts
+++ b/client/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-import { nextui } from "@nextui-org/theme";
+import { heroui } from "@heroui/theme";

 const HIGHLIGHT = "hsl(359,100%,65.7%)"; // #ff5053
 const FOREGROUND = "hsl(295,100%,97.5%)"; // #fef2ff
@@ -15,7 +15,7 @@ export default {
 		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-		"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+		"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
 	],
 	theme: {
 		extend: {
@@ -54,9 +54,15 @@ export default {
 			numbers: ["space-mono"],
 		},
 	},
+	safelist: [
+		{
+			pattern:
+				/(text|bg)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-600/,
+		},
+	],
 	darkMode: "class",
 	plugins: [
-		nextui({
+		heroui({
 			defaultTheme: "dark",
 			defaultExtendTheme: "dark",
 			themes: {