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:
github-actions[bot]
2024-10-24 09:38:58 +00:00
committed by GitHub
parent 432af1e2d1
commit e196ad7659
99 changed files with 2962 additions and 2581 deletions
@@ -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" />