feat: add COMPONENTS_BASE_URL for development (#115)

Author: shadcn

.changeset/khaki-roses-rule.md

@@ -0,0 +1,5 @@
+---
+"@shadcn/ui": patch
+---
+
+Initial commit.

.changeset/nervous-knives-impress.md

@@ -0,0 +1,5 @@
+---
+"@shadcn/ui": patch
+---
+
+implement component base url

.github/workflows/prerelease-comment.yml

@@ -28,7 +28,7 @@ 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-ui@(.*?)-pr-(\d+)/.exec(artifact.name);
               
               if (match) {
                 require("fs").appendFileSync(
@@ -46,7 +46,7 @@ jobs:
         with:
           number: ${{ env.WORKFLOW_RUN_PR }}
           message: |
-            A new @shadcn/ui prerelease is available for testing. You can install this latest build in your project with:
+            A new @shadcn/ui prerelease is available for testing. You can use this latest build in your project with:
 
             ```sh
             pnpm @shadcn/ui@${{ env.BETA_PACKAGE_VERSION }}

.github/workflows/prerelease.yml

@@ -4,16 +4,17 @@ name: Release - Beta
 
 on:
   pull_request:
-    types: [labeled]
+    # types: [labeled]
     branches:
       - main
 jobs:
   prerelease:
-    if: |
-      github.repository_owner == 'shadcn' &&
-      contains(github.event.pull_request.labels.*.name, '🚀 autorelease')
+    # if: |
+    #   github.repository_owner == 'shadcn' &&
+    #   contains(github.event.pull_request.labels.*.name, '🚀 autorelease')
     name: Build & Publish a beta release to NPM
     runs-on: ubuntu-latest
+    environment: Preview
 
     steps:
       - name: Checkout Repo
@@ -36,13 +37,13 @@ jobs:
       - name: Modify package.json version
         run: node .github/version-script-beta.js
 
-      # - name: Authenticate to NPM
-      #   run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_ACCESS_TOKEN }}" > packages/cli/.npmrc
+      - name: Authenticate to NPM
+        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/cli/.npmrc
+        env:
+          NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
 
       - name: Publish Beta to NPM
         run: pnpm pub:beta
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
 
       - name: get-npm-version
         id: package-version
@@ -53,5 +54,5 @@ jobs:
       - 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
+          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

.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+# Adapted from create-t3-app.
+
+name: Publish
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    if: ${{ github.repository_owner == 'shadcn' }}
+    name: Create a PR for release workflow
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Use PNPM
+        uses: pnpm/action-setup@v2.2.4
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: Install NPM Dependencies
+        run: pnpm install
+
+      - name: Create Version PR or Publish to NPM
+        id: changesets
+        uses: changesets/action@v1.4.1
+        with:
+          commit: "chore(release): version packages"
+          title: "chore(release): version packages"
+          publish: pnpm build:cli
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+          NODE_ENV: "production"

apps/www/pages/api/components.json

@@ -37,6 +37,7 @@
     "@changesets/cli": "^2.26.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "cross-env": "^7.0.3",
     "eslint": "^8.31.0",
     "eslint-config-next": "13.0.0",
     "eslint-config-prettier": "^8.3.0",

package.json

@@ -0,0 +1,7 @@
+# @shadcn/ui
+
+## Usage
+
+```
+npx @shadcn/ui
+```

packages/cli/README.md

@@ -2,6 +2,9 @@
   "name": "@shadcn/ui",
   "version": "0.0.2",
   "description": "Add @shadcn/ui components to your app.",
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MIT",
   "author": {
     "name": "shadcn",
@@ -22,7 +25,7 @@
   "type": "module",
   "exports": "./dist/index.js",
   "bin": {
-    "@shadcn/cli": "./dist/index.js"
+    "@shadcn/ui": "./dist/index.js"
   },
   "scripts": {
     "dev": "tsup --watch",
@@ -33,9 +36,9 @@
     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
     "release": "changeset version",
-    "pub:beta": "pnpm build && npm publish --access public --tag beta",
-    "pub:next": "pnpm build && npm publish --access public --tag next",
-    "pub:release": "pnpm build && npm publish --access public"
+    "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
+    "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
+    "pub:release": "pnpm build && pnpm publish --access public"
   },
   "dependencies": {
     "chalk": "5.2.0",

packages/cli/package.json

@@ -1,10 +1,7 @@
 import fetch from "node-fetch"
 import * as z from "zod"
 
-const baseUrl =
-  process.env.NODE_ENV === "production"
-    ? "https://ui.shadcn.com"
-    : "http://localhost:3000"
+const baseUrl = process.env.COMPONENTS_BASE_URL ?? "https://ui.shadcn.com"
 
 const componentSchema = z.object({
   name: z.string(),
@@ -29,6 +26,8 @@ export async function getAvailableComponents() {
 
     return componentsSchema.parse(components)
   } catch (error) {
-    throw new Error("Failed to fetch components")
+    throw new Error(
+      `Failed to fetch components from ${baseUrl}/api/components.`
+    )
   }
 }