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

package/dist/es/g/DragAndDrop/common/DraggableItem/DraggableItem.js

@@ -0,0 +1,72 @@
+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 { useState } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'draggable-item';
+
+/**
+ * This is the component description.
+ */
+const DraggableItem = ({
+  id,
+  className: userClassName,
+  style,
+  as: Wrapper,
+  children,
+  index,
+  ...otherProps
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragStart = e => {
+    setIsDragging(true);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', index);
+  };
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+  const handleDragOver = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, isDragging && 'dragging'].filter(e => e).join(' '),
+    style: style,
+    onDragStart: e => handleDragStart(e),
+    onDragOver: e => handleDragOver(e),
+    onDragEnd: e => handleDragEnd(e)
+  }, otherProps), children);
+};
+DraggableItem.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 children JSX
+   */
+  children: PropTypes.node,
+  /**
+   * The html element to use to display this component.
+   */
+  as: PropTypes.string
+};
+DraggableItem.defaultProps = {
+  as: 'li'
+};
+export default DraggableItem;

package/dist/es/g/DragAndDrop/common/DraggableItem/index.js

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

package/dist/es/g/DragAndDrop/common/DraggableItem/styles.scss

@@ -0,0 +1,12 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.draggable-item {
+  cursor: move;
+  list-style: none;
+
+  &.dragging {
+    opacity: .5;
+  }
+}

package/dist/es/g/DragAndDrop/common/index.js

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

package/dist/es/g/DragAndDrop/index.js

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

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

@@ -0,0 +1,8 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.drag-and-drop {
+  margin: 0;
+  padding: 0;
+}

package/dist/es/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -0,0 +1,126 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState } from 'react';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+import { EditorInput } from "../../f";
+import { Button } from "../../b";
+import { NewWindowPortal } from "./common";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'expandable-lexical-preview';
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = ({
+  id,
+  className: userClassName,
+  style,
+  nodes,
+  name,
+  color,
+  resize,
+  pageTitle,
+  onBlock,
+  onOpen,
+  header
+  // ...otherProps
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const handleButtonClick = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  return /*#__PURE__*/React.createElement(Formik, {
+    initialValues: {
+      [name]: nodes
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isCollapsed && 'collapsed'].filter(e => e).join(' '),
+    style: style
+  }, typeof header === 'string' ? /*#__PURE__*/React.createElement("p", {
+    className: "title h2"
+  }, header) : header, isCollapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleButtonClick,
+    color: "background-far",
+    isCompact: true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon c-x x-paragraph"
+  }, "C")), /*#__PURE__*/React.createElement(NewWindowPortal, {
+    pageTitle: pageTitle,
+    onBlock: () => {
+      onBlock?.();
+      setIsCollapsed(false);
+    },
+    onOpen: () => {
+      onOpen?.();
+      setIsCollapsed(true);
+    }
+  }, /*#__PURE__*/React.createElement(EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true,
+    id: "the-bad-ass-input"
+  }), /*#__PURE__*/React.createElement(Button, {
+    id: id,
+    className: "expand-button ai-icon",
+    color: "background-far",
+    isCompact: true,
+    onClick: handleButtonClick
+  }, "D"))));
+};
+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 header for the preview component.
+   */
+  header: PropTypes.node,
+  /**
+   * The page title for the expanded preview.
+   */
+  pageTitle: PropTypes.string,
+  /**
+   * The name used to acces the nodes
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * The function to run when a new window portal can be opened
+   */
+  onBlock: PropTypes.func.isRequired
+};
+ExpandableLexicalPreview.defaultProps = {
+  color: 'paragraph',
+  resize: 'vertical'
+};
+export default ExpandableLexicalPreview;

package/dist/es/g/ExpandableLexicalPreview/common/NewWindowPortal/NewWindowPortal.js

