kmod-cli 1.0.10

package/README.md

@@ -0,0 +1,53 @@
+# kmod-cli
+
+Module install fast to setup into project by command.
+
+## Features
+
+- Install all/single components and package need to fast setup in projects of React/Next.js
+
+## Installation
+
+```bash
+# Using npm
+npm install kmod-cli
+#Or
+yarn add kmod-cli
+
+```
+
+## Usage
+
+```bash
+npx kmod add [command]
+
+```
+
+### Common Commands
+
+- `--all` — Get all coomponent
+- `<component_name> - Get a component
+
+### Examples
+
+```bash
+npx kumod add # empty <command> that show select menu easy use
+#Or
+npx kumod add --all # add all component
+#Or
+npx kumod add button # add button component
+#...any other command
+```
+
+
+## Contributing
+
+Contributions are welcome! Please open issues or pull requests.
+
+## License
+
+MIT License
+
+---
+
+**Author:** [KumoD](https://github.com/datnt19213)

package/bin/gen-components.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const templatesDir = path.join(__dirname, "../component-templates");
+const outPath = path.join(__dirname, "../components.json");
+
+// ================= Helpers =================
+function extractDepsFromFile(filePath) {
+  const content = fs.readFileSync(filePath, "utf8");
+  const importRegex = /from\s+['"]([^'"]+)['"]/g;
+  const deps = new Set();
+  let match;
+  while ((match = importRegex.exec(content))) {
+    const dep = match[1];
+    if (!dep.startsWith(".") && !dep.startsWith("/")) {
+        if (dep === "react" || dep.startsWith("next") || dep === "@/lib/utils") {
+          continue;
+        }
+      deps.add(dep);
+    }
+  }
+  return [...deps];
+  
+}
+
+
+function normalizePath(p) {
+  return p.split(path.sep).join("/"); // thay \ bằng /
+}
+
+function scanTemplates(dir, base = "component-templates") {
+  const items = fs.readdirSync(dir, { withFileTypes: true });
+  const results = {};
+
+  for (const item of items) {
+    const relPath = normalizePath(path.join(base, item.name));
+    const fullPath = path.join(dir, item.name);
+
+    if (item.isDirectory()) {
+      // đệ quy scan folder con
+      Object.assign(results, scanTemplates(fullPath, relPath));
+    } else if (item.isFile() && (item.name.endsWith(".tsx") || item.name.endsWith(".ts"))) {
+      // mỗi file = 1 component
+      const compName = path.parse(item.name).name;
+      const deps = extractDepsFromFile(fullPath);
+
+      results[compName] = {
+        path: relPath,
+        dependencies: deps,
+        devDependencies: [],
+      };
+    }
+  }
+
+  return results;
+}
+
+// ================= Run =================
+const components = scanTemplates(templatesDir);
+
+fs.writeFileSync(outPath, JSON.stringify(components, null, 2));
+
+console.log(`✅ Generated components.json with ${Object.keys(components).length} entries`);

package/bin/index.js

@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import { Command } from 'commander';
+import fs from 'fs-extra';
+import inquirer from 'inquirer';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const program = new Command();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const rootDir = path.join(__dirname, "..");
+const templatesDir = path.join(rootDir, "templates");
+const componentsConfig = fs.readJsonSync(
+  path.join(rootDir, "components.json")
+);
+
+// ====================== Helpers ======================
+function detectPackageManager() {
+  if (fs.existsSync("pnpm-lock.yaml")) return "pnpm";
+  if (fs.existsSync("yarn.lock")) return "yarn";
+  return "npm";
+}
+
+function installDeps(deps, dev = false) {
+  if (!deps || deps.length === 0) return;
+
+  const pm = detectPackageManager();
+  const cmd =
+    pm === "yarn"
+      ? `yarn add ${deps.join(" ")} ${dev ? "-D" : ""}`
+      : pm === "pnpm"
+      ? `pnpm add ${deps.join(" ")} ${dev ? "-D" : ""}`
+      : `npm install ${deps.join(" ")} ${dev ? "--save-dev" : ""}`;
+
+  console.log(`📦 Installing: ${deps.join(", ")} ...`);
+  execSync(cmd, { stdio: "inherit" });
+}
+
+function getUserPackageJson() {
+  const pjPath = path.join(process.cwd(), "package.json");
+  if (!fs.existsSync(pjPath)) return null;
+  return fs.readJsonSync(pjPath);
+}
+
+function getMissingDeps(userPkg, deps = [], devDeps = []) {
+  const installed = {
+    ...userPkg.dependencies,
+    ...userPkg.devDependencies,
+  };
+
+  const missingDeps = deps.filter((d) => !installed[d]);
+  const missingDevDeps = devDeps.filter((d) => !installed[d]);
+
+  return { missingDeps, missingDevDeps };
+}
+
+async function copyComponent(name, collectedDeps) {
+  const comp = componentsConfig[name];
+  if (!comp) {
+    console.error(`❌ Component not found: ${name}`);
+    return;
+  }
+
+  const src = path.join(rootDir, comp.path);
+
+  // Base: src/custom
+  const destBase = path.join(process.cwd(), "src", "custom");
+  await fs.ensureDir(destBase);
+
+  // Giữ nguyên cấu trúc bên trong component-templates
+  const relPath = comp.path.replace(/^component-templates[\\/]/, "");
+  const dest = path.join(destBase, relPath);
+
+  await fs.copy(src, dest, { overwrite: false });
+  console.log(`✅ Copied to src/custom/${relPath}`);
+
+  // Collect deps
+  const userPkg = getUserPackageJson();
+  if (!userPkg) return;
+
+  const { missingDeps, missingDevDeps } = getMissingDeps(
+    userPkg,
+    comp.dependencies,
+    comp.devDependencies
+  );
+
+  if (missingDeps.length) collectedDeps.deps.push(...missingDeps);
+  if (missingDevDeps.length) collectedDeps.devDeps.push(...missingDevDeps);
+}
+
+async function addComponents() {
+  const choices = Object.keys(componentsConfig);
+
+  const answers = await inquirer.prompt([
+    {
+      type: "checkbox",
+      name: "selected",
+      message: "Select components to add:",
+      choices: [{ name: "✨ All", value: "--all" }, ...choices],
+    },
+  ]);
+
+  const collectedDeps = { deps: [], devDeps: [] };
+
+  if (answers.selected.includes("--all")) {
+    for (const c of choices) {
+      await copyComponent(c, collectedDeps);
+    }
+  } else {
+    for (const c of answers.selected) {
+      await copyComponent(c, collectedDeps);
+    }
+  }
+
+  // Remove duplicates
+  collectedDeps.deps = [...new Set(collectedDeps.deps)];
+  collectedDeps.devDeps = [...new Set(collectedDeps.devDeps)];
+
+  if (collectedDeps.deps.length || collectedDeps.devDeps.length) {
+    console.log(`⚠️ Missing packages detected:`);
+
+    if (collectedDeps.deps.length)
+      console.log("  - deps:", collectedDeps.deps.join(", "));
+    if (collectedDeps.devDeps.length)
+      console.log("  - devDeps:", collectedDeps.devDeps.join(", "));
+
+    const { confirm } = await inquirer.prompt([
+      {
+        type: "confirm",
+        name: "confirm",
+        message: "Install all missing packages now?",
+        default: true,
+      },
+    ]);
+
+    if (confirm) {
+      if (collectedDeps.deps.length) installDeps(collectedDeps.deps, false);
+      if (collectedDeps.devDeps.length) installDeps(collectedDeps.devDeps, true);
+    }
+  }
+}
+
+// ====================== CLI Commands ======================
+program
+  .name("kumod")
+  .description("CLI to copy component/templates into project")
+  .version("1.0.0");
+
+program.command("add").description("Select components to add").action(addComponents);
+
+program.parse(process.argv);

package/component-templates/components/access-denied.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import {
+  ArrowLeft,
+  Ban,
+  Mail,
+  X,
+} from 'lucide-react';
+import dynamic from 'next/dynamic';
+
+import { Button } from '../ui/button';
+import {
+  Card,
+  CardContent,
+} from '../ui/card';
+
+const Lottie = dynamic(() => import("lottie-react"), {
+  ssr: false,
+});
+
+interface AccessDeniedProps {
+  title?: string;
+  message?: string;
+  showBackButton?: boolean;
+  showContactButton?: boolean;
+  contactButtonLabel?: string;
+  backButtonLabel?: string;
+  onBack?: () => void;
+  onContact?: () => void;
+  mailAddress?: string;
+  lottieSrc?: string;
+}
+
+export default function AccessDenied({
+  title = "Không có quyền truy cập",
+  message = "Bạn không có quyền xem nội dung này. Vui lòng liên hệ người quản trị để được cấp quyền.",
+  contactButtonLabel = "Liên hệ",
+  backButtonLabel = "Quay lại",
+  showBackButton = true,
+  showContactButton = true,
+  mailAddress = "support@yourdomain.com",
+  lottieSrc,
+  onBack,
+  onContact,
+}: AccessDeniedProps) {
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      window.history.back();
+    }
+  };
+
+  const handleContact = () => {
+    if (onContact) {
+      onContact();
+    } else {
+      // Default contact action - could be email or support page
+      window.location.href = `mailto:${mailAddress}`;
+    }
+  };
+
+  return (
+    <div className="flex min-h-[400px] items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardContent className="p-8 text-center">
+          {/* Icon */}
+          <div className="mb-6">
+            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
+              <Lottie animationData={lottieSrc} className="h-8 w-8 text-red-600" />
+            </div>
+          </div>
+
+          {/* Title */}
+          <h2 className="mb-3 text-xl font-semibold text-gray-900">{title}</h2>
+
+          {/* Message */}
+          <p className="mb-6 text-sm leading-relaxed text-gray-600">{message}</p>
+
+          {/* Actions */}
+          <div className="flex flex-col justify-center gap-3 sm:flex-row">
+            {showBackButton && (
+              <Button variant="outline" onClick={handleBack} className="flex items-center gap-2 bg-transparent">
+                <ArrowLeft className="h-4 w-4" />
+                {backButtonLabel}
+              </Button>
+            )}
+            {showContactButton && (
+              <Button onClick={handleContact} className="flex items-center gap-2">
+                <Mail className="h-4 w-4" />
+                {contactButtonLabel}
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Compact version for inline use
+export function AccessDeniedInline({ message = "Bạn không có quyền xem nội dung này" }: { message?: string }) {
+  return (
+    <div className="flex items-center justify-center rounded-lg border border-red-200 bg-red-50 p-6">
+      <div className="flex items-center gap-3 text-red-700">
+        <Ban className="h-5 w-5" />
+        <span className="text-sm font-medium">{message}</span>
+      </div>
+    </div>
+  );
+}
+
+// Banner version for top of page
+export function AccessDeniedBanner({ message = "Quyền truy cập bị hạn chế", onDismiss }: { message?: string; onDismiss?: () => void }) {
+  return (
+    <div className="mb-4 border-l-4 border-red-400 bg-red-50 p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <Ban className="mr-3 h-5 w-5 text-red-400" />
+          <p className="text-sm text-red-700">{message}</p>
+        </div>
+        {onDismiss && (
+          <Button variant="ghost" size="icon" onClick={onDismiss} className="text-red-700 hover:text-red-800">
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/component-templates/components/breadcumb.tsx

@@ -0,0 +1,42 @@
+// components/Breadcrumb.tsx
+import React, { ReactNode } from 'react';
+
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+
+import { cn } from '../lib/utils';
+
+type BreadcrumbItem = {
+  label: ReactNode;
+  as?: "link" | "a";
+  href?: string;
+  isCurrent?: boolean;
+};
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbProps> = ({ items, className }) => {
+  return (
+    <nav className={cn("text-muted-foreground flex items-center space-x-1 text-sm", className)} aria-label="Breadcrumb">
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          {index !== 0 && <ChevronRight className="text-muted-foreground h-4 w-4" />}
+          {item.href && !item.isCurrent && item.as === "link" ? (
+            <Link href={item.href} className="hover:text-foreground transition-colors">
+              {item.label}
+            </Link>
+          ) : item.href && !item.isCurrent && item.as === "a" ? (
+            <a href={item.href} className="hover:text-foreground transition-colors">
+              {item.label}
+            </a>
+          ) : (
+            <span className="text-foreground font-medium">{item.label}</span>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+};

package/component-templates/components/count-down.tsx

@@ -0,0 +1,94 @@
+import React, {
+  ReactElement,
+  useEffect,
+} from 'react';
+
+import { useCountdownStore } from '../hooks/count-down';
+
+export type CountdownProps = {
+  initialTime?: number;
+  onComplete?: () => void;
+  onCountDown?: () => void;
+  blockInitialTime?: boolean; // Optional prop to control initial time setting
+  freeze?: boolean; // Optional prop to freeze the countdown
+  freezeAfter?: number; // Optional prop to freeze countdown after a certain time
+}
+
+/**
+ * Countdown component
+ * @param {number} initialTime - Initial time in seconds, defaults to 0
+ * @param {boolean} blockInitialTime - If true, the initial time will not be set automatically
+ * @param {boolean} freeze - If true, the countdown will freeze after it reaches 0
+ * @param {number} freezeAfter - The time in seconds after which the countdown will freeze
+ * @param {() => void} onComplete - Callback function that will be called when the countdown is completed
+ * @param {() => void} onCountDown - Callback function that will be called every second while the countdown is running
+ * @returns {ReactElement} The countdown component
+ */
+export const Countdown: React.FC<CountdownProps> = ({
+  initialTime,
+  blockInitialTime = false,
+  freeze = false,
+  freezeAfter,
+  onComplete,
+  onCountDown,
+}: CountdownProps): ReactElement => {
+    const {
+    decrement,
+    isRunning,
+    setTime,
+    stop,
+    timeLeft,
+    freezing,
+    freeze: doFreeze,
+  } = useCountdownStore();
+
+  // Init time if not blocked and timeLeft is 0
+  useEffect(() => {
+    if (!blockInitialTime && timeLeft === 0 && initialTime) {
+      setTime(initialTime);
+    }
+  }, [blockInitialTime, initialTime]);
+
+  useEffect(() => {
+    if (blockInitialTime) {
+      return;
+    }
+    if (timeLeft === 0 && initialTime) {
+      setTime(initialTime);
+    }
+  }, [initialTime]);
+
+  useEffect(() => {
+    if (timeLeft === 0 && isRunning) {
+      stop();
+      if (onComplete) {
+        onComplete();
+      }
+    }
+  }, [timeLeft, isRunning, onComplete]);
+
+  useEffect(() => {
+     if (!isRunning || freeze || freezing) return;
+
+    // 🚦 Auto freeze
+    if (freezeAfter !== undefined && timeLeft === freezeAfter) {
+      doFreeze();
+      return;
+    }
+    if (isRunning && timeLeft > 0) {
+      const timer = setInterval(() => {
+        decrement();
+        onCountDown?.();
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }
+
+    if (timeLeft === 0 && isRunning) {
+      stop();
+      onComplete?.();
+    }
+  },  [isRunning, freeze, freezing, timeLeft, freezeAfter]);
+
+  return <>{timeLeft}</>;
+};