modal-system 0.1.4 → 2.0.0

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import { init } from "./init";
+const command = process.argv[2];
+if (command === "init") {
+    init();
+}
+else {
+    console.log("Usage: modal-system init");
+}

package/dist/cli/init.d.ts

@@ -0,0 +1 @@
+export declare function init(): Promise<void>;

package/dist/cli/init.js

@@ -0,0 +1,52 @@
+import fs from "fs";
+import path from "path";
+import inquirer from "inquirer";
+import { shadcnTemplate } from "../templates/shadcn";
+import { daisyTemplate } from "../templates/daisy";
+export async function init() {
+    const { ui } = await inquirer.prompt([
+        {
+            type: "list",
+            name: "ui",
+            message: "Choose UI library:",
+            choices: ["shadcn", "daisy"],
+        },
+    ]);
+    const baseDir = path.resolve(process.cwd(), "modals");
+    if (!fs.existsSync(baseDir)) {
+        fs.mkdirSync(baseDir);
+    }
+    // modals.ts
+    fs.writeFileSync(path.join(baseDir, "modals.ts"), `import { ExampleModal } from "./ExampleModal";
+
+export const MODALS = [
+    {
+        id: "example",
+        component: ExampleModal,
+    },
+] as const;
+`);
+    // types.ts
+    fs.writeFileSync(path.join(baseDir, "types.ts"), `import { ReactNode } from "react";
+
+export enum ModalType {
+    EXAMPLE = "example",
+}
+
+export type ModalDataMap = {
+    [ModalType.EXAMPLE]: {
+        title?: string;
+    };
+};
+
+export type ModalProps<T extends ModalType = ModalType> = {
+    id: T;
+    data?: ModalDataMap[T];
+    isOpened: boolean;
+    onClose: () => void;
+};
+`);
+    // modal example
+    fs.writeFileSync(path.join(baseDir, "ExampleModal.tsx"), ui === "shadcn" ? shadcnTemplate : daisyTemplate);
+    console.log("✅ Modal system initialized!");
+}

