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

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,
@@ -55,6 +32,11 @@ $default-color-menu-padding: .5em .25em;
         border: $focus-border;
       }
     }
+
+    > .content-editable {
+      border-bottom-left-radius: $default-input-border-radius;
+      border-bottom-right-radius: $default-input-border-radius;
+    }
   }
 
   &.disabled {
@@ -63,6 +45,10 @@ $default-color-menu-padding: .5em .25em;
       color: var(--metadata);
       cursor: not-allowed;
     }
+
+    > .content-editable {
+      border-radius: $default-input-border-radius;
+    }
   }
 
   .color-menu-button {
@@ -93,7 +79,6 @@ $default-color-menu-padding: .5em .25em;
   > .content-editable {
     background: $default-background;
     border: $default-border;
-    border-radius: $default-input-border-radius;
     color: var(--y);
     height: var(--rows);
     outline: none;
@@ -102,10 +87,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/f/fields/SelectInput/SelectInput.js

@@ -23,6 +23,7 @@ const SelectInput = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -40,6 +41,7 @@ const SelectInput = ({
     labelColor,
     color,
     options,
+    hasDefault,
     validate,
     optional,
     description,
@@ -124,10 +126,15 @@ SelectInput.propTypes = {
   /**
    * The placeholder of the select input
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * Whether this select input has a default value(s)
+   */
+  hasDefault: PropTypes.bool
 };
 SelectInput.defaultProps = {
   disabled: false,
-  multiple: false
+  multiple: false,
+  hasDefault: false
 };
 export default /*#__PURE__*/memo(SelectInput);

package/dist/es/f/fields/SelectInput/common/Single/Single.js

@@ -1,6 +1,7 @@
 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 { useEffect } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -24,6 +25,7 @@ const Single = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -32,10 +34,19 @@ const Single = ({
   autoComplete
   // ...otherProps
 }) => {
-  const [field] = useField({
+  const [field,, helpers] = useField({
     name,
     validate
   });
+  const {
+    setValue
+  } = helpers;
+  useEffect(() => {
+    if (hasDefault && !field.value) {
+      const defaultOption = options.find(option => option.isDefault);
+      setValue(defaultOption?.value);
+    }
+  }, [hasDefault]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),

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

@@ -83,7 +83,7 @@ $default-gap: var(--gap);
 
           /* stylelint-disable-next-line max-nesting-depth -- required */
           &:disabled {
-            opacity: 0%;
+            background: transparent;
           }
         }
       }

package/dist/es/{b → g}/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -1,23 +1,17 @@
 /* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { useState, useMemo } 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 { useState } from 'react';
+import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { Button } from '@pareto-engineering/design-system';
-import "./styles.scss";
-import { ExpandButton } from "./common";
 
 // Local Definitions
-
+import { EditorInput } from "../../f";
+import { Button } from "../../b";
+import { ExpandButton } from "./common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'expandable-lexical-preview';
-
 /**
  * This is the component description.
  */
@@ -26,57 +20,43 @@ const ExpandableLexicalPreview = ({
   className: userClassName,
   style,
   nodes,
+  name,
   color,
   resize,
   title
   // ...otherProps
 }) => {
-  const initialConfig = {
-    nameSpace: id,
-    editable: false,
-    editorState: nodes,
-    theme: {
-      text: {
-        italic: 'italic',
-        strikethrough: 'strikethrough',
-        underline: 'underlined'
-      }
-    },
-    nodes: [AutoLinkNode, LinkNode, ListNode, ListItemNode]
-  };
+  const [editorState, setEditorState] = useState();
   const [isExpanded, setIsExpanded] = useState(false);
   const handleButtonClick = () => {
     setIsExpanded(!isExpanded);
   };
-  const Content = useMemo(() => /*#__PURE__*/React.createElement("div", {
-    className: "lexical-content"
-  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
-      id: id,
-      className: "content-editable"
-    })
-  }), /*#__PURE__*/React.createElement(ExpandButton, {
-    title: title,
-    onResolve: handleButtonClick
-  })), [id]);
-  return /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: initialConfig
+  return /*#__PURE__*/React.createElement(Formik, {
+    initialValues: {
+      [name]: nodes
+    }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color}`, isExpanded && 'collapsed'].filter(e => e).join(' '),
-    style: {
-      '--resize': resize,
-      ...style
-    }
+    style: style
   }, typeof title === 'string' ? /*#__PURE__*/React.createElement("p", {
     className: "title h2"
-  }, title) : title, isExpanded && /*#__PURE__*/React.createElement(Button, {
+  }, title) : title, isExpanded ? /*#__PURE__*/React.createElement(Button, {
     onClick: handleButtonClick,
     color: "background-far",
     isCompact: true
   }, /*#__PURE__*/React.createElement("span", {
     className: "ai-icon c-x x-paragraph"
-  }, "C")), !isExpanded && Content));
+  }, "C")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorInput, {
+    name: name,
+    setEditorState: setEditorState,
+    resize: resize,
+    disabled: true
+  }), /*#__PURE__*/React.createElement(ExpandButton, {
+    title: title,
+    onResolve: handleButtonClick,
+    editorState: editorState
+  }))));
 };
 ExpandableLexicalPreview.propTypes = {
   /**
@@ -106,7 +86,11 @@ ExpandableLexicalPreview.propTypes = {
   /**
    * The title for the preview.
    */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * The name used to acces the nodes
+   */
+  name: PropTypes.string.isRequired
 };
 ExpandableLexicalPreview.defaultProps = {
   color: 'paragraph',

package/dist/es/{b → g}/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js

@@ -2,10 +2,9 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
 import { $generateHtmlFromNodes } from '@lexical/html';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { Button } from '@pareto-engineering/design-system';
+import { Button } from "../../../../b";
 
 // Local Definitions
 
@@ -20,21 +19,20 @@ const ExpandButton = ({
   className: userClassName,
   style,
   onResolve,
-  title
+  title,
+  editorState
   // ...otherProps
-}) => {
-  const [editor] = useLexicalComposerContext();
-  return /*#__PURE__*/React.createElement(Button, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
-    style: style,
-    color: "background-far",
-    isCompact: true,
-    onClick: () => {
-      editor.getEditorState().read(() => {
-        const rawHtml = $generateHtmlFromNodes(editor);
-        const preview = window.open('', '_blank', 'width=600,height=600');
-        preview.document.write(`<html>
+}) => /*#__PURE__*/React.createElement(Button, {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
+  style: style,
+  color: "background-far",
+  isCompact: true,
+  onClick: () => {
+    editorState.getEditorState().read(() => {
+      const rawHtml = $generateHtmlFromNodes(editorState);
+      const preview = window.open('', '_blank', 'width=600,height=600');
+      preview.document.write(`<html>
             <title>${title || 'Preview'}</title>
             <style>
               li:has(ol, ul) {
@@ -76,11 +74,10 @@ const ExpandButton = ({
             ${rawHtml}
             <button onclick="window.close()">Close Preview</button>
             </body></html>`);
-      });
-      onResolve();
-    }
-  }, "D");
-};
+    });
+    onResolve();
+  }
+}, "D");
 ExpandButton.propTypes = {
   /**
      * The HTML id for this element

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

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  position: relative;
+  width: 100%;
+
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .#{bem.$base}.expand-button {
+    border: 1px solid var(--outline-inputs);
+    position: absolute;
+    right: 1em;
+    top: 5.5rem;
+  }
+}

package/dist/es/g/index.js

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

package/dist/es/index.js

@@ -3,5 +3,6 @@ export * from "./b";
 export * from "./c";
 export * from "./d";
 export * from "./f";
+export * from "./g";
 export * from "./utils";
 export * from "./test";

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.79",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,21 +51,29 @@
   },
   "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",
+    "@pareto-engineering/utils": "^4.0.0-alpha.79",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "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": "593a12393a1966a555d50ede309f2acfee44f48d"
 }

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',
+}