chore(docs): Updated UI Reference (#6347)

* chore(docs): Generated UI Reference

* fixed props typing + added new alert page

* updated ui dependencies

---------

Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com>
Co-authored-by: Shahed Nasser <shahednasser@gmail.com>

www/apps/ui/src/config/docs.tsx

@@ -103,6 +103,11 @@ export const docsConfig: DocsConfig = {
       {
         title: "Components",
         children: [
+          {
+            title: "Alert",
+            path: "/components/alert",
+            isPathHref: true,
+          },
           {
             title: "Avatar",
             path: "/components/avatar",

www/apps/ui/src/content/docs/components/alert.mdx

@@ -0,0 +1,45 @@
+---
+title: "Avatar"
+description: "An image element with a fallback for representing the user."
+component: true
+---
+
+<ComponentExample name="alert-demo" />
+
+## Usage
+
+---
+
+```tsx
+import { Alert } from "@medusajs/ui"
+```
+
+```tsx
+<Alert>Here's a message</Alert>
+```
+
+## API Reference
+
+---
+
+<ComponentReference mainComponent="Alert" />
+
+## Examples
+
+---
+
+### Success Alert
+
+<ComponentExample name="alert-success" />
+
+### Warning Alert
+
+<ComponentExample name="alert-warning" />
+
+### Error Alert
+
+<ComponentExample name="alert-error" />
+
+### Dismissable Alert
+
+<ComponentExample name="alert-dismissable" />

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

@@ -0,0 +1,5 @@
+import { Alert } from "@medusajs/ui"
+
+export default function AlertDemo() {
+  return <Alert>You are viewing Medusa docs.</Alert>
+}

www/apps/ui/src/examples/alert-dismissable.tsx

@@ -0,0 +1,5 @@
+import { Alert } from "@medusajs/ui"
+
+export default function AlertDismissable() {
+  return <Alert dismissible={true}>You are viewing Medusa docs.</Alert>
+}

www/apps/ui/src/examples/alert-error.tsx

@@ -0,0 +1,5 @@
+import { Alert } from "@medusajs/ui"
+
+export default function AlertError() {
+  return <Alert variant="error">An error occured while updating data.</Alert>
+}

www/apps/ui/src/examples/alert-success.tsx

@@ -0,0 +1,5 @@
+import { Alert } from "@medusajs/ui"
+
+export default function AlertSuccess() {
+  return <Alert variant="success">Data updated successfully!</Alert>
+}

www/apps/ui/src/examples/alert-warning.tsx

@@ -0,0 +1,5 @@
+import { Alert } from "@medusajs/ui"
+
+export default function AlertWarning() {
+  return <Alert variant="warning">Be careful!</Alert>
+}

www/apps/ui/src/registries/example-registry.tsx

@@ -7,6 +7,31 @@ type ExampleType = {
 }
 
 export const ExampleRegistry: Record<string, ExampleType> = {
+  "alert-demo": {
+    name: "alert-demo",
+    component: React.lazy(async () => import("@/examples/alert-demo")),
+    file: "src/examples/alert-demo.tsx",
+  },
+  "alert-dismissable": {
+    name: "alert-dismissable",
+    component: React.lazy(async () => import("@/examples/alert-dismissable")),
+    file: "src/examples/alert-dismissable.tsx",
+  },
+  "alert-error": {
+    name: "alert-error",
+    component: React.lazy(async () => import("@/examples/alert-error")),
+    file: "src/examples/alert-error.tsx",
+  },
+  "alert-success": {
+    name: "alert-success",
+    component: React.lazy(async () => import("@/examples/alert-success")),
+    file: "src/examples/alert-demo.tsx",
+  },
+  "alert-warning": {
+    name: "alert-warning",
+    component: React.lazy(async () => import("@/examples/alert-warning")),
+    file: "src/examples/alert-demo.tsx",
+  },
   "avatar-demo": {
     name: "avatar-demo",
     component: React.lazy(async () => import("@/examples/avatar-demo")),

www/apps/ui/src/specs/Alert/Alert.json

@@ -0,0 +1,48 @@
+{
+  "description": "This component is based on the div element and supports all of its props",
+  "methods": [],
+  "displayName": "Alert",
+  "props": {
+    "variant": {
+      "required": false,
+      "tsType": {
+        "name": "union",
+        "raw": "\"error\" | \"success\" | \"warning\" | \"info\"",
+        "elements": [
+          {
+            "name": "literal",
+            "value": "\"error\""
+          },
+          {
+            "name": "literal",
+            "value": "\"success\""
+          },
+          {
+            "name": "literal",
+            "value": "\"warning\""
+          },
+          {
+            "name": "literal",
+            "value": "\"info\""
+          }
+        ]
+      },
+      "description": "The variant of the alert",
+      "defaultValue": {
+        "value": "\"info\"",
+        "computed": false
+      }
+    },
+    "dismissible": {
+      "required": false,
+      "tsType": {
+        "name": "boolean"
+      },
+      "description": "Whether the alert is dismissible",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    }
+  }
+}

www/apps/ui/src/specs/Button/Button.json

@@ -33,7 +33,7 @@
       "description": "The button's style.",
       "tsType": {
         "name": "union",
-        "raw": "\"primary\" \\| \"secondary\" \\| \"transparent\" \\| \"danger\"",
+        "raw": "\"primary\" \\| \"transparent\" \\| \"secondary\" \\| \"danger\"",
         "elements": [
           {
             "name": "literal",
@@ -41,11 +41,11 @@
           },
           {
             "name": "literal",
-            "value": "\"secondary\""
+            "value": "\"transparent\""
           },
           {
             "name": "literal",
-            "value": "\"transparent\""
+            "value": "\"secondary\""
           },
           {
             "name": "literal",

www/apps/ui/src/specs/Heading/Heading.json

@@ -11,8 +11,12 @@
       "description": "The heading level which specifies which heading element is used.",
       "tsType": {
         "name": "union",
-        "raw": "\"h2\" \\| \"h3\" \\| \"h1\"",
+        "raw": "\"h1\" \\| \"h2\" \\| \"h3\"",
         "elements": [
+          {
+            "name": "literal",
+            "value": "\"h1\""
+          },
           {
             "name": "literal",
             "value": "\"h2\""
@@ -20,10 +24,6 @@
           {
             "name": "literal",
             "value": "\"h3\""
-          },
-          {
-            "name": "literal",
-            "value": "\"h1\""
           }
         ]
       },

www/apps/ui/src/specs/IconButton/IconButton.json

@@ -55,8 +55,16 @@
       "description": "The button's size.",
       "tsType": {
         "name": "union",
-        "raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
+        "raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
         "elements": [
+          {
+            "name": "literal",
+            "value": "\"2xsmall\""
+          },
+          {
+            "name": "literal",
+            "value": "\"xsmall\""
+          },
           {
             "name": "literal",
             "value": "\"small\""