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

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

@@ -41,6 +41,7 @@ const MultipleCombobox = _ref => {
     labelColor,
     name,
     optional,
+    getTagColor,
     options: items,
     getOptions,
     setValue,
@@ -102,7 +103,6 @@ const MultipleCombobox = _ref => {
             ...changes,
             isOpen: true // keep the menu open after selection.
           };
-
         default:
           break;
       }
@@ -185,7 +185,7 @@ const MultipleCombobox = _ref => {
       removeSelectedItem(selectedItem);
     },
     isCompact: true,
-    color: color
+    color: getTagColor ? getTagColor(selectedItem) : color
   }, /*#__PURE__*/React.createElement("span", null, selectedItem.label), /*#__PURE__*/React.createElement("span", {
     className: "icon close"
   }, "Y"))))), /*#__PURE__*/React.createElement("div", {
@@ -294,7 +294,36 @@ MultipleCombobox.propTypes = {
   /**
    * The placeholder text for the input
    */
-  placeholder: _propTypes.default.string
+  placeholder: _propTypes.default.string,
+  /**
+   * The function to set the options of the custom select input
+   */
+  setOptions: _propTypes.default.func,
+  /**
+   * 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,
+  /**
+   * The function to get the color of the tag
+   */
+  getTagColor: _propTypes.default.func,
+  /**
+   * The color of the label
+   */
+  labelColor: _propTypes.default.string,
+  /**
+   * The function to validate the input
+   */
+  validate: _propTypes.default.func,
+  /**
+   * Whether to allow multiple items selection
+   */
+  multiple: _propTypes.default.bool,
+  /**
+   * The variable to be used to search the data
+   */
+  searchVariable: _propTypes.default.string
 };
 MultipleCombobox.defaultProps = {
   // someProp: false

package/dist/cjs/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _r = require("./r");
-Object.keys(_r).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _r[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _r[key];
-    }
-  });
-});
 var _a = require("./a");
 Object.keys(_a).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -48,7 +48,6 @@ const node /*: ConcreteRequest*/ = function () {
       "name": "QueryLoaderHelloQuery",
       "selections": v0 /*: any*/
     },
-
     "params": {
       "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
       "id": null,

package/dist/es/a/AnimatedGradient/AnimatedGradient.js

@@ -37,7 +37,6 @@ const AnimatedGradient = ({
     // {...otherProps}
   });
 };
-
 AnimatedGradient.propTypes = {
   /**
   * The HTML class names for this element

package/dist/es/a/AnimatedGradient/webGIRenderer.js

@@ -319,7 +319,6 @@ class Gradient {
                     window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play()
                 }) */);
   }
-
   disconnect() {
     this.scrollObserver && (window.removeEventListener('scroll', this.handleScroll), window.removeEventListener('mousedown', this.handleMouseDown), window.removeEventListener('mouseup', this.handleMouseUp), window.removeEventListener('keydown', this.handleKeyDown), this.scrollObserver.disconnect()), window.removeEventListener('resize', this.resize);
   }

package/dist/es/a/BlurOverlay/BlurOverlay.js

@@ -42,5 +42,4 @@ BlurOverlay.defaultProps = {
   blur: true
   // someProp:false
 };
-
 export default BlurOverlay;

package/dist/es/a/DotInfo/DotInfo.js

@@ -71,5 +71,4 @@ DotInfo.defaultProps = {
   height: '2em'
   // someProp:false
 };
-
 export default DotInfo;

package/dist/es/a/LexicalPreview/LexicalPreview.js

@@ -0,0 +1,80 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'lexical-preview';
+
+/**
+ * This is the component description.
+ */
+const LexicalPreview = ({
+  id,
+  className: userClassName,
+  style,
+  nodes,
+  color
+  // ...otherProps
+}) => {
+  const initialConfig = {
+    nameSpace: id,
+    editable: false,
+    editorState: nodes,
+    theme: {
+      text: {
+        italic: 'italic',
+        strikethrough: 'strikethrough',
+        underline: 'underlined'
+      }
+    },
+    nodes: [AutoLinkNode, LinkNode, ListNode, ListItemNode]
+  };
+  return /*#__PURE__*/React.createElement(LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
+      id: id,
+      className: "content-editable"
+    })
+  })));
+};
+LexicalPreview.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * Color of the text
+   */
+  color: PropTypes.string,
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes: PropTypes.string
+};
+LexicalPreview.defaultProps = {
+  color: 'paragraph'
+};
+export default LexicalPreview;

package/dist/es/a/LexicalPreview/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as LexicalPreview } from "./LexicalPreview";

package/dist/es/a/LexicalPreview/styles.scss

@@ -0,0 +1,46 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.lexical-preview {
+  > .content-editable {
+    color: var(--y);
+    overflow: auto;
+
+    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);
+    }
+  }
+}

package/dist/es/a/People/common/Person/Person.js

