@pareto-engineering/design-system 4.0.0-alpha.77 → 4.0.0-alpha.78

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

@@ -0,0 +1,283 @@
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react';
+import { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { mergeRegister, $getNearestNodeOfType, $findMatchingParent } from '@lexical/utils';
+import { $isHeadingNode } from '@lexical/rich-text';
+import { $getSelection, $isRangeSelection, $isRootOrShadowRoot, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, DEPRECATED_$isGridSelection } from 'lexical';
+import { $isListNode, ListNode } from '@lexical/list';
+import { $getSelectionStyleValueForProperty, $isAtNodeEnd, $patchStyleText } from '@lexical/selection';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isTableNode } from '@lexical/table';
+import styleNames from '@pareto-engineering/bem/exports';
+import { BlockFormatDropDown } from "../BlockFormatDropDown";
+import { ColorPicker } from "../ColorPicker";
+import { FontSizeDropDown } from "../FontSizeDropDown";
+
+// Local Definitions
+import "./styles.scss";
+const getSelectedNode = selection => {
+  const {
+    anchor,
+    focus
+  } = selection;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  }
+  return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+};
+export const blockTypeToBlockName = {
+  bullet: 'Bulleted List',
+  check: 'Check List',
+  code: 'Code Block',
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  number: 'Numbered List',
+  paragraph: 'Normal',
+  quote: 'Quote'
+};
+const baseClassName = styleNames.base;
+const componentClassName = 'toolbar-plugin';
+
+/**
+ * This is the component description
+ */
+const ToolbarPlugin = ({
+  id,
+  className: userClassName,
+  style: inlineStyles,
+  baseBgColor
+  // ...otherProps
+}) => {
+  const [editor] = useLexicalComposerContext();
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [blockType, setBlockType] = useState('paragraph');
+  const [rootType, setRootType] = useState('root');
+  const [fontColor, setFontColor] = useState('#000000');
+  const [bgColor, setBgColor] = useState('#ffffff');
+  const [fontSize, setFontSize] = useState('15px');
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const formatLink = useCallback(() => {
+    if (!isLink) {
+      // eslint-disable-next-line no-alert
+      const path = prompt('Enter the full URL. Ex: https://www.example.com');
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, path);
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+  const $updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      let element = anchorNode.getKey() === 'root' ? anchorNode : $findMatchingParent(anchorNode, e => {
+        const parent = e.getParent();
+        return parent !== null && $isRootOrShadowRoot(parent);
+      });
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow();
+      }
+      const elementKey = element.getKey();
+      const elementDOM = activeEditor.getElementByKey(elementKey);
+
+      // Update text format
+      setIsBold(selection.hasFormat('bold'));
+      setIsItalic(selection.hasFormat('italic'));
+      setIsUnderline(selection.hasFormat('underline'));
+      setIsStrikethrough(selection.hasFormat('strikethrough'));
+
+      // Update links
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+      const tableNode = $findMatchingParent(node, $isTableNode);
+      if ($isTableNode(tableNode)) {
+        setRootType('table');
+      } else {
+        setRootType('root');
+      }
+      if (elementDOM !== null) {
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getListType() : element.getListType();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          if (type in blockTypeToBlockName) {
+            setBlockType(type);
+          }
+        }
+      }
+      setFontSize($getSelectionStyleValueForProperty(selection, 'font-size', '15px'));
+      setFontColor($getSelectionStyleValueForProperty(selection, 'color', '#000'));
+      setBgColor($getSelectionStyleValueForProperty(selection, 'background-color', '#fff'));
+    }
+  }, [activeEditor]);
+  useEffect(() => editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+    $updateToolbar();
+    setActiveEditor(newEditor);
+    return false;
+  }, COMMAND_PRIORITY_CRITICAL), [editor, $updateToolbar]);
+  useEffect(() => mergeRegister(editor.registerEditableListener(editable => {
+    setIsEditable(editable);
+  }), activeEditor.registerUpdateListener(({
+    editorState
+  }) => {
+    editorState.read(() => {
+      $updateToolbar();
+    });
+  }), activeEditor.registerCommand(CAN_UNDO_COMMAND, payload => {
+    setCanUndo(payload);
+    return false;
+  }, COMMAND_PRIORITY_CRITICAL), activeEditor.registerCommand(CAN_REDO_COMMAND, payload => {
+    setCanRedo(payload);
+    return false;
+  }, COMMAND_PRIORITY_CRITICAL)), [$updateToolbar, activeEditor, editor]);
+  const applyStyleText = useCallback(styles => {
+    activeEditor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+        $patchStyleText(selection, styles);
+      }
+    });
+  }, [activeEditor]);
+  const onFontColorSelect = useCallback(value => {
+    applyStyleText({
+      color: value
+    });
+  }, [applyStyleText]);
+  const onBgColorSelect = useCallback(value => {
+    applyStyleText({
+      'background-color': value
+    });
+  }, [applyStyleText]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${baseBgColor}`].filter(e => e).join(' '),
+    style: inlineStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "group"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => editor.dispatchCommand(UNDO_COMMAND),
+    className: "ai-icon",
+    disabled: !canUndo || !isEditable
+  }, "A"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ai-icon",
+    onClick: () => editor.dispatchCommand(REDO_COMMAND),
+    disabled: !canRedo || !isEditable
+  }, "B")), /*#__PURE__*/React.createElement(BlockFormatDropDown, {
+    blockType: blockType,
+    editor: editor,
+    rootType: rootType
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "group"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: isBold ? 'active' : undefined,
+    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "|")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: isItalic ? 'active' : undefined,
+    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "}")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: isUnderline ? 'active' : undefined,
+    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "~")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: isStrikethrough ? 'active' : undefined,
+    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "?")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: isLink ? 'active' : undefined,
+    onClick: formatLink
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "]"))), /*#__PURE__*/React.createElement(FontSizeDropDown, {
+    editor: editor,
+    value: fontSize
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "group"
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    icon: "'",
+    color: fontColor,
+    onChange: onFontColorSelect
+  }), /*#__PURE__*/React.createElement(ColorPicker, {
+    icon: "#",
+    color: bgColor,
+    onChange: onBgColorSelect
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "group"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "^")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "_")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "`")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, "{"))));
+};
+ToolbarPlugin.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),
+  /**
+   * Base background color
+   */
+  baseBgColor: PropTypes.string
+};
+ToolbarPlugin.defaultProps = {
+  baseBgColor: 'background-far'
+};
+export default ToolbarPlugin;

