(1/N) cli: framework support (shadcn-ui#4569)

Author: shadcn

.changeset/large-phones-poke.md

@@ -0,0 +1,5 @@
+---
+"shadcn-ui": minor
+---
+
+Add support for frameworks

.changeset/tidy-rings-ring.md

@@ -0,0 +1,5 @@
+---
+"shadcn": major
+---
+
+npx shadcn init

.eslintrc.json

@@ -8,6 +8,7 @@
     "plugin:tailwindcss/recommended"
   ],
   "plugins": ["tailwindcss"],
+  "ignorePatterns": ["**/fixtures/**"],
   "rules": {
     "@next/next/no-html-link-for-pages": "off",
     "tailwindcss/no-custom-classname": "off",

.github/version-script-beta.js

@@ -4,7 +4,7 @@
 import { exec } from "child_process"
 import fs from "fs"
 
-const pkgJsonPath = "packages/cli/package.json"
+const pkgJsonPath = "packages/shadcn/package.json"
 try {
   const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
   exec("git rev-parse --short HEAD", (err, stdout) => {

.github/version-script-next.js

@@ -4,7 +4,7 @@
 import { exec } from "child_process"
 import fs from "fs"
 
-const pkgJsonPath = "packages/cli/package.json"
+const pkgJsonPath = "packages/shadcn/package.json"
 try {
   const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
   exec("git rev-parse --short HEAD", (err, stdout) => {

.github/workflows/prerelease-comment.yml

@@ -28,8 +28,8 @@ jobs:
 
             for (const artifact of allArtifacts.data.artifacts) {
               // Extract the PR number and package version from the artifact name
-              const match = /^npm-package-shadcn-ui@(.*?)-pr-(\d+)/.exec(artifact.name);
-              
+              const match = /^npm-package-shadcn@(.*?)-pr-(\d+)/.exec(artifact.name);
+
               if (match) {
                 require("fs").appendFileSync(
                   process.env.GITHUB_ENV,
@@ -49,7 +49,7 @@ jobs:
             A new prerelease is available for testing:
 
             ```sh
-            npx shadcn-ui@${{ env.BETA_PACKAGE_VERSION }}
+            npx shadcn@${{ env.BETA_PACKAGE_VERSION }}
             ```
 
       - name: "Remove the autorelease label once published"

.github/workflows/prerelease.yml

@@ -40,7 +40,7 @@ jobs:
         run: node .github/version-script-beta.js
 
       - name: Authenticate to NPM
-        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/cli/.npmrc
+        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/shadcn/.npmrc
         env:
           NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
 
@@ -51,10 +51,10 @@ jobs:
         id: package-version
         uses: martinbeentjes/npm-get-version-action@main
         with:
-          path: packages/cli
+          path: packages/shadcn
 
       - name: Upload packaged artifact
         uses: actions/upload-artifact@v2
         with:
-          name: npm-package-shadcn-ui@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
-          path: packages/cli/dist/index.js
+          name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
+          path: packages/shadcn/dist/index.js

.github/workflows/release.yml

@@ -37,7 +37,7 @@ jobs:
       #   run: pnpm check
 
       - name: Build the package
-        run: pnpm build:cli
+        run: pnpm shadcn:build
 
       - name: Create Version PR or Publish to NPM
         id: changesets

.prettierignore

@@ -3,4 +3,5 @@ node_modules
 .next
 build
 .contentlayer
-apps/www/pages/api/registry.json
+apps/www/pages/api/registry.json
+**/fixtures

.vscode/settings.json

@@ -6,5 +6,10 @@
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "vitest.debugExclude": [
+    "<node_internals>/**",
+    "**/node_modules/**",
+    "**/fixtures/**"
   ]
 }

apps/www/__registry__/default/block/login-01.tsx

@@ -0,0 +1,13 @@
+import { LoginForm } from "@/registry/default/block/login-01/components/login-form"
+
+export const iframeHeight = "870px"
+
+export const containerClassName = "w-full h-full"
+
+export default function Page() {
+  return (
+    <div className="flex h-screen w-full items-center justify-center px-4">
+      <LoginForm />
+    </div>
+  )
+}

apps/www/__registry__/default/block/sidebar-01.tsx

@@ -0,0 +1,25 @@
+import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
+import {
+  SidebarLayout,
+  SidebarTrigger,
+} from "@/registry/default/block/sidebar-01/ui/sidebar"
+
+export const iframeHeight = "870px"
+
+export const containerClassName = "w-full h-full"
+
+export default async function Page() {
+  const { cookies } = await import("next/headers")
+  return (
+    <SidebarLayout
+      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
+    >
+      <AppSidebar />
+      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
+        <div className="h-full rounded-md border-2 border-dashed p-2">
+          <SidebarTrigger />
+        </div>
+      </main>
+    </SidebarLayout>
+  )
+}