@pareto-engineering/design-system 4.0.0-alpha.69 → 4.0.0-alpha.72

package/dist/es/b/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -0,0 +1,115 @@
+/* @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 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
+
+const baseClassName = styleNames.base;
+const componentClassName = 'expandable-lexical-preview';
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = ({
+  id,
+  className: userClassName,
+  style,
+  nodes,
+  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 [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
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isExpanded && 'collapsed'].filter(e => e).join(' '),
+    style: {
+      '--resize': resize,
+      ...style
+    }
+  }, typeof title === 'string' ? /*#__PURE__*/React.createElement("p", {
+    className: "title h2"
+  }, 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));
+};
+ExpandableLexicalPreview.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,
+  /**
+   * The resize property of the textarea
+   */
+  resize: PropTypes.string,
+  /**
+   * The title for the preview.
+   */
+  title: PropTypes.string
+};
+ExpandableLexicalPreview.defaultProps = {
+  color: 'paragraph',
+  resize: 'vertical'
+};
+export default ExpandableLexicalPreview;

package/dist/es/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* 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';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'expand-button';
+
+/**
+ * This is the component description.
+ */
+const ExpandButton = ({
+  id,
+  className: userClassName,
+  style,
+  onResolve,
+  title
+  // ...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>
+            <title>${title || 'Preview'}</title>
+            <style>
+              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: #abadb3;
+              }
+            </style>
+            <body>
+            <style></style>
+            ${rawHtml}
+            <button onclick="window.close()">Close Preview</button>
+            </body></html>`);
+      });
+      onResolve();
+    }
+  }, "D");
+};
+ExpandButton.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)
+};
+ExpandButton.defaultProps = {
+  // color: 'paragraph',
+  // resize: 'vertical',
+};
+export default ExpandButton;

package/dist/es/b/ExpandableLexicalPreview/common/ExpandButton/index.js

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

package/dist/es/b/ExpandableLexicalPreview/common/index.js

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

package/dist/es/b/ExpandableLexicalPreview/index.js

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

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

@@ -0,0 +1,84 @@
+/* @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/b/Logo/Logo.js

@@ -65,7 +65,6 @@ const Logo = ({
     // {...otherProps}
   });
 };
-
 Logo.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/b/Title/Title.js

@@ -95,7 +95,6 @@ Title.propTypes = {
   subtitleProps: PropTypes.object
   /* eslint-enable react/forbid-prop-types */
 };
-
 Title.defaultProps = {
   headingAs: 'h1',
   subtitleAs: 'p'

package/dist/es/b/index.js

@@ -4,4 +4,5 @@ export { Page } from "./Page";
 export { SocialMediaButton } from "./SocialMediaButton";
 export { ThemeSelector } from "./ThemeSelector";
 export { Title } from "./Title";
-export { Card } from "./Card";
+export { Card } from "./Card";
+export { ExpandableLexicalPreview } from "./ExpandableLexicalPreview";

package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -37,14 +37,12 @@ const SocialMediaShareButton = ({
       link: `https://www.facebook.com/sharer/sharer.php?u=${link}`
       // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
     },
-
     twitter: {
       icon: 't',
       link: `https://twitter.com/intent/tweet?url=${link}`
       // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
     }
   };