package/dist/es/f/fields/EditorInput/common/ToolbarPlugin/index.js

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

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

@@ -0,0 +1,56 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+
+$default-gap: calc(var(--gap) / 2);
+$default-padding: .55em .75em;
+$default-input-border-radius: var(--theme-default-input-border-radius);
+$default-border: var(--theme-default-input-border);
+$default-icon-color: var(--soft-ui-icons);
+
+.#{bem.$base}.toolbar-plugin {
+  align-items: center;
+  border-inline: $default-border;
+  border-top: $default-border;
+  border-top-left-radius: $default-input-border-radius;
+  border-top-right-radius: $default-input-border-radius;
+  display: flex;
+  flex-wrap: wrap;
+  padding-block: calc(var(--theme-default-padding) / 4);
+
+  > .ds + .group {
+    border-left: 1px solid var(--soft-background-inputs);
+  }
+
+  > .group {
+    display: flex;
+    gap: calc(var(--gap) / 2);
+
+    > button {
+      background: var(--x);
+      border: 0;
+      border-radius: calc(var(--theme-default-border-radius) / 2);
+      color: $default-icon-color;
+      cursor: pointer;
+      margin: 0;
+      padding: $default-padding;
+
+      &:hover,
+      &.active {
+        background: var(--hard-x);
+      }
+    }
+
+    &:not(.#{bem.$base}) {
+      padding-inline: calc(var(--theme-default-padding) / 4);
+    }
+
+
+    &:not(:last-child, .#{bem.$base}) {
+      border-right: 1px solid var(--soft-background-inputs);
+    }
+  }
+}

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

@@ -1,3 +1,6 @@
-export { default as Toolbar } from "./Toolbar";
+export { BlockFormatDropDown } from "./BlockFormatDropDown";
 export { default as TreeViewPlugin } from "./TreeViewPlugin";
