@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.1-alpha.1

package/dist/cjs/g/DragAndDrop/DragAndDrop.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _common = require("./common");
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'drag-and-drop';
+
+/**
+ * This is the component description.
+ */
+const DragAndDrop = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    as: Wrapper,
+    onOrderChange,
+    items
+    // ...otherProps
+  } = _ref;
+  const [draggableItems, setDraggableItems] = (0, _react.useState)(items);
+  const handleDrop = (e, dragOverItemIndex) => {
+    e.preventDefault();
+    const dragItemIndex = e.dataTransfer.getData('text');
+    const orderedItems = [...draggableItems];
+    const [reorderedItem] = orderedItems.splice(dragItemIndex, 1);
+    orderedItems.splice(dragOverItemIndex, 0, reorderedItem);
+    setDraggableItems(orderedItems);
+    onOrderChange?.(orderedItems);
+  };
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, draggableItems.map((_ref2, index) => {
+    let {
+      identifier,
+      disabled,
+      Content,
+      ...rest
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(_common.DraggableItem, _extends({
+      draggable: true,
+      onDrop: e => handleDrop(e, index),
+      index: index,
+      key: identifier
+    }, rest), Content);
+  }));
+};
+DragAndDrop.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The html element to use to display this component.
+   */
+  as: _propTypes.default.string,
+  /**
+   * The node list of items to be dragged around
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    Content: _propTypes.default.node.isRequired,
+    identifier: _propTypes.default.string.isRequired,
+    as: _propTypes.default.string
+  })).isRequired,
+  /*
+  * A function to be called when the draggable items are re-ordered
+  */
+  onOrderChange: _propTypes.default.func
+};
+DragAndDrop.defaultProps = {
+  as: 'ul'
+};
+DragAndDrop.DraggableItem = _common.DraggableItem;
+var _default = exports.default = DragAndDrop;

package/dist/cjs/g/DragAndDrop/common/DraggableItem/DraggableItem.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'draggable-item';
+
+/**
+ * This is the component description.
+ */
+const DraggableItem = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    as: Wrapper,
+    children,
+    index,
+    ...otherProps
+  } = _ref;
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const handleDragStart = e => {
+    setIsDragging(true);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', index);
+  };
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+  const handleDragOver = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, isDragging && 'dragging'].filter(e => e).join(' '),
+    style: style,
+    onDragStart: e => handleDragStart(e),
+    onDragOver: e => handleDragOver(e),
+    onDragEnd: e => handleDragEnd(e)
+  }, otherProps), children);
+};
+DraggableItem.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node,
+  /**
+   * The html element to use to display this component.
+   */
+  as: _propTypes.default.string
+};
+DraggableItem.defaultProps = {
+  as: 'li'
+};
+var _default = exports.default = DraggableItem;

package/dist/cjs/g/DragAndDrop/common/DraggableItem/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DraggableItem", {
+  enumerable: true,
+  get: function () {
+    return _DraggableItem.default;
+  }
+});
+var _DraggableItem = _interopRequireDefault(require("./DraggableItem"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/DragAndDrop/common/DraggableItem/styles.scss

@@ -0,0 +1,12 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.draggable-item {
+  cursor: move;
+  list-style: none;
+
+  &.dragging {
+    opacity: .5;
+  }
+}

package/dist/cjs/g/DragAndDrop/common/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DraggableItem", {
+  enumerable: true,
+  get: function () {
+    return _DraggableItem.DraggableItem;
+  }
+});
+var _DraggableItem = require("./DraggableItem");

package/dist/cjs/g/DragAndDrop/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DragAndDrop", {
+  enumerable: true,
+  get: function () {
+    return _DragAndDrop.default;
+  }
+});
+var _DragAndDrop = _interopRequireDefault(require("./DragAndDrop"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/DragAndDrop/styles.scss

@@ -0,0 +1,8 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.drag-and-drop {
+  margin: 0;
+  padding: 0;
+}

package/dist/cjs/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _f = require("../../f");
+var _b = require("../../b");
+var _common = require("./common");
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* @pareto-engineering/generator-front 1.0.12 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'expandable-lexical-preview';
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    nodes,
+    name,
+    color,
+    resize,
+    pageTitle,
+    onBlock,
+    onOpen,
+    header
+    // ...otherProps
+  } = _ref;
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
+  const handleButtonClick = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  return /*#__PURE__*/React.createElement(_formik.Formik, {
+    initialValues: {
+      [name]: nodes
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isCollapsed && 'collapsed'].filter(e => e).join(' '),
+    style: style
+  }, typeof header === 'string' ? /*#__PURE__*/React.createElement("p", {
+    className: "title h2"
+  }, header) : header, isCollapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_b.Button, {
+    onClick: handleButtonClick,
+    color: "background-far",
+    isCompact: true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon c-x x-paragraph"
+  }, "C")), /*#__PURE__*/React.createElement(_common.NewWindowPortal, {
+    pageTitle: pageTitle,
+    onBlock: () => {
+      onBlock?.();
+      setIsCollapsed(false);
+    },
+    onOpen: () => {
+      onOpen?.();
+      setIsCollapsed(true);
+    }
+  }, /*#__PURE__*/React.createElement(_f.EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_f.EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true,
+    id: "the-bad-ass-input"
+  }), /*#__PURE__*/React.createElement(_b.Button, {
+    id: id,
+    className: "expand-button ai-icon",
+    color: "background-far",
+    isCompact: true,
+    onClick: handleButtonClick
+  }, "D"))));
+};
+ExpandableLexicalPreview.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * Color of the text
+   */
+  color: _propTypes.default.string,
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes: _propTypes.default.string,
+  /**
+   * The resize property of the textarea
+   */
+  resize: _propTypes.default.string,
+  /**
+   * The header for the preview component.
+   */
+  header: _propTypes.default.node,
+  /**
+   * The page title for the expanded preview.
+   */
+  pageTitle: _propTypes.default.string,
+  /**
+   * The name used to acces the nodes
+   */
+  name: _propTypes.default.string.isRequired,
+  /**
+   * The function to run when a new window portal can be opened
+   */
+  onBlock: _propTypes.default.func.isRequired
+};
+ExpandableLexicalPreview.defaultProps = {
+  color: 'paragraph',
+  resize: 'vertical'
+};
+var _default = exports.default = ExpandableLexicalPreview;

