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

package/dist/es/a/Tooltip/Tooltip.js

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'tooltip';
+
+/**
+ * This is the component description.
+ */
+const Tooltip = ({
+  id,
+  className: userClassName,
+  style,
+  position,
+  color,
+  description,
+  content,
+  children
+  // ...otherProps
+}) => /*#__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.string.isRequired,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   *  The children JSX where the tooltip will be applied
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   *  The content JSX that renders the tooltip content
+   */
+  content: PropTypes.node.isRequired,
+  /**
+   *  The text description  to identify the element that describes the tooltip
+   */
+  description: PropTypes.string.isRequired,
+  /**
+   * The position of the tooltip with respect to the trigger element
+   */
+  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * The base color of the tooltip
+   */
+  color: PropTypes.string
+};
+Tooltip.defaultProps = {
+  position: 'bottom',
+  color: 'background-cards'
+};
+export default Tooltip;

package/{src/ui/c/ContentSlides/common/Sidebar → dist/es/a/Tooltip}/index.js

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

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

@@ -0,0 +1,126 @@
+/* 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, indentWithTab } 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,
+  onBlur,
+  stopAllPropagation,
+  stopPropagationKeys
+}) => {
+  const editorRef = useRef();
+  useEffect(() => {
+    const startState = EditorState.create({
+      doc: config,
+      extensions: [keymap.of([defaultKeymap, indentWithTab]), 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.focusChangeEffect.of((state, focused) => {
+        if (!focused) {
+          onBlur?.(state);
+        }
+      }), EditorView.domEventHandlers({
+        keydown(e) {
+          if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
+            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),
+  /**
+   * The callback for when the editor loses focus.
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Whether to stop all propagation of keys to keep focus on the editor.
+   */
+  stopAllPropagation: PropTypes.bool
+};
+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,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/es/a/index.js

@@ -1,4 +1,5 @@
 export { AppContext, AppContextProvider, useApp, useTheme } from "./AppContext";
+export { BlurOverlay } from "./BlurOverlay";
 export { ContentTree } from "./ContentTree";
 export { Conversation } from "./Conversation";
 export { DotInfo } from "./DotInfo";
@@ -19,4 +20,9 @@ export { MetaCard } from "./MetaCard";
 export { AnimatedBlobs } from "./AnimatedBlobs";
 export { Tip } from "./Tip";
 export { AnimatedGradient } from "./AnimatedGradient";
-export { TextSteps } from "./TextSteps";
+export { TextSteps } from "./TextSteps";
+export { Removable } from "./Removable";
+export { ToggleSwitch } from "./ToggleSwitch";
+export { XMLEditor } from "./XMLEditor";
+export { DatePicker } from "./DatePicker";
+export { Tooltip } from "./Tooltip";

package/dist/es/b/Button/Button.js

@@ -1,15 +1,13 @@
 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 0.2.4 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports';
 import { LoadingCircle } from "../..";
+import { Group } from "./common";
 import "./styles.scss";
-// Component-level imports
-// import('./styles.scss')
 
 // Helper Definition
 const baseClassName = styleNames.base;
@@ -21,26 +19,29 @@ const Button = ({
   children,
   isLoading,
   color,
+  textColor,
   isCompact,
   isGhost,
   isSimple,
+  isGradient,
+  isSpaced,
   arrowDirection,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
+  const buttonText = isSimple ? /*#__PURE__*/React.createElement("span", {
+    className: styleNames.modifierUnderlined
+  }, children) : children;
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, textColor && `y-${textColor}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
     style: style,
     type: "button"
   }, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
     style: {
-      '--x': 'var(--on-x)'
+      '--x': 'var(--stroke-color, var(--on-x))'
     },
     heightWidth: "1.15em"
-  }) : children);
+  }) : buttonText);
 };
 Button.propTypes = {
   /**
@@ -71,6 +72,14 @@ Button.propTypes = {
    * Whether the button is simple (no borders, only text)
    */
   isSimple: PropTypes.bool,
+  /**
+   * Should this button have a gradient
+   */
+  isGradient: PropTypes.bool,
+  /**
+   * Should this button be spaced
+   */
+  isSpaced: PropTypes.bool,
   /**
    * The button color
    */
@@ -85,6 +94,7 @@ Button.propTypes = {
   arrowDirection: PropTypes.string
 };
 Button.defaultProps = {
-  color: 'main1'
+  color: 'main'
 };
+Button.Group = Group;
 export default Button;

package/dist/es/b/Button/common/Group/Group.js

@@ -0,0 +1,44 @@
+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 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'button-group';
+const Group = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  ...otherProps
+}) => /*#__PURE__*/React.createElement("div", _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, otherProps), children);
+Group.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),
+  /**
+   * The children JSX
+   */
+  children: PropTypes.node
+};
+Group.defaultProps = {
+  // type:'snap-scroller',
+};
+export default Group;

package/dist/es/b/Button/common/Group/index.js

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

package/dist/es/b/Button/common/Group/styles.scss

@@ -0,0 +1,11 @@
+/* @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}.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}

package/dist/es/b/Button/common/index.js

@@ -0,0 +1 @@
+export { Group } from "./Group";