dn-react-router-toolkit 0.5.3 → 0.5.5

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 (17) hide show
  1. package/dist/crud/crud_form.js +62 -18
  2. package/dist/crud/crud_form.mjs +68 -19
  3. package/dist/crud/crud_form_provider.d.mts +11 -7
  4. package/dist/crud/crud_form_provider.d.ts +11 -7
  5. package/dist/crud/crud_form_provider.js +50 -52
  6. package/dist/crud/crud_form_provider.mjs +50 -52
  7. package/dist/crud/crud_page.d.mts +0 -1
  8. package/dist/crud/crud_page.d.ts +0 -1
  9. package/dist/crud/crud_page.js +112 -70
  10. package/dist/crud/crud_page.mjs +118 -71
  11. package/dist/crud/generate_pages.d.mts +0 -1
  12. package/dist/crud/generate_pages.d.ts +0 -1
  13. package/dist/crud/index.d.mts +1 -1
  14. package/dist/crud/index.d.ts +1 -1
  15. package/dist/crud/index.js +118 -76
  16. package/dist/crud/index.mjs +118 -71
  17. package/package.json +1 -1
package/dist/crud/crud_form.js CHANGED
@@ -47,33 +47,77 @@ function useFormContext() {
47
47
  // src/crud/crud_form.tsx
48
48
  var import_store2 = require("dn-react-toolkit/store");
49
49
  var import_react3 = __toESM(require("react"));
50
+ var import_utils = require("dn-react-toolkit/utils");
51
+ var import_text_editor = require("dn-react-toolkit/text_editor");
52
+ var textarea = (0, import_text_editor.createTextEditor)();
50
53
  function CrudForm({ AdminLayout }) {
51
54
  const form = useFormContext();
52
55
  return /* @__PURE__ */ import_react3.default.createElement(
53
56
  AdminLayout,
54
57
  {
55
58
  title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
56
- actions: /* @__PURE__ */ import_react3.default.createElement(
57
- "button",
58
- {
59
- type: "button",
60
- className: "button-primary",
61
- onClick: form.submit
62
- },
63
- "\uC800\uC7A5\uD558\uAE30"
64
- ),
59
+ actions: /* @__PURE__ */ import_react3.default.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
65
60
  className: "max-w-3xl mx-auto"
66
61
  },
67
- Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(form.columns).map(
68
- ([key, value]) => /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ import_react3.default.createElement(value.component, null) : /* @__PURE__ */ import_react3.default.createElement(
69
- import_store2.SyncInput,
70
- {
71
- store: form.store,
72
- property: key,
73
- className: "input-form"
62
+ Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(
63
+ form.columns
64
+ ).map(([key, value]) => {
65
+ const createComponent = () => {
66
+ if (value.component) {
67
+ return /* @__PURE__ */ import_react3.default.createElement(value.component, { store: form.store, property: key });
74
68
  }
75
- ))
76
- )),
69
+ if (value.type === "checkbox") {
70
+ return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSwitch, { store: form.store, property: key });
71
+ }
72
+ if (value.type === "datetime") {
73
+ return /* @__PURE__ */ import_react3.default.createElement(
74
+ import_store2.SyncInput,
75
+ {
76
+ store: form.store,
77
+ property: key,
78
+ className: "input-form",
79
+ type: "datetime-local",
80
+ serializer: (value2) => {
81
+ if (value2 instanceof Date) {
82
+ return (0, import_utils.moment)(value2).toISOString(true).slice(0, 16);
83
+ }
84
+ return String(value2);
85
+ },
86
+ deserializer: (value2) => {
87
+ if (!value2) {
88
+ return void 0;
89
+ }
90
+ return (0, import_utils.moment)(value2).toDate();
91
+ }
92
+ }
93
+ );
94
+ }
95
+ if (value.type === "textarea") {
96
+ const Editor = (0, import_store2.useSyncTextEditor)(textarea);
97
+ return /* @__PURE__ */ import_react3.default.createElement(
98
+ Editor.SyncTextEditor,
99
+ {
100
+ store: form.store,
101
+ property: key
102
+ }
103
+ );
104
+ }
105
+ if (value.options) {
106
+ const Component = value.options;
107
+ return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ import_react3.default.createElement(Component, null));
108
+ }
109
+ return /* @__PURE__ */ import_react3.default.createElement(
110
+ import_store2.SyncInput,
111
+ {
112
+ store: form.store,
113
+ property: key,
114
+ type: value.type,
115
+ className: "input-form"
116
+ }
117
+ );
118
+ };
119
+ return /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, createComponent());
120
+ })),
77
121
  form.item && /* @__PURE__ */ import_react3.default.createElement(
78
122
  "button",
79
123
  {
package/dist/crud/crud_form.mjs CHANGED
@@ -9,35 +9,84 @@ function useFormContext() {
9
9
  }
10
10
 
11
11
  // src/crud/crud_form.tsx
12
- import { SyncInput } from "dn-react-toolkit/store";
12
+ import {
13
+ SyncInput,
14
+ SyncSelect,
15
+ SyncSwitch,
16
+ useSyncTextEditor
17
+ } from "dn-react-toolkit/store";
13
18
  import React2 from "react";
19
+ import { moment } from "dn-react-toolkit/utils";
20
+ import { createTextEditor } from "dn-react-toolkit/text_editor";
21
+ var textarea = createTextEditor();
14
22
  function CrudForm({ AdminLayout }) {
15
23
  const form = useFormContext();
16
24
  return /* @__PURE__ */ React2.createElement(
17
25
  AdminLayout,
18
26
  {
19
27
  title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
20
- actions: /* @__PURE__ */ React2.createElement(
21
- "button",
22
- {
23
- type: "button",
24
- className: "button-primary",
25
- onClick: form.submit
26
- },
27
- "\uC800\uC7A5\uD558\uAE30"
28
- ),
28
+ actions: /* @__PURE__ */ React2.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
29
29
  className: "max-w-3xl mx-auto"
30
30
  },
31
- Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(form.columns).map(
32
- ([key, value]) => /* @__PURE__ */ React2.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ React2.createElement(value.component, null) : /* @__PURE__ */ React2.createElement(
33
- SyncInput,
34
- {
35
- store: form.store,
36
- property: key,
37
- className: "input-form"
31
+ Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(
32
+ form.columns
33
+ ).map(([key, value]) => {
34
+ const createComponent = () => {
35
+ if (value.component) {
36
+ return /* @__PURE__ */ React2.createElement(value.component, { store: form.store, property: key });
38
37
  }
39
- ))
40
- )),
38
+ if (value.type === "checkbox") {
39
+ return /* @__PURE__ */ React2.createElement(SyncSwitch, { store: form.store, property: key });
40
+ }
41
+ if (value.type === "datetime") {
42
+ return /* @__PURE__ */ React2.createElement(
43
+ SyncInput,
44
+ {
45
+ store: form.store,
46
+ property: key,
47
+ className: "input-form",
48
+ type: "datetime-local",
49
+ serializer: (value2) => {
50
+ if (value2 instanceof Date) {
51
+ return moment(value2).toISOString(true).slice(0, 16);
52
+ }
53
+ return String(value2);
54
+ },
55
+ deserializer: (value2) => {
56
+ if (!value2) {
57
+ return void 0;
58
+ }
59
+ return moment(value2).toDate();
60
+ }
61
+ }
62
+ );
63
+ }
64
+ if (value.type === "textarea") {
65
+ const Editor = useSyncTextEditor(textarea);
66
+ return /* @__PURE__ */ React2.createElement(
67
+ Editor.SyncTextEditor,
68
+ {
69
+ store: form.store,
70
+ property: key
71
+ }
72
+ );
73
+ }
74
+ if (value.options) {
75
+ const Component = value.options;
76
+ return /* @__PURE__ */ React2.createElement(SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ React2.createElement(Component, null));
77
+ }
78
+ return /* @__PURE__ */ React2.createElement(
79
+ SyncInput,
80
+ {
81
+ store: form.store,
82
+ property: key,
83
+ type: value.type,
84
+ className: "input-form"
85
+ }
86
+ );
87
+ };
88
+ return /* @__PURE__ */ React2.createElement("label", { key }, value.label, createComponent());
89
+ })),
41
90
  form.item && /* @__PURE__ */ React2.createElement(
42
91
  "button",
43
92
  {
package/dist/crud/crud_form_provider.d.mts CHANGED
@@ -1,16 +1,20 @@
1
1
  import { RxStore } from 'dn-react-toolkit/store';
2
- import { PgTableWithColumns } from 'drizzle-orm/pg-core';
3
2
  import React from 'react';
4
3
 
5
4
  type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
6
5
  [K in TPrimaryKey]?: TModel[K];
7
6
  };
8
- type FormColumnValue = {
7
+ type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
9
8
  label: string;
10
- component?: React.FC;
9
+ type?: React.HTMLInputTypeAttribute | "textarea";
10
+ component?: React.FC<{
11
+ store: RxStore<FormState<TModel, TPrimaryKey>>;
12
+ property: string;
13
+ }>;
14
+ options?: React.FC;
11
15
  };
12
- type FormColumns<T> = Partial<{
13
- [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
16
+ type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
17
+ [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
14
18
  }>;
15
19
  declare const FormContext: React.Context<{}>;
16
20
  declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
@@ -19,14 +23,14 @@ declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id"
19
23
  store: RxStore<FormState<TModel, TPrimaryKey>>;
20
24
  submit: () => Promise<void>;
21
25
  delete: () => Promise<void>;
22
- columns: FormColumns<TModel>;
26
+ columns: FormColumns<TModel, TPrimaryKey>;
23
27
  };
24
28
  type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
25
29
  primaryKey?: TPrimaryKey;
26
30
  name: string;
27
31
  prefix: string;
28
32
  item?: TModel;
29
- columns?: FormColumns<TModel>;
33
+ columns?: FormColumns<TModel, TPrimaryKey>;
30
34
  children?: React.ReactNode;
31
35
  };
32
36
  declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;
package/dist/crud/crud_form_provider.d.ts CHANGED
@@ -1,16 +1,20 @@
1
1
  import { RxStore } from 'dn-react-toolkit/store';
2
- import { PgTableWithColumns } from 'drizzle-orm/pg-core';
3
2
  import React from 'react';
4
3
 
5
4
  type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
6
5
  [K in TPrimaryKey]?: TModel[K];
7
6
  };
8
- type FormColumnValue = {
7
+ type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
9
8
  label: string;
10
- component?: React.FC;
9
+ type?: React.HTMLInputTypeAttribute | "textarea";
10
+ component?: React.FC<{
11
+ store: RxStore<FormState<TModel, TPrimaryKey>>;
12
+ property: string;
13
+ }>;
14
+ options?: React.FC;
11
15
  };
12
- type FormColumns<T> = Partial<{
13
- [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
16
+ type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
17
+ [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
14
18
  }>;
15
19
  declare const FormContext: React.Context<{}>;
16
20
  declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
@@ -19,14 +23,14 @@ declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id"
19
23
  store: RxStore<FormState<TModel, TPrimaryKey>>;
20
24
  submit: () => Promise<void>;
21
25
  delete: () => Promise<void>;
22
- columns: FormColumns<TModel>;
26
+ columns: FormColumns<TModel, TPrimaryKey>;
23
27
  };
24
28
  type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
25
29
  primaryKey?: TPrimaryKey;
26
30
  name: string;
27
31
  prefix: string;
28
32
  item?: TModel;
29
- columns?: FormColumns<TModel>;
33
+ columns?: FormColumns<TModel, TPrimaryKey>;
30
34
  children?: React.ReactNode;
31
35
  };
32
36
  declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;
package/dist/crud/crud_form_provider.js CHANGED
@@ -63,58 +63,56 @@ function CrudFormProvider({
63
63
  "Content-Type": "application/json"
64
64
  },
65
65
  body: JSON.stringify(
66
- Object.entries(store.state).reduce(
67
- function reducer(acc, [key, value]) {
68
- const converter = (value2) => {
69
- if (value2 === void 0) {
70
- return void 0;
71
- }
72
- if (value2 === null) {
73
- return {
74
- type: "null",
75
- value: null
76
- };
77
- }
78
- if (typeof value2 === "string") {
79
- return {
80
- type: "string",
81
- value: value2
82
- };
83
- }
84
- if (typeof value2 === "number") {
85
- return {
86
- type: "number",
87
- value: value2
88
- };
89
- }
90
- if (typeof value2 === "boolean") {
91
- return {
92
- type: "boolean",
93
- value: value2
94
- };
95
- }
96
- if (value2 instanceof Date) {
97
- return {
98
- type: "date",
99
- value: value2.toISOString()
100
- };
101
- }
102
- if (Array.isArray(value2)) {
103
- return value2.map((v) => converter(v));
104
- }
105
- if (typeof value2 === "object") {
106
- return Object.entries(
107
- value2
108
- ).reduce(reducer, {});
109
- }
110
- };
111
- return {
112
- ...acc,
113
- [key]: converter(value)
114
- };
115
- },
116
- {}
117
- )
66
+ Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
67
+ const converter = (value2) => {
68
+ if (value2 === void 0) {
69
+ return void 0;
70
+ }
71
+ if (value2 === null) {
72
+ return {
73
+ type: "null",
74
+ value: null
75
+ };
76
+ }
77
+ if (typeof value2 === "string") {
78
+ return {
79
+ type: "string",
80
+ value: value2
81
+ };
82
+ }
83
+ if (typeof value2 === "number") {
84
+ return {
85
+ type: "number",
86
+ value: value2
87
+ };
88
+ }
89
+ if (typeof value2 === "boolean") {
90
+ return {
91
+ type: "boolean",
92
+ value: value2
93
+ };
94
+ }
95
+ if (value2 instanceof Date) {
96
+ return {
97
+ type: "date",
98
+ value: value2.toISOString()
99
+ };
100
+ }
101
+ if (Array.isArray(value2)) {
102
+ return value2.map((v) => converter(v));
103
+ }
104
+ if (typeof value2 === "object") {
105
+ return Object.entries(value2).reduce(
106
+ reducer,
107
+ {}
108
+ );
109
+ }
110
+ };
111
+ return {
112
+ ...acc,
113
+ [key]: converter(value)
114
+ };
115
+ }, {})
118
116
  )
119
117
  });
