docs: improvements of docs UI (#6038)

* docs: improvements of docs UI

* changed note about icon sizes

www/apps/ui/src/components/icon-search.tsx

@@ -1,8 +1,9 @@
 "use client"
 
 import * as Icons from "@medusajs/icons"
-import { Container, Input, Text, Tooltip } from "@medusajs/ui"
+import { Container, Input, Text } from "@medusajs/ui"
 import clsx from "clsx"
+import { CopyButton } from "docs-ui"
 import * as React from "react"
 
 const iconNames = Object.keys(Icons).filter((name) => name !== "default")
@@ -56,7 +57,7 @@ const SearchResults = ({ query = "" }: { query?: string }) => {
             key={name}
             className="flex h-full w-full items-center justify-center"
           >
-            <Tooltip content={name}>
+            <CopyButton text={name} tooltipText={name}>
               <div
                 className={clsx(
                   "border-medusa-border-base",
@@ -73,7 +74,7 @@ const SearchResults = ({ query = "" }: { query?: string }) => {
                   {React.createElement(Icons[name as keyof typeof Icons])}
                 </div>
               </div>
-            </Tooltip>
+            </CopyButton>
           </div>
         )
       })}

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

@@ -39,4 +39,12 @@ import { Table } from "@medusajs/ui"
 <ComponentReference mainComponent="Table" componentsToShow={[
   "Table",
   "Table.Pagination"
-]} />
+]} />
+
+## Examples
+
+---
+
+### Table with Pagination
+
+<ComponentExample name="table-pagination" />

www/apps/ui/src/content/docs/icons/overview.mdx

@@ -21,7 +21,34 @@ The icons are available as an [npm package](https://www.npmjs.com/package/@medus
 ---
 
 ```tsx
-import { Sun, Moon } from "@medusajs/icons"
+import { Sun } from "@medusajs/icons"
+
+export default function Component() {
+  return (
+    <Sun />
+  )
+}
 ```
 
-<Feedback title={"Icons"} />
+<Feedback title={"Icons"} />
+
+## Icon Props
+---
+
+Icons accept all props that an `svg` element accepts.
+
+### Icon Color
+
+By default, outline icons' stroke color and solid icon's fill color are set to `currentColor`.
+
+You can set a different color by passing the `color` prop.
+
+<ComponentExample name="icon-color" />
+
+You can also use a CSS class by passing the `className` prop.
+
+<ComponentExample name="icon-color-classes" />
+
+### Icon Size
+
+All icon's width and height are `20px` and it's not possible to change them.

www/apps/ui/src/examples/icon-color-classes.tsx

@@ -0,0 +1,5 @@
+import { Sun } from "@medusajs/icons"
+
+export default function Component() {
+  return <Sun className="text-ui-fg-interactive" />
+}

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

@@ -0,0 +1,5 @@
+import { Sun } from "@medusajs/icons"
+
+export default function Component() {
+  return <Sun color="#FDB813" />
+}

www/apps/ui/src/examples/table-pagination.tsx

@@ -0,0 +1,135 @@
+import { Table } from "@medusajs/ui"
+import { useMemo, useState } from "react"
+
+type Order = {
+  id: string
+  displayId: number
+  customer: string
+  email: string
+  amount: number
+  currency: string
+}
+
+export default function TableDemo() {
+  const fakeData: Order[] = useMemo(
+    () => [
+      {
+        id: "order_6782",
+        displayId: 86078,
+        customer: "Jill Miller",
+        email: "32690@gmail.com",
+        amount: 493,
+        currency: "EUR",
+      },
+      {
+        id: "order_46487",
+        displayId: 42845,
+        customer: "Sarah Garcia",
+        email: "86379@gmail.com",
+        amount: 113,
+        currency: "JPY",
+      },
+      {
+        id: "order_8169",
+        displayId: 39129,
+        customer: "Josef Smith",
+        email: "89383@gmail.com",
+        amount: 43,
+        currency: "USD",
+      },
+      {
+        id: "order_67883",
+        displayId: 5548,
+        customer: "Elvis Jones",
+        email: "52860@gmail.com",
+        amount: 840,
+        currency: "GBP",
+      },
+      {
+        id: "order_61121",
+        displayId: 87668,
+        customer: "Charles Rodriguez",
+        email: "45675@gmail.com",
+        amount: 304,
+        currency: "GBP",
+      },
+    ],
+    []
+  )
+  const [currentPage, setCurrentPage] = useState(0)
+  const pageSize = 3
+  const pageCount = Math.ceil(fakeData.length / pageSize)
+  const canNextPage = useMemo(
+    () => currentPage < pageCount - 1,
+    [currentPage, pageCount]
+  )
+  const canPreviousPage = useMemo(() => currentPage - 1 >= 0, [currentPage])
+
+  const nextPage = () => {
+    if (canNextPage) {
+      setCurrentPage(currentPage + 1)
+    }
+  }
+
+  const previousPage = () => {
+    if (canPreviousPage) {
+      setCurrentPage(currentPage - 1)
+    }
+  }
+
+  const currentOrders = useMemo(() => {
+    const offset = currentPage * pageSize
+    const limit = Math.min(offset + pageSize, fakeData.length)
+
+    return fakeData.slice(offset, limit)
+  }, [currentPage, pageSize, fakeData])
+
+  return (
+    <div className="flex gap-1 flex-col">
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>#</Table.HeaderCell>
+            <Table.HeaderCell>Customer</Table.HeaderCell>
+            <Table.HeaderCell>Email</Table.HeaderCell>
+            <Table.HeaderCell className="text-right">Amount</Table.HeaderCell>
+            <Table.HeaderCell></Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {currentOrders.map((order) => {
+            return (
+              <Table.Row
+                key={order.id}
+                className="[&_td:last-child]:w-[1%] [&_td:last-child]:whitespace-nowrap"
+              >
+                <Table.Cell>{order.displayId}</Table.Cell>
+                <Table.Cell>{order.customer}</Table.Cell>
+                <Table.Cell>{order.email}</Table.Cell>
+                <Table.Cell className="text-right">
+                  {new Intl.NumberFormat("en-US", {
+                    style: "currency",
+                    currency: order.currency,
+                  }).format(order.amount)}
+                </Table.Cell>
+                <Table.Cell className="text-ui-fg-muted">
+                  {order.currency}
+                </Table.Cell>
+              </Table.Row>
+            )
+          })}
+        </Table.Body>
+      </Table>
+      <Table.Pagination
+        count={fakeData.length}
+        pageSize={pageSize}
+        pageIndex={currentPage}
+        pageCount={fakeData.length}
+        canPreviousPage={canPreviousPage}
+        canNextPage={canNextPage}
+        previousPage={previousPage}
+        nextPage={nextPage}
+      />
+    </div>
+  )
+}

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

@@ -330,6 +330,11 @@ export const ExampleRegistry: Record<string, ExampleType> = {
     ),
     file: "src/examples/switch-checked-disabled.tsx",
   },
