@saltcorn/builder 0.6.1-beta.0 → 0.6.1

package/src/components/elements/utils.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/utils
+ * @subcategory components / elements
+ */
+
 import React, { Fragment, useContext, useState } from "react";
 import optionsCtx from "../context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,10 +21,23 @@ export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   return <i className={`${icon} ${className || ""}`}></i>;
 };
 
-export const blockProps = (is_block) =>
+export /**
+ * @param {boolean} is_block 
+ * @returns {object}
+ */
+const blockProps = (is_block) =>
   is_block ? { style: { display: "block" } } : {};
 
-export const BlockSetting = ({ block, setProp }) => (
+export /**
+ * @param {object} props
+ * @param {boolean} props.block
+ * @param {function} props.setProp
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */
+const BlockSetting = ({ block, setProp }) => (
   <div className="form-check">
     <input
       className="form-check-input"
@@ -36,8 +55,24 @@ export const BlockSetting = ({ block, setProp }) => (
   </div>
 );
 
-export const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
+export /**
+ * @param {object} props
+ * @param {function} props.setProp
+ * @param {object} props.isFormula
+ * @param {object} props.node
+ * @param {string} props.nodekey
+ * @param {string} props.children
+ * @returns {Fragment}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ */
+const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
   const { mode } = useContext(optionsCtx);
+
+  /**
+   * @returns {void}
+   */
   const switchIsFml = () => {
     const isFmlAfter = !isFormula[nodekey];
     setProp((prop) => {
@@ -95,7 +130,17 @@ export const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
     </Fragment>
   );
 };
-export const MinRoleSetting = ({ minRole, setProp }) => {
+
+export /**
+ * @param {object} props
+ * @param {string} props.minRole
+ * @param {function} props.setProp
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ */
+const MinRoleSetting = ({ minRole, setProp }) => {
   const options = useContext(optionsCtx);
   return (
     <div>
@@ -118,7 +163,17 @@ export const MinRoleSetting = ({ minRole, setProp }) => {
     </div>
   );
 };
-export const MinRoleSettingRow = ({ minRole, setProp }) => {
+
+export /**
+ * @param {object} props
+ * @param {string} props.minRole
+ * @param {function} props.setProp
+ * @returns {tr}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ */
+const MinRoleSettingRow = ({ minRole, setProp }) => {
   const options = useContext(optionsCtx);
   return (
     <tr>
@@ -146,6 +201,16 @@ export const MinRoleSettingRow = ({ minRole, setProp }) => {
     </tr>
   );
 };
+
+/**
+ * @param {object} props
+ * @param {string} props.textStyle
+ * @param {function} props.setProp
+ * @returns {select}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ */
 const TextStyleSelect = ({ textStyle, setProp }) => {
   return (
     <select
@@ -174,7 +239,17 @@ const TextStyleSelect = ({ textStyle, setProp }) => {
     </select>
   );
 };
-export const TextStyleSetting = ({ textStyle, setProp }) => {
+
+export /**
+ * @param {object} props
+ * @param {string} props.textStyle
+ * @param {function} props.setProp
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ */
+const TextStyleSetting = ({ textStyle, setProp }) => {
   return (
     <div>
       <label>Text Style</label>
@@ -182,7 +257,17 @@ export const TextStyleSetting = ({ textStyle, setProp }) => {
     </div>
   );
 };
-export const TextStyleRow = ({ textStyle, setProp }) => {
+
+export /**
+ * @param {object} props
+ * @param {string} props.textStyle
+ * @param {function} props.setProp
+ * @returns {tr}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ */
+const TextStyleRow = ({ textStyle, setProp }) => {
   return (
     <tr>
       <td>
@@ -195,7 +280,16 @@ export const TextStyleRow = ({ textStyle, setProp }) => {
   );
 };
 
-export const Accordion = ({ titles, children }) => {
+export /**
+ * @param {object} props
+ * @param {string[]} [props.titles]
+ * @param {object[]} props.children
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */
+const Accordion = ({ titles, children }) => {
   const [currentTab, setCurrentTab] = useState(0);
   return (
     <Fragment>
@@ -225,6 +319,17 @@ export const Accordion = ({ titles, children }) => {
     </Fragment>
   );
 };
+
+/**
+ * @param {object} opts
+ * @param {string} opts.url
+ * @param {object} opts.body
+ * @param {object} opts.options
+ * @param {function} opts.setPreviews
+ * @param {*} opts.node_id
+ * @param {boolean} opts.isView
+ * @returns {void}
+ */
 const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
   fetch(url, {
     method: "POST",
@@ -255,6 +360,12 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
       setPreviews((prevState) => ({ ...prevState, [node_id]: newHtml }));
     });
 };
+
+/**
+ * @function
+ * @param {object} [args = {}]
+ * @return {function}
+ */
 export const fetchFieldPreview = (args = {}) => (changes = {}) => {
   const { node_id, options, name, fieldview, setPreviews } = {
     ...args,
@@ -273,6 +384,11 @@ export const fetchFieldPreview = (args = {}) => (changes = {}) => {
   });
 };
 
+/**
+ * @function
+ * @param {object} [args = {}]
+ * @return {function}
+ */
 export const fetchViewPreview = (args = {}) => (changes = {}) => {
   const { node_id, options, view, setPreviews } = {
     ...args,
@@ -298,7 +414,17 @@ export const fetchViewPreview = (args = {}) => (changes = {}) => {
   });
 };
 
-export const SelectUnits = ({ vert, autoable, ...props }) => (
+export /**
+ * @param {object} props
+ * @param {boolean} props.vert
+ * @param {string} [props.autoable]
+ * @param {...*} props.props
+ * @returns {select}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */
+const SelectUnits = ({ vert, autoable, ...props }) => (
   <select {...props}>
     <option>px</option>
     <option>%</option>
@@ -309,6 +435,11 @@ export const SelectUnits = ({ vert, autoable, ...props }) => (
   </select>
 );
 
+/**
+ * @function
+ * @param {string} [styles]
+ * @returns {string}
+ */
 export const parseStyles = (styles) =>
   (styles || "")
     .split("\n")
@@ -330,6 +461,11 @@ export const parseStyles = (styles) =>
       {}
     );
 
+/**
+ * @function
+ * @param {object} styles 
+ * @returns {object}
+ */    
 export const reactifyStyles = (styles) => {
   const toCamel = (s) => {
     return s.replace(/([-][a-z])/gi, ($1) => {
@@ -342,8 +478,21 @@ export const reactifyStyles = (styles) => {
   });
   return reactified;
 };
+
+/**
+ * @param {object} f 
+ * @returns {boolean}
+ */
 const isCheckbox = (f) =>
   f && f.type && (f.type === "Bool" || f.type.name === "Bool");
+
+/**
+ * @function
+ * @param {function} setProp 
+ * @param {*} fieldview 
+ * @param {object[]} [fields]
+ * @returns {void}
+ */
 export const setInitialConfig = (setProp, fieldview, fields) => {
   (fields || []).forEach((f, ix) => {
     if (f.input_type === "select")
@@ -354,6 +503,15 @@ export const setInitialConfig = (setProp, fieldview, fields) => {
   });
 };
 
+/**
+ * @param {object} props
+ * @param {string} props.value
+ * @param {function} props.onChange
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ * @returns {input|button}
+ */
 const ColorInput = ({ value, onChange }) =>
   value ? (
     <input
@@ -371,7 +529,19 @@ const ColorInput = ({ value, onChange }) =>
     </button>
   );
 
-export const ConfigForm = ({
+export /**
+ * @param {object} props
+ * @param {object[]} props.fields
+ * @param {object} props.configuration
+ * @param {function} props.setProp
+ * @param {object} props.node
+ * @param {function} props.onChange
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */  
+const ConfigForm = ({
   fields,
   configuration,
   setProp,
@@ -408,9 +578,28 @@ export const ConfigForm = ({
   </div>
 );
 
+/**
+ * @param {object|undefined} x 
+ * @param {object} y 
+ * @returns {object}
+ */
 const or_if_undef = (x, y) => (typeof x === "undefined" ? y : x);
 
-export const ConfigField = ({
+
+export /**
+ * @param {object} props
+ * @param {object} props.field
+ * @param {object} [props.configuration]
+ * @param {function} props.setProp
+ * @param {function} props.onChange
+ * @param {object} props.props
+ * @param {boolean} props.isStyle
+ * @returns {select|input}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */  
+const ConfigField = ({
   field,
   configuration,
   setProp,
@@ -418,6 +607,10 @@ export const ConfigField = ({
   props,
   isStyle,
 }) => {
+  /**
+   * @param {object} v 
+   * @returns {void}
+   */
   const myOnChange = (v) => {
     setProp((prop) => {
       if (configuration) {
@@ -481,7 +674,9 @@ export const ConfigField = ({
       <input
         type="number"
         className="form-control"
-        step={1}
+        step={field.step || 1}
+        min={field.min}
+        max={field.max}
         value={value || ""}
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
@@ -624,7 +819,14 @@ export const ConfigField = ({
   return f ? f() : null;
 };
 
-export const SettingsFromFields = (fields) => () => {
+export /**
+ * @param {object[]} fields
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ * @returns {table}
+ */
+const SettingsFromFields = (fields) => () => {
   const node = useNode((node) => {
     const ps = {};
     fields.forEach((f) => {
@@ -649,13 +851,33 @@ export const SettingsFromFields = (fields) => () => {
   );
 };
 
-export const SettingsSectionHeaderRow = ({ title }) => (
+export /**
+ * @param {object} props
+ * @param {string} props.title
+ * @returns {tr}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */
+const SettingsSectionHeaderRow = ({ title }) => (
   <tr>
     <th colSpan="2">{title}</th>
   </tr>
 );
 
-export const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
+export /**
+ * @param {object} props
+ * @param {string} props.field
+ * @param {object} props.node
+ * @param {function} props.setProp
+ * @param {function} props.onChange
+ * @param {boolean} props.isStyle
+ * @returns {tr}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */
+const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
   const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
@@ -698,15 +920,35 @@ export const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
     </tr>
   );
 };
+
+/**
+ * @category saltcorn-builder
+ * @extends React.Component
+ */
 export class ErrorBoundary extends React.Component {
+  /**
+   * ErrorBoundary constructor
+   * @param {object} props 
+   */
   constructor(props) {
     super(props);
     this.state = { hasError: false };
   }
+
+  /**
+   * @param {*} error 
+   * @returns {object}
+   */
   static getDerivedStateFromError(error) {
     // Update state so the next render will show the fallback UI.
     return { hasError: true };
   }
+
+  /**
+   * @param {object} error 
+   * @param {object} errorInfo 
+   * @returns {void}
+   */
   componentDidCatch(error, errorInfo) {
     // You can also log the error to an error reporting service
     //logErrorToMyService(error, errorInfo);
@@ -717,12 +959,27 @@ export class ErrorBoundary extends React.Component {
     );
   }
 
+  /**
+   * @returns {object}
+   */
   render() {
     return this.props.children;
   }
 }
 
-export const ButtonOrLinkSettingsRows = ({
+export /**
+ * @param {object} props
+ * @param {function} props.setProp
+ * @param {string} [props.btnClass = null]
+ * @param {string} [props.keyPrefix = ""]
+ * @param {object} props.values
+ * @param {boolean} [props.linkFirst = false]
+ * @returns {tr}
+ * @category saltcorn-builder
+ * @subcategory components / elements / utils
+ * @namespace
+ */
+const ButtonOrLinkSettingsRows = ({
   setProp,
   btnClass = null,
   keyPrefix = "",
@@ -847,6 +1104,12 @@ export const ButtonOrLinkSettingsRows = ({
       : []),
   ];
 };
+
+/**
+ * @function
+ * @param {string} style 
+ * @returns {object}
+ */
 export const bstyleopt = (style) => ({
   value: style,
   title: style,

package/src/components/preview_context.js

@@ -1,4 +1,9 @@
-import { createContext } from "react";
+/**
+ * @category saltcorn-builder
+ * @module components/preview_context
+ * @subcategory components
+ */
 
+import { createContext } from "react";
 
 export default createContext({});

package/src/components/storage.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/storage
+ * @subcategory components
+ */
+
 import React, { Fragment } from "react";
 import { Element } from "@craftjs/core";
 import { Text } from "./elements/Text";
@@ -20,6 +26,10 @@ import { Container } from "./elements/Container";
 import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
 
+/**
+ * @param {object} segment 
+ * @returns {number}
+ */
 const getColWidths = (segment) => {
   if (!segment.widths)
     return ntimes(
@@ -31,6 +41,11 @@ const getColWidths = (segment) => {
   widths.pop();
   return widths;
 };
+
+/**
+ * @param {object} segment 
+ * @returns {object[]}
+ */
 const default_breakpoints = (segment) =>
   ntimes(segment.besides.length, () => segment.breakpoint || "");
 
@@ -56,8 +71,23 @@ const allElements = [
   ToggleFilter,
 ];
 
-export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
+export /**
+ * @param {object} layout 
+ * @param {object} query 
+ * @param {object} actions 
+ * @param {string} [parent = "ROOT"]
+ * @returns {Text|View|Action|Element|Tabs|Columns}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
   //console.log("layoutToNodes", JSON.stringify(layout));
+  /**
+   * @param {object} segment 
+   * @param {string} ix 
+   * @returns {Element|Text|View|Action|Tabs|Columns}
+   */
   function toTag(segment, ix) {
     if (!segment) return <Empty key={ix} />;
 
@@ -211,6 +241,12 @@ export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
       return segment.above.map((e, ix) => toTag(e, ix));
     }
   }
+
+  /**
+   * @param {object} segment 
+   * @param {object} parent 
+   * @returns {void}
+   */
   function go(segment, parent) {
     if (!segment) return;
     if (segment.above) {
@@ -243,16 +279,37 @@ export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
   go(layout, parent);
 };
 
+/**
+ * @returns {number}
+ */
 const rand_ident = () => Math.floor(Math.random() * 16777215).toString(16);
 
-export const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
+export /**
+ * @param {object[]} nodes 
+ * @param {string} [startFrom = "ROOT" ]
+ * @returns {object}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
   //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
+  
+  /**
+   * @param {object} node 
+   * @returns {void|object}
+   */
   const get_nodes = (node) => {
     if (!node.nodes || node.nodes.length == 0) return;
     else if (node.nodes.length == 1) return go(nodes[node.nodes[0]]);
     else return { above: node.nodes.map((nm) => go(nodes[nm])) };
   };
+
+  /**
+   * @param {object} node 
+   * @returns {object}
+   */
   const go = (node) => {
     const matchElement = allElements.find(
       (e) =>

package/src/index.js

@@ -1,7 +1,19 @@
+/**
+ * @category saltcorn-builder
+ * @module saltcorn-builder/index
+ */
+
 import React from "react";
 import Builder from "./components/Builder";
 import ReactDOM from "react-dom";
 
+/**
+ * 
+ * @param {object} id 
+ * @param {object} options 
+ * @param {object} layout 
+ * @param {string} mode 
+ */
 function renderBuilder(id, options, layout, mode) {
   ReactDOM.render(
     <Builder