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/components/component-example.tsx

@@ -1,13 +1,12 @@
 "use client"
 
 import { Spinner } from "@medusajs/icons"
-import * as React from "react"
-import { ExampleRegistry } from "../registries/example-registry"
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs"
-import { Feedback } from "./feedback"
-import clsx from "clsx"
+import { Tabs, clx } from "@medusajs/ui"
 import { CodeBlock } from "docs-ui"
+import * as React from "react"
+
+import { Feedback } from "@/components/feedback"
+import { ExampleRegistry } from "@/registries/example-registry"
 
 interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string
@@ -34,14 +33,17 @@ export function ComponentExample({
   return (
     <div className="relative my-4 flex flex-col space-y-2" {...props}>
       <Tabs defaultValue="preview" className="relative mr-auto w-full">
-        <div className="flex flex-col items-center justify-between pb-3">
-          <TabsList className="">
-            <TabsTrigger value="preview">Preview</TabsTrigger>
-            <TabsTrigger value="code">Code</TabsTrigger>
-          </TabsList>
-          <TabsContent value="preview" className="relative">
+        <div className="flex flex-col pb-3">
+          <Tabs.List>
+            <Tabs.Trigger value="preview">Preview</Tabs.Trigger>
+            <Tabs.Trigger value="code">Code</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content
+            value="preview"
+            className="relative data-[state=active]:mt-4"
+          >
             <div
-              className={clsx(
+              className={clx(
                 "bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
                 "w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
               )}
@@ -56,10 +58,13 @@ export function ComponentExample({
                 {Preview}
               </React.Suspense>
             </div>
-          </TabsContent>
-          <TabsContent value="code" className="relative ">
+          </Tabs.Content>
+          <Tabs.Content
+            value="code"
+            className="relative data-[state=active]:mt-4"
+          >
             <CodeBlock source={Code} lang="tsx" />
-          </TabsContent>
+          </Tabs.Content>
         </div>
       </Tabs>
       <Feedback

www/apps/ui/src/components/navbar.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { docsConfig } from "@/config/docs"
-import { Navbar as UiNavbar, useSidebar } from "docs-ui"
 import { basePathUrl } from "@/lib/base-path-url"
+import { Navbar as UiNavbar, useSidebar } from "docs-ui"
 
 const Navbar = () => {
   const { mobileSidebarOpen, setMobileSidebarOpen } = useSidebar()

www/apps/ui/src/components/tabs.tsx

@@ -1,62 +0,0 @@
-"use client"
-
-import { clx } from "@medusajs/ui"
-import * as Primitives from "@radix-ui/react-tabs"
-import * as React from "react"
-import { Key } from "@/types/props"
-
-const Tabs = Primitives.Root
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof Primitives.List>,
-  React.ComponentPropsWithoutRef<typeof Primitives.List>
-  // eslint-disable-next-line react/prop-types
->(({ className, key, ...props }, ref) => (
-  <Primitives.List
-    ref={ref}
-    className={clx(
-      "inline-flex h-10 w-full items-end justify-start rounded-none bg-transparent p-0",
-      className
-    )}
-    key={key as Key}
-    {...props}
-  />
-))
-TabsList.displayName = "TabsList"
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof Primitives.Trigger>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Trigger>
-  // eslint-disable-next-line react/prop-types
->(({ className, key, ...props }, ref) => (
-  <Primitives.Trigger
-    ref={ref}
-    className={clx(
-      "text-medusa-fg-subtle txt-compact-small-plus rounded-full px-3 py-1.5 transition-all",
-      "data-[state=active]:shadow-card-rest dark:data-[state=active]:shadow-card-rest-dark data-[state=active]:text-medusa-fg-base",
-      className
-    )}
-    key={key as Key}
-    {...props}
-  />
-))
-TabsTrigger.displayName = "TabsTrigger"
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof Primitives.Content>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Content>
-  // eslint-disable-next-line react/prop-types
->(({ className, key, ...props }, ref) => (
-  <Primitives.Content
-    ref={ref}
-    className={clx(
-      "w-full rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[state=active]:mt-4",
-      className
-    )}
-    key={key as Key}
-    {...props}
-  />
-))
-TabsContent.displayName = "TabsContent"
-
-export { Tabs, TabsContent, TabsList, TabsTrigger }