fix issue with missing DialogTitle/DialogDescription, fix issue with …

…hot reloads
AmruthPillai · Jan 19, 2025 · 460a407 · 460a407
1 parent 18cf814
commit 460a407
Show file tree

Hide file tree

Showing 27 changed files with 136 additions and 277 deletions.
diff --git a/apps/artboard/src/components/brand-icon.tsx b/apps/artboard/src/components/brand-icon.tsx
@@ -1,17 +1,24 @@
+import { forwardRef } from "react";
+
 type BrandIconProps = {
   slug: string;
 };
 
-export const BrandIcon = ({ slug }: BrandIconProps) => {
+export const BrandIcon = forwardRef<HTMLImageElement, BrandIconProps>(({ slug }, ref) => {
   if (slug === "linkedin") {
     return (
       <img
-        alt="linkedin"
+        ref={ref}
+        alt="LinkedIn"
         className="size-4"
         src={`${window.location.origin}/support-logos/linkedin.svg`}
       />
     );
   }
 
-  return <img alt={slug} className="size-4" src={`https://cdn.simpleicons.org/${slug}`} />;
-};
+  return (
+    <img ref={ref} alt={slug} className="size-4" src={`https://cdn.simpleicons.org/${slug}`} />
+  );
+});
+
+BrandIcon.displayName = "BrandIcon";
diff --git a/apps/client/src/components/brand-icon.tsx b/apps/client/src/components/brand-icon.tsx
@@ -1,19 +1,38 @@
-import { cn } from "@reactive-resume/utils";
+import { forwardRef, useEffect } from "react";
+import { useDebounceValue } from "usehooks-ts";
 
 type BrandIconProps = {
   slug: string;
 };
 