-export { default as StopPropagationPlugin } from "./StopPropagationPlugin";
+export { default as StopPropagationPlugin } from "./StopPropagationPlugin";
+export { ToolbarPlugin } from "./ToolbarPlugin";
+export { ColorPicker } from "./ColorPicker";
+export { FontSizeDropDown } from "./FontSizeDropDown";

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

@@ -6,7 +6,6 @@
 
 $default-gap: calc(var(--gap) / 2);
 $default-padding: .55em .75em;
-$default-border: 1px solid var(--outline-inputs);
 $default-input-border-radius: var(--theme-default-input-border-radius);
 $default-border: var(--theme-default-input-border);
 $focus-border: var(--theme-focus-input-border);
@@ -15,6 +14,7 @@ $default-background: var(--background-inputs);
 $default-icon-color: var(--on-background-inputs);
 $disabled-background: var(--background-inputs-30);
 $default-color-menu-padding: .5em .25em;
+$default-check-mark-dimensions: 1rem;
 
 .#{bem.$base}.editor-input {
   display: flex;
@@ -24,29 +24,6 @@ $default-color-menu-padding: .5em .25em;
     margin-bottom: var(--gap);
   }
 
-  > .#{bem.$base}.toolbar {
-    display: flex;
-    gap: $default-gap;
-    margin-bottom: .25em;
-
-    > .group {
-      > button {
-        background: $default-background;
-        border: $default-border;
-        color: $default-icon-color;
-        padding: $default-padding;
-
-        &.active {
-          background-color: $active-background;
-        }
-      }
-    }
-
-    .flip {
-      transform: scaleX(-1);
-    }
-  }
-
   &:not(.disabled) {
     &:hover,
     &:focus,
@@ -93,7 +70,8 @@ $default-color-menu-padding: .5em .25em;
   > .content-editable {
     background: $default-background;
     border: $default-border;
-    border-radius: $default-input-border-radius;
+    border-bottom-left-radius: $default-input-border-radius;
+    border-bottom-right-radius: $default-input-border-radius;
     color: var(--y);
     height: var(--rows);
     outline: none;
@@ -102,10 +80,116 @@ $default-color-menu-padding: .5em .25em;
     resize: var(--resize);
     width: 100%;
 
+    .lexical-list-item-checked,
+    .lexical-list-item-unchecked {
+      list-style-type: none;
+      margin-inline: calc(var(--gap) / 2);
+      outline: none;
+      padding-inline: calc(var(--theme-default-padding) * 1.5);
+      position: relative;
+    }
+
+    .lexical-list-item-checked {
+      text-decoration: line-through;
+    }
+
+    .lexical-list-item-unchecked::before,
+    .lexical-list-item-checked::before {
+      background-size: cover;
+      content: "";
+      cursor: pointer;
+      display: block;
+      height: $default-check-mark-dimensions;
+      left: 0;
+      position: absolute;
+      top: 2px;
+      width: $default-check-mark-dimensions;
+    }
+
+    .lexical-list-item-unchecked[dir="rtl"]::before,
+    .lexical-list-item-checked[dir="rtl"]::before {
+      left: auto;
+      right: 0;
+    }
+
+    .lexical-list-item-unchecked:focus::before,
+    .lexical-list-item-checked:focus::before {
+      border-radius: 2px;
+      box-shadow: 0 0 0 2px var(--light-blue);
+    }
+
+    .lexical-list-item-unchecked::before {
+      border: var(--theme-default-border-style) var(--ui-icons);
+      border-radius: 2px;
+    }
+
+    .lexical-list-item-checked::before {
+      background-color: var(--blue);
+      background-repeat: no-repeat;
+      border: var(--theme-default-border-style) var(--soft-blue);
+      border-radius: 2px;
+    }
+
+    .lexical-list-item-checked::after {
+      border-color: var(--background-far);
+      border-style: solid;
+      border-width: 0 2px 2px 0;
+      content: "";
+      cursor: pointer;
+      display: block;
+      height: 6px;
+      left: 7px;
+      position: absolute;
+      right: 7px;
+      top: 6px;
+      transform: rotate(45deg);
+      width: 3px;
+    }
+
+    .lexical-code {
+      background-color: var(--hard-background-cards);
+      display: block;
+      font-size: calc(var(--s-1) * 1rem);
+      margin: 0;
+      margin-bottom: calc(var(--gap) / 2);
+      margin-top: calc(var(--gap) / 2);
+      overflow-x: auto;
+      padding-block: calc(var(--theme-default-padding) / 2);
+      padding-bottom: calc(var(--theme-default-padding) / 2);
+      padding-left: calc(var(--theme-default-padding) * 2);
+      position: relative;
+      tab-size: 2;
+    }
+
+    .lexical-code::before {
+      background-color: var(--hard-background-cards);
+      border-right: var(--theme-default-border-style) var(--ui-icons);
+      color: var(--pagraph);
+      content: attr(data-gutter);
+      left: 0;
+      padding: calc(var(--theme-default-padding) / 2);
+      position: absolute;
+      text-align: right;
+      top: 0;
+      white-space: pre-wrap;
+    }
+
     li:has(ol, ul) {
       list-style-type: none;
     }
 
+    a {
+      cursor: pointer;
+    }
+
+    blockquote {
+      border-left: 4px solid var(--ui-icons);
+      font-size: calc(var(--s0) * 1rem);
+      margin: 0;
+      margin-left: var(--gap);
+      padding-left: calc(var(--theme-default-padding) / 2);
+    }
+
     p,
     span,
     strong,

package/dist/es/utils/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as useWindowSize } from "./useWindowSize";
-export { default as useDynamicPosition } from "./useDynamicPosition";
+export { default as useDynamicPosition } from "./useDynamicPosition";
+export { default as useOutsideClick } from "./useOutsideClick";

package/dist/es/utils/hooks/useOutsideClick.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+const useOutsideClick = (ref, callback) => {
+  // const ref = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [callback]);
+};
+export default useOutsideClick;

package/dist/es/utils/index.js

@@ -1 +1 @@
-export { useWindowSize, useDynamicPosition } from "./hooks";
+export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.77",
+  "version": "4.0.0-alpha.78",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,8 +51,15 @@
   },
   "dependencies": {
     "@codemirror/lang-xml": "^6.0.2",
-    "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.73",
+    "@lexical/code": "0.12.2",
+    "@lexical/link": "0.12.2",
+    "@lexical/list": "0.12.2",
+    "@lexical/react": "0.12.2",
+    "@lexical/rich-text": "0.12.2",
+    "@lexical/selection": "0.12.2",
+    "@lexical/table": "0.12.2",
+    "@lexical/utils": "0.12.2",
+    "@pareto-engineering/assets": "^4.0.0-alpha.78",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.73",
     "@pareto-engineering/utils": "^4.0.0-alpha.73",
@@ -62,10 +69,11 @@
     "formik": "^2.2.9",
     "fuse.js": "^7.0.0",
     "hamburgers": "^1.2.1",
-    "lexical": "^0.11.3",
+    "lexical": "0.12.2",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-color-palette": "^7.1.0",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
@@ -74,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "7bd6859a8caf8862adf262f19b720e2f3774c5c0"
+  "gitHead": "2232d74831fee703583d210b9d083f357440b21a"
 }

package/src/stories/a/Quote.stories.jsx

@@ -13,17 +13,37 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    children:{
+      control:{
+        type:'text',
+      },
+    },
+    source:{
+      control:{
+        type:'text',
+      },
+    },
+    author:{
+      control:{
+        type:'text',
+      },
+    },
+    color:{
+      control:{
+        type:'text',
+      },
+    },
   },
 }
 
-export const Base = () => (
-  <div className="y-background-far b-y u1 p-u">
-    <Quote
-      author="Austen Spoonts"
-    >
-      Pareto was like having a full-time employee without having to hire somebody.
-      That’s how I would explain it. An on-call, on-demand full-time employee.
-    </Quote>
-  </div>
+const Template = (args) => (
+  <Quote {...args} />
 )
+
+export const Base = Template.bind({})
+Base.args = {
+  children:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.',
+  source  :'https://example.com',
+  author  :'John Doe',
+  color   :'highlighted',
+}