@makeswift/runtime 0.13.1 → 0.14.0

package/dist/esm/components/builtin/Embed/Embed.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { cx } from "@emotion/css";
+const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
+<svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="78" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="116" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect y="20" width="120" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="128" y="20" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="166" y="20" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect y="60" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="20" y="80" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="40" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="88" y="100" width="110" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="206" y="100" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="238" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="40" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="88" y="120" width="50" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="146" y="120" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="178" y="120" width="90" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="276" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="20" y="140" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect y="160" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+</svg>
+</div>`;
+const SCRIPT_TAG = "script";
+const Embed = forwardRef(function Embed2({ id, width, margin, html = defaultHtml }, ref) {
+  const [container, setContainer] = useState(null);
+  const [shouldRender, setShouldRender] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setShouldRender(true);
+  }, []);
+  useImperativeHandle(ref, () => container, [container]);
+  useEffect(() => {
+    if (!container)
+      return;
+    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+      acceptNode(node) {
+        return node.tagName.toLowerCase() === SCRIPT_TAG ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      }
+    });
+    const nodes = [];
+    while (walker.nextNode())
+      nodes.push(walker.currentNode);
+    async function executeScriptsInOrder() {
+      for (let i = 0; i < nodes.length; i++) {
+        await new Promise((resolve) => {
+          const node = nodes[i];
+          const script = node.ownerDocument.createElement(SCRIPT_TAG);
+          script.textContent = node.textContent;
+          Array.from(node.attributes).forEach(({ name, value }) => {
+            script.setAttribute(name, value);
+          });
+          script.onload = () => resolve();
+          script.onerror = () => resolve();
+          node.parentNode?.insertBefore(script, node);
+          node.parentNode?.removeChild(node);
+          if (!script.hasAttribute("src"))
+            resolve();
+        });
+      }
+    }
+    executeScriptsInOrder().catch((error) => {
+      console.error(error);
+    });
+  }, [container, html]);
+  const className = useStyle({ minHeight: 15 });
+  if (shouldRender === false)
+    return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setContainer,
+      id,
+      className: cx(className, width, margin),
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+var Embed_default = Embed;
+export {
+  Embed_default as default
+};
+//# sourceMappingURL=Embed.js.map

package/dist/esm/components/builtin/Embed/Embed.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { ElementIDValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"mappings":"AA6GI;AA3GJ,SAAS,UAAU,WAAW,YAAiB,2BAA2B;AAG1E,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAS,UAAU;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,4BAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,sBAAoB,KAAK,MAAM,WAAW,CAAC,SAAS,CAAC;AAErD,YAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,YAAY,SAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}

package/dist/esm/components/builtin/Embed/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Embed";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Embed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Embed/index.tsx"],"sourcesContent":["export { default } from './Embed'\n"],"mappings":"AAAA,SAAS,WAAAA,gBAAe;","names":["default"]}

package/dist/esm/components/builtin/Embed/register.js

@@ -0,0 +1,25 @@
+import dynamic from "next/dynamic";
+import { forwardNextDynamicRef } from "../../../next/dynamic";
+import { Props } from "../../../prop-controllers";
+import { MakeswiftComponentType } from "../constants";
+import { ComponentIcon } from "../../../state/modules/components-meta";
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Embed")))),
+    {
+      type: MakeswiftComponentType.Embed,
+      label: "Embed",
+      icon: ComponentIcon.Code,
+      props: {
+        id: Props.ElementID(),
+        html: Props.TextArea({ label: "Code", rows: 20 }),
+        width: Props.Width({ format: Props.Width.Format.ClassName }),
+        margin: Props.Margin({ format: Props.Margin.Format.ClassName })
+      }
+    }
+  );
+}
+export {
+  registerComponent
+};
+//# sourceMappingURL=register.js.map

package/dist/esm/components/builtin/Embed/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Embed/register.ts"],"sourcesContent":["import dynamic from 'next/dynamic'\n\nimport { forwardNextDynamicRef } from '../../../next/dynamic'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    forwardNextDynamicRef(patch => dynamic(() => patch(import('./Embed')))),\n    {\n      type: MakeswiftComponentType.Embed,\n      label: 'Embed',\n      icon: ComponentIcon.Code,\n      props: {\n        id: Props.ElementID(),\n        html: Props.TextArea({ label: 'Code', rows: 20 }),\n        width: Props.Width({ format: Props.Width.Format.ClassName }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,OAAO,aAAa;AAEpB,SAAS,6BAA6B;AACtC,SAAS,aAAa;AAEtB,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAEvB,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,sBAAsB,WAAS,QAAQ,MAAM,MAAM,OAAO,SAAS,CAAC,CAAC,CAAC;AAAA,IACtE;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,cAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,MAAM,MAAM,SAAS,EAAE,OAAO,QAAQ,MAAM,GAAG,CAAC;AAAA,QAChD,OAAO,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA,QAC3D,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/components/builtin/Form/Form.js

@@ -0,0 +1,383 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import { Formik, getIn } from "formik";
+import { Check12 } from "../../icons/Check12";
+import { getSizeHeight as getInputSizeHeight } from "./components/Field/components/Input";
+import {
+  Sizes,
+  Provider as FormContextProvider,
+  Alignments
+} from "./context/FormContext";
+import Placeholder from "./components/Placeholder";
+import Field from "./components/Field";
+import Spinner from "./components/Spinner";
+import Button from "../Button";
+import { Link } from "../../shared/Link";
+import { getBox } from "../../../box-model";
+import { useTableFormFieldRefs } from "../../hooks/useTableFormFieldRefs";
+import { useMakeswiftClient } from "../../../api/react";
+import { cx } from "@emotion/css";
+import { useResponsiveGridItem, useResponsiveStyle } from "../../utils/responsive-style";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { useTable } from "../../../runtimes/react/hooks/makeswift-api";
+const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
+function getSizeFontSize(size) {
+  switch (size) {
+    case Sizes.SMALL:
+      return 12;
+    case Sizes.MEDIUM:
+      return 14;
+    case Sizes.LARGE:
+      return 18;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+const GridForm = forwardRef(function GridFrom({ className, size, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({ display: "flex", flexWrap: "wrap", width: "100%" }),
+        useStyle(
+          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
+            fontSize: getSizeFontSize(size2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+});
+const GridItem = forwardRef(function GridItem2({ className, grid, index, rowGap, columnGap, ...restOfProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      className: cx(
+        useStyle({ alignSelf: "flex-end", flexDirection: "column" }),
+        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),
+        className
+      )
+    }
+  );
+});
+function getAlignmentMargin(alignment) {
+  switch (alignment) {
+    case Alignments.LEFT:
+      return "0 auto 0 0";
+    case Alignments.RIGHT:
+      return "0 0 0 auto";
+    default:
+      return "0 auto";
+  }
+}
+function StyledButton({ className, size, alignment, ...restOfProps }) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...restOfProps,
+      as: "button",
+      className: cx(
+        useStyle({ display: "flex", alignItems: "center", justifyContent: "center" }),
+        useStyle(
+          useResponsiveStyle(
+            [size, alignment],
+            ([size2 = Sizes.MEDIUM, alignment2 = Alignments.CENTER]) => ({
+              minHeight: getInputSizeHeight(size2),
+              maxHeight: getInputSizeHeight(size2),
+              margin: getAlignmentMargin(alignment2),
+              paddingTop: 0,
+              paddingBottom: 0
+            })
+          )
+        ),
+        className
+      )
+    }
+  );
+}
+function ErrorContainer({ className, ...restOfProps }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle({
+          padding: "8px 16px",
+          backgroundColor: "#f19eb9",
+          borderRadius: 4,
+          marginTop: 16
+        }),
+        className
+      )
+    }
+  );
+}
+function IconContainer({ className, ...restOfProps }) {
+  return /* @__PURE__ */ jsx("div", { ...restOfProps, className: cx(useStyle({ fill: "currentColor" }), className) });
+}
+function ErrorMessage({ className, ...restOfProps }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle({ fontSize: 12, margin: "8px 0", color: "rgba(127, 0, 0, 0.95)" }),
+        className
+      )
+    }
+  );
+}
+function getTableColumnDefaultValue(tableColumn) {
+  switch (tableColumn.__typename) {
+    case "CheckboxTableColumn":
+      return false;
+    case "MultipleSelectTableColumn":
+      return [];
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "SingleSelectTableColumn":
+    case "PhoneNumberTableColumn":
+    case "EmailTableColumn":
+    case "URLTableColumn":
+    case "NumberTableColumn":
+    default:
+      return "";
+  }
+}
+const Form = forwardRef(function Form2({
+  id,
+  tableId,
+  fields: fieldsProp,
+  submitLabel = "Submit",
+  submitLink,
+  shape,
+  size,
+  contrast,
+  brandColor,
+  gap,
+  width,
+  margin,
+  submitTextStyle,
+  submitVariant,
+  submitTextColor,
+  submitWidth,
+  submitAlignment,
+  labelTextStyle,
+  labelTextColor
+}, ref) {
+  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp]);
+  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp]);
+  const table = useTable(tableId ?? null);
+  const client = useMakeswiftClient();
+  const [refEl, setRefEl] = useState(null);
+  const [propControllers, setPropControllers] = useState(null);
+  const [initialValues, setInitialValues] = useState(
+    () => fields.reduce((acc, formField) => {
+      const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+      const defaultValue = formField ? formField.defaultValue : null;
+      if (tableColumn) {
+        acc[tableColumn.name] = defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue;
+      }
+      return acc;
+    }, {})
+  );
+  const controller = propControllers?.fields;
+  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length });
+  const [isDone, setIsDone] = useState(false);
+  const linkRef = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      getDomNode() {
+        return refEl instanceof Element ? refEl : null;
+      },
+      getBoxModel() {
+        return refEl instanceof Element ? getBox(refEl) : null;
+      },
+      setPropControllers
+    }),
+    [refEl, setPropControllers]
+  );
+  useEffect(() => {
+    container(refEl);
+  }, [container, refEl]);
+  useEffect(() => {
+    if (!isDone)
+      return;
+    let timeoutId = setTimeout(() => setIsDone(false), 2500);
+    return () => clearTimeout(timeoutId);
+  }, [isDone]);
+  function getTableColumn({ tableColumnId }) {
+    return table && table.columns.find((field) => tableColumnId === field.id);
+  }
+  async function handleSubmit(values, { setSubmitting, resetForm, setStatus }) {
+    if (table) {
+      const columns = [];
+      fields.forEach((field) => {
+        const tableColumn = getTableColumn(field);
+        if (tableColumn) {
+          const data = values[tableColumn.name];
+          if (data) {
+            columns.push({ columnId: field.tableColumnId, data });
+            if (field.autofill) {
+              localStorage.setItem(
+                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,
+                JSON.stringify(data)
+              );
+            }
+          }
+        }
+      });
+      try {
+        await client.createTableRecord(table.id, columns);
+        setIsDone(true);
+        setInitialValues(
+          (prev) => fields.reduce(
+            (acc, field) => {
+              const tableColumn = getTableColumn(field);
+              if (tableColumn) {
+                const data = values[tableColumn.name];
+                if (data && field.autofill)
+                  return { ...acc, [tableColumn.name]: data };
+              }
+              return acc;
+            },
+            { ...prev }
+          )
+        );
+        resetForm();
+        if (linkRef.current != null)
+          linkRef.current.click();
+      } catch (error) {
+        setStatus({ error: "An unexpected error has occurred, please try again later" });
+      } finally {
+        setSubmitting(false);
+      }
+    }
+  }
+  useEffect(() => {
+    setInitialValues(
+      (prev) => fields.reduce(
+        (acc, formField) => {
+          const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+          if (tableColumn && formField.autofill) {
+            const storedValue = localStorage.getItem(
+              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`
+            );
+            if (storedValue) {
+              try {
+                acc[tableColumn.name] = JSON.parse(storedValue);
+              } catch (e) {
+              }
+            }
+          }
+          return acc;
+        },
+        { ...prev }
+      )
+    );
+  }, [fields, table]);
+  return /* @__PURE__ */ jsx(
+    FormContextProvider,
+    {
+      value: { shape, size, contrast, brandColor, labelTextStyle, labelTextColor },
+      children: tableId == null ? /* @__PURE__ */ jsx(Placeholder, { ref: setRefEl, width, margin }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        Formik,
+        {
+          onSubmit: handleSubmit,
+          initialValues,
+          initialStatus: { error: null },
+          enableReinitialize: true,
+          children: (formik) => {
+            const error = formik.status && formik.status.error;
+            const errors = fields.map((field) => {
+              const tableColumn = getTableColumn(field);
+              return tableColumn && getIn(formik.touched, tableColumn.name) && getIn(formik.errors, tableColumn.name);
+            }).filter((message) => typeof message === "string");
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                GridForm,
+                {
+                  ref: setRefEl,
+                  id,
+                  className: cx(width, margin),
+                  size,
+                  onSubmit: formik.handleSubmit,
+                  onReset: formik.handleReset,
+                  noValidate: true,
+                  children: [
+                    fields.map((field, index) => {
+                      const tableColumn = getTableColumn(field);
+                      return /* @__PURE__ */ jsx(
+                        GridItem,
+                        {
+                          ref: items[index],
+                          grid,
+                          index,
+                          rowGap: gap,
+                          columnGap: gap,
+                          children: /* @__PURE__ */ jsx(Field, { tableColumn, tableFormField: field })
+                        },
+                        field.id
+                      );
+                    }),
+                    /* @__PURE__ */ jsxs(
+                      GridItem,
+                      {
+                        ref: items[fields.length],
+                        grid,
+                        index: fields.length,
+                        rowGap: gap,
+                        columnGap: gap,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            StyledButton,
+                            {
+                              type: "submit",
+                              disabled: formik.isSubmitting || isDone,
+                              shape,
+                              size,
+                              color: brandColor,
+                              variant: submitVariant,
+                              textColor: submitTextColor,
+                              width: submitWidth,
+                              alignment: submitAlignment,
+                              textStyle: submitTextStyle,
+                              children: formik.isSubmitting ? /* @__PURE__ */ jsx(Spinner, {}) : isDone ? /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(Check12, {}) }) : submitLabel
+                            }
+                          ),
+                          (errors.length > 0 || error) && /* @__PURE__ */ jsxs(ErrorContainer, { children: [
+                            errors.map((message) => /* @__PURE__ */ jsx(ErrorMessage, { children: message }, message)),
+                            error != null && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              submitLink != null && /* @__PURE__ */ jsx(Link, { ref: linkRef, hidden: true, link: submitLink })
+            ] });
+          }
+        }
+      ) })
+    }
+  );
+});
+var Form_default = Form;
+export {
+  Form_default as default
+};
+//# sourceMappingURL=Form.js.map

package/dist/esm/components/builtin/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n  ElementIDValue,\n  GapYValue,\n  LinkValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  ResponsiveValue,\n  TableFormFieldsDescriptor,\n  TableFormFieldsValue,\n  TableValue,\n  TextInputValue,\n  TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftClient } from '../../../api/react'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: ElementIDValue\n  tableId?: TableValue\n  fields?: TableFormFieldsValue\n  submitLink?: LinkValue\n  gap?: GapYValue\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: TextStyleValue\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: TextStyleValue\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: TextInputValue\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthValue\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  return (\n    <form\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            fontSize: getSizeFontSize(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n        className,\n      )}\n    />\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  return (\n    <Button\n      {...restOfProps}\n      as=\"button\"\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n        useStyle(\n          useResponsiveStyle(\n            [size, alignment] as const,\n            ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              margin: getAlignmentMargin(alignment),\n              paddingTop: 0,\n              paddingBottom: 0,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          padding: '8px 16px',\n          backgroundColor: '#f19eb9',\n          borderRadius: 4,\n          marginTop: 16,\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  return (\n    <p\n      {...restOfProps}\n      className={cx(\n        useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useMakeswiftClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={cx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","alignment","Form"]}