chore(docs): Updated UI Reference (automated) (#9726)
Automated changes by [create-pull-request](https://github.com/peter-evans/create-pull-request) GitHub action Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com> Co-authored-by: Shahed Nasser <27354907+shahednasser@users.noreply.github.com>
This commit is contained in:
committed by
GitHub
parent
432af1e2d1
commit
e196ad7659
@@ -23,21 +23,3 @@ import { Calendar } from "@medusajs/ui"
|
||||
---
|
||||
|
||||
<ComponentReference mainComponent="Calendar" />
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
### Single Date
|
||||
|
||||
<ComponentExample name="calendar-single" />
|
||||
|
||||
### Range
|
||||
|
||||
<ComponentExample name="calendar-range" />
|
||||
|
||||
### Changing Locale
|
||||
|
||||
Changing the locale requires installing the [date-fns library](https://date-fns.org/docs/Getting-Started#npm).
|
||||
|
||||
<ComponentExample name="calendar-locale" />
|
||||
|
||||
@@ -41,6 +41,29 @@ import { CodeBlock } from "@medusajs/ui"
|
||||
"CodeBlock.Body"
|
||||
]} />
|
||||
|
||||
## Usage Outside Medusa Admin
|
||||
|
||||
---
|
||||
|
||||
If you're using the `CodeBlock` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `CodeBlock.Header` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):
|
||||
|
||||
```tsx
|
||||
<TooltipProvider>
|
||||
<CodeBlock
|
||||
snippets={[
|
||||
{
|
||||
language: "tsx",
|
||||
label: "Label",
|
||||
code: "import { useProduct } from \"medusa-react\"",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CodeBlock.Header />
|
||||
<CodeBlock.Body />
|
||||
</CodeBlock>
|
||||
</TooltipProvider>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
@@ -24,4 +24,22 @@ import { Command } from "@medusajs/ui"
|
||||
|
||||
---
|
||||
|
||||
<ComponentReference mainComponent="Command" />
|
||||
<ComponentReference mainComponent="Command" />
|
||||
|
||||
## Usage Outside Medusa Admin
|
||||
|
||||
---
|
||||
|
||||
If you're using the `Command` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `Command.Copy` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):
|
||||
|
||||
```tsx
|
||||
<TooltipProvider>
|
||||
<Command>
|
||||
<code>yarn add @medusajs/ui</code>
|
||||
<Command.Copy
|
||||
content="yarn add @medusajs/ui"
|
||||
className="ml-auto"
|
||||
/>
|
||||
</Command>
|
||||
</TooltipProvider>
|
||||
```
|
||||
@@ -24,6 +24,18 @@ import { Copy } from "@medusajs/ui"
|
||||
|
||||
<ComponentReference mainComponent="Copy" />
|
||||
|
||||
## Usage Outside Medusa Admin
|
||||
|
||||
---
|
||||
|
||||
If you're using the `Copy` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `Copy` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):
|
||||
|
||||
```tsx
|
||||
<TooltipProvider>
|
||||
<Copy content="yarn add @medusajs/ui" />
|
||||
</TooltipProvider>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
---
|
||||
|
||||
@@ -23,46 +23,3 @@ import { DatePicker } from "@medusajs/ui"
|
||||
---
|
||||
|
||||
<ComponentReference mainComponent="DatePicker" />
|
||||
|
||||
|
||||
## 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" />
|
||||
|
||||
### Changing the Locale
|
||||
|
||||
Changing the locale requires installing the [date-fns library](https://date-fns.org/docs/Getting-Started#npm).
|
||||
|
||||
<ComponentExample name="date-picker-locale" />
|
||||
@@ -9,7 +9,7 @@ component: true
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Tooltip } from "@medusajs/ui"
|
||||
import { Tooltip, TooltipProvider } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
|
||||
@@ -22,4 +22,22 @@ import { Tooltip } from "@medusajs/ui"
|
||||
|
||||
---
|
||||
|
||||
<ComponentReference mainComponent="Tooltip" />
|
||||
<ComponentReference mainComponent="Tooltip" />
|
||||
|
||||
## Usage Outside Medusa Admin
|
||||
|
||||
---
|
||||
|
||||
If you're using the `Tooltip` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree:
|
||||
|
||||
```tsx
|
||||
<TooltipProvider>
|
||||
<Tooltip content="Tooltip content">Trigger</Tooltip>
|
||||
</TooltipProvider>
|
||||
```
|
||||
|
||||
### TooltipProvider Reference
|
||||
|
||||
---
|
||||
|
||||
<ComponentReference mainComponent="TooltipProvider" />
|
||||
Reference in New Issue
Block a user