@crediblemark/build 0.22.2 → 0.22.7

package/README.md

@@ -17,11 +17,7 @@ The open-source visual editor for React. Build complex, high-performance page bu
 ## Installation
 
 ```bash
-npm install @crediblemark/build
-# or
-yarn add @crediblemark/build
-# or
-pnpm add @crediblemark/build
+bun add @crediblemark/build
 ```
 
 ## Quick Start

package/dist/ArrayField-EPM4TV3J.mjs

@@ -0,0 +1,538 @@
+import {
+  SubField
+} from "./chunk-RDTXKOE7.mjs";
+import {
+  DragIcon,
+  createDynamicCollisionDetector,
+  setDeep,
+  useSensors
+} from "./chunk-K27LFPQL.mjs";
+import {
+  getDeep,
+  useFieldStore,
+  useFieldStoreApi,
+  useNestedFieldContext
+} from "./chunk-2JUMF5G3.mjs";
+import "./chunk-4PJ4QMWI.mjs";
+import "./chunk-AL77I3BV.mjs";
+import {
+  IconButton
+} from "./chunk-T6RT6PV4.mjs";
+import "./chunk-NYBWAKLT.mjs";
+import "./chunk-67TMLSKM.mjs";
+import "./chunk-JNMMY5D7.mjs";
+import {
+  Copy,
+  List,
+  Plus,
+  Trash,
+  reorder,
+  replace,
+  useAppStore,
+  useAppStoreApi
+} from "./chunk-ZY24NW7X.mjs";
+import {
+  populateIds
+} from "./chunk-64A37UUC.mjs";
+import "./chunk-SMAWAXVX.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-BFHV72KK.mjs";
+import {
+  defaultSlots,
+  walkField
+} from "./chunk-7LXZOPYT.mjs";
+import "./chunk-AFVEAZTD.mjs";
+
+// css-module:/home/crediblemark/Project/Credibuild/components/AutoField/fields/ArrayField/styles.module.css#css-module
+var styles_module_default = { "ArrayField": "_ArrayField_1q029_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1q029_13", "ArrayField-addButton": "_ArrayField-addButton_1q029_18", "ArrayField--hasItems": "_ArrayField--hasItems_1q029_33", "ArrayField-inner": "_ArrayField-inner_1q029_59", "ArrayFieldItem": "_ArrayFieldItem_1q029_67", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1q029_78", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1q029_82", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1q029_97", "ArrayFieldItem--noFields": "_ArrayFieldItem--noFields_1q029_122", "ArrayField--addDisabled": "_ArrayField--addDisabled_1q029_131", "ArrayFieldItem-body": "_ArrayFieldItem-body_1q029_170", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1q029_179", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1q029_187", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1q029_193" };
+
+// components/AutoField/fields/ArrayField/index.tsx
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// components/Sortable/index.tsx
+import { DragDropProvider } from "@dnd-kit/react";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { jsx } from "react/jsx-runtime";
+var SortableProvider = ({
+  children,
+  onDragStart,
+  onDragEnd,
+  onMove
+}) => {
+  const sensors = useSensors({
+    mouse: { distance: { value: 5 } }
+  });
+  return /* @__PURE__ */ jsx(
+    DragDropProvider,
+    {
+      sensors,
+      onDragStart: (event) => onDragStart(event.operation.source?.id.toString() ?? ""),
+      onDragOver: (event, manager) => {
+        event.preventDefault();
+        const { operation } = event;
+        const { source, target } = operation;
+        if (!source || !target) return;
+        let sourceIndex = source.data.index;
+        let targetIndex = target.data.index;
+        const collisionData = manager.collisionObserver.collisions[0]?.data;
+        if (sourceIndex !== targetIndex && source.id !== target.id) {
+          const collisionPosition = collisionData?.direction === "up" ? "before" : "after";
+          if (targetIndex >= sourceIndex) {
+            targetIndex = targetIndex - 1;
+          }
+          if (collisionPosition === "after") {
+            targetIndex = targetIndex + 1;
+          }
+          onMove({
+            source: sourceIndex,
+            target: targetIndex
+          });
+        }
+      },
+      onDragEnd: () => {
+        setTimeout(() => {
+          onDragEnd();
+        }, 250);
+      },
+      children
+    }
+  );
+};
+var Sortable = ({
+  id,
+  index,
+  disabled,
+  children,
+  type = "item"
+}) => {
+  const {
+    ref: sortableRef,
+    isDragging,
+    isDropping,
+    handleRef
+  } = useSortable({
+    id,
+    type,
+    index,
+    disabled,
+    data: { index },
+    collisionDetector: createDynamicCollisionDetector("y")
+  });
+  return children({ isDragging, isDropping, ref: sortableRef, handleRef });
+};
+
+// components/AutoField/fields/ArrayField/index.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var getClassName = get_class_name_factory_default("ArrayField", styles_module_default);
+var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default);
+var ItemSummaryInner = ({
+  index,
+  originalIndex,
+  field,
+  name
+}) => {
+  const data = useFieldStore((s) => {
+    const path = `${[name]}[${index}]`;
+    return getDeep(s, path);
+  });
+  const itemSummary = useMemo(() => {
+    if (data && field.getItemSummary) {
+      return field.getItemSummary(data, index);
+    }
+    return `Item #${originalIndex}`;
+  }, [data, field, originalIndex, index]);
+  return itemSummary;
+};
+var ItemSummary = memo(ItemSummaryInner);
+var ArrayFieldItemInternal = ({
+  id,
+  arrayId,
+  index,
+  dragIndex,
+  originalIndex,
+  field,
+  onChange,
+  onToggleExpand,
+  readOnly,
+  actions,
+  name,
+  localName
+}) => {
+  const isExpanded = useAppStore((s) => {
+    return s.state.ui.arrayState[arrayId]?.openId === id;
+  });
+  const canEdit = useAppStore(
+    (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
+  );
+  const hasVisibleFields = useMemo(() => {
+    if (!field.arrayFields) {
+      return false;
+    }
+    return Object.values(field.arrayFields).some(
+      (subField) => subField.type !== "slot" && subField.visible !== false
+    );
+  }, [field.arrayFields]);
+  return /* @__PURE__ */ jsx2(Sortable, { id, index: dragIndex, disabled: readOnly, children: ({ isDragging, ref, handleRef }) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: getClassNameItem({
+        isExpanded: isExpanded && hasVisibleFields,
+        isDragging,
+        noFields: !hasVisibleFields
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: handleRef,
+            onClick: (e) => {
+              if (isDragging) return;
+              e.preventDefault();
+              e.stopPropagation();
+              if (!hasVisibleFields) return;
+              onToggleExpand(id, isExpanded);
+            },
+            className: getClassNameItem("summary"),
+            children: [
+              /* @__PURE__ */ jsx2(
+                ItemSummary,
+                {
+                  index,
+                  originalIndex,
+                  field,
+                  name
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: getClassNameItem("rhs"), children: [
+                !readOnly && /* @__PURE__ */ jsx2("div", { className: getClassNameItem("actions"), children: actions }),
+                /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(DragIcon, {}) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: getClassNameItem("body"), children: isExpanded && hasVisibleFields && /* @__PURE__ */ jsx2("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map((subName) => {
+          const subField = field.arrayFields[subName];
+          return /* @__PURE__ */ jsx2(
+            SubField,
+            {
+              id: `${id}_${subName}`,
+              name,
+              index,
+              subName,
+              localName,
+              field: subField,
+              onChange,
+              forceReadOnly: !canEdit
+            },
+            `${id}_${subName}_${index}`
+          );
+        }) }) })
+      ]
+    }
+  ) });
+};
+var ArrayFieldItem = memo(ArrayFieldItemInternal);
+var ArrayField = ({
+  field,
+  onChange,
+  id,
+  name = id,
+  label,
+  labelIcon,
+  readOnly,
+  Label = (props) => /* @__PURE__ */ jsx2("div", { ...props })
+}) => {
+  const setUi = useAppStore((s) => s.setUi);
+  const appStoreApi = useAppStoreApi();
+  const fieldStore = useFieldStoreApi();
+  const { localName = name } = useNestedFieldContext();
+  const getValue = useCallback(() => getDeep(fieldStore.getState(), name) ?? [], [fieldStore, name]);
+  const getArrayState = useCallback(() => {
+    const { state } = appStoreApi.getState();
+    const thisState = state.ui.arrayState[id];
+    if (thisState?.items?.length) return thisState;
+    const value = getValue();
+    return {
+      items: Array.from(value || []).map((item, idx) => {
+        return {
+          _originalIndex: idx,
+          _currentIndex: idx,
+          _arrayId: `${id}-${idx}`
+        };
+      }),
+      openId: ""
+    };
+  }, [appStoreApi, id, getValue]);
+  const numItems = useFieldStore(() => {
+    return getValue().length;
+  });
+  const defaultArrayState = useMemo(getArrayState, [getArrayState]);
+  const mirror = useAppStore((s) => {
+    const thisArrayState = s.state.ui.arrayState[id];
+    return thisArrayState ?? defaultArrayState;
+  });
+  const appStore = useAppStoreApi();
+  const mapArrayStateToUi = useCallback(
+    (partialArrayState) => {
+      const state = appStore.getState().state;
+      return {
+        arrayState: {
+          ...state.ui.arrayState,
+          [id]: { ...getArrayState(), ...partialArrayState }
+        }
+      };
+    },
+    [appStore, id, getArrayState]
+  );
+  const getHighestIndex = useCallback(() => {
+    return getArrayState().items.reduce(
+      (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
+      -1
+    );
+  }, [getArrayState]);
+  const regenerateArrayState = useCallback((value) => {
+    let highestIndex = getHighestIndex();
+    const arrayState = getArrayState();
+    const newItems = Array.from(value || []).map((item, idx) => {
+      const arrayStateItem = arrayState.items[idx];
+      const newItem = {
+        _originalIndex: arrayStateItem?._originalIndex ?? highestIndex + 1,
+        _currentIndex: arrayStateItem?._currentIndex ?? idx,
+        _arrayId: arrayState.items[idx]?._arrayId || `${id}-${highestIndex + 1}`
+      };
+      if (newItem._originalIndex > highestIndex) {
+        highestIndex = newItem._originalIndex;
+      }
+      return newItem;
+    });
+    return { ...arrayState, items: newItems };
+  }, [getArrayState, getHighestIndex, id]);
+  const [draggedItem, setDraggedItem] = useState("");
+  const isDraggingAny = !!draggedItem;
+  const valueRef = useRef([]);
+  useEffect(() => {
+    valueRef.current = getValue();
+  }, [getValue]);
+  const uniqifyItem = useCallback(
+    (val) => {
+      if (field.type !== "array" || !field.arrayFields) return;
+      const config = appStore.getState().config;
+      return walkField({
+        value: val,
+        fields: field.arrayFields,
+        mappers: {
+          slot: ({ value }) => {
+            const content = value;
+            return content.map((item) => populateIds(item, config, true));
+          }
+        },
+        config
+      });
+    },
+    [appStore, field]
+  );
+  const syncCurrentIndexes = useCallback(() => {
+    const arrayState = getArrayState();
+    const newArrayStateItems = arrayState.items.map((item, index) => ({
+      ...item,
+      _currentIndex: index
+    }));
+    const state = appStore.getState().state;
+    const newUi = {
+      arrayState: {
+        ...state.ui.arrayState,
+        [id]: { ...arrayState, items: newArrayStateItems }
+      }
+    };
+    setUi(newUi, false);
+  }, [appStore, id, getArrayState, setUi]);
+  const updateValue = useCallback(
+    (newValue) => {
+      const newArrayState = regenerateArrayState(newValue);
+      setUi(mapArrayStateToUi(newArrayState), false);
+      onChange(newValue);
+    },
+    [regenerateArrayState, setUi, mapArrayStateToUi, onChange]
+  );
+  useEffect(() => {
+    const newArrayState = regenerateArrayState(getValue());
+    setUi(mapArrayStateToUi(newArrayState), false);
+  }, [numItems, getValue, mapArrayStateToUi, regenerateArrayState, setUi]);
+  if (field.type !== "array" || !field.arrayFields) {
+    return null;
+  }
+  const addDisabled = field.max !== void 0 && mirror?.items.length >= field.max || readOnly;
+  return /* @__PURE__ */ jsx2(
+    Label,
+    {
+      label: label || name,
+      icon: labelIcon || /* @__PURE__ */ jsx2(List, { size: 16 }),
+      el: "div",
+      readOnly,
+      children: /* @__PURE__ */ jsx2(
+        SortableProvider,
+        {
+          onDragStart: (id2) => {
+            valueRef.current = getValue();
+            setDraggedItem(id2);
+            syncCurrentIndexes();
+          },
+          onDragEnd: () => {
+            setDraggedItem("");
+            onChange(valueRef.current);
+            const currentFieldVal = fieldStore.getState();
+            fieldStore.setState(setDeep(currentFieldVal, name, valueRef.current));
+            syncCurrentIndexes();
+          },
+          onMove: (move) => {
+            const arrayState = getArrayState();
+            if (arrayState.items[move.source]._arrayId !== draggedItem) {
+              return;
+            }
+            const newValue = reorder(valueRef.current, move.source, move.target);
+            const newArrayStateItems = reorder(
+              arrayState.items,
+              move.source,
+              move.target
+            );
+            const state = appStore.getState().state;
+            const newUi = {
+              arrayState: {
+                ...state.ui.arrayState,
+                [id]: { ...arrayState, items: newArrayStateItems }
+              }
+            };
+            setUi(newUi, false);
+            valueRef.current = newValue;
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: getClassName({
+                hasItems: numItems > 0,
+                addDisabled
+              }),
+              children: [
+                mirror.items.length > 0 && /* @__PURE__ */ jsx2("div", { className: getClassName("inner"), "data-dnd-container": true, children: mirror.items.map((item, index) => {
+                  const {
+                    _arrayId = `${id}-${index}`,
+                    _originalIndex = index,
+                    _currentIndex = index
+                  } = item;
+                  return /* @__PURE__ */ jsx2(
+                    ArrayFieldItem,
+                    {
+                      index: _currentIndex,
+                      dragIndex: index,
+                      originalIndex: _originalIndex,
+                      arrayId: id,
+                      id: _arrayId,
+                      readOnly,
+                      field,
+                      name,
+                      localName,
+                      onChange: (val, ui, subName) => {
+                        const value = getValue();
+                        const data = Array.from(value || [])[index] || {};
+                        onChange(
+                          replace(value, index, {
+                            ...data,
+                            [subName]: val
+                          }),
+                          ui
+                        );
+                      },
+                      onToggleExpand: (id2, isExpanded) => {
+                        if (isExpanded) {
+                          setUi(
+                            mapArrayStateToUi({
+                              openId: ""
+                            })
+                          );
+                        } else {
+                          setUi(
+                            mapArrayStateToUi({
+                              openId: id2
+                            })
+                          );
+                        }
+                      },
+                      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx2("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx2(
+                          IconButton,
+                          {
+                            type: "button",
+                            disabled: !!addDisabled,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              const value = getValue();
+                              const existingValue = [...value || []];
+                              const newItem = uniqifyItem(existingValue[index]);
+                              existingValue.splice(index, 0, newItem);
+                              updateValue(existingValue);
+                            },
+                            title: "Duplicate",
+                            children: /* @__PURE__ */ jsx2(Copy, { size: 16 })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx2("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx2(
+                          IconButton,
+                          {
+                            type: "button",
+                            disabled: field.min !== void 0 && field.min >= mirror.items.length,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              const value = getValue();
+                              const existingValue = [...value || []];
+                              existingValue.splice(index, 1);
+                              updateValue(existingValue);
+                            },
+                            title: "Delete",
+                            children: /* @__PURE__ */ jsx2(Trash, { size: 16 })
+                          }
+                        ) })
+                      ] })
+                    },
+                    _arrayId
+                  );
+                }) }),
+                !addDisabled && /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    className: getClassName("addButton"),
+                    onClick: () => {
+                      if (isDraggingAny) return;
+                      const value = getValue();
+                      const existingValue = value || [];
+                      const defaultProps = typeof field.defaultItemProps === "function" ? field.defaultItemProps(existingValue.length) : field.defaultItemProps ?? {};
+                      const newItem = defaultSlots(
+                        uniqifyItem(defaultProps),
+                        field.arrayFields
+                      );
+                      const newValue = [...existingValue, newItem];
+                      updateValue(newValue);
+                    },
+                    children: /* @__PURE__ */ jsx2(Plus, { size: 21 })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  ArrayField
+};