feat: add shadcn/registry (shadcn-ui#6339)

* feat: implement shadcn/registry

* feat: add schema field

* fix: import

* chore: add changeset

* chore: remove console

* fix: tests

* fix: diff command

* feat: move to schema/registy-item.json

* fix

* ci: switch to node 20

* ci: build packages

.changeset/sour-hotels-drum.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add schema

.github/workflows/code-check.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -52,7 +52,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -90,7 +90,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -113,4 +113,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
       - run: pnpm typecheck

.npmrc

@@ -1 +1,2 @@
 auto-install-peers=true
+link-workspace-packages=true

apps/www/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "overrides": [
+    {
+      "files": ["scripts/**/*.{ts,mts}"],
+      "parserOptions": {
+        "project": "tsconfig.scripts.json"
+      }
+    }
+  ]
+}

apps/www/components/block-display.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { registryItemFileSchema } from "shadcn/registry"
 import { z } from "zod"
 
 import { highlightCode } from "@/lib/highlight-code"
@@ -7,7 +8,6 @@ import {
   getRegistryItem,
 } from "@/lib/registry"
 import { BlockViewer } from "@/components/block-viewer"
-import { registryItemFileSchema } from "@/registry/schema"
 
 export async function BlockDisplay({ name }: { name: string }) {
   const item = await getCachedRegistryItem(name)

apps/www/components/block-viewer.tsx

@@ -16,6 +16,7 @@ import {
   Terminal,
 } from "lucide-react"
 import { ImperativePanelHandle } from "react-resizable-panels"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/registry"
 import { z } from "zod"
 
 import { trackEvent } from "@/lib/events"
@@ -51,7 +52,6 @@ import {
   ToggleGroupItem,
 } from "@/registry/new-york/ui/toggle-group"
 import { Style } from "@/registry/registry-styles"
-import { registryItemFileSchema, registryItemSchema } from "@/registry/schema"
 
 type BlockViewerContext = {
   item: z.infer<typeof registryItemSchema>

apps/www/components/chart-display.tsx

@@ -1,11 +1,11 @@
 import * as React from "react"
+import { registryItemSchema } from "shadcn/registry"
 import { z } from "zod"
 
 import { highlightCode } from "@/lib/highlight-code"
 import { getRegistryItem } from "@/lib/registry"
 import { cn } from "@/lib/utils"
 import { ChartToolbar } from "@/components/chart-toolbar"
-import { registryItemSchema } from "@/registry/schema"
 
 export type Chart = z.infer<typeof registryItemSchema> & {
   highlightedCode: string

apps/www/lib/blocks.ts

@@ -1,9 +1,9 @@
 "use server"
 
+import { registryItemSchema } from "shadcn/registry"
 import { z } from "zod"
 
 import { Style } from "@/registry/registry-styles"
-import { registryItemSchema } from "@/registry/schema"
 
 export async function getAllBlockIds(
   types: z.infer<typeof registryItemSchema>["type"][] = [

apps/www/lib/registry.ts

@@ -2,11 +2,11 @@ import { promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
 import { Index } from "@/__registry__"
+import { registryItemFileSchema, registryItemSchema } from "shadcn/registry"
 import { Project, ScriptKind, SourceFile, SyntaxKind } from "ts-morph"
 import { z } from "zod"
 
 import { Style } from "@/registry/registry-styles"
-import { registryItemFileSchema, registryItemSchema } from "@/registry/schema"
 
 export const DEFAULT_REGISTRY_STYLE = "new-york" satisfies Style["name"]
 

apps/www/package.json

@@ -80,6 +80,7 @@
     "react-resizable-panels": "^2.0.22",
     "react-wrap-balancer": "^0.4.1",
     "recharts": "2.12.7",
+    "shadcn": "2.1.8",
     "sharp": "^0.31.3",
     "sonner": "^1.2.3",
     "swr": "2.2.6-beta.3",

apps/www/public/r/facebook.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/registry.json",
+  "name": "facebook",
+  "type": "registry:block",
+  "registryDependencies": [],
+  "dependencies": ["motion"],
+  "devDependencies": [],
+  "tailwind": {},
+  "cssVars": {
+    "light": {},
+    "dark": {}
+  },
+  "files": [
+    {
+      "path": "facebook.tsx",
+      "content": "'use client';\n\nimport type { Variants } from 'motion/react';\nimport { motion, useAnimation } from 'motion/react';\n\nconst facebookVariants: Variants = {\n  normal: {\n    opacity: 1,\n    pathLength: 1,\n    pathOffset: 0,\n    transition: {\n      duration: 0.4,\n      opacity: { duration: 0.1 },\n    },\n  },\n  animate: {\n    opacity: [0, 1],\n    pathLength: [0, 1],\n    pathOffset: [1, 0],\n    transition: {\n      duration: 0.6,\n      ease: 'linear',\n      opacity: { duration: 0.1 },\n    },\n  },\n};\n\nconst FacebookIcon = () => {\n  const controls = useAnimation();\n\n  return (\n    <div\n      className=\"cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center\"\n      onMouseEnter={() => {\n        controls.start('animate');\n      }}\n      onMouseLeave={() => {\n        controls.start('normal');\n      }}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <motion.path\n          variants={facebookVariants}\n          animate={controls}\n          initial=\"normal\"\n          d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\n        />\n      </svg>\n    </div>\n  );\n};\n\nexport { FacebookIcon };\n",
+      "type": "registry:ui"
+    }
+  ]
+}

apps/www/public/r/styles/default/accordion-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "accordion-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "accordion"
   ],

apps/www/public/r/styles/default/accordion.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "accordion",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-accordion"
   ],

apps/www/public/r/styles/default/alert-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "alert"
   ],

apps/www/public/r/styles/default/alert-destructive.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert-destructive",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "alert"
   ],

apps/www/public/r/styles/default/alert-dialog-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert-dialog-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "alert-dialog",
     "button"

apps/www/public/r/styles/default/alert-dialog.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert-dialog",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-alert-dialog"
   ],

