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

package/src/stories/a/LexicalPreview.stories.jsx

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { LexicalPreview } from 'ui'
+
+export default {
+  title        :'a/LexicalPreview',
+  component    :LexicalPreview,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[],
+  argTypes  :{
+    color:{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line no-useless-escape
+const nodes = '{\"root\":{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is bold.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":2,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is italic.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":8,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is underlined.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":4,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is struck.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":1,\"type\":\"listitem\",\"version\":1,\"value\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}'
+
+const Template = (args) => (
+  <LexicalPreview {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  nodes,
+}

package/src/stories/a/ProgressBar.stories.jsx

@@ -48,7 +48,7 @@ export const Base = () => {
 export const Color = Template.bind({})
 Color.args = {
   progress:70,
-  color   :'main1',
+  color   :'main',
 }
 
 export const Height = Template.bind({})

package/src/stories/a/XMLEditor.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/b/ExpandableLexicalPreview.stories.jsx

@@ -0,0 +1,29 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { ExpandableLexicalPreview } from 'ui'
+
+export default {
+  title        :'b/ExpandableLexicalPreview',
+  component    :ExpandableLexicalPreview,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[],
+  argTypes  :{
+    color:{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line no-useless-escape
+const nodes = '{\"root\":{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is bold.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":2,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is italic.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":8,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is underlined.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":4,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is struck.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":1,\"type\":\"listitem\",\"version\":1,\"value\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}'
+
+const Template = (args) => (
+  <ExpandableLexicalPreview {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  nodes,
+  title:'Task Instructions',
+}

package/src/stories/colors.js

@@ -12,6 +12,10 @@ const MODALS = [
   'purple',
   'yellow',
   'seagreen',
+  'deepblue',
+  'light-blue',
+  'light-purple',
+  'light-seagreen',
 ]
 
 const UI = [

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',
       },
     ],
   },

package/src/ui/a/LexicalPreview/LexicalPreview.jsx

@@ -0,0 +1,109 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { AutoLinkNode, LinkNode } from '@lexical/link'
+import { ListItemNode, ListNode } from '@lexical/list'
+
+import PropTypes from 'prop-types'
+import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+const componentClassName = 'lexical-preview'
+
+/**
+ * This is the component description.
+ */
+const LexicalPreview = ({
+  id,
+  className:userClassName,
+  style,
+  nodes,
+  color,
+  // ...otherProps
+}) => {
+  const initialConfig = {
+    nameSpace  :id,
+    editable   :false,
+    editorState:nodes,
+    theme      :{
+      text:{
+        italic       :'italic',
+        strikethrough:'strikethrough',
+        underline    :'underlined',
+      },
+    },
+    nodes:[
+      AutoLinkNode,
+      LinkNode,
+      ListNode,
+      ListItemNode,
+    ],
+  }
+
+  return (
+    <LexicalComposer
+      initialConfig={initialConfig}
+    >
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          `y-${color}`,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+      >
+        <RichTextPlugin
+          contentEditable={(
+            <ContentEditable
+              id={id}
+              className="content-editable"
+            />
+          )}
+        />
+      </div>
+    </LexicalComposer>
+  )
+}
+
+LexicalPreview.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),
+
+  /**
+   * Color of the text
+   */
+  color:PropTypes.string,
+
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes:PropTypes.string,
+}
+
+LexicalPreview.defaultProps = {
+  color:'paragraph',
+}
+
+export default LexicalPreview

package/src/ui/a/LexicalPreview/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as LexicalPreview } from './LexicalPreview'

package/src/ui/a/LexicalPreview/styles.scss

@@ -0,0 +1,46 @@
+/* @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}.lexical-preview {
+  > .content-editable {
+    color: var(--y);
+    overflow: auto;
+
+    li:has(ol, ul) {
+      list-style-type: none;
+    }
+
+    p,
+    span,
+    strong,
+    em,
+    li {
+      &.underlined {
+        text-decoration: underline;
+
+        &.strikethrough {
+          text-decoration: underline line-through;
+        }
+      }
+
+      &.strikethrough {
+        text-decoration: line-through;
+      }
+
+      &.italic {
+        font-style: italic;
+      }
+    }
+
+    :first-child {
+      margin-top: 0;
+    }
+
+    &::placeholder {
+      color: var(--metadata);
+    }
+  }
+}

package/src/ui/a/People/common/Person/Person.jsx

@@ -23,28 +23,40 @@ const Person = ({
   role,
   color,
   // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
+}) => {
+  const handleImageSrcError = (e) => {
+    e.target.onerror = null
+    e.target.src = '/default-avatar.svg'
+  }
 
-      baseClassName,
+  return (
+    <div
+      id={id}
+      className={[
 
-      componentClassName,
-      userClassName,
-      `y-${color}`,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    <img className="image v50 mr-v" src={image} alt={`${name}, ${role}`} />
-    <div className="details">
-      {name && <p className="name">{name}</p>}
-      { role && <p className="role">{role}</p>}
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <img
+        className="image v50 mr-v"
+        src={image || '/default-avatar.svg'}
+        alt={`${name}, ${role}`}
+        onError={handleImageSrcError}
+      />
+      <div className="details">
+        {name && <p className="name">{name}</p>}
+        { role && <p className="role">{role}</p>}
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Person.propTypes = {
   /**

package/src/ui/a/ProgressBar/ProgressBar.jsx

@@ -24,6 +24,7 @@ const ProgressBar = ({
   color,
   progress,
   height,
+  rounded,
   // ...otherProps
 }) => (
   <div
@@ -36,6 +37,7 @@ const ProgressBar = ({
       attached && styleNames.modifierAttached,
       color && `x-${color}`,
       userClassName,
+      rounded && 'rounded',
     ]
       .filter((e) => e)
       .join(' ')}

package/src/ui/a/ProgressBar/styles.scss

@@ -5,9 +5,11 @@
 $default-height:var(--height, 1em);
 $default-border:none;//2px solid var(--grid);
 $default-transition-duration:.5s;
-$default-color:var(--x, var(--main1));
+$default-color:var(--x, var(--main));
+$default-border-radius:var(--theme-border-radius, 1.875rem);
 
 .#{bem.$base}.progress-bar {
+  background-color: var(--progress-bar-background-color);
   border: $default-border;
   height: $default-height;
   position: relative;
@@ -28,6 +30,14 @@ $default-color:var(--x, var(--main1));
     z-index: 1;
   }
 
+  &.rounded {
+    border-radius: $default-border-radius;
+
+    &::after {
+      border-radius: $default-border-radius;
+    }
+  }
+
   &.#{bem.$modifier-attached} {
     border: unset;
     border-bottom: $default-border;

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

@@ -0,0 +1,182 @@
+/* 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,
+} 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,
+  stopPropagationKeys,
+}) => {
+  const editorRef = useRef()
+
+  useEffect(() => {
+    const startState = EditorState.create({
+      doc       :config,
+      extensions:[
+        keymap.of(defaultKeymap),
+        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.domEventHandlers({
+          keydown(e) {
+            if (stopPropagationKeys?.includes(e.key)) {
+              e.stopPropagation()
+            }
+          },
+        }),
+      ],
+    })
+
+    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,
+
+  /**
+   * The keys to stop propagation on.
+   */
+  stopPropagationKeys:PropTypes.arrayOf(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'