props table

lib/type-parser.ts

@@ -1,4 +1,4 @@
-export type TypeValue = {
+export type ParsedTypeProperty = {
     name: string;
     value: string;
     description?: string;
@@ -8,7 +8,7 @@ export type TypeValue = {
 export type ParsedType = {
     kind: "type" | "interface";
     name: string;
-    typeValues: TypeValue[];
+    typeValues: ParsedTypeProperty[];
 }
 
 
@@ -93,7 +93,7 @@ export function parseTypes(input: string): ParsedType[] {
                     cursor++
                 }
 
-                let typeValues: TypeValue[] = []
+                let typeValues: ParsedTypeProperty[] = []
 
                 for (let i = 0; i < propertyTkns.length; i++) {
                     const propertyTkn = propertyTkns[i]

src/components/component-anatomy.tsx

@@ -2,9 +2,14 @@
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/workshop/accordion"
 import { useIsomorphicLayoutEffect } from "@/workshop/core/hooks"
+import { HoverCard } from "@/workshop/hover-card"
+import { Popover } from "@/workshop/popover"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/workshop/table"
+import kebabCase from "lodash/kebabCase"
+import Link from "next/link"
 import * as React from "react"
-import { ParsedType, parseTypes } from "../../lib/type-parser"
+import { BiInfoCircle } from "react-icons/bi"
+import { ParsedType, ParsedTypeProperty, parseTypes } from "../../lib/type-parser"
 
 interface ComponentAnatomyProps extends React.HTMLAttributes<HTMLDivElement> {
     src: string
@@ -49,17 +54,17 @@ export function ComponentAnatomy({
                                     <Table className="border rounded-[--radius] table-fixed">
                                         <TableHeader className="bg-[--subtle-highlight]">
                                             <TableRow>
-                                                <TableHead>Prop</TableHead>
+                                                <TableHead className="w-[200px]">Prop</TableHead>
                                                 <TableHead>Type</TableHead>
-                                                <TableHead>Default</TableHead>
+                                                <TableHead className="w-[200px]">Default</TableHead>
                                             </TableRow>
                                         </TableHeader>
                                         <TableBody>
                                             {type.typeValues.map((prop, i) => (
                                                 <TableRow key={prop.name + i}>
-                                                    <TableCell>{prop.name}</TableCell>
-                                                    <TableCell>{prop.value}</TableCell>
-                                                    <TableCell>{""}</TableCell>
+                                                    <TableCell><TypeProperty prop={prop} /></TableCell>
+                                                    <TableCell><TypeValue value={prop.value} /></TableCell>
+                                                    <TableCell><TypePropertyDefault prop={prop} /></TableCell>
                                                 </TableRow>
                                             ))}
                                         </TableBody>
@@ -83,30 +88,79 @@ export function ComponentAnatomy({
     )
 }
 
-const obj = [
-    {
-        type: "type",
-        name: "AutocompleteOption",
-        typeValues: [{
-            type: "object",
-            value: "{ value: string | null, label: string }",
-        }],
-    },
-    {
-        type: "type",
-        name: "AutocompleteProps",
-        typeValues: [
-            {
-                type: "type",
-                value: `Omit<React.ComponentPropsWithRef<"input">`,
-            },
-            {
-                type: "property",
-                name: "options",
-                required: true,
-                description: "The autocompletion options.",
-                value: "AutocompleteOption[]",
-            },
-        ],
-    },
-]
+export function TypeProperty({ prop }: { prop: ParsedTypeProperty }) {
+    return (
+        <div className="flex gap-1 items-center">
+            {prop.name} {prop.required && <span className="text-[--red] text-lg">*</span>} {!!prop.description && (
+            <Popover
+                trigger={<span className="cursor-pointer"><BiInfoCircle className="text-[--muted] hover:text-[--foreground] text-lg" /></span>}
+            >
+                <p className="text-sm">
+                    {prop.description.replaceAll("*", "\n").split("\n").filter(n => n.trim() !== "").map((line, i) => (
+                        <span key={i}>
+                            {line}
+                            <br />
+                        </span>
+                    ))}
+                </p>
+            </Popover>
+        )}
+        </div>
+    )
+}
+
+export function TypePropertyDefault({ prop }: { prop: ParsedTypeProperty }) {
+    return (
+        <div className="flex gap-1 items-center">
+            {prop.description?.replaceAll("*", "\n").split("\n").filter(n => n.trim().startsWith("@default")).map((line, i) => (
+                <code key={i}>
+                    {line.replace("@default", "").trim()}
+                </code>
+            ))}
+        </div>
+    )
+}
+
+export function TypeValue({ value }: { value: string }) {
+
+    if (value.includes("Primitive.") && !value.toLowerCase().includes("command")) {
+        const radixType = value.split("typeof ")[1].split(".")
+        const part = radixType[1]?.split(">")[0]
+        const component = radixType[0].replace("Primitive", "")
+        return <Link
+            href={`https://www.radix-ui.com/primitives/docs/components/${kebabCase(component).toLowerCase()}#${part?.toLowerCase()}`}
+            className="text-[--indigo] hover:underline"
+            target="_blank"
+            rel="noreferrer"
+        >
+            {value}
+        </Link>
+    }
+
+    if (value === "InputStyling" || value === "BasicFieldOptions") {
+        return <Link
+            href={`#`}
+            className="text-[--orange] font-medium hover:underline"
+        >
+            {value}
+        </Link>
+    }
+
+    if (value.includes("VariantProps")) {
+        return <HoverCard
+            trigger={<span className="flex items-center gap-1 text-[--blue]">{value} <BiInfoCircle className="text-[--blue] text-lg" /></span>}
+        >
+            Check out the Anatomy source code to see the available variants props for this component.
+        </HoverCard>
+    }
+
+    if (value.includes("ComponentAnatomy")) {
+        return <HoverCard
+            trigger={<span className="flex items-center gap-1 text-[--brand]">{value} <BiInfoCircle className="text-[--brand] text-lg" /></span>}
+        >
+            Check out the Anatomy source code to see the available class properties for this component.
+        </HoverCard>
+    }
+
+    return <code className="border bg-gray-50 dark:bg-gray-900 rounded-[--radius] py-1 px-1.5">{value}</code>
+}

src/mdx/docs/components/accordion.mdx

@@ -2,8 +2,6 @@
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal an associated section of content.
 componentName: accordion
-links:
-    doc: https://www.radix-ui.com/docs/primitives/components/accordion
 ---
 
 <ComponentPreview name="accordion-demo" />

src/workshop/carousel/carousel.tsx

@@ -112,7 +112,7 @@ export type CarouselProps = {
     setApi?: (api: CarouselApi) => void
 }
 
-export type CarouselContextProps = {
+type CarouselContextProps = {
     carouselRef: ReturnType<typeof useEmblaCarousel>[0]
     api: ReturnType<typeof useEmblaCarousel>[1]
     scrollPrev: () => void

src/workshop/checkbox/checkbox-group.tsx

@@ -16,6 +16,8 @@ type CheckboxGroupContextValue = {
 
 export const __CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null)
 
+export type CheckboxGroupOption = { value: string, label?: React.ReactNode, disabled?: boolean, readonly?: boolean }
+
 export type CheckboxGroupProps = BasicFieldOptions & {
     /**
      * The value of the checkbox group.
@@ -36,7 +38,7 @@ export type CheckboxGroupProps = BasicFieldOptions & {
     /**
      * The options of the checkbox group.
      */
-    options: { value: string, label?: React.ReactNode, disabled?: boolean, readonly?: boolean }[]
+    options: CheckboxGroupOption[]
     /**
      * Class names applied to the container.
      */

src/workshop/combobox/combobox.tsx

@@ -63,6 +63,8 @@ export const ComboboxAnatomy = defineStyleAnatomy({
  * Combobox
  * -----------------------------------------------------------------------------------------------*/
 
+export type ComboboxOption = { value: string, textValue?: string, label: React.ReactNode }
+
 export type ComboboxProps = Omit<React.ComponentPropsWithRef<"button">, "size" | "value"> &
     BasicFieldOptions &
     InputStyling &
@@ -86,7 +88,7 @@ export type ComboboxProps = Omit<React.ComponentPropsWithRef<"button">, "size" |
     /**
      * The options to display in the dropdown
      */
-    options: { value: string, textValue?: string, label: React.ReactNode }[]
+    options: ComboboxOption[]
     /**
      * The message to display when there are no options
      */

src/workshop/command/command.tsx

@@ -61,11 +61,9 @@ export const CommandAnatomy = defineStyleAnatomy({
  * Command
  * -----------------------------------------------------------------------------------------------*/
 
-const __CommandAnatomyContext = React.createContext<CommandAnatomyProps>({})
+const __CommandAnatomyContext = React.createContext<ComponentAnatomy<typeof CommandAnatomy>>({})
 
-type CommandAnatomyProps = ComponentAnatomy<typeof CommandAnatomy>
-
-export type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive> & CommandAnatomyProps
+export type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive> & ComponentAnatomy<typeof CommandAnatomy>
 
 export const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, ref) => {
     const {

src/workshop/progress-bar/progress-bar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { cn, ComponentAnatomy } from "../core/styling"
-import * as ProgressBarPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
 import { cva, VariantProps } from "class-variance-authority"
 import * as React from "react"
 
@@ -46,7 +46,7 @@ export const ProgressBarAnatomy = {
  * ProgressBar
  * -----------------------------------------------------------------------------------------------*/
 
-export type ProgressBarProps = React.ComponentPropsWithoutRef<typeof ProgressBarPrimitive.Root>
+export type ProgressBarProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
     & ComponentAnatomy<typeof ProgressBarAnatomy>
     & VariantProps<typeof ProgressBarAnatomy.root>
     & VariantProps<typeof ProgressBarAnatomy.indicator>
@@ -62,16 +62,16 @@ export const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>((p
     } = props
 
     return (
-        <ProgressBarPrimitive.Root
+        <ProgressPrimitive.Root
             ref={ref}
             className={cn(ProgressBarAnatomy.root({ size }), className)}
             {...rest}
         >
-            <ProgressBarPrimitive.Indicator
+            <ProgressPrimitive.Indicator
                 className={cn(ProgressBarAnatomy.indicator({ isIndeterminate }), indicatorClass)}
                 style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
             />
-        </ProgressBarPrimitive.Root>
+        </ProgressPrimitive.Root>
     )
 })
 ProgressBar.displayName = "ProgressBar"

src/workshop/select/select.tsx

@@ -50,14 +50,16 @@ export const SelectAnatomy = defineStyleAnatomy({
  * Select
  * -----------------------------------------------------------------------------------------------*/
 
+export type SelectOption = { value: string, label?: string, disabled?: boolean }
+
 export type SelectProps = InputStyling &
     BasicFieldOptions &
     Omit<React.ComponentPropsWithoutRef<"button">, "value" | "defaultValue"> &
     ComponentAnatomy<typeof SelectAnatomy> & {
     /**
      * The options to display in the dropdown
      */
-    options: { value: string, label?: string, disabled?: boolean }[] | undefined
+    options: SelectOption[] | undefined
     /**
      * The placeholder text
      */