+  "table-pagination": {
+    name: "table-pagination",
+    component: React.lazy(async () => import("@/examples/table-pagination")),
+    file: "src/examples/table-pagination.tsx",
+  },
   "table-demo": {
     name: "table-demo",
     component: React.lazy(async () => import("@/examples/table-demo")),
@@ -459,6 +464,16 @@ export const ExampleRegistry: Record<string, ExampleType> = {
     component: React.lazy(async () => import("@/examples/icon-button-xlarge")),
     file: "src/examples/icon-button-xlarge.tsx",
   },
+  "icon-color-classes": {
+    name: "icon-color-classes",
+    component: React.lazy(async () => import("@/examples/icon-color-classes")),
+    file: "src/examples/icon-color-classes.tsx",
+  },
+  "icon-color": {
+    name: "icon-color",
+    component: React.lazy(async () => import("@/examples/icon-color")),
+    file: "src/examples/icon-color.tsx",
+  },
   "currency-input-demo": {
     name: "currency-input-demo",
     component: React.lazy(async () => import("@/examples/currency-input-demo")),

www/packages/docs-ui/src/components/CopyButton/index.tsx

@@ -9,12 +9,14 @@ export type CopyButtonProps = {
   text: string
   buttonClassName?: string
   tooltipClassName?: string
+  tooltipText?: string
 } & React.HTMLAttributes<HTMLDivElement>
 
 export const CopyButton = ({
   text,
   buttonClassName = "",
   tooltipClassName = "",
+  tooltipText = "Copy to Clipboard",
   children,
   className,
 }: CopyButtonProps) => {
@@ -22,7 +24,7 @@ export const CopyButton = ({
 
   return (
     <Tooltip
-      text={isCopied ? `Copied!` : `Copy to Clipboard`}
+      text={isCopied ? `Copied!` : tooltipText}
       tooltipClassName={tooltipClassName}
       className={className}
     >