Merge pull request #874 from rphlmr/850/vite

vite migration

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/components/forms/calendar-input.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { DayPicker } from "react-day-picker";
 

app/components/forms/select.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { tw } from "~/utils/tw";

app/components/forms/switch.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 

app/components/location/map.tsx

@@ -1,6 +1,7 @@
 import maplibregl from "maplibre-gl";
 import { Marker, ScaleControl } from "react-map-gl";
-import Map from "react-map-gl/maplibre";
+// https://github.com/visgl/react-map-gl/issues/2272
+import Map from "react-map-gl/dist/es5/exports-maplibre.js";
 import { ClientOnly } from "remix-utils/client-only";
 
 export const ShelfMap = ({

app/components/location/scan-details.tsx

@@ -36,8 +36,8 @@ export function ScanDetails() {
             <p>Date/Time: {lastScan.dateTime}</p>
             <p>
               Device:{" "}
-              {lastScan.ua.device.name
-                ? lastScan.ua.device.name
+              {lastScan.ua.device.model && lastScan.ua.device.vendor
+                ? `${lastScan.ua.device.vendor} - ${lastScan.ua.device.model}`
                 : "Unknown device"}
             </p>
             <p>Browser: {lastScan.ua.browser.name}</p>

app/components/shared/dropdown.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 // import { Check, ChevronRight, Circle } from "lucide-react";

app/components/shared/hover-card.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import { tw } from "~/utils/tw";

app/components/shared/modal.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { tw } from "~/utils/tw";

app/components/shared/tabs.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { tw } from "~/utils/tw";

app/modules/scan/utils.server.ts

@@ -1,7 +1,7 @@
-import type { Scan } from ".prisma/client";
+import type { Scan } from "@prisma/client";
+import parser from "ua-parser-js";
 import { getDateTimeFormat } from "~/utils/client-hints";
 import { ShelfError } from "~/utils/error";
-var parser = require("ua-parser-js");
 
 export function parseScanData({
   scan,
@@ -26,7 +26,7 @@ export function parseScanData({
           : "Unknown location";
 
       const dateTime = getDateTimeFormat(request).format(scan.createdAt);
-      const ua = parser(scan.userAgent);
+      const ua = parser(scan.userAgent || "");
 
       return {
         scannedBy,

app/modules/user/service.server.test.ts

@@ -26,7 +26,7 @@ import {
 // 👋 see https://vitest.dev/guide/environment.html#environments-for-specific-files
 
 // mock db
-vitest.mock("~/database", () => ({
+vitest.mock("~/database/db.server", () => ({
   db: {
     $transaction: vitest.fn().mockImplementation((callback) => callback(db)),
     user: {

app/root.tsx

@@ -9,7 +9,6 @@ import { json } from "@remix-run/node";
 import {
   Link,
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -22,9 +21,9 @@ import { ErrorContent } from "./components/errors";
 import { HomeIcon } from "./components/icons/library";
 import MaintenanceMode from "./components/layout/maintenance-mode";
 import { Clarity } from "./components/marketing/clarity";
-import fontsStylesheetUrl from "./styles/fonts.css";
-import globalStylesheetUrl from "./styles/global.css";
-import styles from "./tailwind.css";
+import fontsStylesheetUrl from "./styles/fonts.css?url";
+import globalStylesheetUrl from "./styles/global.css?url";
+import styles from "./tailwind.css?url";
 import { ClientHintCheck, getHints } from "./utils/client-hints";
 import { getBrowserEnv } from "./utils/env";
 import { data } from "./utils/http.server";
@@ -97,7 +96,6 @@ function Document({ children, title }: PropsWithChildren<{ title?: string }>) {
           }}
         />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

app/routes/_layout+/_layout.tsx

@@ -13,7 +13,7 @@ import { Toaster } from "~/components/shared/toast";
 import { config } from "~/config/shelf.config";
 import { db } from "~/database/db.server";
 import { getSelectedOrganisation } from "~/modules/organization/context.server";
-import styles from "~/styles/layout/index.css";
+import styles from "~/styles/layout/index.css?url";
 import {
   initializePerPageCookieOnLayout,
   setCookie,

app/routes/_layout+/assets.$assetId.duplicate.tsx

@@ -15,7 +15,7 @@ import { Button } from "~/components/shared/button";
 import { Spinner } from "~/components/shared/spinner";
 import { db } from "~/database/db.server";
 import { duplicateAsset } from "~/modules/asset/service.server";
-import styles from "~/styles/layout/custom-modal.css";
+import styles from "~/styles/layout/custom-modal.css?url";
 import { MAX_DUPLICATES_ALLOWED } from "~/utils/constants";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { ShelfError, makeShelfError } from "~/utils/error";

app/routes/_layout+/assets.$assetId.give-custody.tsx

@@ -16,7 +16,7 @@ import { WarningBox } from "~/components/shared/warning-box";
 import { db } from "~/database/db.server";
 import { createNote } from "~/modules/asset/service.server";
 import { getUserByID } from "~/modules/user/service.server";
-import styles from "~/styles/layout/custom-modal.css";
+import styles from "~/styles/layout/custom-modal.css?url";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { ShelfError, makeShelfError } from "~/utils/error";
 import { isFormProcessing } from "~/utils/form";

app/routes/_layout+/assets.$assetId.release-custody.tsx

@@ -8,7 +8,7 @@ import { db } from "~/database/db.server";
 import { createNote } from "~/modules/asset/service.server";
 import { releaseCustody } from "~/modules/custody/service.server";
 import { getUserByID } from "~/modules/user/service.server";
-import styles from "~/styles/layout/custom-modal.css";
+import styles from "~/styles/layout/custom-modal.css?url";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { ShelfError, makeShelfError } from "~/utils/error";
 import { isFormProcessing } from "~/utils/form";

app/routes/_layout+/assets.$assetId.tsx

@@ -7,7 +7,7 @@ import type {
 import { redirect, json } from "@remix-run/node";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 
-import mapCss from "maplibre-gl/dist/maplibre-gl.css";
+import mapCss from "maplibre-gl/dist/maplibre-gl.css?url";
 import { useZorm } from "react-zorm";
 import { z } from "zod";
 import ActionsDropdown from "~/components/assets/actions-dropdown";
@@ -37,7 +37,7 @@ import {
 import type { ShelfAssetCustomFieldValueType } from "~/modules/asset/types";
 import { getScanByQrId } from "~/modules/scan/service.server";
 import { parseScanData } from "~/modules/scan/utils.server";
-import assetCss from "~/styles/asset.css";
+import assetCss from "~/styles/asset.css?url";
 
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { checkExhaustiveSwitch } from "~/utils/check-exhaustive-switch";

app/routes/_layout+/assets.$assetId.update-location.tsx

@@ -10,7 +10,7 @@ import {
   getAsset,
   updateAsset,
 } from "~/modules/asset/service.server";
-import styles from "~/styles/layout/custom-modal.css";
+import styles from "~/styles/layout/custom-modal.css?url";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { makeShelfError } from "~/utils/error";
 import { isFormProcessing } from "~/utils/form";

app/routes/_layout+/assets._index.tsx

@@ -37,7 +37,7 @@ import {
   updateAssetsWithBookingCustodians,
 } from "~/modules/asset/service.server";
 import { getOrganizationTierLimit } from "~/modules/tier/service.server";
-import assetCss from "~/styles/assets.css";
+import assetCss from "~/styles/assets.css?url";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { setCookie, userPrefs } from "~/utils/cookies.server";
 import { ShelfError, makeShelfError } from "~/utils/error";

app/routes/_layout+/bookings.$bookingId.add-assets.tsx

@@ -18,7 +18,7 @@ import { bookingsSelectedAssetsAtom } from "~/atoms/selected-assets-atoms";
 import { AssetImage } from "~/components/assets/asset-image";
 import { AvailabilityLabel } from "~/components/booking/availability-label";
 import { AvailabilitySelect } from "~/components/booking/availability-select";
-import styles from "~/components/booking/styles.css";
+import styles from "~/components/booking/styles.css?url";
 import { FakeCheckbox } from "~/components/forms/fake-checkbox";
 import Input from "~/components/forms/input";
 import { List } from "~/components/list";

app/routes/_layout+/bookings.new.tsx

@@ -8,7 +8,7 @@ import { json, redirect } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { DateTime } from "luxon";
 import { BookingForm, NewBookingFormSchema } from "~/components/booking/form";
-import styles from "~/components/booking/styles.new.css";
+import styles from "~/components/booking/styles.new.css?url";
 import { db } from "~/database/db.server";
 
 import { upsertBooking } from "~/modules/booking/service.server";

app/routes/_layout+/dashboard.tsx

@@ -20,7 +20,7 @@ import { ErrorContent } from "~/components/errors";
 import Header from "~/components/layout/header";
 import { db } from "~/database/db.server";
 
-import styles from "~/styles/layout/skeleton-loading.css";
+import styles from "~/styles/layout/skeleton-loading.css?url";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { getLocale } from "~/utils/client-hints";
 import { userPrefs } from "~/utils/cookies.server";

app/routes/_layout+/locations.$locationId.tsx

@@ -7,7 +7,7 @@ import type {
   MetaFunction,
 } from "@remix-run/node";
 import { useLoaderData, useNavigate } from "@remix-run/react";
-import mapCss from "maplibre-gl/dist/maplibre-gl.css";
+import mapCss from "maplibre-gl/dist/maplibre-gl.css?url";
 import { z } from "zod";
 import { AssetImage } from "~/components/assets/asset-image";
 import { ChevronRight } from "~/components/icons/library";
@@ -27,7 +27,7 @@ import { Tag as TagBadge } from "~/components/shared/tag";
 import TextualDivider from "~/components/shared/textual-divider";
 import { Td, Th } from "~/components/table";
 import { deleteLocation, getLocation } from "~/modules/location/service.server";
-import assetCss from "~/styles/asset.css";
+import assetCss from "~/styles/asset.css?url";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import {
   setCookie,

app/routes/_layout+/scanner.tsx

@@ -11,7 +11,7 @@ import type { HeaderData } from "~/components/layout/header/types";
 import { Spinner } from "~/components/shared/spinner";
 import { ZXingScanner } from "~/components/zxing-scanner";
 import { useQrScanner } from "~/hooks/use-qr-scanner";
-import scannerCss from "~/styles/scanner.css";
+import scannerCss from "~/styles/scanner.css?url";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { userPrefs } from "~/utils/cookies.server";
 import { makeShelfError } from "~/utils/error";

app/routes/_layout+/settings.team.add-member.tsx

@@ -6,7 +6,7 @@ import Input from "~/components/forms/input";
 import { UserIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import { db } from "~/database/db.server";
-import styles from "~/styles/layout/custom-modal.css";
+import styles from "~/styles/layout/custom-modal.css?url";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { makeShelfError, maybeUniqueConstraintViolation } from "~/utils/error";
 import { isFormProcessing } from "~/utils/form";

app/routes/_layout+/settings.team.invite-user.tsx

@@ -26,7 +26,7 @@ import { db } from "~/database/db.server";
 import { useCurrentOrganization } from "~/hooks/use-current-organization-id";
 import { createInvite } from "~/modules/invite/service.server";
 import { assertUserCanInviteUsersToWorkspace } from "~/modules/tier/service.server";
-import styles from "~/styles/layout/custom-modal.css";
+import styles from "~/styles/layout/custom-modal.css?url";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { ShelfError, makeShelfError } from "~/utils/error";
 import { isFormProcessing } from "~/utils/form";

app/routes/_welcome+/welcome.tsx

@@ -1,6 +1,6 @@
 import type { LinksFunction } from "@remix-run/node";
 import WelcomeCarousel from "~/components/welcome/carousel";
-import carouselStyles from "~/styles/layout/carousel.css";
+import carouselStyles from "~/styles/layout/carousel.css?url";
 
 export const links: LinksFunction = () => [
   {

docs/shelf.config.ts.md

@@ -4,7 +4,7 @@ This file has a few configuration options, that are used to adjust and disable c
 
 ```ts
 // remix.config.ts
-import { ENABLE_PREMIUM_FEATURES } from "~/utils";
+import { ENABLE_PREMIUM_FEATURES } from "~/utils/env";
 import { Config } from "./types";
 
 export const config: Config = {

remix.env.d.ts → env.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@remix-run/node" />