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

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";

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

@@ -20,7 +20,8 @@ $default-animation-time: .31s;
   font-weight: 400;
   justify-content: space-between;
   padding: $default-padding;
-  transition: all .25s;//var(--theme-default-paragraph);
+  transition: all .25s;
+  white-space: nowrap;//var(--theme-default-paragraph);
 
   &.arrow-right {
     &::after {
@@ -30,7 +31,7 @@ $default-animation-time: .31s;
       vertical-align: middle;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       &::after {
         --final-position: 50%;
         animation: animateArrow $default-animation-time forwards;
@@ -46,7 +47,7 @@ $default-animation-time: .31s;
       vertical-align: middle;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       &::before {
         --final-position: -50%;
         animation: animateArrow $default-animation-time forwards;
@@ -57,7 +58,10 @@ $default-animation-time: .31s;
   &:not(:disabled) {
     cursor: pointer;
 
-    &:hover {
+    &:hover
+    :not(.#{bem.$modifier-gradient})
+    :not(.#{bem.$modifier-ghost})
+    :not(.#{bem.$modifier-simple}) {
       background: var(--soft-x, var(--soft-#{$default-color}));
     }
 
@@ -66,6 +70,21 @@ $default-animation-time: .31s;
     }
   }
 
+  &.#{bem.$modifier-gradient} {
+    background-image: linear-gradient(
+      to right,
+      var(--hard-x) 30%,
+      var(--x) 50%,
+      var(--hard-x) 100%
+    );
+    background-position: left;
+    background-size: 200% auto;
+
+    &:not(:disabled):hover {
+      background-position: right center;
+    }
+  }
+
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -73,7 +92,7 @@ $default-animation-time: .31s;
   &.#{bem.$modifier-ghost} {
     background: transparent;
     border: 1px solid var(--x, var(--#{$default-color}));
-    color: var(--x, var(--#{$default-color}));
+    color: var(--y, var(--x, var(--#{$default-color})));
 
     &:hover,
     &:focus,
@@ -84,27 +103,36 @@ $default-animation-time: .31s;
     &:not(:disabled) {
       &:hover {
         border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
-        color: var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-y, var(--soft-x, var(--soft-#{$default-color})));
       }
 
       &:focus {
         border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
-        color: var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-y, var(--hard-x, var(--hard-#{$default-color})));
       }
     }
 
     &:disabled {
-      border: 1px solid var(--x, var(--#{$default-color}));
-      color: var(--x, var(--#{$default-color}));
+      border: 1px solid var(--hard-disabled, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
+  &.#{bem.$modifier-spaced} {
+    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-2);
+  }
+
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));
     padding: 0;
 
+    > .#{bem.$modifier-underlined} {
+      text-decoration: underline;
+    }
+
     &:disabled,
     &:hover,
     &:focus {
@@ -122,12 +150,12 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      color: var(--x, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
   &:disabled {
-    background: var(--x);
+    background: var(--hard-disabled);
     filter: brightness(125%);
   }
 }

package/dist/es/b/Card/Card.js

@@ -1,10 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { ProgressBar } from "../..";
 import { Group, Section } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -21,21 +21,16 @@ const Card = ({
   children,
   progress,
   progressBarColor
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, progress && /*#__PURE__*/React.createElement(ProgressBar, {
-    attached: true,
-    color: progressBarColor,
-    progress: progress,
-    height: ".5em"
-  }), children);
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, progress && /*#__PURE__*/React.createElement(ProgressBar, {
+  attached: true,
+  color: progressBarColor,
+  progress: progress,
+  height: ".5em"
+}), children);
 Card.propTypes = {
   /**
    * The HTML id for this element

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

@@ -1,10 +1,10 @@
 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 { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { SnapScroller } from "../../../..";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -19,11 +19,8 @@ const Group = ({
   desktopType,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const Wrapper = type === 'snap-scroller' ? SnapScroller : 'div';
-  const wrapperProps = type === 'snap-scroller' ? {
+  const wrapperProps = type === 'snap-scroller' && desktopType !== 'snap-scroller' ? {
     noScrollOnDesktop: true
   } : {};
   return /*#__PURE__*/React.createElement(Wrapper, _extends({