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

package/dist/cjs/a/Tooltip/Tooltip.js

@@ -0,0 +1,87 @@
+"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");
+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 = 'tooltip';
+
+/**
+ * This is the component description.
+ */
+const Tooltip = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    position,
+    color,
+    description,
+    content,
+    children
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tooltip-trigger-wrapper",
+    "aria-describedby": description
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: `tooltip-content ${position}`,
+    role: "tooltip",
+    id: description
+  }, content));
+};
+Tooltip.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string.isRequired,
+  /**
+   * 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 where the tooltip will be applied
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   *  The content JSX that renders the tooltip content
+   */
+  content: _propTypes.default.node.isRequired,
+  /**
+   *  The text description  to identify the element that describes the tooltip
+   */
+  description: _propTypes.default.string.isRequired,
+  /**
+   * The position of the tooltip with respect to the trigger element
+   */
+  position: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * The base color of the tooltip
+   */
+  color: _propTypes.default.string
+};
+Tooltip.defaultProps = {
+  position: 'bottom',
+  color: 'background-cards'
+};
+var _default = exports.default = Tooltip;

package/dist/cjs/{c/ContentSlides/common/Sidebar → a/Tooltip}/index.js

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

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

@@ -0,0 +1,61 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-block-padding: calc(var(--theme-default-padding) / 2);
+$default-inline-padding: var(--theme-default-padding);
+$default-width: var(--tooltip-width, 20rem);
+
+.#{bem.$base}.tooltip {
+  display: inline-block;
+  position: relative;
+
+  > .tooltip-content {
+    background: var(--x);
+    border: var(--theme-default-border-style) var(--ui-lines);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    opacity: 0;
+    overflow: hidden;
+    padding: $default-block-padding $default-inline-padding;
+    position: absolute;
+    transform: translateX(var(--horizontal, 0)) translateY(var(--vertical, 0));
+    transition: opacity .2s ease, transform .2s ease;
+    visibility: hidden;
+    width: $default-width;
+    z-index: 10;
+
+    &.top {
+      --horizontal: -50%;
+      bottom: calc(100% + $default-block-padding);
+      left: 50%;
+    }
+
+    &.right {
+      --vertical: 50%;
+      bottom: 50%;
+      left: calc(100% + $default-inline-padding);
+    }
+
+    &.bottom {
+      --horizontal: -50%;
+      left: 50%;
+      top: calc(100% + $default-block-padding);
+    }
+
+    &.left {
+      --vertical: 50%;
+      bottom: 50%;
+      right: calc(100% + $default-inline-padding);
+    }
+  }
+
+  > .tooltip-trigger-wrapper {
+    cursor: pointer;
+
+    &:is(:hover, :focus-visible, :active) + .tooltip-content {
+      opacity: 1;
+      transition-delay: 200ms;
+      visibility: visible;
+    }
+  }
+}

package/dist/cjs/a/XMLEditor/XMLEditor.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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _state = require("@codemirror/state");
+var _view = require("@codemirror/view");
+var _commands = require("@codemirror/commands");
+var _language = require("@codemirror/language");
+var _langXml = require("@codemirror/lang-xml");
+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; }
+/* eslint-disable import/no-extraneous-dependencies */
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'code-editor';
+
+/**
+ * codemirror documentation:
+ * https://codemirror.net/
+ */
+
+const XMLEditor = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    readOnly,
+    height,
+    gutterWidth,
+    config,
+    onChange,
+    onBlur,
+    stopAllPropagation,
+    stopPropagationKeys
+  } = _ref;
+  const editorRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    const startState = _state.EditorState.create({
+      doc: config,
+      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
+        onChange(view);
+        // view.state.doc.toString() to receive the current content in the editor.
+      }), _view.EditorView.focusChangeEffect.of((state, focused) => {
+        if (!focused) {
+          onBlur?.(state);
+        }
+      }), _view.EditorView.domEventHandlers({
+        keydown(e) {
+          if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
+            e.stopPropagation();
+          }
+        }
+      })]
+    });
+    const view = new _view.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.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),
+  /**
+     *  Whether or not the content is read only.
+     */
+  readOnly: _propTypes.default.bool,
+  /**
+   * The initial labeling configuration.
+   */
+  config: _propTypes.default.string,
+  /**
+   * The height of the editor.
+   */
+  height: _propTypes.default.string,
+  /**
+   * The callback for when the labeling configuration changes.
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * The width of the gutter.
+   */
+  gutterWidth: _propTypes.default.string,
+  /**
+   * The keys to stop propagation on.
+   */
+  stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * The callback for when the editor loses focus.
+   */
+  onBlur: _propTypes.default.func,
+  /**
+   * Whether to stop all propagation of keys to keep focus on the editor.
+   */
+  stopAllPropagation: _propTypes.default.bool
+};
+XMLEditor.defaultProps = {
+  config: `<View>
+  <!--Edit this config to customize the labeling interface.-->
+</View>
+  `,
+  height: '20em',
+  gutterWidth: '3em'
+};
+var _default = exports.default = XMLEditor;

