docs: create docs workspace (#5174)
* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
This commit is contained in:
Shahed Nasser
GitHub
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: "Colors"
|
||||
description: "The color system used in Medusa UI"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
---
|
||||
|
||||
These are most of the colors used in Medusa UI and across Medusa Admin. Use the theme
|
||||
switcher in the navbar to see how the colours react in light/dark themes.
|
||||
|
||||
You can click on any of the blocks to copy the Tailwind class name.
|
||||
|
||||
<Colors />
|
||||
|
||||
<Feedback title={"Colors"} />
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: "Avatar"
|
||||
description: "An image element with a fallback for representing the user."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="avatar-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Avatar } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Avatar
|
||||
src="https://avatars.githubusercontent.com/u/10656202?v=4"
|
||||
fallback="M"
|
||||
/>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.
|
||||
|
||||
<ComponentProps component="avatar" />
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
title: "Badge"
|
||||
description: "Displays a badge"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="badge-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Badge } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Badge>Badge</Badge>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="badge" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Grey
|
||||
|
||||
<ComponentExample name="badge-grey" />
|
||||
|
||||
### Red
|
||||
|
||||
<ComponentExample name="badge-red" />
|
||||
|
||||
### Green
|
||||
|
||||
<ComponentExample name="badge-green" />
|
||||
|
||||
### Blue
|
||||
|
||||
<ComponentExample name="badge-blue" />
|
||||
|
||||
### Orange
|
||||
|
||||
<ComponentExample name="badge-orange" />
|
||||
|
||||
### Purple
|
||||
|
||||
<ComponentExample name="badge-purple" />
|
||||
|
||||
### Small
|
||||
|
||||
<ComponentExample name="badge-small" />
|
||||
|
||||
### Large
|
||||
|
||||
<ComponentExample name="badge-large" />
|
||||
|
||||
### Rounded
|
||||
|
||||
<ComponentExample name="badge-rounded" />
|
||||
|
||||
### Icon
|
||||
|
||||
<ComponentExample name="badge-icon" />
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: "Button"
|
||||
description: "Displays a button component"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="button-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Button } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Button>Button</Button>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `button` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="button" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Primary
|
||||
|
||||
<ComponentExample name="button-primary" />
|
||||
|
||||
### Secondary
|
||||
|
||||
<ComponentExample name="button-secondary" />
|
||||
|
||||
### Transparent
|
||||
|
||||
<ComponentExample name="button-transparent" />
|
||||
|
||||
### Danger
|
||||
|
||||
<ComponentExample name="button-danger" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentExample name="button-disabled" />
|
||||
|
||||
### With Icon
|
||||
|
||||
<ComponentExample name="button-with-icon" />
|
||||
|
||||
### Icon Only
|
||||
|
||||
<ComponentExample name="button-icon-only" />
|
||||
|
||||
### Loading
|
||||
|
||||
<ComponentExample name="button-loading" />
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "Calendar"
|
||||
description: "A calendar component that allows picking of a single date or a range of dates."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="calendar-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Calendar } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Calendar />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [react-date-picker](https://www.npmjs.com/package/react-date-picker) package.
|
||||
|
||||
<ComponentProps component="calendar" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Single Date
|
||||
|
||||
<ComponentExample name="calendar-single" />
|
||||
|
||||
### Range
|
||||
|
||||
<ComponentExample name="calendar-range" />
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: "Checkbox"
|
||||
description: "A control that allows the user to toggle between checked and not checked."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="checkbox-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Checkbox } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Checkbox />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) primitive.
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentExample name="checkbox-default" />
|
||||
|
||||
### Checked
|
||||
|
||||
<ComponentExample name="checkbox-checked" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentExample name="checkbox-disabled" />
|
||||
|
||||
### Indeterminate
|
||||
|
||||
<ComponentExample name="checkbox-indeterminate" />
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: "Code Block"
|
||||
description: "Allows you to render highlighted code snippets"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="code-block-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { CodeBlock } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<CodeBlock
|
||||
snippets={[
|
||||
{
|
||||
language: "tsx",
|
||||
label: "Label",
|
||||
code: "import { useProduct } from \"medusa-react\"",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CodeBlock.Header />
|
||||
<CodeBlock.Body />
|
||||
</CodeBlock>
|
||||
```
|
||||
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
### CodeBlock
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="code-block" />
|
||||
|
||||
### CodeBlock.Header
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="code-block-header" />
|
||||
|
||||
### CodeBlock.Header.Meta
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
### CodeBlock.Body
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="code-block-body" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Single snippet
|
||||
|
||||
If you want to only show a code sample for one language or API, you can choose to hide the snippet labels:
|
||||
|
||||
<ComponentExample name="code-block-single" />
|
||||
|
||||
### No Header
|
||||
|
||||
You could also choose to omit the header entirely:
|
||||
|
||||
<ComponentExample name="code-block-no-header" />
|
||||
|
||||
### No Line Numbers
|
||||
|
||||
<ComponentExample name="code-block-no-lines" />
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Command"
|
||||
description: "Renders an unhighlighted code block, useful for one-liners or endpoints"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="command-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Command } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Command>
|
||||
<code>yarn add @medusajs/ui</code>
|
||||
</Command>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: "Container"
|
||||
description: "A box used to organise content."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="container-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Container } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Container>Container</Container>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### In a layout
|
||||
|
||||
<ComponentExample name="container-layout" />
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: "Copy"
|
||||
description: "Displays a tooltipped button that puts string contents into the user's clipboard."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="copy-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Copy } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Copy content="yarn add @medusajs/ui" />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `button` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="copy" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### With custom display
|
||||
|
||||
<ComponentExample name="copy-custom-display" />
|
||||
|
||||
### As child
|
||||
|
||||
Using the `asChild` prop, you can render the `<Copy/>` as it's child. This is useful if you want to render a custom button, to prevent rendering a button inside a button.
|
||||
|
||||
<ComponentExample name="copy-as-child" />
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: "Date Picker"
|
||||
description: "A date picker component with range and presets."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="date-picker-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<DatePicker />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Calendar](/components/calendar) component and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).
|
||||
|
||||
<ComponentProps component="date-picker" />
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Single
|
||||
|
||||
<ComponentExample name="date-picker-single" />
|
||||
|
||||
### Single with time
|
||||
|
||||
<ComponentExample name="date-picker-single-time" />
|
||||
|
||||
### Single with presets
|
||||
|
||||
<ComponentExample name="date-picker-single-presets" />
|
||||
|
||||
### Single with presets and time
|
||||
|
||||
<ComponentExample name="date-picker-single-presets-time" />
|
||||
|
||||
### Range
|
||||
|
||||
<ComponentExample name="date-picker-range" />
|
||||
|
||||
### Range with time
|
||||
|
||||
<ComponentExample name="date-picker-range-time" />
|
||||
|
||||
### Range with presets
|
||||
|
||||
<ComponentExample name="date-picker-range-presets" />
|
||||
|
||||
### Range with presets and time
|
||||
|
||||
<ComponentExample name="date-picker-range-presets-time" />
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: "Drawer"
|
||||
description: "A triggerable drawer that overlaps whatever page it's on."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="drawer-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Drawer } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Drawer>
|
||||
<Drawer.Trigger>Trigger</Drawer.Trigger>
|
||||
<Drawer.Content>
|
||||
<Drawer.Header>
|
||||
<Drawer.Title>Drawer Title</Drawer.Title>
|
||||
</Drawer.Header>
|
||||
<Drawer.Body>Body</Drawer.Body>
|
||||
<Drawer.Footer>Footer</Drawer.Footer>
|
||||
</Drawer.Content>
|
||||
</Drawer>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: "Dropdown Menu"
|
||||
description: "Displays a menu to the user—such as a set of actions or functions—triggered by a button."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="dropdown-menu-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { DropdownMenu } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item>Edit</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>Add</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>Delete</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.
|
||||
|
||||
### DropdownMenu.Shortcut
|
||||
|
||||
This component is based on the `span` element and supports all props of this element.
|
||||
|
||||
### DropdownMenu.Hint
|
||||
|
||||
This component is based on the `span` element and supports all props of this element.
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Sorting
|
||||
|
||||
Implementing collection sorting choices using a Dropdown Menu:
|
||||
|
||||
<ComponentExample name="dropdown-menu-sorting" />
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "Focus Modal"
|
||||
description: "A modal component that spans the whole screen"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="focus-modal-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { FocusModal } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<FocusModal>
|
||||
<FocusModal.Trigger>Trigger</FocusModal.Trigger>
|
||||
<FocusModal.Content>
|
||||
<FocusModal.Header>Title</FocusModal.Header>
|
||||
<FocusModal.Body>Content</FocusModal.Body>
|
||||
</FocusModal.Content>
|
||||
</FocusModal>
|
||||
```
|
||||
|
||||
### API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
|
||||
|
||||
### FocusModal.Header
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
### FocusModal.Body
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Heading"
|
||||
description: "Text component used for page titles and other headers"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="heading-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Heading } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Heading>A Title</Heading>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `heading` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="heading" />
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: "Input"
|
||||
description: "Renders a form input field"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="input-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Input } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Input placeholder="Placeholder" id="input-id" />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `input` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="input" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Password
|
||||
|
||||
<ComponentExample name="input-password" />
|
||||
|
||||
### Search
|
||||
|
||||
<ComponentExample name="input-search" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentExample name="input-disabled" />
|
||||
|
||||
### Small
|
||||
|
||||
<ComponentExample name="input-small" />
|
||||
|
||||
### Error state
|
||||
|
||||
You can leverage the native `aria-invalid` property to show an error state on your input:
|
||||
|
||||
<ComponentExample name="input-error" />
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: "Kbd"
|
||||
description: "Renders a badge-styled kbd element"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="kbd-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Kbd } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Kbd>Ctrl + Shift + A</Kbd>
|
||||
```
|
||||
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `kbd` element and supports all props of this element.
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: "Label"
|
||||
description: "Renders an accessible label associated with controls."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="label-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Label } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Label>Label</Label>
|
||||
```
|
||||
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) primitive.
|
||||
|
||||
<ComponentProps component="label" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Base Regular
|
||||
|
||||
<ComponentExample name="label-base-regular" />
|
||||
|
||||
### Base Plus
|
||||
|
||||
<ComponentExample name="label-base-plus" />
|
||||
|
||||
### Large Regular
|
||||
|
||||
<ComponentExample name="label-large-regular" />
|
||||
|
||||
### Large Plus
|
||||
|
||||
<ComponentExample name="label-large-plus" />
|
||||
|
||||
### Small Regular
|
||||
|
||||
<ComponentExample name="label-small-regular" />
|
||||
|
||||
### Small Plus
|
||||
|
||||
<ComponentExample name="label-small-plus" />
|
||||
|
||||
### X-Small Regular
|
||||
|
||||
<ComponentExample name="label-xsmall-regular" />
|
||||
|
||||
### X-Small Plus
|
||||
|
||||
<ComponentExample name="label-xsmall-plus" />
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: "Prompt"
|
||||
description: "Displays a dialog triggered by a button"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="prompt-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Prompt } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Prompt>
|
||||
<Prompt.Trigger>Trigger</Prompt.Trigger>
|
||||
<Prompt.Content>
|
||||
<Prompt.Header>
|
||||
<Prompt.Title>Title</Prompt.Title>
|
||||
<Prompt.Description>Description</Prompt.Description>
|
||||
</Prompt.Header>
|
||||
<Prompt.Footer>
|
||||
<Prompt.Cancel>Cancel</Prompt.Cancel>
|
||||
<Prompt.Action>Delete</Prompt.Action>
|
||||
</Prompt.Footer>
|
||||
</Prompt.Content>
|
||||
</Prompt>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Alert Dialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog) primitives.
|
||||
|
||||
### Prompt.Header
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
### Prompt.Footer
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: "Radio Group"
|
||||
description: "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="radio-group-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { RadioGroup } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<RadioGroup>
|
||||
<RadioGroup.Item value="1" id="radio_1" />
|
||||
<RadioGroup.Item value="2" id="radio_2" />
|
||||
<RadioGroup.Item value="3" id="radio_3" />
|
||||
</RadioGroup>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group) primitives.
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### With Descriptions
|
||||
|
||||
<ComponentExample name="radio-group-descriptions" />
|
||||
|
||||
### With a disabled item
|
||||
|
||||
<ComponentExample name="radio-group-disabled" />
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
title: "Select"
|
||||
description: "Displays a list of options for the user to pick from—triggered by a button."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="select-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Select } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Select>
|
||||
<Select.Trigger>
|
||||
<Select.Value placeholder="Placeholder" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{items.map((item) => (
|
||||
<Select.Item key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/dropdown-menu).
|
||||
|
||||
### Select
|
||||
|
||||
Contains all the parts of the select component.
|
||||
|
||||
<ComponentProps component="select" />
|
||||
|
||||
### Select.Trigger
|
||||
|
||||
The trigger that toggles the select.
|
||||
|
||||
### Select.Value
|
||||
|
||||
Displays the selected value, or a placeholder if no value is selected.
|
||||
|
||||
<ComponentProps component="select-value" />
|
||||
|
||||
### Select.Group
|
||||
|
||||
Groups multiple items together.
|
||||
|
||||
### Select.Label
|
||||
|
||||
Used to label a group of items.
|
||||
|
||||
### Select.Item
|
||||
|
||||
An item in the select.
|
||||
|
||||
<ComponentProps component="select-item" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Small
|
||||
|
||||
<ComponentExample name="select-small" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentExample name="select-disabled" />
|
||||
|
||||
### Grouped Items
|
||||
|
||||
<ComponentExample name="select-grouped-items" />
|
||||
|
||||
### Controlled
|
||||
|
||||
<ComponentExample name="select-controlled" />
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: "Switch"
|
||||
description: "A control that allows the user to toggle between checked and not checked."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="switch-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Switch } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Switch />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch) primitive.
|
||||
|
||||
<ComponentProps component="switch" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Small
|
||||
|
||||
<ComponentExample name="switch-small" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentExample name="switch-disabled" />
|
||||
|
||||
### Checked
|
||||
|
||||
<ComponentExample name="switch-checked" />
|
||||
|
||||
### Checked Disabled
|
||||
|
||||
<ComponentExample name="switch-checked-disabled" />
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: "Table"
|
||||
description: "A Table component for displaying data."
|
||||
---
|
||||
|
||||
<ComponentExample name="table-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Table } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>#</Table.HeaderCell>
|
||||
<Table.HeaderCell>Customer</Table.HeaderCell>
|
||||
<Table.HeaderCell>Email</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>1</Table.Cell>
|
||||
<Table.Cell>Emil Larsson</Table.Cell>
|
||||
<Table.Cell>emil2738@gmail.com</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `table` element and its various children, and supports all props of those elements.
|
||||
|
||||
- `Table`: `table`
|
||||
- `Table.Header`: `thead`
|
||||
- `Table.Row`: `tr`
|
||||
- `Table.HeaderCell`: `th`
|
||||
- `Table.Body`: `tbody`
|
||||
- `Table.Cell`: `td`
|
||||
|
||||
### Pagination
|
||||
|
||||
This component is based on the `div` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="table-pagination" />
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: "Text"
|
||||
description: "Displays basic text."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="text-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Text } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Text>Text</Text>
|
||||
```
|
||||
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `p` element and supports all props of this element.
|
||||
|
||||
<ComponentProps component="text" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### All variations
|
||||
|
||||
<ComponentExample name="text-examples" />
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "Textarea"
|
||||
description: "Displays a form textarea."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="textarea-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Textarea } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Textarea />
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the `textarea` element and supports all props of this element.
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: "Toast"
|
||||
description: "A succinct message that is displayed temporarily."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="toaster-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
Add the Toaster component somewhere in your tree
|
||||
|
||||
```tsx
|
||||
import { Toaster } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<Toaster />
|
||||
```
|
||||
|
||||
The `useToast` hook returns a `toast` function that you can use to display a toast.
|
||||
|
||||
```tsx
|
||||
import { useToast } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
const { toast } = useToast()
|
||||
|
||||
return (
|
||||
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "Toast title",
|
||||
description: "Toast body",
|
||||
})
|
||||
}
|
||||
>
|
||||
Trigger
|
||||
</Button>
|
||||
)
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Warning
|
||||
|
||||
<ComponentExample name="toaster-warning" />
|
||||
|
||||
### Error
|
||||
|
||||
<ComponentExample name="toaster-error" />
|
||||
|
||||
### Success
|
||||
|
||||
<ComponentExample name="toaster-success" />
|
||||
|
||||
### Loading
|
||||
|
||||
<ComponentExample name="toaster-loading" />
|
||||
|
||||
### With Action
|
||||
|
||||
<ComponentExample name="toaster-with-action" />
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Tooltip"
|
||||
description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="tooltip-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Tooltip } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
|
||||
```tsx
|
||||
<Tooltip content="Tooltip content">Trigger</Tooltip>
|
||||
```
|
||||
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
This component is based on the [Radix UI Tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip) primitive.
|
||||
|
||||
<ComponentProps component="tooltip" />
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: "usePrompt"
|
||||
description: ""
|
||||
component: true
|
||||
---
|
||||
|
||||
This hook can be used to prompt the user for confirmation of an action.
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { usePrompt } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
const dialog = usePrompt()
|
||||
const actionFunction = async () => {
|
||||
const confirmed = await dialog({
|
||||
title: "Are you sure?",
|
||||
description: "Please confirm this action",
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
### Call Signature
|
||||
|
||||
`usePrompt()`
|
||||
|
||||
### usePrompt return
|
||||
|
||||
<HookValues hook="usePrompt" />
|
||||
|
||||
### PromptProps
|
||||
|
||||
<HookValues hook="PromptProps" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Basic
|
||||
|
||||
<ComponentExample name="use-prompt-demo" />
|
||||
|
||||
### With Verification
|
||||
|
||||
<ComponentExample name="use-prompt-verification" />
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: "useToast"
|
||||
description: ""
|
||||
component: true
|
||||
---
|
||||
|
||||
|
||||
This hook is used to display and manage toasts. To learn how to make it usable and to see some examples, please check the [Toast component page](/components/toast).
|
||||
|
||||
```tsx
|
||||
import { useToast } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
### Call Signature
|
||||
|
||||
`useToast()`
|
||||
|
||||
### useToast return
|
||||
|
||||
<HookValues hook="useToast" />
|
||||
|
||||
### ToasterToast
|
||||
|
||||
Important type used when pushing or retrieving toasts. This extends the [Radix UI Toast Root](https://www.radix-ui.com/primitives/docs/components/toast#root) primitive type.
|
||||
|
||||
<HookValues hook="ToasterToast" />
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "useToggleState"
|
||||
description: ""
|
||||
component: true
|
||||
---
|
||||
|
||||
|
||||
This is a simple hook that can be used to keep track of a boolean value and toggle between its two states.
|
||||
|
||||
It can be useful to, for example, display or hide the same `FocusModal` component
|
||||
via multiple triggers, for example, in a table.
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { useToggleState } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
const [state, open, close, toggle] = useToggleState()
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
### Call Signature
|
||||
|
||||
`useToggleState(initial: boolean = false)`
|
||||
|
||||
### Returns
|
||||
|
||||
<HookValues hook="useToggleState" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
<ComponentExample name="use-toggle-state-demo" />
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Icons"
|
||||
description: "React components for Medusa UI icons."
|
||||
---
|
||||
|
||||
## Overview
|
||||
---
|
||||
|
||||
Below is a list of all the icons available in the Medusa UI design system.
|
||||
|
||||
<IconSearch />
|
||||
|
||||
## Installation
|
||||
---
|
||||
|
||||
The icons are available as an [npm package](https://www.npmjs.com/package/@medusajs/icons). To install the package run:
|
||||
|
||||
<PackageInstall packageName="@medusajs/icons" />
|
||||
|
||||
## Usage
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { Sun, Moon } from "@medusajs/icons"
|
||||
```
|
||||
|
||||
<Feedback title={"Icons"} />
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Introduction"
|
||||
description: "Primitives for building Medusa applications."
|
||||
---
|
||||
|
||||
Welcome to Medusa UI, a React implementation of the Medusa design system.
|
||||
It is a collection of components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes that can be used to build
|
||||
a consistent user interface across the Medusa Admin and other Medusa applications.
|
||||
|
||||
<Card
|
||||
title="Medusa UI"
|
||||
text="Colors, type, icons and components"
|
||||
href="https://www.figma.com/community/file/1278648465968635936/Medusa-UI"
|
||||
icon={
|
||||
<FigmaIcon />
|
||||
}
|
||||
/>
|
||||
|
||||
## Packages
|
||||
|
||||
---
|
||||
|
||||
Medusa UI is split into multiple packages. Each package is published to npm
|
||||
and can be installed separately.
|
||||
|
||||
- `@medusajs/ui` - React components, hooks, and utility functions used
|
||||
in Medusa UI.
|
||||
- `@medusajs/ui-preset` - Tailwind CSS preset containing all the classes
|
||||
used in Medusa UI.
|
||||
- `@medusajs/icons` - Icons used in Medusa UI.
|
||||
|
||||
## About
|
||||
|
||||
---
|
||||
|
||||
At its core, Medusa UI is a styled and slightly opinionated implementation of [Radix Primitives](https://www.radix-ui.com/primitives).
|
||||
Our team have also referenced the fantastic [shadcn/ui](https://ui.shadcn.com/) for inspiration in certain implementations.
|
||||
|
||||
Our team strongly believe in keeping the components simple and
|
||||
composable, much like Medusa's foundation. This allows you to build whatever you need. Our team have tried to avoid overloading
|
||||
the component API and, instead, leveraged the native HTML API, which gets implemented
|
||||
and respected accordingly, and passed to the underlying elements.
|
||||
|
||||
<Feedback title={"Introduction"} />
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: "Installation"
|
||||
description: "How to install and setup Medusa UI."
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "Medusa Admin Extension"
|
||||
description: "How to install and use Medusa UI for building Admin extensions."
|
||||
---
|
||||
|
||||
## Installation
|
||||
---
|
||||
|
||||
The `@medusajs/ui` package is a already installed as a dependency of the `@medusajs/admin` package. Due to this you can simply import the package and use it in your local Admin extensions.
|
||||
|
||||
If you are building a Admin extension as part of a Medusa plugin, you can install the package as a dependency of your plugin.
|
||||
|
||||
<PackageInstall packageName="@medusajs/ui" />
|
||||
|
||||
## Configuration
|
||||
---
|
||||
|
||||
The configuration of the UI package is handled by the `@medusajs/admin` package. Therefore, you do not need to any additional configuration to use the UI package in your Admin extensions.
|
||||
|
||||
<Feedback title={"Install in Medusa Admin Extension"} />
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: "Standalone Project"
|
||||
description: "How to install and use Medusa UI in a standalone project."
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
---
|
||||
|
||||
Medusa UI is a React UI library and while it's intended for usage within Medusa projects, it can also be used in any React project.
|
||||
|
||||
### Install Medusa UI
|
||||
|
||||
Install the React UI library with the following command:
|
||||
|
||||
<PackageInstall packageName="@medusajs/ui" />
|
||||
|
||||
### Configuring Tailwind CSS
|
||||
|
||||
The components are styled using Tailwind CSS, and in order to use them, you will need to install Tailwind CSS in your project as well.
|
||||
For more information on how to install Tailwind CSS, please refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation).
|
||||
|
||||
All of the classes used for Medusa UI are shipped as a Tailwind CSS customization.
|
||||
You can install it with the following command:
|
||||
|
||||
<PackageInstall packageName="@medusajs/ui-preset" devDependency />
|
||||
|
||||
After you have installed Tailwind CSS and the Medusa UI preset, you need to add the following to your `tailwind.config.js`file:
|
||||
|
||||
```tsx
|
||||
module.exports = {
|
||||
presets: [require("@medusajs/ui-preset")],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
In order for the styles to be applied correctly to the components, you will also need to ensure that
|
||||
`@medusajs/ui` is included in the content field of your `tailwind.config.js` file:
|
||||
|
||||
```tsx
|
||||
module.exports = {
|
||||
content: [
|
||||
// ...
|
||||
"./node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
If you are working within a monorepo, you may need to add the path to the `@medusajs/ui` package in your `tailwind.config.js` like so:
|
||||
|
||||
```tsx
|
||||
const path = require("path")
|
||||
|
||||
const uiPath = path.resolve(
|
||||
require.resolve("@medusajs/ui"),
|
||||
"../..",
|
||||
"\*_/_.{js,jsx,ts,tsx}"
|
||||
)
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
// ...
|
||||
uiPath,
|
||||
],
|
||||
// ...
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Start building
|
||||
|
||||
---
|
||||
|
||||
You are now ready to start building your application with Medusa UI. You can import the components like so:
|
||||
|
||||
```tsx
|
||||
import { Button, Drawer } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
<Feedback title={"Install in Standalone Project"} />
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: "clx"
|
||||
description: "Utility function for working with classNames."
|
||||
---
|
||||
|
||||
## Usage
|
||||
---
|
||||
|
||||
The `clx` function is a utility function for working with classNames. It is built using [clsx](https://www.npmjs.com/package/clsx) and [tw-merge](https://www.npmjs.com/package/tw-merge) and is intended to be used with [Tailwind CSS](https://tailwindcss.com/).
|
||||
|
||||
```tsx
|
||||
import { clx } from "@medusajs/ui"
|
||||
|
||||
type BoxProps = {
|
||||
className?: string
|
||||
children: React.ReactNode
|
||||
mt?: "sm" | "md" | "lg"
|
||||
}
|
||||
|
||||
const Box = ({ className, children }: BoxProps) => {
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"flex items-center justify-center",
|
||||
{
|
||||
"mt-4": mt === "sm",
|
||||
"mt-8": mt === "md",
|
||||
"mt-12": mt === "lg",
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
In the above example the utility is used to apply a base style, a margin top that is dependent on the `mt` prop and a custom className.
|
||||
The Box component accepts a `className` prop that is merged with the other classNames, and the underlying usage of `tw-merge` ensures that all Tailwind CSS classes are merged without style conflicts.
|
||||
|
||||
<Feedback title={"clx"} />
|
||||
Reference in New Issue
Block a user