@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

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,115 @@
+/* @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,
+  defaultColorHex,
+  onChange,
+  // ...otherProps
+}) => {
+  const [colorValue, setColor] = useColor(defaultColorHex)
+
+  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),
+
+  /**
+   * The required default hex value for the color picker
+   */
+  defaultColorHex:PropTypes.string,
+}
+
+ColorPicker.defaultProps = {
+  defaultColorHex:'#ffffff',
+}
+
+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);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { useInsertionEffect } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+const StopPropagationPlugin = ({
+  stopPropagationKeys,
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  useInsertionEffect(() => {
+    const onKeyDown = (e) => {
+      if (stopPropagationKeys?.includes(e.key)) {
+        e.stopPropagation()
+      }
+    }
+
+    return editor.registerRootListener(
+      (rootElement, prevRootElement) => {
+        if (prevRootElement !== null) {
+          prevRootElement.removeEventListener('keydown', onKeyDown)
+        }
+        if (rootElement !== null) {
+          rootElement.addEventListener('keydown', onKeyDown)
+        }
+      },
+    )
+  }, [editor])
+}
+
+export default StopPropagationPlugin