@@ -20,21 +20,28 @@ const Person = ({
   role,
   color
   // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement("img", {
-  className: "image v50 mr-v",
-  src: image,
-  alt: `${name}, ${role}`
-}), /*#__PURE__*/React.createElement("div", {
-  className: "details"
-}, name && /*#__PURE__*/React.createElement("p", {
-  className: "name"
-}, name), role && /*#__PURE__*/React.createElement("p", {
-  className: "role"
-}, role)));
+}) => {
+  const handleImageSrcError = e => {
+    e.target.onerror = null;
+    e.target.src = '/default-avatar.svg';
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "image v50 mr-v",
+    src: image || '/default-avatar.svg',
+    alt: `${name}, ${role}`,
+    onError: handleImageSrcError
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "details"
+  }, name && /*#__PURE__*/React.createElement("p", {
+    className: "name"
+  }, name), role && /*#__PURE__*/React.createElement("p", {
+    className: "role"
+  }, role)));
+};
 Person.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/ProgressBar/ProgressBar.js

@@ -19,11 +19,12 @@ const ProgressBar = ({
   attached,
   color,
   progress,
-  height
+  height,
+  rounded
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
-  className: [baseClassName, componentClassName, attached && styleNames.modifierAttached, color && `x-${color}`, userClassName].filter(e => e).join(' '),
+  className: [baseClassName, componentClassName, attached && styleNames.modifierAttached, color && `x-${color}`, userClassName, rounded && 'rounded'].filter(e => e).join(' '),
   style: {
     '--progress': progress,
     '--height': height,
@@ -32,7 +33,6 @@ const ProgressBar = ({
   "data-length": "50%"
   // {...otherProps}
 });
-
 ProgressBar.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/ProgressBar/styles.scss

@@ -5,9 +5,11 @@
 $default-height:var(--height, 1em);
 $default-border:none;//2px solid var(--grid);
 $default-transition-duration:.5s;
-$default-color:var(--x, var(--main1));
+$default-color:var(--x, var(--main));
+$default-border-radius:var(--theme-border-radius, 1.875rem);
 
 .#{bem.$base}.progress-bar {
+  background-color: var(--progress-bar-background-color);
   border: $default-border;
   height: $default-height;
   position: relative;
@@ -28,6 +30,14 @@ $default-color:var(--x, var(--main1));
     z-index: 1;
   }
 
+  &.rounded {
+    border-radius: $default-border-radius;
+
+    &::after {
+      border-radius: $default-border-radius;
+    }
+  }
+
   &.#{bem.$modifier-attached} {
     border: unset;
     border-bottom: $default-border;

package/dist/es/a/XMLEditor/XMLEditor.js

@@ -0,0 +1,112 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { EditorState } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, crosshairCursor, rectangularSelection } from '@codemirror/view';
+import { defaultKeymap } from '@codemirror/commands';
+import { indentOnInput, bracketMatching, foldGutter } from '@codemirror/language';
+import { xml } from '@codemirror/lang-xml';
+import styleNames from '@pareto-engineering/bem/exports';
+import { theme } from "./common";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'code-editor';
+
+/**
+ * codemirror documentation:
+ * https://codemirror.net/
+ */
+
+const XMLEditor = ({
+  id,
+  className: userClassName,
+  style,
+  readOnly,
+  height,
+  gutterWidth,
+  config,
+  onChange,
+  stopPropagationKeys
+}) => {
+  const editorRef = useRef();
+  useEffect(() => {
+    const startState = EditorState.create({
+      doc: config,
+      extensions: [keymap.of(defaultKeymap), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
+        onChange(view);
+        // view.state.doc.toString() to receive the current content in the editor.
+      }), EditorView.domEventHandlers({
+        keydown(e) {
+          if (stopPropagationKeys?.includes(e.key)) {
+            e.stopPropagation();
+          }
+        }
+      })]
+    });
+    const view = new EditorView({
+      state: startState,
+      parent: editorRef.current
+    });
+    return () => {
+      view.destroy();
+    };
+  }, [editorRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    ref: editorRef,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      '--height': height,
+      '--gutter-width': gutterWidth,
+      ...style
+    }
+  });
+};
+XMLEditor.propTypes = {
+  /**
+     * The HTML id for this element
+     */
+  id: PropTypes.string,
+  /**
+     * The HTML class names for this element
+     */
+  className: PropTypes.string,
+  /**
+     * The React-written, css properties for this element.
+     */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+     *  Whether or not the content is read only.
+     */
+  readOnly: PropTypes.bool,
+  /**
+   * The initial labeling configuration.
+   */
+  config: PropTypes.string,
+  /**
+   * The height of the editor.
+   */
+  height: PropTypes.string,
+  /**
+   * The callback for when the labeling configuration changes.
+   */
+  onChange: PropTypes.func,
+  /**
+   * The width of the gutter.
+   */
+  gutterWidth: PropTypes.string,
+  /**
+   * The keys to stop propagation on.
+   */
+  stopPropagationKeys: PropTypes.arrayOf(PropTypes.string)
+};
+XMLEditor.defaultProps = {
+  config: `<View>
+  <!--Edit this config to customize the labeling interface.-->
+</View>
+  `,
+  height: '20em',
+  gutterWidth: '3em'
+};
+export default XMLEditor;

package/dist/es/a/XMLEditor/common/index.js

