@byline/ui 2.5.1 → 2.6.0

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 (211) hide show
  1. package/dist/dnd/draggable-sortable/demo/draggable-list-demo.js +1 -1
  2. package/dist/react.d.ts +18 -54
  3. package/dist/react.js +0 -35
  4. package/dist/uikit.d.ts +1 -0
  5. package/dist/uikit.js +1 -0
  6. package/package.json +2 -8
  7. package/src/dnd/draggable-sortable/demo/draggable-list-demo.tsx +1 -1
  8. package/src/react.ts +20 -68
  9. package/src/uikit.ts +1 -0
  10. package/dist/admin/group.d.ts +0 -27
  11. package/dist/admin/group.js +0 -14
  12. package/dist/admin/group.module.js +0 -6
  13. package/dist/admin/group_module.css +0 -19
  14. package/dist/admin/row.d.ts +0 -25
  15. package/dist/admin/row.js +0 -8
  16. package/dist/admin/row.module.js +0 -5
  17. package/dist/admin/row_module.css +0 -18
  18. package/dist/admin/tabs.d.ts +0 -25
  19. package/dist/admin/tabs.js +0 -35
  20. package/dist/admin/tabs.module.js +0 -10
  21. package/dist/admin/tabs_module.css +0 -68
  22. package/dist/fields/array/array-field.d.ts +0 -14
  23. package/dist/fields/array/array-field.js +0 -176
  24. package/dist/fields/array/array-field.module.js +0 -11
  25. package/dist/fields/array/array-field_module.css +0 -32
  26. package/dist/fields/blocks/blocks-field.d.ts +0 -13
  27. package/dist/fields/blocks/blocks-field.js +0 -244
  28. package/dist/fields/blocks/blocks-field.module.js +0 -26
  29. package/dist/fields/blocks/blocks-field_module.css +0 -107
  30. package/dist/fields/checkbox/checkbox-field.d.ts +0 -16
  31. package/dist/fields/checkbox/checkbox-field.js +0 -28
  32. package/dist/fields/checkbox/checkbox-field.module.js +0 -6
  33. package/dist/fields/checkbox/checkbox-field_module.css +0 -4
  34. package/dist/fields/column-formatter.d.ts +0 -20
  35. package/dist/fields/column-formatter.js +0 -15
  36. package/dist/fields/date-time-formatter.d.ts +0 -16
  37. package/dist/fields/date-time-formatter.js +0 -8
  38. package/dist/fields/datetime/datetime-field.d.ts +0 -16
  39. package/dist/fields/datetime/datetime-field.js +0 -37
  40. package/dist/fields/datetime/datetime-field.module.js +0 -5
  41. package/dist/fields/datetime/datetime-field_module.css +0 -4
  42. package/dist/fields/draggable-context-menu.d.ts +0 -6
  43. package/dist/fields/draggable-context-menu.js +0 -83
  44. package/dist/fields/draggable-context-menu.module.js +0 -15
  45. package/dist/fields/draggable-context-menu_module.css +0 -91
  46. package/dist/fields/field-helpers.d.ts +0 -26
  47. package/dist/fields/field-helpers.js +0 -50
  48. package/dist/fields/field-renderer.d.ts +0 -37
  49. package/dist/fields/field-renderer.js +0 -206
  50. package/dist/fields/field-renderer.module.js +0 -8
  51. package/dist/fields/field-renderer_module.css +0 -11
  52. package/dist/fields/file/file-field.d.ts +0 -19
  53. package/dist/fields/file/file-field.js +0 -226
  54. package/dist/fields/file/file-field.module.js +0 -18
  55. package/dist/fields/file/file-field_module.css +0 -131
  56. package/dist/fields/file/file-upload-field.d.ts +0 -21
  57. package/dist/fields/file/file-upload-field.js +0 -128
  58. package/dist/fields/file/file-upload-field.module.js +0 -15
  59. package/dist/fields/file/file-upload-field_module.css +0 -74
  60. package/dist/fields/group/group-field.d.ts +0 -15
  61. package/dist/fields/group/group-field.js +0 -59
  62. package/dist/fields/group/group-field.module.js +0 -9
  63. package/dist/fields/group/group-field_module.css +0 -27
  64. package/dist/fields/image/image-field.d.ts +0 -19
  65. package/dist/fields/image/image-field.js +0 -242
  66. package/dist/fields/image/image-field.module.js +0 -22
  67. package/dist/fields/image/image-field_module.css +0 -121
  68. package/dist/fields/image/image-upload-field.d.ts +0 -21
  69. package/dist/fields/image/image-upload-field.js +0 -187
  70. package/dist/fields/image/image-upload-field.module.js +0 -19
  71. package/dist/fields/image/image-upload-field_module.css +0 -92
  72. package/dist/fields/local-date-time.d.ts +0 -27
  73. package/dist/fields/local-date-time.js +0 -49
  74. package/dist/fields/locale-badge.d.ts +0 -18
  75. package/dist/fields/locale-badge.js +0 -10
  76. package/dist/fields/locale-badge.module.js +0 -5
  77. package/dist/fields/locale-badge_module.css +0 -27
  78. package/dist/fields/numerical/numerical-field.d.ts +0 -18
  79. package/dist/fields/numerical/numerical-field.js +0 -74
  80. package/dist/fields/relation/relation-display.d.ts +0 -40
  81. package/dist/fields/relation/relation-display.js +0 -58
  82. package/dist/fields/relation/relation-display.module.js +0 -9
  83. package/dist/fields/relation/relation-display_module.css +0 -21
  84. package/dist/fields/relation/relation-field.d.ts +0 -18
  85. package/dist/fields/relation/relation-field.js +0 -146
  86. package/dist/fields/relation/relation-field.module.js +0 -13
  87. package/dist/fields/relation/relation-field_module.css +0 -62
  88. package/dist/fields/relation/relation-picker.d.ts +0 -49
  89. package/dist/fields/relation/relation-picker.js +0 -233
  90. package/dist/fields/relation/relation-picker.module.js +0 -26
  91. package/dist/fields/relation/relation-picker_module.css +0 -124
  92. package/dist/fields/relation/relation-summary.d.ts +0 -31
  93. package/dist/fields/relation/relation-summary.js +0 -50
  94. package/dist/fields/relation/relation-summary.module.js +0 -11
  95. package/dist/fields/relation/relation-summary_module.css +0 -37
  96. package/dist/fields/select/select-field.d.ts +0 -16
  97. package/dist/fields/select/select-field.js +0 -50
  98. package/dist/fields/select/select-field.module.js +0 -5
  99. package/dist/fields/select/select-field_module.css +0 -4
  100. package/dist/fields/sortable-item.d.ts +0 -15
  101. package/dist/fields/sortable-item.js +0 -80
  102. package/dist/fields/sortable-item.module.js +0 -22
  103. package/dist/fields/sortable-item_module.css +0 -124
  104. package/dist/fields/text/text-field.d.ts +0 -20
  105. package/dist/fields/text/text-field.js +0 -104
  106. package/dist/fields/text/text-field.module.js +0 -6
  107. package/dist/fields/text/text-field_module.css +0 -5
  108. package/dist/fields/text-area/text-area-field.d.ts +0 -20
  109. package/dist/fields/text-area/text-area-field.js +0 -105
  110. package/dist/fields/text-area/text-area-field.module.js +0 -6
  111. package/dist/fields/text-area/text-area-field_module.css +0 -5
  112. package/dist/fields/use-field-change-handler.d.ts +0 -23
  113. package/dist/fields/use-field-change-handler.js +0 -52
  114. package/dist/forms/document-actions.d.ts +0 -48
  115. package/dist/forms/document-actions.js +0 -469
  116. package/dist/forms/document-actions.module.js +0 -34
  117. package/dist/forms/document-actions_module.css +0 -118
  118. package/dist/forms/form-context.d.ts +0 -89
  119. package/dist/forms/form-context.js +0 -466
  120. package/dist/forms/form-renderer.d.ts +0 -98
  121. package/dist/forms/form-renderer.js +0 -591
  122. package/dist/forms/form-renderer.module.js +0 -46
  123. package/dist/forms/form-renderer_module.css +0 -245
  124. package/dist/forms/navigation-guard.d.ts +0 -54
  125. package/dist/forms/navigation-guard.js +0 -22
  126. package/dist/forms/path-widget.d.ts +0 -36
  127. package/dist/forms/path-widget.js +0 -107
  128. package/dist/forms/path-widget.module.js +0 -8
  129. package/dist/forms/path-widget_module.css +0 -29
  130. package/dist/forms/upload-executor.d.ts +0 -57
  131. package/dist/forms/upload-executor.js +0 -92
  132. package/dist/services/field-services-context.d.ts +0 -16
  133. package/dist/services/field-services-context.js +0 -13
  134. package/dist/services/field-services-types.d.ts +0 -63
  135. package/dist/services/field-services-types.js +0 -1
  136. package/dist/widgets/diff-viewer/diff-modal.d.ts +0 -22
  137. package/dist/widgets/diff-viewer/diff-modal.js +0 -146
  138. package/dist/widgets/diff-viewer/diff-modal.module.js +0 -14
  139. package/dist/widgets/diff-viewer/diff-modal_module.css +0 -56
  140. package/dist/widgets/status-badge/status-badge.d.ts +0 -25
  141. package/dist/widgets/status-badge/status-badge.js +0 -35
  142. package/dist/widgets/status-badge/status-badge.module.js +0 -7
  143. package/dist/widgets/status-badge/status-badge_module.css +0 -20
  144. package/src/admin/group.module.css +0 -41
  145. package/src/admin/group.tsx +0 -40
  146. package/src/admin/row.module.css +0 -32
  147. package/src/admin/row.tsx +0 -33
  148. package/src/admin/tabs.module.css +0 -107
  149. package/src/admin/tabs.tsx +0 -82
  150. package/src/fields/array/array-field.module.css +0 -48
  151. package/src/fields/array/array-field.tsx +0 -266
  152. package/src/fields/blocks/blocks-field.module.css +0 -148
  153. package/src/fields/blocks/blocks-field.tsx +0 -312
  154. package/src/fields/checkbox/checkbox-field.module.css +0 -4
  155. package/src/fields/checkbox/checkbox-field.tsx +0 -54
  156. package/src/fields/column-formatter.tsx +0 -31
  157. package/src/fields/date-time-formatter.tsx +0 -22
  158. package/src/fields/datetime/datetime-field.module.css +0 -13
  159. package/src/fields/datetime/datetime-field.tsx +0 -54
  160. package/src/fields/draggable-context-menu.module.css +0 -127
  161. package/src/fields/draggable-context-menu.tsx +0 -85
  162. package/src/fields/field-helpers.ts +0 -69
  163. package/src/fields/field-renderer.module.css +0 -22
  164. package/src/fields/field-renderer.tsx +0 -288
  165. package/src/fields/file/file-field.module.css +0 -153
  166. package/src/fields/file/file-field.tsx +0 -271
  167. package/src/fields/file/file-upload-field.module.css +0 -101
  168. package/src/fields/file/file-upload-field.tsx +0 -183
  169. package/src/fields/group/group-field.module.css +0 -43
  170. package/src/fields/group/group-field.tsx +0 -84
  171. package/src/fields/image/image-field.module.css +0 -155
  172. package/src/fields/image/image-field.tsx +0 -291
  173. package/src/fields/image/image-upload-field.module.css +0 -123
  174. package/src/fields/image/image-upload-field.tsx +0 -270
  175. package/src/fields/local-date-time.tsx +0 -88
  176. package/src/fields/locale-badge.module.css +0 -37
  177. package/src/fields/locale-badge.tsx +0 -32
  178. package/src/fields/numerical/numerical-field.tsx +0 -114
  179. package/src/fields/relation/relation-display.module.css +0 -36
  180. package/src/fields/relation/relation-display.tsx +0 -130
  181. package/src/fields/relation/relation-field.module.css +0 -83
  182. package/src/fields/relation/relation-field.tsx +0 -206
  183. package/src/fields/relation/relation-picker.module.css +0 -168
  184. package/src/fields/relation/relation-picker.tsx +0 -325
  185. package/src/fields/relation/relation-summary.module.css +0 -55
  186. package/src/fields/relation/relation-summary.tsx +0 -123
  187. package/src/fields/select/select-field.module.css +0 -13
  188. package/src/fields/select/select-field.tsx +0 -61
  189. package/src/fields/sortable-item.module.css +0 -167
  190. package/src/fields/sortable-item.tsx +0 -101
  191. package/src/fields/text/text-field.module.css +0 -13
  192. package/src/fields/text/text-field.tsx +0 -146
  193. package/src/fields/text-area/text-area-field.module.css +0 -13
  194. package/src/fields/text-area/text-area-field.tsx +0 -147
  195. package/src/fields/use-field-change-handler.ts +0 -112
  196. package/src/forms/document-actions.module.css +0 -160
  197. package/src/forms/document-actions.tsx +0 -487
  198. package/src/forms/form-context.tsx +0 -704
  199. package/src/forms/form-renderer.module.css +0 -321
  200. package/src/forms/form-renderer.tsx +0 -888
  201. package/src/forms/navigation-guard.tsx +0 -98
  202. package/src/forms/path-widget.module.css +0 -41
  203. package/src/forms/path-widget.test.tsx +0 -217
  204. package/src/forms/path-widget.tsx +0 -181
  205. package/src/forms/upload-executor.ts +0 -190
  206. package/src/services/field-services-context.tsx +0 -35
  207. package/src/services/field-services-types.ts +0 -68
  208. package/src/widgets/diff-viewer/diff-modal.module.css +0 -79
  209. package/src/widgets/diff-viewer/diff-modal.tsx +0 -184
  210. package/src/widgets/status-badge/status-badge.module.css +0 -31
  211. package/src/widgets/status-badge/status-badge.tsx +0 -69
