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/props/badge.tsx

@@ -1,7 +1,7 @@
 import { PropTable } from "@/components/props-table"
 import { PropDataMap } from "@/types/props"
 
-const badgeProps: PropDataMap = [
+const iconBadgeProps: PropDataMap = [
   {
     prop: "color",
     type: {
@@ -19,17 +19,17 @@ const badgeProps: PropDataMap = [
     defaultValue: "base",
   },
   {
-    prop: "type",
+    prop: "rounded",
     type: {
       type: "enum",
-      values: ["default", "rounded", "icon"],
+      values: ["base", "rounded"],
     },
-    defaultValue: "default",
+    defaultValue: "base",
   },
 ]
 
 const Props = () => {
-  return <PropTable props={badgeProps} />
+  return <PropTable props={iconBadgeProps} />
 }
 
 export default Props

www/apps/ui/src/props/button.tsx

@@ -18,14 +18,6 @@ const buttonProps: PropDataMap = [
     },
     defaultValue: "base",
   },
-  {
-    prop: "format",
-    type: {
-      type: "enum",
-      values: ["default", "icon"],
-    },
-    defaultValue: "default",
-  },
   {
     prop: "isLoading",
     type: "boolean",

www/apps/ui/src/props/code-block.tsx

@@ -7,7 +7,8 @@ const codeBlockProps: PropDataMap = [
     type: {
       type: "object",
       name: "CodeSnippet[]",
-      shape: "{\n  label: string\n  language: string\n  code: string\n}[]",
+      shape:
+        "{\n  label: string\n  language: string\n  code: string\n  hideLineNumbers?: boolean\n}[]",
     },
   },
 ]

www/apps/ui/src/props/command-bar-command.tsx

@@ -0,0 +1,23 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const commandBarCommandProps: PropDataMap = [
+  {
+    prop: "action",
+    type: "function",
+  },
+  {
+    prop: "label",
+    type: "string",
+  },
+  {
+    prop: "shortcut",
+    type: "string",
+  },
+]
+
+const Props = () => {
+  return <PropTable props={commandBarCommandProps} />
+}
+
+export default Props

www/apps/ui/src/props/command-bar.tsx

@@ -1,16 +1,16 @@
 import { PropTable } from "@/components/props-table"
 import { PropDataMap } from "@/types/props"
 
-const codeBlockBodyProps: PropDataMap = [
+const commandBarProps: PropDataMap = [
   {
-    prop: "hideLineNumbers",
+    prop: "open",
     type: "boolean",
     defaultValue: false,
   },
 ]
 
 const Props = () => {
-  return <PropTable props={codeBlockBodyProps} />
+  return <PropTable props={commandBarProps} />
 }
 
 export default Props

www/apps/ui/src/props/currency-input.tsx

@@ -0,0 +1,19 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const currencyInputProps: PropDataMap = [
+  {
+    prop: "symbol",
+    type: "string",
+  },
+  {
+    prop: "code",
+    type: "string",
+  },
+]
+
+const Props = () => {
+  return <PropTable props={currencyInputProps} />
+}
+
+export default Props

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

@@ -0,0 +1,27 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const badgeProps: PropDataMap = [
+  {
+    prop: "color",
+    type: {
+      type: "enum",
+      values: ["green", "red", "blue", "orange", "grey", "purple"],
+    },
+    defaultValue: "grey",
+  },
+  {
+    prop: "size",
+    type: {
+      type: "enum",
+      values: ["base", "large"],
+    },
+    defaultValue: "base",
+  },
+]
+
+const Props = () => {
+  return <PropTable props={badgeProps} />
+}
+
+export default Props

www/apps/ui/src/props/icon-button.tsx

@@ -0,0 +1,32 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const iconButtonProps: PropDataMap = [
+  {
+    prop: "variant",
+    type: {
+      type: "enum",
+      values: ["primary", "transparent"],
+    },
+    defaultValue: "primary",
+  },
+  {
+    prop: "size",
+    type: {
+      type: "enum",
+      values: ["base", "large", "xlarge"],
+    },
+    defaultValue: "base",
+  },
+  {
+    prop: "isLoading",
+    type: "boolean",
+    defaultValue: false,
+  },
+]
+
+const Props = () => {
+  return <PropTable props={iconButtonProps} />
+}
+
+export default Props

www/apps/ui/src/props/progress-accordion-header.tsx

@@ -0,0 +1,19 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const progressAccordionHeaderProps: PropDataMap = [
+  {
+    prop: "status",
+    type: {
+      type: "enum",
+      values: ["not-started", "in-progress", "completed"],
+    },
+    defaultValue: "not-started",
+  },
+]
+
+const Props = () => {
+  return <PropTable props={progressAccordionHeaderProps} />
+}
+
+export default Props

www/apps/ui/src/props/progress-tabs-trigger.tsx

@@ -0,0 +1,19 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const progressTabsTriggerProps: PropDataMap = [
+  {
+    prop: "status",
+    type: {
+      type: "enum",
+      values: ["not-started", "in-progress", "completed"],
+    },
+    defaultValue: "not-started",
+  },
+]
+
+const Props = () => {
+  return <PropTable props={progressTabsTriggerProps} />
+}
+
+export default Props

www/apps/ui/src/props/status-badge.tsx

@@ -0,0 +1,19 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const statusBadgeProps: PropDataMap = [
+  {
+    prop: "color",
+    type: {
+      type: "enum",
+      values: ["green", "red", "blue", "orange", "grey", "purple"],
+    },
+    defaultValue: "grey",
+  },
+]
+
+const Props = () => {
+  return <PropTable props={statusBadgeProps} />
+}
+
+export default Props