feat(swingset): proptable badges, inline variables reset, folder source links (#8822)

Author: kylemac

.changeset/swingset-proptable-badges.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/ClientRoot.tsx

@@ -35,7 +35,7 @@ export function ClientRoot({ children }: { children: React.ReactNode }) {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className='bg-background sticky top-0 flex h-12 shrink-0 items-center gap-2 border-b px-4'>
+        <header className='bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4'>
           <SidebarTrigger className='-ml-1' />
           <Separator
             orientation='vertical'

packages/swingset/src/components/PropTable.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Badge } from '@/components/ui/badge';
 import type { StoryMeta } from '@/lib/types';
 
 import { KnobControl } from './KnobControl';
@@ -54,7 +55,12 @@ export function PropTable({ meta, extra = [] }: PropTableProps) {
           return (
             <tr key={row.name}>
               <td>
-                <code>{row.name}</code>
+                <Badge
+                  variant='secondary'
+                  className='font-mono'
+                >
+                  {row.name}
+                </Badge>
               </td>
               <td>
                 <code>{row.type}</code>

packages/swingset/src/components/StoryPreview.tsx

@@ -3,6 +3,7 @@
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
 import { RotateCcwIcon, SlidersHorizontalIcon } from 'lucide-react';
 import type React from 'react';
+import { useState } from 'react';
 
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { generateKnobs, initKnobValues } from '@/lib/generateKnobs';
@@ -25,6 +26,7 @@ interface StoryPreviewProps {
 export function StoryPreview({ name, storyModule }: StoryPreviewProps) {
   const StoryComp = storyModule[name] as React.ComponentType<Record<string, unknown>>;
   const playground = usePlayground();
+  const [variablesOpen, setVariablesOpen] = useState(false);
 
   if (!StoryComp) {
     return (
@@ -37,7 +39,11 @@ export function StoryPreview({ name, storyModule }: StoryPreviewProps) {
   const variables = playground?.variables ?? {};
 
   return (
-    <Collapsible className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'>
+    <Collapsible
+      open={variablesOpen}
+      onOpenChange={setVariablesOpen}
+      className='not-prose border-border bg-background my-4 overflow-hidden rounded-lg border'
+    >
       <div className='flex items-center justify-end border-b px-2 py-1.5'>
         <button
           type='button'
@@ -56,11 +62,21 @@ export function StoryPreview({ name, storyModule }: StoryPreviewProps) {
         </MosaicProvider>
       </div>
 
-      <div className='flex items-center justify-start border-t px-2 py-1.5'>
-        <CollapsibleTrigger className='text-muted-foreground hover:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
+      <div className='flex items-center justify-start gap-1 border-t px-2 py-1.5'>
+        <CollapsibleTrigger className='text-muted-foreground hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'>
           <SlidersHorizontalIcon className='size-3' />
           Variables
         </CollapsibleTrigger>
+        {variablesOpen && playground ? (
+          <button
+            type='button'
+            onClick={() => playground.setVariables({})}
+            className='text-muted-foreground hover:text-foreground flex items-center gap-1 rounded px-2 py-1 text-xs'
+          >
+            <RotateCcwIcon className='size-3' />
+            Reset
+          </button>
+        ) : null}
       </div>
 
       {playground ? (

packages/swingset/src/components/VariablesPanel.tsx

@@ -3,7 +3,6 @@
 import type { MosaicVariables } from '@clerk/ui/mosaic/variables';
 import { defaultMosaicVariables } from '@clerk/ui/mosaic/variables';
 
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
@@ -30,18 +29,6 @@ export function VariablesPanel({ variables, onChange }: VariablesPanelProps) {
 
   return (
     <div className='flex flex-col gap-1'>
-      <div className='flex items-center justify-between gap-2 border-b px-3 py-2'>
-        <span className='text-muted-foreground text-[10px] font-semibold uppercase tracking-widest'>Variables</span>
-        <Button
-          variant='ghost'
-          size='sm'
-          className='text-muted-foreground h-6 px-2 text-xs'
-          onClick={() => onChange({})}
-        >
-          Reset
-        </Button>
-      </div>
-
       <div className='flex flex-col gap-4 p-3'>
         <section className='flex flex-col gap-2'>
           <div className='text-brand text-[10px] font-semibold uppercase tracking-widest'>Colors</div>

packages/swingset/src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

packages/swingset/src/lib/source.ts

@@ -1,8 +1,16 @@
 // The repo these components are documented from. `source` paths in `StoryMeta` are
 // relative to the monorepo root and resolved against this base on the default branch.
-const REPO_BLOB_BASE = 'https://github.com/clerk/javascript/blob/main';
+const REPO_BASE = 'https://github.com/clerk/javascript';
+const BRANCH = 'main';
 
-/** Build a GitHub URL to the file that exports a component, from a repo-root-relative path. */
+/**
+ * Build a GitHub URL from a repo-root-relative path. Index/barrel files (`index.ts`,
+ * `index.tsx`, …) resolve to their containing folder as a `tree` view — the folder of
+ * source files is more useful than the re-export file. Any other path links straight
+ * to the file as a `blob` view.
+ */
 export function sourceUrl(path: string): string {
-  return `${REPO_BLOB_BASE}/${path.replace(/^\/+/, '')}`;
+  const clean = path.replace(/^\/+/, '');
+  const folder = clean.match(/^(.*)\/index\.[jt]sx?$/)?.[1];
+  return folder ? `${REPO_BASE}/tree/${BRANCH}/${folder}` : `${REPO_BASE}/blob/${BRANCH}/${clean}`;
 }