phpxui 0.0.1 → 0.0.2

package/dist/css/tailwind.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/generators/copy-tailwind.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyTailwindCss = copyTailwindCss;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+/**
+ * Copy dist/css/tailwind.css into src/app/css/tailwind.css.
+ *
+ * @param force  Overwrite even if the target exists.
+ * @returns      true  → file was copied / overwritten
+ *               false → skipped (already exists and !force)
+ */
+function copyTailwindCss(force = false) {
+    // Path to the CSS bundled with the CLI
+    const source = path_1.default.resolve(__dirname, "../dist/css/tailwind.css");
+    // Path inside the user’s project
+    const target = path_1.default.resolve(process.cwd(), "src/app/css/tailwind.css");
+    if (!force && fs_extra_1.default.existsSync(target)) {
+        return false; // skip quietly
+    }
+    fs_extra_1.default.ensureDirSync(path_1.default.dirname(target));
+    fs_extra_1.default.copyFileSync(source, target);
+    return true;
+}

package/dist/generators/ensure-package.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensurePackageInstalled = ensurePackageInstalled;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const child_process_1 = require("child_process");
+/**
+ * Ensures a package is present in dependencies/devDependencies.
+ * Installs it with `npm i -D <pkg>` if missing.
+ *
+ * @param pkg   Package name, e.g. "tw-animate-css"
+ * @param quiet If true, suppress install output.
+ * @returns     true  → package was installed now
+ *              false → package already present
+ */
+function ensurePackageInstalled(pkg, quiet = false) {
+    const pkgJsonPath = "package.json";
+    if (!fs_extra_1.default.existsSync(pkgJsonPath))
+        return false;
+    const pkgJson = fs_extra_1.default.readJsonSync(pkgJsonPath);
+    const hasIt = (pkgJson.dependencies && pkgJson.dependencies[pkg]) ||
+        (pkgJson.devDependencies && pkgJson.devDependencies[pkg]);
+    if (hasIt)
+        return false;
+    const cmd = `npm i -D ${pkg}`;
+    if (!quiet)
+        console.log(`⬇ Installing missing package: ${pkg} …`);
+    (0, child_process_1.execSync)(cmd, { stdio: quiet ? "ignore" : "inherit" });
+    return true;
+}

package/dist/index.js

@@ -9,9 +9,11 @@ const chalk_1 = __importDefault(require("chalk"));
 const path_1 = __importDefault(require("path"));
 const php_component_1 = require("./generators/php-component");
 const php_components_bulk_1 = require("./generators/php-components-bulk");
+const ensure_package_1 = require("./generators/ensure-package");
+const copy_tailwind_1 = require("./generators/copy-tailwind");
 (async () => {
     /* ─────────────────────────────────────────────
-     * 1.  Parse command + flags
+     * 1.  Parse command & flags
      * ──────────────────────────────────────────── */
     const args = process.argv.slice(2);
     const [command, ...rest] = args;
@@ -38,12 +40,25 @@ const php_components_bulk_1 = require("./generators/php-components-bulk");
         }
     }
     /* ─────────────────────────────────────────────
-     * 2.  Destination directory
+     * 2.  Housekeeping steps (always run)
+     * ──────────────────────────────────────────── */
+    // 2.a Ensure tw-animate-css is installed
+    (0, ensure_package_1.ensurePackageInstalled)("tw-animate-css");
+    // 2.b Keep Tailwind theme up‑to‑date in the project
+    const cssUpdated = (0, copy_tailwind_1.copyTailwindCss)(flags.force);
+    if (cssUpdated) {
+        const relCss = path_1.default
+            .relative(process.cwd(), "src/app/css/tailwind.css")
+            .replace(/\\/g, "/");
+        console.log(chalk_1.default.green(`✔ Updated Tailwind CSS → ${relCss}`));
+    }
+    /* ─────────────────────────────────────────────
+     * 3.  Destination directory for components
      * ──────────────────────────────────────────── */
     const targetDir = path_1.default.resolve(flags.out ?? "src/Lib/PHPXUI");
     try {
         /* ─────────────────────────────────────────
-         * 3.  Bulk mode (all components)
+         * 4.  Bulk mode  (--all)
          * ───────────────────────────────────────── */
         if (flags.all) {
             const { ok, fail } = await (0, php_components_bulk_1.generateAllComponents)(targetDir, flags.force);
@@ -55,7 +70,7 @@ const php_components_bulk_1 = require("./generators/php-components-bulk");
             process.exit(fail.length ? 1 : 0);
         }
         /* ─────────────────────────────────────────
-         * 4.  Single or multiple names
+         * 5.  Interactive prompt if no names given
          * ───────────────────────────────────────── */
         if (names.length === 0) {
             const { componentList } = await (0, prompts_1.default)({
@@ -66,10 +81,11 @@ const php_components_bulk_1 = require("./generators/php-components-bulk");
             });
             names.push(...componentList.split(/[\s,]+/));
         }
-        /* -------- single / multiple names -------- */
+        /* ─────────────────────────────────────────
+         * 6.  Generate each requested component
+         * ───────────────────────────────────────── */
         for (const name of names) {
             const saved = await (0, php_component_1.generateComponent)(name, targetDir, flags.force);
-            // Normalize to array ― generateComponent may return string | string[]
             const paths = Array.isArray(saved) ? saved : [saved];
             for (const abs of paths) {
                 const rel = path_1.default.relative(process.cwd(), abs).replace(/\\/g, "/");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phpxui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A package for generating Prisma PHP components with a CLI interface.",
   "main": "index.js",
   "scripts": {