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

docs: add missing props to UI components (#13247)

Browse Source
This commit is contained in:
Shahed Nasser
2025-08-20 12:36:57 +03:00
committed by GitHub
parent d1a1135328
commit 69d22213f4
10 changed files with 309 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
www/apps/book/public/llms-full.txt
View File

@@ -39612,6 +39612,61 @@ module.exports = defineConfig({
|\`channels\`|The channels this notification module is used to send notifications for. While the local notification module doesn't actually send the notification,
it's important to specify its channels to make sure it's used when a notification for that channel is created.|
***
## Send Notifications to the Admin Notification Panel
The Local Notification Module Provider can also be used to send notifications to the [Medusa Admin's notification panel](https://docs.medusajs.com/user-guide#check-notifications/index.html.md).
You can send notifications to the admin dashboard when a certain action occurs using a subscriber, a custom workflow or a workflow hook.
For example, to send an admin notification whenever an order is placed, create a [subscriber](https://docs.medusajs.com/docs/learn/fundamentals/events-and-subscribers/index.html.md) at `src/subscribers/order-placed.ts` with the following content:
```ts title="src/subscribers/order-placed.ts" highlights={highlights} collapsibleLines="1-6" expandButtonLabel="Show Imports"
import type {
SubscriberArgs,
SubscriberConfig,
} from "@medusajs/framework"
import { Modules } from "@medusajs/framework/utils"
export default async function orderPlacedHandler({
event: { data },
container,
}: SubscriberArgs<{ id: string }>) {
const notificationModuleService = container.resolve(Modules.NOTIFICATION)
await notificationModuleService.createNotifications({
to: "",
channel: "feed",
template: "admin-ui",
data: {
title: "New order",
description: `A new order has been placed`,
},
})
}
export const config: SubscriberConfig = {
event: "order.placed",
}
```
In this subscriber, you:
- Resolve the Notification Module's main service from the [Medusa container](https://docs.medusajs.com/docs/learn/fundamentals/medusa-container/index.html.md).
- Use the `createNotifications` method of the Notification Module's main service to create a notification to be sent to the admin dashboard. By specifying the `feed` channel, the Local Notification Module Provider is used to send the notification.
- The `template` property of the `createNotifications` method's parameter must be set to `admin-ui`.
- The `data` property allows you to customize the content of the admin notification. It must contain `title` and `description` properties.
### Test Sending Notification
To test this out, start the Medusa application:
```bash npm2yarn
npm run dev
```
Then, place an order. The subscriber will run, sending a notification to the Medusa Admin's notification panel.
# Notification Module
@@ -89246,16 +89301,12 @@ import { Calendar } from "@medusajs/ui"
Calendar component used to select a date.
Its props are based on \[React Aria Calendar]\(https://react-spectrum.adobe.com/react-aria/Calendar.html#calendar-1).
- autoFocus: (boolean) Whether to automatically focus the calendar when it mounts.
- defaultFocusedValue: (DateValue) The date that is focused when the calendar first mounts (uncountrolled).
- errorMessage: (ReactNode) An error message to display when the selected value is invalid.
- focusedValue: (DateValue) Controls the currently focused date within the calendar.
- isDisabled: (boolean) Whether the calendar is disabled.
- isInvalid: (boolean) Whether the current selection is invalid according to application logic.
- isReadOnly: (boolean) Whether the calendar value is immutable.
- onFocusChange: (signature) Handler that is called when the focused date changes.
- pageBehavior: (PageBehavior) Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
- validationState: (ValidationState) Whether the current selection is valid or invalid according to application logic.
- value: (union) The currently selected date.
- defaultValue: (union) The date that is selected when the calendar first mounts (uncontrolled).
- onChange: (signature) A function that is triggered when the selected date changes.
- isDateUnavailable: (signature) A function that determines whether a date is unavailable for selection.
- minValue: (Date) The minimum date that can be selected.
- maxValue: (Date) The maximum date that can be selected.
***
@@ -90078,67 +90129,17 @@ This component is based on the input element and supports all of its props
- symbol: (string) The symbol to show in the input.
- code: (string) The currency code to show in the input.
- size: (union) The input's size. Default: "base"
- allowDecimals: (boolean) Allow decimals
- disabled: (boolean) Whether the input is disabled.
Default = true
- allowNegativeValue: (boolean) Allow user to enter negative value
Default = true
- className: (string) Class names
- customInput: (ElementType) Custom component
Default = \<input/>
- decimalScale: (number) Specify decimal scale for padding/trimming
Example:
&#x20; 1.5 -> 1.50
&#x20; 1.234 -> 1.23
- decimalSeparator: (string) Separator between integer part and fractional part of value.
This cannot be a number
- decimalsLimit: (number) Limit length of decimals allowed
Default = 2
- defaultValue: (union) Default value if not passing in value via props
- disableAbbreviations: (boolean) Disable abbreviations (m, k, b)
Default = false
- disabled: (boolean) Disabled
Default = false
- disableGroupSeparators: (boolean) Disable auto adding separator between values eg. 1000 -> 1,000
Default = false
- fixedDecimalLength: (number) Value will always have the specified length of decimals
Example:
&#x20; 123 -> 1.23
Note: This formatting only happens onBlur
- formatValueOnBlur: (boolean) When set to false, the formatValueOnBlur flag disables the application of the \_\_onValueChange\_\_ function
specifically on blur events. If disabled or set to false, the onValueChange will not trigger on blur.
Default = true
- groupSeparator: (string) Separator between thousand, million and billion
This cannot be a number
- id: (string) Component id
- intlConfig: (IntlConfig) International locale config, examples:
&#x20; \{ locale: 'ja-JP', currency: 'JPY' }
&#x20; \{ locale: 'en-IN', currency: 'INR' }
Any prefix, groupSeparator or decimalSeparator options passed in
will override Intl Locale config
- maxLength: (number) Maximum characters the user can enter
- onValueChange: (signature) Handle change in value
- placeholder: (string) Placeholder if there is no value
- step: (number) Incremental value change on arrow down and arrow up key press
- transformRawValue: (signature) Transform the raw value form the input before parsing
&#x20;Default: false
- onInvalid: (undefined) A function that is triggered when the input is invalid.
***
## Examples
### Controlled
### Controlled Currency Input
```tsx
import { useState } from "react"
@@ -90173,7 +90174,7 @@ export default function CurrencyInputControlled() {
```
### Disabled
### Disabled Currency Input
```tsx
import { CurrencyInput } from "@medusajs/ui"
@@ -90194,7 +90195,7 @@ export default function CurrencyInputDisabled() {
```
### Error State
### Currency Input with Error State
```tsx
import { useState } from "react"
@@ -90227,7 +90228,7 @@ export default function CurrencyInputError() {
```
### Sizes
### Currency Input Sizes
#### Base
@@ -92743,9 +92744,11 @@ This component is based on the \[Radix UI Dropdown Menu Trigger]\(https://www.ra
This component is based on the \[Radix UI Dropdown Menu Content]\(https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.
- sideOffset: (undefined) Default: 8
- collisionPadding: (undefined) Default: 8
- align: (undefined) Default: "center"
- sideOffset: (undefined) The space in pixels between the dropdown menu and its trigger element. Default: 8
- collisionPadding: (undefined) The distance in pixels from the boundary edges where collision detection should occur. Default: 8
- align: (undefined) The alignment of the dropdown menu relative to its trigger element.
@defaultValue center Default: "center"
### DropdownMenu.Item Props
@@ -92777,12 +92780,6 @@ This component is based on the \[Radix UI Dropdown Menu RadioItem]\(https://www.
### DropdownMenu.Shortcut Props
This component is based on the \`span\` element and supports all of its props
***
## Examples
@@ -93844,7 +93841,7 @@ This component is based on the \[Radix UI Label]\(https://www.radix-ui.com/primi
## Examples
### All Sizes
### Label Sizes
```tsx
import { Label } from "@medusajs/ui"
@@ -93890,7 +93887,7 @@ export default function LabelAllSizes() {
```
### With Form Inputs
### Label with Form Inputs
```tsx
import { Label, Input } from "@medusajs/ui"
@@ -94607,7 +94604,7 @@ This component is based on the \`div\` element and supports all of its props
## Examples
### Confirmation Variant
### Confirmation Prompt Variant
The `confirmation` variant is useful when confirming an operation that isn't destructive, such as deleting an item.
@@ -94852,7 +94849,15 @@ export default function RadioGroupChoiceBox() {
```
{/* TODO add API reference */}
### Choice Box API Reference
### RadioGroup.ChoiceBox Props
This component is based on the \[Radix UI Radio Group Item]\(https://www.radix-ui.com/primitives/docs/components/radio-group#item) primitives.
- label: (string) The label for the radio button.
- description: (string) The description for the radio button.
- value: (string) The value of the radio button.
# Select
@@ -96443,16 +96448,18 @@ import { Tooltip } from "@medusajs/ui"
This component is based on the \[Radix UI Tooltip]\(https://www.radix-ui.com/primitives/docs/components/tooltip) primitive.
- content: (ReactReactNode) The content to display in the tooltip.
- onClick: (ReactMouseEventHandler) A function that is triggered when the tooltip is clicked.
- side: (union) The side to position the tooltip.
&#x20;Default: top
- maxWidth: (number) The maximum width of the tooltip. Default: 220
- aria-label: (string) A more descriptive label for accessibility purpose
- delayDuration: (number) The duration from when the pointer enters the trigger until the tooltip gets opened. This will
override the prop with the same name passed to Provider.
- forceMount: (literal) Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries.
- onEscapeKeyDown: (signature) Event handler called when the escape key is down.
Can be prevented.
- onPointerDownOutside: (signature) Event handler called when the a \`pointerdown\` event happens outside of the \`Tooltip\`.
Can be prevented.
- sideOffset: (number) The distance in pixels between the tooltip and its trigger. Default: 8
- children: (undefined) The element to trigger the tooltip.
- open: (boolean) Whether the tooltip is currently open.
- defaultOpen: (boolean) Whether the tooltip is open by default.
- onOpenChange: (signature) A function that is called when the tooltip's open state changes.
- delayDuration: (number) The time in milliseconds to delay the tooltip's appearance.
***