@@ -0,0 +1,70 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import { createPortal } from 'react-dom';
+import { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+import { useTheme } from "../../../../a";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const copyStyles = (sourceDocument, targetDocument) => {
+  Array.from(sourceDocument.querySelectorAll('link[rel="stylesheet"], style')).forEach(link => {
+    targetDocument.head.appendChild(link.cloneNode(true));
+  });
+};
+/**
+ * This is the component description.
+ */
+const NewWindowPortal = ({
+  children,
+  pageTitle,
+  onBlock,
+  onOpen
+}) => {
+  const [newWindow, setNewWindow] = useState(null);
+  const container = useMemo(() => document.createElement('div'), []);
+  const {
+    userTheme = 'light'
+  } = useTheme();
+  useEffect(() => {
+    if (!container) return;
+    container.classList.add(baseClassName, 'new-window-portal', `ui-${userTheme}`);
+    const newExternalWindow = window.open('', pageTitle, 'width="100%",height="100%"');
+    if (newExternalWindow) {
+      newExternalWindow.document.title = pageTitle;
+      newExternalWindow.document.body.appendChild(container);
+      setNewWindow(newExternalWindow);
+      onOpen();
+    } else {
+      console.warn('A new window / tab could not be opened. Check your settings and/or extensions, maybe it was blocked.');
+      onBlock();
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      container.classList.remove(...container.classList);
+      newExternalWindow?.close();
+    };
+  }, [container, pageTitle, userTheme]);
+  useEffect(() => {
+    if (newWindow) {
+      copyStyles(document, newWindow.document);
+    }
+  }, [newWindow]);
+  return /*#__PURE__*/createPortal(children, container);
+};
+NewWindowPortal.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+  /**
+   * The new window page title
+   */
+  pageTitle: PropTypes.string.isRequired
+};
+NewWindowPortal.defaultProps = {
+  // someProp:false
+};
+export default NewWindowPortal;

package/dist/es/g/ExpandableLexicalPreview/common/NewWindowPortal/index.js

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

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

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.new-window-portal {
+  background-color: var(--background-far);
+  height: 100%;
+  width: 100%;
+}

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

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

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

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

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,2 @@
+export { ExpandableLexicalPreview } from "./ExpandableLexicalPreview";
+export { DragAndDrop } from "./DragAndDrop";

package/dist/es/index.js

@@ -1,8 +1,8 @@
-export * from "./r"; // Router Extensions
 export * from "./a";
 export * from "./b";
 export * from "./c";
 export * from "./d";
 export * from "./f";
+export * from "./g";
 export * from "./utils";
 export * from "./test";

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/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.9",
+  "version": "4.0.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -50,16 +50,31 @@
     "style-loader": "^3.3.2"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^4.0.0-alpha.9",
-    "@pareto-engineering/bem": "^4.0.0-alpha.9",
-    "@pareto-engineering/styles": "^4.0.0-alpha.9",
+    "@codemirror/lang-xml": "^6.0.2",
+    "@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",
+    "@pareto-engineering/bem": "^4.0.0",
+    "@pareto-engineering/styles": "^4.0.0",
+    "@pareto-engineering/utils": "^4.0.0",
+    "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.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",
     "react-relay": "^15.0.0",
@@ -67,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2101215054a810e3f9d8d82c9ff475a07e54c670"
+  "gitHead": "202ea167762422a2cb022d4ee12790136c0fea2c"
 }

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>
 

package/src/stories/a/AppContext.stories.jsx

@@ -22,7 +22,7 @@ export const Base = () => (
     config={{
       APP:{
         NAME         :'Pareto',
-        CANONICAL    :'https://hellopareto.com',
+        CANONICAL    :'https://pareto.ai',
         SUPPORT_EMAIL:'support@hellopareto.com',
         TITLE_SUFFIX :'| Pareto',
       },
@@ -30,9 +30,11 @@ export const Base = () => (
         FACEBOOK :'https://www.facebook.com/hellopareto',
         INSTAGRAM:'https://www.instagram.com/hellopareto',
         TWITTER  :'https://www.twitter.com/hellopareto',
+        THREADS  :'https://www.threads.net/@hellopareto',
+        LINKEDIN :'https://www.linkedin.com/company/hellopareto',
       },
       EXTRA:{
-        SURVEY:'https://survey.hellopareto.com',
+        SURVEY:'https://survey.pareto.ai',
       },
     }}
 

package/src/stories/a/BlurOverlay.stories.jsx

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { BlurOverlay } from 'ui'
+
+export default {
+  title        :'a/BlurOverlay',
+  component    :BlurOverlay,
+  subcomponents:{
+    // Item:BlurOverlay.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{},
+  controls:{
+    blur:{ type: 'boolean' },
+  },
+}
+
+export const Base = (args) => (
+  <BlurOverlay {...args}>
+    <div style={{
+      height         :'100px',
+      bottom         :'0',
+      minWidth       :'100%',
+      position       :'fixed',
+      backgroundColor:'blue',
+      color          :'white',
+    }}
+    >
+      Sample Foreground Component
+    </div>
+  </BlurOverlay>
+
+)
+Base.args = {
+  blur:true,
+}