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

docs: generate documentation for UI components (#5849)

Browse Source 
* added tool to generate spec files for React components

* use typedoc for missing descriptions and types

* improvements and fixes

* improvements

* added doc comments for half of the components

* add custom resolver + more doc comments

* added all tsdocs

* general improvements

* add specs to UI docs

* added github action

* remove unnecessary api route

* Added readme for react-docs-generator

* remove comment

* Update packages/design-system/ui/src/components/currency-input/currency-input.tsx

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

* remove description of aria fields + add generate script

---------

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>
This commit is contained in:
Shahed Nasser
2023-12-13 16:02:41 +02:00
committed by GitHub
co-authored by Kasper Fabricius Kristensen
parent edc49bfe1d
commit 245e5c9a69
288 changed files with 6029 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/ui/package.json
+1
View File
@@ -45,6 +45,7 @@
},
"devDependencies": {
"eslint": "^8.49.0",
"react-docgen": "^7.0.1",
"ts-node": "^10.9.1"
}
}
www/apps/ui/src/components/component-props.tsx
-48
View File
@@ -1,48 +0,0 @@
import { Spinner } from "@medusajs/icons"
import { Container } from "@medusajs/ui"
import * as React from "react"
import { PropRegistry } from "@/registries/prop-registry"
import { Feedback } from "./feedback"
type ComponentPropsProps = {
component: string
}
const ComponentProps = ({ component }: ComponentPropsProps) => {
const Props = React.useMemo(() => {
const Table = PropRegistry[component]?.table
if (!Table) {
return (
<div className="flex min-h-[200px] w-full items-center justify-center">
<p className="txt-compact-small">
No API reference found for{" "}
<span className="txt-compact-small-plus">{component}</span>
</p>
</div>
)
}
return <Table />
}, [component])
return (
<>
<Container className="mb-6 mt-8 overflow-hidden p-0">
<React.Suspense
fallback={
<div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
<Spinner className="animate-spin" />
</div>
}
>
{Props}
</React.Suspense>
</Container>
<Feedback title={`props of ${component}`} />
</>
)
}
export { ComponentProps }
www/apps/ui/src/components/component-reference.tsx
+81
View File
@@ -0,0 +1,81 @@
import { Documentation } from "react-docgen"
import { Suspense } from "react"
import { Spinner } from "@medusajs/icons"
import { PropTable } from "./props-table"
import { Container, clx } from "@medusajs/ui"
import { Feedback } from "./feedback"
import { MarkdownContent } from "docs-ui"
import { components } from "./mdx-components"
type ComponentReferenceProps = {
mainComponent: string
componentsToShow?: string[]
specsSrc?: string
}
const ComponentReference = ({
mainComponent,
componentsToShow = [mainComponent],
specsSrc,
}: ComponentReferenceProps) => {
if (!specsSrc) {
return <></>
}
const specs = JSON.parse(specsSrc) as Documentation[]
return (
<>
{componentsToShow.map((component, index) => {
const componentSpec = specs?.find(
(spec) => spec.displayName === component
)
const hasProps =
componentSpec?.props && Object.keys(componentSpec.props).length > 0
return (
<Suspense
fallback={
<div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
<Spinner className="animate-spin" />
</div>
}
key={index}
>
{componentSpec && (
<>
{componentsToShow.length > 1 && (
<h3 className={clx("h3-docs mb-2 mt-10 text-medusa-fg-base")}>
{componentSpec.displayName || component}
</h3>
)}
{componentSpec.description && (
<MarkdownContent components={components}>
{componentSpec.description}
</MarkdownContent>
)}
{hasProps && (
<>
<Container className="mb-6 mt-8 overflow-hidden p-0">
<Suspense
fallback={
<div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
<Spinner className="animate-spin" />
</div>
}
>
<PropTable props={componentSpec.props!} />
</Suspense>
</Container>
<Feedback title={`props of ${component}`} />
</>
)}
</>
)}
</Suspense>
)
})}
</>
)
}
export { ComponentReference }
www/apps/ui/src/components/hook-table.tsx
+4 -1
View File
@@ -3,6 +3,7 @@ import { Table, Tooltip } from "@medusajs/ui"
import { HookData, HookDataMap } from "@/types/hooks"
import { EnumType, FunctionType, ObjectType } from "@/types/props"
import { InlineCode } from "docs-ui"
const HookTable = ({ props }: { props: HookDataMap }) => {
return (
@@ -47,7 +48,9 @@ const Row = ({ value, type, description }: HookData) => {
return (
<Table.Row className="code-body">
<Table.Cell>{value}</Table.Cell>
<Table.Cell>
<InlineCode>{value}</InlineCode>
</Table.Cell>
<Table.Cell>
{!isComplexType && type.toString()}
{isEnum(type) && (
www/apps/ui/src/components/mdx-components.tsx
+3 -3
View File
@@ -6,12 +6,12 @@ import * as React from "react"
import { Colors } from "@/components/colors"
import { ComponentExample } from "@/components/component-example"
import { ComponentProps } from "@/components/component-props"
import { HookValues } from "@/components/hook-values"
import { IconSearch } from "@/components/icon-search"
import { PackageInstall } from "@/components/package-install"
import { Feedback } from "@/components/feedback"
import { FigmaIcon } from "@/components/figma-icon"
import { ComponentReference } from "@/components/component-reference"
import clsx from "clsx"
import { NextLink, Card, BorderedIcon, CodeMdx, CodeBlock } from "docs-ui"
@@ -120,7 +120,6 @@ const components = {
return <hr className={clx("mb-4", className)} {...props} />
},
HookValues,
ComponentProps,
CodeBlock,
ComponentExample,
PackageInstall,
@@ -130,6 +129,7 @@ const components = {
Card,
BorderedIcon,
FigmaIcon,
ComponentReference,
}
const Mdx = ({ code }: MdxProps) => {
@@ -142,4 +142,4 @@ const Mdx = ({ code }: MdxProps) => {
)
}
export { Mdx }
export { Mdx, components }
www/apps/ui/src/components/props-table.tsx
+136 -79
View File
@@ -3,13 +3,9 @@
import { InformationCircleSolid } from "@medusajs/icons"
import { Table, Tooltip } from "@medusajs/ui"
import {
EnumType,
FunctionType,
ObjectType,
PropData,
PropDataMap,
} from "@/types/props"
import { PropData, PropDataMap, PropSpecType } from "@/types/props"
import { useCallback, useMemo } from "react"
import { InlineCode, MarkdownContent } from "docs-ui"
type PropTableProps = {
props: PropDataMap
@@ -26,101 +22,162 @@ const PropTable = ({ props }: PropTableProps) => {
</Table.Row>
</Table.Header>
<Table.Body className="border-b-0 [&_tr:last-child]:border-b-0">
{/* eslint-disable-next-line react/prop-types */}
{props.map((propData, index) => (
<Row key={index} {...propData} />
{Object.entries(props).map(([propName, propData]) => (
<Row key={propName} propName={propName} propData={propData} />
))}
</Table.Body>
</Table>
)
}
const Row = ({ prop, type, defaultValue }: PropData) => {
const isEnum = (t: unknown): t is EnumType => {
return (t as EnumType).type !== undefined && (t as EnumType).type === "enum"
}
type RowProps = {
propName: string
propData: PropData
}
const isObject = (t: unknown): t is ObjectType => {
return (
(t as ObjectType).type !== undefined &&
(t as ObjectType).type === "object"
)
}
type TypeNode = {
text: string
tooltipContent?: string
canBeCopied?: boolean
}
const isFunction = (t: unknown): t is FunctionType => {
return (
(t as FunctionType).type !== undefined &&
(t as FunctionType).type === "function"
)
const Row = ({
propName,
propData: { tsType: tsType, defaultValue, description },
}: RowProps) => {
const normalizeRaw = (str: string): string => {
return str.replace("\\|", "|")
}
const defaultValueRenderer = (
v: string | number | boolean | null | undefined
) => {
if (v === undefined) {
return "-"
const getTypeRaw = useCallback((type: PropSpecType): string => {
let raw = "raw" in type ? type.raw || type.name : type.name
if ("type" in type) {
if (type.type === "object") {
raw = `{\n ${type.signature.properties
.map((property) => `${property.key}: ${property.value.name}`)
.join("\n ")}\n}`
} else {
raw = type.raw
}
} else if (type.name === "Array" && "elements" in type) {
raw = type.elements.map((element) => getTypeRaw(element)).join(" | ")
}
if (typeof v === "boolean") {
return v ? "true" : "false"
return normalizeRaw(raw)
}, [])
const getTypeText = useCallback((type: PropSpecType): string => {
if (type?.name === "signature" && "type" in type) {
return type.type
} else if (type?.name === "Array" && type.raw) {
return normalizeRaw(type.raw) || "array"
}
if (v === null) {
return "null"
return type.name || ""
}, [])
const getTypeTooltipContent = useCallback(
(type: PropSpecType): string | undefined => {
if (type?.name === "signature" && "type" in type) {
return getTypeRaw(type)
} else if (type?.name === "Array" && type.raw) {
return getTypeRaw(type)
}
return undefined
},
[getTypeRaw]
)
const typeNodes = useMemo((): TypeNode[] => {
const typeNodes: TypeNode[] = []
if (tsType?.name === "union" && "elements" in tsType) {
tsType.elements.forEach((element) => {
if (
("elements" in element && element.elements.length) ||
"signature" in element
) {
const elementTypeText = getTypeText(element)
const elementTooltipContent = getTypeTooltipContent(element)
typeNodes.push({
text: elementTypeText,
tooltipContent:
elementTypeText !== elementTooltipContent
? elementTooltipContent
: undefined,
})
} else if ("value" in element) {
typeNodes.push({
text: element.value,
canBeCopied: true,
})
} else {
typeNodes.push({
text: element.name,
})
}
})
} else if (tsType) {
typeNodes.push({
text: getTypeText(tsType),
tooltipContent: getTypeTooltipContent(tsType),
})
}
if (typeof v === "string") {
return `"${v}"`
}
return typeNodes
}, [tsType, getTypeText, getTypeTooltipContent])
return v
}
const isComplexType = isEnum(type) || isObject(type) || isFunction(type)
const defaultVal: string | undefined = defaultValue?.value as string
return (
<Table.Row className="code-body">
<Table.Cell>{prop}</Table.Cell>
<Table.Row>
<Table.Cell>
{!isComplexType && type.toString()}
{isEnum(type) && (
<Tooltip
content={type.values.map((v) => `"${v}"`).join(" | ")}
className="font-mono"
>
<div className="flex items-center gap-x-1">
<span>enum</span>
<div className="flex items-center gap-x-1">
<InlineCode>{propName}</InlineCode>
{description && (
<Tooltip
content={
<MarkdownContent
allowedElements={["a", "code"]}
unwrapDisallowed={true}
>
{description}
</MarkdownContent>
}
>
<InformationCircleSolid className="text-medusa-fg-subtle" />
</Tooltip>
)}
</div>
</Table.Cell>
<Table.Cell>
<div className="flex items-center flex-wrap gap-1 py-1">
{typeNodes.map((typeNode, index) => (
<div key={index} className="flex items-center gap-x-1">
{index > 0 && <span>|</span>}
{typeNode.tooltipContent && (
<Tooltip
content={<pre>{typeNode.tooltipContent}</pre>}
className="font-mono !max-w-none"
>
<div className="flex items-center gap-x-1">
<code>{typeNode.text}</code>
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
{!typeNode.tooltipContent && (
<>
{typeNode.canBeCopied && (
<InlineCode>{typeNode.text}</InlineCode>
)}
{!typeNode.canBeCopied && <code>{typeNode.text}</code>}
</>
)}
</div>
</Tooltip>
)}
{isObject(type) && (
<Tooltip
content={<pre>{type.shape}</pre>}
className="font-mono"
maxWidth={500}
>
<div className="flex items-center gap-x-1">
<span>{type.name}</span>
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
{isFunction(type) && (
<Tooltip
content={<pre>{type.signature}</pre>}
className="font-mono"
maxWidth={500}
>
<div className="flex items-center gap-x-1">
<span>function</span>
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
))}
</div>
</Table.Cell>
<Table.Cell className="text-right">
{defaultValueRenderer(defaultValue)}
{defaultVal && <InlineCode>{defaultVal}</InlineCode>}
{!defaultVal && " - "}
</Table.Cell>
</Table.Row>
)
www/apps/ui/src/components/scroll-area.tsx
-60
View File
@@ -1,60 +0,0 @@
"use client"
import { clx } from "@medusajs/ui"
import * as Primitives from "@radix-ui/react-scroll-area"
import clsx from "clsx"
import { Key } from "@/types/props"
type ScrollbarProps = React.ComponentProps<typeof Primitives.Scrollbar>
const Scrollbar = ({ key, ...props }: ScrollbarProps) => {
return (
<Primitives.Scrollbar
className={clsx(
"bg-medusa-bg-baseflex touch-none select-none p-0.5 transition-colors ease-out",
"data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col"
)}
key={key as Key}
{...props}
/>
)
}
type ThumbProps = React.ComponentProps<typeof Primitives.Thumb>
const Thumb = ({ className, key, ...props }: ThumbProps) => {
return (
<Primitives.Thumb
className={clx(
"bg-medusa-bg-component relative flex-1 rounded-[10px] before:absolute before:left-1/2 before:top-1/2 before:h-full",
"before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
className
)}
key={key as Key}
{...props}
/>
)
}
type ScrollAreaProps = React.ComponentProps<typeof Primitives.Root>
const ScrollArea = ({ children, className }: ScrollAreaProps) => {
return (
<Primitives.Root
className={clx("h-full w-full overflow-hidden", className)}
>
<Primitives.Viewport className="h-full w-full">
{children}
</Primitives.Viewport>
<Scrollbar orientation="vertical">
<Thumb />
</Scrollbar>
<Scrollbar orientation="horizontal">
<Thumb />
</Scrollbar>
<Primitives.Corner />
</Primitives.Root>
)
}
export { ScrollArea }
www/apps/ui/src/content/docs/components/avatar.mdx
+1 -3
View File
@@ -25,6 +25,4 @@ import { Avatar } from "@medusajs/ui"
---
This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.
<ComponentProps component="avatar" />
<ComponentReference mainComponent="Avatar" />
www/apps/ui/src/content/docs/components/badge.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { Badge } from "@medusajs/ui"
---
This component is based on the `div` element and supports all props of this element.
<ComponentProps component="badge" />
<ComponentReference mainComponent="Badge" />
## Examples
www/apps/ui/src/content/docs/components/button.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { Button } from "@medusajs/ui"
---
This component is based on the `button` element and supports all props of this element.
<ComponentProps component="button" />
<ComponentReference mainComponent="Button" />
## Examples
www/apps/ui/src/content/docs/components/calendar.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { Calendar } from "@medusajs/ui"
---
This component is based on the [react-date-picker](https://www.npmjs.com/package/react-date-picker) package.
<ComponentProps component="calendar" />
<ComponentReference mainComponent="Calendar" />
## Examples
www/apps/ui/src/content/docs/components/checkbox.mdx
+1 -1
View File
@@ -22,7 +22,7 @@ import { Checkbox } from "@medusajs/ui"
---
This component is based on the [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) primitive.
<ComponentReference mainComponent="Checkbox" />
## Examples
www/apps/ui/src/content/docs/components/code-block.mdx
+6 -19
View File
@@ -34,25 +34,12 @@ import { CodeBlock } from "@medusajs/ui"
---
### 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.
<ComponentReference mainComponent="CodeBlock" componentsToShow={[
"CodeBlock",
"CodeBlock.Header",
"CodeBlock.Header.Meta",
"CodeBlock.Body"
]} />
## Examples
www/apps/ui/src/content/docs/components/command-bar.mdx
+7 -23
View File
@@ -38,26 +38,10 @@ import { CommandBar } from "@medusajs/ui"
---
### CommandBar
The root component of the command bar. This component manages the state of the command bar.
<ComponentProps component="command-bar" />
### CommandBar.Bar
The bar component of the command bar. This component is used to display the commands.
### CommandBar.Value
The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on.
### CommandBar.Seperator
The seperator component of the command bar. This component is used to display a seperator between commands.
### CommandBar.Command
The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.
<ComponentProps component="command-bar-command" />
<ComponentReference mainComponent="CommandBar" componentsToShow={[
"CommandBar",
"CommandBar.Bar",
"CommandBar.Value",
"CommandBar.Seperator",
"CommandBar.Command"
]} />
www/apps/ui/src/content/docs/components/command.mdx
+1 -1
View File
@@ -24,4 +24,4 @@ import { Command } from "@medusajs/ui"
---
This component is based on the `div` element and supports all props of this element.
<ComponentReference mainComponent="Command" />
www/apps/ui/src/content/docs/components/container.mdx
+1 -1
View File
@@ -22,7 +22,7 @@ import { Container } from "@medusajs/ui"
---
This component is based on the `div` element and supports all props of this element.
<ComponentReference mainComponent="Container" />
## Examples
www/apps/ui/src/content/docs/components/copy.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { Copy } from "@medusajs/ui"
---
This component is based on the `button` element and supports all props of this element.
<ComponentProps component="copy" />
<ComponentReference mainComponent="Copy" />
## Examples
www/apps/ui/src/content/docs/components/currency-input.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { CurrencyInput } from "@medusajs/ui"
---
This component is based on the `input` element and supports all props of this element.
<ComponentProps component="currency-input" />
<ComponentReference mainComponent="CurrencyInput" />
## Examples
www/apps/ui/src/content/docs/components/date-picker.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { DatePicker } from "@medusajs/ui"
---
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" />
<ComponentReference mainComponent="DatePicker" />
## Examples
www/apps/ui/src/content/docs/components/drawer.mdx
+1 -1
View File
@@ -31,4 +31,4 @@ import { Drawer } from "@medusajs/ui"
---
This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
<ComponentReference mainComponent="Drawer" />
www/apps/ui/src/content/docs/components/dropdown-menu.mdx
+5 -9
View File
@@ -29,15 +29,11 @@ import { DropdownMenu } from "@medusajs/ui"
---
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.
<ComponentReference mainComponent="DropdownMenu" componentsToShow={[
"DropdownMenu",
"DropdownMenu.Shortcut",
"DropdownMenu.Hint",
]} />
## Examples
www/apps/ui/src/content/docs/components/focus-modal.mdx
+5 -11
View File
@@ -28,17 +28,11 @@ import { FocusModal } from "@medusajs/ui"
---
This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
<ComponentProps component="focus-modal" />
### 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.
<ComponentReference mainComponent="FocusModal" componentsToShow={[
"FocusModal",
"FocusModal.Header",
"FocusModal.Body",
]} />
## Example: Control Open State
www/apps/ui/src/content/docs/components/heading.mdx
+1 -3
View File
@@ -22,6 +22,4 @@ import { Heading } from "@medusajs/ui"
---
This component is based on the `heading` element and supports all props of this element.
<ComponentProps component="heading" />
<ComponentReference mainComponent="Heading" />
www/apps/ui/src/content/docs/components/icon-badge.mdx
+1 -3
View File
@@ -25,9 +25,7 @@ import { BuildingTax } from "@medusajs/icons"
---
This component is based on the `span` element and supports all props of this element.
<ComponentProps component="icon-badge" />
<ComponentReference mainComponent="IconBadge" />
## Examples
www/apps/ui/src/content/docs/components/icon-button.mdx
+1 -3
View File
@@ -25,9 +25,7 @@ import { Plus } from "@medusajs/icons"
---
This component is based on the `button` element and supports all props of this element.
<ComponentProps component="icon-button" />
<ComponentReference mainComponent="IconButton" />
## Examples
www/apps/ui/src/content/docs/components/input.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { Input } from "@medusajs/ui"
---
This component is based on the `input` element and supports all props of this element.
<ComponentProps component="input" />
<ComponentReference mainComponent="Input" />
## Examples
www/apps/ui/src/content/docs/components/kbd.mdx
+1 -1
View File
@@ -23,4 +23,4 @@ import { Kbd } from "@medusajs/ui"
---
This component is based on the `kbd` element and supports all props of this element.
<ComponentReference mainComponent="Kbd" />
www/apps/ui/src/content/docs/components/label.mdx
+1 -3
View File
@@ -23,9 +23,7 @@ import { Label } from "@medusajs/ui"
---
This component is based on the [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) primitive.
<ComponentProps component="label" />
<ComponentReference mainComponent="Label" />
## Examples
www/apps/ui/src/content/docs/components/progress-accordion.mdx
+4 -7
View File
@@ -39,13 +39,10 @@ import { ProgressAccordion } from "@medusajs/ui"
---
This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.
### ProgressAccordion.Header
---
<ComponentProps component="progress-accordion-header" />
<ComponentReference mainComponent="ProgressAccordion" componentsToShow={[
"ProgressAccordion",
"ProgressAccordion.Header"
]} />
## Examples
www/apps/ui/src/content/docs/components/progress-tabs.mdx
+4 -5
View File
@@ -43,8 +43,7 @@ import { ProgressTabs } from "@medusajs/ui"
---
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.
### ProgressAccordion.Header
<ComponentProps component="progress-tabs-trigger" />
<ComponentReference mainComponent="ProgressTabs" componentsToShow={[
"ProgressTabs",
"ProgressTabs.ProgressIndicator"
]} />
www/apps/ui/src/content/docs/components/prompt.mdx
+5 -9
View File
@@ -34,12 +34,8 @@ import { Prompt } from "@medusajs/ui"
---
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.
<ComponentReference mainComponent="Prompt" componentsToShow={[
"Prompt",
"Prompt.Header",
"Prompt.Footer"
]} />
www/apps/ui/src/content/docs/components/radio-group.mdx
+1 -1
View File
@@ -26,7 +26,7 @@ import { RadioGroup } from "@medusajs/ui"
---
This component is based on the [Radix UI Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group) primitives.
<ComponentReference mainComponent="RadioGroup" />
## Examples
www/apps/ui/src/content/docs/components/select.mdx
+8 -31
View File
@@ -33,37 +33,14 @@ import { Select } from "@medusajs/ui"
---
This component is based on [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/select).
### 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" />
<ComponentReference mainComponent="Select" componentsToShow={[
"Select",
"Select.Trigger",
"Select.Value",
"Select.Group",
"Select.Label",
"Select.Item"
]} />
## Examples
www/apps/ui/src/content/docs/components/status-badge.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { StatusBadge } from "@medusajs/ui"
---
This component is based on the `span` element and supports all props of this element.
<ComponentProps component="status-badge" />
<ComponentReference mainComponent="StatusBadge" />
## Examples
www/apps/ui/src/content/docs/components/switch.mdx
+1 -3
View File
@@ -22,9 +22,7 @@ import { Switch } from "@medusajs/ui"
---
This component is based on the [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch) primitive.
<ComponentProps component="switch" />
<ComponentReference mainComponent="Switch" />
## Examples
www/apps/ui/src/content/docs/components/table.mdx
+4 -14
View File
@@ -36,17 +36,7 @@ import { Table } from "@medusajs/ui"
---
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" />
<ComponentReference mainComponent="Table" componentsToShow={[
"Table",
"Table.Pagination"
]} />
www/apps/ui/src/content/docs/components/tabs.mdx
+1 -1
View File
@@ -31,4 +31,4 @@ import { Tabs } from "@medusajs/ui"
---
This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves
<ComponentReference mainComponent="Tabs" />
www/apps/ui/src/content/docs/components/text.mdx
+1 -3
View File
@@ -23,9 +23,7 @@ import { Text } from "@medusajs/ui"
---
This component is based on the `p` element and supports all props of this element.
<ComponentProps component="text" />
<ComponentReference mainComponent="Text" />
## Examples
www/apps/ui/src/content/docs/components/textarea.mdx
+1 -1
View File
@@ -22,4 +22,4 @@ import { Textarea } from "@medusajs/ui"
---
This component is based on the `textarea` element and supports all props of this element.
<ComponentReference mainComponent="Textarea" />
www/apps/ui/src/content/docs/components/toast.mdx
+1 -1
View File
@@ -46,7 +46,7 @@ return (
## API Reference
This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.
<ComponentReference mainComponent="Toast" />
## Examples
www/apps/ui/src/content/docs/components/tooltip.mdx
+1 -3
View File
@@ -22,6 +22,4 @@ import { Tooltip } from "@medusajs/ui"
---
This component is based on the [Radix UI Tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip) primitive.
<ComponentProps component="tooltip" />
<ComponentReference mainComponent="Tooltip" />
www/apps/ui/src/content/docs/hooks/use-prompt.mdx
+2 -2
View File
@@ -36,9 +36,9 @@ const actionFunction = async () => {
<HookValues hook="usePrompt" />
### PromptProps
### UsePromptProps
<HookValues hook="PromptProps" />
<ComponentReference mainComponent="RenderPrompt" />
## Examples
www/apps/ui/src/lib/rehype-component.ts
+28
View File
@@ -5,6 +5,7 @@ import { visit } from "unist-util-visit"
import { ExampleRegistry } from "../registries/example-registry"
import { UnistNode, UnistTree } from "../types/unist"
import { Documentation } from "react-docgen"
export function rehypeComponent() {
return async (tree: UnistTree) => {
@@ -42,6 +43,33 @@ export function rehypeComponent() {
} catch (error) {
console.error(error)
}
} else if (node.name === "ComponentReference") {
const mainComponent = getNodeAttributeByName(node, "mainComponent")
?.value as string
if (!mainComponent) {
return null
}
const mainSpecsDir = path.join(process.cwd(), "src/specs")
const componentSpecsDir = path.join(mainSpecsDir, mainComponent)
const specs: Documentation[] = []
const specFiles = fs.readdirSync(componentSpecsDir)
specFiles.map((specFileName) => {
// read spec file
const specFile = fs.readFileSync(
path.join(componentSpecsDir, specFileName),
"utf-8"
)
specs.push(JSON.parse(specFile) as Documentation)
})
node.attributes?.push({
name: "specsSrc",
value: JSON.stringify(specs),
type: "mdxJsxAttribute",
})
}
})
}
www/apps/ui/src/props/avatar.tsx
-35
View File
@@ -1,35 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const avatarProps: PropDataMap = [
{
prop: "variant",
type: {
type: "enum",
values: ["squared", "rounded"],
},
defaultValue: "rounded",
},
{
prop: "size",
type: {
type: "enum",
values: ["base", "large"],
},
defaultValue: "base",
},
{
prop: "src",
type: "string",
},
{
prop: "fallback",
type: "string",
},
]
const Props = () => {
return <PropTable props={avatarProps} />
}
export default Props
www/apps/ui/src/props/badge.tsx
-35
View File
@@ -1,35 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const iconBadgeProps: PropDataMap = [
{
prop: "color",
type: {
type: "enum",
values: ["green", "red", "blue", "orange", "grey", "purple"],
},
defaultValue: "grey",
},
{
prop: "size",
type: {
type: "enum",
values: ["small", "base", "large"],
},
defaultValue: "base",
},
{
prop: "rounded",
type: {
type: "enum",
values: ["base", "rounded"],
},
defaultValue: "base",
},
]
const Props = () => {
return <PropTable props={iconBadgeProps} />
}
export default Props
www/apps/ui/src/props/button.tsx
-32
View File
@@ -1,32 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const buttonProps: PropDataMap = [
{
prop: "variant",
type: {
type: "enum",
values: ["primary", "secondary", "transparent", "danger"],
},
defaultValue: "primary",
},
{
prop: "size",
type: {
type: "enum",
values: ["base", "large", "xlarge"],
},
defaultValue: "base",
},
{
prop: "isLoading",
type: "boolean",
defaultValue: false,
},
]
const Props = () => {
return <PropTable props={buttonProps} />
}
export default Props
www/apps/ui/src/props/calendar.tsx
-29
View File
@@ -1,29 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const calendarProps: PropDataMap = [
{
prop: "mode",
type: {
type: "enum",
values: ["single", "range"],
},
defaultValue: "single",
},
{
prop: "showOutsideDays",
type: "boolean",
defaultValue: true,
},
{
prop: "numberOfMonths",
type: "number",
defaultValue: 1,
},
]
const Props = () => {
return <PropTable props={calendarProps} />
}
export default Props
www/apps/ui/src/props/code-block-header.tsx
-16
View File
@@ -1,16 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const codeBlockHeaderProps: PropDataMap = [
{
prop: "hideLabels",
type: "boolean",
defaultValue: false,
},
]
const Props = () => {
return <PropTable props={codeBlockHeaderProps} />
}
export default Props
www/apps/ui/src/props/code-block.tsx
-20
View File
@@ -1,20 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const codeBlockProps: PropDataMap = [
{
prop: "snippets",
type: {
type: "object",
name: "CodeSnippet[]",
shape:
"{\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}[]",
},
},
]
const Props = () => {
return <PropTable props={codeBlockProps} />
}
export default Props
www/apps/ui/src/props/command-bar-command.tsx
-23
View File
@@ -1,23 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const commandBarCommandProps: PropDataMap = [
{
prop: "action",
type: "function",
},
{
prop: "label",
type: "string",
},
{
prop: "shortcut",
type: "string",
},
]
const Props = () => {
return <PropTable props={commandBarCommandProps} />
}
export default Props
www/apps/ui/src/props/command-bar.tsx
-16
View File
@@ -1,16 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const commandBarProps: PropDataMap = [
{
prop: "open",
type: "boolean",
defaultValue: false,
},
]
const Props = () => {
return <PropTable props={commandBarProps} />
}
export default Props
www/apps/ui/src/props/copy.tsx
-20
View File
@@ -1,20 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const copyProps: PropDataMap = [
{
prop: "content",
type: "string",
},
{
prop: "asChild",
type: "boolean",
defaultValue: false,
},
]
const Props = () => {
return <PropTable props={copyProps} />
}
export default Props
www/apps/ui/src/props/currency-input.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const currencyInputProps: PropDataMap = [
{
prop: "symbol",
type: "string",
},
{
prop: "code",
type: "string",
},
]
const Props = () => {
return <PropTable props={currencyInputProps} />
}
export default Props
www/apps/ui/src/props/date-picker.tsx
-29
View File
@@ -1,29 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const datePickerProps: PropDataMap = [
{
prop: "mode",
type: {
type: "enum",
values: ["single", "range"],
},
defaultValue: "single",
},
{
prop: "presets",
type: "DatePreset | DatePreset[]",
defaultValue: undefined,
},
{
prop: "showTimePicker",
type: "boolean",
defaultValue: false,
},
]
const Props = () => {
return <PropTable props={datePickerProps} />
}
export default Props
www/apps/ui/src/props/focus-modal.tsx
-26
View File
@@ -1,26 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const focusModalProps: PropDataMap = [
{
prop: "defaultOpen",
type: "boolean",
},
{
prop: "open",
type: "boolean",
},
{
prop: "onOpenChange",
type: {
type: "function",
signature: `(open: boolean) => void`,
},
},
]
const Props = () => {
return <PropTable props={focusModalProps} />
}
export default Props
www/apps/ui/src/props/heading.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const headingProps: PropDataMap = [
{
prop: "level",
type: {
type: "enum",
values: ["h1", "h2", "h3"],
},
defaultValue: "h1",
},
]
const Props = () => {
return <PropTable props={headingProps} />
}
export default Props
www/apps/ui/src/props/hint.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const hintProps: PropDataMap = [
{
prop: "variant",
type: {
type: "enum",
values: ["info", "error"],
},
defaultValue: "info",
},
]
const Props = () => {
return <PropTable props={hintProps} />
}
export default Props
www/apps/ui/src/props/hooks/PromptProps.tsx
-34
View File
@@ -1,34 +0,0 @@
import { HookTable } from "@/components/hook-table"
import { HookDataMap } from "@/types/hooks"
const PromptPropsValues: HookDataMap = [
{
value: "title",
type: "string",
},
{
value: "description",
type: "string",
},
{
value: "verificationText",
type: "string",
description: "Text the user has to input in order to confirm the action",
},
{
value: "cancelText",
type: "string",
description: `Label for the Cancel button. Defaults to "Cancel".`,
},
{
value: "confirmText",
type: "string",
description: `Label for the Confirm button. Defaults to "Confirm".`,
},
]
const Props = () => {
return <HookTable props={PromptPropsValues} />
}
export default Props
www/apps/ui/src/props/icon-badge.tsx
-27
View File
@@ -1,27 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const badgeProps: PropDataMap = [
{
prop: "color",
type: {
type: "enum",
values: ["green", "red", "blue", "orange", "grey", "purple"],
},
defaultValue: "grey",
},
{
prop: "size",
type: {
type: "enum",
values: ["base", "large"],
},
defaultValue: "base",
},
]
const Props = () => {
return <PropTable props={badgeProps} />
}
export default Props
www/apps/ui/src/props/icon-button.tsx
-32
View File
@@ -1,32 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const iconButtonProps: PropDataMap = [
{
prop: "variant",
type: {
type: "enum",
values: ["primary", "transparent"],
},
defaultValue: "primary",
},
{
prop: "size",
type: {
type: "enum",
values: ["base", "large", "xlarge"],
},
defaultValue: "base",
},
{
prop: "isLoading",
type: "boolean",
defaultValue: false,
},
]
const Props = () => {
return <PropTable props={iconButtonProps} />
}
export default Props
www/apps/ui/src/props/input.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const inputProps: PropDataMap = [
{
prop: "size",
type: {
type: "enum",
values: ["base", "small"],
},
defaultValue: "base",
},
]
const Props = () => {
return <PropTable props={inputProps} />
}
export default Props
www/apps/ui/src/props/label.tsx
-27
View File
@@ -1,27 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const labelProps: PropDataMap = [
{
prop: "size",
type: {
type: "enum",
values: ["xsmall", "small", "base", "large"],
},
defaultValue: "base",
},
{
prop: "weight",
type: {
type: "enum",
values: ["regular", "plus"],
},
defaultValue: "regular",
},
]
const Props = () => {
return <PropTable props={labelProps} />
}
export default Props
www/apps/ui/src/props/progress-accordion-header.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const progressAccordionHeaderProps: PropDataMap = [
{
prop: "status",
type: {
type: "enum",
values: ["not-started", "in-progress", "completed"],
},
defaultValue: "not-started",
},
]
const Props = () => {
return <PropTable props={progressAccordionHeaderProps} />
}
export default Props
www/apps/ui/src/props/progress-tabs-trigger.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const progressTabsTriggerProps: PropDataMap = [
{
prop: "status",
type: {
type: "enum",
values: ["not-started", "in-progress", "completed"],
},
defaultValue: "not-started",
},
]
const Props = () => {
return <PropTable props={progressTabsTriggerProps} />
}
export default Props
www/apps/ui/src/props/select-item.tsx
-16
View File
@@ -1,16 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const selectItemProps: PropDataMap = [
{
prop: "value",
type: "string",
defaultValue: undefined,
},
]
const Props = () => {
return <PropTable props={selectItemProps} />
}
export default Props
www/apps/ui/src/props/select-value.tsx
-16
View File
@@ -1,16 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const selectValueProps: PropDataMap = [
{
prop: "placeholder",
type: "string",
defaultValue: undefined,
},
]
const Props = () => {
return <PropTable props={selectValueProps} />
}
export default Props
www/apps/ui/src/props/select.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const selectProps: PropDataMap = [
{
prop: "size",
type: {
type: "enum",
values: ["base", "small"],
},
defaultValue: "base",
},
]
const Props = () => {
return <PropTable props={selectProps} />
}
export default Props
www/apps/ui/src/props/status-badge.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const statusBadgeProps: PropDataMap = [
{
prop: "color",
type: {
type: "enum",
values: ["green", "red", "blue", "orange", "grey", "purple"],
},
defaultValue: "grey",
},
]
const Props = () => {
return <PropTable props={statusBadgeProps} />
}
export default Props
www/apps/ui/src/props/switch.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const switchProps: PropDataMap = [
{
prop: "size",
type: {
type: "enum",
values: ["small", "base"],
},
defaultValue: "base",
},
]
const Props = () => {
return <PropTable props={switchProps} />
}
export default Props
www/apps/ui/src/props/table-pagination.tsx
-49
View File
@@ -1,49 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const tablePaginationProps: PropDataMap = [
{
prop: "count",
type: "number",
},
{
prop: "pageSize",
type: "number",
},
{
prop: "pageIndex",
type: "number",
},
{
prop: "pageCount",
type: "number",
},
{
prop: "canPreviousPage",
type: "boolean",
},
{
prop: "canNextPage",
type: "boolean",
},
{
prop: "previousPage",
type: {
type: "function",
signature: "() => void",
},
},
{
prop: "nextPage",
type: {
type: "function",
signature: "() => void",
},
},
]
const Props = () => {
return <PropTable props={tablePaginationProps} />
}
export default Props
www/apps/ui/src/props/text.tsx
-48
View File
@@ -1,48 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const textProps: PropDataMap = [
{
prop: "as",
type: {
type: "enum",
values: ["p", "span", "div"],
},
defaultValue: "p",
},
{
prop: "asChild",
type: "boolean",
defaultValue: false,
},
{
prop: "size",
type: {
type: "enum",
values: ["xsmall", "small", "base", "large", "large", "xlarge"],
},
defaultValue: "base",
},
{
prop: "weight",
type: {
type: "enum",
values: ["regular", "plus"],
},
defaultValue: "regular",
},
{
prop: "family",
type: {
type: "enum",
values: ["sans", "mono"],
},
defaultValue: "sans",
},
]
const Props = () => {
return <PropTable props={textProps} />
}
export default Props
www/apps/ui/src/props/time-input.tsx
-19
View File
@@ -1,19 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const timeInputProps: PropDataMap = [
{
prop: "hourCycle",
type: {
type: "enum",
values: [12, 24],
},
defaultValue: undefined,
},
]
const Props = () => {
return <PropTable props={timeInputProps} />
}
export default Props
www/apps/ui/src/props/tooltip.tsx
-16
View File
@@ -1,16 +0,0 @@
import { PropTable } from "@/components/props-table"
import { PropDataMap } from "@/types/props"
const tooltipProps: PropDataMap = [
{
prop: "maxWidth",
type: "number",
defaultValue: 220,
},
]
const Props = () => {
return <PropTable props={tooltipProps} />
}
export default Props
www/apps/ui/src/registries/hook-registry.tsx
-3
View File
@@ -11,9 +11,6 @@ export const HookRegistry: Record<string, HookRegistryItem> = {
usePrompt: {
table: React.lazy(async () => import("../props/hooks/usePrompt")),
},
PromptProps: {
table: React.lazy(async () => import("../props/hooks/PromptProps")),
},
useToggleState: {
table: React.lazy(async () => import("../props/hooks/useToggleState")),
},
www/apps/ui/src/registries/prop-registry.tsx
-92
View File
@@ -1,92 +0,0 @@
import * as React from "react"
import { PropRegistryItem } from "../types/props"
export const PropRegistry: Record<string, PropRegistryItem> = {
avatar: {
table: React.lazy(async () => import("../props/avatar")),
},
badge: {
table: React.lazy(async () => import("../props/badge")),
},
button: {
table: React.lazy(async () => import("../props/button")),
},
calendar: {
table: React.lazy(async () => import("../props/calendar")),
},
"code-block": {
table: React.lazy(async () => import("../props/code-block")),
},
"code-block-header": {
table: React.lazy(async () => import("../props/code-block-header")),
},
"currency-input": {
table: React.lazy(async () => import("../props/currency-input")),
},
copy: {
table: React.lazy(async () => import("../props/copy")),
},
"command-bar": {
table: React.lazy(async () => import("../props/command-bar")),
},
"command-bar-command": {
table: React.lazy(async () => import("../props/command-bar-command")),
},
"date-picker": {
table: React.lazy(async () => import("../props/date-picker")),
},
"icon-badge": {
table: React.lazy(async () => import("../props/icon-badge")),
},
"icon-button": {
table: React.lazy(async () => import("../props/icon-button")),
},
"status-badge": {
table: React.lazy(async () => import("../props/status-badge")),
},
"focus-modal": {
table: React.lazy(async () => import("../props/focus-modal")),
},
heading: {
table: React.lazy(async () => import("../props/heading")),
},
hint: {
table: React.lazy(async () => import("../props/hint")),
},
input: {
table: React.lazy(async () => import("../props/input")),
},
label: {
table: React.lazy(async () => import("../props/label")),
},
select: {
table: React.lazy(async () => import("../props/select")),
},
"select-value": {
table: React.lazy(async () => import("../props/select-value")),
},
"select-item": {
table: React.lazy(async () => import("../props/select-item")),
},
switch: {
table: React.lazy(async () => import("../props/switch")),
},
"table-pagination": {
table: React.lazy(async () => import("../props/table-pagination")),
},
text: {
table: React.lazy(async () => import("../props/text")),
},
"time-input": {
table: React.lazy(async () => import("../props/time-input")),
},
tooltip: {
table: React.lazy(async () => import("../props/tooltip")),
},
"progress-accordion-header": {
table: React.lazy(async () => import("../props/progress-accordion-header")),
},
"progress-tabs-trigger": {
table: React.lazy(async () => import("../props/progress-tabs-trigger")),
},
}
www/apps/ui/src/specs/Avatar/Avatar.json
+69
View File
@@ -0,0 +1,69 @@
{
"description": "This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.",
"methods": [],
"displayName": "Avatar",
"props": {
"src": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The URL of the image used in the Avatar."
},
"fallback": {
"required": true,
"tsType": {
"name": "string"
},
"description": "Text to show in the avatar if the URL provided in `src` can't be opened."
},
"variant": {
"defaultValue": {
"value": "\"rounded\"",
"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": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The size of the avatar's border radius.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
}
},
"composes": [
"Omit",
"VariantProps"
]
}
www/apps/ui/src/specs/Badge/Badge.json
+108
View File
@@ -0,0 +1,108 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Badge",
"props": {
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `span` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The badge's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\" \\| \"small\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"small\""
}
]
},
"required": false
},
"rounded": {
"defaultValue": {
"value": "\"base\"",
"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": {
"defaultValue": {
"value": "\"grey\"",
"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
}
},
"composes": [
"Omit",
"VariantProps"
]
}
www/apps/ui/src/specs/Button/Button.json
+88
View File
@@ -0,0 +1,88 @@
{
"description": "This component is based on the `button` element and supports all of its props",
"methods": [],
"displayName": "Button",
"props": {
"isLoading": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a loading spinner.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `button` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"variant": {
"defaultValue": {
"value": "\"primary\"",
"computed": false
},
"description": "The button's style.",
"tsType": {
"name": "union",
"raw": "\"primary\" \\| \"secondary\" \\| \"transparent\" \\| \"danger\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"secondary\""
},
{
"name": "literal",
"value": "\"transparent\""
},
{
"name": "literal",
"value": "\"danger\""
}
]
},
"required": false
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
www/apps/ui/src/specs/Calendar/Calendar.json
+40
View File
@@ -0,0 +1,40 @@
{
"description": "This component is based on the [react-date-picker](https://www.npmjs.com/package/react-date-picker) package.",
"methods": [],
"displayName": "Calendar",
"props": {
"mode": {
"defaultValue": {
"value": "\"single\"",
"computed": false
},
"description": "The calendar's mode.",
"tsType": {
"name": "union",
"raw": "\"single\" \\| \"range\"",
"elements": [
{
"name": "literal",
"value": "\"single\""
},
{
"name": "literal",
"value": "\"range\""
}
]
},
"required": false
},
"showOutsideDays": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "Whether to show days of previous and next months.",
"tsType": {
"name": "boolean"
},
"required": false
}
}
}
www/apps/ui/src/specs/Checkbox/Checkbox.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) primitive.",
"methods": [],
"displayName": "Checkbox",
"props": {}
}
www/apps/ui/src/specs/Code/Code.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `code` element and supports all of its props",
"methods": [],
"displayName": "Code",
"props": {}
}
www/apps/ui/src/specs/CodeBlock/CodeBlock.Body.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock.Body",
"props": {}
}
www/apps/ui/src/specs/CodeBlock/CodeBlock.Header.Meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock.Header.Meta",
"props": {}
}
www/apps/ui/src/specs/CodeBlock/CodeBlock.Header.json
+18
View File
@@ -0,0 +1,18 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock.Header",
"props": {
"hideLabels": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to hide the code snippets' labels.",
"defaultValue": {
"value": "false",
"computed": false
}
}
}
}
www/apps/ui/src/specs/CodeBlock/CodeBlock.json
+66
View File
@@ -0,0 +1,66 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock",
"props": {
"snippets": {
"required": true,
"tsType": {
"name": "Array",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The label of the code snippet's tab.\n */\n label: string\n /**\n * The language of the code snippet. For example, `tsx`.\n */\n language: string\n /**\n * The code snippet.\n */\n code: string\n /**\n * Whether to hide the line numbers shown as the side of the code snippet.\n */\n hideLineNumbers?: boolean\n /**\n * Whether to hide the copy button.\n */\n hideCopy?: boolean\n}",
"signature": {
"properties": [
{
"key": "label",
"value": {
"name": "string",
"required": true
},
"description": "The label of the code snippet's tab."
},
{
"key": "language",
"value": {
"name": "string",
"required": true
},
"description": "The language of the code snippet. For example, `tsx`."
},
{
"key": "code",
"value": {
"name": "string",
"required": true
},
"description": "The code snippet."
},
{
"key": "hideLineNumbers",
"value": {
"name": "boolean",
"required": false
},
"description": "Whether to hide the line numbers shown as the side of the code snippet."
},
{
"key": "hideCopy",
"value": {
"name": "boolean",
"required": false
},
"description": "Whether to hide the copy button."
}
]
}
}
],
"raw": "CodeSnippet[]"
},
"description": "The code snippets."
}
}
}
www/apps/ui/src/specs/Command/Command.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the div element and supports all of its props",
"methods": [],
"displayName": "Command",
"props": {}
}
www/apps/ui/src/specs/CommandBar/CommandBar.Bar.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "The bar component of the command bar. This component is used to display the commands.",
"methods": [],
"displayName": "CommandBar.Bar",
"props": {}
}
www/apps/ui/src/specs/CommandBar/CommandBar.Command.json
+54
View File
@@ -0,0 +1,54 @@
{
"description": "The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.",
"methods": [],
"displayName": "CommandBar.Command",
"props": {
"action": {
"required": true,
"tsType": {
"name": "signature",
"type": "function",
"raw": "() => void | Promise<void>",
"signature": {
"arguments": [],
"return": {
"name": "union",
"raw": "void | Promise<void>",
"elements": [
{
"name": "void"
},
{
"name": "Promise",
"elements": [
{
"name": "void"
}
],
"raw": "Promise<void>"
}
]
}
}
},
"description": "The function to execute when the command is triggered."
},
"label": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The command's label."
},
"shortcut": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The command's shortcut"
}
},
"composes": [
"Omit"
]
}
www/apps/ui/src/specs/CommandBar/CommandBar.Seperator.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "The seperator component of the command bar. This component is used to display a seperator between commands.",
"methods": [],
"displayName": "CommandBar.Seperator",
"props": {}
}
www/apps/ui/src/specs/CommandBar/CommandBar.Value.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "The value component of the command bar. This component is used to display a value, \nsuch as the number of selected items which the commands will act on.",
"methods": [],
"displayName": "CommandBar.Value",
"props": {}
}
www/apps/ui/src/specs/CommandBar/CommandBar.json
+62
View File
@@ -0,0 +1,62 @@
{
"description": "The root component of the command bar. This component manages the state of the command bar.",
"methods": [],
"displayName": "CommandBar",
"props": {
"open": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to open (show) the command bar.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onOpenChange": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(open: boolean) => void",
"signature": {
"arguments": [
{
"type": {
"name": "boolean"
},
"name": "open"
}
],
"return": {
"name": "void"
}
}
},
"description": "Specify a function to handle the change of `open`'s value."
},
"defaultOpen": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the command bar is open by default.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"disableAutoFocus": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to disable focusing automatically on the command bar when it's opened.",
"defaultValue": {
"value": "true",
"computed": false
}
}
}
}
www/apps/ui/src/specs/Container/Container.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Container",
"props": {}
}
www/apps/ui/src/specs/Copy/Copy.json
+25
View File
@@ -0,0 +1,25 @@
{
"description": "This component is based on the `button` element and supports all of its props",
"methods": [],
"displayName": "Copy",
"props": {
"content": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The content to copy."
},
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `button` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
}
}
}
www/apps/ui/src/specs/CurrencyInput/CurrencyInput.json
+47
View File
@@ -0,0 +1,47 @@
{
"description": "This component is based on the input element and supports all of its props",
"methods": [],
"displayName": "CurrencyInput",
"props": {
"symbol": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The symbol to show in the input."
},
"code": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The currency code to show in the input."
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The input's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"small\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"small\""
}
]
},
"required": false
}
},
"composes": [
"Omit",
"VariantProps"
]
}
www/apps/ui/src/specs/DatePicker/DatePicker.Display.json
+36
View File
@@ -0,0 +1,36 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.Display",
"props": {
"placeholder": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Placeholder of the date picker's input."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The size of the date picker's input.",
"defaultValue": {
"value": "\"base\"",
"computed": false
}
}
}
}
www/apps/ui/src/specs/DatePicker/DatePicker.Flyout.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.Flyout",
"props": {}
}
www/apps/ui/src/specs/DatePicker/DatePicker.PresetContainer.json
+64
View File
@@ -0,0 +1,64 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.PresetContainer",
"props": {
"presets": {
"required": true,
"tsType": {
"name": "union",
"raw": "TPreset[] | TPreset[]",
"elements": [
{
"name": "Array",
"elements": [
{
"name": "TPreset"
}
],
"raw": "TPreset[]"
},
{
"name": "Array",
"elements": [
{
"name": "TPreset"
}
],
"raw": "TPreset[]"
}
]
},
"description": "Selectable preset configurations."
},
"onSelect": {
"required": true,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: TValue) => void",
"signature": {
"arguments": [
{
"type": {
"name": "TValue"
},
"name": "value"
}
],
"return": {
"name": "void"
}
}
},
"description": "A function that handles the event when a preset is selected."
},
"currentValue": {
"required": false,
"tsType": {
"name": "TValue"
},
"description": "The currently selected preset."
}
}
}
www/apps/ui/src/specs/DatePicker/DatePicker.json
+313
View File
@@ -0,0 +1,313 @@
{
"description": "This component is based on the [Calendar](https://docs.medusajs.com/ui/components/calendar)\ncomponent and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).",
"methods": [],
"displayName": "DatePicker",
"props": {
"fromYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to start showing the dates from."
},
"toYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to show dates to."
},
"fromMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to start showing dates from."
},
"toMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to show dates to."
},
"fromDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to start showing dates from."
},
"toDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to show dates to."
},
"fromDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates from."
},
"toDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates to."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The class name to apply on the date picker."
},
"disabled": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is disabled."
},
"required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is required."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The date picker's size."
},
"showTimePicker": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a time picker along with the date picker."
},
"mode": {
"defaultValue": {
"value": "\"single\"",
"computed": false
},
"description": "The date picker's mode.",
"tsType": {
"name": "union",
"raw": "\"single\" \\| \"range\"",
"elements": [
{
"name": "literal",
"value": "\"single\""
},
{
"name": "literal",
"value": "\"range\""
}
]
},
"required": false
},
"defaultValue": {
"description": "The date selected by default.",
"required": false,
"tsType": {
"name": "union",
"raw": "Date \\| DateRange",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "DateRange",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "Date \\| undefined"
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date"
},
"description": "The range's end date."
}
]
}
}
],
"raw": "DateRange"
}
]
}
},
"onChange": {
"description": "A function to handle the change in the selected date.",
"required": false,
"tsType": {
"name": "union",
"raw": "(date: undefined \\| Date) => void \\| (dateRange: undefined \\| DateRange) => void",
"elements": [
{
"name": "signature",
"type": "function",
"raw": "(date: undefined \\| Date) => void",
"signature": {
"arguments": [
{
"name": "date",
"type": {
"name": "undefined \\| Date"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
},
{
"name": "signature",
"type": "function",
"raw": "(dateRange: undefined \\| DateRange) => void",
"signature": {
"arguments": [
{
"name": "dateRange",
"type": {
"name": "undefined \\| DateRange"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
]
}
},
"presets": {
"description": "Provide selectable preset configurations.",
"required": false,
"tsType": {
"name": "union",
"raw": "DatePreset[] \\| DateRangePreset[]",
"elements": [
{
"name": "Array",
"elements": [
{
"name": "DatePreset",
"elements": [
{
"name": "Date"
},
{
"name": "string"
}
],
"raw": "DatePreset"
}
],
"raw": "DatePreset[]"
},
{
"name": "Array",
"elements": [
{
"name": "DateRangePreset",
"elements": [
{
"name": "DateRange"
},
{
"name": "string"
}
],
"raw": "DateRangePreset"
}
],
"raw": "DateRangePreset[]"
}
]
}
},
"value": {
"description": "The selected date.",
"required": false,
"tsType": {
"name": "union",
"raw": "Date \\| DateRange",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "DateRange",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "Date \\| undefined"
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date"
},
"description": "The range's end date."
}
]
}
}
],
"raw": "DateRange"
}
]
}
}
}
}
www/apps/ui/src/specs/Day/Day.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Day",
"props": {}
}
www/apps/ui/src/specs/Drawer/Drawer.Body.json
+6
View File
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Body",
"props": {}
}

Some files were not shown because too many files have changed in this diff Show More