@pareto-engineering/design-system 4.0.0-alpha.42 → 4.0.0-alpha.44

package/dist/es/f/fields/EditorInput/common/Toolbar.js

@@ -1,12 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { useEffect, useState, useCallback } from 'react';
-import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, COMMAND_PRIORITY_NORMAL, createCommand } from 'lexical';
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from '@lexical/list';
 import { $isAtNodeEnd } from '@lexical/selection';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils';
+import { Popover } from "../../../..";
 import styleNames from '@pareto-engineering/bem/exports';
 const baseClassName = styleNames.base;
 const componentClassName = 'toolbar';
@@ -26,6 +27,8 @@ 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);
@@ -34,6 +37,8 @@ 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') {
       editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
@@ -72,6 +77,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'));
@@ -89,6 +106,22 @@ 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
   }) => {
@@ -96,6 +129,10 @@ const Toolbar = () => {
       updateToolbar();
     });
   })), [updateToolbar, editor]);
+  const dispatchUpdateColor = useCallback((e, payload) => {
+    e.stopPropagation();
+    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload);
+  }, [editor]);
   return /*#__PURE__*/React.createElement("div", {
     className: `${baseClassName} ${componentClassName}`
   }, /*#__PURE__*/React.createElement("div", {
@@ -125,6 +162,33 @@ const Toolbar = () => {
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon"
   }, "?")), /*#__PURE__*/React.createElement("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'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon",
+    style: {
+      color
+    }
+  }, "Q"), /*#__PURE__*/React.createElement(Popover, {
+    parentRef: colorMenuRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-menu"
+  }, colorOptions.map(option => /*#__PURE__*/React.createElement("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"))))), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: isLink ? 'active' : undefined,
     onClick: () => formatLink()

package/dist/es/f/fields/EditorInput/styles.scss

@@ -15,6 +15,7 @@ $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 {
@@ -62,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;

package/dist/es/f/fields/TextInput/TextInput.js

@@ -34,8 +34,8 @@ const TextInput = ({
   desktopLabelSpan,
   inputSpan,
   desktopInputSpan,
-  symbol
-  // ...otherProps
+  symbol,
+  ...otherProps
 }) => {
   useInsertionEffect(() => {
     import("./styles.scss");
@@ -70,7 +70,7 @@ const TextInput = ({
     disabled: disabled,
     placeholder: placeholder,
     autoComplete: autoComplete
-  }, field)), /*#__PURE__*/React.createElement(FormDescription, {
+  }, field, otherProps)), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.42",
+  "version": "4.0.0-alpha.44",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.40",
+    "@pareto-engineering/assets": "^4.0.0-alpha.43",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.39",
     "@pareto-engineering/utils": "^4.0.0-alpha.33",
@@ -70,5 +70,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "316af25fc0da0320febe6027eb67f4a8288dec3e"
+  "gitHead": "02e37ad192a8bffa34cd4b7af353aa3e1c71acc5"
 }

package/src/stories/a/AppContext.stories.jsx

@@ -22,7 +22,7 @@ export const Base = () => (
     config={{
       APP:{
         NAME         :'Pareto',
-        CANONICAL    :'https://hellopareto.com',
+        CANONICAL    :'https://pareto.ai',
         SUPPORT_EMAIL:'support@hellopareto.com',
         TITLE_SUFFIX :'| Pareto',
       },
@@ -32,7 +32,7 @@ export const Base = () => (
         TWITTER  :'https://www.twitter.com/hellopareto',
       },
       EXTRA:{
-        SURVEY:'https://survey.hellopareto.com',
+        SURVEY:'https://survey.pareto.ai',
       },
     }}
 

package/src/stories/a/Removable.stories.jsx

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { Removable } from 'ui'
+
+export default {
+  title        :'a/Removable',
+  component    :Removable,
+  subcomponents:{
+    // Item:Removable.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <Removable>Sample Removable</Removable>
+)

package/src/stories/b/SocialMediaButton.stories.jsx

@@ -33,7 +33,7 @@ Base.args = {
   config:{
     SITE:{
       NAME         :'Pareto',
-      CANONICAL    :'https://hellopareto.com',
+      CANONICAL    :'https://pareto.ai',
       SUPPORT_EMAIL:'support@hellopareto.com',
       TITLE_SUFFIX :'| Pareto',
     },
@@ -44,7 +44,7 @@ Base.args = {
       LINKEDIN :'https://www.linkedin.com/company/hellopareto',
     },
     EXTRA:{
-      SURVEY:'https://survey.hellopareto.com',
+      SURVEY:'https://survey.pareto.ai',
     },
   },
 }

package/src/stories/colors.js

@@ -51,6 +51,8 @@ const UI = [
   'transparent',
   'highlighted',
   'disabled',
+  'ui-main',
+  'ui-main-2',
 ]
 
 const SM = [

package/src/ui/a/Removable/Removable.jsx

@@ -0,0 +1,85 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { useInsertionEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'removable'
+
+/**
+ * This is a wrapper component that adds a close button to its children.
+ */
+const Removable = ({
+  id,
+  className:userClassName,
+  style,
+  handleClose,
+  children,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+      <button type="button" className="close-button" onClick={handleClose || (() => null)}>
+        <span className="icon">Y</span>
+      </button>
+    </div>
+  )
+}
+
+Removable.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 function to call when the close button is clicked
+   */
+  handleClose:PropTypes.func,
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+}
+
+Removable.defaultProps = {
+  // someProp:false
+}
+
+export default Removable

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

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

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: .5rem;
+
+.#{bem.$base}.removable {
+  align-items: center;
+  background-color: var(--background-inputs);
+  border: var(--theme-default-border-style) var(--main2);
+  border-radius: $default-padding;
+  display: flex;
+  justify-content: space-between;
+  padding: $default-padding;
+
+  > :first-child {
+    flex-grow: 1;
+  }
+
+  .close-button {
+    background-color: transparent;
+    border: none;
+    color: var(--metadata);
+    cursor: pointer;
+    margin-left: var(--gap);
+
+    &:hover {
+      color: var(--hard-metadata);
+    }
+  }
+}
+
+

package/src/ui/a/index.js

@@ -23,3 +23,4 @@ export { AnimatedBlobs } from './AnimatedBlobs'
 export { Tip } from './Tip'
 export { AnimatedGradient } from './AnimatedGradient'
 export { TextSteps } from './TextSteps'
+export { Removable } from './Removable'

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/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/Checkbox/styles.scss

@@ -9,5 +9,6 @@
     align-items: flex-start;
     display: flex;
     flex-direction: column;
+    justify-content: center;
   }
 }

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

@@ -61,7 +61,6 @@ const EditorInput = ({
       JSON.parse(value)
       return value
     } catch {
-      // eslint-disable-next-line no-useless-escape
       const defaultValue = {
         root:{
           children:[

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}