@saltcorn/builder 0.6.1-beta.0 → 0.6.1

package/src/components/elements/Action.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Action
+ * @subcategory components / elements
+ */
+
 import React, { Fragment, useContext } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
@@ -12,7 +18,25 @@ import {
   DynamicFontAwesomeIcon,
 } from "./utils";
 
-export const Action = ({
+export /**
+ * 
+ * @param {object} props 
+ * @param {string} props.name
+ * @param {string} props.block
+ * @param {string} props.action_label
+ * @param {string} props.action_style
+ * @param {string} props.action_icon
+ * @param {string} props.action_size
+ * @param {string} props.action_bgcol
+ * @param {string} props.action_bordercol
+ * @param {string} props.action_textcol
+ * @returns {span|btn}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const Action = 
+({
   name,
   block,
   action_label,
@@ -28,6 +52,9 @@ export const Action = ({
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
 
+  /**
+   * @type {object}
+   */
   const btn = (
     <button
       className={`btn ${action_style || "btn-primary"} ${action_size || ""}`}
@@ -50,7 +77,13 @@ export const Action = ({
   return selected ? <span className={"selected-node"}>{btn}</span> : btn;
 };
 
-export const ActionSettings = () => {
+export /** 
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ * @returns {div}
+ */
+ const ActionSettings = () => {
   const node = useNode((node) => ({
     name: node.data.props.name,
     block: node.data.props.block,
@@ -162,6 +195,9 @@ export const ActionSettings = () => {
   );
 };
 
+/** 
+ * @type {object} 
+ */
 Action.craft = {
   displayName: "Action",
   related: {

package/src/components/elements/Aggregation.js

@@ -1,9 +1,27 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Aggregation
+ * @subcategory components / elements
+ */
+
 import React, { useContext } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import { blockProps, BlockSetting, TextStyleRow } from "./utils";
 
-export const Aggregation = ({
+export /**
+ * @param {object} props 
+ * @param {string} props.agg_relation
+ * @param {string} props.agg_field
+ * @param {string} props.stat
+ * @param {boolean} props.block
+ * @param {string} props.textStyle
+ * @returns {span}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const Aggregation = ({
   agg_relation,
   agg_field,
   stat,
@@ -25,7 +43,13 @@ export const Aggregation = ({
   );
 };
 
-export const AggregationSettings = () => {
+export /**
+ * @returns {table}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const AggregationSettings = () => {
   const {
     actions: { setProp },
     agg_relation,
@@ -139,6 +163,9 @@ export const AggregationSettings = () => {
   );
 };
 
+/** 
+ * @type {object} 
+ */
 Aggregation.craft = {
   displayName: "Aggregation",
   related: {

package/src/components/elements/BoxModelEditor.js

@@ -1,10 +1,27 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/BoxModelEditor
+ * @subcategory components / elements
+ */
+
 import React, { useContext, Fragment, useState } from "react";
 import { SettingsRow, SettingsSectionHeaderRow, bstyleopt } from "./utils";
 /* 
 Contains code from https://github.com/tpaksu/boxmodel
 Copyright (c) 2017 Taha Paksu
 */
-export const BoxModelEditor = ({ setProp, node }) => {
+
+export /**
+ * 
+ * @param {object} props
+ * @param {function} props.setProp
+ * @param {object} props.node
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const BoxModelEditor = ({ setProp, node }) => {
   const [selectedCategory, setSelectedCategory] = useState(false);
   const [selectedDirection, setSelectedDirection] = useState(false);
   const selectedProperty = !selectedCategory

package/src/components/elements/Card.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Card
+ * @subcategory components / elements
+ */
+
 import React, { Fragment } from "react";
 import { Text } from "./Text";
 import { OrFormula, SettingsRow, Accordion, reactifyStyles } from "./utils";
@@ -5,7 +11,21 @@ import { OrFormula, SettingsRow, Accordion, reactifyStyles } from "./utils";
 import { Element, useNode } from "@craftjs/core";
 import { BoxModelEditor } from "./BoxModelEditor";
 import { bstyleopt } from "./utils";
-export const Card = ({
+
+export /**
+ * @param {object} props
+ * @param {string} props.children
+ * @param {object} props.isFormula
+ * @param {string} [props.title]
+ * @param {string} props.shadow
+ * @param {boolean} props.noPadding
+ * @param {object} props.style 
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const Card = ({
   children,
   isFormula,
   title,
@@ -42,7 +62,13 @@ export const Card = ({
   );
 };
 
-export const CardSettings = () => {
+export /**
+ * @returns {Accordion}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const CardSettings = () => {
   const node = useNode((node) => {
     const ps = {};
     fields.forEach((f) => {
@@ -112,6 +138,9 @@ const fields = [
   { name: "style", default: {} },
 ];
 
+/** 
+ * @type {object} 
+ */
 Card.craft = {
   props: {
     title: "",

package/src/components/elements/Column.js

@@ -1,9 +1,25 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Column
+ * @subcategory components / elements
+ */
+
 import React, { useContext, Fragment } from "react";
 
 import { Element, useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 
-export const Column = ({ children, align }) => {
+export /**
+ * 
+ * @param {object} props 
+ * @param {string} props.children
+ * @param {*} props.align
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const Column = ({ children, align }) => {
   const {
     selected,
     id,
@@ -21,10 +37,20 @@ export const Column = ({ children, align }) => {
   );
 };
 
-export const ColumnSettings = () => {
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ColumnSettings = () => {
   const {} = useNode((node) => ({}));
   return <div></div>;
 };
+
+/** 
+ * @type {object} 
+ */
 Column.craft = {
   displayName: "Column",
   props: {},

package/src/components/elements/Columns.js

@@ -1,9 +1,21 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Columns
+ * @subcategory components / elements
+ */
+
 import React, { Fragment } from "react";
 import { Column } from "./Column";
 
 import { Element, useNode } from "@craftjs/core";
 
-export const ntimes = (n, f) => {
+export /**
+ * 
+ * @param {number} n 
+ * @param {function} f 
+ * @returns {object[]}
+ */
+const ntimes = (n, f) => {
   var res = [];
   for (let index = 0; index < n; index++) {
     res.push(f(index));
@@ -11,18 +23,42 @@ export const ntimes = (n, f) => {
   return res;
 };
 
-export const sum = (xs) => {
+export /**
+ * 
+ * @param {number[]} xs 
+ * @returns {number}
+ */
+const sum = (xs) => {
   var res = 0;
   for (const x of xs) res += x;
   return res;
 };
 
+/**
+ * @param {number} ncols 
+ * @returns {number}
+ */
 const resetWidths = (ncols) => ntimes(ncols - 1, () => 12 / ncols);
 
+/**
+ * @param {number[]} widths 
+ * @param {number} colix 
+ * @returns {number}
+ */
 const getWidth = (widths, colix) =>
   colix < widths.length ? widths[colix] : 12 - sum(widths);
 
-export const Columns = ({ widths, contents, ncols }) => {
+export /**
+ * @param {object} opts
+ * @param {number[]} opts.widths
+ * @param {string[]} opts.contents
+ * @param {number} opts.ncols
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Columns = ({ widths, contents, ncols }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -43,7 +79,13 @@ export const Columns = ({ widths, contents, ncols }) => {
   );
 };
 
-export const ColumnsSettings = () => {
+export /**
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const ColumnsSettings = () => {
   const {
     actions: { setProp },
     widths,
@@ -132,6 +174,10 @@ export const ColumnsSettings = () => {
     </div>
   );
 };
+
+/** 
+ * @type {object} 
+ */
 Columns.craft = {
   displayName: "Columns",
   defaultProps: {

package/src/components/elements/Container.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Container
+ * @subcategory components / elements
+ */
+
 import React, { useContext, Fragment } from "react";
 
 import { Element, useNode } from "@craftjs/core";
@@ -37,12 +43,52 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faScroll, faRobot } from "@fortawesome/free-solid-svg-icons";
 import { BoxModelEditor } from "./BoxModelEditor";
+import previewCtx from "../preview_context";
 
+/**
+ * 
+ * @param {string} string 
+ * @returns {string}
+ */
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-export const Container = ({
+export /**
+ * @param {object} props 
+ * @param {*} props.children
+ * @param {*} props.minHeight
+ * @param {*} props.height
+ * @param {*} props.width
+ * @param {*} props.minHeightUnit
+ * @param {*} props.heightUnit
+ * @param {*} props.widthUnit
+ * @param {*} props.vAlign
+ * @param {*} props.hAlign
+ * @param {*} props.bgFileId
+ * @param {*} props.imageSize
+ * @param {*} props.bgType
+ * @param {*} props.display
+ * @param {*} props.bgColor
+ * @param {*} props.setTextColor
+ * @param {*} props.textColor
+ * @param {*} props.customClass
+ * @param {*} props.customCSS
+ * @param {*} props.margin
+ * @param {*} props.padding
+ * @param {*} props.minScreenWidth
+ * @param {*} props.gradStartColor
+ * @param {*} props.gradEndColor
+ * @param {*} props.gradDirection
+ * @param {*} props.rotate
+ * @param {*} props.style
+ * @param {*} props.htmlElement
+ * @returns {DetailedReactHTMLElement}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Container = ({
   children,
   minHeight,
   height,
@@ -139,7 +185,15 @@ export const Container = ({
   );
 };
 
-export const ContainerSettings = () => {
+
+export /**
+ * @returns {div}
+ * @returns {Accordion}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const ContainerSettings = () => {
   const node = useNode((node) => ({
     minHeight: node.data.props.minHeight,
     height: node.data.props.height,
@@ -206,8 +260,14 @@ export const ContainerSettings = () => {
     htmlElement,
   } = node;
   const options = useContext(optionsCtx);
+  const { uploadedFiles } = useContext(previewCtx);
+
   const ownership = !!options.ownership;
 
+  /**
+   * @param {string} key 
+   * @returns {function}
+   */
   const setAProp = (key) => (e) => {
     if (e.target) {
       const target_value = e.target.value;
@@ -361,7 +421,8 @@ export const ContainerSettings = () => {
               setProp((prop) => {
                 prop.bgFileId =
                   prop.bgFileId ||
-                  (options.images.length > 0 && options.images[0].id);
+                  (options.images.length + uploadedFiles.length > 0 &&
+                    options.images[0].id);
               })
             }
           />
@@ -436,6 +497,11 @@ export const ContainerSettings = () => {
                         {f.filename}
                       </option>
                     ))}
+                    {(uploadedFiles || []).map((uf, ix) => (
+                      <option key={ix} value={uf.id}>
+                        {uf.filename}
+                      </option>
+                    ))}{" "}
                   </select>
                 </td>
               </tr>
@@ -473,6 +539,50 @@ export const ContainerSettings = () => {
               </td>
             </tr>
           )}
+          <SettingsSectionHeaderRow title="Typography" />
+          <SettingsRow
+            field={{
+              name: "font-family",
+              label: "Font family",
+              type: "String",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          <SettingsRow
+            field={{
+              name: "font-size",
+              label: "Font size",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          <SettingsRow
+            field={{
+              name: "font-weight",
+              label: "Weight",
+              type: "Integer",
+              min: 100,
+              max: 900,
+              step: 100,
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          <SettingsRow
+            field={{
+              name: "line-height",
+              label: "Line height",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
           <tr>
             <td colSpan="2">
               <label>
@@ -512,11 +622,13 @@ export const ContainerSettings = () => {
             field={{ name: "flex-grow", label: "Grow", type: "Float" }}
             node={node}
             setProp={setProp}
+            isStyle={true}
           />
           <SettingsRow
             field={{ name: "flex-shrink", label: "Shrink", type: "Float" }}
             node={node}
             setProp={setProp}
+            isStyle={true}
           />
           {display && display.includes("flex") && (
             <Fragment>
@@ -769,6 +881,10 @@ export const ContainerSettings = () => {
     </Accordion>
   );
 };
+
+/** 
+ * @type {object} 
+ */
 Container.craft = {
   displayName: "Container",
   props: {

package/src/components/elements/DropDownFilter.js

@@ -1,9 +1,25 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/DropDownFilter
+ * @subcategory components / elements
+ */
+
 import React, { useContext, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import { blockProps, BlockSetting, TextStyleRow } from "./utils";
 
-export const DropDownFilter = ({ name, block, full_width }) => {
+export /**
+ * @param {object} props
+ * @param {string} props.name
+ * @param {boolean} props.block
+ * @param {boolean} props.full_width
+ * @returns {span}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropDownFilter = ({ name, block, full_width }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -21,7 +37,13 @@ export const DropDownFilter = ({ name, block, full_width }) => {
   );
 };
 
-export const DropDownFilterSettings = () => {
+export /**
+ * @returns {table}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropDownFilterSettings = () => {
   const {
     actions: { setProp },
     name,
@@ -112,6 +134,9 @@ export const DropDownFilterSettings = () => {
   );
 };
 
+/** 
+ * @type {object} 
+ */
 DropDownFilter.craft = {
   displayName: "DropDownFilter",
   related: {

package/src/components/elements/Empty.js

@@ -1,13 +1,30 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Empty
+ * @subcategory components / elements
+ */
+
 import React, { Fragment } from "react";
 import { useNode } from "@craftjs/core";
 
-export const Empty = ({}) => {
+export /**
+ * @param {object} [props = {}]
+ * @returns {Fragment}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Empty = ({}) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   return null;
 };
+
+/** 
+ * @type {object} 
+ */
 Empty.craft = {
   displayName: "Empty",
 };

package/src/components/elements/Field.js

@@ -1,3 +1,9 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Field
+ * @subcategory components / elements
+ */
+
 import React, { useContext, useEffect, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
@@ -11,7 +17,19 @@ import {
   fetchFieldPreview,
 } from "./utils";
 
-export const Field = ({ name, fieldview, block, textStyle, configuration }) => {
+export /**
+ * @param {object} props
+ * @param {string} props.name
+ * @param {string} props.fieldview
+ * @param {boolean} props.block
+ * @param {string} props.textStyle
+ * @param {object} props.configuration
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace 
+ */
+const Field = ({ name, fieldview, block, textStyle, configuration }) => {
   const {
     selected,
     node_id,
@@ -50,7 +68,13 @@ export const Field = ({ name, fieldview, block, textStyle, configuration }) => {
   );
 };
 
-export const FieldSettings = () => {
+export /**
+ * @returns {Fragment}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const FieldSettings = () => {
   const {
     actions: { setProp },
     name,
@@ -173,6 +197,9 @@ export const FieldSettings = () => {
   );
 };
 
+/** 
+ * @type {object} 
+ */
 Field.craft = {
   displayName: "Field",
   related: {