@pareto-engineering/design-system 4.0.0-alpha.41 → 4.0.0-alpha.43

package/src/ui/b/Button/Button.jsx

@@ -20,6 +20,7 @@ const Button = ({
   children,
   isLoading,
   color,
+  textColor,
   isCompact,
   isGhost,
   isSimple,
@@ -43,6 +44,7 @@ const Button = ({
         componentClassName,
         userClassName,
         `x-${color}`,
+        textColor && `y-${textColor}`,
         isGhost && styleNames.modifierGhost,
         isCompact && styleNames.modifierCompact,
         isSimple && styleNames.modifierSimple,

package/src/ui/b/Button/styles.scss

@@ -92,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,
@@ -103,12 +103,12 @@ $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})));
       }
     }
 

package/src/ui/f/FormInput/FormInput.jsx

@@ -16,6 +16,7 @@ import {
   Checkbox,
   QueryChoices,
   LinkInput,
+  EditorInput,
 } from '../fields'
 
 // Local Definitions
@@ -128,6 +129,16 @@ const FormInput = ({
     )
   }
 
+  if (type === 'editor') {
+    return (
+      <EditorInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (

package/src/ui/f/common/Description/Description.jsx

@@ -31,9 +31,10 @@ const Description = ({
     import('./styles.scss')
   }, [])
 
-  const [field, meta] = useField(name)
+  const [, meta] = useField(name)
+  const hasError = meta.touched && meta.error
 
-  if (description || ((meta.touched || field.value) && meta.error)) {
+  if (hasError || description) {
     return (
       <div
         id={id}
@@ -41,13 +42,13 @@ const Description = ({
           baseClassName,
           componentClassName,
           userClassName,
-          meta.error ? 'x-error' : `x-${color}`,
+          hasError ? 'x-error' : `x-${color}`,
         ]
           .filter((e) => e)
           .join(' ')}
         style={style}
       >
-        { meta.error || description}
+        { hasError ? meta.error : description}
       </div>
     )
   }

package/src/ui/f/fields/ChoicesInput/styles.scss

@@ -36,7 +36,7 @@ $disabled-background: var(--background-inputs-30);
 
         input {
           opacity: 0;
-          position: absolute;
+          position: fixed;
           visibility: none;
           z-index: -1;
         }

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

@@ -57,7 +57,42 @@ const EditorInput = ({
 
   const setInitialValue = () => {
     const value = formik.values[name]
-    return value || undefined
+    try {
+      JSON.parse(value)
+      return value
+    } catch {
+      const defaultValue = {
+        root:{
+          children:[
+            {
+              children:[
+                {
+                  detail :0,
+                  format :0,
+                  mode   :'normal',
+                  style  :'',
+                  text   :'',
+                  type   :'text',
+                  version:1,
+                },
+              ],
+              direction:'ltr',
+              format   :'',
+              indent   :0,
+              type     :'paragraph',
+              version  :1,
+            },
+          ],
+          direction:'ltr',
+          format   :'',
+          indent   :0,
+          type     :'root',
+          version  :1,
+        },
+      }
+      defaultValue.root.children[0].children[0].text = value
+      return JSON.stringify(defaultValue)
+    }
   }
 
   const onChange = (state) => {

package/src/ui/f/fields/EditorInput/common/Toolbar.jsx

@@ -1,7 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
 
-import { useEffect, useState, useCallback } from 'react'
+import {
+  useEffect,
+  useState,
+  useCallback,
+  useRef,
+} from 'react'
 
 import {
   $getSelection,
@@ -10,6 +15,8 @@ import {
   FORMAT_ELEMENT_COMMAND,
   UNDO_COMMAND,
   REDO_COMMAND,
+  COMMAND_PRIORITY_NORMAL,
+  createCommand,
 } from 'lexical'
 import {
   INSERT_ORDERED_LIST_COMMAND,
@@ -27,6 +34,9 @@ import {
 } from '@lexical/link'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils'
+
+import { Popover } from 'ui'
+
 import styleNames from '@pareto-engineering/bem/exports'
 
 const baseClassName = styleNames.base
@@ -47,6 +57,19 @@ const getSelectedNode = (selection) => {
   return $isAtNodeEnd(anchor) ? focusNode : anchorNode
 }
 
+const defaultColor = 'var(--paragraph)'
+
+const colorOptions = [
+  'red',
+  'blue',
+  'green',
+  'yellow',
+  'orange',
+  'purple',
+  'pink',
+  'brown',
+]
+
 const Toolbar = () => {
   const [editor] = useLexicalComposerContext()
   const [isBold, setIsBold] = useState(false)
@@ -55,6 +78,9 @@ const Toolbar = () => {
   const [blockType, setBlockType] = useState('paragraph')
   const [isLink, setIsLink] = useState(false)
   const [isUnderline, setIsUnderline] = useState(false)
+  const [color, setColor] = useState(defaultColor)
+
+  const colorMenuRef = useRef(false)
 
   const formatBulletList = () => {
     if (blockType !== 'ul') {
@@ -99,6 +125,18 @@ const Toolbar = () => {
         setBlockType(element)
       }
 
+      // Check nodes for color
+      const nodes = selection.getNodes().filter((node) => node.getType() === 'text')
+      nodes.forEach((node) => {
+        const style = node.getStyle()
+        const colorProperty = style.match(/color: ([^;]+)/)
+        if (colorProperty) {
+          setColor(colorProperty[1])
+          return
+        }
+        setColor(false)
+      })
+
       // Check selection text styles
       setIsBold(selection.hasFormat('bold'))
       setIsItalic(selection.hasFormat('italic'))
@@ -117,6 +155,24 @@ const Toolbar = () => {
     }
   }, [editor])
 
+  const UPDATE_COLOR_COMMAND = createCommand()
+
+  editor.registerCommand(UPDATE_COLOR_COMMAND, (payload) => {
+    const selection = $getSelection()
+    const nodes = selection?.extract().filter((node) => node.getType() === 'text')
+    nodes?.forEach((node) => {
+      const style = node.getStyle()
+      const colorProperty = style?.match(/color: ([^;]+)/)
+      if (colorProperty && color !== payload) {
+        node.setStyle(style.replace(colorProperty[0], `color: ${payload}`))
+      } else if (colorProperty) {
+        node.setStyle(`color: ${defaultColor}`)
+      } else {
+        node.setStyle(`color: ${payload}`)
+      }
+    })
+  }, COMMAND_PRIORITY_NORMAL)
+
   useEffect(() => mergeRegister(
     editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
@@ -125,6 +181,11 @@ const Toolbar = () => {
     }),
   ), [updateToolbar, editor])
 
+  const dispatchUpdateColor = useCallback((e, payload) => {
+    e.stopPropagation()
+    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload)
+  }, [editor])
+
   return (
     <div className={`${baseClassName} ${componentClassName}`}>
       <div className="group">
@@ -164,6 +225,47 @@ const Toolbar = () => {
             ?
           </span>
         </button>
+        <button
+          type="button"
+          className={color && color !== defaultColor ? 'active color-menu-button' : 'color-menu-button'}
+          onClick={() => editor.dispatchCommand(UPDATE_COLOR_COMMAND,
+            color !== defaultColor ? defaultColor : color)}
+          ref={colorMenuRef}
+          style={{ position: 'relative' }}
+        >
+          <span
+            className="icon"
+            style={{
+              color,
+            }}
+          >
+            Q
+          </span>
+          <Popover
+            parentRef={colorMenuRef}
+          >
+            <div className="color-menu">
+              {
+                colorOptions.map((option) => (
+                  <span
+                    role="button"
+                    className="icon color-option"
+                    style={{
+                      color:option,
+                    }}
+                    onClick={(e) => dispatchUpdateColor(e, option)}
+                    onKeyDown={(e) => dispatchUpdateColor(e, option)}
+                    tabIndex={0}
+                    key={option}
+                  >
+                    o
+                  </span>
+                ))
+              }
+            </div>
+          </Popover>
+        </button>
+
         <button
           type="button"
           className={isLink ? 'active' : undefined}

package/src/ui/f/fields/EditorInput/styles.scss

@@ -13,7 +13,9 @@ $default-border: var(--theme-default-input-border);
 $focus-border: var(--theme-focus-input-border);
 $active-background: var(--hard-background-inputs);
 $default-background: var(--background-inputs);
+$default-icon-color: var(--on-background-inputs);
 $disabled-background: var(--background-inputs-30);
+$default-color-menu-padding: .5em .25em;
 
 .#{bem.$base}.editor-input {
   &.#{bem.$base}.input-wrapper {
@@ -29,6 +31,7 @@ $disabled-background: var(--background-inputs-30);
         > button {
           background: $default-background;
           border: $default-border;
+          color: $default-icon-color;
           padding: $default-padding;
 
           &.active {
@@ -60,6 +63,31 @@ $disabled-background: var(--background-inputs-30);
       }
     }
 
+    .color-menu-button {
+      &:hover {
+        > .#{bem.$base}.popover {
+          display: block;
+        }
+      }
+
+      > .#{bem.$base}.popover {
+        padding: $default-color-menu-padding;
+
+        .color-menu {
+          display: flex;
+          flex-wrap: wrap;
+          gap: calc($default-gap / 2);
+          justify-content: center;
+          max-width: 10em;
+          min-width: 5em;
+        }
+
+        .color-option:hover {
+          opacity: .5;
+        }
+      }
+    }
+
     > .content-editable {
       background: $default-background;
       border: $default-border;