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

package/dist/es/b/ExpandableLexicalPreview/styles.scss

@@ -1,84 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable max-nesting-depth -- required */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.expandable-lexical-preview {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: var(--gap);
-  width: 100%;
-
-  &.collapsed {
-    flex-direction: row;
-  }
-
-  > .title {
-    margin: 0;
-  }
-
-
-  > .#{bem.$base}.button {
-    align-items: center;
-    border: 1px solid var(--outline-inputs);
-    display: flex;
-  }
-
-  > .lexical-content {
-    position: relative;
-
-    > .content-editable {
-      background: var(--background-inputs);
-      border: 1px solid var(--outline-inputs);
-      border-radius: var(--theme-default-border-radius);
-      color: var(--y);
-      overflow: auto;
-      padding: var(--gap);
-      resize: var(--resize);
-
-      li:has(ol, ul) {
-        list-style-type: none;
-      }
-
-      p,
-      span,
-      strong,
-      em,
-      li {
-        &.underlined {
-          text-decoration: underline;
-
-          &.strikethrough {
-            text-decoration: underline line-through;
-          }
-        }
-
-        &.strikethrough {
-          text-decoration: line-through;
-        }
-
-        &.italic {
-          font-style: italic;
-        }
-      }
-
-      :first-child {
-        margin-top: 0;
-      }
-
-      &::placeholder {
-        color: var(--metadata);
-      }
-    }
-
-    > .#{bem.$base}.expand-button {
-      border: 1px solid var(--outline-inputs);
-      position: absolute;
-      right: 1em;
-      top: 1em;
-    }
-  }
-}

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

