@pareto-engineering/design-system 4.2.1 → 4.3.0

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}
       />

package/src/ui/f/fields/FileUpload/FileUpload.jsx

@@ -0,0 +1,279 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import { useField } from 'formik'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+import { FilePreview } from './common'
+
+import { FormLabel, FormDescription } from '../../common'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'file-upload'
+
+/**
+ * This is the component description.
+ */
+const FileUpload = ({
+  id,
+  className:userClassName,
+  style,
+  label,
+  description,
+  accept,
+  multiple,
+  name,
+  disabled,
+  maxCount,
+  maxCountError,
+  maxSize,
+  maxSizeError,
+  onChange,
+  uploadStatus,
+  filePreviewAlignment,
+  optional,
+  labelColor,
+  color,
+  viewOnly,
+  handleFileDelete,
+  // ...otherProps
+}) => {
+  const [field, , helpers] = useField({ name })
+
+  const { value } = field
+
+  const { setError, setValue, setTouched } = helpers
+
+  const handleChange = (event) => {
+    setTouched(true, false)
+    const newFiles = Array.from(event.currentTarget.files)
+    const currentFiles = value || []
+
+    const currentCount = currentFiles.length + newFiles.length
+    if (maxCount && currentCount > maxCount) {
+      setError(maxCountError || `Maximum of ${maxCount} files allowed`)
+      return
+    }
+
+    const duplicateFiles = newFiles.filter(
+      (newFile) => currentFiles.some((currentFile) => currentFile.name === newFile.name),
+    )
+
+    if (duplicateFiles.length > 0) {
+      setError('You cannot upload the same file twice.')
+      return
+    }
+
+    if (maxSize) {
+      const oversizedFiles = newFiles.filter((file) => file.size > maxSize)
+      if (oversizedFiles.length > 0) {
+        setError(maxSizeError || `File size exceeds the limit of ${maxSize} bytes`)
+        return
+      }
+    }
+
+    const updatedFiles = [...currentFiles, ...newFiles]
+
+    setValue(updatedFiles)
+    onChange?.(updatedFiles)
+
+    // eslint-disable-next-line no-param-reassign
+    event.target.value = null
+  }
+
+  const handleDelete = ({ fileIndex, identifier }) => {
+    const updatedFiles = value?.filter((_, i) => i !== fileIndex)
+    setValue(updatedFiles)
+
+    handleFileDelete?.({ fileIndex, identifier })
+  }
+
+  const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `preview-${filePreviewAlignment}`,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <p>{label}</p>
+      <FormDescription className="s-1" description={description} name={name} />
+      {!viewOnly && (
+        <FormLabel
+          name={name}
+          color={labelColor}
+          optional={optional}
+        >
+          <input
+            id={name}
+            className="file"
+            type="file"
+            accept={acceptOptions}
+            multiple={multiple || (maxCount && maxCount > 0)}
+            disabled={disabled}
+            onChange={handleChange}
+          />
+          <span className="ai-icon">
+            U
+          </span>
+          <span>
+            Attach file
+          </span>
+        </FormLabel>
+      )}
+      {value?.length > 0 && (
+        <div className="attached-files">
+          <p>Attached files:</p>
+          <div className="files">
+            {value.map((file, indx) => {
+              const isFileObject = file instanceof File
+
+              return (
+                <FilePreview
+                  file={file}
+                  key={isFileObject ? file.name : file}
+                  disabled={disabled}
+                  handleDelete={() => handleDelete({
+                    fileIndex :indx,
+                    identifier:isFileObject ? file.name : file?.id,
+                  })}
+                  uploadStatus={uploadStatus?.[file?.name]}
+                  viewOnly={viewOnly}
+                />
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+FileUpload.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 label text for the file input
+   */
+  label:PropTypes.string,
+
+  /**
+   * The description text below the label
+   */
+  description:PropTypes.string,
+
+  /**
+   * The color of the text
+   */
+  color:PropTypes.string,
+
+  /**
+   * The accepted file types (e.g., 'image/*')
+   */
+  accept:PropTypes.string,
+
+  /**
+   *  Whether to allow multiple file uploads
+   */
+  multiple:PropTypes.bool,
+
+  /**
+   * The name attribute for the input
+   */
+  name:PropTypes.string.isRequired,
+
+  /**
+   * Whether the the input should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The maximum number of files allowed
+   */
+  maxCount:PropTypes.number,
+
+  /**
+   * The error message when max count is exceeded
+   */
+  maxCountError:PropTypes.string,
+
+  /**
+   * The maximum size of files allowed (in bytes)
+   */
+  maxSize:PropTypes.number,
+
+  /**
+   * The error message when file size exceeds max size
+   */
+  maxSizeError:PropTypes.string,
+
+  /**
+   * The upload progress value (0-100)
+   */
+  // progress:PropTypes.number,
+
+  /**
+   * The function to handle file change events
+   */
+  onChange:PropTypes.func,
+
+  /**
+   * The function to handle file delete events
+   */
+  handleFileDelete:PropTypes.func,
+
+  /**
+   * The upload status of the file with the file name as the key
+   */
+  uploadStatus:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The alignment for file previews WRT the upload input
+   */
+  filePreviewAlignment:PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+
+  /**
+   * Whether the file upload is in view only mode
+   */
+  viewOnly:PropTypes.bool,
+}
+
+FileUpload.defaultProps = {
+  disabled            :false,
+  color               :'paragraph',
+  filePreviewAlignment:'bottom',
+  viewOnly            :false,
+}
+
+export default FileUpload

package/src/ui/f/fields/FileUpload/common/FilePreview/FilePreview.jsx

@@ -0,0 +1,160 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { LoadingCircle, ProgressBar } from 'ui/a'
+
+// Local Definitions
+
+import './styles.scss'
+
+import { Button } from 'ui/b'
+
+import { getFileType, getFileTypeFromUrl } from '../../utils'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'file-preview'
+
+const statusColorMap = {
+  pending:'yellow',
+  error  :'red',
+  success:'green',
+}
+
+const FILE_UPLOAD_COMPLETE_PROGRESS = 100
+
+/**
+ * This is the component description.
+ */
+const FilePreview = ({
+  id,
+  className:userClassName,
+  style,
+  file,
+  disabled,
+  handleDelete,
+  uploadStatus,
+  color,
+  uploadProgress,
+  // ...otherProps
+}) => {
+  const isFileObject = file instanceof File
+  const type = isFileObject ? getFileType(file) : getFileTypeFromUrl(file?.url)
+
+  const status = uploadStatus?.status
+  const statusColor = statusColorMap[status] ?? color
+
+  const isPending = status === 'pending'
+  // isPreview means the file is uploaded and previewed while other files can still be uploaded
+  const isSuccess = status === 'success' || file?.isPreview
+
+  const handlePreview = () => {
+    if (!isFileObject) {
+      window.open(file.url, '_blank')
+    }
+  }
+
+  const canDelete = file?.isPreview || isFileObject
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <div className="identity">
+        <span
+          className={
+            [
+              'type',
+              type.toLowerCase(),
+            ]
+              .filter((e) => e)
+              .join(' ')
+}
+        >
+          {type}
+        </span>
+        <span title={file.name} className="name">{file.name}</span>
+        <Button
+          isCompact
+          isSimple
+          onClick={() => (canDelete ? handleDelete() : handlePreview())}
+        >
+          <span className="icon x-ui-icons c-x">{canDelete ? 'Y' : '9'}</span>
+        </Button>
+      </div>
+      {!disabled && (
+        <div className={`progress-status x-${statusColor}`}>
+          <div className="status">
+            {isPending ? (
+              <LoadingCircle
+                className={`x-${statusColor}`}
+                heightWidth="1rem"
+                color={statusColor}
+              />
+            ) : (
+              <>
+                <span className="icon">
+                  {isSuccess ? 'I' : 'Y'}
+                </span>
+                <span>{isSuccess ? 'Uploaded' : 'Error'}</span>
+              </>
+            )}
+          </div>
+          <ProgressBar
+            color={statusColor}
+            progress={isPending ? uploadProgress : FILE_UPLOAD_COMPLETE_PROGRESS}
+            height="3px"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+FilePreview.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 base color of the file preview
+   */
+  color:PropTypes.string,
+
+  /**
+   * The upload progress of the file
+   */
+  uploadProgress:PropTypes.number,
+}
+
+FilePreview.defaultProps = {
+  color         :'green',
+  uploadProgress:45,
+}
+
+export default FilePreview

package/src/ui/f/fields/FileUpload/common/FilePreview/index.js

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