@pareto-engineering/design-system 4.2.1 → 4.2.3

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

@@ -0,0 +1,73 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+
+.#{bem.$base}.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+
+
+  > p {
+    color: var(--y);
+    margin: 0;
+  }
+
+  > .#{bem.$base}.description {
+    height: auto;
+  }
+
+  > .#{bem.$base}.form-label {
+    align-items: center;
+    border: var(--theme-default-border-style) var(--ui-lines);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    color: var(--heading);
+    cursor: pointer;
+    display: flex;
+    gap: calc(var(--gap) / 2);
+    padding: $default-padding;
+    width: fit-content;
+
+    &:has(>input:disabled) {
+      --icon-color: var(--hard-disabled);
+      color: var(--hard-disabled);
+      cursor: not-allowed;
+    }
+
+    &:has(>input:not(:disabled)) {
+      &:hover,
+      &:active {
+        border: var(--theme-hover-input-border);
+      }
+    }
+
+    > .ai-icon {
+      color: var(--icon-color, var(--interactive));
+      font-size: calc(var(--s2) * 1rem);
+    }
+
+    > input[type="file"] {
+      display: none;
+    }
+  }
+
+  > .attached-files {
+    display: flex;
+    gap: var(--gap);
+
+    > p {
+      margin: 0;
+    }
+
+    > .files {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--gap);
+      width: 100%;
+    }
+  }
+}

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

@@ -8,4 +8,5 @@ export { QuerySelect } from "./QuerySelect";
 export { Checkbox } from "./Checkbox";
 export { QueryChoices } from "./QueryChoices";
 export { LinkInput } from "./LinkInput";
-export { EditorInput } from "./EditorInput";
+export { EditorInput } from "./EditorInput";
+export { FileUpload, fileUploadOptions } from "./FileUpload";

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { FieldArray, useFormikContext } from 'formik';
 import styleNames from '@pareto-engineering/bem/exports';
-import { SelectInput, TextInput } from "../../../../../../f";
+import { ChoicesInput, SelectInput, TextInput, integerAndGreaterThanZero, fileUploadOptions } from "../../../../../../f";
 import { ToggleSwitch } from "../../../../../../a";
 import "./styles.scss";
 
@@ -13,6 +13,9 @@ import "./styles.scss";
 import { ActionsContainer } from "../ActionsContainer";
 const baseClassName = styleNames.base;
 const componentClassName = 'input-builder';
+const getToggleSwitchStyles = condition => condition ? {
+  '--slider-background-color': 'var(--disabled)'
+} : {};
 
 /**
  * This is the component description.
@@ -35,11 +38,6 @@ const InputBuilder = ({
   const handleToggleRequired = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
   };
-  const toggleSwitchStyles = {
-    ...(!input?.required ? {
-      '--slider-background-color': 'var(--disabled)'
-    } : {})
-  };
   const [hasDescription, setHasDescription] = useState(false);
 
   // TODO: handle nav logic
@@ -59,6 +57,10 @@ const InputBuilder = ({
     } = e.target;
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.label`, value);
   };
+  const isFile = input?.type === 'file';
+  const handleToggleShowSpecificFileTypes = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
+  };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -92,6 +94,9 @@ const InputBuilder = ({
     }, {
       value: 'choices',
       label: 'Radio buttons'
+    }, {
+      value: 'file',
+      label: 'File upload'
     }]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
@@ -107,7 +112,7 @@ const InputBuilder = ({
   }, "Required"), /*#__PURE__*/React.createElement(ToggleSwitch, {
     handleOnChange: handleToggleRequired,
     checked: input?.required,
-    style: toggleSwitchStyles,
+    style: getToggleSwitchStyles(!input?.required),
     inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
   })), /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
     className: `option ${hasDescription ? 'with-check-mark' : ''}`