package/dist/core/createModalSystem.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+export type ModalDefinition<T extends string, D> = {
+    id: T;
+    component: React.FC<any>;
+};
+export declare function createModalSystem<const TModals extends readonly ModalDefinition<string, any>[]>(modals: TModals): {
+    ModalProvider: ({ children }: {
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useModal: () => {
+        isOpened: boolean;
+        activeModal?: keyof { [K in TModals[number] as K["id"]]: Extract<TModals[number], {
+            id: K["id"];
+        }> extends ModalDefinition<any, infer D> ? D : never; };
+        data?: any;
+    } & {
+        openModal: <K_1 extends keyof { [K in TModals[number] as K["id"]]: Extract<TModals[number], {
+            id: K["id"];
+        }> extends ModalDefinition<any, infer D> ? D : never; }>(id: K_1, data?: { [K in TModals[number] as K["id"]]: Extract<TModals[number], {
+            id: K["id"];
+        }> extends ModalDefinition<any, infer D> ? D : never; }[K_1]) => void;
+        closeModal: () => void;
+    };
+};

package/dist/core/createModalSystem.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+export function createModalSystem(modals) {
+    const ModalContext = createContext(null);
+    const ModalProvider = ({ children }) => {
+        const [state, setState] = useState({
+            isOpened: false,
+        });
+        const openModal = (id, data) => {
+            setState({
+                isOpened: true,
+                activeModal: id,
+                data,
+            });
+        };
+        const closeModal = () => {
+            setState({
+                isOpened: false,
+                activeModal: undefined,
+                data: undefined,
+            });
+        };
+        return (_jsxs(ModalContext.Provider, { value: { ...state, openModal, closeModal }, children: [children, modals.map((modal) => {
+                    const Component = modal.component;
+                    return (_jsx(Component, { isOpened: state.activeModal === modal.id, data: state.data, onClose: closeModal }, modal.id));
+                })] }));
+    };
+    const useModal = () => {
+        const ctx = useContext(ModalContext);
+        if (!ctx) {
+            throw new Error("useModal must be used inside ModalProvider");
+        }
+        return ctx;
+    };
+    return { ModalProvider, useModal };
+}

package/dist/index.d.ts

@@ -1,29 +1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-type ModalComponentProps<T = any> = {
-    isOpen: boolean;
-    onClose: () => void;
-    data: T;
-};
-type ModalsRegistry = Record<string, React.ComponentType<ModalComponentProps<any>>>;
-type InferModalData<T> = T extends React.ComponentType<ModalComponentProps<infer D>> ? D : never;
-interface Register {
-}
-type AnyModalsRegistry = Register extends {
-    modals: infer M;
-} ? M extends ModalsRegistry ? M : ModalsRegistry : ModalsRegistry;
-
-interface ModalContextType<T extends ModalsRegistry = AnyModalsRegistry> {
-    openModal: <K extends keyof T>(name: K, ...args: InferModalData<T[K]> extends undefined ? [data?: undefined] : [data: InferModalData<T[K]>]) => void;
-    closeModal: () => void;
-}
-declare const ModalContext: React.Context<ModalContextType<any> | null>;
-declare const ModalProvider: <T extends ModalsRegistry = AnyModalsRegistry>({ children, modals, }: {
-    children: React.ReactNode;
-    modals: T;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const useModal: () => ModalContextType<ModalsRegistry>;
-
-export { type AnyModalsRegistry, type InferModalData, type ModalComponentProps, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, type Register, useModal };
+export { createModalSystem } from "./core/createModalSystem";

package/dist/index.js

@@ -1,42 +1 @@
-// src/provider/ModalProvider.tsx
-import { createContext, useState, useCallback, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ModalContext = createContext(null);
-var ModalProvider = ({
-  children,
-  modals
-}) => {
-  const [activeModal, setActiveModal] = useState(null);
-  const openModal = useCallback((name, data) => {
-    setActiveModal({ name, data });
-  }, []);
-  const closeModal = useCallback(() => {
-    setActiveModal(null);
-  }, []);
-  const value = useMemo(() => ({ openModal, closeModal }), [openModal, closeModal]);
-  const Component = activeModal ? modals[activeModal.name] : null;
-  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value, children: [
-    children,
-    Component && /* @__PURE__ */ jsx(
-      Component,
-      {
-        isOpen: true,
-        onClose: closeModal,
-        data: activeModal?.data
-      }
-    )
-  ] });
-};
-
-// 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
-};
+export { createModalSystem } from "./core/createModalSystem";

package/dist/templates/daisy.d.ts

@@ -0,0 +1 @@
+export declare const daisyTemplate = "\nimport { ModalProps } from \"./types\";\n\nexport const ExampleModal = ({\n    isOpened,\n    onClose,\n    data\n}: ModalProps) => {\n    return (\n        <dialog className={\"modal \" + (isOpened ? \"modal-open\" : \"\")}>\n            <div className=\"modal-box\">\n                <h3>{data?.title}</h3>\n\n                <div className=\"modal-action\">\n                    <button className=\"btn\" onClick={onClose}>\n                        Close\n                    </button>\n                </div>\n            </div>\n        </dialog>\n    );\n};\n";

package/dist/templates/daisy.js

@@ -0,0 +1,23 @@
+export const daisyTemplate = `
+import { ModalProps } from "./types";
+
+export const ExampleModal = ({
+    isOpened,
+    onClose,
+    data
+}: ModalProps) => {
+    return (
+        <dialog className={"modal " + (isOpened ? "modal-open" : "")}>
+            <div className="modal-box">
+                <h3>{data?.title}</h3>
+
+                <div className="modal-action">
+                    <button className="btn" onClick={onClose}>
+                        Close
+                    </button>
+                </div>
+            </div>
+        </dialog>
+    );
+};
+`;

package/dist/templates/shadcn.d.ts

@@ -0,0 +1 @@
+export declare const shadcnTemplate = "\nimport { ModalProps } from \"./types\";\n\nexport const ExampleModal = ({\n    isOpened,\n    onClose,\n    data\n}: ModalProps) => {\n    if (!isOpened) return null;\n\n    return (\n        <div className=\"fixed inset-0 flex items-center justify-center bg-black/50\">\n            <div className=\"bg-white p-6 rounded-xl\">\n                <h2>{data?.title}</h2>\n\n                <button onClick={onClose}>Close</button>\n            </div>\n        </div>\n    );\n};\n";

package/dist/templates/shadcn.js

@@ -0,0 +1,21 @@
+export const shadcnTemplate = `
+import { ModalProps } from "./types";
+
+export const ExampleModal = ({
+    isOpened,
+    onClose,
+    data
+}: ModalProps) => {
+    if (!isOpened) return null;
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center bg-black/50">
+            <div className="bg-white p-6 rounded-xl">
+                <h2>{data?.title}</h2>
+
+                <button onClick={onClose}>Close</button>
+            </div>
+        </div>
+    );
+};
+`;

package/package.json

@@ -1,28 +1,28 @@
 {
     "name": "modal-system",
-    "version": "0.1.4",
+    "version": "2.0.0",
+    "description": "Flexible modal system with CLI and type-safe API",
     "type": "module",
     "main": "dist/index.js",
+    "module": "dist/index.js",
     "types": "dist/index.d.ts",
     "bin": {
-        "modal-system": "dist/cli.js"
+        "modal-system": "dist/cli/index.js"
+    },
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc -w"
     },
     "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"
+    "dependencies": {
+        "inquirer": "^13.3.2",
+        "react": "^18.0.0"
     },
     "devDependencies": {
+        "@types/node": "^20.0.0",
         "@types/react": "^18.0.0",
-        "tsup": "^8.0.0",
         "typescript": "^5.0.0"
-    },
-    "dependencies": {
-        "prompts": "^2.4.2"
     }
 }

package/dist/cli.js

@@ -1,94 +0,0 @@
-#!/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 \u0434\u043B\u044F \u0433\u0435\u043D\u0435\u0440\u0430\u0446\u0438\u0438 \u043C\u043E\u0434\u0430\u043B\u043E\u043A:",
-    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"),
-    getModalTemplate(ui)
-  );
-  fs.writeFileSync(
-    path.join(targetDir, "index.ts"),
-    getModalsIndexFile()
-  );
-  console.log("");
-  console.log("\u2705 \u041F\u0430\u043F\u043A\u0430 'modals' \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0441\u043E\u0437\u0434\u0430\u043D\u0430!");
-  console.log("\u{1F680} \u0422\u0435\u043F\u0435\u0440\u044C:");
-  console.log("1. \u041E\u0431\u0435\u0440\u043D\u0438 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0432 <ModalProvider modals={MODALS}> (\u0438\u043C\u043F\u043E\u0440\u0442 \u0438\u0437 ./modals)");
-  console.log("2. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439 const { openModal } = useModal() (\u0438\u043C\u043F\u043E\u0440\u0442 \u0438\u0437 modal-system)");
-}
-function getModalTemplate(ui) {
-  const isShadcn = ui === "shadcn";
-  const containerClass = isShadcn ? "fixed inset-0 bg-black/50 flex items-center justify-center z-50" : "modal modal-open";
-  const boxClass = isShadcn ? "bg-white rounded-xl p-6 max-w-sm w-full shadow-lg" : "modal-box";
-  const buttonClass = isShadcn ? "px-4 py-2 rounded border" : "btn";
-  const primaryClass = isShadcn ? "px-4 py-2 rounded bg-blue-600 text-white" : "btn btn-primary";
-  return `import { ModalComponentProps } from "modal-system";
-
-// \u041E\u043F\u0438\u0441\u044B\u0432\u0430\u0435\u043C \u0442\u0438\u043F\u044B \u0434\u0430\u043D\u043D\u044B\u0445, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043D\u0443\u0436\u043D\u044B \u044D\u0442\u043E\u0439 \u043C\u043E\u0434\u0430\u043B\u043A\u0435
-export interface ConfirmData {
-  title: string;
-  onConfirm: () => void;
-}
-
-export const ConfirmModal = ({ isOpen, onClose, data }: ModalComponentProps<ConfirmData>) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="${containerClass}">
-      <div className="${boxClass}">
-        <h3 className="font-bold text-lg">{data.title}</h3>
-        
-        <div className="flex justify-end gap-2 mt-6">
-          <button className="${buttonClass}" onClick={onClose}>
-            \u041E\u0442\u043C\u0435\u043D\u0430
-          </button>
-          <button 
-            className="${primaryClass}" 
-            onClick={() => {
-              data.onConfirm();
-              onClose();
-            }}
-          >
-            \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-`;
-}
-function getModalsIndexFile() {
-  return `import { ConfirmModal } from "./confirm-modal";
-
-// 1. \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0432\u0441\u0435 \u043C\u043E\u0434\u0430\u043B\u043A\u0438 \u0437\u0434\u0435\u0441\u044C
-export const MODALS = {
-  confirm: ConfirmModal,
-  // \u0421\u044E\u0434\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C \u0431\u0443\u0434\u0435\u0442 \u0434\u043E\u0431\u0430\u0432\u043B\u044F\u0442\u044C \u043D\u043E\u0432\u044B\u0435 \u043C\u043E\u0434\u0430\u043B\u043A\u0438
-} as const;
-
-// 2. \u0414\u043E\u0431\u0430\u0432\u043B\u044F\u0435\u043C \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u0443\u044E \u0442\u0438\u043F\u0438\u0437\u0430\u0446\u0438\u044E \u0434\u043B\u044F \u0430\u0432\u0442\u043E\u043A\u043E\u043C\u043F\u043B\u0438\u0442\u0430
-declare module "modal-system" {
-  interface Register {
-    modals: typeof MODALS;
-  }
-}
-`;
-}
-init();

