docs: generate documentation for UI components (#5849)

* 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>
2023-12-13 16:02:41 +02:00
parent edc49bfe1d
commit 245e5c9a69
288 changed files with 6029 additions and 1447 deletions
--- a/www/apps/ui/src/content/docs/components/avatar.mdx
+++ b/www/apps/ui/src/content/docs/components/avatar.mdx
@@ -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" />
--- a/www/apps/ui/src/content/docs/components/badge.mdx
+++ b/www/apps/ui/src/content/docs/components/badge.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/button.mdx
+++ b/www/apps/ui/src/content/docs/components/button.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/calendar.mdx
+++ b/www/apps/ui/src/content/docs/components/calendar.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/checkbox.mdx
+++ b/www/apps/ui/src/content/docs/components/checkbox.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/code-block.mdx
+++ b/www/apps/ui/src/content/docs/components/code-block.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/command-bar.mdx
+++ b/www/apps/ui/src/content/docs/components/command-bar.mdx
@@ -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"
+]} />
--- a/www/apps/ui/src/content/docs/components/command.mdx
+++ b/www/apps/ui/src/content/docs/components/command.mdx
@@ -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" />
--- a/www/apps/ui/src/content/docs/components/container.mdx
+++ b/www/apps/ui/src/content/docs/components/container.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/copy.mdx
+++ b/www/apps/ui/src/content/docs/components/copy.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/currency-input.mdx
+++ b/www/apps/ui/src/content/docs/components/currency-input.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/date-picker.mdx
+++ b/www/apps/ui/src/content/docs/components/date-picker.mdx
@@ -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
--- a/www/apps/ui/src/content/docs/components/drawer.mdx
+++ b/www/apps/ui/src/content/docs/components/drawer.mdx
@@ -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" />
--- a/www/apps/ui/src/content/docs/components/dropdown-menu.mdx
+++ b/www/apps/ui/src/content/docs/components/dropdown-menu.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/focus-modal.mdx
+++ b/www/apps/ui/src/content/docs/components/focus-modal.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/heading.mdx
+++ b/www/apps/ui/src/content/docs/components/heading.mdx
@@ -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" />
--- a/www/apps/ui/src/content/docs/components/icon-badge.mdx
+++ b/www/apps/ui/src/content/docs/components/icon-badge.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/icon-button.mdx
+++ b/www/apps/ui/src/content/docs/components/icon-button.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/input.mdx
+++ b/www/apps/ui/src/content/docs/components/input.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/kbd.mdx
+++ b/www/apps/ui/src/content/docs/components/kbd.mdx
@@ -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" />
--- a/www/apps/ui/src/content/docs/components/label.mdx
+++ b/www/apps/ui/src/content/docs/components/label.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/progress-accordion.mdx
+++ b/www/apps/ui/src/content/docs/components/progress-accordion.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/progress-tabs.mdx
+++ b/www/apps/ui/src/content/docs/components/progress-tabs.mdx
@@ -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"
+]} />
--- a/www/apps/ui/src/content/docs/components/prompt.mdx
+++ b/www/apps/ui/src/content/docs/components/prompt.mdx
@@ -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"
+]} />
--- a/www/apps/ui/src/content/docs/components/radio-group.mdx
+++ b/www/apps/ui/src/content/docs/components/radio-group.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/select.mdx
+++ b/www/apps/ui/src/content/docs/components/select.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/status-badge.mdx
+++ b/www/apps/ui/src/content/docs/components/status-badge.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/switch.mdx
+++ b/www/apps/ui/src/content/docs/components/switch.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/table.mdx
+++ b/www/apps/ui/src/content/docs/components/table.mdx
@@ -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"
+]} />
--- a/www/apps/ui/src/content/docs/components/tabs.mdx
+++ b/www/apps/ui/src/content/docs/components/tabs.mdx
@@ -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" />
--- a/www/apps/ui/src/content/docs/components/text.mdx
+++ b/www/apps/ui/src/content/docs/components/text.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/textarea.mdx
+++ b/www/apps/ui/src/content/docs/components/textarea.mdx
@@ -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" />
--- a/www/apps/ui/src/content/docs/components/toast.mdx
+++ b/www/apps/ui/src/content/docs/components/toast.mdx
@@ -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

--- a/www/apps/ui/src/content/docs/components/tooltip.mdx
+++ b/www/apps/ui/src/content/docs/components/tooltip.mdx
@@ -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" />