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

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

@@ -0,0 +1,292 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useRef } from 'react'
+
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  DEPRECATED_$isGridSelection,
+} from 'lexical'
+
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+} from '@lexical/rich-text'
+
+import {
+  $setBlocksType,
+} from '@lexical/selection'
+
+import {
+  INSERT_CHECK_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+} from '@lexical/list'
+
+import { $createCodeNode } from '@lexical/code'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+import { Popover } from 'ui/a'
+
+import { useOutsideClick } from 'ui/utils'
+
+import { blockTypeToBlockName } from '../ToolbarPlugin/ToolbarPlugin'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'block-format-drop-down'
+
+const iconsMap = {
+  bullet   :{ icon: '.', className: 'icon' },
+  check    :{ icon: '4', className: 'ai-icon' },
+  code     :{ icon: '6', className: 'ai-icon' },
+  h1       :{ icon: '1', className: 'ai-icon' },
+  h2       :{ icon: '2', className: 'ai-icon' },
+  h3       :{ icon: '3', className: 'ai-icon' },
+  number   :{ icon: '-', className: 'icon' },
+  paragraph:{ icon: 'N', className: 'ai-icon' },
+  quote    :{ icon: '5', className: 'ai-icon' },
+
+}
+/**
+ * This is the component description.
+ */
+const BlockFormatDropDown = ({
+  id,
+  className:userClassName,
+  style,
+  editor,
+  blockType,
+  // ...otherProps
+}) => {
+  const formatParagraph = () => {
+    editor.update(() => {
+      const selection = $getSelection()
+      if (
+        $isRangeSelection(selection)
+        || DEPRECATED_$isGridSelection(selection)
+      ) {
+        $setBlocksType(selection, () => $createParagraphNode())
+      }
+    })
+  }
+
+  const formatHeading = (headingSize) => {
+    if (blockType !== headingSize) {
+      editor.update(() => {
+        const selection = $getSelection()
+        if (
+          $isRangeSelection(selection)
+          || DEPRECATED_$isGridSelection(selection)
+        ) {
+          $setBlocksType(selection, () => $createHeadingNode(headingSize))
+        }
+      })
+    }
+  }
+
+  const formatBulletList = () => {
+    if (blockType !== 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
+    }
+  }
+
+  const formatCheckList = () => {
+    if (blockType !== 'check') {
+      editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
+    }
+  }
+
+  const formatNumberedList = () => {
+    if (blockType !== 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
+    }
+  }
+
+  const formatQuote = () => {
+    if (blockType !== 'quote') {
+      editor.update(() => {
+        const selection = $getSelection()
+        if (
+          $isRangeSelection(selection)
+          || DEPRECATED_$isGridSelection(selection)
+        ) {
+          $setBlocksType(selection, () => $createQuoteNode())
+        }
+      })
+    }
+  }
+
+  const formatCode = () => {
+    if (blockType !== 'code') {
+      editor.update(() => {
+        let selection = $getSelection()
+
+        if (
+          $isRangeSelection(selection)
+          || DEPRECATED_$isGridSelection(selection)
+        ) {
+          if (selection.isCollapsed()) {
+            $setBlocksType(selection, () => $createCodeNode())
+          } else {
+            const textContent = selection.getTextContent()
+            const codeNode = $createCodeNode()
+            selection.insertNodes([codeNode])
+            selection = $getSelection()
+            if ($isRangeSelection(selection)) selection.insertRawText(textContent)
+          }
+        }
+      })
+    }
+  }
+
+  const parentRef = useRef(null)
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  useOutsideClick(parentRef, () => setIsOpen(false))
+
+  return (
+    <button
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        'group',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      ref={parentRef}
+      type="button"
+      onClick={() => setIsOpen(!isOpen)}
+      // {...otherProps}
+    >
+      <span className={iconsMap[blockType].className}>
+        {iconsMap[blockType].icon}
+      </span>
+      <span>{blockTypeToBlockName[blockType]}</span>
+      <span className="icon">V</span>
+      {isOpen && (
+        <Popover
+          parentRef={parentRef}
+          isOpen={isOpen}
+          color="background-far"
+        >
+          <button
+            className={`item ${blockType === 'paragraph' ? 'active' : ''}`}
+            onClick={formatParagraph}
+            type="button"
+          >
+            <span className="ai-icon">N</span>
+            <span className="text">Normal</span>
+          </button>
+          <button
+            className={`item ${blockType === 'h1' ? 'active' : ''}`}
+            onClick={() => formatHeading('h1')}
+            type="button"
+          >
+            <span className="ai-icon">1</span>
+            <span className="text">Heading 1</span>
+          </button>
+          <button
+            className={`item ${blockType === 'h2' ? 'active' : ''}`}
+            onClick={() => formatHeading('h2')}
+            type="button"
+          >
+            <span className="ai-icon">2</span>
+            <span className="text">Heading 2</span>
+          </button>
+          <button
+            className={`item ${blockType === 'h3' ? 'active' : ''}`}
+            onClick={() => formatHeading('h3')}
+            type="button"
+          >
+            <span className="ai-icon">3</span>
+            <span className="text">Heading 3</span>
+          </button>
+          <button
+            className={`item ${blockType === 'bullet' ? 'active' : ''}`}
+            onClick={formatBulletList}
+            type="button"
+          >
+            <span className="icon">.</span>
+            <span className="text">Bullet List</span>
+          </button>
+          <button
+            className={`item ${blockType === 'number' ? 'active' : ''}`}
+            onClick={formatNumberedList}
+            type="button"
+          >
+            <span className="icon">-</span>
+            <span className="text">Numbered List</span>
+          </button>
+          <button
+            className={`item ${blockType === 'check' ? 'active' : ''}`}
+            onClick={formatCheckList}
+            type="button"
+          >
+            <span className="ai-icon">4</span>
+            <span className="text">Check List</span>
+          </button>
+          <button
+            className={`item ${blockType === 'quote' ? 'active' : ''}`}
+            onClick={formatQuote}
+            type="button"
+          >
+            <span className="ai-icon">5</span>
+            <span className="text">Quote</span>
+          </button>
+          <button
+            className={`item ${blockType === 'code' ? 'active' : ''}`}
+            onClick={formatCode}
+            type="button"
+          >
+            <span className="ai-icon">6</span>
+            <span className="text">Code Block</span>
+          </button>
+        </Popover>
+      )}
+    </button>
+  )
+}
+
+BlockFormatDropDown.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),
+}
+
+BlockFormatDropDown.defaultProps = {
+  // someProp:false
+}
+
+export default BlockFormatDropDown

