diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index d78bf0a5..00000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v18.20.4 diff --git a/src/components/puck/registry/README.md b/src/components/puck/registry/README.md index 95e9bf2d..e4c986ea 100644 --- a/src/components/puck/registry/README.md +++ b/src/components/puck/registry/README.md @@ -20,3 +20,13 @@ Add a new object to `ui` in `components.ts`. - Do not use .ts or .tsx imports - Imports from the @yext/visual-editor package must have a local path that is captured by the `IMPORT_PATTERN` in `build-registry.ts` + +## Running shadcn locally + +Useful for debugging the our registry with the shadcn CLI. + +1. `git clone https://github.com/shadcn-ui/ui.git` +2. `pnpm i` +3. `cd packages/shadcn` (`packages/cli` is the old cli) +4. `pnpm run dev` +5. `REGISTRY_URL=https://reliably-numerous-kit.pgsdemo.com/components node ui/packages/shadcn/dist/index.js add` diff --git a/src/components/puck/registry/build-registry.ts b/src/components/puck/registry/build-registry.ts index 42fbe06f..da619a5f 100644 --- a/src/components/puck/registry/build-registry.ts +++ b/src/components/puck/registry/build-registry.ts @@ -1,6 +1,7 @@ // Based on https://github.com/bwestwood11/ui-cart/blob/main/scripts/build-registry.ts // which is a simplified version of https://github.com/shadcn-ui/ui/blob/main/apps/www/scripts/build-registry.mts -import fs from "fs"; +import { writeFile, copyFile, mkdir, readFile } from "node:fs/promises"; +import { existsSync, rmSync, mkdirSync } from "fs"; import z from "zod"; import path from "path"; import { registryComponents } from "./registry.ts"; @@ -8,9 +9,10 @@ import { registryItemFileSchema } from "./schema.ts"; const DIST_DIR = `../../../../dist`; const SLUG = `components`; -const COMPONENT_PATH = `${DIST_DIR}/${SLUG}/styles/default`; const COLOR_PATH = `${DIST_DIR}/${SLUG}/colors`; const ICONS_PATH = `${DIST_DIR}/${SLUG}/icons`; +const THEMES_PATH = `${DIST_DIR}/${SLUG}/styles`; +const COMPONENT_PATH = `${THEMES_PATH}/default`; // matches import { ... } from "..." where the import path starts with ../../ const IMPORT_PATTERN = /from "(\.\.\/\.\.\/[^"]+)"/g; @@ -37,6 +39,8 @@ const colorIndex = { const iconsIndex = {}; +const themeIndex = [{ name: "default", label: "Default" }]; + type File = z.infer; async function writeFileRecursive(filePath: string, data: string) { @@ -44,10 +48,10 @@ async function writeFileRecursive(filePath: string, data: string) { try { // Ensure the directory exists, recursively creating directories as needed - await fs.promises.mkdir(dir, { recursive: true }); + await mkdir(dir, { recursive: true }); // Write the file - await fs.promises.writeFile(filePath, data, "utf-8"); + await writeFile(filePath, data, "utf-8"); } catch (error) { console.error("Error writing file: ", error); } @@ -57,7 +61,7 @@ const getComponentFiles = async (files: File[]) => { const filesArrayPromises = (files ?? []).map(async (file) => { if (typeof file === "string") { const filePath = `../${file}`; - const fileContent = await fs.promises.readFile(filePath, "utf-8"); + const fileContent = await readFile(filePath, "utf-8"); return { type: "registry:component", content: fileContent.replace( @@ -76,22 +80,23 @@ const getComponentFiles = async (files: File[]) => { export const buildRegistry = async () => { // Delete dist folder if it exists - if (fs.existsSync(DIST_DIR)) { - fs.rmSync(DIST_DIR, { recursive: true }); + if (existsSync(DIST_DIR)) { + rmSync(DIST_DIR, { recursive: true }); } // Create directories if they do not exist for (const path of [COMPONENT_PATH, COLOR_PATH, ICONS_PATH]) { - if (!fs.existsSync(path)) { - fs.mkdirSync(path, { recursive: true }); + if (!existsSync(path)) { + mkdirSync(path, { recursive: true }); } } // Write index files - fs.writeFileSync(`${COMPONENT_PATH}/index.json`, JSON.stringify(styleIndex)); - fs.writeFileSync(`${COLOR_PATH}/neutral.json`, JSON.stringify(colorIndex)); - fs.writeFileSync(`${ICONS_PATH}/index.json`, JSON.stringify(iconsIndex)); - fs.copyFileSync(`../registry/artifacts.json`, `${DIST_DIR}/artifacts.json`); + await writeFile(`${COMPONENT_PATH}/index.json`, JSON.stringify(styleIndex)); + await writeFile(`${COLOR_PATH}/neutral.json`, JSON.stringify(colorIndex)); + await writeFile(`${ICONS_PATH}/index.json`, JSON.stringify(iconsIndex)); + await writeFile(`${THEMES_PATH}/index.json`, JSON.stringify(themeIndex)); + await copyFile(`../registry/artifacts.json`, `${DIST_DIR}/artifacts.json`); const componentNames = ["index"]; diff --git a/src/components/puck/registry/package.json b/src/components/puck/registry/package.json index 212ee489..d6665e17 100644 --- a/src/components/puck/registry/package.json +++ b/src/components/puck/registry/package.json @@ -1,7 +1,7 @@ { "name": "visual-editor-component-registry", "version": "0.0.0", - "description": "Created by Yext", + "description": "A component library registry for visual-editor components to work with the ShadCN CLI", "main": "build-registry.ts", "type": "module", "scripts": { diff --git a/tailwind.config.ts b/tailwind.config.ts index faaf9562..ef4b504a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,10 +2,8 @@ import type { Config } from "tailwindcss"; export default { content: [ - "./src/internal/**/*.{html,js,jsx,ts,tsx}", - "./src/hooks/**/*.{html,js,jsx,ts,tsx}", - "./src/utils/**/*.{html,js,jsx,ts,tsx}", - "./src/components/editor/**/*.{html,js,jsx,ts,tsx}", + "./src/**/*.{html,js,jsx,ts,tsx}", + "!./src/components/puck/registry/**", // exclude the registry ], prefix: "ve-", theme: {