package/dist/cjs/{c/ContentSlides/common/Slide → a/XMLEditor/common}/index.js

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

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

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _view = require("@codemirror/view");
+var _language = require("@codemirror/language");
+var _highlight = require("@lezer/highlight");
+/* eslint-disable import/no-extraneous-dependencies */
+
+// 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__ */_view.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__ */_language.HighlightStyle.define([{
+  tag: _highlight.tags.keyword,
+  color: violet
+}, {
+  tag: [_highlight.tags.name, _highlight.tags.deleted, _highlight.tags.character, _highlight.tags.propertyName, _highlight.tags.macroName],
+  color: coral
+}, {
+  tag: [/* @__PURE__ */_highlight.tags.function(_highlight.tags.variableName), _highlight.tags.labelName],
+  color: malibu
+}, {
+  tag: [_highlight.tags.color, /* @__PURE__ */_highlight.tags.constant(_highlight.tags.name), /* @__PURE__ */_highlight.tags.standard(_highlight.tags.name)],
+  color: whiskey
+}, {
+  tag: [/* @__PURE__ */_highlight.tags.definition(_highlight.tags.name), _highlight.tags.separator],
+  color: ivory
+}, {
+  tag: [_highlight.tags.typeName, _highlight.tags.className, _highlight.tags.number, _highlight.tags.changed, _highlight.tags.annotation, _highlight.tags.modifier, _highlight.tags.self, _highlight.tags.namespace],
+  color: chalky
+}, {
+  tag: [_highlight.tags.operator, _highlight.tags.operatorKeyword, _highlight.tags.url, _highlight.tags.escape, _highlight.tags.regexp, _highlight.tags.link, /* @__PURE__ */_highlight.tags.special(_highlight.tags.string)],
+  color: cyan
+}, {
+  tag: [_highlight.tags.meta, _highlight.tags.comment],
+  color: stone
+}, {
+  tag: _highlight.tags.strong,
+  fontWeight: 'bold'
+}, {
+  tag: _highlight.tags.emphasis,
+  fontStyle: 'italic'
+}, {
+  tag: _highlight.tags.strikethrough,
+  textDecoration: 'line-through'
+}, {
+  tag: _highlight.tags.link,
+  color: stone,
+  textDecoration: 'underline'
+}, {
+  tag: _highlight.tags.heading,
+  fontWeight: 'bold',
+  color: coral
+}, {
+  tag: [_highlight.tags.atom, _highlight.tags.bool, /* @__PURE__ */_highlight.tags.special(_highlight.tags.variableName)],
+  color: whiskey
+}, {
+  tag: [_highlight.tags.processingInstruction, _highlight.tags.string, _highlight.tags.inserted],
+  color: sage
+}, {
+  tag: _highlight.tags.invalid,
+  color: invalid
+}]);
+/**
+Extension to enable the One Dark theme (both the editor theme and
+the highlight style).
+*/
+const oneDark = [oneDarkTheme, /* @__PURE__ */(0, _language.syntaxHighlighting)(oneDarkHighlightStyle)];
+var _default = exports.default = oneDark;

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

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

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

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

package/dist/cjs/a/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AppContextProvider", {
     return _AppContext.AppContextProvider;
   }
 });
+Object.defineProperty(exports, "BlurOverlay", {
+  enumerable: true,
+  get: function () {
+    return _BlurOverlay.BlurOverlay;
+  }
+});
 Object.defineProperty(exports, "ContentTree", {
   enumerable: true,
   get: function () {
@@ -39,6 +45,12 @@ Object.defineProperty(exports, "Conversation", {
     return _Conversation.Conversation;
   }
 });
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
 Object.defineProperty(exports, "DotInfo", {
   enumerable: true,
   get: function () {
@@ -105,6 +117,12 @@ Object.defineProperty(exports, "Quote", {
     return _Quote.Quote;
   }
 });
+Object.defineProperty(exports, "Removable", {
+  enumerable: true,
+  get: function () {
+    return _Removable.Removable;
+  }
+});
 Object.defineProperty(exports, "SVG", {
   enumerable: true,
   get: function () {
@@ -141,6 +159,24 @@ Object.defineProperty(exports, "Tip", {
     return _Tip.Tip;
   }
 });
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.ToggleSwitch;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.Tooltip;
+  }
+});
+Object.defineProperty(exports, "XMLEditor", {
+  enumerable: true,
+  get: function () {
+    return _XMLEditor.XMLEditor;
+  }
+});
 Object.defineProperty(exports, "useApp", {
   enumerable: true,
   get: function () {
@@ -154,6 +190,7 @@ Object.defineProperty(exports, "useTheme", {
   }
 });
 var _AppContext = require("./AppContext");
+var _BlurOverlay = require("./BlurOverlay");
 var _ContentTree = require("./ContentTree");
 var _Conversation = require("./Conversation");
 var _DotInfo = require("./DotInfo");
@@ -174,4 +211,9 @@ var _MetaCard = require("./MetaCard");
 var _AnimatedBlobs = require("./AnimatedBlobs");
 var _Tip = require("./Tip");
 var _AnimatedGradient = require("./AnimatedGradient");
-var _TextSteps = require("./TextSteps");
+var _TextSteps = require("./TextSteps");
+var _Removable = require("./Removable");
+var _ToggleSwitch = require("./ToggleSwitch");
+var _XMLEditor = require("./XMLEditor");
+var _DatePicker = require("./DatePicker");
+var _Tooltip = require("./Tooltip");