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

docs: create docs workspace (#5174)

Browse Source 
* 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
2023-09-21 20:57:15 +03:00
committed by GitHub
parent 19c5d5ba36
commit fa7c94b4cc
3209 changed files with 32188 additions and 31018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
www/apps/ui/src/content/docs/components/avatar.mdx Normal file
View File

@@ -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" />

71
www/apps/ui/src/content/docs/components/badge.mdx Normal file
View File

@@ -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" />

63
www/apps/ui/src/content/docs/components/button.mdx Normal file
View File

@@ -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" />

39
www/apps/ui/src/content/docs/components/calendar.mdx Normal file
View File

@@ -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" />

45
www/apps/ui/src/content/docs/components/checkbox.mdx Normal file
View File

@@ -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" />

77
www/apps/ui/src/content/docs/components/code-block.mdx Normal file
View File

@@ -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" />

27
www/apps/ui/src/content/docs/components/command.mdx Normal file
View File

@@ -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.

33
www/apps/ui/src/content/docs/components/container.mdx Normal file
View File

@@ -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" />

41
www/apps/ui/src/content/docs/components/copy.mdx Normal file
View File

@@ -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" />

64
www/apps/ui/src/content/docs/components/date-picker.mdx Normal file
View File

@@ -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" />

34
www/apps/ui/src/content/docs/components/drawer.mdx Normal file
View File

@@ -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.

50
www/apps/ui/src/content/docs/components/dropdown-menu.mdx Normal file
View File

@@ -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" />

39
www/apps/ui/src/content/docs/components/focus-modal.mdx Normal file
View File

@@ -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.

27
www/apps/ui/src/content/docs/components/heading.mdx Normal file
View File

@@ -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" />

53
www/apps/ui/src/content/docs/components/input.mdx Normal file
View File

@@ -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" />

26
www/apps/ui/src/content/docs/components/kbd.mdx Normal file
View File

@@ -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.

64
www/apps/ui/src/content/docs/components/label.mdx Normal file
View File

@@ -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" />

45
www/apps/ui/src/content/docs/components/prompt.mdx Normal file
View File

@@ -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.

41
www/apps/ui/src/content/docs/components/radio-group.mdx Normal file
View File

@@ -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" />

86
www/apps/ui/src/content/docs/components/select.mdx Normal file
View File

@@ -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" />

47
www/apps/ui/src/content/docs/components/switch.mdx Normal file
View File

@@ -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" />

52
www/apps/ui/src/content/docs/components/table.mdx Normal file
View File

@@ -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" />

36
www/apps/ui/src/content/docs/components/text.mdx Normal file
View File

@@ -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" />

25
www/apps/ui/src/content/docs/components/textarea.mdx Normal file
View File

@@ -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.

73
www/apps/ui/src/content/docs/components/toast.mdx Normal file
View File

@@ -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" />

27
www/apps/ui/src/content/docs/components/tooltip.mdx Normal file
View File

@@ -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" />