apps/www/public/r/styles/default/alert.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/alert.tsx",

apps/www/public/r/styles/default/aspect-ratio-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "aspect-ratio-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "aspect-ratio"
   ],

apps/www/public/r/styles/default/aspect-ratio.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "aspect-ratio",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-aspect-ratio"
   ],

apps/www/public/r/styles/default/avatar-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "avatar-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "avatar"
   ],

apps/www/public/r/styles/default/avatar.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "avatar",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-avatar"
   ],

apps/www/public/r/styles/default/badge-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "badge"
   ],

apps/www/public/r/styles/default/badge-destructive.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge-destructive",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "badge"
   ],

apps/www/public/r/styles/default/badge-outline.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge-outline",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "badge"
   ],

apps/www/public/r/styles/default/badge-secondary.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge-secondary",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "badge"
   ],

apps/www/public/r/styles/default/badge.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "files": [
     {
       "path": "ui/badge.tsx",

apps/www/public/r/styles/default/breadcrumb-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "breadcrumb"
   ],

apps/www/public/r/styles/default/breadcrumb-dropdown.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb-dropdown",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "breadcrumb"
   ],

apps/www/public/r/styles/default/breadcrumb-ellipsis.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb-ellipsis",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "breadcrumb"
   ],

apps/www/public/r/styles/default/breadcrumb-link.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb-link",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "breadcrumb"
   ],

apps/www/public/r/styles/default/breadcrumb-responsive.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb-responsive",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "breadcrumb"
   ],

apps/www/public/r/styles/default/breadcrumb-separator.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb-separator",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "breadcrumb"
   ],

apps/www/public/r/styles/default/breadcrumb.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "breadcrumb",
   "type": "registry:ui",
+  "author": "shadcn (https://ui.shadcn.com)",
   "dependencies": [
     "@radix-ui/react-slot"
   ],

apps/www/public/r/styles/default/button-as-child.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "button-as-child",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "button"
   ],

apps/www/public/r/styles/default/button-demo.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "button-demo",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "button"
   ],

apps/www/public/r/styles/default/button-destructive.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "button-destructive",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "button"
   ],

apps/www/public/r/styles/default/button-ghost.json

@@ -1,6 +1,8 @@
 {
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "button-ghost",
   "type": "registry:example",
+  "author": "shadcn (https://ui.shadcn.com)",
   "registryDependencies": [
     "button"
   ],