From 7b8dbb75a2b7d9b3ff5f99c5ff50075233ab77ce Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Tue, 18 Jun 2024 23:00:58 -0700 Subject: [PATCH] docs: Primitive props documentation (#241) * docs: Primitive props documentation * Add a composition guide --- .../components/docs/DataAttributesTable.tsx | 52 + apps/www/components/docs/KeyboardTable.tsx | 43 + apps/www/components/docs/PropsTable.tsx | 168 ++ apps/www/components/docs/index.ts | 3 + apps/www/package.json | 4 +- apps/www/pages/_app.tsx | 11 +- .../pages/reference/primitives/ActionBar.mdx | 151 ++ .../reference/primitives/BranchPicker.mdx | 60 +- .../pages/reference/primitives/Composer.mdx | 143 +- .../reference/primitives/ContentPart.mdx | 8 +- .../pages/reference/primitives/Message.mdx | 132 +- .../www/pages/reference/primitives/Thread.mdx | 137 +- apps/www/pages/reference/primitives/_meta.tsx | 1 + .../reference/primitives/composition.mdx | 23 + .../primitives/actionBar/ActionBarRoot.tsx | 4 +- pnpm-lock.yaml | 1416 ++++++++++++----- 16 files changed, 1889 insertions(+), 467 deletions(-) create mode 100644 apps/www/components/docs/DataAttributesTable.tsx create mode 100644 apps/www/components/docs/KeyboardTable.tsx create mode 100644 apps/www/components/docs/PropsTable.tsx create mode 100644 apps/www/components/docs/index.ts create mode 100644 apps/www/pages/reference/primitives/composition.mdx diff --git a/apps/www/components/docs/DataAttributesTable.tsx b/apps/www/components/docs/DataAttributesTable.tsx new file mode 100644 index 000000000..e3514a693 --- /dev/null +++ b/apps/www/components/docs/DataAttributesTable.tsx @@ -0,0 +1,52 @@ +import { Box, Code, Table, Text } from "@radix-ui/themes"; +import React from "react"; + +type KeyboardDef = { + attribute: string; + values: string; +}; + +export function DataAttributesTable({ data }: { data: KeyboardDef[] }) { + return ( + + + + + + Data attribute + + Values + + + + + {data.map(({ attribute, values }, i) => { + const key = `${attribute}-${i}`; + return ( + + + {attribute} + + + + {Array.isArray(values) ? ( + + {values.map( + (value, index) => + `"${value}" ${values.length !== index + 1 ? " | " : ""}`, + )} + + ) : ( + + {values} + + )} + + + ); + })} + + + + ); +} diff --git a/apps/www/components/docs/KeyboardTable.tsx b/apps/www/components/docs/KeyboardTable.tsx new file mode 100644 index 000000000..81986dc6f --- /dev/null +++ b/apps/www/components/docs/KeyboardTable.tsx @@ -0,0 +1,43 @@ +import { Box, Flex, Kbd, Table } from "@radix-ui/themes"; +import type React from "react"; + +type KeyboardDef = { + keys: string[]; + description: React.ReactNode; +}; + +export function KeyboardTable({ data }: { data: KeyboardDef[] }) { + return ( + + + + + + Key + + Description + + + + + {data.map(({ keys, description }, i) => { + const key = `${description}-${i}`; + return ( + + + + {keys.map((k) => ( + {k} + ))} + + + + {description} + + ); + })} + + + + ); +} diff --git a/apps/www/components/docs/PropsTable.tsx b/apps/www/components/docs/PropsTable.tsx new file mode 100644 index 000000000..cf03a6739 --- /dev/null +++ b/apps/www/components/docs/PropsTable.tsx @@ -0,0 +1,168 @@ +import { AccessibleIcon } from "@radix-ui/react-accessible-icon"; +import { DividerHorizontalIcon, InfoCircledIcon } from "@radix-ui/react-icons"; +import { + Box, + Code, + Flex, + IconButton, + Inset, + Popover, + ScrollArea, + Table, +} from "@radix-ui/themes"; +import type React from "react"; + +export type PropDef = { + name: string; + required?: boolean; + default?: string | boolean; + type?: string; + typeSimple: string; + description?: string | React.ReactNode; +}; + +export function PropsTable({ + data, + propHeaderFixedWidth = true, +}: { + data: PropDef[]; + propHeaderFixedWidth?: boolean; +}) { + return ( + + + + + + Prop + + Type + Default + + + + + {data.map( + ( + { + name, + type, + typeSimple, + required, + default: defaultValue, + description, + }, + i, + ) => { + const key = `${name}-${i}`; + return ( + + + + + + {name} + {required ? "*" : null} + + + {description && ( + + + + + + + + + { + event.preventDefault(); + (event.currentTarget as HTMLElement)?.focus(); + }} + > +
{description}
+ + + )} + + + + + + + {typeSimple ? typeSimple : type} + + + {Boolean(typeSimple) && Boolean(type) && ( + + + + + + + + + + + + + + {type} + + + + + + + )} + + + + + {defaultValue ? ( + + {defaultValue} + + ) : ( + + + + )} + + + ); + }, + )} + + + + ); +} diff --git a/apps/www/components/docs/index.ts b/apps/www/components/docs/index.ts new file mode 100644 index 000000000..2fba08ce1 --- /dev/null +++ b/apps/www/components/docs/index.ts @@ -0,0 +1,3 @@ +export { PropsTable } from "./PropsTable"; +export { KeyboardTable } from "./KeyboardTable"; +export { DataAttributesTable } from "./DataAttributesTable"; diff --git a/apps/www/package.json b/apps/www/package.json index 7ef604c6e..b7ebcd3d5 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -14,11 +14,11 @@ "@ai-sdk/react": "^0.0.2", "@assistant-ui/react": "workspace:*", "@assistant-ui/react-ai-sdk": "workspace:*", - "assistant-ui": "workspace:*", "@calcom/embed-react": "^1.5.0", "@fortawesome/fontawesome-svg-core": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.2", + "@radix-ui/react-accessible-icon": "^1.0.3", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", @@ -27,7 +27,9 @@ "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tooltip": "^1.0.7", + "@radix-ui/themes": "^3.0.5", "ai": "^3.1.36", + "assistant-ui": "workspace:*", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "lucide-react": "^0.395.0", diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx index 290a032d5..2235230f8 100644 --- a/apps/www/pages/_app.tsx +++ b/apps/www/pages/_app.tsx @@ -1,8 +1,11 @@ -import React from "react"; -import "./styles.css"; import { TooltipProvider } from "@/components/ui/tooltip"; import type { AppProps } from "next/app"; import Head from "next/head"; +import React from "react"; + +import "./styles.css"; +import "@radix-ui/themes/styles.css"; +import { Theme } from "@radix-ui/themes"; export default function MyApp({ Component, pageProps }: AppProps) { return ( @@ -12,7 +15,9 @@ export default function MyApp({ Component, pageProps }: AppProps) { - + + + ); diff --git a/apps/www/pages/reference/primitives/ActionBar.mdx b/apps/www/pages/reference/primitives/ActionBar.mdx index 9ca0f78c5..2a4de8665 100644 --- a/apps/www/pages/reference/primitives/ActionBar.mdx +++ b/apps/www/pages/reference/primitives/ActionBar.mdx @@ -3,6 +3,9 @@ title: ActionBarPrimitive description: Buttons to interact with the message. --- +import { PropsTable, DataAttributesTable } from "@/components/docs"; +import { Code } from "@radix-ui/themes"; + ## Anatomy ```tsx @@ -29,14 +32,162 @@ const AssistantMessageBar = () => ( Containts all parts of the action bar. +This primitive renders a `
` element unless `asChild` is set. + + + Change the default rendered element for the one passed as a child, + merging their props and behavior. +
+
+ Read our Composition guide for more + details. + + ), + }, + { + name: 'hideWhenRunning', + required: false, + type: 'boolean', + default: 'false', + description: ( + + Do not render the ActionBar when the thread is in running state. + + ), + }, + { + name: 'autohide', + required: false, + type: '"always" | "not-last" | "never"', + default: '"never"', + description: ( + + Do not render the ActionBar unless the mouse is hovering over the message. +
+
+ "always": always autohide. +
+ "not-last"; only autohide if the message is not the last one in the thread. + + ), + }, + { + name: 'autohideFloat', + required: false, + type: '"always" | "single-branch" | "never"', + default: '"never"', + description: ( + + Float the ActionBar during autohide. +
+
+ "always": always float during autohide. +
+ "single-branch": only float if the message is the only one in the thread. +
+
+ Note: this only sets `data-floating` on the ActionBar. You need to set the appropriate styles on the ActionBar to make it float. + + ), + }, + ]} +/> + + + + ### Edit Enables edit mode on user message. +This primitive renders a `