modal-system 0.1.0 → 0.1.2

package/dist/cli.js

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-
 // bin/cli.ts
 import prompts from "prompts";
 import fs from "fs";
@@ -8,7 +6,7 @@ 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:",
+    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" }
@@ -20,36 +18,53 @@ async function init() {
   }
   fs.writeFileSync(
     path.join(targetDir, "confirm-modal.tsx"),
-    ui === "shadcn" ? getShadcnModal() : getDaisyModal()
+    getModalTemplate(ui)
   );
   fs.writeFileSync(
-    path.join(targetDir, "modals.ts"),
-    getModalsFile()
+    path.join(targetDir, "index.ts"),
+    getModalsIndexFile()
   );
-  console.log("\u2705 modals folder created");
+  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 ./modals \u0434\u043B\u044F \u0430\u0432\u0442\u043E\u043A\u043E\u043C\u043F\u043B\u0438\u0442\u0430)");
 }
-function getModalsFile() {
-  return `import { ConfirmModal } from "./confirm-modal";
+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 "your-modal-library";
 
-export const MODALS = {
-  confirm: {
-    component: ConfirmModal,
-  },
-} as const;
-`;
+// \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;
 }
-function getShadcnModal() {
-  return `export const ConfirmModal = ({ isOpen, onClose, data }) => {
+
+export const ConfirmModal = ({ isOpen, onClose, data }: ModalComponentProps<ConfirmData>) => {
   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 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>
@@ -57,25 +72,24 @@ function getShadcnModal() {
 };
 `;
 }
