docs: add workflow and js sdk reference pages for commerce modules (#10898)

* docs: add workflow and js sdk reference pages for commerce modules

* resolve build errors

www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx

@@ -16,6 +16,7 @@ export const CardDefaultLayout = ({
   iconClassName,
   children,
   badge,
+  rightIcon: RightIconComponent,
 }: CardProps) => {
   const isExternal = useIsExternalLink({ href })
 
@@ -61,7 +62,9 @@ export const CardDefaultLayout = ({
       </div>
       {badge && <Badge {...badge} />}
       <span className="text-medusa-fg-subtle">
-        {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
+        {RightIconComponent && <RightIconComponent />}
+        {!RightIconComponent && isExternal && <ArrowUpRightOnBox />}
+        {!RightIconComponent && !isExternal && <TriangleRightMini />}
       </span>
 
       {href && (

www/packages/docs-ui/src/components/Card/index.tsx

@@ -9,6 +9,7 @@ import { CardLayoutMini } from "./Layout/Mini"
 export type CardProps = {
   type?: "default" | "large" | "filler" | "mini"
   icon?: React.FC<IconProps>
+  rightIcon?: React.FC<IconProps>
   image?: string
   themeImage?: {
     light: string

www/packages/docs-ui/src/components/CardList/index.tsx

@@ -5,13 +5,22 @@ import clsx from "clsx"
 type CardListProps = {
   items: CardProps[]
   itemsPerRow?: number
+  defaultItemsPerRow?: number
   className?: string
 }
 
-export const CardList = ({ items, itemsPerRow, className }: CardListProps) => {
+export const CardList = ({
+  items,
+  itemsPerRow,
+  className,
+  defaultItemsPerRow,
+}: CardListProps) => {
   if (!itemsPerRow) {
     // if length of items is even, set to `2`, else set to `3`
-    itemsPerRow = items.length === 1 ? 0 : items.length % 2 === 0 ? 2 : 3
+    itemsPerRow =
+      items.length === 1
+        ? 1
+        : defaultItemsPerRow || (items.length % 2 === 0 ? 2 : 3)
   }
   return (
     <section

www/packages/docs-ui/src/hooks/use-child-docs/index.tsx

@@ -15,6 +15,7 @@ import {
 import { InteractiveSidebarItem, SidebarItem, SidebarItemLink } from "types"
 import slugify from "slugify"
 import { MDXComponents } from "../.."
+import { ChevronDoubleRight } from "@medusajs/icons"
 
 type HeadingComponent = (
   props: React.HTMLAttributes<HTMLHeadingElement>
@@ -30,6 +31,7 @@ export type UseChildDocsProps = {
   titleLevel?: number
   childLevel?: number
   itemsPerRow?: number
+  defaultItemsPerRow?: number
 }
 
 export const useChildDocs = ({
@@ -42,6 +44,7 @@ export const useChildDocs = ({
   titleLevel = 2,
   childLevel = 1,
   itemsPerRow,
+  defaultItemsPerRow,
 }: UseChildDocsProps) => {
   const { currentItems, activeItem } = useSidebar()
   const TitleHeaderComponent = useCallback(
@@ -178,10 +181,13 @@ export const useChildDocs = ({
             return {
               title: childItem.title,
               href,
+              rightIcon:
+                childItem.type === "ref" ? ChevronDoubleRight : undefined,
             }
           }) || []
         }
         itemsPerRow={itemsPerRow}
+        defaultItemsPerRow={defaultItemsPerRow}
       />
     )
   }
@@ -227,16 +233,26 @@ export const useChildDocs = ({
                       title: childItem.title,
                       href: isSidebarItemLink(childItem) ? childItem.path : "",
                       text: childItem.description,
+                      rightIcon:
+                        childItem.type === "ref"
+                          ? ChevronDoubleRight
+                          : undefined,
                     })) || []
                   }
                   itemsPerRow={itemsPerRow}
+                  defaultItemsPerRow={defaultItemsPerRow}
                 />
               )}
               {key !== filteredItems.length - 1 && headerLevel === 2 && <Hr />}
             </>
           )}
           {!HeadingComponent && isSidebarItemLink(item) && (
-            <Card title={item.title} href={item.path} text={item.description} />
+            <Card
+              title={item.title}
+              href={item.path}
+              text={item.description}
+              rightIcon={item.type === "ref" ? ChevronDoubleRight : undefined}
+            />
           )}
         </React.Fragment>
       )