modal-system 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/cli.js +55 -41
  2. package/package.json +1 -1
package/dist/cli.js CHANGED
@@ -1,5 +1,3 @@
1
- #!/usr/bin/env node
2
-
3
1
  // bin/cli.ts
4
2
  import prompts from "prompts";
5
3
  import fs from "fs";
@@ -8,7 +6,7 @@ async function init() {
8
6
  const { ui } = await prompts({
9
7
  type: "select",
10
8
  name: "ui",
11
- message: "\u0412\u044B\u0431\u0435\u0440\u0438 UI \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0443:",
9
+ 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:",
12
10
  choices: [
13
11
  { title: "shadcn", value: "shadcn" },
14
12
  { title: "daisyUI", value: "daisy" }
@@ -20,36 +18,53 @@ async function init() {
20
18
  }
21
19
  fs.writeFileSync(
22
20
  path.join(targetDir, "confirm-modal.tsx"),
23
- ui === "shadcn" ? getShadcnModal() : getDaisyModal()
21
+ getModalTemplate(ui)
24
22
  );
25
23
  fs.writeFileSync(
26
- path.join(targetDir, "modals.ts"),
27
- getModalsFile()
24
+ path.join(targetDir, "index.ts"),
25
+ getModalsIndexFile()
28
26
  );
29
- console.log("\u2705 modals folder created");
27
+ console.log("");
28
+ console.log("\u2705 \u041F\u0430\u043F\u043A\u0430 'modals' \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0441\u043E\u0437\u0434\u0430\u043D\u0430!");
29
+ console.log("\u{1F680} \u0422\u0435\u043F\u0435\u0440\u044C:");
30
+ 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)");
31
+ 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)");
30
32
  }
31
- function getModalsFile() {
32
- return `import { ConfirmModal } from "./confirm-modal";
33
+ function getModalTemplate(ui) {
34
+ const isShadcn = ui === "shadcn";
35
+ const containerClass = isShadcn ? "fixed inset-0 bg-black/50 flex items-center justify-center z-50" : "modal modal-open";
36
+ const boxClass = isShadcn ? "bg-white rounded-xl p-6 max-w-sm w-full shadow-lg" : "modal-box";
37
+ const buttonClass = isShadcn ? "px-4 py-2 rounded border" : "btn";
38
+ const primaryClass = isShadcn ? "px-4 py-2 rounded bg-blue-600 text-white" : "btn btn-primary";
39
+ return `import { ModalComponentProps } from "your-modal-library";
33
40
 
34
- export const MODALS = {
35
- confirm: {
36
- component: ConfirmModal,
37
- },
38
- } as const;
39
- `;
41
+ // \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
42
+ export interface ConfirmData {
43
+ title: string;
44
+ onConfirm: () => void;
40
45
  }
41
- function getShadcnModal() {
42
- return `export const ConfirmModal = ({ isOpen, onClose, data }) => {
46
+
47
+ export const ConfirmModal = ({ isOpen, onClose, data }: ModalComponentProps<ConfirmData>) => {
43
48
  if (!isOpen) return null;
44
49
 
45
50
  return (
46
- <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
47
- <div className="bg-white rounded-xl p-6">
48
- <h2 className="text-lg font-bold">{data?.title}</h2>
49
-
50
- <div className="flex gap-2 mt-4">
51
- <button onClick={onClose}>Cancel</button>
52
- <button onClick={data?.onConfirm}>Confirm</button>
51
+ <div className="${containerClass}">
52
+ <div className="${boxClass}">
53
+ <h3 className="font-bold text-lg">{data.title}</h3>
54
+
55
+ <div className="flex justify-end gap-2 mt-6">
56
+ <button className="${buttonClass}" onClick={onClose}>
57
+ \u041E\u0442\u043C\u0435\u043D\u0430
58
+ </button>
59
+ <button
60
+ className="${primaryClass}"
61
+ onClick={() => {
62
+ data.onConfirm();
63
+ onClose();
64
+ }}
65
+ >
66
+ \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C
67
+ </button>
53
68
  </div>
54
69
  </div>
55
70
  </div>
@@ -57,25 +72,24 @@ function getShadcnModal() {
57
72
  };
58
73
  `;
59
74
  }
60
- function getDaisyModal() {
61
- return `export const ConfirmModal = ({ isOpen, onClose, data }) => {
62
- if (!isOpen) return null;
75
+ function getModalsIndexFile() {
76
+ return `import { useModal as useBaseModal } from "your-modal-library";
77
+ import { ConfirmModal } from "./confirm-modal";
63
78
 
64
- return (
65
- <div className="modal modal-open">
66
- <div className="modal-box">
67
- <h3 className="font-bold text-lg">{data?.title}</h3>
79
+ // 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
80
+ export const MODALS = {
81
+ confirm: {
82
+ component: ConfirmModal,
83
+ },
84
+ // \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
85
+ } as const;
68
86
 
69
- <div className="modal-action">
70
- <button className="btn" onClick={onClose}>Cancel</button>
71
- <button className="btn btn-primary" onClick={data?.onConfirm}>
72
- Confirm
73
- </button>
74
- </div>
75
- </div>
76
- </div>
77
- );
78
- };
87
+ // 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
88
+ export type AppModals = typeof MODALS;
89
+
90
+ // 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
91
+ // \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
92
+ export const useModal = () => useBaseModal<AppModals>();
79
93
  `;
80
94
  }
81
95
  init();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "modal-system",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",