@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/FormViewer/store/formStore.js

@@ -0,0 +1,84 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useState as a, useLayoutEffect as d, createContext as S, useContext as v } from "react";
+import { create as w } from "zustand";
+import { createFormStoreApi as x } from "./formStoreApi.js";
+const b = () => {
+  const e = w(() => ({
+    layout: "one-slide",
+    tab: null,
+    isMobile: !1,
+    activeStep: {
+      history: [null],
+      current: 0
+    },
+    editableControl: null,
+    editing: !1,
+    preview: !1,
+    initialConfigSnapshot: null,
+    config: {
+      settings: {
+        navArrows: void 0,
+        progressBar: void 0,
+        copyright: !0,
+        slideAnimation: "vertical",
+        layout: "slides",
+        freeNav: !1,
+        questionNumber: !0,
+        enterIndicator: !0
+      },
+      steps: [],
+      theme: {},
+      listStep: {
+        id: "list",
+        title: "",
+        trigger: "",
+        controls: []
+      }
+    }
+  }));
+  return {
+    useStore: e,
+    api: x(e)
+  };
+}, u = S(null), P = ({
+  children: e,
+  editing: t = !1,
+  preview: o = !1,
+  store: c,
+  addEndStep: s,
+  onConfigChange: i,
+  uploadFileFn: n,
+  layout: l = "one-slide"
+}) => {
+  const [r] = a(() => c ?? b()), [m, f] = a(!1);
+  return d(() => {
+    r.api.setProps({
+      editing: t,
+      preview: o,
+      addEndStep: s,
+      onConfigChange: i,
+      uploadFileFn: n,
+      layout: l
+    }), f(!0);
+  }, [
+    s,
+    t,
+    l,
+    i,
+    o,
+    n,
+    r.api
+  ]), /* @__PURE__ */ p(u.Provider, { value: r, children: m ? e : null });
+}, A = () => {
+  const t = v(u) || window.globalFormStore;
+  if (!t)
+    throw new Error(
+      "useFormViewerStore must be used within a FormStoreProvider"
+    );
+  return t;
+};
+export {
+  P as FormStoreProvider,
+  b as createFormStore,
+  A as useFormViewerStore
+};

package/dist/components/FormViewer/store/formStoreApi.d.ts

@@ -59,6 +59,7 @@ export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStor
                 fit?: string | undefined;
                 blendMode?: string | undefined;
             } | undefined;
+            borderRadius?: "sm" | "md" | "lg" | undefined;
             container?: {
                 color?: string | undefined;
                 opacity?: number | undefined;
@@ -67,7 +68,6 @@ export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStor
                 shadowSize?: number | undefined;
                 shadowColor?: string | undefined;
             } | undefined;
-            borderRadius?: "sm" | "md" | "lg" | undefined;
             font?: {
                 color?: string | undefined;
                 fontSize?: number | undefined;
@@ -341,6 +341,7 @@ export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStor
                     fit?: string | undefined;
                     blendMode?: string | undefined;
                 } | undefined;
+                borderRadius?: "sm" | "md" | "lg" | undefined;
                 container?: {
                     color?: string | undefined;
                     opacity?: number | undefined;
@@ -349,7 +350,6 @@ export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStor
                     shadowSize?: number | undefined;
                     shadowColor?: string | undefined;
                 } | undefined;
-                borderRadius?: "sm" | "md" | "lg" | undefined;
                 font?: {
                     color?: string | undefined;
                     fontSize?: number | undefined;
@@ -622,6 +622,7 @@ export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStor
                     fit?: string | undefined;
                     blendMode?: string | undefined;
                 } | undefined;
+                borderRadius?: "sm" | "md" | "lg" | undefined;
                 container?: {
                     color?: string | undefined;
                     opacity?: number | undefined;
@@ -630,7 +631,6 @@ export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStor
                     shadowSize?: number | undefined;
                     shadowColor?: string | undefined;
                 } | undefined;