-function getDaisyModal() {
-  return `export const ConfirmModal = ({ isOpen, onClose, data }) => {
-  if (!isOpen) return null;
+function getModalsIndexFile() {
+  return `import { useModal as useBaseModal } from "your-modal-library";
+import { ConfirmModal } from "./confirm-modal";
 
-  return (
-    <div className="modal modal-open">
-      <div className="modal-box">
-        <h3 className="font-bold text-lg">{data?.title}</h3>
+// 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: {
+    component: 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;
 
-        <div className="modal-action">
-          <button className="btn" onClick={onClose}>Cancel</button>
-          <button className="btn btn-primary" onClick={data?.onConfirm}>
-            Confirm
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
+// 2. \u0421\u043E\u0437\u0434\u0430\u0435\u043C \u0442\u0438\u043F \u043D\u0430 \u043E\u0441\u043D\u043E\u0432\u0435 \u043A\u043E\u043D\u0444\u0438\u0433\u0430
+export type AppModals = typeof MODALS;
+
+// 3. \u042D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u0443\u0435\u043C \u0442\u0438\u043F\u0438\u0437\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0445\u0443\u043A \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0432 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0438
+// \u0422\u0435\u043F\u0435\u0440\u044C openModal \u0431\u0443\u0434\u0435\u0442 \u0437\u043D\u0430\u0442\u044C \u0432\u0441\u0435 \u043A\u043B\u044E\u0447\u0438 \u0438 \u0442\u0438\u043F\u044B \u0434\u0430\u043D\u043D\u044B\u0445 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438
+export const useModal = () => useBaseModal<AppModals>();
 `;
 }
 init();

package/dist/index.cjs

@@ -22,7 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   ModalContext: () => ModalContext,
   ModalProvider: () => ModalProvider,
-  useModal: () => useModal
+  useBaseModal: () => useBaseModal
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -35,21 +35,23 @@ var ModalProvider = ({
   modals
 }) => {
   const [activeModal, setActiveModal] = (0, import_react.useState)(null);
-  const openModal = (name, data) => {
+  const openModal = (0, import_react.useCallback)((name, data) => {
     setActiveModal({ name, data });
-  };
-  const closeModal = () => {
+  }, []);
+  const closeModal = (0, import_react.useCallback)(() => {
     setActiveModal(null);
-  };
-  const CurrentModal = activeModal && modals[activeModal.name]?.component;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalContext.Provider, { value: { openModal, closeModal }, children: [
+  }, []);
+  const value = (0, import_react.useMemo)(() => ({ openModal, closeModal }), [openModal, closeModal]);
+  const currentConfig = activeModal ? modals[activeModal.name] : null;
+  const Component = currentConfig?.component;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalContext.Provider, { value, children: [
     children,
-    CurrentModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      CurrentModal,
+    Component && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
       {
         isOpen: true,
-        data: activeModal.data,
-        onClose: closeModal
+        onClose: closeModal,
+        data: activeModal?.data
       }
     )
   ] });
@@ -57,16 +59,14 @@ var ModalProvider = ({
 
 // src/hooks/use-modal.ts
 var import_react2 = require("react");
-var useModal = () => {
+var useBaseModal = () => {
   const ctx = (0, import_react2.useContext)(ModalContext);
-  if (!ctx) {
-    throw new Error("useModal must be used inside ModalProvider");
-  }
+  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
+  useBaseModal
 });

package/dist/index.d.cts

@@ -4,25 +4,24 @@ import React from 'react';
 type ModalComponentProps<T = any> = {
     isOpen: boolean;
     onClose: () => void;
-    data?: T;
+    data: T;
 };
-type ModalConfig = {
-    component: React.FC<any>;
+type ModalConfig<T = any> = {
+    component: React.ComponentType<ModalComponentProps<T>>;
 };
-type ModalsMap = Record<string, ModalConfig>;
+type ModalsRegistry = Record<string, ModalConfig<any>>;
+type InferModalData<T> = T extends ModalConfig<infer D> ? D : never;
 
-declare const ModalContext: React.Context<{
-    openModal: (name: string, data?: any) => void;
+interface ModalContextType<T extends ModalsRegistry = any> {
+    openModal: <K extends keyof T>(name: K, data: InferModalData<T[K]>) => void;
     closeModal: () => void;
-} | null>;
-declare const ModalProvider: ({ children, modals, }: {
+}
+declare const ModalContext: React.Context<ModalContextType<any> | null>;
+declare const ModalProvider: <T extends ModalsRegistry>({ children, modals, }: {
     children: React.ReactNode;
-    modals: ModalsMap;
+    modals: T;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const useModal: () => {
-    openModal: (name: string, data?: any) => void;
-    closeModal: () => void;
-};
+declare const useBaseModal: <T extends ModalsRegistry>() => ModalContextType<T>;
 
-export { type ModalComponentProps, type ModalConfig, ModalContext, ModalProvider, type ModalsMap, useModal };
+export { type InferModalData, type ModalComponentProps, type ModalConfig, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, useBaseModal };

package/dist/index.d.ts

@@ -4,25 +4,24 @@ import React from 'react';
 type ModalComponentProps<T = any> = {
     isOpen: boolean;
     onClose: () => void;
-    data?: T;
+    data: T;
 };
-type ModalConfig = {
-    component: React.FC<any>;
+type ModalConfig<T = any> = {
+    component: React.ComponentType<ModalComponentProps<T>>;
 };
-type ModalsMap = Record<string, ModalConfig>;
+type ModalsRegistry = Record<string, ModalConfig<any>>;
+type InferModalData<T> = T extends ModalConfig<infer D> ? D : never;
 
-declare const ModalContext: React.Context<{
-    openModal: (name: string, data?: any) => void;
+interface ModalContextType<T extends ModalsRegistry = any> {
+    openModal: <K extends keyof T>(name: K, data: InferModalData<T[K]>) => void;
     closeModal: () => void;
-} | null>;
-declare const ModalProvider: ({ children, modals, }: {
+}
+declare const ModalContext: React.Context<ModalContextType<any> | null>;
+declare const ModalProvider: <T extends ModalsRegistry>({ children, modals, }: {
     children: React.ReactNode;
-    modals: ModalsMap;
+    modals: T;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const useModal: () => {
-    openModal: (name: string, data?: any) => void;
-    closeModal: () => void;
-};
+declare const useBaseModal: <T extends ModalsRegistry>() => ModalContextType<T>;
 
-export { type ModalComponentProps, type ModalConfig, ModalContext, ModalProvider, type ModalsMap, useModal };
+export { type InferModalData, type ModalComponentProps, type ModalConfig, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, useBaseModal };

package/dist/index.js

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

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "modal-system",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "bin": {
-        "modal-genius": "dist/cli.js"
+        "modal-system": "dist/cli.js"
     },
     "files": [
         "dist"
@@ -25,4 +25,4 @@
     "dependencies": {
         "prompts": "^2.4.2"
     }
-}
+}