create-bearnie 0.2.0 → 0.3.0

package/README.md

@@ -12,15 +12,25 @@ npx create-bearnie
 npm create bearnie my-app
 ```
 
-## Custom Theme
+## Options
 
-Create your own theme at [bearnie.dev/create](https://bearnie.dev/create), then use the generated command:
+### `--full`
+
+Include all components from the start:
 
 ```bash
-npm create bearnie my-app --theme=https://bearnie.dev/create#YOUR_THEME_HASH
+npx create-bearnie my-app --full
 ```
 
-This applies your custom colors, radius, and font to the project's CSS.
+This fetches all components from the registry and installs them in your project.
+
+### `--theme`
+
+Apply a custom theme from the [theme builder](https://bearnie.dev/create-bearnie-theme):
+
+```bash
+npx create-bearnie my-app --theme="https://bearnie.dev/create-bearnie-theme#..."
+```
 
 ## What's included
 
@@ -30,18 +40,27 @@ This applies your custom colors, radius, and font to the project's CSS.
 - Simple landing page to get started
 - Ready for components via `npx bearnie add`
 
+With `--full` flag:
+- All Bearnie UI components
+- Utility functions (`cn`, `focus-trap`)
+- Additional dependencies (`clsx`, `tailwind-merge`)
+
 ## After creating your project
 
 ```bash
 cd my-app
 npm install
-npx bearnie add button card dialog
 npm run dev
 ```
 
+Without `--full`, add components as needed:
+
+```bash
+npx bearnie add button card dialog
+```
+
 ## Learn more
 
 - [Bearnie Documentation](https://bearnie.dev/docs)
-- [Theme Builder](https://bearnie.dev/create)
 - [Browse Components](https://bearnie.dev/docs/components)
 - [GitHub](https://github.com/michael-andreuzza/bearnie)

package/dist/index.js

@@ -15,6 +15,77 @@ function parseThemeArg() {
   if (!themeArg) return null;
   return themeArg.split("=")[1];
 }
+function parseFullArg() {
+  return process.argv.includes("--full");
+}
+var REGISTRY_URL = "https://bearnie.dev/registry";
+var COMPONENT_NAMES = [
+  "accordion",
+  "alert",
+  "alert-dialog",
+  "aspect-ratio",
+  "avatar",
+  "badge",
+  "breadcrumb",
+  "button",
+  "button-group",
+  "card",
+  "carousel",
+  "checkbox",
+  "collapsible",
+  "command",
+  "context-menu",
+  "dialog",
+  "dropdown-menu",
+  "empty",
+  "file-upload",
+  "hover-card",
+  "input",
+  "input-group",
+  "input-otp",
+  "kbd",
+  "label",
+  "menubar",
+  "pagination",
+  "popover",
+  "progress",
+  "radio",
+  "scroll-area",
+  "select",
+  "separator",
+  "sheet",
+  "sidebar",
+  "skeleton",
+  "slider",
+  "spinner",
+  "stepper",
+  "switch",
+  "table",
+  "tabs",
+  "textarea",
+  "toast",
+  "toggle",
+  "tooltip",
+  "tree"
+];
+async function fetchComponent(name) {
+  try {
+    const response = await fetch(`${REGISTRY_URL}/${name}.json`);
+    if (!response.ok) return null;
+    return await response.json();
+  } catch {
+    return null;
+  }
+}
+async function fetchUtility(name) {
+  try {
+    const response = await fetch(`${REGISTRY_URL}/${name}.json`);
+    if (!response.ok) return null;
+    return await response.json();
+  } catch {
+    return null;
+  }
+}
 function extractThemeHash(themeUrl) {
   try {
     const hashIndex = themeUrl.indexOf("#");
@@ -204,6 +275,7 @@ function generateThemeCSS(config) {
 }
 async function main() {
   const themeUrl = parseThemeArg();
+  const fullInstall = parseFullArg();
   let themeConfig = null;
   if (themeUrl) {
     const hash = extractThemeHash(themeUrl);
@@ -216,6 +288,7 @@ async function main() {
 
   ${amber("Hey!")} Let's create your Bearnie project.
 ${themeConfig ? `  ${pc.dim("Using custom theme from URL")}