-                borderRadius?: "sm" | "md" | "lg" | undefined;
                 font?: {
                     color?: string | undefined;
                     fontSize?: number | undefined;

package/dist/components/FormViewer/store/formStoreApi.js

@@ -0,0 +1,383 @@
+import { arrayMove as d } from "@dnd-kit/sortable";
+import { activeStepIdReselect as E } from "./selectors.js";
+const O = (e) => {
+  const r = (n) => {
+    e.setState((t) => ({
+      ...t,
+      ...n
+    }));
+  }, m = () => e.getState().config, s = () => {
+    e.getState().onConfigChange?.(m());
+  }, u = (n) => {
+    e.setState({ layout: n });
+  }, S = (n) => {
+    e.setState((t) => ({
+      ...t,
+      config: {
+        ...t.config,
+        settings: {
+          ...t.config.settings,
+          ...n
+        }
+      }
+    })), s();
+  }, C = (n) => {
+    e.setState((t) => ({
+      ...t,
+      config: {
+        ...t.config,
+        theme: {
+          ...t.config.theme,
+          ...n,
+          background: {
+            ...t.config.theme.background,
+            ...n.background
+          },
+          container: {
+            ...t.config.theme.container,
+            ...n.container
+          },
+          title: {
+            ...t.config.theme.title,
+            ...n?.title
+          },
+          description: {
+            ...t.config.theme.description,
+            ...n?.description
+          }
+        }
+      }
+    })), s();
+  }, y = (n) => {
+    e.setState((t) => ({
+      ...t,
+      config: {
+        ...t.config,
+        theme: {
+          ...t.config.theme,
+          container: {
+            ...t.config.theme.container,
+            ...n
+          }
+        }
+      }
+    })), s();
+  }, b = (n) => {
+    e.setState((t) => ({
+      ...t,
+      config: {
+        ...t.config,
+        theme: {
+          ...t.config.theme,
+          title: {
+            ...t.config.theme.title,
+            ...n
+          }
+        }
+      }
+    })), s();
+  }, I = (n) => {
+    e.setState((t) => ({
+      ...t,
+      config: {
+        ...t.config,
+        theme: {
+          ...t.config.theme,
+          description: {
+            ...t.config.theme.description,
+            ...n
+          }
+        }
+      }
+    })), s();
+  }, k = (n) => {
+    e.setState((t) => ({
+      ...t,
+      config: {
+        ...t.config,
+        theme: {
+          ...t.config.theme,
+          font: {
+            ...t.config.theme.font,
+            ...n
+          }
+        }
+      }
+    })), s();
+  }, T = (n) => {
+    e.setState((t) => ({
+      ...t,
+      config: {
+        ...t.config,
+        steps: n
+      }
+    })), s();
+  }, x = (n, t) => {
+    e.setState((i) => {
+      const o = [...i.config.steps];
+      return t !== void 0 && t >= 0 && t < o.length ? o.splice(t, 0, n) : o.push(n), {
+        ...i,
+        config: {
+          ...i.config,
+          steps: o
+        }
+      };
+    }), h(n.id), s();
+  }, A = (n) => {
+    e.setState((i) => ({
+      ...i,
+      config: {
+        ...i.config,
+        steps: i.config.steps.filter((o) => o.id !== n) || []
+      }
+    })), E(e.getState()) === n && l(), s();
+  }, F = (n, t) => {
+    n === "list" ? e.setState((i) => ({
+      ...i,
+      config: {
+        ...i.config,
+        listStep: { ...i.config.listStep, ...t }
+      }
+    })) : e.setState((i) => ({
+      ...i,
+      config: {
+        ...i.config,
+        steps: i.config.steps.map(
+          (o) => o.id === n ? {
+            ...o,
+            ...t,
+            theme: {
+              ...o.theme,
+              ...t.theme,
+              background: {
+                ...o?.theme?.background,
+                ...t.theme?.background
+              },
+              container: {
+                ...o?.theme?.container,
+                ...t.theme?.container
+              },
+              title: {
+                ...o?.theme?.title,
+                ...t.theme?.title
+              },
+              description: {
+                ...o?.theme?.description,
+                ...t.theme?.description
+              }
+            }
+          } : o
+        )
+      }
+    })), s();
+  }, M = (n, t, i) => {
+    e.setState((o) => ({
+      ...o,
+      config: {
+        ...o.config,
+        steps: o.config.steps.map(
+          (c) => c.id === n ? {
+            ...c,
+            controls: c.controls?.map(
+              (a) => a.id === t ? { ...a, ...i } : a
+            )
+          } : c
+        )
+      }
+    })), s();
+  }, P = (n, t) => {
+    e.setState((i) => {
+      const o = i.config.steps.findIndex((g) => g.id === n), c = i.config.steps.findIndex((g) => g.id === t), a = d(i.config.steps, o, c);
+      return { ...i, config: { ...i.config, steps: a } };
+    }), s();
+  }, D = (n, t, i) => {
+    e.setState((o) => ({
+      ...o,
+      config: {
+        ...o.config,
+        steps: o.config.steps.map((c) => {
+          if (c.id === n && c.controls) {
+            const a = c.controls.findIndex((f) => f.id === t), g = c.controls.findIndex((f) => f.id === i), B = d(c.controls, a, g);
+            return { ...c, controls: B };
+          }
+          return c;
+        })
+      }
+    })), s();
+  }, L = (n, t) => {
+    e.setState((i) => ({
+      ...i,
+      config: {
+        ...i.config,
+        steps: i.config.steps.map(
+          (o) => o.id === n ? {
+            ...o,
+            controls: o.controls ? [...o.controls, t] : [t]
+          } : o
+        )
+      }
+    })), s();
+  }, w = (n, t) => {
+    e.setState((i) => ({
+      ...i,
+      config: {
+        ...i.config,
+        steps: i.config.steps.map(
+          (o) => o.id === n ? {
+            ...o,
+            controls: o.controls ? o.controls.filter((c) => c.id !== t) : []
+          } : o
+        )
+      }
+    })), s();
+  }, q = (n, t) => {
+    e.setState((i) => ({
+      prev: i,
+      config: {
+        ...i.config,
+        steps: i.config.steps.map(
+          (o) => o.id === n ? {
+            ...o,
+            conditions: o.conditions ? [...o.conditions, t] : [t]
+          } : o
+        )
+      }
+    })), s();
+  }, R = (n, t, i) => {
+    e.setState((o) => ({
+      ...o,
+      config: {
+        ...o.config,
+        steps: o.config.steps.map(
+          (c) => c.id === n && c.conditions?.at(t) ? {
+            ...c,
+            conditions: c.conditions.map(
+              (a, g) => g === t ? { ...a, ...i } : a
+            )
+          } : c
+        )
+      }
+    })), s();
+  }, V = (n, t) => {
+    e.setState((i) => ({
+      ...i,
+      config: {
+        ...i.config,
+        steps: i.config.steps.map(
+          (o) => o.id === n && o.conditions?.at(t) ? {
+            ...o,
+            conditions: o.conditions.filter(
+              (c, a) => a !== t
+            )
+          } : o
+        )
+      }
+    })), s();
+  }, _ = (n) => {
+    e.setState({ isMobile: n });
+  }, $ = (n, { silent: t = !1 } = {}) => {
+    const i = e.getInitialState();
+    e.setState((o) => ({
+      ...o,
+      activeStep: i.activeStep,
+      config: {
+        ...o.config,
+        listStep: n?.listStep || i.config.listStep,
+        steps: n?.steps || i.config.steps,
+        settings: n?.settings || i.config.settings,
+        theme: n?.theme || i.config.theme
+      }
+    })), e.setState((o) => ({
+      ...o,
+      initialConfigSnapshot: n
+    })), t || s();
+  }, h = (n) => {
+    e.setState((t) => {
+      const i = [
+        ...t.activeStep.history.slice(0, t.activeStep.current + 1),
+        n
+      ];
+      return {
+        ...t,
+        activeStep: {
+          history: i,
+          current: i.length - 1
+        }
+      };
+    });
+  }, j = (n = 1) => {
+    e.setState((t) => ({
+      ...t,
+      activeStep: {
+        history: t.activeStep.history,
+        current: Math.max(0, t.activeStep.current - n)
+      }
+    }));
+  }, z = (n = 1) => {
+    e.setState((t) => ({
+      ...t,
+      activeStep: {
+        history: t.activeStep.history,
+        current: Math.min(
+          t.activeStep.history.length - 1,
+          t.activeStep.current + n
+        )
+      }
+    }));
+  }, l = () => {
+    e.setState({
+      activeStep: {
+        history: [],
+        current: 0
+      }
+    });
+  };
+  return {
+    applyTheme: (n) => {
+      e.setState((t) => ({
+        ...t,
+        config: {
+          ...t.config,
+          theme: n
+        }
+      })), s();
+    },
+    setLayout: u,
+    patchSettingsData: S,
+    patchThemeData: C,
+    patchContainerTheme: y,
+    patchTitleProperties: b,
+    patchDescriptionProperties: I,
+    patchCommonFontProperties: k,
+    setSteps: T,
+    addStep: x,
+    removeStep: A,
+    updateStep: F,
+    updateControl: M,
+    reorderSteps: P,
+    reorderControls: D,
+    addControl: L,
+    removeControl: w,
+    addCondition: q,
+    updateCondition: R,
+    removeCondition: V,
+    setIsMobile: _,
+    setConfig: $,
+    setActiveStepId: h,
+    setFormLayout: (n) => {
+      S({ layout: n }), s();
+    },
+    scrollToControl: (n) => {
+      const t = document.querySelector(`[data-control-id='${n}']`);
+      t && t.scrollIntoView({ behavior: "smooth", block: "center" });
+    },
+    getConfig: m,
+    setProps: r,
+    forwardActiveStep: z,
+    backActiveStep: j,
+    resetActiveStep: l
+  };
+};
+export {
+  O as createFormStoreApi
+};