@pareto-engineering/design-system 4.0.0-alpha.69 → 4.0.0-alpha.72

package/dist/cjs/a/XMLEditor/styles.scss

@@ -0,0 +1,17 @@
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.code-editor {
+  border-radius: 1em;
+  height: var(--height);
+  overflow: auto;
+
+  > .cm-editor {
+    height: 100%;
+
+    .cm-gutters {
+      display: flex;
+      justify-content: flex-end;
+      width: var(--gutter-width);
+    }
+  }
+}

package/dist/cjs/a/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "Label", {
     return _Label.Label;
   }
 });
+Object.defineProperty(exports, "LexicalPreview", {
+  enumerable: true,
+  get: function () {
+    return _LexicalPreview.LexicalPreview;
+  }
+});
 Object.defineProperty(exports, "LoadingCircle", {
   enumerable: true,
   get: function () {
@@ -159,6 +165,12 @@ Object.defineProperty(exports, "ToggleSwitch", {
     return _ToggleSwitch.ToggleSwitch;
   }
 });
+Object.defineProperty(exports, "XMLEditor", {
+  enumerable: true,
+  get: function () {
+    return _XMLEditor.XMLEditor;
+  }
+});
 Object.defineProperty(exports, "useApp", {
   enumerable: true,
   get: function () {
@@ -195,4 +207,6 @@ var _Tip = require("./Tip");
 var _AnimatedGradient = require("./AnimatedGradient");
 var _TextSteps = require("./TextSteps");
 var _Removable = require("./Removable");
-var _ToggleSwitch = require("./ToggleSwitch");
+var _ToggleSwitch = require("./ToggleSwitch");
+var _XMLEditor = require("./XMLEditor");
+var _LexicalPreview = require("./LexicalPreview");

package/dist/cjs/b/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _LexicalComposer = require("@lexical/react/LexicalComposer");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _link = require("@lexical/link");
+var _list = require("@lexical/list");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _designSystem = require("@pareto-engineering/design-system");
+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 && Object.prototype.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 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+
+// 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,
+    color,
+    resize,
+    title
+    // ...otherProps
+  } = _ref;
+  const initialConfig = {
+    nameSpace: id,
+    editable: false,
+    editorState: nodes,
+    theme: {
+      text: {
+        italic: 'italic',
+        strikethrough: 'strikethrough',
+        underline: 'underlined'
+      }
+    },
+    nodes: [_link.AutoLinkNode, _link.LinkNode, _list.ListNode, _list.ListItemNode]
+  };
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
+  const handleButtonClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const Content = (0, _react.useMemo)(() => /*#__PURE__*/React.createElement("div", {
+    className: "lexical-content"
+  }, /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
+      id: id,
+      className: "content-editable"
+    })
+  }), /*#__PURE__*/React.createElement(_common.ExpandButton, {
+    title: title,
+    onResolve: handleButtonClick
+  })), [id]);
+  return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isExpanded && 'collapsed'].filter(e => e).join(' '),
+    style: {
+      '--resize': resize,
+      ...style
+    }
+  }, typeof title === 'string' ? /*#__PURE__*/React.createElement("p", {
+    className: "title h2"
+  }, title) : title, isExpanded && /*#__PURE__*/React.createElement(_designSystem.Button, {
+    onClick: handleButtonClick,
+    color: "background-far",
+    isCompact: true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon c-x x-paragraph"
+  }, "C")), !isExpanded && Content));
+};
+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 title for the preview.
+   */
+  title: _propTypes.default.string
+};
+ExpandableLexicalPreview.defaultProps = {
+  color: 'paragraph',
+  resize: 'vertical'
+};
+var _default = exports.default = ExpandableLexicalPreview;

