@ilo-org/react 0.7.8 → 0.8.0

package/src/components/Fieldset/Fieldset.tsx

@@ -1,88 +1,94 @@
-import { Children, FC } from "react";
+import { FC, createContext, useContext, useState } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { FieldsetChild, FieldsetProps } from "./Fieldset.props";
+import { FieldsetProps } from "./Fieldset.props";
 import { Tooltip } from "../Tooltip";
 
+type FieldsetContextType = {
+  hasError: boolean;
+  setHasError: (value: boolean) => void;
+};
+
+// Create a new context for the error state
+export const FieldsetErrorContext = createContext<FieldsetContextType>({
+  hasError: false,
+  setHasError: (value) => value,
+});
+
+// Custom hook to access the error state from the context
+export const useFieldsetError = () => useContext(FieldsetErrorContext);
+
 const Fieldset: FC<FieldsetProps> = ({
   children,
   className,
-  fieldsetid,
-  grouperror,
-  grouphelper,
-  grouptooltip,
   legend,
+  helper,
+  tooltip,
+  errorMessage,
+  disabled = false,
+  wrap = "nowrap",
+  direction = "column",
+  ...props
 }) => {
   const { prefix } = useGlobalSettings();
+
+  const [hasError, setHasError] = useState(false);
+
   const baseClass = `${prefix}--fieldset`;
-  const fieldsetClasses = classNames(className, {
-    [baseClass]: true,
+  const wrapClass = `${baseClass}--wrap__${wrap}`;
+  const directionClass = `${baseClass}--direction__${direction}`;
+  const helperClass = `${baseClass}--helper`;
+  const errorClass = `${baseClass}__error`;
+  const disabledClass = `${baseClass}__disabled`;
+
+  const fieldsetClasses = classNames(
+    className,
+    baseClass,
+    wrapClass,
+    directionClass,
+    {
+      [disabledClass]: disabled,
+    }
+  );
+
+  const helperClasses = classNames(helperClass, {
+    [errorClass]: hasError,
   });
 
+  const contextValue = {
+    hasError,
+    setHasError,
+  };
+
+  const showHelper = !!helper || hasError;
+
+  const helperMessage = hasError ? errorMessage : helper;
+
   return (
-    <fieldset
-      className={fieldsetClasses}
-      id={fieldsetid ? fieldsetid : undefined}
-    >
-      {legend && (
-        <legend className={`${baseClass}--legend`}>
-          {legend}
-          {grouptooltip && (
-            <Tooltip
-              className={`${baseClass}--legend--tooltip`}
-              icon={true}
-              label={grouptooltip}
-              theme={"dark"}
-            ></Tooltip>
-          )}
-        </legend>
-      )}
-      {grouphelper && !grouperror && (
-        <span className={`${baseClass}--helper`}>{grouphelper}</span>
-      )}
-      {grouperror && (
-        <span className={`${baseClass}--error`}>{grouperror}</span>
-      )}
-      {Children.map(children, (child: FieldsetChild, i) => (
-        <>
-          {child && child.props && (
-            <div
-              key={`${baseClass}--input--${i}`}
-              className={`${baseClass}--input${
-                child.props?.type ? "--" + child.props.type : ""
-              } ${child.props.error ? "error" : ""}`}
-            >
-              {child.props.label && (
-                <label
-                  className={`${baseClass}--label`}
-                  htmlFor={child.props.id ? child.props.id : child.props.name}
-                >
-                  {child.props.label}
-                  {child.props.tooltip && (
-                    <Tooltip
-                      className={`${baseClass}--label--tooltip`}
-                      icon={true}
-                      label={child.props.tooltip}
-                      theme={"dark"}
-                    ></Tooltip>
-                  )}
-                </label>
-              )}
-              {child}
-              {child.props.helper && !child.props.error && (
-                <span className={`${baseClass}--helper`}>
-                  {child.props.helper}
-                </span>
-              )}
-              {child.props.error && (
-                <span className={`${baseClass}--error`}>
-                  {child.props.error}
-                </span>
+    <fieldset className={fieldsetClasses} {...props}>
+      {legend || helper ? (
+        <div className={`${baseClass}--legend-wrapper`}>
+          {legend && (
+            <legend className={`${baseClass}--legend`}>
+              {legend}
+              {tooltip && (
+                <Tooltip
+                  className={`${baseClass}--legend--tooltip`}
+                  icon={true}
+                  label={tooltip}
+                  theme={"dark"}
+                ></Tooltip>
               )}
-            </div>
+            </legend>
           )}
-        </>
-      ))}
+          {showHelper && <span className={helperClasses}>{helperMessage}</span>}
+        </div>
+      ) : null}
+      <div className={`${baseClass}--elements`}>
+        <FieldsetErrorContext.Provider value={contextValue}>
+          {children}
+        </FieldsetErrorContext.Provider>
+      </div>
     </fieldset>
   );
 };

package/src/components/FileUpload/FileUpload.args.ts

@@ -1,54 +1,51 @@
-import { FileUploadProps } from "./FileUpload.props";
+import { FileUploadProps, LabelledFileUploadProps } from "./FileUpload.props";
 
-const basic: FileUploadProps = {
-  callback: () => {},
+const basic: LabelledFileUploadProps = {
+  label: "Upload your file",
+  id: "fileupload",
   disabled: false,
   error: false,
-  helper: false,
-  label: "File Upload Field Label",
-  multiple: false,
+  multiple: true,
   name: "fileupload",
-  placeholder: "File Upload Field",
+  placeholder: "Select files",
   required: false,
 };
 
-const hashelper: FileUploadProps = {
-  callback: () => {},
+const hashelper: LabelledFileUploadProps = {
+  label: "Upload your file",
+  id: "fileupload",
   disabled: false,
   error: false,
-  helper: "The file upload's helper text",
-  label: "File Upload Field Label",
-  multiple: false,
+  multiple: true,
   name: "fileupload",
-  placeholder: "File Upload Field",
+  placeholder: "Select files",
   required: false,
 };
 
-const haserror: FileUploadProps = {
-  callback: () => {},
+const haserror: LabelledFileUploadProps = {
+  label: "Upload your file",
+  id: "fileupload",
   disabled: false,
-  error: "this one has an error",
-  helper: false,
-  label: "File Upload Field Label",
-  multiple: false,
+  error: true,
+  multiple: true,
   name: "fileupload",
-  placeholder: "File Upload Field",
+  placeholder: "Select files",
   required: false,
 };
 
-const hastooltip: FileUploadProps = {
-  callback: () => {},
+const hastooltip: LabelledFileUploadProps = {
+  label: "Upload your file",
+  id: "fileupload",
   disabled: false,
   error: false,
-  helper: false,
-  label: "File Upload Field Label",
-  multiple: false,
+  multiple: true,
   name: "fileupload",
-  placeholder: "File Upload Field",
+  placeholder: "Select files",
   required: false,
-  tooltip: "here is the Tooltip",
 };
 
+const disabled: FileUploadProps = { ...basic, disabled: true };
+
 /**
  * Sample prop definitions FileUpload's enumerable properties (imported in stories and test)
  */
@@ -57,6 +54,7 @@ const FileUploadArgs = {
   hashelper,
   haserror,
   hastooltip,
+  disabled,
 };
 
 export default FileUploadArgs;

package/src/components/FileUpload/FileUpload.props.ts

@@ -1,61 +1,16 @@
-export interface FileUploadProps {
-  /**
-   * The FileUpload's onChange callback.
-   */
-  callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
-
-  /**
-   * Specify an optional className to be added to your FileUpload.
-   */
-  className?: string;
-
-  /**
-   * Is the FileUpload disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * Does the FileUpload have an error?
-   */
-  error?: string | false;
-
-  /**
-   * The FileUpload's helper text
-   */
-  helper: string | false;
-
-  /**
-   * The FileUpload's id attribute
-   */
-  id?: string;
-
-  /**
-   * Does this FileUpload have a label?
-   */
-  label: string;
-
-  /**
-   * Should the FileUpload allow multiple uploads?
-   */
-  multiple?: boolean;
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
 
+export interface FileUploadProps extends FormFieldProps<HTMLInputElement> {
   /**
-   * The FileUpload's name attribute
-   */
-  name?: Required<string>;
-
-  /**
-   * Specify an optional className to be added to your FileUpload component.
+   * The placeholder for the input
    */
   placeholder?: string;
 
   /**
-   * Specify whether this FileUpload is required
-   */
-  required?: boolean;
-
-  /**
-   * Does this FileUpload have a tooltip?
+   * Can the user upload more than one file?
    */
-  tooltip?: string;
+  multiple?: boolean;
 }
+
+export type LabelledFileUploadProps = LabelledFormFieldProps<FileUploadProps>;

package/src/components/FileUpload/FileUpload.tsx

@@ -1,82 +1,113 @@
-import { FC, useState } from "react";
+import React, { useState } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { FileUploadProps } from "./FileUpload.props";
-import { Fieldset } from "../Fieldset";
-import { FormElement } from "../FormElement";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+import { FileUploadProps, LabelledFileUploadProps } from "./FileUpload.props";
 
-const FileUpload: FC<FileUploadProps> = ({
-  callback,
-  disabled = false,
-  error,
-  helper,
-  id,
-  label,
-  multiple,
-  name,
-  placeholder,
-  required,
-  tooltip,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--file-upload`;
-  const FileUploadClasses = classNames("", {
-    [baseClass]: true,
-    [`error`]: error,
-  });
+function formatBytes(bytes: number, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
 
-  const [uploadfiles, setUploadFiles] = useState([]);
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
-  /**
-   * On change, add file to listed files, if there is a callback, call it
-   */
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    setUploadFiles(files as any);
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-    if (callback) {
-      callback(e);
-    }
-  };
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
+  (
+    {
+      onChange,
+      onBlur,
+      disabled = false,
+      error,
+      id,
+      multiple,
+      name,
+      placeholder,
+      required,
+    },
+    ref
+  ) => {
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+
+    const baseClass = `${prefix}--file-upload`;
+    const fileUploadClasses = classNames(baseClass, {
+      [`error`]: error,
+    });
+    const inputClass = `${baseClass}--input`;
+
+    const [uploadfiles, setUploadFiles] = useState<null | FileList>(null);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      setUploadFiles(files);
+
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    const inputId = id ? id : name;
+
+    return (
+      <>
+        <div className={fileUploadClasses}>
+          <label className={inputClass}>
+            {placeholder}
+            <input
+              ref={ref}
+              id={inputId}
+              name={name}
+              onChange={handleChange}
+              onBlur={onBlur}
+              disabled={disabled}
+              multiple={multiple}
+              placeholder={placeholder}
+              required={required as any}
+              type="file"
+              data-label={placeholder}
+              aria-describedby={ariaDescribedBy}
+            />
+          </label>
+        </div>
+        {uploadfiles && uploadfiles.length > 0 && (
+          <ul className={`${baseClass}--list`}>
+            {[...uploadfiles].map((file, i) => (
+              <li
+                className={`${baseClass}--list-item`}
+                key={`${baseClass}--list-item-${i}`}
+              >
+                {`${file.name} (${formatBytes(file.size)})`}
+              </li>
+            ))}
+          </ul>
+        )}
+      </>
+    );
+  }
+);
+
+const LabelledFileUpload = React.forwardRef<
+  HTMLInputElement,
+  LabelledFileUploadProps
+>((props, ref) => {
+  const { style, inputStyle, className, ...rest } = props;
+  const fieldId = props.id ? props.id : props.name;
 
   return (
-    <Fieldset className={"file-upload"}>
-      <FormElement
-        elemid={name as any}
-        label={label}
-        helper={helper as any}
-        error={error as any}
-        required={required as any}
-        tooltip={tooltip}
-        type={"file"}
-      >
-        <input
-          id={id ? id : name}
-          name={name}
-          onChange={handleChange}
-          disabled={disabled}
-          multiple={multiple}
-          placeholder={placeholder}
-          required={required as any}
-          type={"file"}
-          className={FileUploadClasses}
-          data-label={placeholder}
-        />
-      </FormElement>
-      {uploadfiles.length > 0 && (
-        <ul className={`${baseClass}--list`}>
-          {[...uploadfiles].map((file: any, i: any) => (
-            <li
-              className={`${baseClass}--list-item`}
-              key={`${baseClass}--list-item-${i}`}
-            >
-              {file.name}
-            </li>
-          ))}
-        </ul>
-      )}
-    </Fieldset>
+    <FormControl
+      fieldId={fieldId}
+      style={style}
+      className={className}
+      {...rest}
+    >
+      <FileUpload ref={ref} style={inputStyle} {...rest} />
+    </FormControl>
   );
-};
+});
 
-export default FileUpload;
+export default LabelledFileUpload;

package/src/components/Form/Form.args.ts

@@ -1,187 +1,5 @@
-import CheckboxArgs from "../Checkbox/Checkbox.args";
-import DatePickerArgs from "../DatePicker/DatePicker.args";
-import DropdownArgs from "../Dropdown/Dropdown.args";
-import FileUploadArgs from "../FileUpload/FileUpload.args";
-import InputArgs from "../Input/Input.args";
-import NumberPickerArgs from "../NumberPicker/NumberPicker.args";
-import TextareaArgs from "../Textarea/Textarea.args";
 import { FormProps } from "./Form.props";
 
-const basic: FormProps = {
-  action: "https://my.action.url",
-  formid: "exampleform",
-  items: [
-    {
-      field: InputArgs.basic,
-      type: "input",
-    },
-    {
-      field: DropdownArgs.basic,
-      type: "dropdown",
-    },
-    {
-      field: CheckboxArgs.basic,
-      type: "checkbox",
-      choicegroupid: "",
-    },
-    {
-      field: FileUploadArgs.basic,
-      type: "file",
-    },
-    {
-      field: DatePickerArgs.hasrange,
-      type: "date",
-    },
-    {
-      field: NumberPickerArgs.basic,
-      type: "number",
-    },
-    {
-      field: TextareaArgs.basic,
-      type: "textarea",
-    },
-  ],
-  submitlabel: "Submit",
+export const basic: FormProps = {
+  theme: "light",
 };
-
-const hashelper: FormProps = {
-  action: "https://my.action.url",
-  formid: "exampleform",
-  items: [
-    {
-      field: InputArgs.hashelper,
-      type: "input",
-    },
-    {
-      field: DropdownArgs.hashelper,
-      type: "dropdown",
-    },
-    {
-      field: FileUploadArgs.hashelper,
-      type: "file",
-    },
-    {
-      field: DatePickerArgs.hashelper,
-      type: "date",
-    },
-    {
-      field: NumberPickerArgs.hashelper,
-      type: "number",
-    },
-    {
-      field: TextareaArgs.hashelper,
-      type: "textarea",
-    },
-  ],
-  submitlabel: "Submit",
-};
-
-const haserror: FormProps = {
-  action: "https://my.action.url",
-  formid: "exampleform",
-  items: [
-    {
-      field: InputArgs.haserror,
-      type: "input",
-    },
-    {
-      field: DropdownArgs.haserror,
-      type: "dropdown",
-    },
-    {
-      field: FileUploadArgs.haserror,
-      type: "file",
-    },
-    {
-      field: DatePickerArgs.haserror,
-      type: "date",
-    },
-    {
-      field: NumberPickerArgs.haserror,
-      type: "number",
-    },
-    {
-      field: TextareaArgs.haserror,
-      type: "textarea",
-    },
-  ],
-  submitlabel: "Submit",
-};
-
-const hastooltip: FormProps = {
-  action: "https://my.action.url",
-  formid: "exampleform",
-  items: [
-    {
-      field: InputArgs.hastooltip,
-      type: "input",
-    },
-    {
-      field: DropdownArgs.hastooltip,
-      type: "dropdown",
-    },
-
-    {
-      field: FileUploadArgs.hastooltip,
-      type: "file",
-    },
-    {
-      field: DatePickerArgs.hastooltip,
-      type: "date",
-    },
-    {
-      field: NumberPickerArgs.hastooltip,
-      type: "number",
-    },
-    {
-      field: TextareaArgs.hastooltip,
-      type: "textarea",
-    },
-  ],
-  submitlabel: "Submit",
-};
-
-const hasdisabled: FormProps = {
-  action: "https://my.action.url",
-  formid: "exampleform",
-  items: [
-    {
-      field: InputArgs.isdisabled,
-      type: "input",
-    },
-    {
-      field: DropdownArgs.basic,
-      type: "dropdown",
-    },
-    {
-      field: FileUploadArgs.basic,
-      type: "file",
-    },
-    {
-      field: DatePickerArgs.hasrange,
-      type: "date",
-    },
-    {
-      field: NumberPickerArgs.basic,
-      type: "number",
-    },
-    {
-      field: TextareaArgs.basic,
-      type: "textarea",
-    },
-  ],
-  submitlabel: "Submit",
-};
-
-/**
- * Sample prop definitions FormGroup's enumerable properties (imported in stories and test)
- */
-const FormArgs = {
-  basic,
-  hasdisabled,
-  hashelper,
-  haserror,
-  hastooltip,
-};
-
-export default FormArgs;