complex types

coinbase · Nov 14, 2024 · be57cc1 · be57cc1
1 parent b7b9696
commit be57cc1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/site/docs/components/Code.tsx b/site/docs/components/Code.tsx
@@ -3,7 +3,7 @@ import { cn } from '../../utils/index.ts';
 interface CodeProps {
   children: React.ReactNode;
   className?: string;
-  variant?: 'blue' | 'gray';
+  variant?: 'blue' | 'gray' | 'ghost';
 }
 
 export function Code({ children, variant = 'gray', className }: CodeProps) {
@@ -15,6 +15,8 @@ export function Code({ children, variant = 'gray', className }: CodeProps) {
           'bg-blue-100/60 text-blue-500 dark:bg-blue-900/60 dark:text-blue-400',
         variant === 'gray' &&
           'bg-gray-200/60 text-gray-600 dark:bg-gray-800/60 dark:text-gray-300',
+        variant === 'ghost' &&
+          'bg-transparent text-gray-600 dark:text-gray-300',
         className,
       )}
     >

diff --git a/site/docs/components/PropsTable.tsx b/site/docs/components/PropsTable.tsx
@@ -6,8 +6,8 @@ export type PropDef = {
   name: string;
   required?: boolean;
   default?: string | boolean | undefined;
-  type?: string;
-  typeSimple: string;
+  type: string;
+  typeSimple?: string;
   description?: string | React.ReactNode;
 };
 
@@ -43,7 +43,7 @@ const PropsTable = ({ data }: { data: PropDef[] }) => {
                       <Popover.Content
                         side="top"
                         align="center"
-                        className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900"
+                        className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mx-2 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900"
                         style={{ maxWidth: 350 }}
                         onOpenAutoFocus={(event) => {
                           event.preventDefault();
@@ -58,7 +58,32 @@ const PropsTable = ({ data }: { data: PropDef[] }) => {
               </div>
             </td>
             <td>
-              <Code variant="gray">{prop.typeSimple}</Code>
+              <div className="inline-flex gap-1">
+                <Code variant="gray">{prop.typeSimple ?? prop.type}</Code>
+                {Boolean(prop.typeSimple) && Boolean(prop.type) && (
+                  <Popover.Root>
+                    <Popover.Trigger>
+                      <InfoIcon className="size-[14px] text-[#4c4c4c] dark:text-stone-400" />
+                    </Popover.Trigger>
+                    <Popover.Content
+                      side="top"
+                      align="center"
+                      className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mx-2 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900"
+                    >
+                      <div
+                        style={{
+                          paddingTop: 'var(--inset-padding-top)',
+                          paddingRight: 'var(--inset-padding-right)',
+                          paddingBottom: 'var(--inset-padding-bottom)',
+                          paddingLeft: 'var(--inset-padding-left)',
+                        }}
+                      >
+                        <Code variant="ghost">{prop.type}</Code>
+                      </div>
+                    </Popover.Content>
+                  </Popover.Root>
+                )}
+              </div>
             </td>
             <td>
               {prop?.default ? (

diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
@@ -107,33 +107,34 @@ Serves as the main container for all wallet-related components.
   name: 'children',
   typeSimple: 'React.ReactNode',
   default: 'undefined',
-  description: 'The content of the wallet component.',
+  description: 'The content of the `Wallet` component.',
 }, ]} />
 
 ### ConnectWallet
 Handles the wallet connection process. Place child components inside to customize the connect button appearance.
 
 <PropsTable data={[{
   name: 'children',
-  typeSimple: 'React.ReactNode',
+  type: 'React.ReactNode',
   default: 'undefined',
-  description: 'The content of the connect wallet component.',
+  description: 'The content of the `ConnectWallet` component.',
 }, {
   name: 'className?',
-  typeSimple: 'string',
+  type: 'string',
 description: 'Additional CSS classes to apply to the wallet component.',
 }, {
   name: "text",
-  typeSimple: "string",
-  description: "The text to display on the connect button. Note: Prefer using `ConnectWalletText` component instead as this will be deprecated in a future version.",
+  type: "string",
+  description: <>The text to display on the connect button. <br /><br /> Note: Prefer using `ConnectWalletText` component instead as this will be deprecated in a future version.</>,
 }, {
-  name: "withWalletAggregator",
+  name: "withWalletAggregator?",
   typeSimple: "boolean",
   default: "false",
-  description: "Optional flag to enable the wallet aggregator like RainbowKit",
+  description: "Optional flag to enable RainbowKit's wallet aggregator.",
 }, {
   name: "onConnect",
   typeSimple: 'function',
+  type: "() => void",
   description: 'Callback function that triggers when the user connects their wallet.',
 }]} />