docs(ui,docs): Add documentation for Medusa UI 2.0.0 (#5227)

* add docs for medusa ui 2.0.0

* fix: copy as child example

* fix: dropdown menu example

* add accordion examples

* fix lint issues

* fix apos in progress tabs demo

* resolve comments

* add icon

* bump z-index on modals to prevent clashing with navbar

* add sidebar item and card

* undo modal z index changes

* add links to updated and new components

* update version

* rm inline code formatting on links

---------

Co-authored-by: Shahed Nasser <shahednasser@gmail.com>

www/apps/ui/src/examples/badge-icon.tsx

@@ -1,10 +0,0 @@
-import { BuildingTax } from "@medusajs/icons"
-import { Badge } from "@medusajs/ui"
-
-export default function BadgeIcon() {
-  return (
-    <Badge type="icon">
-      <BuildingTax />
-    </Badge>
-  )
-}

www/apps/ui/src/examples/badge-rounded-base.tsx

@@ -0,0 +1,5 @@
+import { Badge } from "@medusajs/ui"
+
+export default function BadgeRoundedBase() {
+  return <Badge rounded="base">Badge</Badge>
+}

www/apps/ui/src/examples/badge-rounded-full.tsx

@@ -0,0 +1,5 @@
+import { Badge } from "@medusajs/ui"
+
+export default function BadgeRoundedFull() {
+  return <Badge rounded="full">Badge</Badge>
+}

www/apps/ui/src/examples/badge-rounded.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@medusajs/ui"
-
-export default function BadgeRounded() {
-  return <Badge type="rounded">Badge</Badge>
-}

www/apps/ui/src/examples/button-icon-only.tsx

@@ -1,10 +0,0 @@
-import { PlusMini } from "@medusajs/icons"
-import { Button } from "@medusajs/ui"
-
-export default function ButtonIconOnly() {
-  return (
-    <Button format="icon">
-      <PlusMini />
-    </Button>
-  )
-}

www/apps/ui/src/examples/code-block-demo.tsx

@@ -5,6 +5,7 @@ const snippets = [
     label: "cURL",
     language: "markdown",
     code: `curl -H 'x-publishable-key: YOUR_API_KEY' 'http://localhost:9000/store/products/PRODUCT_ID'`,
+    hideLineNumbers: true,
   },
   {
     label: "Medusa JS Client",

www/apps/ui/src/examples/code-block-no-lines.tsx

@@ -5,6 +5,7 @@ const snippets = [
     label: "Medusa React",
     language: "tsx",
     code: `import { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`,
+    hideLineNumbers: true,
   },
 ]
 
@@ -17,7 +18,7 @@ export default function CodeBlockNoLines() {
             <Label weight={"plus"}>/product-detail.js</Label>
           </CodeBlock.Header.Meta>
         </CodeBlock.Header>
-        <CodeBlock.Body hideLineNumbers={true} />
+        <CodeBlock.Body />
       </CodeBlock>
     </div>
   )

www/apps/ui/src/examples/command-bar-demo.tsx

@@ -0,0 +1,41 @@
+import { Checkbox, CommandBar, Label } from "@medusajs/ui"
+import * as React from "react"
+
+export default function CommandBarDemo() {
+  const [selected, setSelected] = React.useState<boolean>(false)
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="flex items-center gap-x-2">
+        <Checkbox
+          checked={selected}
+          onCheckedChange={(checked) =>
+            setSelected(checked === true ? true : false)
+          }
+        />
+        <Label>Item One</Label>
+      </div>
+      <CommandBar open={selected}>
+        <CommandBar.Bar>
+          <CommandBar.Value>1 selected</CommandBar.Value>
+          <CommandBar.Seperator />
+          <CommandBar.Command
+            action={() => {
+              alert("Delete")
+            }}
+            label="Delete"
+            shortcut="d"
+          />
+          <CommandBar.Seperator />
+          <CommandBar.Command
+            action={() => {
+              alert("Edit")
+            }}
+            label="Edit"
+            shortcut="e"
+          />
+        </CommandBar.Bar>
+      </CommandBar>
+    </div>
+  )
+}