package/src/ui/f/fields/EditorInput/common/BlockFormatDropDown/index.js

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

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

@@ -0,0 +1,55 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-width: 15em;
+
+.#{bem.$base}.block-format-drop-down {
+  align-items: center;
+  background-color: var(--x);
+  border: 0;
+  color: var(--on-background-inputs);
+  cursor: pointer;
+  display: flex;
+  gap: calc(var(--gap) / 2);
+  margin-inline: calc(var(--theme-default-padding) / 4);
+  padding: calc(var(--theme-default-padding) / 2);
+  position: relative;
+
+  &:hover {
+    background: var(--hard-x);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+  }
+
+  > .#{bem.$base}.popover {
+    background-color: var(--background-far);
+    border: 1px solid var(--hard-background-cards);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    color: var(--heading);
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--theme-default-padding) / 2);
+    width: $default-width;
+
+    > .item {
+      align-items: center;
+      background-color: var(--x);
+      border: 0;
+      border-radius: calc(var(--theme-default-border-radius) / 2);
+      color: var(--paragraph);
+      cursor: pointer;
+      display: flex;
+      gap: calc(var(--gap) / 2);
+      padding: calc(var(--theme-default-padding) / 2);
+      transition: all .2s;
+
+      &:hover {
+        background-color: var(--hard-x);
+      }
+
+      &.active {
+        background-color: var(--hard-ui-main);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,110 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useRef, useEffect, useState } from 'react'
+
+import { ColorPicker as ReactColorPicker, useColor } from 'react-color-palette'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+import { Popover } from 'ui/a'
+
+import { useOutsideClick } from 'ui/utils'
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'color-picker'
+
+/**
+ * This is the component description.
+ */
+const ColorPicker = ({
+  id,
+  className:userClassName,
+  style,
+  icon,
+  color,
+  onChange,
+  // ...otherProps
+}) => {
+  const [colorValue, setColor] = useColor(color)
+
+  const parentRef = useRef(null)
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  useOutsideClick(parentRef, () => setIsOpen(false))
+
+  useEffect(() => {
+    const { hex } = colorValue
+    if (hex) {
+      onChange(hex)
+    }
+  }, [colorValue])
+
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      ref={parentRef}
+      // {...otherProps}
+    >
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span className="icon">{icon}</span>
+        <span className="icon">V</span>
+      </button>
+      <Popover
+        parentRef={parentRef}
+        isOpen={isOpen}
+        color="background-far"
+      >
+        <ReactColorPicker
+          color={colorValue}
+          onChange={setColor}
+          hideInput
+        />
+      </Popover>
+    </div>
+  )
+}
+
+ColorPicker.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),
+}
+
+ColorPicker.defaultProps = {
+  // someProp:false
+}
+
+export default ColorPicker

