asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Kasper Fabricius Kristensen
2023-09-27 18:56:25 +03:00
committed by GitHub
co-authored by Shahed Nasser
parent f5a698ad6f
commit 4e3f3b54cb
79 changed files with 1689 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/ui/src/components/component-example.tsx
+21 -16
View File
@@ -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 -1
View File
@@ -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
-62
View File
@@ -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 }
www/apps/ui/src/config/colors.ts
+65 -91
View File
@@ -1,5 +1,31 @@
export const colors = {
dark: {
"--code-text-subtle": "rgba(105, 110, 119, 1)",
"--button-transparent-pressed": "rgba(46, 48, 53, 1)",
"--border-base": "rgba(46, 48, 53, 1)",
"--code-text-base": "rgba(237, 238, 240, 1)",
"--tag-neutral-icon": "rgba(125, 130, 138, 1)",
"--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--button-neutral-hover": "rgba(53, 55, 60, 1)",
"--bg-switch-off": "rgba(53, 55, 60, 1)",
"--border-strong": "rgba(53, 55, 60, 1)",
"--fg-subtle": "rgba(173, 177, 184, 1)",
"--fg-base": "rgba(237, 238, 240, 1)",
"--bg-base-hover": "rgba(39, 40, 45, 1)",
"--bg-subtle-hover": "rgba(27, 27, 31, 1)",
"--fg-disabled": "rgba(60, 63, 68, 1)",
"--bg-subtle": "rgba(24, 24, 26, 1)",
"--tag-neutral-border": "rgba(60, 63, 68, 1)",
"--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
"--tag-neutral-text": "rgba(173, 177, 184, 1)",
"--fg-muted": "rgba(105, 110, 119, 1)",
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
"--code-bg-header": "rgba(24, 24, 26, 1)",
"--border-loud": "rgba(237, 238, 240, 1)",
"--bg-base-pressed": "rgba(46, 48, 53, 1)",
"--bg-disabled": "rgba(39, 40, 45, 1)",
"--code-icon": "rgba(70, 75, 80, 1)",
"--bg-highlight-hover": "rgba(30, 58, 138, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--border-interactive": "rgba(96, 165, 250, 1)",
@@ -11,95 +37,61 @@ export const colors = {
"--button-danger": "rgba(159, 18, 57, 1)",
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-overlay": "rgba(10, 10, 10, 0.7)",
"--fg-interactive": "rgba(96, 165, 250, 1)",
"--fg-on-inverted": "rgba(10, 10, 10, 1)",
"--button-danger-pressed": "rgba(159, 18, 57, 1)",
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--button-neutral-pressed": "rgba(38, 38, 38, 1)",
"--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--bg-overlay": "rgba(24, 24, 26, 0.7)",
"--fg-on-inverted": "rgba(24, 24, 26, 1)",
"--button-neutral-pressed": "rgba(60, 63, 68, 1)",
"--tag-red-border": "rgba(136, 19, 55, 1)",
"--tag-red-bg": "rgba(76, 5, 25, 1)",
"--button-transparent-hover": "rgba(38, 38, 38, 1)",
"--button-transparent-hover": "rgba(39, 40, 45, 1)",
"--tag-blue-text": "rgba(96, 165, 250, 1)",
"--button-inverted": "rgba(238, 238, 238, 1)",
"--button-inverted-gradient-from": "rgba(0, 0, 0, 0)",
"--button-inverted-gradient-to": "rgba(0, 0, 0, 1)",
"--tag-orange-text": "rgba(251, 191, 36, 1)",
"--tag-green-text": "rgba(52, 211, 153, 1)",
"--button-transparent": "rgba(0, 0, 0, 0)",
"--button-transparent-pressed": "rgba(48, 48, 48, 1)",
"--tag-neutral-bg": "rgba(48, 48, 48, 1)",
"--code-text-subtle": "rgba(110, 110, 110, 1)",
"--code-bg-base": "rgba(30, 30, 30, 1)",
"--tag-neutral-bg": "rgba(46, 48, 53, 1)",
"--tag-orange-border": "rgba(120, 53, 15, 1)",
"--border-base": "rgba(48, 48, 48, 1)",
"--bg-component": "rgba(38, 38, 38, 1)",
"--code-text-base": "rgba(238, 238, 238, 1)",
"--tag-green-border": "rgba(6, 78, 59, 1)",
"--bg-base": "rgba(23, 23, 23, 1)",
"--fg-on-color": "rgba(238, 238, 238, 1)",
"--bg-base": "rgba(27, 27, 31, 1)",
"--tag-red-text": "rgba(251, 113, 133, 1)",
"--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
"--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
"--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
"--border-strong": "rgba(55, 55, 55, 1)",
"--fg-subtle": "rgba(163, 163, 163, 1)",
"--fg-base": "rgba(238, 238, 238, 1)",
"--code-border": "rgba(48, 48, 48, 1)",
"--border-transparent": "rgba(238, 238, 238, 0)",
"--border-transparent": "rgba(255, 255, 255, 0)",
"--code-border": "rgba(46, 48, 53, 1)",
"--tag-orange-icon": "rgba(245, 158, 11, 1)",
"--tag-purple-bg": "rgba(46, 16, 100, 1)",
"--bg-base-hover": "rgba(38, 38, 38, 1)",
"--bg-subtle-hover": "rgba(23, 23, 23, 1)",
"--tag-blue-bg": "rgba(23, 37, 84, 1)",
"--fg-disabled": "rgba(63, 63, 63, 1)",
"--bg-subtle": "rgba(10, 10, 10, 1)",
"--tag-green-bg": "rgba(2, 44, 34, 1)",
"--bg-subtle-pressed": "rgba(38, 38, 38, 1)",
"--tag-blue-border": "rgba(30, 58, 138, 1)",
"--fg-muted": "rgba(110, 110, 110, 1)",
"--tag-purple-border": "rgba(76, 29, 149, 1)",
"--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
"--code-bg-header": "rgba(23, 23, 23, 1)",
"--border-loud": "rgba(238, 238, 238, 1)",
"--bg-base-pressed": "rgba(48, 48, 48, 1)",
"--tag-orange-bg": "rgba(69, 26, 3, 1)",
"--bg-disabled": "rgba(38, 38, 38, 1)",
"--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
"--code-icon": "rgba(74, 74, 74, 1)",
"--bg-field-hover": "rgba(48, 48, 48, 1)",
"--bg-field": "rgba(38, 38, 38, 1)",
"--button-neutral": "rgba(38, 38, 38, 1)",
"--code-bg-base": "rgba(27, 27, 31, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--button-neutral": "rgba(39, 40, 45, 1)",
"--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-pressed": "rgba(238, 238, 238, 1)",
"--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 1)",
"--button-inverted-pressed-gradient-to": "rgba(0, 0, 0, 0)",
"--button-neutral-hover": "rgba(38, 38, 38, 1)",
"--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-hover": "rgba(238, 238, 238, 1)",
"--button-inverted-hover-gradient-from": "rgba(0, 0, 0, 0)",
"--button-inverted-hover-gradient-to": "rgba(0, 0, 0, 1)",
"--button-danger-hover": "rgba(159, 18, 57, 1)",
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-switch-off-hover": "rgba(74, 74, 74, 1)",
"--bg-switch-off": "rgba(55, 55, 55, 1)",
"--tag-neutral-bg-hover": "rgba(63, 63, 63, 1)",
"--tag-neutral-border": "rgba(63, 63, 63, 1)",
"--button-inverted-pressed": "rgba(237, 238, 240, 1)",
"--button-inverted-hover": "rgba(255, 255, 255, 1)",
"--button-danger-hover": "rgba(190, 18, 60, 1)",
"--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
"--tag-blue-icon": "rgba(59, 130, 246, 1)",
"--tag-red-icon": "rgba(244, 63, 94, 1)",
"--tag-neutral-icon": "rgba(129, 129, 129, 1)",
"--tag-purple-icon": "rgba(139, 92, 246, 1)",
"--tag-purple-text": "rgba(167, 139, 250, 1)",
"--tag-neutral-text": "rgba(163, 163, 163, 1)",
"--tag-green-icon": "rgba(16, 185, 129, 1)",
"--button-inverted": "rgba(237, 238, 240, 1)",
"--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
"--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
"--bg-component": "rgba(39, 40, 45, 1)",
"--bg-field": "rgba(39, 40, 45, 1)",
"--bg-field-hover": "rgba(46, 48, 53, 1)",
},
light: {
"--button-inverted": "rgba(3, 7, 18, 1)",
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
"--button-inverted-hover": "rgba(31, 41, 55, 1)",
"--code-text-base": "rgba(249, 250, 251, 1)",
"--tag-green-bg": "rgba(209, 250, 229, 1)",
"--border-strong": "rgba(209, 213, 219, 1)",
@@ -120,24 +112,17 @@ export const colors = {
"--tag-purple-text": "rgba(109, 40, 217, 1)",
"--tag-blue-bg": "rgba(219, 234, 254, 1)",
"--tag-blue-icon": "rgba(37, 99, 235, 1)",
"--bg-component": "rgba(241, 243, 245, 1)",
"--border-error": "rgba(225, 29, 72, 1)",
"--bg-field-hover": "rgba(243, 244, 246, 1)",
"--bg-field": "rgba(249, 250, 251, 1)",
"--border-loud": "rgba(3, 7, 18, 1)",
"--fg-on-inverted": "rgba(255, 255, 255, 1)",
"--fg-on-color": "rgba(255, 255, 255, 1)",
"--button-danger-pressed": "rgba(225, 29, 72, 1)",
"--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--button-transparent": "rgba(255, 255, 255, 0)",
"--bg-interactive": "rgba(59, 130, 246, 1)",
"--button-danger-pressed": "rgba(190, 18, 60, 1)",
"--fg-interactive-hover": "rgba(37, 99, 235, 1)",
"--fg-interactive": "rgba(59, 130, 246, 1)",
"--fg-error": "rgba(225, 29, 72, 1)",
"--border-danger": "rgba(190, 18, 60, 1)",
"--border-transparent": "rgba(3, 7, 18, 0)",
"--bg-overlay": "rgba(3, 7, 18, 0.4)",
"--fg-base": "rgba(3, 7, 18, 1)",
"--fg-disabled": "rgba(209, 213, 219, 1)",
"--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
@@ -163,42 +148,31 @@ export const colors = {
"--tag-red-border": "rgba(254, 205, 211, 1)",
"--tag-green-border": "rgba(167, 243, 208, 1)",
"--tag-green-text": "rgba(4, 120, 87, 1)",
"--bg-disabled": "rgba(243, 244, 246, 1)",
"--button-transparent-hover": "rgba(249, 250, 251, 1)",
"--button-transparent-pressed": "rgba(243, 244, 246, 1)",
"--bg-switch-off-hover": "rgba(229, 231, 235, 1)",
"--bg-switch-off-hover-gradient-from": "rgba(3, 7, 18, 0)",
"--bg-switch-off-hover-gradient-to": "rgba(3, 7, 18, 1)",
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--code-bg-base": "rgba(17, 24, 39, 1)",
"--code-bg-header": "rgba(31, 41, 55, 1)",
"--code-text-subtle": "rgba(156, 163, 175, 1)",
"--code-border": "rgba(55, 65, 81, 1)",
"--code-icon": "rgba(107, 114, 128, 1)",
"--button-inverted": "rgba(10, 10, 10, 1)",
"--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
"--button-neutral-pressed": "rgba(255, 255, 255, 1)",
"--button-neutral-pressed-gradient-from": "rgba(10, 10, 10, 1)",
"--button-neutral-pressed-gradient-to": "rgba(10, 10, 10, 0)",
"--button-inverted-pressed": "rgba(10, 10, 10, 1)",
"--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)",
"--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)",
"--button-inverted-hover": "rgba(10, 10, 10, 1)",
"--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--button-neutral-pressed": "rgba(243, 244, 246, 1)",
"--button-inverted-pressed": "rgba(55, 65, 81, 1)",
"--button-neutral": "rgba(255, 255, 255, 1)",
"--button-neutral-gradient-from": "rgba(10, 10, 10, 0)",
"--button-neutral-gradient-to": "rgba(10, 10, 10, 1)",
"--button-neutral-hover": "rgba(255, 255, 255, 1)",
"--button-neutral-hover-gradient-from": "rgba(10, 10, 10, 0)",
"--button-neutral-hover-gradient-to": "rgba(10, 10, 10, 1)",
"--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
"--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
"--button-danger": "rgba(225, 29, 72, 1)",
"--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
"--button-neutral-hover": "rgba(249, 250, 251, 1)",
"--button-danger-hover": "rgba(225, 29, 72, 1)",
"--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
"--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
"--bg-component": "rgba(241, 243, 245, 1)",
"--bg-overlay": "rgba(3, 7, 18, 0.4)",
"--bg-switch-off": "rgba(229, 231, 235, 1)",
"--bg-field-hover": "rgba(243, 244, 246, 1)",
"--bg-field": "rgba(249, 250, 251, 1)",
"--bg-interactive": "rgba(59, 130, 246, 1)",
"--bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
"--bg-disabled": "rgba(243, 244, 246, 1)",
},
}
www/apps/ui/src/config/docs.ts
+40
View File
@@ -127,6 +127,11 @@ export const docsConfig: DocsConfig = {
path: "/components/command",
isPathHref: true,
},
{
title: "Command Bar",
path: "/components/command-bar",
isPathHref: true,
},
{
title: "Container",
path: "/components/container",
@@ -137,6 +142,11 @@ export const docsConfig: DocsConfig = {
path: "/components/copy",
isPathHref: true,
},
{
title: "Currency Input",
path: "/components/currency-input",
isPathHref: true,
},
{
title: "Date Picker",
path: "/components/date-picker",
@@ -162,6 +172,16 @@ export const docsConfig: DocsConfig = {
path: "/components/heading",
isPathHref: true,
},
{
title: "Icon Badge",
path: "/components/icon-badge",
isPathHref: true,
},
{
title: "Icon Button",
path: "/components/icon-button",
isPathHref: true,
},
{
title: "Input",
path: "/components/input",
@@ -177,6 +197,16 @@ export const docsConfig: DocsConfig = {
path: "/components/label",
isPathHref: true,
},
{
title: "Progress Accordion",
path: "/components/progress-accordion",
isPathHref: true,
},
{
title: "Progress Tabs",
path: "/components/progress-tabs",
isPathHref: true,
},
{
title: "Prompt",
path: "/components/prompt",
@@ -192,6 +222,11 @@ export const docsConfig: DocsConfig = {
path: "/components/select",
isPathHref: true,
},
{
title: "Status Badge",
path: "/components/status-badge",
isPathHref: true,
},
{
title: "Switch",
path: "/components/switch",
@@ -202,6 +237,11 @@ export const docsConfig: DocsConfig = {
path: "/components/table",
isPathHref: true,
},
{
title: "Tabs",
path: "/components/tabs",
isPathHref: true,
},
{
title: "Text",
path: "/components/text",
www/apps/ui/src/content/docs/components/badge.mdx
+4 -4
View File
@@ -62,10 +62,10 @@ This component is based on the `div` element and supports all props of this elem
<ComponentExample name="badge-large" />
### Rounded
### Rounded Full
<ComponentExample name="badge-rounded" />
<ComponentExample name="badge-rounded-full" />
### Icon
### Rounded Base
<ComponentExample name="badge-icon" />
<ComponentExample name="badge-rounded-base" />
www/apps/ui/src/content/docs/components/button.mdx
+1 -5
View File
@@ -1,6 +1,6 @@
---
title: "Button"
description: "Displays a button component"
description: "Displays a button"
component: true
---
@@ -54,10 +54,6 @@ This component is based on the `button` element and supports all props of this e
<ComponentExample name="button-with-icon" />
### Icon Only
<ComponentExample name="button-icon-only" />
### Loading
<ComponentExample name="button-loading" />
www/apps/ui/src/content/docs/components/code-block.mdx
-2
View File
@@ -54,8 +54,6 @@ This component is based on the `div` element and supports all props of this elem
This component is based on the `div` element and supports all props of this element.
<ComponentProps component="code-block-body" />
## Examples
---
www/apps/ui/src/content/docs/components/command-bar.mdx
+63
View File
@@ -0,0 +1,63 @@
---
title: "Command Bar"
description: "Display a command bar with a list of commands"
component: true
---
<ComponentExample name="command-bar-demo" />
## Usage
---
```tsx
import { CommandBar } from "@medusajs/ui"
```
```tsx
<CommandBar open={open}>
<CommandBar.Bar>
<CommandBar.Value>{count} selected</CommandBar.Value>
<CommandBar.Seperator />
<CommandBar.Command
action={onDelete}
label="Delete"
shortcut="d"
/>
<CommandBar.Seperator />
<CommandBar.Command
action={onEdit}
label="Edit"
shortcut="e"
/>
</CommandBar.Bar>
</CommandBar>
```
## API Reference
---
### CommandBar
The root component of the command bar. This component manages the state of the command bar.
<ComponentProps component="command-bar" />
### CommandBar.Bar
The bar component of the command bar. This component is used to display the commands.
### CommandBar.Value
The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on.
### CommandBar.Seperator
The seperator component of the command bar. This component is used to display a seperator between commands.
### CommandBar.Command
The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.
<ComponentProps component="command-bar-command" />
www/apps/ui/src/content/docs/components/currency-input.mdx
+39
View File
@@ -0,0 +1,39 @@
---
title: "Currency Input"
description: "Input component for currency values"
component: true
---
<ComponentExample name="currency-input-demo" />
## Usage
---
```tsx
import { CurrencyInput } from "@medusajs/ui"
```
```tsx
<CurrencyInput symbol="$" code="usd" />
```
## API Reference
---
This component is based on the `input` element and supports all props of this element.
<ComponentProps component="currency-input" />
## Examples
---
### Base
<ComponentExample name="currency-input-base" />
### Small
<ComponentExample name="currency-input-small" />
www/apps/ui/src/content/docs/components/icon-badge.mdx
+66
View File
@@ -0,0 +1,66 @@
---
title: "Icon Badge"
description: "Displays an icon badge"
component: true
---
<ComponentExample name="icon-badge-demo" />
## Usage
---
```tsx
import { IconBadge } from "@medusajs/ui"
import { BuildingTax } from "@medusajs/icons"
```
```tsx
<IconBadge>
<BuildingTax />
</IconBadge>
```
## API Reference
---
This component is based on the `span` element and supports all props of this element.
<ComponentProps component="icon-badge" />
## Examples
---
### Grey
<ComponentExample name="icon-badge-grey" />
### Red
<ComponentExample name="icon-badge-red" />
### Green
<ComponentExample name="icon-badge-green" />
### Blue
<ComponentExample name="icon-badge-blue" />
### Orange
<ComponentExample name="icon-badge-orange" />
### Purple
<ComponentExample name="icon-badge-purple" />
### Base
<ComponentExample name="icon-badge-base" />
### Large
<ComponentExample name="icon-badge-large" />
www/apps/ui/src/content/docs/components/icon-button.mdx
+62
View File
@@ -0,0 +1,62 @@
---
title: "Icon Button"
description: "Displays an icon button"
component: true
---
<ComponentExample name="icon-button-demo" />
## Usage
---
```tsx
import { IconBadge } from "@medusajs/ui"
import { Plus } from "@medusajs/icons"
```
```tsx
<IconBadge>
<Plus />
</IconBadge>
```
## API Reference
---
This component is based on the `button` element and supports all props of this element.
<ComponentProps component="icon-button" />
## Examples
---
### Primary
<ComponentExample name="icon-button-primary" />
### Transparent
<ComponentExample name="icon-button-transparent" />
### Base
<ComponentExample name="icon-button-base" />
### Large
<ComponentExample name="icon-button-large" />
### X-Large
<ComponentExample name="icon-button-xlarge" />
### Disabled
<ComponentExample name="icon-button-disabled" />
### Loading
<ComponentExample name="icon-button-loading" />
www/apps/ui/src/content/docs/components/progress-accordion.mdx
+60
View File
@@ -0,0 +1,60 @@
---
title: "Progress Accordion"
description: "A set of expandable content panels, specifically designed for implementing multi-step tasks"
component: true
---
<ComponentExample name="progress-accordion-demo"/>
## Usage
---
```tsx
import { ProgressAccordion } from "@medusajs/ui"
```
```tsx
<ProgressAccordion type="single">
<ProgressAccordion.Item value="general">
<ProgressAccordion.Header>
General
</ProgressAccordion.Header>
<ProgressAccordion.Content>
{/* Content */}
</ProgressAccordion.Content>
</ProgressAccordion.Item>
<ProgressAccordion.Item value="shipping">
<ProgressAccordion.Header>
Shipping
</ProgressAccordion.Header>
<ProgressAccordion.Content>
{/* Content */}
</ProgressAccordion.Content>
</ProgressAccordion.Item>
</ProgressAccordion>
```
## API Reference
---
This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.
### ProgressAccordion.Header
---
<ComponentProps component="progress-accordion-header" />
## Examples
---
### Single
<ComponentExample name="progress-accordion-single" />
### Multiple
<ComponentExample name="progress-accordion-multiple" />
www/apps/ui/src/content/docs/components/progress-tabs.mdx
+50
View File
@@ -0,0 +1,50 @@
---
title: "Progress Tabs"
description: "A set of layered content panels, known as tabs, specifically designed for implementing multi-step tasks"
component: true
---
<ComponentExample name="progress-tabs-demo" />
## Usage
---
```tsx
import { ProgressTabs } from "@medusajs/ui"
```
```tsx
<ProgressTabs defaultValue="general">
<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>
<ProgressTabs.Content value="general">
{/* Content */}
</ProgressTabs.Content>
<ProgressTabs.Content value="shipping">
{/* Content */}
</ProgressTabs.Content>
<ProgressTabs.Content value="payment">
{/* Content */}
</ProgressTabs.Content>
</ProgressTabs>
```
## API Reference
---
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.
### ProgressAccordion.Header
<ComponentProps component="progress-tabs-trigger" />
www/apps/ui/src/content/docs/components/status-badge.mdx
+55
View File
@@ -0,0 +1,55 @@
---
title: "Status Badge"
description: "Displays a status badge"
component: true
---
<ComponentExample name="status-badge-demo" />
## Usage
---
```tsx
import { StatusBadge } from "@medusajs/ui"
```
```tsx
<StatusBadge color="green">Active</StatusBadge>
```
## API Reference
---
This component is based on the `span` element and supports all props of this element.
<ComponentProps component="status-badge" />
## Examples
---
### Grey
<ComponentExample name="status-badge-grey" />
### Red
<ComponentExample name="status-badge-red" />
### Green
<ComponentExample name="status-badge-green" />
### Blue
<ComponentExample name="status-badge-blue" />
### Orange
<ComponentExample name="status-badge-orange" />
### Purple
<ComponentExample name="status-badge-purple" />
www/apps/ui/src/content/docs/components/tabs.mdx
+34
View File
@@ -0,0 +1,34 @@
---
title: "Tabs"
description: "A set of layered content panels, known as tabs, that display content one panel at a time"
component: true
---
<ComponentExample name="tabs-demo" />
## Usage
---
```tsx
import { Tabs } from "@medusajs/ui"
```
```tsx
<Tabs>
<Tabs.List>
<Tabs.Trigger value="1">Tab 1</Tabs.Trigger>
<Tabs.Trigger value="2">Tab 2</Tabs.Trigger>
<Tabs.Trigger value="3">Tab 3</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="1">Panel 1</Tabs.Content>
<Tabs.Content value="2">Panel 2</Tabs.Content>
<Tabs.Content value="3">Panel 3</Tabs.Content>
</Tabs>
```
## API Reference
---
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves
www/apps/ui/src/examples/badge-icon.tsx
-10
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
-5
View File
@@ -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
-10
View File
@@ -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
+1
View File
@@ -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
+2 -1
View File
@@ -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
+41
View File
@@ -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
+3 -3
View File
@@ -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
+9
View File
@@ -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
+9
View File
@@ -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
+9
View File
@@ -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
+3 -3
View File
@@ -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
+3 -3
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+10
View File
@@ -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
+36
View File
@@ -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
+36
View File
@@ -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
+36
View File
@@ -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
+53
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
+49
View File
@@ -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>
)
}
www/apps/ui/src/props/badge.tsx
+5 -5
View File
@@ -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
-8
View File
@@ -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
+2 -1
View File
@@ -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
+23
View File
@@ -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/code-block-body.tsx → www/apps/ui/src/props/command-bar.tsx
+3 -3
View File
@@ -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
+19
View File
@@ -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
+27
View File
@@ -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
+32
View File
@@ -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
+19
View File
@@ -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
+19
View File
@@ -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
+19
View File
@@ -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
www/apps/ui/src/registries/example-registry.tsx
+183 -11
View File
@@ -57,15 +57,60 @@ export const ExampleRegistry: Record<string, ExampleType> = {
component: React.lazy(async () => import("@/examples/badge-large")),
file: "src/examples/badge-large.tsx",
},
"badge-rounded": {
"badge-rounded-full": {
name: "badge-rounded",
component: React.lazy(async () => import("@/examples/badge-rounded")),
file: "src/examples/badge-rounded.tsx",
component: React.lazy(async () => import("@/examples/badge-rounded-full")),
file: "src/examples/badge-rounded-full.tsx",
},
"badge-icon": {
name: "badge-icon",
component: React.lazy(async () => import("@/examples/badge-icon")),
file: "src/examples/badge-icon.tsx",
"badge-rounded-base": {
name: "badge-rounded",
component: React.lazy(async () => import("@/examples/badge-rounded-base")),
file: "src/examples/badge-rounded-base.tsx",
},
"icon-badge-demo": {
name: "icon-badge-demo",
component: React.lazy(async () => import("@/examples/icon-badge-demo")),
file: "src/examples/icon-badge-demo.tsx",
},
"icon-badge-blue": {
name: "icon-badge-blue",
component: React.lazy(async () => import("@/examples/icon-badge-blue")),
file: "src/examples/icon-badge-blue.tsx",
},
"icon-badge-green": {
name: "icon-badge-green",
component: React.lazy(async () => import("@/examples/icon-badge-green")),
file: "src/examples/icon-badge-green.tsx",
},
"icon-badge-red": {
name: "icon-badge-red",
component: React.lazy(async () => import("@/examples/icon-badge-red")),
file: "src/examples/icon-badge-red.tsx",
},
"icon-badge-orange": {
name: "icon-badge-orange",
component: React.lazy(async () => import("@/examples/icon-badge-orange")),
file: "src/examples/icon-badge-orange.tsx",
},
"icon-badge-purple": {
name: "icon-badge-purple",
component: React.lazy(async () => import("@/examples/icon-badge-purple")),
file: "src/examples/icon-badge-purple.tsx",
},
"icon-badge-grey": {
name: "icon-badge-grey",
component: React.lazy(async () => import("@/examples/icon-badge-grey")),
file: "src/examples/icon-badge-grey.tsx",
},
"icon-badge-base": {
name: "icon-badge-base",
component: React.lazy(async () => import("@/examples/icon-badge-base")),
file: "src/examples/icon-badge-base.tsx",
},
"icon-badge-large": {
name: "icon-badge-small",
component: React.lazy(async () => import("@/examples/icon-badge-large")),
file: "src/examples/icon-badge-large.tsx",
},
"button-demo": {
name: "button-demo",
@@ -370,10 +415,137 @@ export const ExampleRegistry: Record<string, ExampleType> = {
component: React.lazy(async () => import("@/examples/button-with-icon")),
file: "src/examples/button-with-icon.tsx",
},
"button-icon-only": {
name: "button-icon-only",
component: React.lazy(async () => import("@/examples/button-icon-only")),
file: "src/examples/button-icon-only.tsx",
"icon-button-demo": {
name: "icon-button-demo",
component: React.lazy(async () => import("@/examples/icon-button-demo")),
file: "src/examples/icon-button-demo.tsx",
},
"icon-button-primary": {
name: "icon-button-primary",
component: React.lazy(async () => import("@/examples/icon-button-primary")),
file: "src/examples/icon-button-primary.tsx",
},
"icon-button-transparent": {
name: "icon-button-transparent",
component: React.lazy(
async () => import("@/examples/icon-button-transparent")
),
file: "src/examples/icon-button-transparent.tsx",
},
"icon-button-disabled": {
name: "icon-button-disabled",
component: React.lazy(
async () => import("@/examples/icon-button-disabled")
),
file: "src/examples/icon-button-disabled.tsx",
},
"icon-button-loading": {
name: "icon-button-with-text",
component: React.lazy(async () => import("@/examples/icon-button-loading")),
file: "src/examples/icon-button-loading.tsx",
},
"icon-button-base": {
name: "icon-button-base",
component: React.lazy(async () => import("@/examples/icon-button-base")),
file: "src/examples/icon-button-base.tsx",
},
"icon-button-large": {
name: "icon-button-large",
component: React.lazy(async () => import("@/examples/icon-button-large")),
file: "src/examples/icon-button-large.tsx",
},
"icon-button-xlarge": {
name: "icon-button-xlarge",
component: React.lazy(async () => import("@/examples/icon-button-xlarge")),
file: "src/examples/icon-button-xlarge.tsx",
},
"currency-input-demo": {
name: "currency-input-demo",
component: React.lazy(async () => import("@/examples/currency-input-demo")),
file: "src/examples/currency-input-demo.tsx",
},
"currency-input-small": {
name: "currency-input-small",
component: React.lazy(
async () => import("@/examples/currency-input-small")
),
file: "src/examples/currency-input-small.tsx",
},
"status-badge-demo": {
name: "status-badge-demo",
component: React.lazy(async () => import("@/examples/status-badge-demo")),
file: "src/examples/status-badge-demo.tsx",
},
"status-badge-blue": {
name: "status-badge-blue",
component: React.lazy(async () => import("@/examples/status-badge-blue")),
file: "src/examples/status-badge-blue.tsx",
},
"status-badge-green": {
name: "status-badge-green",
component: React.lazy(async () => import("@/examples/status-badge-green")),
file: "src/examples/status-badge-green.tsx",
},
"status-badge-red": {
name: "status-badge-red",
component: React.lazy(async () => import("@/examples/status-badge-red")),
file: "src/examples/status-badge-red.tsx",
},
"status-badge-orange": {
name: "status-badge-orange",
component: React.lazy(async () => import("@/examples/status-badge-orange")),
file: "src/examples/status-badge-orange.tsx",
},
"status-badge-purple": {
name: "status-badge-purple",
component: React.lazy(async () => import("@/examples/status-badge-purple")),
file: "src/examples/status-badge-purple.tsx",
},
"status-badge-grey": {
name: "status-badge-grey",
component: React.lazy(async () => import("@/examples/status-badge-grey")),
file: "src/examples/status-badge-grey.tsx",
},
"command-bar-demo": {
name: "command-bar-demo",
component: React.lazy(async () => import("@/examples/command-bar-demo")),
file: "src/examples/command-bar-demo.tsx",
},
"progress-accordion-demo": {
name: "progress-accordion-demo",
component: React.lazy(
async () => import("@/examples/progress-accordion-demo")
),
file: "src/examples/progress-accordion-demo.tsx",
},
"progress-accordion-single": {
name: "progress-accordion-single",
component: React.lazy(
async () => import("@/examples/progress-accordion-single")
),
file: "src/examples/progress-accordion-single.tsx",
},
"progress-accordion-multiple": {
name: "progress-accordion-multiple",
component: React.lazy(
async () => import("@/examples/progress-accordion-multiple")
),
file: "src/examples/progress-accordion-multiple.tsx",
},
"progress-tabs-demo": {
name: "progress-tabs-demo",
component: React.lazy(async () => import("@/examples/progress-tabs-demo")),
file: "src/examples/progress-tabs-demo.tsx",
},
"tabs-demo": {
name: "tabs-demo",
component: React.lazy(async () => import("@/examples/tabs-demo")),
file: "src/examples/tabs-demo.tsx",
},
"currency-input-base": {
name: "currency-input-base",
component: React.lazy(async () => import("@/examples/currency-input-base")),
file: "src/examples/currency-input-base.tsx",
},
"button-loading": {
name: "button-loading",
www/apps/ui/src/registries/prop-registry.tsx
+23 -2
View File
@@ -20,15 +20,30 @@ export const PropRegistry: Record<string, PropRegistryItem> = {
"code-block-header": {
table: React.lazy(async () => import("../props/code-block-header")),
},
"code-block-body": {
table: React.lazy(async () => import("../props/code-block-body")),
"currency-input": {
table: React.lazy(async () => import("../props/currency-input")),
},
copy: {
table: React.lazy(async () => import("../props/copy")),
},
"command-bar": {
table: React.lazy(async () => import("../props/command-bar")),
},
"command-bar-command": {
table: React.lazy(async () => import("../props/command-bar-command")),
},
"date-picker": {
table: React.lazy(async () => import("../props/date-picker")),
},
"icon-badge": {
table: React.lazy(async () => import("../props/icon-badge")),
},
"icon-button": {
table: React.lazy(async () => import("../props/icon-button")),
},
"status-badge": {
table: React.lazy(async () => import("../props/status-badge")),
},
"focus-modal": {
table: React.lazy(async () => import("../props/focus-modal")),
},
@@ -68,4 +83,10 @@ export const PropRegistry: Record<string, PropRegistryItem> = {
tooltip: {
table: React.lazy(async () => import("../props/tooltip")),
},
"progress-accordion-header": {
table: React.lazy(async () => import("../props/progress-accordion-header")),
},
"progress-tabs-trigger": {
table: React.lazy(async () => import("../props/progress-tabs-trigger")),
},
}