-
   return /*#__PURE__*/React.createElement("a", {
     href: defaultsMap[type].link,
     target: "_blank",

package/dist/es/c/index.js

@@ -1,4 +1,3 @@
-export { ContentSlides, useContentSlides } from "./ContentSlides";
 export { Shortener } from "./Shortener";
 export { SocialMediaShareButton } from "./SocialMediaShareButton";
 export { Modal } from "./Modal";

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

@@ -19,7 +19,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 // Local Definitions
 
 import { FormLabel, FormDescription } from "../../common";
-import { Toolbar, TreeViewPlugin } from "./common";
+import { Toolbar, TreeViewPlugin, StopPropagationPlugin } from "./common";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'editor-input';
@@ -41,7 +41,8 @@ const EditorInput = ({
   labelColor,
   description,
   disabled,
-  showDebugger
+  showDebugger,
+  stopPropagationKeys
   // ...otherProps
 }) => {
   const formik = useFormikContext();
@@ -120,7 +121,9 @@ const EditorInput = ({
     })
   }), /*#__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(FormDescription, {
+  }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, null), stopPropagationKeys && /*#__PURE__*/React.createElement(StopPropagationPlugin, {
+    stopPropagationKeys: stopPropagationKeys
+  }), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name
@@ -179,7 +182,15 @@ EditorInput.propTypes = {
   /**
    * The resize property of the text area
    */
-  resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical'])
+  resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
+  /**
+   * Whether to show the debugger or not
+   */
+  showDebugger: PropTypes.bool,
+  /**
+   * Map to stop propagation of the given keys
+   */
+  stopPropagationKeys: PropTypes.arrayOf(PropTypes.string)
 };
 EditorInput.defaultProps = {
   rows: 10,

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

@@ -0,0 +1,23 @@
+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;

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

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

package/dist/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -22,6 +22,7 @@ const QueryCombobox = ({
   name,
   label,
   labelColor,
+  getTagColor,
   color,
   optional,
   description,
@@ -98,6 +99,7 @@ const QueryCombobox = ({
     name,
     label,
     labelColor,
+    getTagColor,
     optional,
     description,
     setValue,
@@ -201,7 +203,15 @@ QueryCombobox.propTypes = {
    * Whether to prompt the user to create a new option if the search input
    * does not match any of the options
    */
-  promptCreateNewOption: PropTypes.bool
+  promptCreateNewOption: PropTypes.bool,
+  /**
+   * The placeholder text for the input
+   * */
+  placeholder: PropTypes.string,
+  /**
+   * The function to get the color of the tag
+   * */
+  getTagColor: PropTypes.func
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -35,6 +35,7 @@ const MultipleCombobox = ({
   labelColor,
   name,
   optional,
+  getTagColor,
   options: items,
   getOptions,
   setValue,
@@ -96,7 +97,6 @@ const MultipleCombobox = ({
             ...changes,
             isOpen: true // keep the menu open after selection.
           };
-
         default:
           break;
       }
@@ -178,7 +178,7 @@ const MultipleCombobox = ({
       removeSelectedItem(selectedItem);
     },
     isCompact: true,
-    color: color
+    color: getTagColor ? getTagColor(selectedItem) : color
   }, /*#__PURE__*/React.createElement("span", null, selectedItem.label), /*#__PURE__*/React.createElement("span", {
     className: "icon close"
   }, "Y"))))), /*#__PURE__*/React.createElement("div", {
@@ -287,7 +287,36 @@ MultipleCombobox.propTypes = {
   /**
    * The placeholder text for the input
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * The function to set the options of the custom select input
+   */
+  setOptions: PropTypes.func,
+  /**
+   * Whether to prompt the user to create a new option if the search input
+   * does not match any of the options
+   */
+  promptCreateNewOption: PropTypes.bool,
+  /**
+   * The function to get the color of the tag
+   */
+  getTagColor: PropTypes.func,
+  /**
+   * The color of the label
+   */
+  labelColor: PropTypes.string,
+  /**
+   * The function to validate the input
+   */
+  validate: PropTypes.func,
+  /**
+   * Whether to allow multiple items selection
+   */
+  multiple: PropTypes.bool,
+  /**
+   * The variable to be used to search the data
+   */
+  searchVariable: PropTypes.string
 };
 MultipleCombobox.defaultProps = {
   // someProp: false

package/dist/es/index.js

@@ -1,4 +1,3 @@
-export * from "./r"; // Router Extensions
 export * from "./a";
 export * from "./b";
 export * from "./c";

package/dist/es/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -48,7 +48,6 @@ const node /*: ConcreteRequest*/ = function () {
       "name": "QueryLoaderHelloQuery",
       "selections": v0 /*: any*/
     },
-
     "params": {
       "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
       "id": null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.69",
+  "version": "4.0.0-alpha.72",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -50,11 +50,13 @@
     "style-loader": "^3.3.2"
   },
   "dependencies": {
+    "@codemirror/lang-xml": "^6.0.2",
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.69",
+    "@pareto-engineering/assets": "^4.0.0-alpha.72",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.68",
-    "@pareto-engineering/utils": "^4.0.0-alpha.46",
+    "@pareto-engineering/styles": "^4.0.0-alpha.72",
+    "@pareto-engineering/utils": "^4.0.0-alpha.72",
+    "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
@@ -71,5 +73,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2aca4c35daf21d2fe589d9406ca43952c6519bc0"
+  "gitHead": "68d099be75ce95a8ff22f53015d1a722af04e8b5"
 }

package/src/stories/StyleGuide/ai-icons.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta,  } from '@storybook/addon-docs/blocks';
+
+import {
+  charList
+} from './helpers';
+
+<Meta title="StyleGuide/Icons/ai" />
+
+# AI Icons
+
+The icons are defined in [@pareto-engineering/assets/fonts/ai-icons.woff](https://github.com/HelloPareto/front/tree/development/packages/assets/fonts),
+imported and configured in [@pareto-engineering/styles/src/mixins/_font.scss](https://github.com/HelloPareto/front/blob/development/packages/styles/src/mixins/_font.scss).
+
+To add more fonts, connect to [glyphter](https://glyphter.com).
+
+<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>
+{ charList.map(letter =>
+<div>
+<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>
+{ letter }
+</div>
+<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'ai-icons', 'font-size':'2em' }}>
+{ letter }
+</div>
+</div>
+) }
+</div>

package/src/stories/StyleGuide/icons.stories.mdx

@@ -1,29 +1,29 @@
 import { Meta, IconGallery, IconItems } from '@storybook/addon-docs/blocks';
 
-import { 
+import {
   charList
 } from './helpers';
 
-<Meta title="StyleGuide/Icons" />
-
-
-# Icons                                                                                                                             
-                                                                                                                                    
-The icons are defined in [@pareto-engineering/assets/fonts/icons.woff](https://github.com/HelloPareto/assets/tree/master/fonts),              
-imported in [@pareto-engineering/styles/src/stylebook.scss](https://github.com/HelloPareto/styles/blob/master/src/stylebook.scss).            
-                                                                                                                                    
-To add more fonts, connect to [glyphter](https://glyphter.com).                                                                     
-                                                                                                                                    
-<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>                                 
-{ charList.map(letter =>                                                                                                          
-<div>                                                                                                                               
-<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>               
-{ letter }                                                                                                                          
-</div>                                                                                                                              
-<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'icons', 'font-size':'2em' }}>       
-{ letter }                                                                                                                          
-</div>                                                                                                                              
-</div>                                                                                                                              
-) }                                                                                                                                 
+<Meta title="StyleGuide/Icons/all" />
+
+
+# Icons
+
+The icons are defined in [@pareto-engineering/assets/fonts/icons.woff](https://github.com/HelloPareto/assets/tree/master/fonts),
+imported in [@pareto-engineering/styles/src/stylebook.scss](https://github.com/HelloPareto/styles/blob/master/src/stylebook.scss).
+
+To add more fonts, connect to [glyphter](https://glyphter.com).
+
+<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>
+{ charList.map(letter =>
+<div>
+<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>
+{ letter }
+</div>
+<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'icons', 'font-size':'2em' }}>
+{ letter }
+</div>
+</div>
+) }
 </div>