package/dist/cjs/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _html = require("@lexical/html");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _designSystem = require("@pareto-engineering/design-system");
+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 && Object.prototype.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 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'expand-button';
+
+/**
+ * This is the component description.
+ */
+const ExpandButton = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    onResolve,
+    title
+    // ...otherProps
+  } = _ref;
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  return /*#__PURE__*/React.createElement(_designSystem.Button, {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
+    style: style,
+    color: "background-far",
+    isCompact: true,
+    onClick: () => {
+      editor.getEditorState().read(() => {
+        const rawHtml = (0, _html.$generateHtmlFromNodes)(editor);
+        const preview = window.open('', '_blank', 'width=600,height=600');
+        preview.document.write(`<html>
+            <title>${title || 'Preview'}</title>
+            <style>
+              li:has(ol, ul) {
+                list-style-type: none;
+              }
+
+              p,
+              span,
+              strong,
+              em,
+              li {
+                &.underlined {
+                  text-decoration: underline;
+
+                  &.strikethrough {
+                    text-decoration: underline line-through;
+                  }
+                }
+
+                &.strikethrough {
+                  text-decoration: line-through;
+                }
+
+                &.italic {
+                  font-style: italic;
+                }
+              }
+
+              :first-child {
+                margin-top: 0;
+              }
+
+              &::placeholder {
+                color: #abadb3;
+              }
+            </style>
+            <body>
+            <style></style>
+            ${rawHtml}
+            <button onclick="window.close()">Close Preview</button>
+            </body></html>`);
+      });
+      onResolve();
+    }
+  }, "D");
+};
+ExpandButton.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)
+};
+ExpandButton.defaultProps = {
+  // color: 'paragraph',
+  // resize: 'vertical',
+};
+var _default = exports.default = ExpandButton;

package/dist/cjs/{c/ContentSlides/common/Sidebar → b/ExpandableLexicalPreview/common/ExpandButton}/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Sidebar", {
+Object.defineProperty(exports, "ExpandButton", {
   enumerable: true,
   get: function () {
-    return _Sidebar.default;
+    return _ExpandButton.default;
   }
 });
-var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+var _ExpandButton = _interopRequireDefault(require("./ExpandButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

package/dist/cjs/b/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/b/ExpandableLexicalPreview/styles.scss

@@ -0,0 +1,84 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable max-nesting-depth -- required */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  width: 100%;
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .lexical-content {
+    position: relative;
+
+    > .content-editable {
+      background: var(--background-inputs);
+      border: 1px solid var(--outline-inputs);
+      border-radius: var(--theme-default-border-radius);
+      color: var(--y);
+      overflow: auto;
+      padding: var(--gap);
+      resize: var(--resize);
+
+      li:has(ol, ul) {
+        list-style-type: none;
+      }
+
+      p,
+      span,
+      strong,
+      em,
+      li {
+        &.underlined {
+          text-decoration: underline;
+
+          &.strikethrough {
+            text-decoration: underline line-through;
+          }
+        }
+
+        &.strikethrough {
+          text-decoration: line-through;
+        }
+
+        &.italic {
+          font-style: italic;
+        }
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+    }
+
+    > .#{bem.$base}.expand-button {
+      border: 1px solid var(--outline-inputs);
+      position: absolute;
+      right: 1em;
+      top: 1em;
+    }
+  }
+}

package/dist/cjs/b/Logo/Logo.js

@@ -75,7 +75,6 @@ const Logo = _ref => {
     // {...otherProps}
   });
 };
-
 Logo.propTypes = {
   /**
    * The HTML id for this element

package/dist/cjs/b/Title/Title.js

@@ -103,7 +103,6 @@ Title.propTypes = {
   subtitleProps: _propTypes.default.object
   /* eslint-enable react/forbid-prop-types */
 };
-
 Title.defaultProps = {
   headingAs: 'h1',
   subtitleAs: 'p'

package/dist/cjs/b/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "Card", {
     return _Card.Card;
   }
 });
