notionsoft-ui 1.0.0

package/README.md

@@ -0,0 +1,21 @@
+# 🎨 NotionSoft-UI
+
+A **shadcn-style component installer** that copies React components directly into your project.
+
+## ✨ Features
+
+- 🚀 Install components into your codebase
+- 🎨 Tailwind CSS friendly
+- 🪶 Lightweight (no runtime dependencies)
+- 🔧 Full control of the components
+- 📦 Works with any React + TypeScript project
+
+---
+
+## 📦 Installation
+
+Inside your project:
+
+```sh
+npx notionsoft-ui init
+```

package/cli/index.cjs

@@ -0,0 +1,165 @@
+#!/usr/bin/env node
+
+const { program } = require("commander");
+const fs = require("fs-extra");
+const path = require("path");
+const chalk = require("chalk");
+const { execSync } = require("child_process");
+
+/* ------------------------------
+   Helper: get template path
+------------------------------- */
+function getTemplateFile(component) {
+  // Library template: src/templates/button/button.tsx
+  return path.join(
+    __dirname,
+    "../src/templates",
+    component,
+    component + ".tsx"
+  );
+}
+
+/* ------------------------------
+   Install dependencies in project
+------------------------------- */
+function installDependencies() {
+  try {
+    console.log(chalk.cyan("Installing dependencies: clsx, tailwind-merge..."));
+    execSync("npm install clsx tailwind-merge", { stdio: "inherit" });
+    console.log(chalk.green("✓ Dependencies installed"));
+  } catch (err) {
+    console.log(chalk.red("❌ Failed to install dependencies"));
+    console.error(err);
+  }
+}
+
+/* ------------------------------
+   Update tsconfig.json for absolute imports
+------------------------------- */
+function updateTsConfig() {
+  const tsconfigPath = path.join(process.cwd(), "tsconfig.json");
+
+  if (!fs.existsSync(tsconfigPath)) {
+    console.log(
+      chalk.yellow("⚠ tsconfig.json not found, skipping baseUrl setup.")
+    );
+    return;
+  }
+
+  const tsconfig = fs.readJsonSync(tsconfigPath);
+  tsconfig.compilerOptions = tsconfig.compilerOptions || {};
+  tsconfig.compilerOptions.baseUrl = "src";
+  tsconfig.compilerOptions.paths = tsconfig.compilerOptions.paths || {};
+  tsconfig.compilerOptions.paths["@utils/*"] = ["utils/*"];
+  tsconfig.compilerOptions.paths["@components/*"] = ["components/*"];
+
+  fs.writeJsonSync(tsconfigPath, tsconfig, { spaces: 2 });
+  console.log(
+    chalk.green(
+      "✓ tsconfig.json updated for absolute imports (@utils/*, @components/*)"
+    )
+  );
+}
+
+/* ------------------------------
+   Command: init
+------------------------------- */
+program
+  .command("init")
+  .description("Initialize NotionSoft-UI in your project")
+  .action(() => {
+    const cwd = process.cwd();
+    const configPath = path.join(cwd, ".notionsoft-ui.json");
+
+    if (fs.existsSync(configPath)) {
+      console.log(chalk.yellow("⚠ NotionSoft-UI already initialized."));
+      return;
+    }
+
+    // Create config
+    fs.writeFileSync(
+      configPath,
+      JSON.stringify({ componentDir: "src/components/notion-ui" }, null, 2)
+    );
+
+    // Ensure component folder
+    const componentDir = path.join(cwd, "src/components/notion-ui");
+    fs.ensureDirSync(componentDir);
+
+    // Create utils folder and cn helper
+    const utilsDir = path.join(cwd, "src/utils");
+    fs.ensureDirSync(utilsDir);
+    const cnPath = path.join(utilsDir, "cn.ts");
+
+    if (!fs.existsSync(cnPath)) {
+      fs.writeFileSync(
+        cnPath,
+        `import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: Parameters<typeof clsx>) {
+  return twMerge(clsx(...inputs));
+}`
+      );
+      console.log(chalk.green("✓ cn helper created at src/utils/cn.ts"));
+    }
+
+    // Install dependencies
+    installDependencies();
+
+    // Update tsconfig.json for absolute imports
+    updateTsConfig();
+
+    console.log(chalk.green("✓ NotionSoft-UI initialized and ready!"));
+  });
+
+/* ------------------------------
+   Command: add <component>
+------------------------------- */
+program
+  .command("add <component>")
+  .description("Install a NotionSoft-UI component")
+  .action((component) => {
+    const cwd = process.cwd();
+    const configFile = path.join(cwd, ".notionsoft-ui.json");
+
+    if (!fs.existsSync(configFile)) {
+      console.log(chalk.red("❌ Run `npx notionsoft-ui init` first."));
+      return;
+    }
+
+    const config = fs.readJSONSync(configFile);
+    const templateFile = getTemplateFile(component);
+
+    if (!fs.existsSync(templateFile)) {
+      console.log(chalk.red(`❌ Component '${component}' does not exist.`));
+      return;
+    }
+
+    // Copy as a flat file into user's project
+    const destFile = path.join(config.componentDir, component + ".tsx");
+    fs.ensureDirSync(config.componentDir);
+    fs.copyFileSync(templateFile, destFile);
+
+    console.log(
+      chalk.green(`✓ Installed ${component} component as ${destFile}`)
+    );
+  });
+
+/* ------------------------------
+   Command: list
+------------------------------- */
+program
+  .command("list")
+  .description("List available components")
+  .action(() => {
+    const templatesDir = path.join(__dirname, "../src/templates");
+    const components = fs.readdirSync(templatesDir).filter((folder) => {
+      const file = path.join(templatesDir, folder, folder + ".tsx");
+      return fs.existsSync(file);
+    });
+    console.log(chalk.cyan("Available components:"));
+    components.forEach((c) => console.log(" • " + c));
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "notionsoft-ui",
+  "version": "1.0.0",
+  "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
+  "bin": {
+    "notionsoft-ui": "./cli/index.cjs"
+  },
+  "author": "NotionSoft",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "tailwind",
+    "shadcn",
+    "installer",
+    "cli"
+  ],
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "clsx": "^2.1.1",
+    "commander": "^12.0.0",
+    "fs-extra": "^11.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}

package/src/templates/button/button.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/utils/cn";
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "primary" | "secondary";
+}
+
+const Button: React.FC<ButtonProps> = ({
+  variant = "default",
+  className,
+  ...props
+}) => {
+  return (
+    <button
+      className={cn(
+        "px-4 py-2 rounded-md font-medium transition-colors",
+        variant === "primary" && "bg-blue-500 text-white",
+        variant === "secondary" && "bg-gray-200 text-black",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+export default Button;

package/src/templates/card/card.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/utils/cn";
+import React from "react";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Card: React.FC<CardProps> = ({ className, children, ...props }) => {
+  return (
+    <div
+      className={cn(
+        "bg-card text-card-foreground border border-border rounded-lg p-4 shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

package/src/utils/cn.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = cn;
+var clsx_1 = require("clsx");
+var tailwind_merge_1 = require("tailwind-merge");
+/**
+ * Merge Tailwind classes intelligently
+ */
+function cn() {
+    var inputs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        inputs[_i] = arguments[_i];
+    }
+    return (0, tailwind_merge_1.twMerge)(clsx_1.clsx.apply(void 0, inputs));
+}

package/src/utils/cn.ts

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge Tailwind classes intelligently
+ */
+export function cn(...inputs: Parameters<typeof clsx>) {
+  return twMerge(clsx(...inputs));
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "types": ["react", "react-dom"],
+    "skipLibCheck": true,
+    "baseUrl": "src",
+    "ignoreDeprecations": "6.0",
+    "paths": {
+      "@/utils/*": ["utils/*"]
+    }
+  }
+}