basecoat-cli 0.1.0

package/dist/assets/nunjucks/toast.njk

@@ -0,0 +1,198 @@
+{#
+  Renders a toaster container and individual toast messages.
+  Can render the initial container or be used with htmx OOB swaps to add toasts dynamically.
+
+  @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
+  @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
+  @param is_fragment {boolean} [optional] [default=false] - If true, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+#}
+{% macro toaster(
+  id="toaster",
+  toasts=[],
+  main_attrs=None,
+  is_fragment=false
+) %}
+<div
+  id="{{ id }}"
+  class="toaster"
+  {% for key, value in main_attrs %}
+    {{ key }}="{{ value }}"
+  {% endfor %}
+  {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
+>
+{% for item in toasts %}
+  {{ toast(
+    category=item.category,
+    title=item.title,
+    description=item.description,
+    action=item.action,
+    cancel=item.cancel
+  ) }}
+{% endfor %}
+</div>
+
+{% if not is_fragment %}
+<template id="toast-template">
+  <div
+    class="toast"
+    role="status"
+    aria-atomic="true"
+    x-bind="$toastBindings"
+  >
+    <div class="toast-content">
+      <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
+        <template x-if="config.icon">
+          <span aria-hidden="true" role="img" x-html="config.icon"></span>
+        </template>
+        <template x-if="!config.icon && config.category === 'success'">
+          {{ toast_icons.success | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'error'">
+          {{ toast_icons.error | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'info'">
+          {{ toast_icons.info | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'warning'">
+          {{ toast_icons.warning | safe }}
+        </template>
+        <section class="flex-1 flex flex-col gap-0.5 items-start">
+          <template x-if="config.title">
+            <h2 class="font-medium" x-text="config.title"></h2>
+          </template>
+          <template x-if="config.description">
+            <p class="text-muted-foreground" x-text="config.description"></p>
+          </template>
+        </section>
+        <template x-if="config.action || config.cancel">
+          <footer class="flex flex-col gap-1 self-start">
+            <template x-if="config.action?.click">
+              <button
+                type="button"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                @click="executeAction(config.action.click)"
+                x-text="config.action.label"
+              ></button>
+            </template>
+            <template x-if="config.action?.url">
+              <a
+                :href="config.action.url"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                x-text="config.action.label"
+              ></a>
+            </template>
+            <template x-if="config.cancel?.click">
+              <button
+                type="button"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                @click="executeAction(config.cancel.click)"
+                x-text="config.cancel.label"
+              ></button>
+            </template>
+            <template x-if="config.cancel?.url">
+              <a
+                :href="config.cancel.url"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                x-text="config.cancel.label"
+              ></a>
+            </template>
+          </footer>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+{% endif %}
+{% endmacro %}
+
+{#
+  Renders a single toast message.
+
+  @param category {string} [optional] [default="success"] - Type of toast ('success', 'error', 'info', 'warning'). Determines icon and ARIA role.
+  @param title {string} [optional] - The main title text of the toast.
+  @param description {string} [optional] - The secondary description text.
+  @param action {object} [optional] - Defines an action button.
+    - label {string}: Button text.
+    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - url {string}: URL for an anchor link button.
+  @param cancel {object} [optional] - Defines a cancel/dismiss button (similar structure to action).
+    - label {string}: Button text.
+    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - url {string}: URL for an anchor link button.
+#}
+{% macro toast(
+  category="success",
+  title="",
+  description="",
+  action=None,
+  cancel=None
+) %}
+<div
+  class="toast"
+  role="{{ 'alert' if category == 'error' else 'status' }}"
+  aria-atomic="true"
+  aria-hidden="false"
+  {% if category %}data-category="{{ category }}"{% endif %}
+  x-data="toast({
+    category: '{{ category }}',
+    duration: {{ duration or 'null' }}
+  })"
+  x-bind="$toastBindings"
+>
+  <div class="toast-content">
+    <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
+      {% if category in ["error", "success", "info", "warning"] %}
+        {{ toast_icons[category] | safe }}
+      {% endif %}
+      <section class="flex-1 flex flex-col gap-0.5 items-start">
+        {% if title %}
+          <h2 class="font-medium">{{ title }}</h2>
+        {% endif %}
+        {% if description %}
+          <p class="text-muted-foreground">{{ description }}</p>
+        {% endif %}
+      </section>
+      {% if action or cancel %}
+        <footer class="flex flex-col gap-1 self-start">
+          {% if action %}
+            {% if action.click %}
+              <button
+                type="button"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                @click="{{ action.click }}"
+              >{{ action.label }}</button>
+            {% elif action.url %}
+              <a
+                href="{{ action.url }}"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+              >{{ action.label }}</a>
+            {% endif %}
+          {% endif %}
+          {% if cancel %}
+            {% if cancel.click %}
+              <button
+                type="button"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                @click="{{ cancel.click }}"
+              >{{ cancel.label }}</button>
+            {% elif cancel.url %}
+              <a
+                href="{{ cancel.url }}"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+              >{{ toast.cancel.label }}</a>
+            {% endif %}
+          {% endif %}
+        </footer>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
+{% set toast_icons = {
+  'success': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+  'error': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+  'info': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+  'warning': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
+} %}

package/dist/index.js

@@ -0,0 +1,193 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const program = new Command();
+
+// Attempt to read version from the CLI's own package.json
+let packageVersion = 'unknown';
+try {
+  const cliScriptRunningDir = path.dirname(fileURLToPath(import.meta.url)); // .../packages/cli/dist
+  const cliPackageRootDir = path.resolve(cliScriptRunningDir, '..');       // .../packages/cli
+  const packageJsonPath = path.join(cliPackageRootDir, 'package.json');
+  const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+  packageVersion = JSON.parse(packageJsonContent).version;
+} catch (error) {
+  console.warn('Could not read CLI package version:', error.message);
+}
+
+const DEFAULT_CONFIG = {
+  templateEngine: null,
+  templateDest: './components/basecoat', 
+  scriptDest: './static/js/basecoat'
+};
+let config = { ...DEFAULT_CONFIG }; // User-specific config, potentially updated by prompts
+
+// Discovers available components from the CLI's bundled assets.
+async function getAvailableComponents() {
+  try {
+    const cliScriptRunningDir = path.dirname(fileURLToPath(import.meta.url));
+    const assetsDir = path.resolve(cliScriptRunningDir, 'assets'); 
+    const jsSourceDir = path.join(assetsDir, 'js');
+    
+    const jsFiles = await fs.readdir(jsSourceDir);
+    
+    return jsFiles
+      .filter(file => file.endsWith('.js'))
+      .map(file => path.basename(file, '.js'));
+  } catch (error) {
+    console.error("Error reading component source directories from CLI assets:", error);
+    return [];
+  }
+}
+
+// Ensures necessary configuration (template engine, destination paths) is set, prompting the user if needed.
+async function ensureConfiguration() {
+  if (!config.templateEngine) {
+    const engineChoice = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'engine',
+        message: 'Which template engine are you using?',
+        choices: ['nunjucks', 'jinja'],
+      }
+    ]);
+    config.templateEngine = engineChoice.engine;
+  }
+
+  const pathPrompts = [];
+  if (!config.templateDest || config.templateDest === DEFAULT_CONFIG.templateDest) {
+    pathPrompts.push({
+        type: 'input',
+        name: 'templateDest',
+        message: 'Where should template files be placed?',
+        default: DEFAULT_CONFIG.templateDest,
+    });
+  }
+  if (!config.scriptDest || config.scriptDest === DEFAULT_CONFIG.scriptDest) {
+    pathPrompts.push({
+        type: 'input',
+        name: 'scriptDest',
+        message: 'Where should script files be placed?',
+        default: DEFAULT_CONFIG.scriptDest,
+    });
+  }
+
+  if (pathPrompts.length > 0) {
+    const pathChoices = await inquirer.prompt(pathPrompts);
+    if (pathChoices.templateDest) config.templateDest = pathChoices.templateDest;
+    if (pathChoices.scriptDest) config.scriptDest = pathChoices.scriptDest;
+  }
+}
+
+// Copies a component's template and script files to the user's project.
+async function addComponent(componentName) {
+  console.log(`\nProcessing component: ${componentName}...`);
+
+  const cliScriptRunningDir = path.dirname(fileURLToPath(import.meta.url));
+  const assetsDir = path.resolve(cliScriptRunningDir, 'assets');
+  const templateExt = config.templateEngine === 'jinja' ? '.html.jinja' : '.njk';
+  
+  const templateSource = path.join(assetsDir, config.templateEngine, `${componentName}${templateExt}`); 
+  const scriptSource = path.join(assetsDir, 'js', `${componentName}.js`); 
+
+  const templateDestPath = path.resolve(process.cwd(), config.templateDest, `${componentName}${templateExt}`);
+  const scriptDestPath = path.resolve(process.cwd(), config.scriptDest, `${componentName}.js`);
+
+  try {
+    const templateExists = await fs.pathExists(templateSource);
+    const scriptExists = await fs.pathExists(scriptSource);
+
+    if (!templateExists) {
+      console.error(`  Error: Template file for component '${componentName}' not found in CLI assets. Searched: ${templateSource}`);
+      // Optionally, list available template engines or files for that component if helpful
+    }
+    if (!scriptExists) {
+      console.error(`  Error: Script file for component '${componentName}' not found in CLI assets. Searched: ${scriptSource}`);
+    }
+    if (!templateExists || !scriptExists) return; // Skip this component if sources are missing
+
+    await fs.ensureDir(path.dirname(templateDestPath));
+    await fs.ensureDir(path.dirname(scriptDestPath));
+
+    await fs.copyFile(templateSource, templateDestPath);
+    console.log(`  -> Copied template to: ${templateDestPath}`);
+    await fs.copyFile(scriptSource, scriptDestPath);
+    console.log(`  -> Copied script to:   ${scriptDestPath}`);
+
+  } catch (error) {
+    console.error(`  Error processing component ${componentName}:`, error);
+  }
+}
+
+// Setup main CLI program
+program
+  .name('basecoat-cli')
+  .description('Add Basecoat components to your project')
+  .version(packageVersion);
+
+// Define the 'add' command
+program
+  .command('add')
+  .description('Add one or more Basecoat components to your project')
+  .argument('[components...]', 'Names of components to add (e.g., dialog select)')
+  .action(async (componentsArg) => {
+    let componentsToAdd = []; // Initialize as an empty array
+    try {
+      if (!componentsArg || componentsArg.length === 0) {
+        const availableComponents = await getAvailableComponents();
+        if (availableComponents.length === 0) {
+          console.error('Error: No components available in the CLI. Build might be corrupted.');
+          return;
+        }
+
+        const allComponentsChoice = 'All components';
+        const choices = [allComponentsChoice, ...availableComponents];
+
+        const answers = await inquirer.prompt([
+          {
+            type: 'list', // Changed from checkbox to list
+            name: 'selectedComponent', // Changed name for clarity
+            message: 'Which component(s) would you like to add?',
+            choices: choices,
+          }
+        ]);
+        
+        if (answers.selectedComponent === allComponentsChoice) {
+          componentsToAdd = availableComponents; // Add all
+        } else {
+          componentsToAdd = [answers.selectedComponent]; // Add the single selected one
+        }
+      } else {
+        // If components were provided as arguments, use them directly
+        // (This part of the logic remains, ensuring componentsArg is an array)
+        componentsToAdd = Array.isArray(componentsArg) ? componentsArg : [componentsArg];
+      }
+
+      if (!componentsToAdd || componentsToAdd.length === 0) {
+        console.log('No components selected. Exiting.');
+        return;
+      }
+
+      await ensureConfiguration(); // Confirm/gather destination paths
+
+      for (const componentName of componentsToAdd) {
+        await addComponent(componentName);
+      }
+      console.log('\nComponent addition process finished.');
+
+    } catch (error) {
+      if (error.isTtyError || error.constructor?.name === 'ExitPromptError') { // Handle inquirer cancellation
+        console.log('\nOperation cancelled by user.');
+      } else {
+        console.error('\nAn unexpected error occurred during the add command:', error);
+      }
+      process.exit(1); // Exit with error code for unexpected errors
+    }
+  });
+
+program.parse(process.argv); 

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "basecoat-cli",
+  "version": "0.1.0",
+  "description": "Add Basecoat components to your project",
+  "author": "hunvreus",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "basecoat-cli": "./dist/index.js"
+  },
+  "files": [
+    "dist/"
+  ],
+  "dependencies": {
+    "commander": "^13.1.0",
+    "fs-extra": "^11.3.0",
+    "inquirer": "^12.6.0"
+  },
+  "keywords": [
+    "cli",
+    "components",
+    "component library",
+    "component system",
+    "ui",
+    "ui kit",
+    "shadcn",
+    "shadcn/ui",
+    "tailwind",
+    "tailwindcss",
+    "css",
+    "html",
+    "jinja",
+    "nunjucks",
+    "alpinejs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hunvreus/basecoat.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/hunvreus/basecoat/issues"
+  },
+  "homepage": "https://basecoatui.com/installation#install-cli"
+}