@@ -1,246 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react';
-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';
-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;
-};
-const defaultColor = 'var(--paragraph)';
-const colorOptions = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'brown'];
-const Toolbar = () => {
-  const [editor] = useLexicalComposerContext();
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isStrikethrough, setIsStrikethrough] = useState(false);
-  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);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
-    }
-  };
-  const formatNumberedList = () => {
-    if (blockType !== 'ol') {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
-    }
-  };
-  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();
-
-    // Check list selection
-    if ($isRangeSelection(selection)) {
-      const anchorNode = selection.anchor.getNode();
-      const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
-      if ($isListNode(element)) {
-        const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-        const type = parentList ? parentList.getTag() : element.getTag();
-        setBlockType(type);
-      } else {
-        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'));
-      setIsStrikethrough(selection.hasFormat('strikethrough'));
-      setIsUnderline(selection.hasFormat('underline'));
-      setIsLink(selection.hasFormat('link'));
-
-      // Check links
-      const node = getSelectedNode(selection);
-      const parent = node.getParent();
-      if ($isLinkNode(parent) || $isLinkNode(node)) {
-        setIsLink(true);
-      } else {
-        setIsLink(false);
-      }
-    }
-  }, [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(() => {
-      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", {
-    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: 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()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "]")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: blockType === 'ul' ? 'active' : undefined,
-    onClick: () => formatBulletList()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, ".")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: blockType === 'ol' ? 'active' : undefined,
-    onClick: () => formatNumberedList()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "-"))), /*#__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"
-  }, "{"))), /*#__PURE__*/React.createElement("div", {
-    className: "group"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(UNDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "flip",
-    onClick: () => editor.dispatchCommand(REDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\"))));
-};
-export default Toolbar;

package/src/stories/a/LexicalPreview.stories.jsx

@@ -1,28 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { LexicalPreview } from 'ui'
-
-export default {
-  title        :'a/LexicalPreview',
-  component    :LexicalPreview,
-  subcomponents:{
-    // Item:TextareaInput.Item
-  },
-  decorators:[],
-  argTypes  :{
-    color:{ control: 'text' },
-  },
-}
-
-// eslint-disable-next-line no-useless-escape
-const nodes = '{\"root\":{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":1,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is bold.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":1},{\"children\":[{\"detail\":0,\"format\":2,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is italic.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":2},{\"children\":[{\"detail\":0,\"format\":8,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is underlined.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":3},{\"children\":[{\"children\":[{\"children\":[{\"detail\":0,\"format\":4,\"mode\":\"normal\",\"style\":\"\",\"text\":\"This is struck.\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":1,\"type\":\"listitem\",\"version\":1,\"value\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"listitem\",\"version\":1,\"value\":4}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"list\",\"version\":1,\"listType\":\"bullet\",\"start\":1,\"tag\":\"ul\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}'
-
-const Template = (args) => (
-  <LexicalPreview {...args} />
-)
-
-export const Base = Template.bind({})
-Base.args = {
-  nodes,
-}

package/src/ui/a/LexicalPreview/LexicalPreview.jsx

@@ -1,109 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react'
-import { LexicalComposer } from '@lexical/react/LexicalComposer'
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
-import { ContentEditable } from '@lexical/react/LexicalContentEditable'
-import { AutoLinkNode, LinkNode } from '@lexical/link'
-import { ListItemNode, ListNode } from '@lexical/list'
-
-import PropTypes from 'prop-types'
-import styleNames from '@pareto-engineering/bem/exports'
-import './styles.scss'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-const componentClassName = 'lexical-preview'
-
-/**
- * This is the component description.
- */
-const LexicalPreview = ({
-  id,
-  className:userClassName,
-  style,
-  nodes,
-  color,
-  // ...otherProps
-}) => {
-  const initialConfig = {
-    nameSpace  :id,
-    editable   :false,
-    editorState:nodes,
-    theme      :{
-      text:{
-        italic       :'italic',
-        strikethrough:'strikethrough',
-        underline    :'underlined',
-      },
-    },
-    nodes:[
-      AutoLinkNode,
-      LinkNode,
-      ListNode,
-      ListItemNode,
-    ],
-  }
-
-  return (
-    <LexicalComposer
-      initialConfig={initialConfig}
-    >
-      <div
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-          `y-${color}`,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-      >
-        <RichTextPlugin
-          contentEditable={(
-            <ContentEditable
-              id={id}
-              className="content-editable"
-            />
-          )}
-        />
-      </div>
-    </LexicalComposer>
-  )
-}
-
-LexicalPreview.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),
-
-  /**
-   * Color of the text
-   */
-  color:PropTypes.string,
-
-  /**
-   * The nodes to render in the form of a json string
-   */
-  nodes:PropTypes.string,
-}
-
-LexicalPreview.defaultProps = {
-  color:'paragraph',
-}
-
-export default LexicalPreview

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

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

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

@@ -1,46 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.lexical-preview {
-  > .content-editable {
-    color: var(--y);
-    overflow: auto;
-
-    li:has(ol, ul) {
-      list-style-type: none;
-    }
-
-    p,
-    span,
-    strong,
-    em,
-    li {
-      &.underlined {
-        text-decoration: underline;
-
-        &.strikethrough {
-          text-decoration: underline line-through;
-        }
-      }
-
-      &.strikethrough {
-        text-decoration: line-through;
-      }
-
-      &.italic {
-        font-style: italic;
-      }
-    }
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    &::placeholder {
-      color: var(--metadata);
-    }
-  }
-}

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

@@ -1,84 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable max-nesting-depth -- required */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.expandable-lexical-preview {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: var(--gap);
-  width: 100%;
-
-  &.collapsed {
-    flex-direction: row;
-  }
-
-  > .title {
-    margin: 0;
-  }
-
-
-  > .#{bem.$base}.button {
-    align-items: center;
-    border: 1px solid var(--outline-inputs);
-    display: flex;
-  }
-
-  > .lexical-content {
-    position: relative;
-
-    > .content-editable {
-      background: var(--background-inputs);
-      border: 1px solid var(--outline-inputs);
-      border-radius: var(--theme-default-border-radius);
-      color: var(--y);
-      overflow: auto;
-      padding: var(--gap);
-      resize: var(--resize);
-
-      li:has(ol, ul) {
-        list-style-type: none;
-      }
-
-      p,
-      span,
-      strong,
-      em,
-      li {
-        &.underlined {
-          text-decoration: underline;
-
-          &.strikethrough {
-            text-decoration: underline line-through;
-          }
-        }
-
-        &.strikethrough {
-          text-decoration: line-through;
-        }
-
-        &.italic {
-          font-style: italic;
-        }
-      }
-
-      :first-child {
-        margin-top: 0;
-      }
-
-      &::placeholder {
-        color: var(--metadata);
-      }
-    }
-
-    > .#{bem.$base}.expand-button {
-      border: 1px solid var(--outline-inputs);
-      position: absolute;
-      right: 1em;
-      top: 1em;
-    }
-  }
-}