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

package/src/ui/a/XMLEditor/XMLEditor.jsx

@@ -0,0 +1,171 @@
+/* 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 (
+    <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/src/ui/a/XMLEditor/common/index.js

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

package/src/ui/a/XMLEditor/common/theme.jsx

@@ -0,0 +1,184 @@
+/* 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/src/ui/a/XMLEditor/index.js

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

package/src/ui/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/src/ui/a/index.js

@@ -25,3 +25,4 @@ export { AnimatedGradient } from './AnimatedGradient'
 export { TextSteps } from './TextSteps'
 export { Removable } from './Removable'
 export { ToggleSwitch } from './ToggleSwitch'
+export { XMLEditor } from './XMLEditor'

package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx

@@ -27,6 +27,7 @@ const QueryCombobox = ({
   name,
   label,
   labelColor,
+  getTagColor,
   color,
   optional,
   description,
@@ -104,6 +105,7 @@ const QueryCombobox = ({
     name,
     label,
     labelColor,
+    getTagColor,
     optional,
     description,
     setValue,
@@ -233,6 +235,16 @@ QueryCombobox.propTypes = {
    * does not match any of the options
    */
   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 = {

package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx

@@ -47,6 +47,7 @@ const MultipleCombobox = ({
   labelColor,
   name,
   optional,
+  getTagColor,
   options:items,
   getOptions,
   setValue,
@@ -206,7 +207,7 @@ const MultipleCombobox = ({
                   removeSelectedItem(selectedItem)
                 }}
                 isCompact
-                color={color}
+                color={getTagColor ? getTagColor(selectedItem) : color}
               >
                 <span>{selectedItem.label}</span>
                 <span className="icon close">Y</span>
@@ -356,6 +357,42 @@ MultipleCombobox.propTypes = {
    * The placeholder text for the input
    */
   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 = {