@@ -0,0 +1 @@
+export { default as theme } from "./theme";

package/dist/es/a/XMLEditor/common/theme.js

@@ -0,0 +1,180 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+const chalky = '#e5c07b';
+const coral = '#e06c75';
+const cyan = '#56b6c2';
+const invalid = '#ffffff';
+const ivory = '#abb2bf';
+const stone = '#7d8799'; // Brightened compared to original to increase contrast
+const malibu = '#61afef';
+const sage = '#98c379';
+const whiskey = '#d19a66';
+const violet = '#c678dd';
+const darkBackground = '#21252b';
+const highlightBackground = '#2c313a';
+const background = '#282c34';
+const tooltipBackground = '#353a42';
+const selection = '#3E4451';
+const cursor = '#528bff';
+/**
+The colors used in the theme, as CSS color strings.
+*/
+// const color = {
+//     chalky,
+//     coral,
+//     cyan,
+//     invalid,
+//     ivory,
+//     stone,
+//     malibu,
+//     sage,
+//     whiskey,
+//     violet,
+//     darkBackground,
+//     highlightBackground,
+//     background,
+//     tooltipBackground,
+//     selection,
+//     cursor
+// };
+/**
+The editor theme styles for One Dark.
+*/
+const oneDarkTheme = /* @__PURE__ */EditorView.theme({
+  '&': {
+    color: ivory,
+    backgroundColor: background
+  },
+  '.cm-content': {
+    caretColor: cursor
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: cursor
+  },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: selection
+  },
+  '.cm-panels': {
+    backgroundColor: darkBackground,
+    color: ivory
+  },
+  '.cm-panels.cm-panels-top': {
+    borderBottom: '2px solid black'
+  },
+  '.cm-panels.cm-panels-bottom': {
+    borderTop: '2px solid black'
+  },
+  '.cm-searchMatch': {
+    backgroundColor: '#72a1ff59',
+    outline: '1px solid #457dff'
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: '#6199ff2f'
+  },
+  '.cm-activeLine': {
+    backgroundColor: '#6699ff0b'
+  },
+  '.cm-selectionMatch': {
+    backgroundColor: '#aafe661a'
+  },
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+    backgroundColor: '#bad0f847'
+  },
+  '.cm-gutters': {
+    backgroundColor: background,
+    color: stone,
+    border: 'none'
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: highlightBackground
+  },
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: '#ddd'
+  },
+  '.cm-tooltip': {
+    border: 'none',
+    backgroundColor: tooltipBackground
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent'
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after': {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: highlightBackground,
+      color: ivory
+    }
+  }
+}, {
+  dark: true
+});
+/**
+The highlighting style for code in the One Dark theme.
+*/
+const oneDarkHighlightStyle = /* @__PURE__ */HighlightStyle.define([{
+  tag: tags.keyword,
+  color: violet
+}, {
+  tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+  color: coral
+}, {
+  tag: [/* @__PURE__ */tags.function(tags.variableName), tags.labelName],
+  color: malibu
+}, {
+  tag: [tags.color, /* @__PURE__ */tags.constant(tags.name), /* @__PURE__ */tags.standard(tags.name)],
+  color: whiskey
+}, {
+  tag: [/* @__PURE__ */tags.definition(tags.name), tags.separator],
+  color: ivory
+}, {
+  tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
+  color: chalky
+}, {
+  tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, /* @__PURE__ */tags.special(tags.string)],
+  color: cyan
+}, {
+  tag: [tags.meta, tags.comment],
+  color: stone
+}, {
+  tag: tags.strong,
+  fontWeight: 'bold'
+}, {
+  tag: tags.emphasis,
+  fontStyle: 'italic'
+}, {
+  tag: tags.strikethrough,
+  textDecoration: 'line-through'
+}, {
+  tag: tags.link,
+  color: stone,
+  textDecoration: 'underline'
+}, {
+  tag: tags.heading,
+  fontWeight: 'bold',
+  color: coral
+}, {
+  tag: [tags.atom, tags.bool, /* @__PURE__ */tags.special(tags.variableName)],
+  color: whiskey
+}, {
+  tag: [tags.processingInstruction, tags.string, tags.inserted],
+  color: sage
+}, {
+  tag: tags.invalid,
+  color: invalid
+}]);
+/**
+Extension to enable the One Dark theme (both the editor theme and
+the highlight style).
+*/
+const oneDark = [oneDarkTheme, /* @__PURE__ */syntaxHighlighting(oneDarkHighlightStyle)];
+export default oneDark;

package/dist/es/a/XMLEditor/index.js

@@ -0,0 +1 @@
+export { default as XMLEditor } from "./XMLEditor";

package/dist/es/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/es/a/index.js

@@ -22,4 +22,6 @@ export { Tip } from "./Tip";
 export { AnimatedGradient } from "./AnimatedGradient";
 export { TextSteps } from "./TextSteps";
 export { Removable } from "./Removable";
-export { ToggleSwitch } from "./ToggleSwitch";
+export { ToggleSwitch } from "./ToggleSwitch";
+export { XMLEditor } from "./XMLEditor";
+export { LexicalPreview } from "./LexicalPreview";