-export const BrandIcon = ({ slug }: BrandIconProps) => {
-  if (slug === "linkedin") {
+export const BrandIcon = forwardRef<HTMLImageElement, BrandIconProps>(({ slug }, ref) => {
+  const [debouncedSlug, setValue] = useDebounceValue(slug, 600);
+
+  useEffect(() => {
+    setValue(slug);
+  }, [slug]);
+
+  if (!slug) return null;
+
+  if (debouncedSlug === "linkedin") {
     return (
       <img
+        ref={ref}
         alt="LinkedIn"
         className="size-5"
         src={`${window.location.origin}/support-logos/linkedin.svg`}
       />
     );
   }
 
-  return <i className={cn("si si--color text-[1.25rem]", `si-${slug}`)} />;
-};
+  return (
+    <img
+      ref={ref}
+      alt={debouncedSlug}
+      className="size-5"
+      src={`https://cdn.simpleicons.org/${debouncedSlug}`}
+    />
+  );
+});
+
+BrandIcon.displayName = "BrandIcon";
diff --git a/apps/client/src/pages/builder/layout.tsx b/apps/client/src/pages/builder/layout.tsx
@@ -1,5 +1,15 @@
 import { useBreakpoint } from "@reactive-resume/hooks";
-import { Panel, PanelGroup, PanelResizeHandle, Sheet, SheetContent } from "@reactive-resume/ui";
+import {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  VisuallyHidden,
+} from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { Outlet } from "react-router";
 
@@ -78,6 +88,13 @@ export const BuilderLayout = () => {
   return (
     <div className="relative">
       <Sheet open={sheet.left.open} onOpenChange={sheet.left.setOpen}>
+        <VisuallyHidden>
+          <SheetHeader>
+            <SheetTitle />
+            <SheetDescription />
+          </SheetHeader>
+        </VisuallyHidden>
+
         <SheetContent
           side="left"
           showClose={false}
@@ -97,6 +114,13 @@ export const BuilderLayout = () => {
           className="top-16 p-0 sm:max-w-xl"
           onOpenAutoFocus={onOpenAutoFocus}
         >
+          <VisuallyHidden>
+            <SheetHeader>
+              <SheetTitle />
+              <SheetDescription />
+            </SheetHeader>
+          </VisuallyHidden>
+
           <RightSidebar />
         </SheetContent>
       </Sheet>

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/basics.tsx b/apps/client/src/pages/builder/sidebars/left/sections/basics.tsx
@@ -6,7 +6,7 @@ import { useResumeStore } from "@/client/stores/resume";
 
 import { CustomFieldsSection } from "./custom/section";
 import { PictureSection } from "./picture/section";
-import { getSectionIcon } from "./shared/section-icon";
+import { SectionIcon } from "./shared/section-icon";
 import { URLInput } from "./shared/url-input";
 
 export const BasicsSection = () => {
@@ -17,7 +17,7 @@ export const BasicsSection = () => {
     <section id="basics" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("basics")}
+          <SectionIcon id="basics" size={18} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Basics`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
@@ -25,7 +25,7 @@ import get from "lodash.get";
 import { useDialog } from "@/client/stores/dialog";
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "./section-icon";
+import { SectionIcon } from "./section-icon";
 import { SectionListItem } from "./section-list-item";
 import { SectionOptions } from "./section-options";
 
@@ -98,8 +98,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
     >
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon(id)}
-
+          <SectionIcon id={id} size={18} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
         </div>
 

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx
@@ -23,7 +23,7 @@ import get from "lodash.get";
 
 import { useResumeStore } from "@/client/stores/resume";
 
-export const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
+const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
   switch (id) {
     // Left Sidebar
     case "basics": {
@@ -75,21 +75,22 @@ export const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
   }
 };
 
-type SectionIconProps = ButtonProps & {
+type SectionIconProps = Omit<ButtonProps, "size"> & {
   id: SectionKey;
   name?: string;
+  size?: number;
   icon?: React.ReactNode;
 };
 
-export const SectionIcon = ({ id, name, icon, ...props }: SectionIconProps) => {
+export const SectionIcon = ({ id, name, icon, size = 14, ...props }: SectionIconProps) => {
   const section = useResumeStore((state) =>
     get(state.resume.data.sections, id, defaultSection),
   ) as SectionWithItem;
 
   return (
     <Tooltip side="right" content={name ?? section.name}>
       <Button size="icon" variant="ghost" className="size-8 rounded-full" {...props}>
-        {icon ?? getSectionIcon(id, { size: 14 })}
+        {icon ?? getSectionIcon(id, { size })}
       </Button>
     </Tooltip>
   );

diff --git a/apps/client/src/pages/builder/sidebars/left/sections/summary.tsx b/apps/client/src/pages/builder/sidebars/left/sections/summary.tsx
@@ -5,7 +5,7 @@ import { cn } from "@reactive-resume/utils";
 import { AiActions } from "@/client/components/ai-actions";
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "./shared/section-icon";
+import { SectionIcon } from "./shared/section-icon";
 import { SectionOptions } from "./shared/section-options";
 
 export const SummarySection = () => {
@@ -19,7 +19,7 @@ export const SummarySection = () => {
     <section id="summary" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("summary")}
+          <SectionIcon id="summary" size={18} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
         </div>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/css.tsx b/apps/client/src/pages/builder/sidebars/right/sections/css.tsx
@@ -7,7 +7,7 @@ import CodeEditor from "react-simple-code-editor";
 
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 export const CssSection = () => {
   const { isDarkMode } = useTheme();
@@ -24,7 +24,7 @@ export const CssSection = () => {
 
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("css")}
+          <SectionIcon id="css" size={18} name={t`Custom CSS`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Custom CSS`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/export.tsx b/apps/client/src/pages/builder/sidebars/right/sections/export.tsx
@@ -7,7 +7,7 @@ import { saveAs } from "file-saver";
 import { usePrintResume } from "@/client/services/resume/print";
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 const onJsonExport = () => {
   const { resume } = useResumeStore.getState();
@@ -36,7 +36,7 @@ export const ExportSection = () => {
     <section id="export" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("export")}
+          <SectionIcon id="export" size={18} name={t`Export`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Export`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/information.tsx b/apps/client/src/pages/builder/sidebars/right/sections/information.tsx
@@ -10,7 +10,7 @@ import {
 } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 const DonateCard = () => (
   <Card className="space-y-4 bg-info text-info-foreground">
@@ -113,7 +113,7 @@ export const InformationSection = () => {
     <section id="information" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("information")}
+          <SectionIcon id="information" size={18} name={t`Information`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Information`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/layout.tsx b/apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
@@ -27,7 +27,7 @@ import { useState } from "react";
 
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 type ColumnProps = {
   id: string;
@@ -194,7 +194,7 @@ export const LayoutSection = () => {
     <section id="layout" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("layout")}
+          <SectionIcon id="layout" size={18} name={t`Layout`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Layout`}</h2>
         </div>
 

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/notes.tsx b/apps/client/src/pages/builder/sidebars/right/sections/notes.tsx
@@ -3,7 +3,7 @@ import { RichInput } from "@reactive-resume/ui";
 
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 export const NotesSection = () => {
   const setValue = useResumeStore((state) => state.setValue);
@@ -13,7 +13,7 @@ export const NotesSection = () => {
     <section id="notes" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("notes")}
+          <SectionIcon id="notes" size={18} name={t`Notes`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Notes`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/page.tsx b/apps/client/src/pages/builder/sidebars/right/sections/page.tsx
@@ -12,7 +12,7 @@ import {
 
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 export const PageSection = () => {
   const setValue = useResumeStore((state) => state.setValue);
@@ -22,7 +22,7 @@ export const PageSection = () => {
     <section id="page" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("page")}
+          <SectionIcon id="page" size={18} name={t`Page`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Page`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx b/apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
@@ -7,7 +7,7 @@ import { useToast } from "@/client/hooks/use-toast";
 import { useUser } from "@/client/services/user";
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 export const SharingSection = () => {
   const { user } = useUser();
@@ -35,7 +35,7 @@ export const SharingSection = () => {
     <section id="sharing" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("sharing")}
+          <SectionIcon id="sharing" size={18} name={t`Sharing`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Sharing`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx b/apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
@@ -7,7 +7,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useResumeStatistics } from "@/client/services/resume";
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 export const StatisticsSection = () => {
   const id = useResumeStore((state) => state.resume.id);
@@ -19,7 +19,7 @@ export const StatisticsSection = () => {
     <section id="statistics" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("statistics")}
+          <SectionIcon id="statistics" size={18} name={t`Statistics`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Statistics`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/template.tsx b/apps/client/src/pages/builder/sidebars/right/sections/template.tsx
@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 export const TemplateSection = () => {
   const setValue = useResumeStore((state) => state.setValue);
@@ -15,7 +15,7 @@ export const TemplateSection = () => {
     <section id="template" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("template")}
+          <SectionIcon id="template" size={18} name={t`Template`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Template`}</h2>
         </div>
       </header>

diff --git a/apps/client/src/pages/builder/sidebars/right/sections/theme.tsx b/apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
@@ -6,7 +6,7 @@ import { HexColorPicker } from "react-colorful";
 import { colors } from "@/client/constants/colors";
 import { useResumeStore } from "@/client/stores/resume";
 
-import { getSectionIcon } from "../shared/section-icon";
+import { SectionIcon } from "../shared/section-icon";
 
 export const ThemeSection = () => {
   const setValue = useResumeStore((state) => state.setValue);
@@ -16,7 +16,7 @@ export const ThemeSection = () => {
     <section id="theme" className="grid gap-y-6">
       <header className="flex items-center justify-between">
         <div className="flex items-center gap-x-4">
-          {getSectionIcon("theme")}
+          <SectionIcon id="theme" size={18} name={t`Theme`} />
           <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Theme`}</h2>
         </div>
       </header>