120
118
  if (!res.ok) {
package/dist/crud/crud_form_provider.mjs CHANGED
@@ -27,58 +27,56 @@ function CrudFormProvider({
27
27
  "Content-Type": "application/json"
28
28
  },
29
29
  body: JSON.stringify(
30
- Object.entries(store.state).reduce(
31
- function reducer(acc, [key, value]) {
32
- const converter = (value2) => {
33
- if (value2 === void 0) {
34
- return void 0;
35
- }
36
- if (value2 === null) {
37
- return {
38
- type: "null",
39
- value: null
40
- };
41
- }
42
- if (typeof value2 === "string") {
43
- return {
44
- type: "string",
45
- value: value2
46
- };
47
- }
48
- if (typeof value2 === "number") {
49
- return {
50
- type: "number",
51
- value: value2
52
- };
53
- }
54
- if (typeof value2 === "boolean") {
55
- return {
56
- type: "boolean",
57
- value: value2
58
- };
59
- }
60
- if (value2 instanceof Date) {
61
- return {
62
- type: "date",
63
- value: value2.toISOString()
64
- };
65
- }
66
- if (Array.isArray(value2)) {
67
- return value2.map((v) => converter(v));
68
- }
69
- if (typeof value2 === "object") {
70
- return Object.entries(
71
- value2
72
- ).reduce(reducer, {});
73
- }
74
- };
75
- return {
76
- ...acc,
77
- [key]: converter(value)
78
- };
79
- },
80
- {}
81
- )
30
+ Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
31
+ const converter = (value2) => {
32
+ if (value2 === void 0) {
33
+ return void 0;
34
+ }
35
+ if (value2 === null) {
36
+ return {
37
+ type: "null",
38
+ value: null
39
+ };
40
+ }
41
+ if (typeof value2 === "string") {
42
+ return {
43
+ type: "string",
44
+ value: value2
45
+ };
46
+ }
47
+ if (typeof value2 === "number") {
48
+ return {
49
+ type: "number",
50
+ value: value2
51
+ };
52
+ }
53
+ if (typeof value2 === "boolean") {
54
+ return {
55
+ type: "boolean",
56
+ value: value2
57
+ };
58
+ }
59
+ if (value2 instanceof Date) {
60
+ return {
61
+ type: "date",
62
+ value: value2.toISOString()
63
+ };
64
+ }
65
+ if (Array.isArray(value2)) {
66
+ return value2.map((v) => converter(v));
67
+ }
68
+ if (typeof value2 === "object") {
69
+ return Object.entries(value2).reduce(
70
+ reducer,
71
+ {}
72
+ );
73
+ }
74
+ };
75
+ return {
76
+ ...acc,
77
+ [key]: converter(value)
78
+ };
79
+ }, {})
82
80
  )
83
81
  });
84
82
  if (!res.ok) {
package/dist/crud/crud_page.d.mts CHANGED
@@ -2,7 +2,6 @@ import { CrudFormProps } from './crud_form_provider.mjs';
2
2
  import { TablePageOptions } from '../table/page.mjs';
3
3
  import React from 'react';
4
4
  import 'dn-react-toolkit/store';
5
- import 'drizzle-orm/pg-core';
6
5
  import '../table/table.mjs';
7
6
 
8
7
  type CrudPageOptions<TModel, TPrimaryKey extends keyof TModel> = {
package/dist/crud/crud_page.d.ts CHANGED
@@ -2,7 +2,6 @@ import { CrudFormProps } from './crud_form_provider.js';
2
2
  import { TablePageOptions } from '../table/page.js';
3
3
  import React from 'react';
4
4
  import 'dn-react-toolkit/store';
5
- import 'drizzle-orm/pg-core';
6
5
  import '../table/table.js';
7
6
 
8
7
  type CrudPageOptions<TModel, TPrimaryKey extends keyof TModel> = {