Pull shadcn components into own package, link into registry

apps/docs/app/shadcn/page.tsx

@@ -1,5 +1,5 @@
 import { OpenInV0Button } from '@/components/open-in-v0-button';
-import { GitPlatformSync } from '@/registry/blocks/git-platform-sync/git-platform-sync';
+import { GitPlatformSync } from '@/registry/new-york/blocks/git-platform-sync/git-platform-sync';
 
 export default function Home() {
   return (
@@ -19,7 +19,7 @@ export default function Home() {
             <h2 className="text-sm text-muted-foreground sm:pl-3">
               Git Platform Sync
             </h2>
-            <OpenInV0Button name="hello-world" className="w-fit" />
+            <OpenInV0Button name="git-platform-sync" className="w-fit" />
           </div>
           <div className="flex items-center justify-center min-h-[400px] relative">
             <GitPlatformSync />

apps/docs/components/open-in-v0-button.tsx

@@ -1,6 +1,8 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
+const FALLBACK_BASE_URL = 'https://pierrejs-docs.vercel.app';
+
 export function OpenInV0Button({
   name,
   className,
@@ -16,7 +18,7 @@ export function OpenInV0Button({
       asChild
     >
       <a
-        href={`https://v0.dev/chat/api/open?url=${process.env.NEXT_PUBLIC_BASE_URL}/r/${name}.json`}
+        href={`https://v0.dev/chat/api/open?url=${process.env.NEXT_PUBLIC_BASE_URL ?? FALLBACK_BASE_URL}/r/${name}.json`}
         target="_blank"
         rel="noreferrer"
       >

apps/docs/components/ui/button.tsx

@@ -1,58 +1,62 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-)
+);
 
 function Button({
   className,
   variant,
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
       data-slot="button"
+      style={{
+        // This is an override to show that the user's button styles are
+        // used instead of styles that are baked into the sync-ui components
+        fontWeight: '500 !important',
+      }}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

apps/docs/package.json

@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@pierre/diff-ui": "workspace:*",
+    "@pierre/sync-ui-core": "workspace:*",
+    "@pierre/sync-ui-hooks": "workspace:*",
     "@radix-ui/react-label": "catalog:",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "catalog:",
     "class-variance-authority": "catalog:",
     "clsx": "catalog:",
     "fumadocs-core": "catalog:",

apps/docs/public/r/git-platform-sync.json

@@ -4,13 +4,17 @@
   "type": "registry:component",
   "title": "Git Platform Sync",
   "description": "A component that implements repo syncing between code.storage and git platforms like GitHub.",
+  "dependencies": [
+    "@pierre/sync-ui-core",
+    "@pierre/sync-ui-hooks"
+  ],
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "registry/blocks/git-platform-sync/git-platform-sync.tsx",
-      "content": "import { Button } from '@/components/ui/button';\n\nexport function GitPlatformSync() {\n  return <Button>GitHub sync</Button>;\n}\n",
+      "path": "registry/new-york/blocks/git-platform-sync/git-platform-sync.tsx",
+      "content": "import { Button } from '@/components/ui/button';\nimport { version as versionCore } from '@pierre/sync-ui-core';\nimport { version as versionHooks } from '@pierre/sync-ui-hooks';\n\nexport function GitPlatformSync() {\n  console.log('versionCore', versionCore);\n  console.log('versionHooks', versionHooks);\n  return <Button variant=\"outline\">GitHub sync</Button>;\n}\n",
       "type": "registry:component"
     }
   ]

apps/docs/public/r/registry.json

@@ -9,9 +9,10 @@
       "title": "Git Platform Sync",
       "description": "A component that implements repo syncing between code.storage and git platforms like GitHub.",
       "registryDependencies": ["button"],
+      "dependencies": ["@pierre/sync-ui-core", "@pierre/sync-ui-hooks"],
       "files": [
         {
-          "path": "registry/blocks/git-platform-sync/git-platform-sync.tsx",
+          "path": "registry/new-york/blocks/git-platform-sync/git-platform-sync.tsx",
           "type": "registry:component"
         }
       ]

apps/docs/registry.json

@@ -9,9 +9,10 @@
       "title": "Git Platform Sync",
       "description": "A component that implements repo syncing between code.storage and git platforms like GitHub.",
       "registryDependencies": ["button"],
+      "dependencies": ["@pierre/sync-ui-core", "@pierre/sync-ui-hooks"],
       "files": [
         {
-          "path": "registry/blocks/git-platform-sync/git-platform-sync.tsx",
+          "path": "registry/new-york/blocks/git-platform-sync/git-platform-sync.tsx",
           "type": "registry:component"
         }
       ]

apps/docs/registry/new-york/blocks/git-platform-sync

@@ -0,0 +1 @@
+../../../../../packages/sync-ui-shadcn/blocks/git-platform-sync

packages/sync-ui-shadcn/blocks/git-platform-sync/git-platform-sync.tsx

@@ -0,0 +1,9 @@
+import { Button } from '@/components/ui/button';
+import { version as versionCore } from '@pierre/sync-ui-core';
+import { version as versionHooks } from '@pierre/sync-ui-hooks';
+
+export function GitPlatformSync() {
+  console.log('versionCore', versionCore);
+  console.log('versionHooks', versionHooks);
+  return <Button variant="outline">GitHub sync</Button>;
+}

packages/sync-ui-shadcn/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "components/gen.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

packages/sync-ui-shadcn/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import { cn } from '@/lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

packages/sync-ui-shadcn/lib/utils.ts

@@ -0,0 +1,8 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+