From c75db8f9b49038a5f1a090a197dd106b87642354 Mon Sep 17 00:00:00 2001 From: Gobot1234 Date: Sat, 20 Apr 2024 23:06:56 +0100 Subject: [PATCH] feat: pad out icons folder with even more reusable icons also hide the later parts of module sign in reaons --- apps/forge/src/components/icons/Locations.tsx | 46 ++++++++++++++++ .../src/components/icons/SignInReason.tsx | 24 +++++++++ apps/forge/src/components/icons/Team.tsx | 53 +++++++++++++++++++ apps/forge/src/components/icons/index.tsx | 39 -------------- .../actions/SignInReasonInput/index.tsx | 37 +++---------- .../actions/ToolSelectionInput/index.tsx | 2 +- .../dashboard/components/SignInsChart.tsx | 2 +- .../SignedInUserCard/SignInReasonDisplay.tsx | 18 +++++-- .../TeamManagementSection.tsx | 18 +++---- .../components/SignedInUserCard/index.tsx | 8 +-- .../signin/dashboard/components/TeamIcon.tsx | 2 +- .../_authenticated/_reponly/users/$id.tsx | 2 +- 12 files changed, 163 insertions(+), 88 deletions(-) create mode 100644 apps/forge/src/components/icons/Locations.tsx create mode 100644 apps/forge/src/components/icons/SignInReason.tsx create mode 100644 apps/forge/src/components/icons/Team.tsx diff --git a/apps/forge/src/components/icons/Locations.tsx b/apps/forge/src/components/icons/Locations.tsx new file mode 100644 index 0000000..4145324 --- /dev/null +++ b/apps/forge/src/components/icons/Locations.tsx @@ -0,0 +1,46 @@ +import { Location as LocationType } from "@ignis/types/training"; +import { Heart, ParkingMeter, Wrench } from "lucide-react"; +import React from "react"; +import { IconWithTooltip } from "."; + +interface IconProps { + className?: string; +} + +export const Mainspace: React.FC = (props) => ( + +); + +export const Heartspace: React.FC = (props) => ( + +); + +export const GeorgePorter: React.FC = (props) => ( + +); + +export const Location: React.FC | Lowercase }> = ({ + location, + className, +}) => { + switch (location.toLowerCase() as Lowercase) { + case "mainspace": + return ; + case "heartspace": + return ; + case "george_porter": + return ; + default: + throw new Error("unreachable"); + } +}; + +export const MainspaceIcon = Mainspace; +export const HeartspaceIcon = Heartspace; +export const GeorgePorterIcon = GeorgePorter; +export const LocationIcon = Location; diff --git a/apps/forge/src/components/icons/SignInReason.tsx b/apps/forge/src/components/icons/SignInReason.tsx new file mode 100644 index 0000000..51f14a2 --- /dev/null +++ b/apps/forge/src/components/icons/SignInReason.tsx @@ -0,0 +1,24 @@ +import { ReasonCategory } from "@ignis/types/sign_in"; +import { Bot, Crown, GraduationCap, LucideIcon, PartyPopper, Rocket, UserRound } from "lucide-react"; + +export const Category = ({ category, ...props }: { category: ReasonCategory } & React.ComponentProps) => { + switch (category) { + case "UNIVERSITY_MODULE": + return ; + case "PERSONAL_PROJECT": + return ; + case "SOCIETY": + // ROBOTEERS PLUG WOOO + return ; + case "REP_SIGN_IN": + return ; + case "CO_CURRICULAR_GROUP": + return ; + case "EVENT": + return ; + default: + throw new Error("unreachable"); + } +}; + +export const CategoryIcon = Category; diff --git a/apps/forge/src/components/icons/Team.tsx b/apps/forge/src/components/icons/Team.tsx new file mode 100644 index 0000000..22f3d27 --- /dev/null +++ b/apps/forge/src/components/icons/Team.tsx @@ -0,0 +1,53 @@ +import { removeSuffix } from "@/lib/utils"; +import { + BarChart4, + Box, + CalendarIcon, + Cog, + Computer, + Construction, + Diamond, + Hammer, + HardHat, + LucideIcon, + Megaphone, + Puzzle, + Send, + Users, +} from "lucide-react"; +import * as React from "react"; + +export default function Team({ team, ...props }: { team: string } & React.ComponentProps) { + switch (removeSuffix(team, "Team").trim()) { + case "IT": + return ; + case "3DP": + return ; + case "Hardware": + return ; + case "Publicity": + return ; + case "Events": + return ; + case "Relations": + return ; + case "Operations": + return ; + case "Recruitment & Development": + return ; // stonks? + case "Health & Safety": + return ; + case "Inclusions": + return ; + case "Unsorted Reps": + return ; + case "Future Reps": + return ; + case "Staff": + return ; + default: + throw new Error("Sorry your team has been forgotten about... cry harder"); + } +} + +export const TeamIcon = Team; diff --git a/apps/forge/src/components/icons/index.tsx b/apps/forge/src/components/icons/index.tsx index e33126e..0d3429f 100644 --- a/apps/forge/src/components/icons/index.tsx +++ b/apps/forge/src/components/icons/index.tsx @@ -1,13 +1,7 @@ import { cn } from "@/lib/utils"; -import { Location } from "@ignis/types/training"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ui/components/ui/tooltip"; -import { Heart, ParkingMeter, Wrench } from "lucide-react"; import React from "react"; -interface IconProps { - className?: string; -} - interface IconWithTooltip { className?: string; IconComponent: React.ComponentType; @@ -29,36 +23,3 @@ export const IconWithTooltip: React.FC = ({ className, IconComp ); }; - -export const MainspaceIcon: React.FC = (props) => ( - -); - -export const HeartspaceIcon: React.FC = (props) => ( - -); - -export const GeorgePorterIcon: React.FC = (props) => ( - -); - -export const LocationIcon: React.FC | Lowercase }> = ({ - location, - className, -}) => { - switch (location.toLowerCase() as Lowercase) { - case "mainspace": - return ; - case "heartspace": - return ; - case "george_porter": - return ; - default: - throw new Error("unreachable"); - } -}; diff --git a/apps/forge/src/components/signin/actions/SignInReasonInput/index.tsx b/apps/forge/src/components/signin/actions/SignInReasonInput/index.tsx index ed0af07..f2f604c 100644 --- a/apps/forge/src/components/signin/actions/SignInReasonInput/index.tsx +++ b/apps/forge/src/components/signin/actions/SignInReasonInput/index.tsx @@ -1,18 +1,17 @@ +import { ErrorDisplayProps, errorDisplay } from "@/components/errors/ErrorDisplay"; +import { Category } from "@/components/icons/SignInReason"; import { FlowStepComponent } from "@/components/signin/actions/SignInManager/types"; import { signinActions } from "@/redux/signin.slice.ts"; import { AppDispatch, AppRootState } from "@/redux/store"; import { useSignInReasons } from "@/services/signin/signInReasonService"; -import type { Reason, ReasonCategory } from "@ignis/types/sign_in"; +import type { Reason } from "@ignis/types/sign_in"; import { Button } from "@ui/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ui/components/ui/card"; import { Input } from "@ui/components/ui/input"; import { Loader } from "@ui/components/ui/loader"; import Fuse from "fuse.js"; -import { Bot, Crown, GraduationCap, HelpCircle, PartyPopper, Rocket, UserRound } from "lucide-react"; -import memoizeOne from "memoize-one"; import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { errorDisplay, ErrorDisplayProps } from "@/components/errors/ErrorDisplay"; const SignInReasonInput: FlowStepComponent = ({ onSecondary, onPrimary }) => { const [inputValue, setInputValue] = useState(""); @@ -42,7 +41,7 @@ const SignInReasonInput: FlowStepComponent = ({ onSecondary, onPrimary }) => { }), ); } - }, [hasSessionError, signInReasons]); + }, [hasSessionError, signInReasons, selectedReason]); const handleSelectReason = (reason: Reason): void => { setInputValue(""); // Clear input value after selecting a reason @@ -91,26 +90,6 @@ const SignInReasonInput: FlowStepComponent = ({ onSecondary, onPrimary }) => { } }; - const iconForCategory = memoizeOne((category: ReasonCategory) => { - switch (category) { - case "UNIVERSITY_MODULE": - return ; - case "PERSONAL_PROJECT": - return ; - case "SOCIETY": - // ROBOTEERS PLUG WOOO - return ; - case "REP_SIGN_IN": - return ; - case "CO_CURRICULAR_GROUP": - return ; - case "EVENT": - return ; - default: - return ; - } - }); - const filteredReasons = inputValue ? fuse.search(inputValue, { limit: 20 }) : []; useEffect(() => { @@ -169,7 +148,7 @@ const SignInReasonInput: FlowStepComponent = ({ onSecondary, onPrimary }) => { className={`cursor-pointer p-2 ${index === highlightedIndex ? "bg-accent" : "hover:bg-accent"}`} >
- {iconForCategory(result.item.category)} + {} {result.item.name}
@@ -199,9 +178,9 @@ const SignInReasonInput: FlowStepComponent = ({ onSecondary, onPrimary }) => { {selectedReason && (

- Selected Reason:{" "} - - {iconForCategory(selectedReason.category)} {selectedReason.name} + Selected Reason: + + {} {selectedReason.name}

diff --git a/apps/forge/src/components/signin/actions/ToolSelectionInput/index.tsx b/apps/forge/src/components/signin/actions/ToolSelectionInput/index.tsx index ca55650..cb5a04b 100644 --- a/apps/forge/src/components/signin/actions/ToolSelectionInput/index.tsx +++ b/apps/forge/src/components/signin/actions/ToolSelectionInput/index.tsx @@ -179,7 +179,7 @@ const ToolSelectionInput: FlowStepComponent = ({ onSecondary, onPrimary }) => { title="Un-acquired Training" trainings={trainingMap.DISABLED} toolTipContent="Tools the user aren't trained to use" - />{" "} + /> diff --git a/apps/forge/src/components/signin/dashboard/components/SignInsChart.tsx b/apps/forge/src/components/signin/dashboard/components/SignInsChart.tsx index 051a41e..cc00e39 100644 --- a/apps/forge/src/components/signin/dashboard/components/SignInsChart.tsx +++ b/apps/forge/src/components/signin/dashboard/components/SignInsChart.tsx @@ -1,4 +1,4 @@ -import { LocationIcon } from "@/components/icons"; +import { LocationIcon } from "@/components/icons/Locations"; import { SignInStat } from "@ignis/types/users"; import { Datum, ResponsiveCalendar } from "@nivo/calendar"; import { useNavigate } from "@tanstack/react-router"; diff --git a/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/SignInReasonDisplay.tsx b/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/SignInReasonDisplay.tsx index ed5d36a..4b03158 100644 --- a/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/SignInReasonDisplay.tsx +++ b/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/SignInReasonDisplay.tsx @@ -1,5 +1,7 @@ +import { Category } from "@/components/icons/SignInReason"; import { PartialReason } from "@ignis/types/sign_in.ts"; import { Badge } from "@ui/components/ui/badge.tsx"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ui/components/ui/tooltip"; interface SignInReasonDisplayProps { tools: string[]; @@ -15,9 +17,19 @@ export const SignInReasonDisplay: React.FC = ({ tools, Sign In Reason
- - {reason.name} - + + + + +
+ {} + {reason.category === "UNIVERSITY_MODULE" ? reason.name.split(" ")[0] : reason.name} +
+ + + {reason.name} + +
diff --git a/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/TeamManagementSection.tsx b/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/TeamManagementSection.tsx index 5653d1e..edba8d5 100644 --- a/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/TeamManagementSection.tsx +++ b/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/TeamManagementSection.tsx @@ -1,10 +1,10 @@ -import * as React from "react"; -import { useQuery } from "@tanstack/react-query"; +import TeamIcon from "@/components/icons/Team"; import { ManageUserWidgetProps } from "@/components/signin/dashboard/components/SignedInUserCard/ManageUserWidget.tsx"; import { getTeams } from "@/services/users/getTeams.ts"; -import MultiSelectFormField from "@ui/components/ui/multi-select.tsx"; -import { Loader } from "@ui/components/ui/loader.tsx"; -import { toast } from "sonner"; +import promoteToRep from "@/services/users/promoteToRep.ts"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { ShortTeam } from "@ignis/types/users.ts"; +import { useQuery } from "@tanstack/react-query"; import { Button } from "@ui/components/ui/button.tsx"; import { Form, @@ -15,12 +15,12 @@ import { FormLabel, FormMessage, } from "@ui/components/ui/form.tsx"; +import { Loader } from "@ui/components/ui/loader.tsx"; +import MultiSelectFormField from "@ui/components/ui/multi-select.tsx"; +import * as React from "react"; import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; +import { toast } from "sonner"; import { z } from "zod"; -import { ShortTeam } from "@ignis/types/users.ts"; -import TeamIcon from "@/components/signin/dashboard/components/TeamIcon.tsx"; -import promoteToRep from "@/services/users/promoteToRep.ts"; const FormSchema = z.object({ teams: z.array(z.string()).min(1).nonempty("Please select at least one team."), diff --git a/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/index.tsx b/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/index.tsx index f6588e8..1c62710 100644 --- a/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/index.tsx +++ b/apps/forge/src/components/signin/dashboard/components/SignedInUserCard/index.tsx @@ -1,7 +1,10 @@ import { UserAvatar } from "@/components/avatar"; +import { TeamIcon } from "@/components/icons/Team"; +import { AdminDisplay } from "@/components/signin/dashboard/components/SignedInUserCard/AdminDisplay.tsx"; import { ManageUserWidget } from "@/components/signin/dashboard/components/SignedInUserCard/ManageUserWidget.tsx"; import { SignInReasonDisplay } from "@/components/signin/dashboard/components/SignedInUserCard/SignInReasonDisplay.tsx"; -import TeamIcon from "@/components/signin/dashboard/components/TeamIcon.tsx"; +import { TimeDisplay } from "@/components/signin/dashboard/components/SignedInUserCard/TimeDisplay.tsx"; +import { iForgeEpoch } from "@/config/constants.ts"; import { REP_OFF_SHIFT, REP_ON_SHIFT } from "@/lib/constants.ts"; import { AppRootState } from "@/redux/store.ts"; import { PostSignOut, PostSignOutProps } from "@/services/signin/signInService.ts"; @@ -18,9 +21,6 @@ import { LogOut, Plus } from "lucide-react"; import * as React from "react"; import { useSelector } from "react-redux"; import { toast } from "sonner"; -import { AdminDisplay } from "@/components/signin/dashboard/components/SignedInUserCard/AdminDisplay.tsx"; -import { TimeDisplay } from "@/components/signin/dashboard/components/SignedInUserCard/TimeDisplay.tsx"; -import { iForgeEpoch } from "@/config/constants.ts"; interface SignInUserCardProps { user: PartialUserWithTeams; diff --git a/apps/forge/src/components/signin/dashboard/components/TeamIcon.tsx b/apps/forge/src/components/signin/dashboard/components/TeamIcon.tsx index 6ed3998..87e54a1 100644 --- a/apps/forge/src/components/signin/dashboard/components/TeamIcon.tsx +++ b/apps/forge/src/components/signin/dashboard/components/TeamIcon.tsx @@ -46,6 +46,6 @@ export default function TeamIcon({ team, ...props }: { team: string } & React.Co case "Staff": return ; default: - throw new Error("Sorry your team has been forgotten... about cry harder"); + throw new Error("Sorry your team has been forgotten about... cry harder"); } } diff --git a/apps/forge/src/routes/_authenticated/_reponly/users/$id.tsx b/apps/forge/src/routes/_authenticated/_reponly/users/$id.tsx index 7abab73..f7c3d50 100644 --- a/apps/forge/src/routes/_authenticated/_reponly/users/$id.tsx +++ b/apps/forge/src/routes/_authenticated/_reponly/users/$id.tsx @@ -1,5 +1,5 @@ import { UserAvatar } from "@/components/avatar"; -import { LocationIcon } from "@/components/icons"; +import { LocationIcon } from "@/components/icons/Locations"; import SignInsChart from "@/components/signin/dashboard/components/SignInsChart.tsx"; import Title from "@/components/title"; import { extractError } from "@/lib/utils";