@@ -168,7 +173,29 @@ const InputBuilder = ({
     className: "icon"
   }, "+")), /*#__PURE__*/React.createElement("span", {
     className: "text x-paragraph c-x"
-  }, "Add Option"))))));
+  }, "Add Option")))), isFile && /*#__PURE__*/React.createElement("div", {
+    className: "input-file-options"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    label: "Maximum number of files",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.maxCount`,
+    placeholder: "1",
+    type: "number",
+    min: "0",
+    validate: integerAndGreaterThanZero
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "specific-file-types"
+  }, /*#__PURE__*/React.createElement(ToggleSwitch, {
+    handleOnChange: handleToggleShowSpecificFileTypes,
+    checked: input?.showSpecificFileTypes,
+    style: getToggleSwitchStyles(!input?.showSpecificFileTypes),
+    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_show_specific_file_types`
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "s0"
+  }, "Allow only specific file types")), input?.showSpecificFileTypes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChoicesInput, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.accept`,
+    options: fileUploadOptions,
+    multiple: true
+  })))));
 };
 InputBuilder.propTypes = {
   /**

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

@@ -137,6 +137,17 @@ $default-list-width: var(--action-button-width, 18rem);
         }
       }
     }
+
+    > .input-file-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      margin-bottom: $default-margin;
+
+      > .specific-file-types {
+        display: flex;
+      }
+    }
   }
 }
 

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

@@ -17,9 +17,14 @@ const reconstructFormDataWithValues = (formData, values) => {
   const newData = {
     ...formData
   };
-  Object.keys(values).forEach(key => {
+  Object.keys(values).forEach(async key => {
     const [sectionIdx, inputIdx] = key.match(/\d+/g).map(Number);
-    newData.sections[sectionIdx].inputs[inputIdx].value = values[key];
+    if (key.includes('files')) {
+      const files = values[key].map(file => URL.createObjectURL(file));
+      newData.sections[sectionIdx].inputs[inputIdx].files = files;
+    } else {
+      newData.sections[sectionIdx].inputs[inputIdx].value = values[key];
+    }
   });
   return newData;
 };
@@ -118,7 +123,8 @@ const Renderer = ({
     return /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
       key: `${section.title}`
     }, section, {
-      readOnly: readOnly
+      readOnly: readOnly,
+      setUpdatedFormData: setUpdatedFormData
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, /*#__PURE__*/React.createElement(Button, {

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

@@ -1,4 +1,5 @@
 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); }
+/* eslint-disable no-alert */
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -32,7 +33,7 @@ const Section = ({
 }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
   nodes: description,
   name: "instructions"
-}), inputs.map(input => /*#__PURE__*/React.createElement(FormInput, _extends({
+}), inputs?.map(input => /*#__PURE__*/React.createElement(FormInput, _extends({
   key: input.name
 }, input, {
   disabled: readOnly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "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.2.1",
+    "@pareto-engineering/assets": "^4.2.3",
     "@pareto-engineering/bem": "^4.2.1",
     "@pareto-engineering/styles": "^4.2.0",
     "@pareto-engineering/utils": "^4.0.0",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "9dc4c06f6e3f8efe94eb0fa4f301ca6f046c5075"
+  "gitHead": "77c5790a1e998600f0f61931a8fcbd2177f53efc"
 }

package/src/stories/f/FileUpload.stories.jsx

@@ -0,0 +1,55 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { FileUpload } from 'ui'
+
+export default {
+  title        :'f/fields/FileUpload',
+  component    :FileUpload,
+  subcomponents:{
+    // Item:FileUpload.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ files: [] }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = {
+  args:{
+    name       :'section_0_input_0',
+    label      :'The file upload ',
+    type       :'file',
+    description:'',
+    accept     :[
+      '.mp4,.ogg,.webm,video/mp4,video/ogg,video/webm',
+      '.pdf,application/pdf',
+    ],
+  },
+}
+
+export const Multiple = {
+  args:{
+    ...Base.args,
+    multiple:true,
+  },
+}
+
+export const WithLimitedCount = {
+  args:{
+    ...Base.args,
+    maxCount:2,
+  },
+}

package/src/stories/g/FormBuilder.stories.jsx

@@ -41,109 +41,28 @@ export const Builder = {
     )
   },
 }
+
 const sampleFormData = {
   sections:[
     {
-      title      :'This is a survey of some of the best LLM models out there',
-      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"color: #110b53;","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      title      :'Hello',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Test file upload ","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
       key        :'section-0',
       inputs     :[
         {
-          name            :'section_0_input_0',
-          label           :'Name the Model',
-          type            :'text',
-          required        :true,
-          options         :[],
-          conditionalLogic:null,
-          description     :'',
-        },
-        {
-          name            :'section_0_input_1',
-          label           :'Describe the Model in detail',
-          type            :'textarea',
-          required        :false,
-          options         :[],
-          conditionalLogic:null,
-          description     :'brief model description',
-        },
-      ],
-      orderedInputDragIds:[],
-      navigation         :{
-        nextSection:'next',
-      },
-    },
-    {
-      title      :'Rate the Models',
-      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
-      key        :'section-1',
-      inputs     :[
-        {
-          type   :'choices',
-          options:[
-            {
-              key        :'sections-1-inputs-0-options--1',
-              value      :'Chat GPT',
-              label      :'Chat GPT',
-              nextSection:'',
-            },
-            {
-              key        :'sections-1-inputs-0-options-0',
-              value      :'Gemini',
-              label      :'Gemini',
-              nextSection:'',
-            },
+          name                 :'section_0_input_0',
+          label                :'The file upload ',
+          type                 :'file',
+          required             :false,
+          options              :[],
+          conditionalLogic     :null,
+          description          :'',
+          maxCount             :3,
+          showSpecificFileTypes:true,
+          accept               :[
+            '.mp4,.ogg,.webm,video/mp4,video/ogg,video/webm',
+            '.pdf,application/pdf',
           ],
-          required   :true,
-          description:'',
-          name       :'section_1_input_0',
-          label      :'Which is better between the 2?',
-        },
-        {
-          name    :'section_1_input_1',
-          label   :'Choose the worst of them ',
-          type    :'multiple',
-          required:false,
-          options :[
-            {
-              key        :'sections-1-inputs-1-options--1',
-              value      :'Chat GPT',
-              label      :'Chat GPT',
-              nextSection:'',
-            },
-            {
-              key        :'sections-1-inputs-1-options-0',
-              value      :'Gemini',
-              label      :'Gemini',
-              nextSection:'',
-            },
-            {
-              key        :'sections-1-inputs-1-options-1',
-              value      :'Claude',
-              label      :'Claude',
-              nextSection:'',
-            },
-          ],
-          conditionalLogic:null,
-          description     :'',
-        },
-      ],
-      orderedInputDragIds:[],
-      navigation         :{
-        nextSection:'next',
-      },
-    },
-    {
-      title      :'General sentiments',
-      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
-      key        :'section-2',
-      inputs     :[
-        {
-          type       :'textarea',
-          options    :[],
-          required   :true,
-          description:'',
-          name       :'section_2_input_0',
-          label      :'Give a final brief description of your findings',
         },
       ],
       orderedInputDragIds:[],
@@ -168,7 +87,10 @@ export const Renderer = {
 
     return (
       <>
-        <FormBuilder {...args} onRendererFormSave={handleFormDataUpdateWithValues} />
+        <FormBuilder
+          {...args}
+          onRendererFormSave={handleFormDataUpdateWithValues}
+        />
         <pre>{JSON.stringify(values, null, 2)}</pre>
       </>
     )

package/src/ui/f/FormInput/FormInput.jsx

@@ -17,6 +17,7 @@ import {
   QueryChoices,
   LinkInput,
   EditorInput,
+  FileUpload,
 } from '../fields'
 
 import './styles.scss'
@@ -147,6 +148,16 @@ const FormInput = ({
     )
   }
 
+  if (type === 'file') {
+    return (
+      <FileUpload
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (

package/src/ui/f/common/utils/index.js

@@ -1 +1,2 @@
 export { lookUpInputValueFromFetchedOptions } from './lookUpInputValueFromFetchedOptions'
+export { integerAndGreaterThanZero } from './validators'

package/src/ui/f/common/utils/validators.js

@@ -0,0 +1,10 @@
+export const integerAndGreaterThanZero = (value) => {
+  let error = ''
+  if ((value && value <= 0) || value === 0) {
+    error = 'Value must be greator than zero.'
+  }
+  if (value && value % 1 !== 0) {
+    error = 'You must enter a whole number.'
+  }
+  return error
+}

package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx

@@ -27,6 +27,7 @@ const Choice = ({
   multiple,
   validate,
   disabled,
+  ...otherProps
 }) => {
   const type = multiple ? 'checkbox' : 'radio'
 
@@ -53,6 +54,7 @@ const Choice = ({
         id={id}
         name={name}
         {...field}
+        {...otherProps}
         value={value}
         disabled={disabled}
       />