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

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -0,0 +1,113 @@
+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.1.1-alpha.2 */
+import * as React from 'react';
+import { Formik, Form } from 'formik';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { Button } from "../../../../b";
+import "./styles.scss";
+
+// Local Definitions
+
+import { Section } from "./common";
+const baseClassName = styleNames.base;
+const componentClassName = 'renderer';
+
+/**
+ * This is the component description.
+ */
+const Renderer = ({
+  id,
+  className: userClassName,
+  style,
+  formData,
+  onSave
+  // ...otherProps
+}) => {
+  const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
+  const [sectionHistory, setSectionHistory] = useState([]);
+  const initialValues = formData.sections.reduce((acc, section) => {
+    section.inputs.forEach(input => {
+      acc[input.name] = '';
+    });
+    return acc;
+  }, {});
+  const handleSubmit = values => {
+    const currentSection = formData.sections[currentSectionIndex];
+    // by default, 'next' section is the immediate section after the current one
+    let nextSectionIndex = currentSectionIndex + 1;
+
+    // Any other value is either submit or an index to a section
+    if (currentSection.navigation.nextSection !== 'next') {
+      nextSectionIndex = currentSection.navigation.nextSection === 'submit' ? formData.sections.length // submit
+      : parseInt(currentSection.navigation.nextSection, 10); // go to specific section
+    }
+    if (nextSectionIndex >= formData.sections.length) {
+      // submit
+      onSave(values);
+    } else {
+      // Record index history to navigate back
+      setSectionHistory([...sectionHistory, currentSectionIndex]);
+      // go to evaluated next section
+      setCurrentSectionIndex(nextSectionIndex);
+    }
+  };
+  const handlePrevious = () => {
+    if (sectionHistory.length > 0) {
+      // get the last index of array(the immediate last section)
+      const previousSectionIndex = sectionHistory.pop();
+      // set the immediate last section indx as current
+      setCurrentSectionIndex(previousSectionIndex);
+      setSectionHistory([...sectionHistory]);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(Formik, {
+    initialValues: initialValues,
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/React.createElement(Form, null, formData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
+    key: `${section.title}`
+  }, section))), /*#__PURE__*/React.createElement("div", {
+    className: "navigator-container"
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: "interactive",
+    isGradient: true,
+    isGhost: true,
+    onClick: handlePrevious,
+    disabled: sectionHistory.length === 0
+  }, "Previous"), /*#__PURE__*/React.createElement(Button, {
+    color: "interactive",
+    isGradient: true,
+    type: "submit"
+  }, formData.sections[currentSectionIndex].navigation.nextSection === 'submit' ? 'Submit' : 'Next')))));
+};
+Renderer.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
+   */
+  formData: PropTypes.shape({
+    formTitle: PropTypes.string.isRequired,
+    formDescription: PropTypes.string.isRequired,
+    sections: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any))
+  })
+};
+Renderer.defaultProps = {
+  // someProp:false
+};
+export default Renderer;

package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -0,0 +1,52 @@
+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.1.1-alpha.2 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+// Local Definitions
+
+import { FormInput } from "../../../../../../f";
+import { ExpandableLexicalPreview } from "../../../../..";
+import styleNames from '@pareto-engineering/bem/exports';
+const baseClassName = styleNames.base;
+const componentClassName = 'section';
+
+/**
+ * This is the component description.
+ */
+const Section = ({
+  id,
+  className: userClassName,
+  style,
+  title,
+  description,
+  inputs
+  // ...otherProps
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
+  nodes: description,
+  name: "instructions"
+}), inputs.map(input => /*#__PURE__*/React.createElement(FormInput, _extends({
+  key: input.name
+}, input))));
+Section.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)
+};
+Section.defaultProps = {
+  // someProp:false
+};
+export default Section;

package/dist/es/g/FormBuilder/common/Renderer/common/Section/index.js

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

package/dist/es/g/FormBuilder/common/Renderer/common/index.js

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

package/dist/es/g/FormBuilder/common/Renderer/index.js

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

package/dist/es/g/FormBuilder/common/Renderer/styles.scss