+Object.defineProperty(exports, "ExpandableLexicalPreview", {
+  enumerable: true,
+  get: function () {
+    return _ExpandableLexicalPreview.ExpandableLexicalPreview;
+  }
+});
 Object.defineProperty(exports, "Logo", {
   enumerable: true,
   get: function () {
@@ -51,4 +57,5 @@ var _Page = require("./Page");
 var _SocialMediaButton = require("./SocialMediaButton");
 var _ThemeSelector = require("./ThemeSelector");
 var _Title = require("./Title");
-var _Card = require("./Card");
+var _Card = require("./Card");
+var _ExpandableLexicalPreview = require("./ExpandableLexicalPreview");

package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -47,14 +47,12 @@ const SocialMediaShareButton = _ref => {
       link: `https://www.facebook.com/sharer/sharer.php?u=${link}`
       // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
     },
-
     twitter: {
       icon: 't',
       link: `https://twitter.com/intent/tweet?url=${link}`
       // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
     }
   };
-
   return /*#__PURE__*/React.createElement("a", {
     href: defaultsMap[type].link,
     target: "_blank",

package/dist/cjs/c/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ContentSlides", {
-  enumerable: true,
-  get: function () {
-    return _ContentSlides.ContentSlides;
-  }
-});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -27,13 +21,6 @@ Object.defineProperty(exports, "SocialMediaShareButton", {
     return _SocialMediaShareButton.SocialMediaShareButton;
   }
 });
-Object.defineProperty(exports, "useContentSlides", {
-  enumerable: true,
-  get: function () {
-    return _ContentSlides.useContentSlides;
-  }
-});
-var _ContentSlides = require("./ContentSlides");
 var _Shortener = require("./Shortener");
 var _SocialMediaShareButton = require("./SocialMediaShareButton");
 var _Modal = require("./Modal");

package/dist/cjs/f/FormInput/FormInput.js

@@ -14,7 +14,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && Object.prototype.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 = styleNames.base
+
 const componentClassName = 'form-input';
 
 /**

package/dist/cjs/f/fields/EditorInput/EditorInput.js

@@ -51,7 +51,8 @@ const EditorInput = _ref => {
     labelColor,
     description,
     disabled,
-    showDebugger
+    showDebugger,
+    stopPropagationKeys
     // ...otherProps
   } = _ref;
   const formik = (0, _formik.useFormikContext)();
@@ -130,7 +131,9 @@ const EditorInput = _ref => {
     })
   }), /*#__PURE__*/React.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(_LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(_LexicalTabIndentationPlugin.TabIndentationPlugin, null), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(_common.FormDescription, {
+  }), /*#__PURE__*/React.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(_LexicalListPlugin.ListPlugin, null), /*#__PURE__*/React.createElement(_LexicalTabIndentationPlugin.TabIndentationPlugin, null), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), stopPropagationKeys && /*#__PURE__*/React.createElement(_common2.StopPropagationPlugin, {
+    stopPropagationKeys: stopPropagationKeys
+  }), /*#__PURE__*/React.createElement(_common.FormDescription, {
     className: "s-1",
     description: description,
     name: name
@@ -189,7 +192,15 @@ EditorInput.propTypes = {
   /**
    * The resize property of the text area
    */
-  resize: _propTypes.default.oneOf(['none', 'both', 'horizontal', 'vertical'])
+  resize: _propTypes.default.oneOf(['none', 'both', 'horizontal', 'vertical']),
+  /**
+   * Whether to show the debugger or not
+   */
+  showDebugger: _propTypes.default.bool,
+  /**
+   * Map to stop propagation of the given keys
+   */
+  stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 EditorInput.defaultProps = {
   rows: 10,

package/dist/cjs/f/fields/EditorInput/common/StopPropagationPlugin.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+const StopPropagationPlugin = _ref => {
+  let {
+    stopPropagationKeys
+  } = _ref;
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  (0, _react.useInsertionEffect)(() => {
+    const onKeyDown = e => {
+      if (stopPropagationKeys?.includes(e.key)) {
+        e.stopPropagation();
+      }
+    };
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('keydown', onKeyDown);
+      }
+      if (rootElement !== null) {
+        rootElement.addEventListener('keydown', onKeyDown);
+      }
+    });
+  }, [editor]);
+};
+var _default = exports.default = StopPropagationPlugin;

package/dist/cjs/f/fields/EditorInput/common/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "StopPropagationPlugin", {
+  enumerable: true,
+  get: function () {
+    return _StopPropagationPlugin.default;
+  }
+});
 Object.defineProperty(exports, "Toolbar", {
   enumerable: true,
   get: function () {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "TreeViewPlugin", {
 });
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _TreeViewPlugin = _interopRequireDefault(require("./TreeViewPlugin"));
+var _StopPropagationPlugin = _interopRequireDefault(require("./StopPropagationPlugin"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js

@@ -31,6 +31,7 @@ const QueryCombobox = _ref => {
     name,
     label,
     labelColor,
+    getTagColor,
     color,
     optional,
     description,
@@ -110,6 +111,7 @@ const QueryCombobox = _ref => {
     name,
     label,
     labelColor,
+    getTagColor,
     optional,
     description,
     setValue,
@@ -213,7 +215,15 @@ QueryCombobox.propTypes = {
    * Whether to prompt the user to create a new option if the search input
    * does not match any of the options
    */
-  promptCreateNewOption: _propTypes.default.bool
+  promptCreateNewOption: _propTypes.default.bool,
+  /**
+   * The placeholder text for the input
+   * */
+  placeholder: _propTypes.default.string,
+  /**
+   * The function to get the color of the tag
+   * */
+  getTagColor: _propTypes.default.func
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {