Merge branch 'Shelf-nu:main' into main

thundersquared · Jan 19, 2024 · 179246e · 179246e
2 parents e957f1f + 996a76f
commit 179246e
Show file tree

Hide file tree

Showing 65 changed files with 146 additions and 127 deletions.
diff --git a/app/components/assets/actions-dropdown.tsx b/app/components/assets/actions-dropdown.tsx
@@ -181,7 +181,7 @@ const ConditionalActionsDropdown = ({ asset }: Props) => {
       {/* overlay on mobile */}
       <div
         className={tw(
-          "fixed right-0 top-0 z-50 h-screen w-screen cursor-pointer bg-[#344054]/50 transition duration-300 ease-in-out md:hidden",
+          "size-screen fixed right-0 top-0 z-50 cursor-pointer bg-[#344054]/50 transition duration-300 ease-in-out md:hidden",
           open ? "visible" : "invisible opacity-0"
         )}
       ></div>

diff --git a/app/components/assets/custom-fields-inputs.tsx b/app/components/assets/custom-fields-inputs.tsx
@@ -112,7 +112,7 @@ export default function AssetCustomFields({
                 ) : (
                   <span>Pick a date</span>
                 )}
-                <CalendarIcon className="ml-3 h-5 w-5" />
+                <CalendarIcon className="ml-3 size-5" />
               </div>
             </Button>
           </PopoverTrigger>

diff --git a/app/components/assets/delete-asset.tsx b/app/components/assets/delete-asset.tsx
@@ -38,7 +38,7 @@ export const DeleteAsset = ({
     <AlertDialogContent>
       <AlertDialogHeader>
         <div className="mx-auto md:m-0">
-          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+          <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
             <TrashIcon />
           </span>
         </div>

diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
@@ -29,8 +29,12 @@ import { Spinner } from "../shared/spinner";
 import { TagsAutocomplete } from "../tag/tags-autocomplete";
 
 export const NewAssetFormSchema = z.object({
-  title: z.string().min(2, "Title is required"),
-  description: z.string(),
+  title: z
+    .string()
+    .min(2, "Title is required")
+    .transform((val) => val.trim()), // We trim to avoid white spaces at start and end
+
+  description: z.string().transform((val) => val.trim()),
   category: z.string(),
   newLocationId: z.string().optional(),
   /** This holds the value of the current location. We need it for comparison reasons on the server.

diff --git a/app/components/assets/notes/delete-note.tsx b/app/components/assets/notes/delete-note.tsx
@@ -34,7 +34,7 @@ export const DeleteNote = ({ noteId }: { noteId: string }) => {
 
       <AlertDialogContent>
         <AlertDialogHeader>
-          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+          <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
             <TrashIcon />
           </span>
           <AlertDialogTitle>Delete note</AlertDialogTitle>

diff --git a/app/components/category/delete-category.tsx b/app/components/category/delete-category.tsx
@@ -39,7 +39,7 @@ export const DeleteCategory = ({
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+          <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
             <TrashIcon />
           </span>
           <AlertDialogTitle>Delete {category.name}</AlertDialogTitle>

diff --git a/app/components/dashboard/assets-by-category-chart.tsx b/app/components/dashboard/assets-by-category-chart.tsx
@@ -51,10 +51,10 @@ export default function AssetsByCategoryChart() {
       <div className="h-full p-8">
         {assetsByCategory.length > 0 ? (
           <div className="flex flex-col items-center gap-4 lg:flex-row lg:justify-between">
-            <ClientOnly fallback={<FallbackLoading className="h-80 w-80" />}>
+            <ClientOnly fallback={<FallbackLoading className="size-80" />}>
               {() => (
                 <DonutChart
-                  className="mt-6 h-[240px] w-[240px]  2xl:h-[320px] 2xl:w-[320px]"
+                  className="mt-6 size-[240px] 2xl:size-[320px]"
                   data={assetsByCategory}
                   category="assets"
                   index="category"

diff --git a/app/components/dashboard/assets-by-status-chart.tsx b/app/components/dashboard/assets-by-status-chart.tsx
@@ -35,10 +35,10 @@ export default function AssetsByStatusChart() {
       <div className="h-full p-8">
         {chartData?.length > 0 ? (
           <div className="flex flex-col items-center gap-4 lg:flex-row lg:justify-between">
-            <ClientOnly fallback={<FallbackLoading className="h-80 w-80" />}>
+            <ClientOnly fallback={<FallbackLoading className="size-80" />}>
               {() => (
                 <DonutChart
-                  className="mt-6 h-[240px] w-[240px] 2xl:h-[320px] 2xl:w-[320px]"
+                  className="mt-6 size-[240px] 2xl:size-[320px]"
                   data={chartData}
                   category="assets"
                   index="status"

diff --git a/app/components/dashboard/custodians.tsx b/app/components/dashboard/custodians.tsx
@@ -78,7 +78,7 @@ function Row({
                     ? custodian?.user?.profilePicture
                     : "/images/default_pfp.jpg"
                 }
-                className={"h-10 w-10 rounded-[4px]"}
+                className={"size-10 rounded-[4px]"}
                 alt={`${custodian.name}'s profile`}
               />
               <div>

diff --git a/app/components/dashboard/empty-state.tsx b/app/components/dashboard/empty-state.tsx
@@ -1,6 +1,6 @@
 export function EmptyState({ text }: { text: string }) {
   return (
-    <div className="flex h-full min-h-[200px] w-full flex-col items-center justify-center">
+    <div className="flex size-full min-h-[200px] flex-col items-center justify-center">
       <img
         src="/images/empty-state.svg"
         alt="Empty state"

diff --git a/app/components/dashboard/inventory-value-chart.tsx b/app/components/dashboard/inventory-value-chart.tsx
@@ -39,7 +39,7 @@ export default function InventoryValueChart() {
               alignItems="end"
             >
               <ClientOnly
-                fallback={<FallbackLoading className="h-[150px] w-[150px]" />}
+                fallback={<FallbackLoading className="size-[150px]" />}
               >
                 {() => (
                   <ProgressCircle

diff --git a/app/components/dashboard/location-ratio-chart.tsx b/app/components/dashboard/location-ratio-chart.tsx
@@ -39,7 +39,7 @@ export default function LocationRatioChart() {
               alignItems="end"
             >
               <ClientOnly
-                fallback={<FallbackLoading className="h-[150px] w-[150px]" />}
+                fallback={<FallbackLoading className="size-[150px]" />}
               >
                 {() => (
                   <ProgressCircle

diff --git a/app/components/dashboard/most-scanned-assets.tsx b/app/components/dashboard/most-scanned-assets.tsx
@@ -73,15 +73,15 @@ const Row = ({
     <Td className="w-full whitespace-normal p-0 md:p-0">
       <div className="flex justify-between gap-3 px-4 py-3 md:justify-normal md:px-6">
         <div className="flex items-center gap-3">
-          <div className="flex h-12 w-12 shrink-0 items-center justify-center">
+          <div className="flex size-12 shrink-0 items-center justify-center">
             <AssetImage
               asset={{
                 assetId: item.id,
                 mainImage: item.mainImage,
                 mainImageExpiration: item.mainImageExpiration,
                 alt: item.title,
               }}
-              className="h-full w-full rounded-[4px] border object-cover"
+              className="size-full rounded-[4px] border object-cover"
             />
           </div>
           <div className="min-w-[130px]">

diff --git a/app/components/dashboard/newest-assets.tsx b/app/components/dashboard/newest-assets.tsx
@@ -72,15 +72,15 @@ const Row = ({
       <Td className="w-full whitespace-normal p-0 md:p-0">
         <div className="flex justify-between gap-3 px-4 py-3 md:justify-normal md:px-6">
           <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 shrink-0 items-center justify-center">
+            <div className="flex size-12 shrink-0 items-center justify-center">
               <AssetImage
                 asset={{
                   assetId: item.id,
                   mainImage: item.mainImage,
                   mainImageExpiration: item.mainImageExpiration,
                   alt: item.title,
                 }}
-                className="h-full w-full rounded-[4px] border object-cover"
+                className="size-full rounded-[4px] border object-cover"
               />
             </div>
             <div className="min-w-[130px]">

diff --git a/app/components/errors/content.tsx b/app/components/errors/content.tsx
@@ -35,7 +35,7 @@ export const ErrorContent = ({
 const InnerContent = ({ title, message, showReload }: ErrorContentProps) => {
   const location = useLocation();
   return (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex size-full items-center justify-center">
       <div className="flex flex-col items-center text-center">
         <img src="/images/error-icon.svg" alt={title} className="mb-5" />
         <h2 className="mb-2">{title}</h2>

diff --git a/app/components/forms/calender-input.tsx b/app/components/forms/calender-input.tsx
@@ -42,7 +42,7 @@ const Calendar = forwardRef<
           caption_label: "text-sm font-medium",
           nav: "space-x-1 flex items-center",
           nav_button: tw(
-            "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+            "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
           ),
           nav_button_previous: "absolute left-1",
           nav_button_next: "absolute right-1",
@@ -57,7 +57,7 @@ const Calendar = forwardRef<
               ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
               : "[&:has([aria-selected])]:rounded-md"
           ),
-          day: tw("h-8 w-8 p-0 font-normal aria-selected:opacity-100"),
+          day: tw("size-8 p-0 font-normal aria-selected:opacity-100"),
           day_range_start: "day-range-start",
           day_range_end: "day-range-end",
           day_selected:
@@ -71,8 +71,8 @@ const Calendar = forwardRef<
           ...classNames,
         }}
         components={{
-          IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
-          IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+          IconLeft: () => <ChevronLeftIcon className="size-4" />,
+          IconRight: () => <ChevronRightIcon className="size-4" />,
         }}
         {...props}
       />

diff --git a/app/components/forms/color-input.tsx b/app/components/forms/color-input.tsx
@@ -1,23 +1,21 @@
-import type { ChangeEvent } from "react";
-import { atom, useAtom } from "jotai";
-import { useHydrateAtoms } from "jotai/utils";
+import { useState, type ChangeEvent, useEffect } from "react";
 import { getRandomColor } from "~/utils";
 import Input from "./input";
 
 import { Button } from "../shared/button";
 
-const colorAtom = atom("");
-
 export const ColorInput = ({
   colorFromServer,
   ...rest
 }: {
   colorFromServer: string;
   [key: string]: any;
 }) => {
-  /** This is needed so the color can be hydrated. the Initial value is generated in the categories.new loader */
-  useHydrateAtoms([[colorAtom, colorFromServer]]);
-  const [color, setColor] = useAtom(colorAtom);
+  const [color, setColor] = useState<string>("");
+
+  useEffect(() => {
+    setColor(() => `${colorFromServer}`);
+  }, [colorFromServer]);
 
   const handleColorChange = (e: ChangeEvent<HTMLInputElement>) => {
     setColor(() => `${e.target.value}`);

diff --git a/app/components/forms/option-builder.tsx b/app/components/forms/option-builder.tsx
@@ -43,7 +43,7 @@ function OptionBuilder({ options, onAdd, onRemove, disabled }: Props) {
           >
             <span>{op}</span>
             <div className="cursor-pointer" onClick={() => onRemove(i)}>
-              <CrossCircledIcon className="h-6 w-6" />{" "}
+              <CrossCircledIcon className="size-6" />{" "}
             </div>
           </div>
         ))}

diff --git a/app/components/forms/password-input.tsx b/app/components/forms/password-input.tsx
@@ -17,9 +17,9 @@ export default function PasswordInput(props: InputProps) {
         onClick={togglePasswordVisibility}
       >
         {showPassword ? (
-          <EyeOffIcon className="h-full w-full" />
+          <EyeOffIcon className="size-full" />
         ) : (
-          <EyeIcon className="h-full w-full" />
+          <EyeIcon className="size-full" />
         )}
       </span>
     </div>

diff --git a/app/components/forms/select.tsx b/app/components/forms/select.tsx
@@ -83,7 +83,7 @@ const SelectItem = React.forwardRef<
       <div className="flex w-full items-center justify-between">
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 
-        <span className="mr-[10px] flex h-3.5 w-3.5 items-center justify-center text-primary">
+        <span className="mr-[10px] flex size-3.5 items-center justify-center text-primary">
           <SelectPrimitive.ItemIndicator>
             <CheckIcon />
           </SelectPrimitive.ItemIndicator>

diff --git a/app/components/forms/switch.tsx b/app/components/forms/switch.tsx
@@ -20,7 +20,7 @@ const Switch = React.forwardRef<
     >
       <SwitchPrimitives.Thumb
         className={tw(
-          "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block size-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
         )}
       />
     </SwitchPrimitives.Root>

diff --git a/app/components/layout/contextual-sidebar.tsx b/app/components/layout/contextual-sidebar.tsx
@@ -18,11 +18,11 @@ export default function ContextualSidebar() {
     <AnimatePresence>
       {showSidebar && (
         <div className="absolute inset-0">
-          <Link to={prevRoute.pathname} className="block h-full w-full">
+          <Link to={prevRoute.pathname} className="block size-full">
             <div
               // onClick={toggleSidebar}
               className={tw(
-                "fixed right-0 top-0 z-10 h-screen w-screen cursor-pointer bg-gray-25/70 backdrop-blur transition duration-300 ease-in-out",
+                "size-screen fixed right-0 top-0 z-10 cursor-pointer bg-gray-25/70 backdrop-blur transition duration-300 ease-in-out",
                 showSidebar ? "visible" : "invisible opacity-0"
               )}
             ></div>
@@ -35,7 +35,7 @@ export default function ContextualSidebar() {
             transition={{ duration: 0.1 }}
             className="download-qr-sidebar fixed right-0 top-0 z-50 box-border h-screen w-[392px] border border-solid border-gray-200 bg-white p-6"
           >
-            <div className=" h-full w-full bg-white p-6">
+            <div className=" size-full bg-white p-6">
               <Outlet />
             </div>
           </motion.div>

diff --git a/app/components/layout/dialog.tsx b/app/components/layout/dialog.tsx
@@ -24,7 +24,7 @@ export const Dialog = ({
   return open ? (
     <div className="dialog-backdrop" onClick={handleBackdropClose}>
       <dialog className="dialog" open={true}>
-        <div className="scrollable-content relative z-10 h-full w-full overflow-y-auto bg-white p-6 shadow-lg md:max-h-[85vh] md:rounded">
+        <div className="scrollable-content relative z-10 size-full overflow-y-auto bg-white p-6 shadow-lg md:max-h-[85vh] md:rounded">
           <Button
             to={prevRoute}
             variant="link"

diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx
@@ -2,6 +2,7 @@ import { useLoaderData } from "@remix-run/react";
 import Heading from "~/components/shared/heading";
 import SubHeading from "~/components/shared/sub-heading";
 
+import { tw } from "~/utils";
 import type { HeaderData } from "./types";
 import { Breadcrumbs } from "../breadcrumbs";
 
@@ -10,6 +11,8 @@ export default function Header({
   children,
   subHeading,
   hidePageDescription = false,
+  hideBreadcrumbs = false,
+  classNames,
 }: {
   /** Pass a title to replace the default route title set in the loader
    * This is very useful for interactive adjustments of the title
@@ -18,22 +21,32 @@ export default function Header({
   children?: React.ReactNode;
   subHeading?: React.ReactNode;
   hidePageDescription?: boolean;
+  hideBreadcrumbs?: boolean;
+  classNames?: string;
 }) {
   const data = useLoaderData<{
     header?: HeaderData;
   }>();
   const header = data?.header;
 
   return header ? (
-    <header className="-mx-4 bg-white">
+    <header className={tw("-mx-4 bg-white", classNames)}>
       <div>
-        <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:py-3">
-          <Breadcrumbs />
-          <div className="hidden shrink-0 gap-3 md:flex">{children}</div>
-        </div>
-        <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:hidden">
-          <div className="flex shrink-0 gap-3">{children}</div>
-        </div>
+        {!hideBreadcrumbs && (
+          <>
+            <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:py-3">
+              <Breadcrumbs />
+              {children && (
+                <div className="hidden shrink-0 gap-3 md:flex">{children}</div>
+              )}
+            </div>
+            {children && (
+              <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:hidden">
+                <div className="flex shrink-0 gap-3">{children}</div>
+              </div>
+            )}
+          </>
+        )}
         {!hidePageDescription && (
           <div className="border-b border-gray-200 p-4">
             <Heading as="h2" className="break-all text-[20px] font-semibold">

diff --git a/app/components/layout/maintenance-mode.tsx b/app/components/layout/maintenance-mode.tsx
@@ -3,13 +3,13 @@ import { Button } from "../shared/button";
 
 export default function MaintenanceMode() {
   return (
-    <div className="relative h-screen w-screen px-4 py-16 md:p-16">
+    <div className="size-screen relative px-4 py-16 md:p-16">
       <img
         src="/images/bg-overlay1.png"
         alt="background"
-        className="absolute left-0 top-0 -z-10 h-full w-full object-cover"
+        className="absolute left-0 top-0 -z-10 size-full object-cover"
       />
-      <div className="flex h-full w-full items-center justify-center bg-white shadow-xl">
+      <div className="flex size-full items-center justify-center bg-white shadow-xl">
         <div className="max-w-[400px] p-6 text-center">
           <div className="mb-4 inline-flex items-center justify-center rounded-full border-8 border-solid border-primary-50 bg-primary-100 p-2 text-primary">
             <ToolIcon />

diff --git a/app/components/layout/sidebar/organization-select.tsx b/app/components/layout/sidebar/organization-select.tsx
@@ -42,7 +42,7 @@ export const OrganizationSelect = () => {
                     <Image
                       imageId={org.imageId}
                       alt="img"
-                      className={tw("h-6 w-6 rounded-[2px] object-cover")}
+                      className={tw("size-6 rounded-[2px] object-cover")}
                       updatedAt={org.updatedAt}
                     />
                   )}

diff --git a/app/components/layout/sidebar/overlay.tsx b/app/components/layout/sidebar/overlay.tsx
@@ -8,7 +8,7 @@ const Overlay = () => {
     <div
       onClick={toggleMobileNav}
       className={tw(
-        "fixed right-0 top-0 z-10 h-screen w-screen cursor-pointer bg-gray-25/10 backdrop-blur transition duration-300 ease-in-out md:hidden",
+        "size-screen fixed right-0 top-0 z-10 cursor-pointer bg-gray-25/10 backdrop-blur transition duration-300 ease-in-out md:hidden",
         isMobileNavOpen ? "visible" : "invisible opacity-0"
       )}
     ></div>

diff --git a/app/components/list/filters/category/category-checkbox-dropdown.tsx b/app/components/list/filters/category/category-checkbox-dropdown.tsx
@@ -75,7 +75,7 @@ export const CategoryCheckboxDropdown = () => {
         <DropdownMenuTrigger className="inline-flex items-center gap-2 font-normal text-gray-500">
           Categories <ChevronRight className="hidden rotate-90 md:inline" />{" "}
           {items.length > 0 && (
-            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 px-2 py-[2px] text-xs font-medium text-gray-700">
+            <div className="flex size-6 items-center justify-center rounded-full bg-gray-100 px-2 py-[2px] text-xs font-medium text-gray-700">
               {items.length}
             </div>
           )}