www/apps/ui/src/examples/copy-as-child.tsx

@@ -1,14 +1,14 @@
 import { PlusMini } from "@medusajs/icons"
-import { Button, Copy, Text } from "@medusajs/ui"
+import { Copy, IconButton, Text } from "@medusajs/ui"
 
 export default function CopyAsChild() {
   return (
     <div className="flex items-center gap-x-2">
       <Text>Copy command</Text>
       <Copy content="yarn add @medusajs/ui" asChild>
-        <Button format="icon" size="small" className="text-ui-fg-on-inverted">
+        <IconButton>
           <PlusMini />
-        </Button>
+        </IconButton>
       </Copy>
     </div>
   )

www/apps/ui/src/examples/currency-input-base.tsx

@@ -0,0 +1,9 @@
+import { CurrencyInput } from "@medusajs/ui"
+
+export default function CurrencyInputBase() {
+  return (
+    <div className="max-w-[250px]">
+      <CurrencyInput size="base" symbol="$" code="usd" />
+    </div>
+  )
+}

www/apps/ui/src/examples/currency-input-demo.tsx

@@ -0,0 +1,9 @@
+import { CurrencyInput } from "@medusajs/ui"
+
+export default function CurrencyInputDemo() {
+  return (
+    <div className="max-w-[250px]">
+      <CurrencyInput symbol="$" code="usd" />
+    </div>
+  )
+}

www/apps/ui/src/examples/currency-input-small.tsx

@@ -0,0 +1,9 @@
+import { CurrencyInput } from "@medusajs/ui"
+
+export default function CurrencyInputSmall() {
+  return (
+    <div className="max-w-[250px]">
+      <CurrencyInput size="small" symbol="$" code="usd" />
+    </div>
+  )
+}

www/apps/ui/src/examples/dropdown-menu-demo.tsx

@@ -1,13 +1,13 @@
 import { EllipsisHorizontal, PencilSquare, Plus, Trash } from "@medusajs/icons"
-import { Button, DropdownMenu } from "@medusajs/ui"
+import { DropdownMenu, IconButton } from "@medusajs/ui"
 
 export default function DropdownMenuDemo() {
   return (
     <DropdownMenu>
       <DropdownMenu.Trigger asChild>
-        <Button variant="secondary" format={"icon"}>
+        <IconButton>
           <EllipsisHorizontal />
-        </Button>
+        </IconButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         <DropdownMenu.Item className="gap-x-2">

www/apps/ui/src/examples/dropdown-menu-sorting.tsx

@@ -1,5 +1,5 @@
 import { EllipsisHorizontal } from "@medusajs/icons"
-import { Button, DropdownMenu } from "@medusajs/ui"
+import { DropdownMenu, IconButton } from "@medusajs/ui"
 import React from "react"
 
 type SortingState = "asc" | "desc" | "alpha" | "alpha-reverse" | "none"
@@ -11,9 +11,9 @@ export default function DropdownMenuSorting() {
     <div className="flex flex-col items-center gap-y-2">
       <DropdownMenu>
         <DropdownMenu.Trigger asChild>
-          <Button variant="secondary" format={"icon"}>
+          <IconButton>
             <EllipsisHorizontal />
-          </Button>
+          </IconButton>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content className="w-[300px]">
           <DropdownMenu.RadioGroup

www/apps/ui/src/examples/icon-badge-base.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeBase() {
+  return (
+    <IconBadge size="base">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-blue.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeBlue() {
+  return (
+    <IconBadge color="blue">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-demo.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeDemo() {
+  return (
+    <IconBadge>
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-green.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeGreen() {
+  return (
+    <IconBadge color="green">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-grey.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeGrey() {
+  return (
+    <IconBadge color="grey">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-large.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeLarge() {
+  return (
+    <IconBadge size="large">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-orange.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeOrange() {
+  return (
+    <IconBadge color="orange">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-purple.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgePurple() {
+  return (
+    <IconBadge color="purple">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-badge-red.tsx

@@ -0,0 +1,10 @@
+import { BuildingTax } from "@medusajs/icons"
+import { IconBadge } from "@medusajs/ui"
+
+export default function IconBadgeRed() {
+  return (
+    <IconBadge color="red">
+      <BuildingTax />
+    </IconBadge>
+  )
+}

www/apps/ui/src/examples/icon-button-base.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonBase() {
+  return (
+    <IconButton size="base">
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/icon-button-demo.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonDemo() {
+  return (
+    <IconButton>
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/icon-button-disabled.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonDisabled() {
+  return (
+    <IconButton disabled>
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/icon-button-large.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonLarge() {
+  return (
+    <IconButton size="large">
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/icon-button-loading.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonLoading() {
+  return (
+    <IconButton isLoading>
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/icon-button-primary.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonPrimary() {
+  return (
+    <IconButton variant="primary">
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/icon-button-transparent.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonTransparent() {
+  return (
+    <IconButton variant="transparent">
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/icon-button-xlarge.tsx

@@ -0,0 +1,10 @@
+import { PlusMini } from "@medusajs/icons"
+import { IconButton } from "@medusajs/ui"
+
+export default function IconButtonXLarge() {
+  return (
+    <IconButton size="xlarge">
+      <PlusMini />
+    </IconButton>
+  )
+}

www/apps/ui/src/examples/progress-accordion-demo.tsx

@@ -0,0 +1,36 @@
+import { ProgressAccordion, Text } from "@medusajs/ui"
+
+export default function ProgressAccordionDemo() {
+  return (
+    <div className="w-full px-4">
+      <ProgressAccordion type="single">
+        <ProgressAccordion.Item value="general">
+          <ProgressAccordion.Header>General</ProgressAccordion.Header>
+          <ProgressAccordion.Content>
+            <div className="pb-6">
+              <Text size="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                ornare, tortor nec commodo ultrices, diam leo porttitor eros,
+                eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
+                lacinia ipsum id, varius velit.
+              </Text>
+            </div>
+          </ProgressAccordion.Content>
+        </ProgressAccordion.Item>
+        <ProgressAccordion.Item value="shipping">
+          <ProgressAccordion.Header>Shipping</ProgressAccordion.Header>
+          <ProgressAccordion.Content>
+            <div className="pb-6">
+              <Text size="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                ornare, tortor nec commodo ultrices, diam leo porttitor eros,
+                eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
+                lacinia ipsum id, varius velit.
+              </Text>
+            </div>
+          </ProgressAccordion.Content>
+        </ProgressAccordion.Item>
+      </ProgressAccordion>
+    </div>
+  )
+}

www/apps/ui/src/examples/progress-accordion-multiple.tsx

@@ -0,0 +1,36 @@
+import { ProgressAccordion, Text } from "@medusajs/ui"
+
+export default function ProgressAccordionSingle() {
+  return (
+    <div className="w-full px-4">
+      <ProgressAccordion type="multiple">
+        <ProgressAccordion.Item value="general">
+          <ProgressAccordion.Header>General</ProgressAccordion.Header>
+          <ProgressAccordion.Content>
+            <div className="pb-6">
+              <Text size="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                ornare, tortor nec commodo ultrices, diam leo porttitor eros,
+                eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
+                lacinia ipsum id, varius velit.
+              </Text>
+            </div>
+          </ProgressAccordion.Content>
+        </ProgressAccordion.Item>
+        <ProgressAccordion.Item value="shipping">
+          <ProgressAccordion.Header>Shipping</ProgressAccordion.Header>
+          <ProgressAccordion.Content>
+            <div className="pb-6">
+              <Text size="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                ornare, tortor nec commodo ultrices, diam leo porttitor eros,
+                eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
+                lacinia ipsum id, varius velit.
+              </Text>
+            </div>
+          </ProgressAccordion.Content>
+        </ProgressAccordion.Item>
+      </ProgressAccordion>
+    </div>
+  )
+}

www/apps/ui/src/examples/progress-accordion-single.tsx

@@ -0,0 +1,36 @@
+import { ProgressAccordion, Text } from "@medusajs/ui"
+
+export default function ProgressAccordionSingle() {
+  return (
+    <div className="w-full px-4">
+      <ProgressAccordion type="single">
+        <ProgressAccordion.Item value="general">
+          <ProgressAccordion.Header>General</ProgressAccordion.Header>
+          <ProgressAccordion.Content>
+            <div className="pb-6">
+              <Text size="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                ornare, tortor nec commodo ultrices, diam leo porttitor eros,
+                eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
+                lacinia ipsum id, varius velit.
+              </Text>
+            </div>
+          </ProgressAccordion.Content>
+        </ProgressAccordion.Item>
+        <ProgressAccordion.Item value="shipping">
+          <ProgressAccordion.Header>Shipping</ProgressAccordion.Header>
+          <ProgressAccordion.Content>
+            <div className="pb-6">
+              <Text size="small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                ornare, tortor nec commodo ultrices, diam leo porttitor eros,
+                eget ultricies mauris nisl nec nisl. Donec quis magna euismod,
+                lacinia ipsum id, varius velit.
+              </Text>
+            </div>
+          </ProgressAccordion.Content>
+        </ProgressAccordion.Item>
+      </ProgressAccordion>
+    </div>
+  )
+}

www/apps/ui/src/examples/progress-tabs-demo.tsx

@@ -0,0 +1,53 @@
+import { ProgressTabs, Text } from "@medusajs/ui"
+
+export default function ProgressTabsDemo() {
+  return (
+    <div className="w-full px-4">
+      <ProgressTabs defaultValue="general">
+        <div className="border-b border-ui-border-base">
+          <ProgressTabs.List>
+            <ProgressTabs.Trigger value="general">General</ProgressTabs.Trigger>
+            <ProgressTabs.Trigger value="shipping">
+              Shipping
+            </ProgressTabs.Trigger>
+            <ProgressTabs.Trigger value="payment">Payment</ProgressTabs.Trigger>
+          </ProgressTabs.List>
+        </div>
+        <div className="mt-2">
+          <ProgressTabs.Content value="general">
+            <Text size="small">
+              At ACME, we&apos;re dedicated to providing you with an exceptional
+              shopping experience. Our wide selection of products caters to your
+              every need, from fashion to electronics and beyond. We take pride
+              in our commitment to quality, customer satisfaction, and timely
+              delivery. Our friendly customer support team is here to assist you
+              with any inquiries or concerns you may have. Thank you for
+              choosing ACME as your trusted online shopping destination.
+            </Text>
+          </ProgressTabs.Content>
+          <ProgressTabs.Content value="shipping">
+            <Text size="small">
+              Shipping is a crucial part of our service, designed to ensure your
+              products reach you quickly and securely. Our dedicated team works
+              tirelessly to process orders, carefully package items, and
+              coordinate with reliable carriers to deliver your purchases to
+              your doorstep. We take pride in our efficient shipping process,
+              guaranteeing your satisfaction with every delivery.
+            </Text>
+          </ProgressTabs.Content>
+          <ProgressTabs.Content value="payment">
+            <Text size="small">
+              Our payment process is designed to make your shopping experience
+              smooth and secure. We offer a variety of payment options to
+              accommodate your preferences, from credit and debit cards to
+              online payment gateways. Rest assured that your financial
+              information is protected through advanced encryption methods.
+              Shopping with us means you can shop with confidence, knowing your
+              payments are safe and hassle-free.
+            </Text>
+          </ProgressTabs.Content>
+        </div>
+      </ProgressTabs>
+    </div>
+  )
+}

www/apps/ui/src/examples/status-badge-blue.tsx

@@ -0,0 +1,5 @@
+import { StatusBadge } from "@medusajs/ui"
+
+export default function StatusBadgeBlue() {
+  return <StatusBadge color="blue">Status</StatusBadge>
+}

www/apps/ui/src/examples/status-badge-demo.tsx

@@ -0,0 +1,5 @@
+import { StatusBadge } from "@medusajs/ui"
+
+export default function StatusBadgeDemo() {
+  return <StatusBadge>Status</StatusBadge>
+}

www/apps/ui/src/examples/status-badge-green.tsx

@@ -0,0 +1,5 @@
+import { StatusBadge } from "@medusajs/ui"
+
+export default function StatusBadgeGreen() {
+  return <StatusBadge color="green">Status</StatusBadge>
+}

www/apps/ui/src/examples/status-badge-grey.tsx

@@ -0,0 +1,5 @@
+import { StatusBadge } from "@medusajs/ui"
+
+export default function StatusBadgeGrey() {
+  return <StatusBadge color="grey">Status</StatusBadge>
+}

www/apps/ui/src/examples/status-badge-orange.tsx

@@ -0,0 +1,5 @@
+import { StatusBadge } from "@medusajs/ui"
+
+export default function StatusBadgeOrange() {
+  return <StatusBadge color="orange">Status</StatusBadge>
+}

www/apps/ui/src/examples/status-badge-purple.tsx

@@ -0,0 +1,5 @@
+import { StatusBadge } from "@medusajs/ui"
+
+export default function StatusBadgePurple() {
+  return <StatusBadge color="purple">Status</StatusBadge>
+}

www/apps/ui/src/examples/status-badge-red.tsx

@@ -0,0 +1,5 @@
+import { StatusBadge } from "@medusajs/ui"
+
+export default function StatusBadgeRed() {
+  return <StatusBadge color="red">Status</StatusBadge>
+}

www/apps/ui/src/examples/tabs-demo.tsx

@@ -0,0 +1,49 @@
+import { Tabs, Text } from "@medusajs/ui"
+
+export default function TabsDemo() {
+  return (
+    <div className="w-full px-4">
+      <Tabs defaultValue="general">
+        <Tabs.List>
+          <Tabs.Trigger value="general">General</Tabs.Trigger>
+          <Tabs.Trigger value="shipping">Shipping</Tabs.Trigger>
+          <Tabs.Trigger value="payment">Payment</Tabs.Trigger>
+        </Tabs.List>
+        <div className="mt-2">
+          <Tabs.Content value="general">
+            <Text size="small">
+              At ACME, we&apos;re dedicated to providing you with an exceptional
+              shopping experience. Our wide selection of products caters to your
+              every need, from fashion to electronics and beyond. We take pride
+              in our commitment to quality, customer satisfaction, and timely
+              delivery. Our friendly customer support team is here to assist you
+              with any inquiries or concerns you may have. Thank you for
+              choosing ACME as your trusted online shopping destination.
+            </Text>
+          </Tabs.Content>
+          <Tabs.Content value="shipping">
+            <Text size="small">
+              Shipping is a crucial part of our service, designed to ensure your
+              products reach you quickly and securely. Our dedicated team works
+              tirelessly to process orders, carefully package items, and
+              coordinate with reliable carriers to deliver your purchases to
+              your doorstep. We take pride in our efficient shipping process,
+              guaranteeing your satisfaction with every delivery.
+            </Text>
+          </Tabs.Content>
+          <Tabs.Content value="payment">
+            <Text size="small">
+              Our payment process is designed to make your shopping experience
+              smooth and secure. We offer a variety of payment options to
+              accommodate your preferences, from credit and debit cards to
+              online payment gateways. Rest assured that your financial
+              information is protected through advanced encryption methods.
+              Shopping with us means you can shop with confidence, knowing your
+              payments are safe and hassle-free.
+            </Text>
+          </Tabs.Content>
+        </div>
+      </Tabs>
+    </div>
+  )
+}