@saltcorn/builder 0.6.1-beta.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.6.1-beta.0",
+  "version": "0.6.1",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Builder.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/Builder
+ * @subcategory components
+ */
+
 import React, {
   useEffect,
   useContext,
@@ -52,6 +58,13 @@ import { InitNewElement, Library } from "./Library";
 import { RenderNode } from "./RenderNode";
 const { Provider } = optionsCtx;
 
+/**
+ * 
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
 const SettingsPanel = () => {
   const { actions, selected, query } = useEditor((state, query) => {
     const currentNodeId = state.events.selected;
@@ -80,14 +93,24 @@ const SettingsPanel = () => {
     };
   });
 
+  /** */
   const deleteThis = () => {
     actions.delete(selected.id);
   };
+
+  /**
+   * @param {number} offset 
+   * @returns {NodeId}
+   */
   const otherSibling = (offset) => {
     const siblings = query.node(selected.parent).childNodes();
     const sibIx = siblings.findIndex((sib) => sib === selected.id);
     return siblings[sibIx + offset];
   };
+
+  /**
+   * @param {object} event 
+   */
   const handleUserKeyPress = (event) => {
     const { keyCode, target } = event;
     if (target.tagName.toLowerCase() === "body" && selected) {
@@ -145,11 +168,19 @@ const SettingsPanel = () => {
   }, [handleUserKeyPress]);
   const hasChildren =
     selected && selected.children && selected.children.length > 0;
+  
+  /** 
+   * @returns {void}
+   */
   const deleteChildren = () => {
     selected.children.forEach((child) => {
       actions.delete(child);
     });
   };
+
+  /** 
+   * @returns {void}
+   */
   const duplicate = () => {
     const {
       data: { parent },
@@ -212,10 +243,20 @@ const SettingsPanel = () => {
     </div>
   );
 };
+
+/**
+ * @returns {button}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
 const SaveButton = () => {
   const { query, actions } = useEditor(() => {});
   const options = useContext(optionsCtx);
 
+  /**
+   * @returns {void} 
+   */
   const onClick = () => {
     const data = craftToSaltcorn(JSON.parse(query.serialize()));
     const urlroot = options.page_id ? "pageedit" : "viewedit";
@@ -239,6 +280,13 @@ const SaveButton = () => {
     ""
   );
 };
+
+/**
+ * @returns {a|""}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
 const ViewPageLink = () => {
   const { query, actions } = useEditor(() => {});
   const options = useContext(optionsCtx);
@@ -250,6 +298,13 @@ const ViewPageLink = () => {
     ""
   );
 };
+
+/**
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
 const HistoryPanel = () => {
   const { canUndo, canRedo, actions } = useEditor((state, query) => ({
     canUndo: query.history.canUndo(),
@@ -280,6 +335,14 @@ const HistoryPanel = () => {
   );
 };
 
+/**
+ * @param {object} opts
+ * @param {object} opts.layout
+ * @returns {button}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
 const NextButton = ({ layout }) => {
   const { query, actions } = useEditor(() => {});
   const options = useContext(optionsCtx);
@@ -287,6 +350,10 @@ const NextButton = ({ layout }) => {
   useEffect(() => {
     layoutToNodes(layout, query, actions);
   }, []);
+
+  /** 
+   * @returns {void}
+   */
   const onClick = () => {
     const { columns, layout } = craftToSaltcorn(JSON.parse(query.serialize()));
     document
@@ -304,6 +371,16 @@ const NextButton = ({ layout }) => {
   );
 };
 
+/**
+ * @param {object} props
+ * @param {object} props.options
+ * @param {object} props.layout
+ * @param {string} props.mode
+ * @returns {ErrorBoundary}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
 const Builder = ({ options, layout, mode }) => {
   const [showLayers, setShowLayers] = useState(true);
   const [previews, setPreviews] = useState({});

package/src/components/Library.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/Library
+ * @subcategory components
+ */
+
 import React, { useEffect, useContext, useState, Fragment } from "react";
 import { useEditor, useNode } from "@craftjs/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,13 +14,27 @@ import { craftToSaltcorn, layoutToNodes } from "./storage";
 import optionsCtx from "./context";
 import { WrapElem } from "./Toolbox";
 
+/**
+ * 
+ * @param {object[]} xs 
+ * @returns {object[]}
+ */
 const twoByTwos = (xs) => {
   if (xs.length <= 2) return [xs];
   const [x, y, ...rest] = xs;
   return [[x, y], ...twoByTwos(rest)];
 };
 
-export const LibraryElem = ({ name, layout }) => {
+export /**
+ * @param {object} props
+ * @param {*} props.name
+ * @param {*} props.layout
+ * @returns {Fraggment}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const LibraryElem = ({ name, layout }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -32,11 +52,22 @@ export const LibraryElem = ({ name, layout }) => {
   );
 };
 
+/**
+ * @type {object}
+ */
 LibraryElem.craft = {
   displayName: "LibraryElem",
 };
 
-export const InitNewElement = ({ nodekeys }) => {
+export /**
+ * @param {object} props
+ * @param {object} props.nodekeys
+ * @returns {object[]}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const InitNewElement = ({ nodekeys }) => {
   const { actions, query, connectors } = useEditor((state, query) => {
     return {};
   });
@@ -86,7 +117,13 @@ export const InitNewElement = ({ nodekeys }) => {
   return [];
 };
 
-export const Library = () => {
+export /**
+ * @category saltcorn-builder
+ * @returns {div}
+ * @subcategory components
+ * @namespace
+ */
+const Library = () => {
   const { actions, selected, query, connectors } = useEditor((state, query) => {
     return {
       selected: state.events.selected,
@@ -98,6 +135,9 @@ export const Library = () => {
   const [icon, setIcon] = useState();
   const [recent, setRecent] = useState([]);
 
+  /**
+   * @returns {void}
+   */
   const addSelected = () => {
     const layout = craftToSaltcorn(JSON.parse(query.serialize()), selected);
     const data = { layout, icon, name: newName };

package/src/components/RenderNode.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/RenderNode
+ * @subcategory components
+ */
+
 import { useNode, useEditor } from "@craftjs/core";
 //import { ROOT_NODE } from "@craftjs/utils";
 import React, { useEffect, useRef, useCallback, Fragment } from "react";
@@ -17,7 +23,14 @@ Contains code copied from craft.js landing page example
 Copyright (c) 2020 Previnash Wong Sze Chuan
 */
 
-export const RenderNode = ({ render }) => {
+export /**
+ * @param {object} props
+ * @param {string} props.render
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const RenderNode = ({ render }) => {
   const { id } = useNode();
   const { actions, query, isActive } = useEditor((state) => ({
     isActive: state.nodes[id].events.selected,
@@ -81,6 +94,9 @@ export const RenderNode = ({ render }) => {
     };
   }, [scroll]);
 
+  /**
+   * @returns {void}
+   */
   const duplicate = () => {
     const {
       data: { parent },

package/src/components/Toolbox.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components / Toolbox
+ * @subcategory components
+ */
+
 import React, { useEffect, useContext, Fragment } from "react";
 import { Element, useEditor } from "@craftjs/core";
 import { Text } from "./elements/Text";
@@ -27,9 +33,33 @@ import {
   TextareaT,
 } from "react-bootstrap-icons";
 
+/**
+ * 
+ * @param {object[]} xs 
+ * @param {object} def 
+ * @returns {object}
+ */
 const headOr = (xs, def) => (xs && xs.length > 0 ? xs[0] : def);
 
-export const WrapElem = ({
+export /**
+ * @param {object} props
+ * @param {object} props.children
+ * @param {object} props.connectors
+ * @param {string|object} props.icon
+ * @param {object[]} props.icons
+ * @param {string} props.text
+ * @param {string|number} [props.fontSize]
+ * @param {string} props.title
+ * @param {string} props.innerClass
+ * @param {boolean} props.bold
+ * @param {string} props.label
+ * @param {boolean} props.disable
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const WrapElem = ({
   children,
   connectors,
   icon,
@@ -61,6 +91,15 @@ export const WrapElem = ({
     <label>{label}</label>
   </div>
 );
+
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const TextElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -73,6 +112,14 @@ const TextElem = ({ connectors }) => (
     <Text text="Hello world" block={false} textStyle={""} />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const ColumnsElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -84,6 +131,14 @@ const ColumnsElem = ({ connectors }) => (
     <Columns contents={[]} />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const TabsElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -94,6 +149,14 @@ const TabsElem = ({ connectors }) => (
     <Tabs contents={[]} />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const LineBreakElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -105,6 +168,14 @@ const LineBreakElem = ({ connectors }) => (
     <LineBreak />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const HTMLElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -115,6 +186,14 @@ const HTMLElem = ({ connectors }) => (
     <HTMLCode text={""} />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const CardElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -125,6 +204,14 @@ const CardElem = ({ connectors }) => (
     <Element canvas is={Card} isFormula={{}} url=""></Element>
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const ImageElem = ({ connectors, images }) => (
   <WrapElem
     connectors={connectors}
@@ -135,6 +222,14 @@ const ImageElem = ({ connectors, images }) => (
     <Image fileid={images.length > 0 ? images[0].id : 0} />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const LinkElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -145,6 +240,14 @@ const LinkElem = ({ connectors }) => (
     <Link />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const ViewElem = ({ connectors, views }) => (
   <WrapElem
     connectors={connectors}
@@ -160,6 +263,14 @@ const ViewElem = ({ connectors, views }) => (
     />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const SearchElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -170,6 +281,14 @@ const SearchElem = ({ connectors }) => (
     <SearchBar />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const ContainerElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
@@ -180,6 +299,14 @@ const ContainerElem = ({ connectors }) => (
     <Element canvas is={Container}></Element>
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const FieldElem = ({ connectors, fields, field_view_options }) => (
   <WrapElem
     connectors={connectors}
@@ -196,6 +323,14 @@ const FieldElem = ({ connectors, fields, field_view_options }) => (
     />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const DropDownFilterElem = ({ connectors, fields }) => (
   <WrapElem
     connectors={connectors}
@@ -211,6 +346,14 @@ const DropDownFilterElem = ({ connectors, fields }) => (
     />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem} 
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const ToggleFilterElem = ({ connectors, fields }) => (
   <WrapElem
     connectors={connectors}
@@ -221,6 +364,14 @@ const ToggleFilterElem = ({ connectors, fields }) => (
     <ToggleFilter name={fields[0].name} value={""} label={""} block={false} />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const JoinFieldElem = ({ connectors, options }) => (
   <WrapElem
     connectors={connectors}
@@ -236,6 +387,14 @@ const JoinFieldElem = ({ connectors, options }) => (
     />
   </WrapElem>
 );
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const ViewLinkElem = ({ connectors, options }) => (
   <WrapElem
     connectors={connectors}
@@ -255,6 +414,14 @@ const ViewLinkElem = ({ connectors, options }) => (
   </WrapElem>
 );
 
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
 const ActionElem = ({ connectors, options }) => (
   <WrapElem
     connectors={connectors}
@@ -274,6 +441,15 @@ const ActionElem = ({ connectors, options }) => (
     />
   </WrapElem>
 );
+
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace 
+ */
 const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
   <WrapElem
     connectors={connectors}
@@ -295,7 +471,13 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
   </WrapElem>
 );
 
-export const ToolboxShow = () => {
+export /**
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const ToolboxShow = () => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const {
@@ -351,7 +533,15 @@ export const ToolboxShow = () => {
   );
 };
 
-export const ToolboxFilter = () => {
+
+
+export /** 
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const ToolboxFilter = () => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const { fields, views } = options;
@@ -385,7 +575,13 @@ export const ToolboxFilter = () => {
   );
 };
 
-export const ToolboxEdit = () => {
+export /**
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const ToolboxEdit = () => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const { fields, field_view_options, images, views } = options;
@@ -423,7 +619,13 @@ export const ToolboxEdit = () => {
   );
 };
 
-export const ToolboxPage = () => {
+export /**
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const ToolboxPage = () => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const { views, images } = options;

package/src/components/context.js

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