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

docs: update and fix UI props docs (#10754)

Browse Source
This commit is contained in:
Shahed Nasser
2024-12-27 14:53:46 +02:00
committed by GitHub
parent 8839970295
commit 1c355dac36
85 changed files with 2067 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/book/next.config.mjs
+4 -4
View File
@@ -167,12 +167,12 @@ const nextConfig = {
}
},
redirects,
outputFileTracingExcludes: {
"*": ["node_modules/@medusajs/icons"],
},
experimental: {
outputFileTracingExcludes: {
"*": ["node_modules/@medusajs/icons"],
},
optimizePackageImports: ["@medusajs/icons", "@medusajs/ui"],
},
optimizePackageImports: ["@medusajs/icons", "@medusajs/ui"],
}
export default withMDX(nextConfig)
www/apps/ui/src/components/component-reference.tsx
+4 -1
View File
@@ -66,7 +66,10 @@ const ComponentReference = ({
<PropTable props={componentSpec.props!} />
</Suspense>
</Container>
<Feedback title={`props of ${component}`} />
<Feedback
title={`props of ${component}`}
question="Was this helpful?"
/>
</>
)}
</>
www/apps/ui/src/components/props-table.tsx
+14 -4
View File
@@ -45,7 +45,10 @@ const Row = ({
propData: { tsType: tsType, defaultValue, description },
}: RowProps) => {
const normalizeRaw = (str: string): string => {
return str.replace("\\|", "|")
return str
.replace("\\|", "|")
.replaceAll("&#60;", "<")
.replaceAll("&#62;", ">")
}
const getTypeRaw = useCallback((type: PropSpecType): string => {
let raw = "raw" in type ? type.raw || type.name : type.name
@@ -74,9 +77,11 @@ const Row = ({
}, [])
const getTypeTooltipContent = useCallback(
(type: PropSpecType): string | undefined => {
if (type?.name === "signature" && "type" in type) {
return getTypeRaw(type)
} else if (type?.name === "Array" && type.raw) {
if (
(type?.name === "signature" && "type" in type) ||
(type?.name === "Array" && type.raw) ||
("raw" in type && type.raw)
) {
return getTypeRaw(type)
}
@@ -107,6 +112,11 @@ const Row = ({
text: element.value,
canBeCopied: true,
})
} else if ("raw" in element) {
typeNodes.push({
text: getTypeText(element),
tooltipContent: getTypeTooltipContent(element),
})
} else {
typeNodes.push({
text: element.name,
www/apps/ui/src/config/site.ts
+4
View File
@@ -29,4 +29,8 @@ export const siteConfig: SiteConfig = {
showCategories: true,
},
logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
version: {
...globalConfig.version,
hide: true,
},
}
www/apps/ui/src/content/docs/components/drawer.mdx
+9 -1
View File
@@ -31,4 +31,12 @@ import { Drawer } from "@medusajs/ui"
---
<ComponentReference mainComponent="Drawer" />
<ComponentReference mainComponent="Drawer" componentsToShow={[
"Drawer",
"Drawer.Trigger",
"Drawer.Content",
"Drawer.Header",
"Drawer.Title",
"Drawer.Body",
"Drawer.Footer"
]} />
www/apps/ui/src/content/docs/components/focus-modal.mdx
+3
View File
@@ -30,8 +30,11 @@ import { FocusModal } from "@medusajs/ui"
<ComponentReference mainComponent="FocusModal" componentsToShow={[
"FocusModal",
"FocusModal.Trigger",
"FocusModal.Content",
"FocusModal.Header",
"FocusModal.Body",
"FocusModal.Footer"
]} />
## Example: Control Open State
www/apps/ui/src/content/docs/components/select.mdx
+6 -1
View File
@@ -39,7 +39,8 @@ import { Select } from "@medusajs/ui"
"Select.Value",
"Select.Group",
"Select.Label",
"Select.Item"
"Select.Item",
"Select.Content"
]} />
## Examples
@@ -50,6 +51,10 @@ import { Select } from "@medusajs/ui"
<ComponentExample name="select-small" />
### Item-Aligned Position
<ComponentExample name="select-item-aligned" />
### Disabled
<ComponentExample name="select-disabled" />
www/apps/ui/src/examples/select-item-aligned.tsx
+35
View File
@@ -0,0 +1,35 @@
import { Select } from "@medusajs/ui"
export default function SelectItemAligned() {
return (
<div className="w-[256px]">
<Select>
<Select.Trigger>
<Select.Value placeholder="Select a currency" />
</Select.Trigger>
<Select.Content position="item-aligned">
{currencies.map((item) => (
<Select.Item key={item.value} value={item.value}>
{item.label}
</Select.Item>
))}
</Select.Content>
</Select>
</div>
)
}
const currencies = [
{
value: "eur",
label: "EUR",
},
{
value: "usd",
label: "USD",
},
{
value: "dkk",
label: "DKK",
},
]
www/apps/ui/src/registries/example-registry.tsx
+5
View File
@@ -545,6 +545,11 @@ export const ExampleRegistry: Record<string, ExampleType> = {
component: React.lazy(async () => import("@/examples/button-loading")),
file: "src/examples/button-loading.tsx",
},
"select-item-aligned": {
name: "select-item-aligned",
component: React.lazy(async () => import("@/examples/select-item-aligned")),
file: "src/examples/select-item-aligned.tsx",
},
"select-small": {
name: "select-small",
component: React.lazy(async () => import("@/examples/select-small")),
www/apps/ui/src/specs/Avatar/Avatar.json
+44
View File
@@ -23,6 +23,20 @@
"computed": false
},
"description": "The style of the avatar.",
"tsType": {
"name": "union",
"raw": "\"squared\" \\| \"rounded\"",
"elements": [
{
"name": "literal",
"value": "\"squared\""
},
{
"name": "literal",
"value": "\"rounded\""
}
]
},
"required": false
},
"size": {
@@ -31,6 +45,36 @@
"computed": false
},
"description": "The size of the avatar's border radius.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Badge/Badge.json
+70
View File
@@ -20,6 +20,32 @@
"computed": false
},
"description": "The badge's size.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
},
"rounded": {
@@ -28,6 +54,20 @@
"computed": false
},
"description": "The style of the badge's border radius.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"full\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"full\""
}
]
},
"required": false
},
"color": {
@@ -36,6 +76,36 @@
"computed": false
},
"description": "The badge's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Button/Button.json
+44
View File
@@ -31,6 +31,28 @@
"computed": false
},
"description": "The button's style.",
"tsType": {
"name": "union",
"raw": "\"primary\" \\| \"transparent\" \\| \"secondary\" \\| \"danger\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"transparent\""
},
{
"name": "literal",
"value": "\"secondary\""
},
{
"name": "literal",
"value": "\"danger\""
}
]
},
"required": false
},
"size": {
@@ -39,6 +61,28 @@
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Calendar/Calendar.json
+71 -72
View File
@@ -1,106 +1,105 @@
{
"description": "",
"description": "Calendar component used to select a date.\nIts props are based on [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#calendar-1).",
"methods": [],
"displayName": "Calendar",
"props": {
"value": {
"autoFocus": {
"description": "Whether to automatically focus the calendar when it mounts.",
"required": false,
"tsType": {
"name": "union",
"raw": "Date | null",
"elements": [
{
"name": "Date"
},
{
"name": "null"
}
]
},
"description": ""
"name": "boolean"
}
},
"defaultValue": {
"defaultFocusedValue": {
"description": "The date that is focused when the calendar first mounts (uncountrolled).",
"required": false,
"tsType": {
"name": "union",
"raw": "Date | null",
"elements": [
{
"name": "Date"
},
{
"name": "null"
}
]
},
"description": ""
"name": "DateValue",
"elements": [],
"raw": "DateValue"
}
},
"onChange": {
"errorMessage": {
"description": "An error message to display when the selected value is invalid.",
"required": false,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"focusedValue": {
"description": "Controls the currently focused date within the calendar.",
"required": false,
"tsType": {
"name": "DateValue",
"elements": [],
"raw": "DateValue"
}
},
"isDisabled": {
"description": "Whether the calendar is disabled.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isInvalid": {
"description": "Whether the current selection is invalid according to application logic.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isReadOnly": {
"description": "Whether the calendar value is immutable.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"onFocusChange": {
"description": "Handler that is called when the focused date changes.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: Date | null) => void",
"raw": "(date: CalendarDate) => void",
"signature": {
"arguments": [
{
"name": "date",
"type": {
"name": "union",
"raw": "Date | null",
"elements": [
{
"name": "Date"
},
{
"name": "null"
}
]
"name": "CalendarDate",
"elements": [],
"raw": "CalendarDate"
},
"name": "value"
"rest": false
}
],
"return": {
"name": "void"
}
}
},
"description": ""
}
},
"isDateUnavailable": {
"pageBehavior": {
"description": "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(date: Date) => boolean",
"signature": {
"arguments": [
{
"type": {
"name": "Date"
},
"name": "date"
}
],
"return": {
"name": "boolean"
}
}
},
"description": ""
"name": "PageBehavior",
"elements": [],
"raw": "PageBehavior"
}
},
"minValue": {
"validationState": {
"description": "Whether the current selection is valid or invalid according to application logic.",
"required": false,
"tsType": {
"name": "Date"
},
"description": ""
},
"maxValue": {
"required": false,
"tsType": {
"name": "Date"
},
"description": ""
"name": "ValidationState",
"elements": [],
"raw": "ValidationState"
}
}
},
"composes": [
www/apps/ui/src/specs/CurrencyInput/CurrencyInput.json
+231
View File
@@ -23,7 +23,238 @@
"computed": false
},
"description": "The input's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
},
"allowDecimals": {
"description": "Allow decimals\n\nDefault = true",
"required": false,
"tsType": {
"name": "boolean"
}
},
"allowNegativeValue": {
"description": "Allow user to enter negative value\n\nDefault = true",
"required": false,
"tsType": {
"name": "boolean"
}
},
"className": {
"description": "Class names",
"required": false,
"tsType": {
"name": "string"
}
},
"customInput": {
"description": "Custom component\n\nDefault = <input/>",
"required": false,
"tsType": {
"name": "ElementType",
"elements": [],
"raw": "ElementType"
}
},
"decimalScale": {
"description": "Specify decimal scale for padding/trimming\n\nExample:\n 1.5 -> 1.50\n 1.234 -> 1.23",
"required": false,
"tsType": {
"name": "number"
}
},
"decimalSeparator": {
"description": "Separator between integer part and fractional part of value.\n\nThis cannot be a number",
"required": false,
"tsType": {
"name": "string"
}
},
"decimalsLimit": {
"description": "Limit length of decimals allowed\n\nDefault = 2",
"required": false,
"tsType": {
"name": "number"
}
},
"defaultValue": {
"description": "Default value if not passing in value via props",
"required": false,
"tsType": {
"name": "union",
"raw": "string \\| number",
"elements": [
{
"name": "string"
},
{
"name": "number"
}
]
}
},
"disableAbbreviations": {
"description": "Disable abbreviations (m, k, b)\n\nDefault = false",
"required": false,
"tsType": {
"name": "boolean"
}
},
"disabled": {
"description": "Disabled\n\nDefault = false",
"required": false,
"tsType": {
"name": "boolean"
}
},
"disableGroupSeparators": {
"description": "Disable auto adding separator between values eg. 1000 -> 1,000\n\nDefault = false",
"required": false,
"tsType": {
"name": "boolean"
}
},
"fixedDecimalLength": {
"description": "Value will always have the specified length of decimals\n\nExample:\n 123 -> 1.23\n\nNote: This formatting only happens onBlur",
"required": false,
"tsType": {
"name": "number"
}
},
"formatValueOnBlur": {
"description": "When set to false, the formatValueOnBlur flag disables the application of the __onValueChange__ function\nspecifically on blur events. If disabled or set to false, the onValueChange will not trigger on blur.\nDefault = true",
"required": false,
"tsType": {
"name": "boolean"
}
},
"groupSeparator": {
"description": "Separator between thousand, million and billion\n\nThis cannot be a number",
"required": false,
"tsType": {
"name": "string"
}
},
"id": {
"description": "Component id",
"required": false,
"tsType": {
"name": "string"
}
},
"intlConfig": {
"description": "International locale config, examples:\n { locale: 'ja-JP', currency: 'JPY' }\n { locale: 'en-IN', currency: 'INR' }\n\nAny prefix, groupSeparator or decimalSeparator options passed in\nwill override Intl Locale config",
"required": false,
"tsType": {
"name": "IntlConfig",
"elements": [],
"raw": "IntlConfig"
}
},
"maxLength": {
"description": "Maximum characters the user can enter",
"required": false,
"tsType": {
"name": "number"
}
},
"onValueChange": {
"description": "Handle change in value",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: undefined \\| string, name?: string, values?: CurrencyInputOnChangeValues) => void",
"signature": {
"arguments": [
{
"name": "value",
"type": {
"name": "union",
"raw": "undefined \\| string",
"elements": [
{
"name": "undefined"
},
{
"name": "string"
}
]
},
"rest": false
},
{
"name": "name",
"type": {
"name": "string"
},
"rest": false
},
{
"name": "values",
"type": {
"name": "CurrencyInputOnChangeValues",
"elements": [],
"raw": "CurrencyInputOnChangeValues"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"placeholder": {
"description": "Placeholder if there is no value",
"required": false,
"tsType": {
"name": "string"
}
},
"step": {
"description": "Incremental value change on arrow down and arrow up key press",
"required": false,
"tsType": {
"name": "number"
}
},
"transformRawValue": {
"description": "Transform the raw value form the input before parsing",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(rawValue: string) => string",
"signature": {
"arguments": [
{
"name": "rawValue",
"type": {
"name": "string"
},
"rest": false
}
],
"return": {
"name": "string"
}
}
}
}
},
"composes": [
www/apps/ui/src/specs/DatePicker/DatePicker.json
+412 -21
View File
@@ -3,29 +3,420 @@
"methods": [],
"displayName": "DatePicker",
"props": {
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "",
"required": false
"aria-describedby": {
"description": "Identifies the element (or elements) that describes the object.",
"required": false,
"tsType": {
"name": "string"
}
},
"shouldCloseOnSelect": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"required": false
"aria-details": {
"description": "Identifies the element (or elements) that provide a detailed, extended description for the object.",
"required": false,
"tsType": {
"name": "string"
}
},
"modal": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"required": false
"aria-label": {
"description": "Defines a string value that labels the current element.",
"required": false,
"tsType": {
"name": "string"
}
},
"aria-labelledby": {
"description": "Identifies the element (or elements) that labels the current element.",
"required": false,
"tsType": {
"name": "string"
}
},
"autoFocus": {
"description": "Whether the element should receive focus on render.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"defaultOpen": {
"description": "Whether the overlay is open by default (uncontrolled).",
"required": false,
"tsType": {
"name": "boolean"
}
},
"description": {
"description": "A description for the field. Provides a hint such as specific requirements for what to choose.",
"required": false,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"errorMessage": {
"description": "An error message for the field.",
"required": false,
"tsType": {
"name": "union",
"raw": "ReactNode \\| (v: ValidationResult) => ReactNode",
"elements": [
{
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
},
{
"name": "signature",
"type": "function",
"raw": "(v: ValidationResult) => ReactNode",
"signature": {
"arguments": [
{
"name": "v",
"type": {
"name": "ValidationResult"
},
"rest": false
}
],
"return": {
"name": "ReactNode"
}
}
}
]
}
},
"hideTimeZone": {
"description": "Whether to hide the time zone abbreviation.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"hourCycle": {
"description": "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.",
"required": false,
"tsType": {
"name": "union",
"raw": "12 \\| 24",
"elements": [
{
"name": "literal",
"value": "12"
},
{
"name": "literal",
"value": "24"
}
]
}
},
"id": {
"description": "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
"required": false,
"tsType": {
"name": "string"
}
},
"isDisabled": {
"description": "Whether the input is disabled.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isInvalid": {
"description": "Whether the input value is invalid.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isOpen": {
"description": "Whether the overlay is open by default (controlled).",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isReadOnly": {
"description": "Whether the input can be selected but not changed by the user.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isRequired": {
"description": "Whether user input is required on the input before form submission.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"label": {
"description": "The content to display as the label.",
"required": false,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"name": {
"description": "The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).",
"required": false,
"tsType": {
"name": "string"
}
},
"onBlur": {
"description": "Handler that is called when the element loses focus.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: FocusEvent&#60;Element, Element&#62;) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "FocusEvent",
"elements": [],
"raw": "FocusEvent&#60;Element, Element&#62;"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onFocus": {
"description": "Handler that is called when the element receives focus.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: FocusEvent&#60;Element, Element&#62;) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "FocusEvent",
"elements": [],
"raw": "FocusEvent&#60;Element, Element&#62;"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onFocusChange": {
"description": "Handler that is called when the element's focus status changes.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(isFocused: boolean) => void",
"signature": {
"arguments": [
{
"name": "isFocused",
"type": {
"name": "boolean"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onKeyDown": {
"description": "Handler that is called when a key is pressed.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: KeyboardEvent) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "KeyboardEvent",
"elements": [],
"raw": "KeyboardEvent"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onKeyUp": {
"description": "Handler that is called when a key is released.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: KeyboardEvent) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "KeyboardEvent",
"elements": [],
"raw": "KeyboardEvent"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onOpenChange": {
"description": "Handler that is called when the overlay's open state changes.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(isOpen: boolean) => void",
"signature": {
"arguments": [
{
"name": "isOpen",
"type": {
"name": "boolean"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"pageBehavior": {
"description": "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
"required": false,
"tsType": {
"name": "PageBehavior",
"elements": [],
"raw": "PageBehavior"
}
},
"placeholderValue": {
"description": "A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.",
"required": false,
"tsType": {
"name": "union",
"raw": "CalendarDate \\| CalendarDateTime",
"elements": [
{
"name": "CalendarDate",
"elements": [],
"raw": "CalendarDate"
},
{
"name": "CalendarDateTime",
"elements": [],
"raw": "CalendarDateTime"
}
]
}
},
"shouldForceLeadingZeros": {
"description": "Whether to always show leading zeros in the month, day, and hour fields.\nBy default, this is determined by the user's locale.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"validate": {
"description": "A function that returns an error message if a given value is invalid.\nValidation errors are displayed to the user when the form is submitted\nif `validationBehavior=\"native\"`. For realtime validation, use the `isInvalid`\nprop instead.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: CalendarDate \\| CalendarDateTime) => undefined \\| null \\| true \\| ValidationError",
"signature": {
"arguments": [
{
"name": "value",
"type": {
"name": "union",
"raw": "CalendarDate \\| CalendarDateTime",
"elements": [
{
"name": "CalendarDate"
},
{
"name": "CalendarDateTime"
}
]
},
"rest": false
}
],
"return": {
"name": "union",
"raw": "undefined \\| null \\| true \\| ValidationError",
"elements": [
{
"name": "undefined"
},
{
"name": "null"
},
{
"name": "true"
},
{
"name": "ValidationError"
}
]
}
}
}
},
"validationBehavior": {
"description": "Whether to use native HTML form validation to prevent form submission\nwhen the value is missing or invalid, or mark the field as required\nor invalid via ARIA.",
"required": false,
"tsType": {
"name": "union",
"raw": "\"aria\" \\| \"native\"",
"elements": [
{
"name": "literal",
"value": "\"aria\""
},
{
"name": "literal",
"value": "\"native\""
}
]
}
}
}
}
www/apps/ui/src/specs/Drawer/Drawer.Body.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to wrap the body content of the drawer.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Drawer.Body",
"props": {}
www/apps/ui/src/specs/Drawer/Drawer.Close.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to create the close button for the drawer.\nIt accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.",
"methods": [],
"displayName": "Drawer.Close",
"props": {}
www/apps/ui/src/specs/Drawer/Drawer.Content.json
+29 -2
View File
@@ -1,6 +1,33 @@
{
"description": "",
"description": "This component wraps the content of the drawer.\nIt accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.",
"methods": [],
"displayName": "Drawer.Content",
"props": {}
"props": {
"overlayProps": {
"required": false,
"tsType": {
"name": "ReactComponentPropsWithoutRef",
"raw": "React.ComponentPropsWithoutRef<typeof DrawerOverlay>",
"elements": [
{
"name": "DrawerOverlay"
}
]
},
"description": "Props for the overlay component.\nIt accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component."
},
"portalProps": {
"required": false,
"tsType": {
"name": "ReactComponentPropsWithoutRef",
"raw": "React.ComponentPropsWithoutRef<typeof DrawerPortal>",
"elements": [
{
"name": "DrawerPortal"
}
]
},
"description": "Props for the portal component that wraps the drawer content.\nIt accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component."
}
}
}
www/apps/ui/src/specs/Drawer/Drawer.Description.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component adds accessible description to the drawer.\nIt accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.",
"methods": [],
"displayName": "Drawer.Description",
"props": {}
www/apps/ui/src/specs/Drawer/Drawer.Footer.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to wrap the footer content of the drawer.\nThis component is based on the `div` element and supports all of its props.",
"methods": [],
"displayName": "Drawer.Footer",
"props": {}
www/apps/ui/src/specs/Drawer/Drawer.Header.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to wrap the header content of the drawer.\nThis component is based on the `div` element and supports all of its props.",
"methods": [],
"displayName": "Drawer.Header",
"props": {}
www/apps/ui/src/specs/Drawer/Drawer.Overlay.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to create the overlay for the drawer.\nIt accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.",
"methods": [],
"displayName": "Drawer.Overlay",
"props": {}
www/apps/ui/src/specs/Drawer/Drawer.Portal.json
+3 -2
View File
@@ -1,5 +1,6 @@
{
"description": "",
"description": "The `Drawer.Content` component uses this component to wrap the drawer content.\nIt accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.",
"methods": [],
"displayName": "Drawer.Portal"
"displayName": "Drawer.Portal",
"props": {}
}
www/apps/ui/src/specs/Drawer/Drawer.Title.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component adds an accessible title to the drawer.\nIt accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.",
"methods": [],
"displayName": "Drawer.Title",
"props": {}
}
www/apps/ui/src/specs/Drawer/Drawer.Trigger.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to create the trigger button that opens the drawer.\nIt accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.",
"methods": [],
"displayName": "Drawer.Trigger",
"props": {}
www/apps/ui/src/specs/Drawer/Drawer.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.",
"methods": [],
"displayName": "Drawer"
"displayName": "Drawer",
"props": {}
}
www/apps/ui/src/specs/DropdownMenu/DropdownMenu.Group.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.",
"methods": [],
"displayName": "DropdownMenu.Group",
"props": {}
}
www/apps/ui/src/specs/DropdownMenu/DropdownMenu.RadioGroup.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.",
"methods": [],
"displayName": "DropdownMenu.RadioGroup",
"props": {}
}
www/apps/ui/src/specs/DropdownMenu/DropdownMenu.SubMenu.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.",
"methods": [],
"displayName": "DropdownMenu.SubMenu",
"props": {}
}
www/apps/ui/src/specs/DropdownMenu/DropdownMenu.Trigger.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.",
"methods": [],
"displayName": "DropdownMenu.Trigger",
"props": {}
}
www/apps/ui/src/specs/DropdownMenu/DropdownMenu.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.",
"methods": [],
"displayName": "DropdownMenu",
"props": {}
}
www/apps/ui/src/specs/FocusModal/FocusModal.Body.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"description": "This component is used to wrap the body content of the modal.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Body",
"props": {}
www/apps/ui/src/specs/FocusModal/FocusModal.Close.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is used to create the close button for the modal.\nIt accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.",
"methods": [],
"displayName": "FocusModal.Close",
"props": {}
}
www/apps/ui/src/specs/FocusModal/FocusModal.Content.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component wraps the content of the modal.\nIt accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.",
"methods": [],
"displayName": "FocusModal.Content",
"props": {}
www/apps/ui/src/specs/FocusModal/FocusModal.Description.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component adds accessible description to the modal.\nIt accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.",
"methods": [],
"displayName": "FocusModal.Description",
"props": {}
}
www/apps/ui/src/specs/FocusModal/FocusModal.Footer.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to wrap the footer content of the modal.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Footer",
"props": {}
www/apps/ui/src/specs/FocusModal/FocusModal.Header.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"description": "This component is used to wrap the header content of the modal.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Header",
"props": {}
www/apps/ui/src/specs/FocusModal/FocusModal.Overlay.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component is used to create the overlay for the modal.\nIt accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.",
"methods": [],
"displayName": "FocusModal.Overlay",
"props": {}
www/apps/ui/src/specs/FocusModal/FocusModal.Portal.json
+3 -2
View File
@@ -1,5 +1,6 @@
{
"description": "",
"description": "The `FocusModal.Content` component uses this component to wrap the modal content.\nIt accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.",
"methods": [],
"displayName": "FocusModal.Portal"
"displayName": "FocusModal.Portal",
"props": {}
}
www/apps/ui/src/specs/FocusModal/FocusModal.Title.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "This component adds an accessible title to the modal.\nIt accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.",
"methods": [],
"displayName": "FocusModal.Title",
"props": {}
www/apps/ui/src/specs/FocusModal/FocusModal.Trigger.json
+3 -2
View File
@@ -1,5 +1,6 @@
{
"description": "",
"description": "This component is used to create the trigger button that opens the modal.\nIt accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.",
"methods": [],
"displayName": "FocusModal.Trigger"
"displayName": "FocusModal.Trigger",
"props": {}
}
www/apps/ui/src/specs/FocusModal/FocusModal.json
+40 -1
View File
@@ -1,5 +1,44 @@
{
"description": "This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.",
"methods": [],
"displayName": "FocusModal"
"displayName": "FocusModal",
"props": {
"defaultOpen": {
"description": "Whether the modal is opened by default.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"open": {
"description": "Whether the modal is opened.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"onOpenChange": {
"description": "A function to handle when the modal is opened or closed.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(open: boolean) => void",
"signature": {
"arguments": [
{
"name": "open",
"type": {
"name": "boolean"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
}
}
}
www/apps/ui/src/specs/Heading/Heading.json
+18
View File
@@ -9,6 +9,24 @@
"computed": false
},
"description": "The heading level which specifies which heading element is used.",
"tsType": {
"name": "union",
"raw": "\"h1\" \\| \"h2\" \\| \"h3\"",
"elements": [
{
"name": "literal",
"value": "\"h1\""
},
{
"name": "literal",
"value": "\"h2\""
},
{
"name": "literal",
"value": "\"h3\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Hint/Hint.json
+14
View File
@@ -9,6 +9,20 @@
"computed": false
},
"description": "The hint's style.",
"tsType": {
"name": "union",
"raw": "\"error\" \\| \"info\"",
"elements": [
{
"name": "literal",
"value": "\"error\""
},
{
"name": "literal",
"value": "\"info\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/I18nProvider/I18nProvider.json
+19 -1
View File
@@ -4,5 +4,23 @@
"displayName": "I18nProvider",
"composes": [
"Props"
]
],
"props": {
"children": {
"description": "Contents that should have the locale applied.",
"required": true,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"locale": {
"description": "The locale to apply to the children.",
"required": false,
"tsType": {
"name": "string"
}
}
}
}
www/apps/ui/src/specs/IconBadge/IconBadge.json
+44
View File
@@ -20,6 +20,36 @@
"computed": false
},
"description": "The badge's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
},
"size": {
@@ -28,6 +58,20 @@
"computed": false
},
"description": "The badge's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/IconButton/IconButton.json
+44
View File
@@ -31,6 +31,20 @@
"computed": false
},
"description": "The button's style.",
"tsType": {
"name": "union",
"raw": "\"primary\" \\| \"transparent\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"transparent\""
}
]
},
"required": false
},
"size": {
@@ -39,6 +53,36 @@
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Input/Input.json
+14
View File
@@ -9,6 +9,20 @@
"computed": false
},
"description": "The input's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/InternalCalendar/InternalCalendar.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "InternalCalendar is the internal implementation of the Calendar component.\nIt's not for public use, but only used for other components like DatePicker.",
"methods": [],
"displayName": "InternalCalendar"
"displayName": "InternalCalendar",
"props": {}
}
www/apps/ui/src/specs/Label/Label.json
+36
View File
@@ -9,6 +9,28 @@
"computed": false
},
"description": "The label's size.",
"tsType": {
"name": "union",
"raw": "\"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
},
"weight": {
@@ -17,6 +39,20 @@
"computed": false
},
"description": "The label's font weight.",
"tsType": {
"name": "union",
"raw": "\"regular\" \\| \"plus\"",
"elements": [
{
"name": "literal",
"value": "\"regular\""
},
{
"name": "literal",
"value": "\"plus\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Popover/Popover.Anchor.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Anchor"
"displayName": "Popover.Anchor",
"props": {}
}
www/apps/ui/src/specs/Popover/Popover.Close.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Close"
"displayName": "Popover.Close",
"props": {}
}
www/apps/ui/src/specs/Popover/Popover.Content.json
+43
View File
@@ -9,6 +9,9 @@
"computed": false
},
"description": "The distance in pixels from the anchor.",
"tsType": {
"name": "number"
},
"required": false
},
"side": {
@@ -17,6 +20,28 @@
"computed": false
},
"description": "The preferred side of the anchor to render against when open.\nWill be reversed when collisions occur and `avoidCollisions` is enabled.",
"tsType": {
"name": "union",
"raw": "\"top\" \\| \"right\" \\| \"bottom\" \\| \"left\"",
"elements": [
{
"name": "literal",
"value": "\"top\""
},
{
"name": "literal",
"value": "\"right\""
},
{
"name": "literal",
"value": "\"bottom\""
},
{
"name": "literal",
"value": "\"left\""
}
]
},
"required": false
},
"align": {
@@ -25,6 +50,24 @@
"computed": false
},
"description": "The preferred alignment against the anchor. May change when collisions occur.",
"tsType": {
"name": "union",
"raw": "\"center\" \\| \"end\" \\| \"start\"",
"elements": [
{
"name": "literal",
"value": "\"center\""
},
{
"name": "literal",
"value": "\"end\""
},
{
"name": "literal",
"value": "\"start\""
}
]
},
"required": false
}
}
www/apps/ui/src/specs/Popover/Popover.Trigger.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Trigger"
"displayName": "Popover.Trigger",
"props": {}
}
www/apps/ui/src/specs/Popover/Popover.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "This component is based on the [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover) primitves.",
"methods": [],
"displayName": "Popover"
"displayName": "Popover",
"props": {}
}
www/apps/ui/src/specs/ProgressAccordion/ProgressAccordion.Header.json
+16 -1
View File
@@ -6,7 +6,22 @@
"status": {
"required": false,
"tsType": {
"name": "ProgressStatus"
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
},
"description": "The current status.",
"defaultValue": {
www/apps/ui/src/specs/ProgressAccordion/ProgressAccordion.ProgressIndicator.json
+16 -1
View File
@@ -6,7 +6,22 @@
"status": {
"required": true,
"tsType": {
"name": "ProgressStatus"
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
},
"description": "The current status."
}
www/apps/ui/src/specs/ProgressAccordion/ProgressAccordion.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.",
"methods": [],
"displayName": "ProgressAccordion"
"displayName": "ProgressAccordion",
"props": {}
}
www/apps/ui/src/specs/ProgressTabs/ProgressTabs.ProgressIndicator.json
+16 -1
View File
@@ -6,7 +6,22 @@
"status": {
"required": false,
"tsType": {
"name": "ProgressStatus"
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
},
"description": "The current status."
}
www/apps/ui/src/specs/ProgressTabs/ProgressTabs.Trigger.json
+16 -1
View File
@@ -6,7 +6,22 @@
"status": {
"required": false,
"tsType": {
"name": "ProgressStatus"
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
},
"description": "",
"defaultValue": {
www/apps/ui/src/specs/ProgressTabs/ProgressTabs.json
+85 -1
View File
@@ -1,5 +1,89 @@
{
"description": "This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.",
"methods": [],
"displayName": "ProgressTabs"
"displayName": "ProgressTabs",
"props": {
"activationMode": {
"description": "Whether a tab is activated automatically or manually.",
"required": false,
"tsType": {
"name": "union",
"raw": "\"manual\" \\| \"automatic\"",
"elements": [
{
"name": "literal",
"value": "\"manual\""
},
{
"name": "literal",
"value": "\"automatic\""
}
]
}
},
"defaultValue": {
"description": "The value of the tab to select by default, if uncontrolled",
"required": false,
"tsType": {
"name": "string"
}
},
"dir": {
"description": "The direction of navigation between toolbar items.",
"required": false,
"tsType": {
"name": "Direction",
"elements": [],
"raw": "Direction"
}
},
"onValueChange": {
"description": "A function called when a new tab is selected",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: string) => void",
"signature": {
"arguments": [
{
"name": "value",
"type": {
"name": "string"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"orientation": {
"description": "The orientation the tabs are layed out.\nMainly so arrow navigation is done accordingly (left & right vs. up & down)",
"required": false,
"tsType": {
"name": "union",
"raw": "\"horizontal\" \\| \"vertical\"",
"elements": [
{
"name": "literal",
"value": "\"horizontal\""
},
{
"name": "literal",
"value": "\"vertical\""
}
]
}
},
"value": {
"description": "The value for the selected tab, if controlled",
"required": false,
"tsType": {
"name": "string"
}
}
}
}
www/apps/ui/src/specs/Prompt/Prompt.Portal.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Portal"
"displayName": "Prompt.Portal",
"props": {}
}
www/apps/ui/src/specs/Prompt/Prompt.Trigger.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Trigger",
"props": {}
}
www/apps/ui/src/specs/Select/Select.Content.json
+35 -4
View File
@@ -1,5 +1,5 @@
{
"description": "",
"description": "The content that appears when the select is open.\nIt's based on [Radix UI Select Content](https://www.radix-ui.com/primitives/docs/components/select#content).",
"methods": [],
"displayName": "Select.Content",
"props": {
@@ -8,7 +8,21 @@
"value": "\"popper\"",
"computed": false
},
"description": "",
"description": "Whether to show the select items below (`popper`) or over (`item-aligned`) the select input.",
"tsType": {
"name": "union",
"raw": "\"item-aligned\" \\| \"popper\"",
"elements": [
{
"name": "literal",
"value": "\"item-aligned\""
},
{
"name": "literal",
"value": "\"popper\""
}
]
},
"required": false
},
"sideOffset": {
@@ -16,7 +30,10 @@
"value": "8",
"computed": false
},
"description": "",
"description": "The distance of the content pop-up in pixels from the select input. Only available when position is set to popper.",
"tsType": {
"name": "number"
},
"required": false
},
"collisionPadding": {
@@ -24,7 +41,21 @@
"value": "24",
"computed": false
},
"description": "",
"description": "The distance in pixels from the boundary edges where collision detection should occur. Only available when position is set to popper.",
"tsType": {
"name": "union",
"raw": "number \\| Partial&#60;Record&#60;\"top\" \\| \"right\" \\| \"bottom\" \\| \"left\", number&#62;&#62;",
"elements": [
{
"name": "number"
},
{
"name": "Partial",
"elements": [],
"raw": "Partial&#60;Record&#60;\"top\" \\| \"right\" \\| \"bottom\" \\| \"left\", number&#62;&#62;"
}
]
},
"required": false
}
}
www/apps/ui/src/specs/Select/Select.Group.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "Groups multiple items together.",
"methods": [],
"displayName": "Select.Group",
"props": {}
}
www/apps/ui/src/specs/Select/Select.Label.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "Used to label a group of items.",
"description": "Used to label a group of items.\nIt's based on [Radix UI Select Label](https://www.radix-ui.com/primitives/docs/components/select#label).",
"methods": [],
"displayName": "Select.Label",
"props": {}
www/apps/ui/src/specs/Select/Select.Trigger.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"description": "The trigger that toggles the select.",
"description": "The trigger that toggles the select.\nIt's based on [Radix UI Select Trigger](https://www.radix-ui.com/primitives/docs/components/select#trigger).",
"methods": [],
"displayName": "Select.Trigger",
"props": {}
www/apps/ui/src/specs/Select/Select.Value.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "Displays the selected value, or a placeholder if no value is selected.\nIt's based on [Radix UI Select Value](https://www.radix-ui.com/primitives/docs/components/select#value).",
"methods": [],
"displayName": "Select.Value",
"props": {}
}
www/apps/ui/src/specs/StatusBadge/StatusBadge.json
+30
View File
@@ -9,6 +9,36 @@
"computed": false
},
"description": "The status's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Switch/Switch.json
+14
View File
@@ -9,6 +9,20 @@
"computed": false
},
"description": "The switch's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/Tabs/Tabs.json
+85 -1
View File
@@ -1,5 +1,89 @@
{
"description": "This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves",
"methods": [],
"displayName": "Tabs"
"displayName": "Tabs",
"props": {
"activationMode": {
"description": "Whether a tab is activated automatically or manually.",
"required": false,
"tsType": {
"name": "union",
"raw": "\"manual\" \\| \"automatic\"",
"elements": [
{
"name": "literal",
"value": "\"manual\""
},
{
"name": "literal",
"value": "\"automatic\""
}
]
}
},
"defaultValue": {
"description": "The value of the tab to select by default, if uncontrolled",
"required": false,
"tsType": {
"name": "string"
}
},
"dir": {
"description": "The direction of navigation between toolbar items.",
"required": false,
"tsType": {
"name": "Direction",
"elements": [],
"raw": "Direction"
}
},
"onValueChange": {
"description": "A function called when a new tab is selected",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: string) => void",
"signature": {
"arguments": [
{
"name": "value",
"type": {
"name": "string"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"orientation": {
"description": "The orientation the tabs are layed out.\nMainly so arrow navigation is done accordingly (left & right vs. up & down)",
"required": false,
"tsType": {
"name": "union",
"raw": "\"horizontal\" \\| \"vertical\"",
"elements": [
{
"name": "literal",
"value": "\"horizontal\""
},
{
"name": "literal",
"value": "\"vertical\""
}
]
}
},
"value": {
"description": "The value for the selected tab, if controlled",
"required": false,
"tsType": {
"name": "string"
}
}
}
}
www/apps/ui/src/specs/Text/Text.json
+68
View File
@@ -46,6 +46,32 @@
"computed": false
},
"description": "The text's size.",
"tsType": {
"name": "union",
"raw": "\"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
},
"weight": {
@@ -54,6 +80,20 @@
"computed": false
},
"description": "The text's font weight.",
"tsType": {
"name": "union",
"raw": "\"regular\" \\| \"plus\"",
"elements": [
{
"name": "literal",
"value": "\"regular\""
},
{
"name": "literal",
"value": "\"plus\""
}
]
},
"required": false
},
"family": {
@@ -62,6 +102,20 @@
"computed": false
},
"description": "The text's font family.",
"tsType": {
"name": "union",
"raw": "\"sans\" \\| \"mono\"",
"elements": [
{
"name": "literal",
"value": "\"sans\""
},
{
"name": "literal",
"value": "\"mono\""
}
]
},
"required": false
},
"leading": {
@@ -70,6 +124,20 @@
"computed": false
},
"description": "The text's line height.",
"tsType": {
"name": "union",
"raw": "\"normal\" \\| \"compact\"",
"elements": [
{
"name": "literal",
"value": "\"normal\""
},
{
"name": "literal",
"value": "\"compact\""
}
]
},
"required": false
}
},
www/apps/ui/src/specs/TimeInput/TimeInput.json
+2 -1
View File
@@ -1,5 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "TimeInput"
"displayName": "TimeInput",
"props": {}
}
www/apps/ui/src/specs/Toast/Toast.json
+58 -1
View File
@@ -30,7 +30,64 @@
"action": {
"required": false,
"tsType": {
"name": "ToastAction"
"name": "signature",
"type": "object",
"raw": "&#123; altText: string ; label: string ; onClick: () => void \\| Promise&#60;void&#62; ; variant?: ToastActionVariant &#125;",
"signature": {
"properties": [
{
"key": "altText",
"value": {
"name": "string"
},
"description": "The button's alt text."
},
{
"key": "label",
"value": {
"name": "string"
},
"description": "The button's text."
},
{
"key": "onClick",
"value": {
"name": "signature",
"type": "function",
"raw": "() => void \\| Promise&#60;void&#62;",
"signature": {
"arguments": [],
"return": {
"name": "void \\| Promise&#60;void&#62;"
}
}
},
"description": "The function to execute when the button is clicked."
},
{
"key": "variant",
"value": {
"name": "ToastActionVariant",
"elements": [
{
"name": "union",
"raw": "\"default\" \\| \"destructive\"",
"elements": [
{
"name": "\"default\""
},
{
"name": "\"destructive\""
}
]
}
],
"raw": "ToastActionVariant"
},
"description": "The button's variant."
}
]
}
},
"description": "The toast's action buttons."
}
www/apps/ui/src/specs/Toaster/Toaster.json
+28 -1
View File
@@ -9,6 +9,11 @@
"computed": false
},
"description": "The position of the created toasts.",
"tsType": {
"name": "Position",
"elements": [],
"raw": "Position"
},
"required": false
},
"gap": {
@@ -17,6 +22,9 @@
"computed": false
},
"description": "The gap between the toast components.",
"tsType": {
"name": "number"
},
"required": false
},
"offset": {
@@ -25,10 +33,29 @@
"computed": false
},
"description": "The space from the edges of the screen.",
"tsType": {
"name": "union",
"raw": "string \\| number",
"elements": [
{
"name": "string"
},
{
"name": "number"
}
]
},
"required": false
},
"duration": {
"description": "The time in milliseconds that a toast is shown before it's\nautomatically dismissed.\n\n@defaultValue 4000"
"description": "The time in milliseconds that a toast is shown before it's\nautomatically dismissed.\n\n",
"tsType": {
"name": "number"
},
"defaultValue": {
"value": "4000",
"computed": false
}
}
},
"composes": [
www/apps/ui/src/specs/Tooltip/Tooltip.json
+71 -54
View File
@@ -3,53 +3,6 @@
"methods": [],
"displayName": "Tooltip",
"props": {
"content": {
"required": true,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": ""
},
"onClick": {
"required": false,
"tsType": {
"name": "ReactMouseEventHandler",
"raw": "React.MouseEventHandler<HTMLButtonElement>",
"elements": [
{
"name": "HTMLButtonElement"
}
]
},
"description": ""
},
"side": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"bottom\" | \"left\" | \"top\" | \"right\"",
"elements": [
{
"name": "literal",
"value": "\"bottom\""
},
{
"name": "literal",
"value": "\"left\""
},
{
"name": "literal",
"value": "\"top\""
},
{
"name": "literal",
"value": "\"right\""
}
]
},
"description": ""
},
"maxWidth": {
"required": false,
"tsType": {
@@ -61,13 +14,77 @@
"computed": false
}
},
"sideOffset": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
"aria-label": {
"description": "A more descriptive label for accessibility purpose",
"required": false,
"tsType": {
"name": "string"
}
},
"delayDuration": {
"description": "The duration from when the pointer enters the trigger until the tooltip gets opened. This will\noverride the prop with the same name passed to Provider.",
"required": false,
"tsType": {
"name": "number"
}
},
"forceMount": {
"description": "Used to force mounting when more control is needed. Useful when\ncontrolling animation with React animation libraries.",
"required": false,
"tsType": {
"name": "literal",
"value": "true"
}
},
"onEscapeKeyDown": {
"description": "Event handler called when the escape key is down.\nCan be prevented.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(event: KeyboardEvent) => void",
"signature": {
"arguments": [
{
"name": "event",
"type": {
"name": "KeyboardEvent",
"elements": [],
"raw": "KeyboardEvent"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onPointerDownOutside": {
"description": "Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.\nCan be prevented.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(event: PointerDownOutsideEvent) => void",
"signature": {
"arguments": [
{
"name": "event",
"type": {
"name": "PointerDownOutsideEvent",
"elements": [],
"raw": "PointerDownOutsideEvent"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
}
},
"composes": [
www/apps/ui/src/specs/TooltipProvider/TooltipProvider.json
+15 -2
View File
@@ -8,7 +8,10 @@
"value": "100",
"computed": false
},
"description": "",
"description": "The duration from when the pointer enters the trigger until the tooltip gets opened.",
"tsType": {
"name": "number"
},
"required": false
},
"skipDelayDuration": {
@@ -16,8 +19,18 @@
"value": "300",
"computed": false
},
"description": "",
"description": "How much time a user has to enter another trigger without incurring a delay again.",
"tsType": {
"name": "number"
},
"required": false
},
"disableHoverableContent": {
"description": "When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.",
"required": false,
"tsType": {
"name": "boolean"
}
}
}
}
www/apps/ui/src/types/props.ts
+6
View File
@@ -20,6 +20,12 @@ export type FunctionType = {
signature: string
}
export type PartialType = {
type: "partial"
elements: unknown[]
raw: string
}
// Keeping this as it's still used by hooks
export type PropType =
| "string"
www/packages/docs-ui/src/components/MainNav/Version/index.tsx
+8 -2
View File
@@ -37,7 +37,11 @@ export const MainNavVersion = () => {
return (
<>
<Link href={version.releaseUrl} target="_blank">
<Link
href={version.releaseUrl}
target="_blank"
className={clsx(version.hide && "hidden")}
>
<Tooltip html="View the release notes<br/>on GitHub">
<span
className="relative text-compact-small-plus"
@@ -56,7 +60,9 @@ export const MainNavVersion = () => {
</span>
</Tooltip>
</Link>
<span className="text-compact-small">&#183;</span>
<span className={clsx("text-compact-small", version.hide && "hidden")}>
&#183;
</span>
</>
)
}
www/packages/types/src/config.ts
+1
View File
@@ -19,6 +19,7 @@ export declare type DocsConfig = {
version: {
number: string
releaseUrl: string
hide?: boolean
}
reportIssueLink?: string
logo: string
www/utils/packages/react-docs-generator/package.json
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "react-docs-generator",
"license": "MIT",
"scripts": {
"dev": "ts-node src/index.ts",
"dev": "node --loader ts-node/esm src/index.ts",
"start": "node dist/index.js",
"generate:ui": "yarn start --src ../../../../packages/design-system/ui/src --output ../../../apps/ui/src/specs --clean",
"build": "tsc",
www/utils/packages/react-docs-generator/src/classes/typedoc-manager.ts
+124 -112
View File
@@ -126,129 +126,141 @@ export default class TypedocManager {
reflection.type.reflection instanceof DeclarationReflection &&
reflection.type.reflection.signatures?.length
// If the original reflection in the reference type has a signature
// use that signature. Else, try to get the signature from the mapping.
const signature = doesReflectionHaveSignature
? (
(reflection.type! as ReferenceType)
.reflection as DeclarationReflection
).signatures![0]
: reflection.sources?.length
let signature: SignatureReflection | undefined
let props: DeclarationReflection[] = []
if (doesReflectionHaveSignature) {
signature = (
(reflection.type! as ReferenceType).reflection as DeclarationReflection
).signatures![0]
props =
signature?.parameters?.length && signature.parameters[0].type
? getTypeChildren({
reflectionType: signature.parameters![0].type!,
project: this.project,
})
: []
}
if (!signature || !props.length) {
signature = reflection.sources?.length
? this.getMappedSignatureFromSource(reflection.sources[0])
?.signatures[0]
: undefined
props =
signature?.parameters?.length && signature.parameters[0].type
? getTypeChildren({
reflectionType: signature.parameters![0].type!,
project: this.project,
})
: []
}
if (signature?.parameters?.length && signature.parameters[0].type) {
// get the props of the component from the
// first parameter in the signature.
const props = getTypeChildren({
reflectionType: signature.parameters![0].type!,
project: this.project,
})
if (!signature || !props.length) {
return spec
}
// this stores props that should be removed from the
// spec
const propsToRemove = new Set<string>()
// this stores props that should be removed from the
// spec
const propsToRemove = new Set<string>()
// loop over props in the spec to either add missing descriptions or
// push a prop into the `propsToRemove` set.
Object.entries(spec.props!).forEach(([propName, propDetails]) => {
// retrieve the reflection of the prop
const reflectionProp = props.find(
(propType) => propType.name === propName
)
if (!reflectionProp) {
// if the reflection doesn't exist and the
// prop doesn't have a description, it should
// be removed.
if (!propDetails.description) {
propsToRemove.add(propName)
}
return
}
// if the component has the `@excludeExternal` tag,
// the prop is external, and it doesn't have the
// `@keep` tag, the prop is removed.
if (
this.shouldExcludeExternal({
parentReflection: reflection,
childReflection: reflectionProp,
propDescription: propDetails.description,
signature,
})
) {
propsToRemove.add(propName)
return
}
// if the prop doesn't have a default value, try to retrieve it
if (!propDetails.defaultValue) {
propDetails.defaultValue = this.getReflectionDefaultValue(
reflectionProp,
propDetails.description
)
}
// if the prop doesn't have description, retrieve it using Typedoc
propDetails.description =
propDetails.description || this.getDescription(reflectionProp)
// if the prop still doesn't have description, remove it.
// loop over props in the spec to either add missing descriptions or
// push a prop into the `propsToRemove` set.
Object.entries(spec.props!).forEach(([propName, propDetails]) => {
// retrieve the reflection of the prop
const reflectionProp = props.find(
(propType) => propType.name === propName
)
if (!reflectionProp) {
// if the reflection doesn't exist and the
// prop doesn't have a description, it should
// be removed.
if (!propDetails.description) {
propsToRemove.add(propName)
} else {
propDetails.description = this.normalizeDescription(
propDetails.description
)
}
return
}
// if the component has the `@excludeExternal` tag,
// the prop is external, and it doesn't have the
// `@keep` tag, the prop is removed.
if (
this.shouldExcludeExternal({
parentReflection: reflection,
childReflection: reflectionProp,
propDescription: propDetails.description,
signature,
})
) {
propsToRemove.add(propName)
return
}
// if the prop doesn't have a default value, try to retrieve it
if (!propDetails.defaultValue) {
propDetails.defaultValue = this.getReflectionDefaultValue(
reflectionProp,
propDetails.description
)
}
// if the prop doesn't have description, retrieve it using Typedoc
propDetails.description =
propDetails.description || this.getDescription(reflectionProp)
// if the prop still doesn't have description, remove it.
if (!propDetails.description) {
propsToRemove.add(propName)
} else {
propDetails.description = this.normalizeDescription(
propDetails.description
)
}
})
// delete props in the `propsToRemove` set from the specs.
propsToRemove.forEach((prop) => delete spec.props![prop])
// try to add missing props
props
.filter(
(prop) =>
// Filter out props that are already in the
// specs, are already in the `propsToRemove` set
// (meaning they've been removed), don't have a
// comment, are React props, and are external props (if
// the component excludes them).
!Object.hasOwn(spec.props!, prop.name) &&
!propsToRemove.has(prop.name) &&
this.getReflectionComment(prop) &&
!this.isFromReact(prop) &&
!this.shouldExcludeExternal({
parentReflection: reflection,
childReflection: prop,
signature,
})
)
.forEach((prop) => {
// If the prop has description (retrieved)
// through Typedoc, it's added into the spec.
const rawDescription = this.getDescription(prop)
const description = this.normalizeDescription(rawDescription)
if (!description) {
return
}
spec.props![prop.name] = {
description,
required: !prop.flags.isOptional,
defaultValue: this.getReflectionDefaultValue(prop, rawDescription),
tsType: prop.type
? this.getTsType(prop.type)
: prop.signatures?.length
? this.getFunctionTsType(prop.signatures[0])
: undefined,
}
if (!spec.props![prop.name].tsType) {
delete spec.props![prop.name].tsType
}
})
// delete props in the `propsToRemove` set from the specs.
propsToRemove.forEach((prop) => delete spec.props![prop])
// try to add missing props
props
.filter(
(prop) =>
// Filter out props that are already in the
// specs, are already in the `propsToRemove` set
// (meaning they've been removed), don't have a
// comment, are React props, and are external props (if
// the component excludes them).
!Object.hasOwn(spec.props!, prop.name) &&
!propsToRemove.has(prop.name) &&
this.getReflectionComment(prop) &&
!this.isFromReact(prop) &&
!this.shouldExcludeExternal({
parentReflection: reflection,
childReflection: prop,
signature,
})
)
.forEach((prop) => {
// If the prop has description (retrieved)
// through Typedoc, it's added into the spec.
const rawDescription = this.getDescription(prop)
const description = this.normalizeDescription(rawDescription)
if (!description) {
return
}
spec.props![prop.name] = {
description,
required: !prop.flags.isOptional,
defaultValue: this.getReflectionDefaultValue(prop, rawDescription),
tsType: prop.type
? this.getTsType(prop.type)
: prop.signatures?.length
? this.getFunctionTsType(prop.signatures[0])
: undefined,
}
if (!spec.props![prop.name].tsType) {
delete spec.props![prop.name].tsType
}
})
}
return spec
}
www/utils/packages/react-docs-generator/src/commands/generate.ts
+4
View File
@@ -100,6 +100,10 @@ export default async function ({
mkdirSync(filePath)
}
if (spec.displayName === "Drawer.Content") {
console.log("here", spec)
}
// write spec to output path
writeFileSync(
path.join(filePath, `${spec.displayName}.json`),
www/utils/packages/react-docs-generator/src/handlers/argsPropHandler.ts
+1 -1
View File
@@ -52,7 +52,7 @@ function resolveDocumentation(
// set type if missing
if (!propDescriptor.tsType && typedocManager) {
const typeAnnotation = utils.getTypeAnnotation(path)
if (typeAnnotation?.isTSTypeReference) {
if (typeAnnotation?.isTSTypeReference()) {
const typeName = typeAnnotation.get("typeName")
if (
!Array.isArray(typeName) &&
www/utils/packages/typedoc-config/ui.json
+4 -1
View File
@@ -7,5 +7,8 @@
"exclude": [
"../../../../packages/design-system/ui/dist",
"../../../../packages/design-system/ui/node_modules"
]
],
"compilerOptions": {
"jsx": "react-jsx"
}
}