+` : ""}${fullInstall ? `  ${pc.dim("Full install: including all components")}
 ` : ""}
 `);
   let projectName = process.argv.find(
@@ -274,6 +347,60 @@ ${themeConfig ? `  ${pc.dim("Using custom theme from URL")}
     await fs.writeFile(globalCssPath, customCSS);
     console.log(`  ${pc.green("\u2713")} Applied custom theme`);
   }
+  if (fullInstall) {
+    console.log(`
+  ${pc.dim("Fetching components from registry...")}
+`);
+    await fs.ensureDir(path.join(targetDir, "src", "components", "ui"));
+    await fs.ensureDir(path.join(targetDir, "src", "utils"));
+    const focusTrap = await fetchUtility("focus-trap");
+    if (focusTrap?.files) {
+      for (const file of focusTrap.files) {
+        const filePath = path.join(targetDir, "src", file.name);
+        await fs.ensureDir(path.dirname(filePath));
+        await fs.writeFile(filePath, file.content);
+      }
+      console.log(`  ${pc.green("\u2713")} Added focus-trap utility`);
+    }
+    const cnContent = `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+    await fs.writeFile(path.join(targetDir, "src", "utils", "cn.ts"), cnContent);
+    console.log(`  ${pc.green("\u2713")} Added cn utility`);
+    let installed = 0;
+    let failed = 0;
+    for (const componentName of COMPONENT_NAMES) {
+      const component = await fetchComponent(componentName);
+      if (component?.files) {
+        for (const file of component.files) {
+          const filePath = path.join(targetDir, "src", file.name);
+          await fs.ensureDir(path.dirname(filePath));
+          await fs.writeFile(filePath, file.content);
+        }
+        installed++;
+        process.stdout.write(`\r  ${pc.green("\u2713")} Installed ${installed}/${COMPONENT_NAMES.length} components`);
+      } else {
+        failed++;
+      }
+    }
+    console.log("");
+    if (failed > 0) {
+      console.log(`  ${pc.yellow("!")} ${failed} components failed to fetch`);
+    }
+    const pkgPath2 = path.join(targetDir, "package.json");
+    const pkg2 = await fs.readJson(pkgPath2);
+    pkg2.dependencies = {
+      ...pkg2.dependencies,
+      "clsx": "^2.1.1",
+      "tailwind-merge": "^3.3.0"
+    };
+    await fs.writeJson(pkgPath2, pkg2, { spaces: 2 });
+    console.log(`  ${pc.green("\u2713")} Added component dependencies`);
+  }
   await fs.writeFile(
     path.join(targetDir, ".gitignore"),
     `# Dependencies
@@ -300,7 +427,24 @@ Thumbs.db
 `
   );
   console.log(`  ${pc.green("\u2713")} Created project files`);
-  console.log(`
+  if (fullInstall) {
+    console.log(`
+  ${pc.green("Done!")} Your Bearnie project is ready with all components.
+
+  ${pc.bold("Next steps:")}
+
+    ${pc.dim("1.")} cd ${pc.cyan(finalName)}
+    ${pc.dim("2.")} npm install
+    ${pc.dim("3.")} npm run dev
+
+  ${pc.dim("All components are in")} ${pc.cyan("src/components/ui/")}
+
+  ${pc.dim("Browse components at")} ${link("bearnie.dev/docs/components", "https://bearnie.dev/docs/components")}
+
+  ${pc.dim("Made by")} ${link("Michael", "https://michaelandreuzza.com")} ${pc.dim("at")} ${link("Lexington Themes", "https://lexingtonthemes.com")}
+`);
+  } else {
+    console.log(`
   ${pc.green("Done!")} Your Bearnie project is ready.
 
   ${pc.bold("Next steps:")}
@@ -310,10 +454,14 @@ Thumbs.db
     ${pc.dim("3.")} npx bearnie add button card
     ${pc.dim("4.")} npm run dev
 
+  ${pc.dim("Or use")} ${pc.cyan("--full")} ${pc.dim("to include all components:")}
+    npx create-bearnie my-app --full
+
   ${pc.dim("Browse components at")} ${link("bearnie.dev/docs/components", "https://bearnie.dev/docs/components")}
 
   ${pc.dim("Made by")} ${link("Michael", "https://michaelandreuzza.com")} ${pc.dim("at")} ${link("Lexington Themes", "https://lexingtonthemes.com")}
 `);
+  }
 }
 main().catch((err) => {
   console.error(`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bearnie",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Create a new Astro project with Bearnie UI components",
   "type": "module",
   "license": "MIT",