modal-system 0.1.0

package/dist/cli.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+// bin/cli.ts
+import prompts from "prompts";
+import fs from "fs";
+import path from "path";
+async function init() {
+  const { ui } = await prompts({
+    type: "select",
+    name: "ui",
+    message: "\u0412\u044B\u0431\u0435\u0440\u0438 UI \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0443:",
+    choices: [
+      { title: "shadcn", value: "shadcn" },
+      { title: "daisyUI", value: "daisy" }
+    ]
+  });
+  const targetDir = path.join(process.cwd(), "modals");
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir);
+  }
+  fs.writeFileSync(
+    path.join(targetDir, "confirm-modal.tsx"),
+    ui === "shadcn" ? getShadcnModal() : getDaisyModal()
+  );
+  fs.writeFileSync(
+    path.join(targetDir, "modals.ts"),
+    getModalsFile()
+  );
+  console.log("\u2705 modals folder created");
+}
+function getModalsFile() {
+  return `import { ConfirmModal } from "./confirm-modal";
+
+export const MODALS = {
+  confirm: {
+    component: ConfirmModal,
+  },
+} as const;
+`;
+}
+function getShadcnModal() {
+  return `export const ConfirmModal = ({ isOpen, onClose, data }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
+      <div className="bg-white rounded-xl p-6">
+        <h2 className="text-lg font-bold">{data?.title}</h2>
+
+        <div className="flex gap-2 mt-4">
+          <button onClick={onClose}>Cancel</button>
+          <button onClick={data?.onConfirm}>Confirm</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+`;
+}
+function getDaisyModal() {
+  return `export const ConfirmModal = ({ isOpen, onClose, data }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal modal-open">
+      <div className="modal-box">
+        <h3 className="font-bold text-lg">{data?.title}</h3>
+
+        <div className="modal-action">
+          <button className="btn" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={data?.onConfirm}>
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+`;
+}
+init();

package/dist/index.cjs

@@ -0,0 +1,72 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ModalContext: () => ModalContext,
+  ModalProvider: () => ModalProvider,
+  useModal: () => useModal
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider/ModalProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModalContext = (0, import_react.createContext)(null);
+var ModalProvider = ({
+  children,
+  modals
+}) => {
+  const [activeModal, setActiveModal] = (0, import_react.useState)(null);
+  const openModal = (name, data) => {
+    setActiveModal({ name, data });
+  };
+  const closeModal = () => {
+    setActiveModal(null);
+  };
+  const CurrentModal = activeModal && modals[activeModal.name]?.component;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalContext.Provider, { value: { openModal, closeModal }, children: [
+    children,
+    CurrentModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CurrentModal,
+      {
+        isOpen: true,
+        data: activeModal.data,
+        onClose: closeModal
+      }
+    )
+  ] });
+};
+
+// src/hooks/use-modal.ts
+var import_react2 = require("react");
+var useModal = () => {
+  const ctx = (0, import_react2.useContext)(ModalContext);
+  if (!ctx) {
+    throw new Error("useModal must be used inside ModalProvider");
+  }
+  return ctx;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalContext,
+  ModalProvider,
+  useModal
+});

package/dist/index.d.cts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ModalComponentProps<T = any> = {
+    isOpen: boolean;
+    onClose: () => void;
+    data?: T;
+};
+type ModalConfig = {
+    component: React.FC<any>;
+};
+type ModalsMap = Record<string, ModalConfig>;
+
+declare const ModalContext: React.Context<{
+    openModal: (name: string, data?: any) => void;
+    closeModal: () => void;
+} | null>;
+declare const ModalProvider: ({ children, modals, }: {
+    children: React.ReactNode;
+    modals: ModalsMap;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const useModal: () => {
+    openModal: (name: string, data?: any) => void;
+    closeModal: () => void;
+};
+
+export { type ModalComponentProps, type ModalConfig, ModalContext, ModalProvider, type ModalsMap, useModal };

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ModalComponentProps<T = any> = {
+    isOpen: boolean;
+    onClose: () => void;
+    data?: T;
+};
+type ModalConfig = {
+    component: React.FC<any>;
+};
+type ModalsMap = Record<string, ModalConfig>;
+
+declare const ModalContext: React.Context<{
+    openModal: (name: string, data?: any) => void;
+    closeModal: () => void;
+} | null>;
+declare const ModalProvider: ({ children, modals, }: {
+    children: React.ReactNode;
+    modals: ModalsMap;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const useModal: () => {
+    openModal: (name: string, data?: any) => void;
+    closeModal: () => void;
+};
+
+export { type ModalComponentProps, type ModalConfig, ModalContext, ModalProvider, type ModalsMap, useModal };

package/dist/index.js

@@ -0,0 +1,43 @@
+// src/provider/ModalProvider.tsx
+import { createContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalContext = createContext(null);
+var ModalProvider = ({
+  children,
+  modals
+}) => {
+  const [activeModal, setActiveModal] = useState(null);
+  const openModal = (name, data) => {
+    setActiveModal({ name, data });
+  };
+  const closeModal = () => {
+    setActiveModal(null);
+  };
+  const CurrentModal = activeModal && modals[activeModal.name]?.component;
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { openModal, closeModal }, children: [
+    children,
+    CurrentModal && /* @__PURE__ */ jsx(
+      CurrentModal,
+      {
+        isOpen: true,
+        data: activeModal.data,
+        onClose: closeModal
+      }
+    )
+  ] });
+};
+
+// src/hooks/use-modal.ts
+import { useContext } from "react";
+var useModal = () => {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("useModal must be used inside ModalProvider");
+  }
+  return ctx;
+};
+export {
+  ModalContext,
+  ModalProvider,
+  useModal
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "modal-system",
+    "version": "0.1.0",
+    "type": "module",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "bin": {
+        "modal-genius": "dist/cli.js"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup src/index.ts --format esm,cjs --dts && tsup bin/cli.ts --format esm --out-dir dist",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "react": "^18 || ^19"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.0",
+        "tsup": "^8.0.0",
+        "typescript": "^5.0.0"
+    },
+    "dependencies": {
+        "prompts": "^2.4.2"
+    }
+}