@@ -0,0 +1,15 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.renderer {
+  > form {
+    > .navigator-container {
+      display: flex;
+      gap: var(--gap);
+      margin-top: $default-margin;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export { Builder } from "./Builder";
+export { Renderer } from "./Renderer";

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

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

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

@@ -0,0 +1,7 @@
+// /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// @use "@pareto-engineering/bem";
+
+// .#{bem.$base}.form-builder{
+
+// }

package/dist/es/g/index.js

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

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.1-alpha.1",
   "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.1-alpha.1",
+    "@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": "210d286552a57ff9baed966f25acd5f788410f3d"
 }

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

package/src/stories/a/Conversation.stories.jsx

@@ -21,63 +21,32 @@ export const Base = () => {
   const conversations = [
     {
       message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
       message:'Hi Morgan! Here is the database we prepared for you.',
-      sender :'CAMILLE',
+      sender :'Camille',
       from   :'ours',
     },
     {
-      message:'Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
+      message:'That looks amazing',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
-      message:'Hi Morgan! Here is the spreadsheet we prepared for you.',
-      sender :'CAMILLE',
-      from   :'ours',
-    },
-  ]
-
-  return (
-    <Conversation>
-      {conversations.map((conversation) => (
-        <Conversation.Message key={conversation.message} {...conversation} />
-      ))}
-    </Conversation>
-  )
-}
-
-export const WithTriangle = () => {
-  const conversations = [
-    {
-      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
-      from   :'theirs',
-    },
-    {
-      message:'Hi Morgan! Here is the database we prepared for you.',
-      sender :'CAMILLE',
-      from   :'ours',
-    },
-    {
-      message:'Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
+      message:'Thank you for the great work, can we also get this information in a spreadsheet?',
       from   :'theirs',
     },
     {
       message:'Hi Morgan! Here is the spreadsheet we prepared for you.',
-      sender :'CAMILLE',
+      sender :'Camille',
       from   :'ours',
     },
   ]
 
   return (
-    <Conversation
-      hasTriangle
-    >
+    <Conversation>
       {conversations.map((conversation) => (
         <Conversation.Message key={conversation.message} {...conversation} />
       ))}
@@ -89,24 +58,24 @@ export const WithAttachment = () => {
   const conversations = [
     {
       message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
       message        :'Hi Morgan! Here is the database we prepared for you.',
-      sender         :'CAMILLE',
+      sender         :'Camille',
       from           :'ours',
       attachment     :'spreadsheet.xlsx',
       attachmentColor:'main4',
     },
     {
       message:'Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
       message        :'Hi Morgan! Here is the spreadsheet we prepared for you.',
-      sender         :'CAMILLE',
+      sender         :'Camille',
       from           :'ours',
       attachment     :'spreadsheet.xlsx',
       attachmentColor:'main4',

package/src/stories/a/DatePicker.stories.jsx

@@ -0,0 +1,96 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { DatePicker } from 'ui'
+
+export default {
+  title     :'a/DatePicker',
+  component :DatePicker,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    mode:{
+      control:{
+        type   :'select',
+        options:['single', 'multiple', 'range'],
+      },
+    },
+    dateFormat:{
+      control:{
+        type:'text',
+      },
+    },
+    showDebugger:{
+      control:{
+        type:'boolean',
+      },
+    },
+  },
+}
+
+const today = new Date('2024-03-01T12:00:00Z')
+
+const Template = (args) => {
+  const [value, setValue] = useState()
+
+  return (
+    <DatePicker
+      selected={value}
+      setSelection={setValue}
+      {...args}
+      today={today}
+    />
+  )
+}
+
+const TimeTemplate = ({ timeMode, ...args }) => {
+  const [value, setValue] = useState()
+  const [timeFrom, setTimeFrom] = useState('00:00')
+  const [timeTo, setTimeTo] = useState('23:59')
+
+  return (
+    <DatePicker
+      selected={value}
+      setSelection={setValue}
+      timeFrom={timeFrom}
+      setTimeFrom={setTimeFrom}
+      timeTo={timeMode === 'multiple' ? timeTo : undefined}
+      setTimeTo={timeMode === 'multiple' ? setTimeTo : undefined}
+      today={today}
+      {...args}
+    />
+  )
+}
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const MultipleSelection = Template.bind({})
+MultipleSelection.args = {
+  mode:'multiple',
+}
+
+export const RangeSelection = Template.bind({})
+RangeSelection.args = {
+  mode:'range',
+}
+
+export const TimeSelection = TimeTemplate.bind({})
+TimeSelection.args = {
+  mode    :'single',
+  timeMode:'single',
+}
+
+export const TimeRangeSelection = TimeTemplate.bind({})
+TimeRangeSelection.args = {
+  mode    :'range',
+  timeMode:'multiple',
+}
+
+export const WithCustomFooter = Template.bind({})
+WithCustomFooter.args = {
+  customFooter:<div>Custom footer</div>,
+}