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

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

@@ -32,7 +32,6 @@ const ProgressBar = ({
   "data-length": "50%"
   // {...otherProps}
 });
-
 ProgressBar.propTypes = {
   /**
    * The HTML id for this element

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

@@ -0,0 +1,106 @@
+/* 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
+}) => {
+  const editorRef = useRef();
+  useEffect(() => {
+    const startState = EditorState.create({
+      doc: config,
+      extensions: [keymap.of([defaultKeymap, indentWithTab]),
+      // TOFIX: Indent with tab prevents indentOnInout from working.
+      // 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.
+      })]
+    });
+    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
+};
+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,5 @@ 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";

package/dist/es/b/Logo/Logo.js

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

package/dist/es/b/Title/Title.js

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

package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -37,14 +37,12 @@ const SocialMediaShareButton = ({
       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/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -22,6 +22,7 @@ const QueryCombobox = ({
   name,
   label,
   labelColor,
+  getTagColor,
   color,
   optional,
   description,
@@ -98,6 +99,7 @@ const QueryCombobox = ({
     name,
     label,
     labelColor,
+    getTagColor,
     optional,
     description,
     setValue,
@@ -201,7 +203,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.bool
+  promptCreateNewOption: PropTypes.bool,
+  /**
+   * The placeholder text for the input
+   * */
+  placeholder: PropTypes.string,
+  /**
+   * The function to get the color of the tag
+   * */
+  getTagColor: PropTypes.func
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

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

@@ -35,6 +35,7 @@ const MultipleCombobox = ({
   labelColor,
   name,
   optional,
+  getTagColor,
   options: items,
   getOptions,
   setValue,
@@ -96,7 +97,6 @@ const MultipleCombobox = ({
             ...changes,
             isOpen: true // keep the menu open after selection.
           };
-
         default:
           break;
       }
@@ -178,7 +178,7 @@ const MultipleCombobox = ({
       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", {
@@ -287,7 +287,36 @@ MultipleCombobox.propTypes = {
   /**
    * The placeholder text for the input
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * The function to set the options of the custom select input
+   */
+  setOptions: PropTypes.func,
+  /**
+   * Whether to prompt the user to create a new option if the search input
+   * does not match any of the options
+   */
+  promptCreateNewOption: PropTypes.bool,
+  /**
+   * The function to get the color of the tag
+   */
+  getTagColor: PropTypes.func,
+  /**
+   * The color of the label
+   */
+  labelColor: PropTypes.string,
+  /**
+   * The function to validate the input
+   */
+  validate: PropTypes.func,
+  /**
+   * Whether to allow multiple items selection
+   */
+  multiple: PropTypes.bool,
+  /**
+   * The variable to be used to search the data
+   */
+  searchVariable: PropTypes.string
 };
 MultipleCombobox.defaultProps = {
   // someProp: false

package/dist/es/r/common/PrivateRoute/PrivateRoute.js

@@ -46,7 +46,6 @@ const PrivateRoute = ({
     })
   }));
 };
-
 PrivateRoute.propTypes = {
   /**
    * A function that takes the user and returns a boolean.

package/dist/es/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.69",
+  "version": "4.0.0-alpha.70",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -50,11 +50,13 @@
     "style-loader": "^3.3.2"
   },
   "dependencies": {
+    "@codemirror/lang-xml": "^6.0.2",
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.69",
+    "@pareto-engineering/assets": "^4.0.0-alpha.70",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.68",
+    "@pareto-engineering/styles": "^4.0.0-alpha.70",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
+    "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
@@ -71,5 +73,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2aca4c35daf21d2fe589d9406ca43952c6519bc0"
+  "gitHead": "dd5504b9e521370b6151a796a429c268ab123be1"
 }

package/src/stories/StyleGuide/ai-icons.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta,  } from '@storybook/addon-docs/blocks';
+
+import {
+  charList
+} from './helpers';
+
+<Meta title="StyleGuide/Icons/ai" />
+
+# AI Icons
+
+The icons are defined in [@pareto-engineering/assets/fonts/ai-icons.woff](https://github.com/HelloPareto/front/tree/development/packages/assets/fonts),
+imported and configured in [@pareto-engineering/styles/src/mixins/_font.scss](https://github.com/HelloPareto/front/blob/development/packages/styles/src/mixins/_font.scss).
+
+To add more fonts, connect to [glyphter](https://glyphter.com).
+
+<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>
+{ charList.map(letter =>
+<div>
+<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>
+{ letter }
+</div>
+<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'ai-icons', 'font-size':'2em' }}>
+{ letter }
+</div>
+</div>
+) }
+</div>

package/src/stories/StyleGuide/icons.stories.mdx

@@ -1,29 +1,29 @@
 import { Meta, IconGallery, IconItems } from '@storybook/addon-docs/blocks';
 
-import { 
+import {
   charList
 } from './helpers';
 
-<Meta title="StyleGuide/Icons" />
-
-
-# Icons                                                                                                                             
-                                                                                                                                    
-The icons are defined in [@pareto-engineering/assets/fonts/icons.woff](https://github.com/HelloPareto/assets/tree/master/fonts),              
-imported in [@pareto-engineering/styles/src/stylebook.scss](https://github.com/HelloPareto/styles/blob/master/src/stylebook.scss).            
-                                                                                                                                    
-To add more fonts, connect to [glyphter](https://glyphter.com).                                                                     
-                                                                                                                                    
-<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>                                 
-{ charList.map(letter =>                                                                                                          
-<div>                                                                                                                               
-<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>               
-{ letter }                                                                                                                          
-</div>                                                                                                                              
-<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'icons', 'font-size':'2em' }}>       
-{ letter }                                                                                                                          
-</div>                                                                                                                              
-</div>                                                                                                                              
-) }                                                                                                                                 
+<Meta title="StyleGuide/Icons/all" />
+
+
+# Icons
+
+The icons are defined in [@pareto-engineering/assets/fonts/icons.woff](https://github.com/HelloPareto/assets/tree/master/fonts),
+imported in [@pareto-engineering/styles/src/stylebook.scss](https://github.com/HelloPareto/styles/blob/master/src/stylebook.scss).
+
+To add more fonts, connect to [glyphter](https://glyphter.com).
+
+<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>
+{ charList.map(letter =>
+<div>
+<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>
+{ letter }
+</div>
+<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'icons', 'font-size':'2em' }}>
+{ letter }
+</div>
+</div>
+) }
 </div>
 

package/src/stories/a/CodeEditor.stories.jsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { XMLEditor } from 'ui'
+
+export default {
+  title     :'a/XMLEditor',
+  component :XMLEditor,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{},
+  controls:{
+  },
+}
+
+const Template = (args) => (
+  <XMLEditor {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {}

package/src/stories/f/QueryCombobox.stories.jsx

@@ -230,10 +230,32 @@ MultipleSelectWithDefaultFormikState.args = {
       {
         value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
         label:'Apple',
+        color:'red',
       },
       {
         value:'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
         label:'Pear',
+        color:'green',
+      },
+    ],
+  },
+}
+
+export const MultipleSelectWithGetTagColorFunction = ResolvedTemplate.bind({})
+MultipleSelectWithGetTagColorFunction.args = {
+  multiple          :true,
+  getTagColor       :(tag) => tag.color,
+  defaultFormikState:{
+    teams:[
+      {
+        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+        label:'Apple',
+        color:'red',
+      },
+      {
+        value:'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+        label:'Pear',
+        color:'green',
       },
     ],
   },