Merge branch 'develop' into feat/request-item-return

medusajs · Jul 11, 2024 · 4c002cc · 4c002cc
2 parents 8653f12 + 85c15db
commit 4c002cc
Show file tree

Hide file tree

Showing 46 changed files with 2,419 additions and 1,240 deletions.
diff --git a/.github/workflows/generate-public-references.yml b/.github/workflows/generate-public-references.yml
@@ -56,7 +56,9 @@ jobs:
           base: "develop"
           title: "chore(docs): Updated API Reference (v2)"
           labels: "type: chore"
-          add-paths: www/apps/api-reference/specs
+          add-paths: |
+            www/apps/api-reference/specs
+            www/utils/generated/oas-output
           branch: "docs/generate-api-ref"
           branch-suffix: "timestamp"
   ui:

diff --git a/.github/workflows/generate-resources-reference.yml b/.github/workflows/generate-resources-reference.yml
@@ -92,6 +92,7 @@ jobs:
           add-paths: |
             www/apps/resources/references/**
             www/apps/resources/generated/**
+            www/utils/generated/typedoc-json-output
           branch: "docs/generate-reference"
           branch-suffix: "timestamp"
           body: ${{ steps.pr-message.outputs.body }}
diff --git a/packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx b/packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx
@@ -1,5 +1,5 @@
 import {
-  ArrowsPointingOut,
+  ArrowUpRightOnBox,
   Check,
   SquareTwoStack,
   TriangleDownMini,
@@ -30,7 +30,7 @@ export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
     <Container className="flex items-center justify-between px-6 py-4">
       <div className="flex items-center gap-x-4">
         <Heading level="h2">{t("json.header")}</Heading>
-        <Badge size="2xsmall">
+        <Badge size="2xsmall" rounded="full">
           {t("json.numberOfKeys", {
             count: numberOfKeys,
           })}
@@ -41,9 +41,9 @@ export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
           <IconButton
             size="small"
             variant="transparent"
-            className="text-ui-fg-subtle"
+            className="text-ui-fg-muted hover:text-ui-fg-subtle"
           >
-            <ArrowsPointingOut />
+            <ArrowUpRightOnBox />
           </IconButton>
         </Drawer.Trigger>
         <Drawer.Content className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">

diff --git a/packages/admin-next/dashboard/src/components/common/metadata-section/index.ts b/packages/admin-next/dashboard/src/components/common/metadata-section/index.ts
@@ -0,0 +1 @@
+export * from "./metadata-section"
diff --git a/packages/admin-next/dashboard/src/components/common/metadata-section/metadata-section.tsx b/packages/admin-next/dashboard/src/components/common/metadata-section/metadata-section.tsx
@@ -0,0 +1,49 @@
+import { ArrowUpRightOnBox } from "@medusajs/icons"
+import { Badge, Container, Heading, IconButton } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type MetadataSectionProps<TData extends object> = {
+  data: TData
+  href?: string
+}
+
+export const MetadataSection = <TData extends object>({
+  data,
+  href = "metadata/edit",
+}: MetadataSectionProps<TData>) => {
+  const { t } = useTranslation()
+
+  if (!data) {
+    return null
+  }
+
+  if (!("metadata" in data)) {
+    return null
+  }
+
+  const numberOfKeys = data.metadata ? Object.keys(data.metadata).length : 0
+
+  return (
+    <Container className="flex items-center justify-between">
+      <div className="flex items-center gap-x-3">
+        <Heading level="h2">{t("metadata.header")}</Heading>
+        <Badge size="2xsmall" rounded="full">
+          {t("metadata.numberOfKeys", {
+            count: numberOfKeys,
+          })}
+        </Badge>
+      </div>
+      <IconButton
+        size="small"
+        variant="transparent"
+        className="text-ui-fg-muted hover:text-ui-fg-subtle"
+        asChild
+      >
+        <Link to={href}>
+          <ArrowUpRightOnBox />
+        </Link>
+      </IconButton>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx b/packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx
@@ -229,3 +229,99 @@ export const JsonViewSectionSkeleton = () => {
     </Container>
   )
 }
+
+type SingleColumnPageSkeletonProps = {
+  sections?: number
+  showJSON?: boolean
+  showMetadata?: boolean
+}
+
+export const SingleColumnPageSkeleton = ({
+  sections = 2,
+  showJSON = false,
+  showMetadata = false,
+}: SingleColumnPageSkeletonProps) => {
+  return (
+    <div className="flex flex-col gap-y-3">
+      {Array.from({ length: sections }, (_, i) => i).map((section) => {
+        return (
+          <Skeleton
+            key={section}
+            className={clx("h-full max-h-[460px] w-full rounded-lg", {
+              // First section is smaller on most pages, this gives us less
+              // layout shifting in general,
+              "max-h-[219px]": section === 0,
+            })}
+          />
+        )
+      })}
+      {showMetadata && <Skeleton className="h-[60px] w-full rounded-lg" />}
+      {showJSON && <Skeleton className="h-[60px] w-full rounded-lg" />}
+    </div>
+  )
+}
+
+type TwoColumnPageSkeletonProps = {
+  mainSections?: number
+  sidebarSections?: number
+  showJSON?: boolean
+  showMetadata?: boolean
+}
+
+export const TwoColumnPageSkeleton = ({
+  mainSections = 2,
+  sidebarSections = 1,
+  showJSON = false,
+  showMetadata = true,
+}: TwoColumnPageSkeletonProps) => {
+  const showExtraData = showJSON || showMetadata
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      <div className="flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start">
+        <div className="flex w-full flex-col gap-y-3">
+          {Array.from({ length: mainSections }, (_, i) => i).map((section) => {
+            return (
+              <Skeleton
+                key={section}
+                className={clx("h-full max-h-[460px] w-full rounded-lg", {
+                  "max-h-[219px]": section === 0,
+                })}
+              />
+            )
+          })}
+          {showExtraData && (
+            <div className="hidden flex-col gap-y-3 xl:flex">
+              {showMetadata && (
+                <Skeleton className="h-[60px] w-full rounded-lg" />
+              )}
+              {showJSON && <Skeleton className="h-[60px] w-full rounded-lg" />}
+            </div>
+          )}
+        </div>
+        <div className="flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[440px]">
+          {Array.from({ length: sidebarSections }, (_, i) => i).map(
+            (section) => {
+              return (
+                <Skeleton
+                  key={section}
+                  className={clx("h-full max-h-[320px] w-full rounded-lg", {
+                    "max-h-[140px]": section === 0,
+                  })}
+                />
+              )
+            }
+          )}
+          {showExtraData && (
+            <div className="flex flex-col gap-y-3 xl:hidden">
+              {showMetadata && (
+                <Skeleton className="h-[60px] w-full rounded-lg" />
+              )}
+              {showJSON && <Skeleton className="h-[60px] w-full rounded-lg" />}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/forms/metadata-form/index.ts b/packages/admin-next/dashboard/src/components/forms/metadata-form/index.ts
@@ -0,0 +1 @@
+export * from "./metadata-form"