@medusajs/dashboard 0.0.1

package/src/components/layout/shell/shell.tsx

@@ -0,0 +1,392 @@
+import * as Dialog from "@radix-ui/react-dialog"
+
+import {
+  ArrowRightOnRectangle,
+  BellAlert,
+  BookOpen,
+  Calendar,
+  CircleHalfSolid,
+  CogSixTooth,
+  MagnifyingGlass,
+  SidebarRight,
+  User as UserIcon,
+} from "@medusajs/icons"
+import { Avatar, DropdownMenu, IconButton, Kbd, Text, clx } from "@medusajs/ui"
+import { PropsWithChildren } from "react"
+import {
+  Link,
+  Outlet,
+  UIMatch,
+  useLocation,
+  useMatches,
+} from "react-router-dom"
+
+import { Skeleton } from "../../common/skeleton"
+
+import { useMe } from "../../../hooks/api/users"
+import { useSearch } from "../../../providers/search-provider"
+import { useSidebar } from "../../../providers/sidebar-provider"
+import { useTheme } from "../../../providers/theme-provider"
+
+export const Shell = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex h-screen flex-col items-start overflow-hidden lg:flex-row">
+      <div>
+        <MobileSidebarContainer>{children}</MobileSidebarContainer>
+        <DesktopSidebarContainer>{children}</DesktopSidebarContainer>
+      </div>
+      <div className="flex h-screen w-full flex-col overflow-auto">
+        <Topbar />
+        <main className="flex h-full w-full flex-col items-center overflow-y-auto">
+          <Gutter>
+            <Outlet />
+          </Gutter>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+const Gutter = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex w-full max-w-[1600px] flex-col gap-y-2 p-3">
+      {children}
+    </div>
+  )
+}
+
+const Breadcrumbs = () => {
+  const matches = useMatches() as unknown as UIMatch<
+    unknown,
+    { crumb?: (data?: unknown) => string }
+  >[]
+
+  const crumbs = matches
+    .filter((match) => Boolean(match.handle?.crumb))
+    .map((match) => {
+      const handle = match.handle
+
+      return {
+        label: handle.crumb!(match.data),
+        path: match.pathname,
+      }
+    })
+
+  return (
+    <ol className={clx("text-ui-fg-muted flex select-none items-center")}>
+      {crumbs.map((crumb, index) => {
+        const isLast = index === crumbs.length - 1
+        const isSingle = crumbs.length === 1
+
+        return (
+          <li
+            key={index}
+            className={clx("txt-compact-small-plus flex items-center", {
+              "text-ui-fg-subtle": isLast,
+            })}
+          >
+            {!isLast ? (
+              <Link
+                className="transition-fg hover:text-ui-fg-subtle"
+                to={crumb.path}
+              >
+                {crumb.label}
+              </Link>
+            ) : (
+              <div>
+                {!isSingle && <span className="block lg:hidden">...</span>}
+                <span
+                  key={index}
+                  className={clx({
+                    "hidden lg:block": !isSingle,
+                  })}
+                >
+                  {crumb.label}
+                </span>
+              </div>
+            )}
+            {!isLast && <span className="mx-2 -mt-0.5">›</span>}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+const UserBadge = () => {
+  const { user, isLoading, isError, error } = useMe()
+
+  const name = [user?.first_name, user?.last_name].filter(Boolean).join(" ")
+  const displayName = name || user?.email
+
+  const fallback = displayName ? displayName[0].toUpperCase() : null
+
+  if (isLoading) {
+    return (
+      <button className="shadow-borders-base flex max-w-[192px] select-none items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 pl-1 pr-2.5">
+        <Skeleton className="h-5 w-5 rounded-full" />
+        <Skeleton className="h-[9px] w-[70px]" />
+      </button>
+    )
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <DropdownMenu.Trigger asChild>
+      <button
+        disabled={!user}
+        className={clx(
+          "shadow-borders-base flex max-w-[192px] select-none items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 pl-1 pr-2.5 outline-none"
+        )}
+      >
+        {fallback ? (
+          <Avatar size="xsmall" fallback={fallback} />
+        ) : (
+          <Skeleton className="h-5 w-5 rounded-full" />
+        )}
+        {displayName ? (
+          <Text
+            size="xsmall"
+            weight="plus"
+            leading="compact"
+            className="truncate"
+          >
+            {displayName}
+          </Text>
+        ) : (
+          <Skeleton className="h-[9px] w-[70px]" />
+        )}
+      </button>
+    </DropdownMenu.Trigger>
+  )
+}
+
+const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <DropdownMenu.SubMenu>
+      <DropdownMenu.SubMenuTrigger className="rounded-md">
+        <CircleHalfSolid className="text-ui-fg-subtle mr-2" />
+        Theme
+      </DropdownMenu.SubMenuTrigger>
+      <DropdownMenu.SubMenuContent>
+        <DropdownMenu.RadioGroup value={theme}>
+          <DropdownMenu.RadioItem
+            value="light"
+            onClick={(e) => {
+              e.preventDefault()
+              setTheme("light")
+            }}
+          >
+            Light
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem
+            value="dark"
+            onClick={(e) => {
+              e.preventDefault()
+              setTheme("dark")
+            }}
+          >
+            Dark
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.SubMenuContent>
+    </DropdownMenu.SubMenu>
+  )
+}
+
+const Logout = () => {
+  // const navigate = useNavigate()
+  // const { mutateAsync: logoutMutation } = useAdminDeleteSession()
+
+  const handleLayout = async () => {
+    // await logoutMutation(undefined, {
+    //   onSuccess: () => {
+    //     /**
+    //      * When the user logs out, we want to clear the query cache
+    //      */
+    //     queryClient.clear()
+    //     navigate("/login")
+    //   },
+    // })
+    // noop
+  }
+
+  return (
+    <DropdownMenu.Item onClick={handleLayout}>
+      <div className="flex items-center gap-x-2">
+        <ArrowRightOnRectangle className="text-ui-fg-subtle" />
+        <span>Logout</span>
+      </div>
+    </DropdownMenu.Item>
+  )
+}
+
+const Profile = () => {
+  const location = useLocation()
+
+  return (
+    <Link to="/settings/profile" state={{ from: location.pathname }}>
+      <DropdownMenu.Item>
+        <UserIcon className="text-ui-fg-subtle mr-2" />
+        Profile
+      </DropdownMenu.Item>
+    </Link>
+  )
+}
+
+const LoggedInUser = () => {
+  return (
+    <DropdownMenu>
+      <UserBadge />
+      <DropdownMenu.Content align="center">
+        <Profile />
+        <DropdownMenu.Separator />
+        <Link to="https://docs.medusajs.com/user-guide" target="_blank">
+          <DropdownMenu.Item>
+            <BookOpen className="text-ui-fg-subtle mr-2" />
+            Documentation
+          </DropdownMenu.Item>
+        </Link>
+        <Link to="https://medusajs.com/changelog/" target="_blank">
+          <DropdownMenu.Item>
+            <Calendar className="text-ui-fg-subtle mr-2" />
+            Changelog
+          </DropdownMenu.Item>
+        </Link>
+        <DropdownMenu.Separator />
+        <ThemeToggle />
+        <DropdownMenu.Separator />
+        <Logout />
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const SettingsLink = () => {
+  const location = useLocation()
+
+  return (
+    <Link
+      to="/settings"
+      className="flex items-center justify-center"
+      state={{ from: location.pathname }}
+    >
+      <IconButton
+        size="small"
+        variant="transparent"
+        className="text-ui-fg-muted transition-fg hover:text-ui-fg-subtle"
+      >
+        <CogSixTooth />
+      </IconButton>
+    </Link>
+  )
+}
+
+const ToggleNotifications = () => {
+  return (
+    <IconButton
+      size="small"
+      variant="transparent"
+      className="text-ui-fg-muted transition-fg hover:text-ui-fg-subtle"
+    >
+      <BellAlert />
+    </IconButton>
+  )
+}
+
+const Searchbar = () => {
+  const { toggleSearch } = useSearch()
+
+  return (
+    <button
+      onClick={toggleSearch}
+      className="shadow-borders-base bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover transition-fg focus-visible:shadow-borders-focus text-ui-fg-muted flex w-full max-w-[280px] select-none items-center gap-x-2 rounded-full py-1.5 pl-2 pr-1.5 outline-none"
+    >
+      <MagnifyingGlass />
+      <div className="flex-1 text-left">
+        <Text size="small" leading="compact">
+          Jump to or search
+        </Text>
+      </div>
+      <Kbd className="rounded-full">⌘K</Kbd>
+    </button>
+  )
+}
+
+const ToggleSidebar = () => {
+  const { toggle } = useSidebar()
+
+  return (
+    <div>
+      <IconButton
+        className="hidden lg:flex"
+        variant="transparent"
+        onClick={() => toggle("desktop")}
+      >
+        <SidebarRight className="text-ui-fg-muted" />
+      </IconButton>
+      <IconButton
+        className="hidden max-lg:flex"
+        variant="transparent"
+        onClick={() => toggle("mobile")}
+      >
+        <SidebarRight className="text-ui-fg-muted" />
+      </IconButton>
+    </div>
+  )
+}
+
+const Topbar = () => {
+  return (
+    <div className="grid w-full grid-cols-3 border-b p-3">
+      <div className="flex items-center gap-x-1.5">
+        <ToggleSidebar />
+        <Breadcrumbs />
+      </div>
+      <div className="flex items-center justify-center">
+        <Searchbar />
+      </div>
+      <div className="flex items-center justify-end gap-x-3">
+        <div className="text-ui-fg-muted flex items-center gap-x-1">
+          <ToggleNotifications />
+          <SettingsLink />
+        </div>
+        <LoggedInUser />
+      </div>
+    </div>
+  )
+}
+
+const DesktopSidebarContainer = ({ children }: PropsWithChildren) => {
+  const { desktop } = useSidebar()
+
+  return (
+    <div
+      className={clx("hidden h-screen w-[220px] border-r", {
+        "lg:flex": desktop,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
+  const { mobile, toggle } = useSidebar()
+
+  return (
+    <Dialog.Root open={mobile} onOpenChange={() => toggle("mobile")}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
+        <Dialog.Content className="bg-ui-bg-subtle fixed inset-y-0 left-0 h-screen w-full max-w-[240px] border-r">
+          {children}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/components/layout/split-view/index.ts

@@ -0,0 +1 @@
+export * from "./split-view"

package/src/components/layout/split-view/split-view.tsx

@@ -0,0 +1,103 @@
+import { Button, clx } from "@medusajs/ui"
+import * as Dialog from "@radix-ui/react-dialog"
+import {
+  ComponentPropsWithoutRef,
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useRef,
+} from "react"
+
+type SplitViewContextValue = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const SplitViewContext = createContext<SplitViewContextValue | null>(null)
+
+const useSplitViewContext = () => {
+  const context = useContext(SplitViewContext)
+
+  if (!context) {
+    throw new Error("useSplitViewContext must be used within a SplitView")
+  }
+
+  return context
+}
+
+type SplitViewProps = PropsWithChildren<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}>
+
+const Root = ({ open, onOpenChange, children }: SplitViewProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <div ref={containerRef} className="relative size-full overflow-hidden">
+        {children}
+      </div>
+    </Dialog.Root>
+  )
+}
+
+const Content = ({
+  children,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) => {
+  return (
+    <div
+      className={clx("relative h-full overflow-y-auto", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+const Drawer = ({ children }: PropsWithChildren) => {
+  return (
+    <div>
+      <Dialog.Overlay
+        className={clx(
+          "bg-ui-bg-base absolute inset-0 opacity-40",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        )}
+      />
+      <Dialog.Content
+        className={clx(
+          "bg-ui-bg-base border-ui-border-base absolute inset-y-0 right-0 flex w-full max-w-[calc(100%-128px)] flex-1 flex-col border-l focus:outline-none md:max-w-[80%] lg:max-w-[50%]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2 duration-200"
+        )}
+      >
+        {children}
+      </Dialog.Content>
+    </div>
+  )
+}
+
+const Close = ({
+  variant = "secondary",
+  size = "small",
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof Button>) => {
+  return (
+    <Dialog.Close asChild>
+      <Button size={size} variant={variant} {...props}>
+        {children}
+      </Button>
+    </Dialog.Close>
+  )
+}
+
+/**
+ * SplitView is a layout component that allows you to create a split view layout within a FocusModal.
+ */
+export const SplitView = Object.assign(Root, {
+  Content,
+  Drawer,
+  Close,
+})

package/src/components/localization/localized-date-picker/index.ts

@@ -0,0 +1 @@
+export * from "./localized-date-picker"

package/src/components/localization/localized-date-picker/localized-date-picker.tsx

@@ -0,0 +1,37 @@
+import { DatePicker } from "@medusajs/ui"
+import { ComponentPropsWithoutRef } from "react"
+import { useTranslation } from "react-i18next"
+import { languages } from "../../../i18n/languages"
+
+type LocalizedDatePickerProps = Omit<
+  ComponentPropsWithoutRef<typeof DatePicker>,
+  "translations" | "locale"
+>
+
+export const LocalizedDatePicker = ({
+  mode = "single",
+  ...props
+}: LocalizedDatePickerProps) => {
+  const { i18n, t } = useTranslation()
+
+  const locale = languages.find(
+    (lang) => lang.code === i18n.language
+  )?.date_locale
+
+  const translations = {
+    cancel: t("actions.cancel"),
+    apply: t("general.apply"),
+    end: t("general.end"),
+    start: t("general.start"),
+    range: t("general.range"),
+  }
+
+  return (
+    <DatePicker
+      mode={mode}
+      translations={translations}
+      locale={locale}
+      {...(props as any)}
+    />
+  )
+}

package/src/components/localization/localized-table-pagination/index.ts

@@ -0,0 +1 @@
+export * from "./localized-table-pagination"

package/src/components/localization/localized-table-pagination/localized-table-pagination.tsx

@@ -0,0 +1,26 @@
+import { Table } from "@medusajs/ui"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+import { useTranslation } from "react-i18next"
+
+type LocalizedTablePaginationProps = Omit<
+  ComponentPropsWithoutRef<typeof Table.Pagination>,
+  "translations"
+>
+
+export const LocalizedTablePagination = forwardRef<
+  ElementRef<typeof Table.Pagination>,
+  LocalizedTablePaginationProps
+>((props, ref) => {
+  const { t } = useTranslation()
+
+  const translations = {
+    of: t("general.of"),
+    results: t("general.results"),
+    pages: t("general.pages"),
+    prev: t("general.prev"),
+    next: t("general.next"),
+  }
+
+  return <Table.Pagination {...props} translations={translations} ref={ref} />
+})
+LocalizedTablePagination.displayName = "LocalizedTablePagination"

package/src/components/route-modal/index.ts

@@ -0,0 +1,3 @@
+export { RouteDrawer } from "./route-drawer"
+export { RouteFocusModal } from "./route-focus-modal"
+export { useRouteModal } from "./route-modal-provider"

package/src/components/route-modal/route-drawer/index.ts

@@ -0,0 +1 @@
+export * from "./route-drawer"

package/src/components/route-modal/route-drawer/route-drawer.tsx

@@ -0,0 +1,59 @@
+import { Drawer } from "@medusajs/ui"
+import { PropsWithChildren, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { RouteForm } from "../route-form"
+import { RouteModalProvider } from "../route-modal-provider/route-provider"
+
+type RouteDrawerProps = PropsWithChildren<{
+  prev?: string
+}>
+
+const Root = ({ prev = "..", children }: RouteDrawerProps) => {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+
+  /**
+   * Open the modal when the component mounts. This
+   * ensures that the entry animation is played.
+   */
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      document.body.style.pointerEvents = "auto"
+      navigate(prev, { replace: true })
+      return
+    }
+
+    setOpen(open)
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={handleOpenChange}>
+      <RouteModalProvider prev={prev}>
+        <Drawer.Content>{children}</Drawer.Content>
+      </RouteModalProvider>
+    </Drawer>
+  )
+}
+
+const Header = Drawer.Header
+const Body = Drawer.Body
+const Footer = Drawer.Footer
+const Close = Drawer.Close
+const Form = RouteForm
+
+/**
+ * Drawer that is used to render a form on a separate route.
+ *
+ * Typically used for forms editing a resource.
+ */
+export const RouteDrawer = Object.assign(Root, {
+  Header,
+  Body,
+  Footer,
+  Close,
+  Form,
+})

package/src/components/route-modal/route-focus-modal/index.ts

@@ -0,0 +1 @@
+export * from "./route-focus-modal"

package/src/components/route-modal/route-focus-modal/route-focus-modal.tsx

@@ -0,0 +1,58 @@
+import { FocusModal } from "@medusajs/ui"
+import { PropsWithChildren, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { RouteForm } from "../route-form"
+import { RouteModalProvider } from "../route-modal-provider/route-provider"
+
+type RouteFocusModalProps = PropsWithChildren<{
+  prev?: string
+}>
+
+const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+
+  /**
+   * Open the modal when the component mounts. This
+   * ensures that the entry animation is played.
+   */
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      document.body.style.pointerEvents = "auto"
+      navigate(prev, { replace: true })
+      return
+    }
+
+    setOpen(open)
+  }
+
+  return (
+    <FocusModal open={open} onOpenChange={handleOpenChange}>
+      <RouteModalProvider prev={prev}>
+        <FocusModal.Content>{children}</FocusModal.Content>
+      </RouteModalProvider>
+    </FocusModal>
+  )
+}
+
+const Header = FocusModal.Header
+const Body = FocusModal.Body
+const Close = FocusModal.Close
+const Form = RouteForm
+
+/**
+ * FocusModal that is used to render a form on a separate route.
+ *
+ * Typically used for forms creating a resource or forms that require
+ * a lot of space.
+ */
+export const RouteFocusModal = Object.assign(Root, {
+  Header,
+  Body,
+  Close,
+  Form,
+})

package/src/components/route-modal/route-form/index.ts

@@ -0,0 +1 @@
+export * from "./route-form"