package/dist/cjs/g/ExpandableLexicalPreview/common/NewWindowPortal/NewWindowPortal.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactDom = require("react-dom");
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _a = require("../../../../a");
+require("./styles.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* @pareto-engineering/generator-front 1.0.12 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const copyStyles = (sourceDocument, targetDocument) => {
+  Array.from(sourceDocument.querySelectorAll('link[rel="stylesheet"], style')).forEach(link => {
+    targetDocument.head.appendChild(link.cloneNode(true));
+  });
+};
+/**
+ * This is the component description.
+ */
+const NewWindowPortal = _ref => {
+  let {
+    children,
+    pageTitle,
+    onBlock,
+    onOpen
+  } = _ref;
+  const [newWindow, setNewWindow] = (0, _react.useState)(null);
+  const container = (0, _react.useMemo)(() => document.createElement('div'), []);
+  const {
+    userTheme = 'light'
+  } = (0, _a.useTheme)();
+  (0, _react.useEffect)(() => {
+    if (!container) return;
+    container.classList.add(baseClassName, 'new-window-portal', `ui-${userTheme}`);
+    const newExternalWindow = window.open('', pageTitle, 'width="100%",height="100%"');
+    if (newExternalWindow) {
+      newExternalWindow.document.title = pageTitle;
+      newExternalWindow.document.body.appendChild(container);
+      setNewWindow(newExternalWindow);
+      onOpen();
+    } else {
+      console.warn('A new window / tab could not be opened. Check your settings and/or extensions, maybe it was blocked.');
+      onBlock();
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      container.classList.remove(...container.classList);
+      newExternalWindow?.close();
+    };
+  }, [container, pageTitle, userTheme]);
+  (0, _react.useEffect)(() => {
+    if (newWindow) {
+      copyStyles(document, newWindow.document);
+    }
+  }, [newWindow]);
+  return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
+};
+NewWindowPortal.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: _propTypes.default.node,
+  /**
+   * The new window page title
+   */
+  pageTitle: _propTypes.default.string.isRequired
+};
+NewWindowPortal.defaultProps = {
+  // someProp:false
+};
+var _default = exports.default = NewWindowPortal;

package/dist/cjs/g/ExpandableLexicalPreview/common/NewWindowPortal/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NewWindowPortal", {
+  enumerable: true,
+  get: function () {
+    return _NewWindowPortal.default;
+  }
+});
+var _NewWindowPortal = _interopRequireDefault(require("./NewWindowPortal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/ExpandableLexicalPreview/common/NewWindowPortal/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.new-window-portal {
+  background-color: var(--background-far);
+  height: 100%;
+  width: 100%;
+}

package/dist/cjs/g/ExpandableLexicalPreview/common/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NewWindowPortal", {
+  enumerable: true,
+  get: function () {
+    return _NewWindowPortal.NewWindowPortal;
+  }
+});
+var _NewWindowPortal = require("./NewWindowPortal");

package/dist/cjs/g/ExpandableLexicalPreview/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExpandableLexicalPreview", {
+  enumerable: true,
+  get: function () {
+    return _ExpandableLexicalPreview.default;
+  }
+});
+var _ExpandableLexicalPreview = _interopRequireDefault(require("./ExpandableLexicalPreview"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/g/ExpandableLexicalPreview/styles.scss

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  position: relative;
+  width: 100%;
+
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .#{bem.$base}.expand-button {
+    border: 1px solid var(--outline-inputs);
+    position: absolute;
+    right: 1em;
+    top: 5.5rem;
+  }
+}

package/dist/cjs/g/FormBuilder/FormBuilder.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+var _common = require("./common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'form-builder';
+
+/**
+ * This is the component description.
+ */
+const FormBuilder = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    mode,
+    formData,
+    formBuilderId,
+    onBuilderFormSave,
+    onRendererFormSave
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, mode === 'build' && /*#__PURE__*/React.createElement(_common.Builder, {
+    formBuilderId: formBuilderId,
+    onSave: onBuilderFormSave
+  }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
+    formData: formData,
+    onSave: onRendererFormSave
+  }));
+};
+FormBuilder.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The mode of the form builder to determine whether to render a form or build a form
+   */
+  mode: _propTypes.default.oneOf(['build', 'render']),
+  /**
+   * This is the ID of the form element in the <Builder /> component
+   */
+  formBuilderId: _propTypes.default.string.isRequired
+};
+FormBuilder.defaultProps = {
+  mode: 'build'
+};
+FormBuilder.Builder = _common.Builder;
+FormBuilder.Renderer = _common.Renderer;
+var _default = exports.default = FormBuilder;