Merge pull request #746 from Shelf-nu/hono-server

Hono server

.env.example

@@ -13,6 +13,7 @@ SUPABASE_ANON_PUBLIC="{ANON_PUBLIC}"
 SUPABASE_SERVICE_ROLE="{SERVICE_ROLE}"
 SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"
 SERVER_URL="http://localhost:3000"
+APP_NAME="Shelf"
 
 
 # Set this to false to disable requirement of subscription for premium features. This will make premium features available for all users
@@ -36,6 +37,6 @@ INVITE_TOKEN_SECRET="secret-test-invite"
 GEOCODE_API_KEY="geocode-api-key"
 
 # Used for Sentry error logging
-SENTRY_DSN="sentry-dsn"
 SENTRY_ORG="sentry-org"
-SENTRY_PROJECT="sentry-project"
+SENTRY_PROJECT="sentry-project"
+SENTRY_DSN="sentry-dsn"

.github/workflows/ghcr_cleanup.yml

@@ -11,7 +11,7 @@ permissions:
   packages: write
 
 env:
-  PACKAGE_NAME: shelf
+  PACKAGE_NAME: shelf.nu
   PER_PAGE: 2000
 
 jobs:

app/components/assets/asset-image.tsx

@@ -24,7 +24,7 @@ export const AssetImage = ({
   const url =
     mainImage ||
     fetcher?.data?.asset?.mainImage ||
-    "/images/asset-placeholder.jpg";
+    "/static/images/asset-placeholder.jpg";
 
   useEffect(() => {
     if (mainImage && mainImageExpiration) {

app/components/assets/custom-fields-inputs.tsx

@@ -23,7 +23,7 @@ import {
   SelectValue,
   SelectItem,
 } from "../forms";
-import { Calendar } from "../forms/calender-input";
+import { Calendar } from "../forms/calendar-input";
 import FormRow from "../forms/form-row";
 import Input from "../forms/input";
 import { Switch } from "../forms/switch";

app/components/assets/form.tsx

@@ -252,6 +252,7 @@ export const AssetForm = ({
             label={zo.fields.description()}
             name={zo.fields.description()}
             defaultValue={description || ""}
+            hideLabel
             placeholder="Add a description for your asset."
             disabled={disabled}
             data-test-id="assetDescription"

app/components/assets/import-content.tsx

@@ -16,6 +16,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "../shared/modal";
+import { WarningBox } from "../shared/warning-box";
 
 export const ImportBackup = () => (
   <>
@@ -44,6 +45,13 @@ export const ImportContent = () => (
       >
         download our CSV template.
       </Button>{" "}
+      <WarningBox className="my-4">
+        <>
+          <strong>IMPORTANT</strong>: Do not use data exported from asset backup
+          to import assets. You must use the template provided above or you will
+          get corrupted data.
+        </>
+      </WarningBox>
       Some important details about how this works:
     </p>
     <br />

app/components/assets/notes/notes.tsx

@@ -50,7 +50,7 @@ export const Notes = () => {
         <div className="flex h-[500px] items-center  justify-center">
           <div className="flex flex-col items-center justify-center p-[16px] text-center md:p-[50px]">
             <img
-              src="/images/no-notes.svg"
+              src="/static/images/no-notes.svg"
               alt="Graphic for no notes"
               className="mb-6 w-[172px]"
             />

app/components/booking/delete-booking.tsx

@@ -1,5 +1,5 @@
 import type { Booking } from "@prisma/client";
-import { Form } from "@remix-run/react";
+import { Form, useNavigation } from "@remix-run/react";
 import { Button } from "~/components/shared/button";
 
 import {
@@ -12,6 +12,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "~/components/shared/modal";
+import { isFormProcessing, tw } from "~/utils";
 import { TrashIcon } from "../icons";
 
 export const DeleteBooking = ({
@@ -20,51 +21,61 @@ export const DeleteBooking = ({
   booking: {
     name: Booking["name"];
   };
-}) => (
-  <AlertDialog>
-    <AlertDialogTrigger asChild>
-      <Button
-        variant="link"
-        data-test-id="deleteBookingButton"
-        className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700"
-        width="full"
-      >
-        Delete
-      </Button>
-    </AlertDialogTrigger>
+}) => {
+  const navigation = useNavigation();
+  const disabled = isFormProcessing(navigation.state);
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          variant="link"
+          data-test-id="deleteBookingButton"
+          className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700"
+          width="full"
+        >
+          Delete
+        </Button>
+      </AlertDialogTrigger>
 
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <div className="mx-auto md:m-0">
-          <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
-            <TrashIcon />
-          </span>
-        </div>
-        <AlertDialogTitle>Delete {booking.name}</AlertDialogTitle>
-        <AlertDialogDescription>
-          Are you sure you want to delete this Booking? This action cannot be
-          undone. All assets associated with this booking will be released.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <div className="flex justify-center gap-2">
-          <AlertDialogCancel asChild>
-            <Button variant="secondary">Cancel</Button>
-          </AlertDialogCancel>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <div className="mx-auto md:m-0">
+            <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+              <TrashIcon />
+            </span>
+          </div>
+          <AlertDialogTitle>Delete {booking.name}</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete this Booking? This action cannot be
+            undone. All assets associated with this booking will be released.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <div className="flex justify-center gap-2">
+            <AlertDialogCancel asChild>
+              <Button variant="secondary" disabled={disabled}>
+                Cancel
+              </Button>
+            </AlertDialogCancel>
 
-          <Form method="delete">
-            <Button
-              className="border-error-600 bg-error-600 hover:border-error-800 hover:bg-error-800"
-              type="submit"
-              data-test-id="confirmDeleteBookingButton"
-              name="intent"
-              value="delete"
-            >
-              Delete
-            </Button>
-          </Form>
-        </div>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
+            <Form method="delete">
+              <Button
+                className={tw(
+                  "border-error-600 bg-error-600 hover:border-error-800 hover:bg-error-800",
+                  disabled ? "pointer-events-none opacity-50" : ""
+                )}
+                type="submit"
+                data-test-id="confirmDeleteBookingButton"
+                name="intent"
+                value="delete"
+                disabled={disabled}
+              >
+                Delete
+              </Button>
+            </Form>
+          </div>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

app/components/custody/custodian-select.tsx

@@ -88,7 +88,7 @@ export default function CustodianSelect(
                         <img
                           src={
                             member.user.profilePicture ||
-                            "/images/default_pfp.jpg"
+                            "/static/images/default_pfp.jpg"
                           }
                           className={"w-[20px] rounded-[4px]"}
                           alt={`${member.user.firstName} ${member.user.lastName}'s profile`}

app/components/dashboard/announcement-bar.tsx

@@ -7,7 +7,7 @@ import { Button } from "../shared/button";
 export default function AnnouncementBar() {
   const { announcement } = useLoaderData<typeof loader>();
   return announcement ? (
-    <div className="mb:gap-4 mb:p-4 mb-4 flex items-center gap-2 rounded border border-gray-200 px-2 py-3">
+    <div className="mb:gap-4 mb:p-4 mb-4 mt-3 flex items-center gap-2 rounded border border-gray-200 px-2 py-3">
       <div className="inline-flex items-center justify-center rounded-full border-[6px] border-solid border-primary-50 bg-primary-100 p-1.5 text-primary">
         <StarsIcon />
       </div>

app/components/dashboard/custodians.tsx

@@ -76,7 +76,7 @@ function Row({
                 src={
                   custodian?.user?.profilePicture
                     ? custodian?.user?.profilePicture
-                    : "/images/default_pfp.jpg"
+                    : "/static/images/default_pfp.jpg"
                 }
                 className={"size-10 rounded-[4px]"}
                 alt={`${custodian.name}'s profile`}

app/components/dashboard/empty-state.tsx

@@ -2,7 +2,7 @@ export function EmptyState({ text }: { text: string }) {
   return (
     <div className="flex size-full min-h-[200px] flex-col items-center justify-center">
       <img
-        src="/images/empty-state.svg"
+        src="/static/images/empty-state.svg"
         alt="Empty state"
         className="h-auto w-[45px]"
       />

app/components/errors/content.tsx

@@ -37,7 +37,7 @@ const InnerContent = ({ title, message, showReload }: ErrorContentProps) => {
   return (
     <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" />
+        <img src="/static/images/error-icon.svg" alt={title} className="mb-5" />
         <h2 className="mb-2">{title}</h2>
         <p className="max-w-[550px]">
           {NODE_ENV === "production"

app/components/errors/index.tsx

@@ -63,14 +63,17 @@ export const ErrorBoundryComponent = ({
     }
   } else if (error instanceof Error) {
     return (
-      <ErrorContent
-        title={title ? title : "Oops, something went wrong"}
-        message={
-          NODE_ENV === "development"
-            ? error.message
-            : "Please try again and if the issue persists, contact support"
-        }
-      />
+      <>
+        <ErrorContent
+          title={title ? title : "Oops, something went wrong"}
+          message={
+            NODE_ENV === "development"
+              ? error.message
+              : "Please try again and if the issue persists, contact support"
+          }
+        />
+        {NODE_ENV === "development" ? <pre>{error.stack}</pre> : null}
+      </>
     );
   } else {
     return (

app/components/forms/calendar-input.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { DayPicker } from "react-day-picker";
+
+import { tw } from "~/utils";
+
+type CalendarProps = {
+  className?: any;
+  classNames?: any;
+  showOutsideDays?: boolean;
+  selected: any;
+  onSelect: any;
+  [x: string]: any;
+};
+
+const Calendar: React.ForwardRefRenderFunction<HTMLElement, CalendarProps> = (
+  {
+    className,
+    classNames,
+    showOutsideDays = true,
+    selected,
+    onSelect,
+    ...props
+  },
+  _ref // This is the forwarded ref
+) => (
+  <>
+    <DayPicker
+      onSelect={(_range: unknown, d: Date) => {
+        onSelect(d);
+      }}
+      selected={selected}
+      showOutsideDays={showOutsideDays}
+      className={tw(
+        "border-indigo z-100 z-50 border-4 bg-slate-200 p-3",
+        className
+      )}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: tw(
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: tw(
+          "[&:has([aria-selected])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+          props.mode === "range"
+            ? "[&: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("size-8 p-0 font-normal aria-selected:opacity-100"),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "text-muted-foreground opacity-50",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeftIcon className="size-4" />,
+        IconRight: () => <ChevronRightIcon className="size-4" />,
+      }}
+      {...props}
+    />
+  </>
+);
+
+export { Calendar };