modal-system 0.1.1 → 0.1.3

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 modal-system)");
 }
-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 "modal-system";
 
-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,21 @@ function getShadcnModal() {
 };
 `;
 }
-function getDaisyModal() {
-  return `export const ConfirmModal = ({ isOpen, onClose, data }) => {
-  if (!isOpen) return null;
+function getModalsIndexFile() {
+  return `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: 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. \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

@@ -22,7 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   ModalContext: () => ModalContext,
   ModalProvider: () => ModalProvider,
-  useBaseModal: () => useBaseModal
+  useModal: () => useModal
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -42,8 +42,7 @@ var ModalProvider = ({
     setActiveModal(null);
   }, []);
   const value = (0, import_react.useMemo)(() => ({ openModal, closeModal }), [openModal, closeModal]);
-  const currentConfig = activeModal ? modals[activeModal.name] : null;
-  const Component = currentConfig?.component;
+  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)(
@@ -59,7 +58,7 @@ var ModalProvider = ({
 
 // src/hooks/use-modal.ts
 var import_react2 = require("react");
-var useBaseModal = () => {
+var useModal = () => {
   const ctx = (0, import_react2.useContext)(ModalContext);
   if (!ctx) throw new Error("useModal must be used inside ModalProvider");
   return ctx;
@@ -68,5 +67,5 @@ var useBaseModal = () => {
 0 && (module.exports = {
   ModalContext,
   ModalProvider,
-  useBaseModal
+  useModal
 });

package/dist/index.d.cts

@@ -6,22 +6,24 @@ type ModalComponentProps<T = any> = {
     onClose: () => void;
     data: T;
 };
-type ModalConfig<T = any> = {
-    component: React.ComponentType<ModalComponentProps<T>>;
-};
-type ModalsRegistry = Record<string, ModalConfig<any>>;
-type InferModalData<T> = T extends ModalConfig<infer D> ? D : never;
+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 = any> {
-    openModal: <K extends keyof T>(name: K, data: InferModalData<T[K]>) => void;
+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>({ children, modals, }: {
+declare const ModalProvider: <T extends ModalsRegistry = AnyModalsRegistry>({ children, modals, }: {
     children: React.ReactNode;
     modals: T;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const useBaseModal: <T extends ModalsRegistry>() => ModalContextType<T>;
+declare const useModal: () => ModalContextType<ModalsRegistry>;
 
-export { type InferModalData, type ModalComponentProps, type ModalConfig, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, useBaseModal };
+export { type AnyModalsRegistry, type InferModalData, type ModalComponentProps, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, type Register, useModal };

package/dist/index.d.ts

@@ -6,22 +6,24 @@ type ModalComponentProps<T = any> = {
     onClose: () => void;
     data: T;
 };
-type ModalConfig<T = any> = {
-    component: React.ComponentType<ModalComponentProps<T>>;
-};
-type ModalsRegistry = Record<string, ModalConfig<any>>;
-type InferModalData<T> = T extends ModalConfig<infer D> ? D : never;
+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 = any> {
-    openModal: <K extends keyof T>(name: K, data: InferModalData<T[K]>) => void;
+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>({ children, modals, }: {
+declare const ModalProvider: <T extends ModalsRegistry = AnyModalsRegistry>({ children, modals, }: {
     children: React.ReactNode;
     modals: T;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const useBaseModal: <T extends ModalsRegistry>() => ModalContextType<T>;
+declare const useModal: () => ModalContextType<ModalsRegistry>;
 
-export { type InferModalData, type ModalComponentProps, type ModalConfig, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, useBaseModal };
+export { type AnyModalsRegistry, type InferModalData, type ModalComponentProps, ModalContext, type ModalContextType, ModalProvider, type ModalsRegistry, type Register, useModal };

package/dist/index.js

@@ -14,8 +14,7 @@ var ModalProvider = ({
     setActiveModal(null);
   }, []);
   const value = useMemo(() => ({ openModal, closeModal }), [openModal, closeModal]);
-  const currentConfig = activeModal ? modals[activeModal.name] : null;
-  const Component = currentConfig?.component;
+  const Component = activeModal ? modals[activeModal.name] : null;
   return /* @__PURE__ */ jsxs(ModalContext.Provider, { value, children: [
     children,
     Component && /* @__PURE__ */ jsx(
@@ -31,7 +30,7 @@ var ModalProvider = ({
 
 // src/hooks/use-modal.ts
 import { useContext } from "react";
-var useBaseModal = () => {
+var useModal = () => {
   const ctx = useContext(ModalContext);
   if (!ctx) throw new Error("useModal must be used inside ModalProvider");
   return ctx;
@@ -39,5 +38,5 @@ var useBaseModal = () => {
 export {
   ModalContext,
   ModalProvider,
-  useBaseModal
+  useModal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "modal-system",
-    "version": "0.1.1",
+    "version": "0.1.3",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",