docs: revise commerce modules overview pages (#10738)

* revise API Key Module overview * revise auth module * support ref sidebar items * remove examples * revise cart module * revise currency * revise customer module * revise fulfillment module * revise inventory module * revise order module * revise payment * revise pricing module * revise product module * revise promotion module * revise region module * revise sales channel module * revise stock location module * revise store module * revise tax module * revise user module * lint content + fix snippets
2024-12-26 10:32:16 +02:00
parent c8f9938865
commit ebca8fed28
112 changed files with 9465 additions and 7731 deletions
--- a/www/apps/resources/components/CommerceModuleSections/index.tsx
+++ b/www/apps/resources/components/CommerceModuleSections/index.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { H2, Hr, useChildDocs } from "docs-ui"
+import React, { useMemo } from "react"
+
+type CommerceModuleSectionsProps = {
+  name: string
+}
+
+export const CommerceModuleSections = ({
+  name,
+}: CommerceModuleSectionsProps) => {
+  const components: (JSX.Element | JSX.Element[])[] = []
+  const { items: workflowItems, component: workflowsComponent } = useChildDocs({
+    showItems: ["Workflows"],
+    titleLevel: 3,
+    itemsPerRow: 2,
+  })
+  const { items: stepItems, component: stepsComponent } = useChildDocs({
+    showItems: ["Steps"],
+    titleLevel: 3,
+    itemsPerRow: 2,
+  })
+
+  const hideWorkflowsSection = useMemo(() => {
+    return !workflowItems?.default.length && !stepItems?.default.length
+  }, [workflowItems, stepItems])
+
+  const { items: serverGuideItems, component: serverGuidesComponent } =
+    useChildDocs({
+      showItems: ["Server Guides"],
+      itemsPerRow: 2,
+    })
+  if (serverGuideItems?.default.length) {
+    components.push(serverGuidesComponent)
+  }
+  const { items: storefrontGuideItems, component: storefrontGuidesComponent } =
+    useChildDocs({
+      showItems: ["Storefront Guides"],
+      itemsPerRow: 2,
+    })
+  if (storefrontGuideItems?.default.length) {
+    components.push(storefrontGuidesComponent)
+  }
+  const { items: adminGuideItems, component: adminGuidesComponent } =
+    useChildDocs({
+      showItems: ["Admin Guides"],
+      itemsPerRow: 2,
+    })
+  if (adminGuideItems?.default.length) {
+    components.push(adminGuidesComponent)
+  }
+  const { items: userGuideItems, component: userGuidesComponent } =
+    useChildDocs({
+      showItems: ["User Guides"],
+      itemsPerRow: 2,
+    })
+  if (userGuideItems?.default.length) {
+    components.push(userGuidesComponent)
+  }
+  const { items: referenceItems, component: referencesComponent } =
+    useChildDocs({
+      showItems: ["References"],
+      itemsPerRow: 2,
+    })
+  if (referenceItems?.default.length) {
+    components.push(referencesComponent)
+  }
+
+  return (
+    <>
+      {!hideWorkflowsSection && (
+        <>
+          <H2 id="medusa-workflows-and-steps">Medusa Workflows and Steps</H2>
+          <p>
+            Medusa provides the following workflows and steps that use the{" "}
+            {name} Module. You can use these workflows and steps in your
+            customizations:
+          </p>
+          {workflowsComponent}
+          {stepsComponent}
+        </>
+      )}
+
+      {components.map((component, i) => (
+        <React.Fragment key={i}>
+          <>
+            {i !== 0 || !hideWorkflowsSection ? <Hr /> : null}
+            {component}
+          </>
+        </React.Fragment>
+      ))}
+    </>
+  )
+}