package/dist/index.cjs

@@ -1,71 +0,0 @@
-"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 = (0, import_react.useCallback)((name, data) => {
-    setActiveModal({ name, data });
-  }, []);
-  const closeModal = (0, import_react.useCallback)(() => {
-    setActiveModal(null);
-  }, []);
-  const value = (0, import_react.useMemo)(() => ({ openModal, closeModal }), [openModal, closeModal]);
-  const Component = activeModal ? modals[activeModal.name] : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalContext.Provider, { value, children: [
-    children,
-    Component && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Component,
-      {
-        isOpen: true,
-        onClose: closeModal,
-        data: activeModal?.data
-      }
-    )
-  ] });
-};
-
-// 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

@@ -1,29 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
-
-type ModalComponentProps<T = any> = {
-    isOpen: boolean;
-    onClose: () => void;
-    data: T;
-};
-type ModalsRegistry = Record<string, React.ComponentType<ModalComponentProps<any>>>;
-type InferModalData<T> = T extends React.ComponentType<ModalComponentProps<infer D>> ? D : never;
-interface Register {
-}
-type AnyModalsRegistry = Register extends {
-    modals: infer M;
-} ? M extends ModalsRegistry ? M : ModalsRegistry : ModalsRegistry;
-
-interface ModalContextType<T extends ModalsRegistry = AnyModalsRegistry> {
-    openModal: <K extends keyof T>(name: K, ...args: InferModalData<T[K]> extends undefined ? [data?: undefined] : [data: InferModalData<T[K]>]) => void;
-    closeModal: () => void;
-}
-declare const ModalContext: React.Context<ModalContextType<any> | null>;
-declare const ModalProvider: <T extends ModalsRegistry = AnyModalsRegistry>({ children, modals, }: {
-    children: React.ReactNode;
-    modals: T;
-}) => react_jsx_runtime.JSX.Element;
-
-declare const useModal: () => ModalContextType<ModalsRegistry>;
-
-export { type AnyModalsRegistry, type InferModalData, type ModalComponentProps, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, type Register, useModal };