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