850 feature request migrate to vite

Dockerfile

@@ -35,7 +35,6 @@ FROM base AS release
 COPY --from=build /src/node_modules /src/node_modules
 COPY --from=build /src/app/database /src/app/database
 COPY --from=build /src/build /src/build
-COPY --from=build /src/public /src/public
 COPY --from=build /src/package.json /src/package.json
 COPY --from=build /src/start.sh /src/start.sh
 RUN chmod +x /src/start.sh

Dockerfile.image

@@ -35,7 +35,6 @@ FROM base AS release
 COPY --from=build /src/node_modules /src/node_modules
 COPY --from=build /src/app/database /src/app/database
 COPY --from=build /src/build /src/build
-COPY --from=build /src/public /src/public
 COPY --from=build /src/package.json /src/package.json
 COPY --from=build /src/docker-entrypoint.sh /src/docker-entrypoint.sh
 

app/atoms/file.ts

@@ -1,6 +1,6 @@
 import type { ChangeEvent } from "react";
 import { atom } from "jotai";
-import { verifyAccept } from "~/utils";
+import { verifyAccept } from "~/utils/verify-file-accept";
 
 export const fileErrorAtom = atom<string | undefined>(undefined);
 

app/components/assets/actions-dropdown.tsx

@@ -8,17 +8,17 @@ import {
   PenIcon,
   UserIcon,
   UserXIcon,
-} from "~/components/icons";
+} from "~/components/icons/library";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "~/components/shared/dropdown";
 import type { loader } from "~/routes/_layout+/assets.$assetId";
-import { tw } from "~/utils/tw-classes";
+import { tw } from "~/utils/tw";
 import { DeleteAsset } from "./delete-asset";
-import { Button } from "../shared";
+import { Button } from "../shared/button";
 
 const ConditionalActionsDropdown = () => {
   const { asset } = useLoaderData<typeof loader>();
@@ -84,6 +84,7 @@ const ConditionalActionsDropdown = () => {
               __html: `@media (max-width: 640px) {
                 [data-radix-popper-content-wrapper] {
                   transform: none !important;
+                  will-change: auto !important;
               }
           }`,
             }} // is a hack to fix the dropdown menu not being in the right place on mobile

app/components/assets/asset-image.tsx

@@ -3,7 +3,7 @@ import type { Asset } from "@prisma/client";
 
 import { useFetcher } from "@remix-run/react";
 import type { action } from "~/routes/api+/asset.refresh-main-image";
