@pareto-engineering/design-system 4.0.0 → 4.1.0

package/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -0,0 +1,192 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-list-width: var(--action-button-width, 18rem);
+
+.#{bem.$base}.input-builder {
+  border: var(--theme-default-border-style) var(--ui-lines);
+  border-radius: calc(var(--theme-default-border-radius) / 2);
+  display: flex;
+  margin-top: $default-margin;
+  padding: $default-padding;
+
+  > .drag-icon {
+    margin-right: $default-margin;
+  }
+
+  > .input-options-container {
+    flex: auto;
+
+    > .controls-container {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      .#{bem.$base}.select-input {
+        flex: .3;
+      }
+
+      >.controls {
+        display: flex;
+        gap: var(--gap);
+
+        /* stylelint-disable selector-max-compound-selectors -- required */
+        > .is-required {
+          display: flex;
+        }
+
+        /* stylelint-disable selector-max-universal -- required */
+        > * {
+          height: fit-content;
+        }
+
+        > button {
+          background-color: transparent;
+          border: 0;
+          cursor: pointer;
+
+          /* stylelint-disable max-nesting-depth -- required */
+          > .ai-icon,
+          .icon {
+            font-size: calc(var(--s1) * 1rem);
+          }
+        }
+
+        > .actions {
+          position: relative;
+
+          > button {
+            background-color: transparent;
+            border: 0;
+            cursor: pointer;
+          }
+
+          > .#{bem.$base}.popover {
+            background-color: var(--background-cards);
+            border: var(--theme-default-border-style) var(--main2);
+            border-radius: calc(var(--theme-default-border-radius) / 2);
+            cursor: default;
+            padding: $default-padding;
+            width: $default-list-width;
+
+            > p {
+              margin: 0;
+            }
+
+            > ul {
+              list-style: none;
+              margin: 0;
+              padding: 0;
+              white-space: nowrap;
+
+              > .option {
+                cursor: pointer;
+                padding-block: calc($default-padding / 4);
+
+                &:not(.with-check-mark) {
+                  padding-inline: $default-padding;
+                }
+
+                > button {
+                  background: transparent;
+                  border: 0;
+                  color: var(--paragraph);
+                  cursor: pointer;
+                  font-size: calc(var(--s0) * .875rem);
+                  text-align: left;
+                  width: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    > .input-name-description {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      margin-bottom: $default-margin;
+    }
+
+    > .input-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+
+      > p {
+        margin: 0;
+      }
+
+      > .option-container {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--gap) / 2);
+
+        > .input-icon-sample {
+          border: var(--theme-default-border-style) var(--outline-inputs);
+          border-radius: var(--theme-default-border-radius);
+          cursor: default;
+          height: 1.6rem;
+          width: 1.6rem;
+
+          &.checkbox {
+            border-radius: calc(var(--theme-default-border-radius) / 4);
+          }
+        }
+
+
+        > .#{bem.$base}.text-input {
+          flex: .5;
+        }
+
+        > .#{bem.$base}.select-input {
+          flex: .3;
+        }
+
+        > button {
+          background-color: transparent;
+          border: 0;
+          color: var(--ui-icons);
+          cursor: pointer;
+        }
+      }
+
+      >.add-option-cta {
+        --color: var(--interactive);
+        --border-color: var(--interactive);
+        align-items: center;
+        align-self: flex-start;
+        background-color: transparent;
+        border: 0;
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        gap: calc(var(--gap) / 1.5);
+        padding: 0;
+        transition: all .2s;
+
+        &:hover {
+          --color: var(--soft-interactive);
+          --border-color: var(--soft-interactive);
+        }
+
+        > .icon-container {
+          align-items: center;
+          border: 2px solid var(--border-color);
+          border-radius: 50%;
+          display: flex;
+          height: 1.6rem;
+          justify-content: center;
+          width: 1.6rem;
+        }
+      }
+    }
+  }
+}
+
+

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

