@saltcorn/builder 0.0.1-beta.1

package/src/components/elements/BoxModelEditor.js

@@ -0,0 +1,398 @@
+/**
+ * @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 /**
+ *
+ * @param {object} props
+ * @param {function} props.setProp
+ * @param {object} props.node
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
+  const [selectedCategory, setSelectedCategory] = useState(false);
+  const [selectedDirection, setSelectedDirection] = useState(false);
+  const selectedProperty = !selectedCategory
+    ? false
+    : selectedDirection
+    ? `${selectedCategory}-${selectedDirection}`
+    : selectedCategory;
+  const setCatAndDir = (c, d) => {
+    setSelectedCategory(c);
+    setSelectedDirection(d);
+  };
+  //console.log(node.style);
+  const style = node.style;
+  return (
+    <Fragment>
+      <div className="w-100 text-center">
+        <div className="boxmodel-container boxmodel-chrome-skin mt-2 mx-auto text-center">
+          <div className="boxmodel-container">
+            <div className="boxmodel-margin">
+              <span
+                className="boxmodel-text boxmodel-header"
+                onClick={() => setCatAndDir("margin", null)}
+              >
+                Margin
+              </span>
+              <span
+                className="boxmodel-input-container boxmodel-input-direction-left"
+                onClick={() => setCatAndDir("margin", "left")}
+              >
+                <div className="rotate dim-display">
+                  {style["margin-left"] || style["margin"] || ""}
+                </div>
+              </span>
+              <div className="flex-row">
+                <span
+                  className="boxmodel-input-container boxmodel-input-direction-top"
+                  onClick={() => setCatAndDir("margin", "top")}
+                >
+                  <input
+                    disabled
+                    type="text"
+                    autoComplete="off"
+                    name="boxmodel-ex-1_top_margin"
+                    size="3"
+                    value={style["margin-top"] || style["margin"] || ""}
+                  />
+                </span>
+                <div className="boxmodel-border">
+                  <span
+                    className="boxmodel-text boxmodel-header"
+                    onClick={() => setCatAndDir("border", null)}
+                  >
+                    Border
+                  </span>
+                  <span
+                    className="boxmodel-input-container boxmodel-input-direction-left"
+                    onClick={() => setCatAndDir("border", "left")}
+                  >
+                    <div className="rotate dim-display">
+                      {style["border-left-width"] ||
+                        style["border-width"] ||
+                        ""}
+                    </div>
+                  </span>
+                  <div className="flex-row">
+                    <span
+                      className="boxmodel-input-container boxmodel-input-direction-top"
+                      onClick={() => setCatAndDir("border", "top")}
+                    >
+                      <input
+                        disabled
+                        type="text"
+                        autoComplete="off"
+                        name="boxmodel-ex-1_top_border"
+                        value={
+                          style["border-top-width"] ||
+                          style["border-width"] ||
+                          ""
+                        }
+                        size="3"
+                      />
+                    </span>
+                    <div className="boxmodel-padding">
+                      <span
+                        className="boxmodel-text boxmodel-header"
+                        onClick={() => setCatAndDir("padding", null)}
+                      >
+                        Padding
+                      </span>
+                      <span
+                        className="boxmodel-input-container boxmodel-input-direction-left"
+                        onClick={() => setCatAndDir("padding", "left")}
+                      >
+                        <div className="rotate dim-display-padding">
+                          {style["padding-left"] || style["padding"] || ""}
+                        </div>
+                      </span>
+                      <div className="flex-row">
+                        <span
+                          className="boxmodel-input-container boxmodel-input-direction-top"
+                          onClick={() => setCatAndDir("padding", "top")}
+                        >
+                          <input
+                            disabled
+                            type="text"
+                            autoComplete="off"
+                            name="boxmodel-ex-1_top_padding"
+                            value={
+                              style["padding-top"] || style["padding"] || ""
+                            }
+                            size="3"
+                          />
+                        </span>
+                        <div
+                          className="boxmodel-content"
+                          onClick={() => setSelectedCategory("size")}
+                        >
+                          <input
+                            disabled
+                            type="text"
+                            autoComplete="off"
+                            name="boxmodel-ex-1_width"
+                            size="3"
+                            value={
+                              sizeWithStyle
+                                ? style["width"]
+                                : node.width
+                                ? `${node.width}${node.widthUnits || "px"}`
+                                : ""
+                            }
+                          />
+                          x
+                          <input
+                            disabled
+                            type="text"
+                            autoComplete="off"
+                            name="boxmodel-ex-1_height"
+                            size="3"
+                            value={
+                              sizeWithStyle
+                                ? style["height"]
+                                : node.height
+                                ? `${node.height}${node.heightUnits || "px"}`
+                                : ""
+                            }
+                          />
+                        </div>
+                        <span
+                          className="boxmodel-input-container boxmodel-input-direction-bottom"
+                          onClick={() => setCatAndDir("padding", "bottom")}
+                        >
+                          <input
+                            disabled
+                            type="text"
+                            autoComplete="off"
+                            name="boxmodel-ex-1_bottom_padding"
+                            size="3"
+                            value={
+                              style["padding-bottom"] || style["padding"] || ""
+                            }
+                          />
+                        </span>
+                      </div>
+                      <span
+                        className="boxmodel-input-container boxmodel-input-direction-right"
+                        onClick={() => setCatAndDir("padding", "right")}
+                      >
+                        <div className="rotate dim-display-padding">
+                          {style["padding-right"] || style["padding"] || ""}
+                        </div>
+                      </span>
+                    </div>
+                    <span
+                      className="boxmodel-input-container boxmodel-input-direction-bottom"
+                      onClick={() => setCatAndDir("border", "bottom")}
+                    >
+                      <input
+                        disabled
+                        type="text"
+                        autoComplete="off"
+                        name="boxmodel-ex-1_bottom_border"
+                        size="3"
+                        value={
+                          style["border-bottom-width"] ||
+                          style["border-width"] ||
+                          ""
+                        }
+                      />
+                    </span>
+                  </div>
+                  <span
+                    className="boxmodel-input-container boxmodel-input-direction-right"
+                    onClick={() => setCatAndDir("border", "right")}
+                  >
+                    <div className="rotate dim-display">
+                      {style["border-right-width"] ||
+                        style["border-width"] ||
+                        ""}
+                    </div>
+                  </span>
+                </div>
+                <span
+                  className="boxmodel-input-container boxmodel-input-direction-bottom"
+                  onClick={() => setCatAndDir("margin", "bottom")}
+                >
+                  <input
+                    disabled
+                    type="text"
+                    autoComplete="off"
+                    name="boxmodel-ex-1_bottom_margin"
+                    size="3"
+                    value={style["margin-bottom"] || style["margin"] || ""}
+                  />
+                </span>
+              </div>
+              <span
+                className="boxmodel-input-container boxmodel-input-direction-right"
+                onClick={() => setCatAndDir("margin", "right")}
+              >
+                <div className="rotate dim-display">
+                  {style["margin-right"] || style["margin"] || ""}
+                </div>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <table className="w-100 mt-2">
+        <tbody>
+          <tr>
+            <td width="45%"></td>
+            <td></td>
+          </tr>
+          {selectedProperty &&
+            ["margin", "padding"].includes(selectedCategory) && (
+              <SettingsRow
+                field={{
+                  name: selectedProperty,
+                  label: selectedProperty,
+                  type: "DimUnits",
+                  autoable: selectedCategory === "margin",
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+            )}
+          {selectedCategory === "size" && (
+            <Fragment>
+              <SettingsRow
+                field={{ name: "width", label: "width", type: "DimUnits" }}
+                node={node}
+                setProp={setProp}
+                isStyle={!!sizeWithStyle}
+              />
+              <SettingsRow
+                field={{ name: "height", label: "height", type: "DimUnits" }}
+                node={node}
+                setProp={setProp}
+                isStyle={!!sizeWithStyle}
+              />
+              <SettingsRow
+                field={{
+                  name: sizeWithStyle ? "min-height" : "minHeight",
+                  label: "min height",
+                  type: "DimUnits",
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={!!sizeWithStyle}
+              />
+            </Fragment>
+          )}
+          {selectedCategory === "border" && (
+            <Fragment>
+              <SettingsSectionHeaderRow title={selectedProperty} />
+              <SettingsRow
+                field={{
+                  name: selectedProperty + "-width",
+                  label: "width",
+                  type: "DimUnits",
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: selectedProperty + "-style",
+                  label: "style",
+                  type: "btn_select",
+                  btnClass: "btnstylesel",
+                  options: [
+                    "solid",
+                    "dotted",
+                    "dashed",
+                    "double",
+                    "groove",
+                    "ridge",
+                    "inset",
+                    "outset",
+                  ].map(bstyleopt),
+                }}
+                node={node}
+                isStyle={true}
+                setProp={setProp}
+              />
+              <SettingsRow
+                field={{
+                  name: selectedProperty + "-color",
+                  label: "color",
+                  type: "Color",
+                }}
+                node={node}
+                isStyle={true}
+                setProp={setProp}
+              />
+              {!selectedDirection && (
+                <SettingsRow
+                  field={{
+                    name: selectedProperty + "-radius",
+                    label: "radius",
+                    type: "DimUnits",
+                  }}
+                  node={node}
+                  setProp={setProp}
+                  isStyle={true}
+                />
+              )}
+              {selectedDirection &&
+                radiusCornerDirections[selectedDirection].map((corner, ix) => (
+                  <SettingsRow
+                    key={ix}
+                    field={{
+                      name: `border-${corner}-radius`,
+                      label: corner.replace("-", " ") + " radius",
+                      type: "DimUnits",
+                    }}
+                    node={node}
+                    setProp={setProp}
+                    isStyle={true}
+                  />
+                ))}
+            </Fragment>
+          )}
+          {!selectedProperty && (
+            <tr>
+              <td colSpan={2}>
+                <div>Click above to select a property to adjust.</div>
+                <div>
+                  <small>
+                    Click a label (margin, border, padding) to adjust all edges.
+                  </small>
+                </div>
+                <div>
+                  <small>Click an edge to adjust that edge.</small>
+                </div>
+                <div>
+                  <small>Click center to adjust height and width</small>
+                </div>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </Fragment>
+  );
+};
+const radiusCornerDirections = {
+  left: ["bottom-left", "top-left"],
+  right: ["bottom-right", "top-right"],
+  top: ["top-left", "top-right"],
+  bottom: ["bottom-left", "bottom-right"],
+};

package/src/components/elements/Card.js

@@ -0,0 +1,152 @@
+/**
+ * @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";
+
+import { Element, useNode } from "@craftjs/core";
+import { BoxModelEditor } from "./BoxModelEditor";
+import { bstyleopt } from "./utils";
+
+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, shadow, noPadding, style }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+
+  return (
+    <div
+      className={`card ${shadow ? "shadow" : ""} builder ${
+        selected ? "selected-node" : ""
+      }`}
+      style={reactifyStyles(style)}
+      ref={(dom) => connect(drag(dom))}
+    >
+      {title && title.length > 0 && (
+        <div className="card-header">
+          {isFormula?.title ? (
+            <span className="font-monospace">={title}</span>
+          ) : (
+            title
+          )}
+        </div>
+      )}
+      <div className={`card-body ${noPadding ? "p-0" : ""}`}>
+        <div className="canvas">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {Accordion}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const CardSettings = () => {
+  const node = useNode((node) => {
+    const ps = {};
+    fields.forEach((f) => {
+      ps[f.name] = node.data.props[f.name];
+    });
+    if (fields.some((f) => f.canBeFormula))
+      ps.isFormula = node.data.props.isFormula;
+    return ps;
+  });
+  const {
+    actions: { setProp },
+  } = node;
+
+  return (
+    <Accordion>
+      <table className="w-100" accordiontitle="Card properties">
+        <tbody>
+          <SettingsRow
+            field={{
+              label: "Card title",
+              name: "title",
+              type: "String",
+              canBeFormula: true,
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              label: "URL",
+              name: "url",
+              type: "String",
+              canBeFormula: true,
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{ label: "Shadow", name: "shadow", type: "Bool" }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{ label: "No padding", name: "noPadding", type: "Bool" }}
+            node={node}
+            setProp={setProp}
+          />
+        </tbody>
+      </table>
+      <div accordiontitle="Box" className="w-100">
+        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
+      </div>
+    </Accordion>
+  );
+};
+
+const fields = [
+  {
+    label: "Card title",
+    name: "title",
+    type: "String",
+    canBeFormula: true,
+  },
+  { label: "URL", name: "url", type: "String", canBeFormula: true },
+  { label: "Shadow", name: "shadow", type: "Bool" },
+  { label: "No padding", name: "noPadding", type: "Bool" },
+  { name: "style", default: {} },
+];
+
+/**
+ * @type {object}
+ */
+Card.craft = {
+  props: {
+    title: "",
+    url: "",
+    shadow: true,
+    isFormula: {},
+    style: {},
+  },
+  displayName: "Card",
+  related: {
+    settings: CardSettings,
+    segment_type: "card",
+    hasContents: true,
+    fields,
+  },
+};

package/src/components/elements/Column.js

@@ -0,0 +1,63 @@
+/**
+ * @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 /**
+ * 
+ * @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,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <div
+      className={selected ? "selected-node" : ""}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <div className={`canvas ${id === "ROOT" ? "root-canvas" : ""}`}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const ColumnSettings = () => {
+  const {} = useNode((node) => ({}));
+  return <div></div>;
+};
+
+/** 
+ * @type {object} 
+ */
+Column.craft = {
+  displayName: "Column",
+  props: {},
+  rules: {
+    canDrag: () => true,
+  },
+  related: {
+    settings: ColumnSettings,
+  },
+};