@@ -1,176 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useEffect, useState } from "react";
3
- import classnames from "classnames";
4
- import { DraggableSortable, moveItem } from "../../dnd/draggable-sortable/index.js";
5
- import { defaultScalarForField } from "../field-helpers.js";
6
- import { FieldRenderer } from "../field-renderer.js";
7
- import { SortableItem } from "../sortable-item.js";
8
- import { useFormContext } from "../../forms/form-context.js";
9
- import { IconButton, PlusIcon } from "../../uikit.js";
10
- import array_field_module from "./array-field.module.js";
11
- const ArrayField = ({ field, defaultValue, path, disableSorting = false })=>{
12
- const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext();
13
- const [items, setItems] = useState([]);
14
- useEffect(()=>{
15
- Array.isArray(defaultValue) ? setItems(defaultValue.map((item)=>({
16
- id: item && 'object' == typeof item && 'id' in item ? String(item.id) : item && 'object' == typeof item && '_id' in item ? String(item._id) : crypto.randomUUID(),
17
- data: item
18
- }))) : setItems([]);
19
- }, [
20
- defaultValue
21
- ]);
22
- const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
23
- setItems((prev)=>moveItem(prev, moveFromIndex, moveToIndex));
24
- const currentArray = getFieldValue(path) ?? defaultValue;
25
- if (Array.isArray(currentArray)) {
26
- const clampedFrom = Math.max(0, Math.min(moveFromIndex, currentArray.length - 1));
27
- const clampedTo = Math.max(0, Math.min(moveToIndex, currentArray.length - 1));
28
- if (clampedFrom === clampedTo) return;
29
- const item = currentArray[clampedFrom];
30
- const itemId = item && 'object' == typeof item && 'id' in item ? String(item.id) : String(clampedFrom);
31
- appendPatch({
32
- kind: 'array.move',
33
- path: path,
34
- itemId,
35
- toIndex: clampedTo
36
- });
37
- }
38
- };
39
- const handleAddItem = async (atIndex)=>{
40
- const childFields = field.fields ?? [];
41
- if (0 === childFields.length) return;
42
- const newId = crypto.randomUUID();
43
- const newItem = {};
44
- for (const childField of childFields)if ('group' === childField.type && childField.fields && childField.fields.length > 0) {
45
- const groupObj = {};
46
- for (const innerField of childField.fields)groupObj[innerField.name] = await defaultScalarForField(innerField, getFieldValues);
47
- newItem[childField.name] = groupObj;
48
- } else newItem[childField.name] = await defaultScalarForField(childField, getFieldValues);
49
- const currentArray = getFieldValue(path) ?? defaultValue;
50
- const insertAt = null != atIndex ? atIndex : currentArray ? currentArray.length : 0;
51
- const newItemWrapper = {
52
- id: newId,
53
- data: newItem
54
- };
55
- setItems((prev)=>{
56
- const next = [
57
- ...prev
58
- ];
59
- next.splice(insertAt, 0, newItemWrapper);
60
- return next;
61
- });
62
- appendPatch({
63
- kind: 'array.insert',
64
- path: path,
65
- index: insertAt,
66
- item: newItem
67
- });
68
- const newArrayValue = currentArray ? [
69
- ...currentArray
70
- ] : [];
71
- newArrayValue.splice(insertAt, 0, newItem);
72
- setFieldStore(path, newArrayValue);
73
- };
74
- const handleRemoveItem = (index)=>{
75
- const currentArray = getFieldValue(path) ?? defaultValue;
76
- if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return;
77
- const item = currentArray[index];
78
- const itemId = item && 'object' == typeof item && 'id' in item ? String(item.id) : String(index);
79
- setItems((prev)=>prev.filter((_, i)=>i !== index));
80
- appendPatch({
81
- kind: 'array.remove',
82
- path: path,
83
- itemId
84
- });
85
- const newArrayValue = [
86
- ...currentArray
87
- ];
88
- newArrayValue.splice(index, 1);
89
- setFieldStore(path, newArrayValue);
90
- };
91
- const handleInsertBelow = (index)=>{
92
- handleAddItem(index + 1);
93
- };
94
- const renderItem = (itemWrapper, index)=>{
95
- const item = itemWrapper.data;
96
- const arrayElementPath = `${path}[${index}]`;
97
- if (!item || 'object' != typeof item) return null;
98
- const childFields = field.fields ?? [];
99
- if (0 === childFields.length) return null;
100
- const innerBody = childFields.map((childField)=>{
101
- const initial = item[childField.name];
102
- if ('group' === childField.type && childField.fields && childField.fields.length > 0) {
103
- const groupData = initial && 'object' == typeof initial ? initial : {};
104
- return /*#__PURE__*/ jsxs("div", {
105
- className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
106
- children: [
107
- childField.label && /*#__PURE__*/ jsx("h4", {
108
- className: classnames('byline-field-array-group-header', array_field_module["group-header"]),
109
- children: childField.label
110
- }),
111
- childField.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
112
- field: innerField,
113
- defaultValue: groupData[innerField.name],
114
- basePath: `${arrayElementPath}.${childField.name}`,
115
- disableSorting: true
116
- }, innerField.name))
117
- ]
118
- }, childField.name);
119
- }
120
- return /*#__PURE__*/ jsx(FieldRenderer, {
121
- field: childField,
122
- defaultValue: initial,
123
- basePath: arrayElementPath,
124
- disableSorting: true
125
- }, childField.name);
126
- });
127
- const label = field.label ?? field.name;
128
- if (disableSorting) return /*#__PURE__*/ jsx("div", {
129
- className: classnames('byline-field-array-card', array_field_module.card),
130
- children: /*#__PURE__*/ jsx("div", {
131
- className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
132
- children: innerBody
133
- })
134
- }, itemWrapper.id);
135
- return /*#__PURE__*/ jsx(SortableItem, {
136
- id: itemWrapper.id,
137
- label: label,
138
- onAddBelow: ()=>handleInsertBelow(index),
139
- onRemove: ()=>handleRemoveItem(index),
140
- children: /*#__PURE__*/ jsx("div", {
141
- className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
142
- children: innerBody
143
- })
144
- }, itemWrapper.id);
145
- };
146
- return /*#__PURE__*/ jsxs("div", {
147
- className: `byline-field-array ${field.name}`,
148
- children: [
149
- !disableSorting && field.label && /*#__PURE__*/ jsx("h3", {
150
- className: classnames('byline-field-array-title', array_field_module.title),
151
- children: field.label
152
- }),
153
- disableSorting ? /*#__PURE__*/ jsx("div", {
154
- className: classnames('byline-field-array-stack', array_field_module.stack),
155
- children: items.map((item, index)=>renderItem(item, index))
156
- }) : /*#__PURE__*/ jsxs(DraggableSortable, {
157
- ids: items.map((i)=>i.id),
158
- onDragEnd: handleDragEnd,
159
- className: classnames('byline-field-array-stack', array_field_module.stack),
160
- children: [
161
- items.map((item, index)=>renderItem(item, index)),
162
- /*#__PURE__*/ jsx("span", {
163
- children: /*#__PURE__*/ jsx(IconButton, {
164
- onClick: ()=>{
165
- handleAddItem();
166
- },
167
- "aria-label": "Add item",
168
- children: /*#__PURE__*/ jsx(PlusIcon, {})
169
- })
170
- })
171
- ]
172
- })
173
- ]
174
- });
175
- };
176
- export { ArrayField };
@@ -1,11 +0,0 @@
1
- import "./array-field_module.css";
2
- const array_field_module = {
3
- title: "title-HMJs1n",
4
- stack: "stack-emBcXW",
5
- card: "card-j_6w_O",
6
- "group-header": "group-header-KJxpIV",
7
- groupHeader: "group-header-KJxpIV",
8
- "group-fields": "group-fields-Bmi_hA",
9
- groupFields: "group-fields-Bmi_hA"
10
- };
11
- export default array_field_module;
@@ -1,32 +0,0 @@
1
- :is(.title-HMJs1n, .byline-field-array-title) {
2
- font-size: 1rem;
3
- font-weight: var(--font-weight-medium);
4
- margin-bottom: .25rem;
5
- }
6
-
7
- :is(.stack-emBcXW, .byline-field-array-stack) {
8
- gap: var(--spacing-16);
9
- flex-direction: column;
10
- display: flex;
11
- }
12
-
13
- :is(.card-j_6w_O, .byline-field-array-card) {
14
- gap: var(--spacing-16);
15
- padding: var(--spacing-16);
16
- border: var(--border-width-thin) dashed var(--gray-600);
17
- border-radius: var(--border-radius-md);
18
- flex-direction: column;
19
- display: flex;
20
- }
21
-
22
- :is(.group-header-KJxpIV, .byline-field-array-group-header) {
23
- font-size: .9rem;
24
- font-weight: var(--font-weight-medium);
25
- }
26
-
27
- :is(.group-fields-Bmi_hA, .byline-field-array-group-fields) {
28
- gap: var(--spacing-16);
29
- flex-direction: column;
30
- display: flex;
31
- }
32
-
@@ -1,13 +0,0 @@
1
- /**
2
- * This Source Code is subject to the terms of the Mozilla Public
3
- * License, v. 2.0. If a copy of the MPL was not distributed with this
4
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
5
- *
6
- * Copyright (c) Infonomic Company Limited
7
- */
8
- import type { BlocksField as BlocksFieldType } from '@byline/core';
9
- export declare const BlocksField: ({ field, defaultValue, path, }: {
10
- field: BlocksFieldType;
11
- defaultValue: any;
12
- path: string;
13
- }) => import("react").JSX.Element;
@@ -1,244 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useEffect, useMemo, useState } from "react";
3
- import classnames from "classnames";
4
- import { DraggableSortable, moveItem } from "../../dnd/draggable-sortable/index.js";
5
- import { defaultScalarForField } from "../field-helpers.js";
6
- import { GroupField } from "../group/group-field.js";
7
- import { SortableItem } from "../sortable-item.js";
8
- import { useFormContext } from "../../forms/form-context.js";
9
- import { Card, CloseIcon, IconButton, Modal, PlusIcon } from "../../uikit.js";
10
- import blocks_field_module from "./blocks-field.module.js";
11
- const BlocksField = ({ field, defaultValue, path })=>{
12
- const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext();
13
- const [items, setItems] = useState([]);
14
- const [showAddBlockModal, setShowAddBlockModal] = useState(false);
15
- const [pendingInsertIndex, setPendingInsertIndex] = useState(null);
16
- const availableBlocks = useMemo(()=>field.blocks ?? [], [
17
- field.blocks
18
- ]);
19
- const [selectedBlockName, setSelectedBlockName] = useState(()=>availableBlocks[0]?.blockType);
20
- useEffect(()=>{
21
- if (null == selectedBlockName || !availableBlocks.some((b)=>b.blockType === selectedBlockName)) setSelectedBlockName(availableBlocks[0]?.blockType);
22
- }, [
23
- availableBlocks,
24
- selectedBlockName
25
- ]);
26
- useEffect(()=>{
27
- Array.isArray(defaultValue) ? setItems(defaultValue.map((item)=>({
28
- id: item && 'object' == typeof item && '_id' in item ? String(item._id) : crypto.randomUUID(),
29
- data: item
30
- }))) : setItems([]);
31
- }, [
32
- defaultValue
33
- ]);
34
- const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
35
- setItems((prev)=>moveItem(prev, moveFromIndex, moveToIndex));
36
- const currentArray = getFieldValue(path) ?? defaultValue;
37
- if (Array.isArray(currentArray)) {
38
- const clampedFrom = Math.max(0, Math.min(moveFromIndex, currentArray.length - 1));
39
- const clampedTo = Math.max(0, Math.min(moveToIndex, currentArray.length - 1));
40
- if (clampedFrom === clampedTo) return;
41
- const item = currentArray[clampedFrom];
42
- const itemId = item && 'object' == typeof item && '_id' in item ? String(item._id) : String(clampedFrom);
43
- appendPatch({
44
- kind: 'array.move',
45
- path: path,
46
- itemId,
47
- toIndex: clampedTo
48
- });
49
- }
50
- };
51
- const handleAddItem = async (forcedVariantName, atIndex)=>{
52
- setShowAddBlockModal(false);
53
- setPendingInsertIndex(null);
54
- const variant = (null != forcedVariantName ? availableBlocks.find((v)=>v.blockType === forcedVariantName) : void 0) ?? availableBlocks[0];
55
- if (!variant) return;
56
- const compositeFields = variant.fields ?? [];
57
- const newId = crypto.randomUUID();
58
- const newItem = {
59
- _id: newId,
60
- _type: variant.blockType
61
- };
62
- for (const f of compositeFields)newItem[f.name] = await defaultScalarForField(f, getFieldValues);
63
- const currentArray = getFieldValue(path) ?? defaultValue;
64
- const insertAt = null != atIndex ? atIndex : currentArray ? currentArray.length : 0;
65
- const newItemWrapper = {
66
- id: newId,
67
- data: newItem
68
- };
69
- setItems((prev)=>{
70
- const next = [
71
- ...prev
72
- ];
73
- next.splice(insertAt, 0, newItemWrapper);
74
- return next;
75
- });
76
- appendPatch({
77
- kind: 'array.insert',
78
- path: path,
79
- index: insertAt,
80
- item: newItem
81
- });
82
- const newArrayValue = currentArray ? [
83
- ...currentArray
84
- ] : [];
85
- newArrayValue.splice(insertAt, 0, newItem);
86
- setFieldStore(path, newArrayValue);
87
- };
88
- const handleRemoveItem = (index)=>{
89
- const currentArray = getFieldValue(path) ?? defaultValue;
90
- if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return;
91
- const item = currentArray[index];
92
- const itemId = item && 'object' == typeof item && '_id' in item ? String(item._id) : String(index);
93
- setItems((prev)=>prev.filter((_, i)=>i !== index));
94
- appendPatch({
95
- kind: 'array.remove',
96
- path: path,
97
- itemId
98
- });
99
- const newArrayValue = [
100
- ...currentArray
101
- ];
102
- newArrayValue.splice(index, 1);
103
- setFieldStore(path, newArrayValue);
104
- };
105
- const handleInsertBelow = (index, forcedVariantName)=>{
106
- if (availableBlocks.length > 1 && null == forcedVariantName) {
107
- setPendingInsertIndex(index + 1);
108
- setShowAddBlockModal(true);
109
- } else handleAddItem(forcedVariantName, index + 1);
110
- };
111
- const renderItem = (itemWrapper, index)=>{
112
- const item = itemWrapper.data;
113
- const arrayElementPath = `${path}[${index}]`;
114
- if (!item || 'object' != typeof item || 'string' != typeof item._type) return null;
115
- const subField = field.blocks?.find((b)=>b.blockType === item._type);
116
- if (null == subField) return null;
117
- const { _id, _type, ...fieldData } = item;
118
- const label = subField.label ?? _type;
119
- const body = /*#__PURE__*/ jsx(GroupField, {
120
- field: {
121
- type: 'group',
122
- name: subField.blockType,
123
- fields: subField.fields,
124
- label: void 0
125
- },
126
- defaultValue: fieldData,
127
- path: arrayElementPath
128
- }, subField.blockType);
129
- return /*#__PURE__*/ jsx(SortableItem, {
130
- id: itemWrapper.id,
131
- label: label ?? subField.blockType,
132
- onAddBelow: ()=>handleInsertBelow(index),
133
- onRemove: ()=>handleRemoveItem(index),
134
- children: body
135
- }, itemWrapper.id);
136
- };
137
- return /*#__PURE__*/ jsxs("div", {
138
- className: `byline-field-blocks ${field.name}`,
139
- children: [
140
- field.label && /*#__PURE__*/ jsx("h3", {
141
- className: classnames('byline-field-blocks-title', blocks_field_module.title),
142
- children: field.label
143
- }),
144
- /*#__PURE__*/ jsxs(DraggableSortable, {
145
- ids: items.map((i)=>i.id),
146
- onDragEnd: handleDragEnd,
147
- className: classnames('byline-field-blocks-stack', blocks_field_module.stack),
148
- children: [
149
- items.map((item, index)=>renderItem(item, index)),
150
- /*#__PURE__*/ jsx("div", {
151
- className: classnames('byline-field-blocks-add-row', blocks_field_module["add-row"]),
152
- children: /*#__PURE__*/ jsx(IconButton, {
153
- onClick: ()=>{
154
- setPendingInsertIndex(null);
155
- setShowAddBlockModal(true);
156
- },
157
- disabled: !selectedBlockName,
158
- "aria-label": "Add block",
159
- children: /*#__PURE__*/ jsx(PlusIcon, {})
160
- })
161
- })
162
- ]
163
- }),
164
- /*#__PURE__*/ jsx(Modal, {
165
- isOpen: showAddBlockModal,
166
- closeOnOverlayClick: true,
167
- onDismiss: ()=>{
168
- setShowAddBlockModal(false);
169
- setPendingInsertIndex(null);
170
- },
171
- children: /*#__PURE__*/ jsxs(Modal.Container, {
172
- style: {
173
- maxWidth: '600px'
174
- },
175
- children: [
176
- /*#__PURE__*/ jsxs(Modal.Header, {
177
- className: classnames('byline-field-blocks-modal-head', blocks_field_module["modal-head"]),
178
- children: [
179
- /*#__PURE__*/ jsx("h3", {
180
- className: classnames('byline-field-blocks-modal-title', blocks_field_module["modal-title"]),
181
- children: "Blocks"
182
- }),
183
- /*#__PURE__*/ jsx(IconButton, {
184
- "arial-label": "Close",
185
- size: "xs",
186
- onClick: ()=>{
187
- setShowAddBlockModal(false);
188
- setPendingInsertIndex(null);
189
- },
190
- children: /*#__PURE__*/ jsx(CloseIcon, {
191
- width: "16px",
192
- height: "16px",
193
- svgClassName: "white-icon"
194
- })
195
- })
196
- ]
197
- }),
198
- /*#__PURE__*/ jsx(Modal.Content, {
199
- className: classnames('byline-field-blocks-card-cursor', blocks_field_module["modal-content"]),
200
- children: /*#__PURE__*/ jsx("div", {
201
- className: classnames('byline-field-blocks-grid', blocks_field_module.grid),
202
- children: availableBlocks.map((b, index)=>/*#__PURE__*/ jsxs(Card, {
203
- hover: true,
204
- onClick: ()=>void handleAddItem(b.blockType, pendingInsertIndex ?? void 0),
205
- className: classnames('byline-field-blocks-card', blocks_field_module.card),
206
- children: [
207
- /*#__PURE__*/ jsxs(Card.Header, {
208
- children: [
209
- /*#__PURE__*/ jsxs("div", {
210
- className: classnames('byline-field-blocks-card-head', blocks_field_module["card-head"]),
211
- children: [
212
- /*#__PURE__*/ jsx(Card.Title, {
213
- className: classnames('byline-field-blocks-card-title', blocks_field_module["card-title"]),
214
- children: b.label ?? b.blockType
215
- }),
216
- /*#__PURE__*/ jsx("span", {
217
- className: classnames('byline-field-blocks-card-index', blocks_field_module["card-index"]),
218
- children: index + 1
219
- })
220
- ]
221
- }),
222
- /*#__PURE__*/ jsx("code", {
223
- className: classnames('byline-field-blocks-card-code', blocks_field_module["card-code"]),
224
- children: b.blockType
225
- })
226
- ]
227
- }),
228
- /*#__PURE__*/ jsx(Card.Content, {
229
- children: /*#__PURE__*/ jsx("p", {
230
- className: classnames('byline-field-blocks-card-body', blocks_field_module["card-body"]),
231
- children: b.helpText ?? b.label ?? b.blockType
232
- })
233
- })
234
- ]
235
- }, b.blockType))
236
- })
237
- })
238
- ]
239
- })
240
- })
241
- ]
242
- });
243
- };
244
- export { BlocksField };
@@ -1,26 +0,0 @@
1
- import "./blocks-field_module.css";
2
- const blocks_field_module = {
3
- title: "title-lxXfG6",
4
- stack: "stack-Xxa89J",
5
- "add-row": "add-row-gEqjM_",
6
- addRow: "add-row-gEqjM_",
7
- "modal-head": "modal-head-BTxR9C",
8
- modalHead: "modal-head-BTxR9C",
9
- "modal-title": "modal-title-jwOfU_",
10
- modalTitle: "modal-title-jwOfU_",
11
- "modal-content": "modal-content-S12b_T",
12
- modalContent: "modal-content-S12b_T",
13
- grid: "grid-gALL6j",
14
- card: "card-O4b_4k",
15
- "card-head": "card-head-yrL68H",
16
- cardHead: "card-head-yrL68H",
17
- "card-title": "card-title-yBgy__",
18
- cardTitle: "card-title-yBgy__",
19
- "card-index": "card-index-XD_vf6",
20
- cardIndex: "card-index-XD_vf6",
21
- "card-code": "card-code-pEAcf6",
22
- cardCode: "card-code-pEAcf6",
23
- "card-body": "card-body-RhabRg",
24
- cardBody: "card-body-RhabRg"
25
- };
26
- export default blocks_field_module;
@@ -1,107 +0,0 @@
1
- :is(.title-lxXfG6, .byline-field-blocks-title) {
2
- font-size: 1rem;
3
- font-weight: var(--font-weight-medium);
4
- margin-bottom: .25rem;
5
- }
6
-
7
- :is(.stack-Xxa89J, .byline-field-blocks-stack) {
8
- gap: var(--spacing-16);
9
- flex-direction: column;
10
- display: flex;
11
- }
12
-
13
- :is(.add-row-gEqjM_, .byline-field-blocks-add-row) {
14
- align-items: center;
15
- gap: var(--spacing-8);
16
- display: flex;
17
- }
18
-
19
- :is(.modal-head-BTxR9C, .byline-field-blocks-modal-head) {
20
- margin-bottom: var(--spacing-8);
21
- padding-top: 1rem;
22
- }
23
-
24
- :is(.modal-title-jwOfU_, .byline-field-blocks-modal-title) {
25
- margin: 0 0 var(--spacing-8) 0;
26
- font-size: var(--font-size-2xl);
27
- }
28
-
29
- :is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
30
- cursor: pointer;
31
- }
32
-
33
- :is(.grid-gALL6j, .byline-field-blocks-grid) {
34
- gap: var(--spacing-16);
35
- grid-template-columns: 1fr;
36
- display: grid;
37
- }
38
-
39
- @media (min-width: 40rem) {
40
- :is(.grid-gALL6j, .byline-field-blocks-grid) {
41
- grid-template-columns: repeat(2, 1fr);
42
- }
43
- }
44
-
45
- @media (min-width: 48rem) {
46
- :is(.grid-gALL6j, .byline-field-blocks-grid) {
47
- grid-template-columns: repeat(3, 1fr);
48
- }
49
- }
50
-
51
- :is(.card-O4b_4k, .byline-field-blocks-card) {
52
- margin-bottom: var(--spacing-8);
53
- }
54
-
55
- :is(.card-head-yrL68H, .byline-field-blocks-card-head) {
56
- justify-content: space-between;
57
- align-items: flex-start;
58
- gap: var(--spacing-8);
59
- display: flex;
60
- }
61
-
62
- :is(.card-title-yBgy__, .byline-field-blocks-card-title) {
63
- font-size: 1.3rem;
64
- line-height: var(--line-height-tight);
65
- }
66
-
67
- :is(.card-index-XD_vf6, .byline-field-blocks-card-index) {
68
- border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
69
- border-radius: var(--border-radius-full);
70
- width: 1.25rem;
71
- height: 1.25rem;
72
- color: var(--gray-400);
73
- font-size: 10px;
74
- font-weight: var(--font-weight-semibold);
75
- font-variant-numeric: tabular-nums;
76
- flex-shrink: 0;
77
- justify-content: center;
78
- align-items: center;
79
- margin-top: .125rem;
80
- display: inline-flex;
81
- }
82
-
83
- :is(.card-code-pEAcf6, .byline-field-blocks-card-code) {
84
- color: var(--gray-400);
85
- margin-top: 0;
86
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
87
- font-size: 12px;
88
- display: block;
89
- }
90
-
91
- :is(.card-body-RhabRg, .byline-field-blocks-card-body) {
92
- color: var(--gray-500);
93
- font-size: var(--font-size-sm);
94
- }
95
-
96
- :is(:is([data-theme="dark"], .dark) .card-index-XD_vf6, :is([data-theme="dark"], .dark) .byline-field-blocks-card-index) {
97
- border-color: var(--gray-700);
98
- }
99
-
100
- :is(:is([data-theme="dark"], .dark) .card-code-pEAcf6, :is([data-theme="dark"], .dark) .byline-field-blocks-card-code) {
101
- color: var(--gray-500);
102
- }
103
-
104
- :is(:is([data-theme="dark"], .dark) .card-body-RhabRg, :is([data-theme="dark"], .dark) .byline-field-blocks-card-body) {
105
- color: var(--gray-200);
106
- }
107
-
@@ -1,16 +0,0 @@
1
- /**
2
- * This Source Code is subject to the terms of the Mozilla Public
3
- * License, v. 2.0. If a copy of the MPL was not distributed with this
4
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
5
- *
6
- * Copyright (c) Infonomic Company Limited
7
- */
8
- import type { CheckboxField as FieldType } from '@byline/core';
9
- export declare const CheckboxField: ({ field, value, defaultValue, onChange, id, path, }: {
10
- field: FieldType;
11
- value?: boolean;
12
- defaultValue?: boolean;
13
- onChange?: (value: boolean) => void;
14
- id?: string;
15
- path?: string;
16
- }) => import("react").JSX.Element;
@@ -1,28 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useFieldError, useFieldValue } from "../../forms/form-context.js";
3
- import { Checkbox } from "../../uikit.js";
4
- import checkbox_field_module from "./checkbox-field.module.js";
5
- const CheckboxField = ({ field, value, defaultValue, onChange, id, path })=>{
6
- const fieldPath = path ?? field.name;
7
- const fieldError = useFieldError(fieldPath);
8
- const fieldValue = useFieldValue(fieldPath);
9
- const checked = value ?? fieldValue ?? defaultValue ?? false;
10
- return /*#__PURE__*/ jsx("div", {
11
- className: `byline-field-checkbox ${field.name} ${checkbox_field_module["field-checkbox"]}`,
12
- children: /*#__PURE__*/ jsx(Checkbox, {
13
- id: id ?? fieldPath,
14
- name: field.name,
15
- label: field.label,
16
- checked: checked,
17
- size: "sm",
18
- helpText: field.helpText,
19
- onCheckedChange: (value)=>{
20
- const next = 'indeterminate' === value ? false : Boolean(value);
21
- onChange?.(next);
22
- },
23
- error: null != fieldError,
24
- errorText: fieldError
25
- })
26
- });
27
- };
28
- export { CheckboxField };
@@ -1,6 +0,0 @@
1
- import "./checkbox-field_module.css";
2
- const checkbox_field_module = {
3
- "field-checkbox": "field-checkbox-H7UwUd",
4
- fieldCheckbox: "field-checkbox-H7UwUd"
5
- };
6
- export default checkbox_field_module;
@@ -1,4 +0,0 @@
1
- :is(.byline-field-checkbox, .field-checkbox-H7UwUd) {
2
- margin: 0;
3
- }
4
-