@@ -0,0 +1,120 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { Form, FieldArray, useFormikContext } from 'formik';
+import PropTypes from 'prop-types';
+
+// Local Definitions
+
+import styleNames from '@pareto-engineering/bem/exports';
+import { TextInput, EditorInput } from "../../../../../../f";
+import { DragAndDrop } from "../../../../..";
+import { InputBuilder } from "../InputBuilder";
+const baseClassName = styleNames.base;
+const componentClassName = 'section';
+
+/**
+ * This is the component description.
+ */
+const Section = ({
+  id,
+  className: userClassName,
+  style,
+  index
+  // ...otherProps
+}) => {
+  const {
+    values,
+    setFieldValue
+  } = useFormikContext();
+  const section = values.sections[index];
+  const handleDeleteInput = inputIndex => {
+    const newInputs = [...section.inputs];
+    newInputs.splice(inputIndex, 1);
+    setFieldValue(`sections.${index}.inputs`, newInputs);
+  };
+  const handleCopyInput = inputIndex => {
+    const inputToCopy = section.inputs[inputIndex];
+    const newInputs = [...section.inputs, {
+      ...inputToCopy,
+      name: `section_${index}_input_${section.inputs.length}`
+    }];
+    setFieldValue(`sections.${index}.inputs`, newInputs);
+  };
+  const [draggableInputs, setDraggableInputs] = useState([]);
+  const {
+    inputs
+  } = section;
+  useEffect(() => {
+    const items = inputs.map((input, indx) => ({
+      Content: /*#__PURE__*/React.createElement(InputBuilder, {
+        key: input.name,
+        sectionIndex: index,
+        inputIndex: indx,
+        onDelete: handleDeleteInput,
+        onCopy: handleCopyInput
+      }),
+      identifier: input.name
+    }));
+    setDraggableInputs(items);
+  }, [inputs.length, index]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "h4"
+  }, index === 0 ? 'Form title' : `Section ${index + 1}`), /*#__PURE__*/React.createElement(TextInput, {
+    name: `sections.${index}.title`,
+    placeholder: `Title of the ${index === 0 ? 'form' : 'section'}`
+  }), /*#__PURE__*/React.createElement(EditorInput, {
+    name: `sections.${index}.description`,
+    label: `${index === 0 ? 'Form' : 'Section'} description`
+  }), /*#__PURE__*/React.createElement(FieldArray, {
+    name: `sections.${index}.inputs`
+  }, ({
+    push
+  }) => /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(DragAndDrop, {
+    items: draggableInputs,
+    onOrderChange: reOrderedItems => {
+      setDraggableInputs(reOrderedItems);
+      const ids = reOrderedItems.map(e => e.identifier);
+      setFieldValue(`sections.${index}.orderedInputDragIds`, ids);
+    },
+    key: draggableInputs.length
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "add-question-cta",
+    onClick: () => push({
+      name: `section_${index}_input_${section.inputs.length}`,
+      label: '',
+      type: 'text',
+      required: false,
+      options: [],
+      conditionalLogic: null,
+      description: ''
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon-container"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon "
+  }, "+")), "Add question"))));
+};
+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/Builder/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/Builder/common/index.js

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

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

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

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

@@ -0,0 +1,106 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.builder {
+  > form {
+    > .section-footer {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-top: calc($default-margin * 1.5);
+
+
+      >.add-section-cta {
+        --color: var(--interactive);
+        --border-color: var(--interactive);
+        align-items: center;
+        background-color: transparent;
+        border: 0;
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        gap: calc(var(--gap) / 1.5);
+        padding: 0;
+        transition: all .2s;
+
+        &:hover {
+          --color: var(--soft-interactive);
+          --border-color: var(--soft-interactive);
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > .icon-container {
+          align-items: center;
+          border: 2px solid var(--border-color);
+          border-radius: 50%;
+          display: flex;
+          height: 1.6rem;
+          justify-content: center;
+          width: 1.6rem;
+        }
+      }
+
+      > .section-navigation {
+        align-items: center;
+        display: flex;
+        flex: .4;
+        gap: var(--gap);
+
+        > .#{bem.$base}.select-input {
+          flex: auto;
+        }
+      }
+    }
+    > .#{bem.$base}.section {
+      border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
+
+      > .#{bem.$base}.editor-input {
+        margin-top: $default-margin;
+      }
+
+      > form {
+        /* stylelint-disable selector-max-compound-selectors -- required */
+        > .add-question-cta {
+          align-items: center;
+          background-color: transparent;
+          border: 0;
+          color: var(--hard-interactive);
+          cursor: pointer;
+          display: flex;
+          gap: var(--gap);
+          margin-block: calc($default-margin * 1.5);
+          margin-left: auto;
+          padding: 0;
+          transition: all .2s;
+
+          /* stylelint-disable-next-line max-nesting-depth -- required */
+          &:hover {
+            color: var(--interactive);
+
+            /* stylelint-disable max-nesting-depth -- required */
+            > .icon-container {
+              background-color: var(--interactive);
+            }
+          }
+
+          > .icon-container {
+            align-items: center;
+            background-color: var(--hard-interactive);
+            border-radius: 50%;
+            display: flex;
+            height: 1.6rem;
+            justify-content: center;
+            width: 1.6rem;
+
+            > .icon {
+              color: var(--on-interactive);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,7 +59,7 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^4.0.0",
+    "@pareto-engineering/assets": "^4.1.0",
     "@pareto-engineering/bem": "^4.0.0",
     "@pareto-engineering/styles": "^4.0.0",
     "@pareto-engineering/utils": "^4.0.0",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "202ea167762422a2cb022d4ee12790136c0fea2c"
+  "gitHead": "2f5a8c44673dbc2a2cfed253b643a11edeaf4821"
 }

package/src/stories/a/ToggleSwitch.stories.jsx

@@ -17,6 +17,12 @@ export default {
   },
 }
 
-export const Base = () => (
-  <ToggleSwitch />
+export const Single = () => <ToggleSwitch />
+
+export const Multiple = () => (
+  <>
+    <ToggleSwitch inputId="option1" />
+    <ToggleSwitch inputId="option2" />
+    <ToggleSwitch inputId="option3" />
+  </>
 )