package/src/ui/f/fields/EditorInput/common/ColorPicker/index.js

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

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

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "react-color-palette/css";
+
+$default-width: 20rem;
+
+.#{bem.$base}.color-picker {
+  cursor: pointer;
+  position: relative;
+
+  > button {
+    align-items: center;
+    background-color: var(--x);
+    border: 0;
+    color: var(--on-background-inputs);
+    display: flex;
+    gap: calc(var(--gap) / 2);
+    padding: calc(var(--theme-default-padding) / 2);
+
+    &:hover {
+      background: var(--hard-x);
+      border-radius: calc(var(--theme-default-border-radius) / 2);
+    }
+  }
+
+
+  > .#{bem.$base}.popover {
+    background-color: var(--background-far);
+    border: 1px solid var(--hard-background-cards);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    color: var(--heading);
+    padding: calc(var(--theme-default-padding) / 2);
+    width: $default-width;
+  }
+}

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

@@ -0,0 +1,134 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useRef, useCallback } from 'react'
+
+import { $getSelection, $isRangeSelection } from 'lexical'
+
+import { $patchStyleText } from '@lexical/selection'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+import { Popover } from 'ui/a'
+
+import { useOutsideClick } from 'ui/utils'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'font-size-drop-down'
+
+const FONT_SIZE_OPTIONS = [
+  ['10px', '10px'],
+  ['11px', '11px'],
+  ['12px', '12px'],
+  ['13px', '13px'],
+  ['14px', '14px'],
+  ['15px', '15px'],
+  ['16px', '16px'],
+  ['17px', '17px'],
+  ['18px', '18px'],
+  ['19px', '19px'],
+  ['20px', '20px'],
+]
+
+/**
+ * This is the component description.
+ */
+const FontSizeDropDown = ({
+  id,
+  className:userClassName,
+  style,
+  editor,
+  value,
+  // ...otherProps
+}) => {
+  const parentRef = useRef(null)
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  useOutsideClick(parentRef, () => setIsOpen(false))
+
+  const handleClick = useCallback(
+    (option) => {
+      editor.update(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          $patchStyleText(selection, {
+            'font-size':option,
+          })
+        }
+      })
+    },
+    [editor],
+  )
+
+  return (
+    <button
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        'group',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      ref={parentRef}
+      type="button"
+      onClick={() => setIsOpen(!isOpen)}
+      // {...otherProps}
+    >
+      <span>{value}</span>
+      <span className="icon">
+        V
+      </span>
+      {isOpen && (
+        <Popover
+          parentRef={parentRef}
+          isOpen={isOpen}
+          color="background-far"
+        >
+          {FONT_SIZE_OPTIONS.map(([option, text]) => (
+            <button
+              className={`item ${value === option ? 'active' : ''}`}
+              onClick={() => handleClick(option)}
+              type="button"
+            >
+              <span className="text">{text}</span>
+            </button>
+          ))}
+        </Popover>
+      )}
+    </button>
+  )
+}
+
+FontSizeDropDown.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),
+}
+
+FontSizeDropDown.defaultProps = {
+  // someProp:false
+}
+
+export default FontSizeDropDown

package/src/ui/f/fields/EditorInput/common/FontSizeDropDown/index.js

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

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

@@ -0,0 +1,55 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-width: 4.5rem;
+
+.#{bem.$base}.font-size-drop-down {
+  align-items: center;
+  background-color: var(--x);
+  border: 0;
+  color: var(--on-background-inputs);
+  cursor: pointer;
+  display: flex;
+  gap: calc(var(--gap) / 2);
+  margin-inline: calc(var(--theme-default-padding) / 4);
+  padding: calc(var(--theme-default-padding) / 2);
+  position: relative;
+
+  &:hover {
+    background: var(--hard-x);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+  }
+
+  > .#{bem.$base}.popover {
+    background-color: var(--background-far);
+    border: 1px solid var(--hard-background-cards);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    color: var(--heading);
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--theme-default-padding) / 2);
+    width: $default-width;
+
+    > .item {
+      align-items: center;
+      background-color: var(--x);
+      border: 0;
+      border-radius: calc(var(--theme-default-border-radius) / 2);
+      color: var(--paragraph);
+      cursor: pointer;
+      display: flex;
+      gap: calc(var(--gap) / 2);
+      padding: calc(var(--theme-default-padding) / 2);
+      transition: all .2s;
+
+      &:hover {
+        background-color: var(--hard-x);
+      }
+
+      &.active {
+        background-color: var(--hard-ui-main);
+      }
+    }
+  }
+}