@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.64

package/dist/es/f/fields/V2/ChoicesInput/common/Choice/Choice.js

@@ -1,97 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-// Local Definitions
-import { useField } from 'formik';
-import styleNames from '@pareto-engineering/bem/exports';
-const baseClassName = styleNames.base;
-const componentClassName = 'choice';
-
-/**
- * This is the component description.
- */
-const Choice = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  label,
-  labelClassName,
-  labelStyle,
-  value,
-  multiple,
-  validate,
-  disabled
-}) => {
-  const type = multiple ? 'checkbox' : 'radio';
-  const [field] = useField({
-    name,
-    validate,
-    type,
-    value
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    type: type,
-    id: id,
-    name: name
-  }, field, {
-    value: value,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    className: [labelClassName, disabled && 'disabled'].filter(e => e).join(' '),
-    style: labelStyle
-  }, label));
-};
-Choice.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 input name.
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * The input label.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * The input label class name.
-   */
-  labelClassName: PropTypes.string,
-  /**
-   * The input label styles.
-   */
-  labelStyle: PropTypes.objectOf(PropTypes.string),
-  /**
-   * The input value.
-   */
-  value: PropTypes.string.isRequired,
-  /**
-   * If the input should be multiple - checkbox
-   */
-  multiple: PropTypes.bool,
-  /**
-   * The input field validator function
-   */
-  validate: PropTypes.func,
-  /**
-   * Whether the radio or checkbox choice should be disabled
-   */
-  disabled: PropTypes.bool
-};
-export default Choice;

package/dist/es/f/fields/V2/ChoicesInput/common/Choice/index.js

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

package/dist/es/f/fields/V2/ChoicesInput/common/index.js

@@ -1 +0,0 @@
-export { Choice } from "./Choice";

package/dist/es/f/fields/V2/ChoicesInput/index.js

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

package/dist/es/f/fields/V2/ChoicesInput/styles.scss

@@ -1,79 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable selector-max-compound-selectors -- exception */
-/* stylelint-disable max-nesting-depth -- exception */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-flex-separator:calc(1em / 2) calc(.75em / 2);
-$default-transition:var(--theme-default-transition);
-$default-label-padding: .3em 1em calc(2em - .3em);
-$default-label-height: .5em;
-$default-input-border-radius: var(--theme-default-input-border-radius);
-$default-border: var(--theme-default-input-border);
-$hover-border: var(--theme-hover-input-border);
-$focus-border: var(--theme-focus-input-border);
-$default-background: var(--background-inputs);
-$disabled-background: var(--background-inputs-30);
-
-.#{bem.$base}.choices-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-
-  > .choices {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $default-flex-separator;
-
-    &.space-between {
-      justify-content: space-between;
-    }
-
-    >.choice {
-      display: flex;
-
-      input {
-        opacity: 0;
-        position: fixed;
-        visibility: none;
-        z-index: -1;
-      }
-
-      input:disabled + label {
-        background-color: $disabled-background;
-      }
-
-      > label {
-        background-color: $default-background;
-        border: $default-border;
-        border-radius: $default-input-border-radius;
-        color: var(--paragraph);
-        cursor: pointer;
-        display: block;
-        height: $default-label-height;
-        max-width: 100%;
-        padding: $default-label-padding;
-        position: relative;
-        transition: $default-transition;
-        white-space: nowrap;
-
-        &:not(.disabled) {
-          &:hover {
-            border: $hover-border;
-          }
-        }
-      }
-
-      input:checked + label {
-        background: var(--x);
-        color: var(--on-x);
-      }
-    }
-  }
-}
-

package/dist/es/f/fields/V2/EditorInput/EditorInput.js

@@ -1,192 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
-import { useFormikContext } from 'formik';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
-import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
-import { AutoLinkNode, LinkNode } from '@lexical/link';
-import { ListItemNode, ListNode } from '@lexical/list';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-
-// Local Definitions
-
-import { FormLabelV2, FormDescriptionV2 } from "../../../common";
-import { Toolbar, TreeViewPlugin } from "./common";
-const baseClassName = styleNames.base;
-const componentClassName = 'editor-input';
-
-/**
- * This is the component description.
- */
-const EditorInput = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  label,
-  // validate,
-  resize,
-  color,
-  rows,
-  optional,
-  labelColor,
-  description,
-  disabled,
-  showDebugger
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const formik = useFormikContext();
-  const setInitialValue = () => {
-    const value = formik.values[name];
-    try {
-      JSON.parse(value);
-      return value;
-    } catch {
-      const defaultValue = {
-        root: {
-          children: [{
-            children: [{
-              detail: 0,
-              format: 0,
-              mode: 'normal',
-              style: '',
-              text: '',
-              type: 'text',
-              version: 1
-            }],
-            direction: 'ltr',
-            format: '',
-            indent: 0,
-            type: 'paragraph',
-            version: 1
-          }],
-          direction: 'ltr',
-          format: '',
-          indent: 0,
-          type: 'root',
-          version: 1
-        }
-      };
-      defaultValue.root.children[0].children[0].text = value;
-      return JSON.stringify(defaultValue);
-    }
-  };
-  const onChange = state => {
-    formik.setValues({
-      ...formik.values,
-      [name]: JSON.stringify(state)
-    });
-  };
-  const initialConfig = {
-    nameSpace: name,
-    editable: !disabled,
-    editorState: setInitialValue(),
-    theme: {
-      text: {
-        italic: 'italic',
-        strikethrough: 'strikethrough',
-        underline: 'underlined'
-      }
-    },
-    nodes: [AutoLinkNode, LinkNode, ListNode, ListItemNode]
-  };
-  return /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--resize': resize,
-      '--rows': `${rows}em`
-    }
-  }, /*#__PURE__*/React.createElement(FormLabelV2, {
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, label), !disabled && /*#__PURE__*/React.createElement(Toolbar, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
-      id: name,
-      className: "content-editable"
-    })
-  }), /*#__PURE__*/React.createElement(OnChangePlugin, {
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(FormDescriptionV2, {
-    className: "s-1",
-    description: description,
-    name: name
-  }), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null)));
-};
-EditorInput.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 input name (html - and Formik state)
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * The input label
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * The input value validator function
-   */
-  // validate:PropTypes.func,
-
-  /**
-   * The number of rows int the text area
-   */
-  rows: PropTypes.number,
-  /**
-   * Color of the text
-   */
-  color: PropTypes.string,
-  /**
-   * Label base color
-   */
-  labelColor: PropTypes.string,
-  /**
-   * Text area description
-   */
-  description: PropTypes.string,
-  /**
-   * Whether the text area should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-  * Whether the input is optional or not
-  */
-  optional: PropTypes.bool,
-  /**
-   * The resize property of the text area
-   */
-  resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical'])
-};
-EditorInput.defaultProps = {
-  rows: 10,
-  disabled: false,
-  color: 'paragraph',
-  resize: 'vertical'
-};
-export default /*#__PURE__*/memo(EditorInput);

package/dist/es/f/fields/V2/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/dist/es/f/fields/V2/EditorInput/common/TreeViewPlugin.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { TreeView } from '@lexical/react/LexicalTreeView';
-const TreeViewPlugin = () => {
-  const [editor] = useLexicalComposerContext();
-  return /*#__PURE__*/React.createElement(TreeView, {
-    viewClassName: "tree-view-output",
-    editor: editor
-  });
-};
-export default TreeViewPlugin;

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

@@ -1,2 +0,0 @@
-export { default as Toolbar } from "./Toolbar";
-export { default as TreeViewPlugin } from "./TreeViewPlugin";

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

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