-import { tw } from "~/utils";
+import { tw } from "~/utils/tw";
 
 export const AssetImage = ({
   asset,

app/components/assets/asset-status-badge.tsx

@@ -1,6 +1,6 @@
 import type { SVGProps } from "react";
 import { AssetStatus } from "@prisma/client";
-import { Badge } from "../shared";
+import { Badge } from "../shared/badge";
 import {
   Tooltip,
   TooltipContent,

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

@@ -13,22 +13,23 @@ import type { Zorm } from "react-zorm";
 import type { z } from "zod";
 import type { ShelfAssetCustomFieldValueType } from "~/modules/asset/types";
 import type { loader } from "~/routes/_layout+/assets.$assetId_.edit";
-import { isFormProcessing, tw } from "~/utils";
 import { getCustomFieldDisplayValue } from "~/utils/custom-fields";
+import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
 import { zodFieldIsRequired } from "~/utils/zod";
+import { Calendar } from "../forms/calendar-input";
+import FormRow from "../forms/form-row";
+import Input from "../forms/input";
 import {
   Select,
   SelectContent,
   SelectTrigger,
   SelectValue,
   SelectItem,
-} from "../forms";
-import { Calendar } from "../forms/calendar-input";
-import FormRow from "../forms/form-row";
-import Input from "../forms/input";
+} from "../forms/select";
 import { Switch } from "../forms/switch";
-import { SearchIcon } from "../icons";
-import { Button } from "../shared";
+import { SearchIcon } from "../icons/library";
+import { Button } from "../shared/button";
 
 export default function AssetCustomFields({
   zo,

app/components/assets/delete-asset.tsx

@@ -12,7 +12,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "~/components/shared/modal";
-import { TrashIcon } from "../icons";
+import { TrashIcon } from "../icons/library";
 
 export const DeleteAsset = ({
   asset,

app/components/assets/form.tsx

@@ -13,17 +13,18 @@ import { z } from "zod";
 import { updateDynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import { fileErrorAtom, validateFileAtom } from "~/atoms/file";
 import type { loader } from "~/routes/_layout+/assets.$assetId_.edit";
-import { isFormProcessing, tw } from "~/utils";
-
 import type { CustomFieldZodSchema } from "~/utils/custom-fields";
 import { mergedSchema } from "~/utils/custom-fields";
+import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
+
 import { zodFieldIsRequired } from "~/utils/zod";
 import AssetCustomFields from "./custom-fields-inputs";
 import DynamicSelect from "../dynamic-select/dynamic-select";
 import FormRow from "../forms/form-row";
 import Input from "../forms/input";
 import { AbsolutePositionedHeaderActions } from "../layout/header/absolute-positioned-header-actions";
-import { Button } from "../shared";
+import { Button } from "../shared/button";
 import { ButtonGroup } from "../shared/button-group";
 import { Card } from "../shared/card";
 import { Image } from "../shared/image";

app/components/assets/import-content.tsx

@@ -2,10 +2,11 @@ import type { ChangeEvent } from "react";
 import { useRef, useState } from "react";
 import { useFetcher } from "@remix-run/react";
 import type { action } from "~/routes/_layout+/assets.import";
-import { isFormProcessing, tw } from "~/utils";
+import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
 import Input from "../forms/input";
 import { CrispButton } from "../marketing/crisp";
-import { Button } from "../shared";
+import { Button } from "../shared/button";
 import {
   AlertDialog,
   AlertDialogCancel,

app/components/assets/notes/actions-dropdown.tsx

@@ -1,4 +1,4 @@
-import { HorizontalDotsIcon } from "~/components/icons";
+import { HorizontalDotsIcon } from "~/components/icons/library";
 import {
   DropdownMenu,
   DropdownMenuContent,

app/components/assets/notes/delete-note.tsx

@@ -1,5 +1,5 @@
 import { useFetcher, useParams } from "@remix-run/react";
-import { TrashIcon } from "~/components/icons";
+import { TrashIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 
 import {

app/components/assets/notes/notes.tsx → app/components/assets/notes/index.tsx

@@ -1,8 +1,8 @@
 import { useLoaderData, useFetcher } from "@remix-run/react";
 import { MarkdownViewer } from "~/components/markdown/markdown-viewer";
-import { useUserData } from "~/hooks";
+import { useUserData } from "~/hooks/use-user-data";
 import type { loader } from "~/routes/_layout+/assets.$assetId";
-import { isFormProcessing } from "~/utils";
+import { isFormProcessing } from "~/utils/form";
 import { NewNote } from "./new";
 import type { NoteWithDate } from "./note";
 import { Note } from "./note";

app/components/assets/notes/new.tsx

@@ -6,8 +6,11 @@ import { atom, useAtom } from "jotai";
 import { useZorm } from "react-zorm";
 import { z } from "zod";
 import Input from "~/components/forms/input";
-import { MarkdownEditor, clearMarkdownAtom } from "~/components/markdown";
-import { Button } from "~/components/shared";
+import {
+  MarkdownEditor,
+  clearMarkdownAtom,
+} from "~/components/markdown/markdown-editor";
+import { Button } from "~/components/shared/button";
 
 export const NewNoteSchema = z.object({
   content: z.string().min(3, "Content is required"),

app/components/assets/notes/note.tsx

@@ -1,5 +1,5 @@
 import type { Note as NoteType } from "@prisma/client";
-import { MarkdownViewer } from "~/components/markdown";
+import { MarkdownViewer } from "~/components/markdown/markdown-viewer";
 import { Switch } from "~/components/shared/switch";
 import { Tag } from "~/components/shared/tag";
 import { useUserIsSelfService } from "~/hooks/user-user-is-self-service";

app/components/booking/actions-dropdown.tsx

@@ -1,5 +1,5 @@
 import { useSubmit } from "@remix-run/react";
-import { ChevronRight } from "~/components/icons";
+import { ChevronRight } from "~/components/icons/library";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,9 +10,9 @@ import {
 import { useBookingStatus } from "~/hooks/use-booking-status";
 import { useUserIsSelfService } from "~/hooks/user-user-is-self-service";
 import type { BookingWithCustodians } from "~/routes/_layout+/bookings";
-import { tw } from "~/utils";
+import { tw } from "~/utils/tw";
 import { DeleteBooking } from "./delete-booking";
-import { Button } from "../shared";
+import { Button } from "../shared/button";
 
 interface Props {
   booking: BookingWithCustodians;

app/components/booking/asset-row-actions-dropdown.tsx

@@ -1,12 +1,12 @@
 import type { Asset } from "@prisma/client";
 
-import { VerticalDotsIcon } from "~/components/icons";
+import { VerticalDotsIcon } from "~/components/icons/library";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "~/components/shared/dropdown";
-import { tw } from "~/utils";
+import { tw } from "~/utils/tw";
 import { RemoveAssetFromBooking } from "./remove-asset-from-booking";
 
 interface Props {

app/components/booking/availability-label.tsx

@@ -2,7 +2,8 @@ import type { Booking } from "@prisma/client";
 import { BookingStatus } from "@prisma/client";
 import { Link, useLoaderData } from "@remix-run/react";
 import type { AssetWithBooking } from "~/routes/_layout+/bookings.$bookingId.add-assets";
-import { SERVER_URL, tw } from "~/utils";
+import { SERVER_URL } from "~/utils/env";
+import { tw } from "~/utils/tw";
 import {
   Tooltip,
   TooltipContent,

app/components/booking/availability-select.tsx

@@ -6,7 +6,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../forms";
+} from "../forms/select";
 
 export function AvailabilitySelect() {
   const [searchParams, setSearchParams] = useSearchParams();

app/components/booking/booking-assets-column.tsx

@@ -11,7 +11,8 @@ import { AvailabilityLabel } from "./availability-label";
 import { AssetImage } from "../assets/asset-image";
 import { AssetStatusBadge } from "../assets/asset-status-badge";
 import { List } from "../list";
-import { Badge, Button } from "../shared";
+import { Badge } from "../shared/badge";
+import { Button } from "../shared/button";
 import { ControlledActionButton } from "../shared/controlled-action-button";
 import TextualDivider from "../shared/textual-divider";
 import { Td, Th } from "../table";

app/components/booking/delete-booking.tsx

@@ -12,8 +12,9 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "~/components/shared/modal";
-import { isFormProcessing, tw } from "~/utils";
-import { TrashIcon } from "../icons";
+import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
+import { TrashIcon } from "../icons/library";
 
 export const DeleteBooking = ({
   booking,

app/components/booking/form.tsx

@@ -17,14 +17,15 @@ import {
 import { useBookingStatus } from "~/hooks/use-booking-status";
 import { useUserIsSelfService } from "~/hooks/user-user-is-self-service";
 import type { BookingWithCustodians } from "~/routes/_layout+/bookings";
-import { isFormProcessing, tw } from "~/utils";
-import type { BookingFormData } from ".";
+import { isFormProcessing } from "~/utils/form";
+import { tw } from "~/utils/tw";
 import { ActionsDropdown } from "./actions-dropdown";
+import type { BookingFormData } from "./page-content";
 import CustodianUserSelect from "../custody/custodian-user-select";
 import FormRow from "../forms/form-row";
 import Input from "../forms/input";
 import { AbsolutePositionedHeaderActions } from "../layout/header/absolute-positioned-header-actions";
-import { Button } from "../shared";
+import { Button } from "../shared/button";
 import { Card } from "../shared/card";
 import { ControlledActionButton } from "../shared/controlled-action-button";
 

app/components/booking/remove-asset-from-booking.tsx

@@ -14,8 +14,8 @@ import {
 } from "~/components/shared/modal";
 import { useBookingStatus } from "~/hooks/use-booking-status";
 import type { BookingWithCustodians } from "~/routes/_layout+/bookings";
-import { tw } from "~/utils";
-import { TrashIcon } from "../icons";
+import { tw } from "~/utils/tw";
+import { TrashIcon } from "../icons/library";
 
 export const RemoveAssetFromBooking = ({ asset }: { asset: Asset }) => {
   const { booking } = useLoaderData<{ booking: BookingWithCustodians }>();

app/components/booking/status-filter.tsx

@@ -1,12 +1,12 @@
 import { useNavigation, useSearchParams } from "@remix-run/react";
-import { isFormProcessing } from "~/utils";
+import { isFormProcessing } from "~/utils/form";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../forms";
+} from "../forms/select";
 
 export function StatusFilter({
   statusItems,

app/components/category/category-select-no-categories.tsx

@@ -1,4 +1,4 @@
-import { Button } from "../shared";
+import { Button } from "../shared/button";
 
 export const CategorySelectNoCategories = () => (
   <div>

app/components/category/delete-category.tsx

@@ -12,8 +12,8 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "~/components/shared/modal";
-import { isFormProcessing } from "~/utils";
-import { TrashIcon } from "../icons";
+import { isFormProcessing } from "~/utils/form";
+import { TrashIcon } from "../icons/library";
 
 export const DeleteCategory = ({
   category,

app/components/custody/custodian-user-select.tsx

@@ -1,15 +1,15 @@
 import { useLoaderData } from "@remix-run/react";
 import type { loader } from "~/routes/_layout+/assets.$assetId.give-custody";
-import { tw } from "~/utils";
+import { tw } from "~/utils/tw";
 import {
   Select,
   SelectTrigger,
   SelectValue,
   SelectContent,
   SelectItem,
-} from "../forms";
-import { UserIcon } from "../icons";
-import { Button } from "../shared";
+} from "../forms/select";
+import { UserIcon } from "../icons/library";
+import { Button } from "../shared/button";
 
 /** Custodian select that works only for with users and doesnt support team members
  * This is used for something like bookings where the custodian can only be a team member

app/components/custom-fields/actions-dropdown.tsx

@@ -1,5 +1,5 @@
 import type { CustomField } from "@prisma/client";
-import { VerticalDotsIcon } from "~/components/icons";
+import { VerticalDotsIcon } from "~/components/icons/library";
 import {
   DropdownMenu,
   DropdownMenuContent,

app/components/custom-fields/form.tsx

@@ -9,8 +9,8 @@ import { updateDynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import { useOrganizationId } from "~/hooks/use-organization-id";
 import type { action as editCustomFieldsAction } from "~/routes/_layout+/settings.custom-fields.$fieldId_.edit";
 import type { action as newCustomFieldsAction } from "~/routes/_layout+/settings.custom-fields.new";
-import { isFormProcessing } from "~/utils";
 import { FIELD_TYPE_NAME } from "~/utils/custom-fields";
+import { isFormProcessing } from "~/utils/form";
 import { getValidationErrors } from "~/utils/http";
 import { zodFieldIsRequired } from "~/utils/zod";
 import FormRow from "../forms/form-row";
@@ -24,7 +24,7 @@ import {
   SelectValue,
 } from "../forms/select";
 import { Switch } from "../forms/switch";
-import { Button } from "../shared";
+import { Button } from "../shared/button";
 import { Card } from "../shared/card";
 import { Spinner } from "../shared/spinner";
 

app/components/dashboard/announcement-bar.tsx

@@ -1,7 +1,7 @@
 import { useLoaderData } from "@remix-run/react";
 import type { loader } from "~/routes/_layout+/dashboard";
-import { StarsIcon } from "../icons";
-import { MarkdownViewer } from "../markdown";
+import { StarsIcon } from "../icons/library";
+import { MarkdownViewer } from "../markdown/markdown-viewer";
 import { Button } from "../shared/button";
 
 export default function AnnouncementBar() {

app/components/dashboard/assets-by-category-chart.tsx

@@ -5,7 +5,8 @@ import { ClientOnly } from "remix-utils/client-only";
 import type { loader } from "~/routes/_layout+/dashboard";
 import { EmptyState } from "./empty-state";
 import FallbackLoading from "./fallback-loading";
-import { Badge, Button } from "../shared";
+import { Badge } from "../shared/badge";
+import { Button } from "../shared/button";
 import { InfoTooltip } from "../shared/info-tooltip";
 
 export default function AssetsByCategoryChart() {