@sio-group/form-react 0.1.0 → 0.1.3

package/src/components/Fields/Input/RangeInput/index.tsx

@@ -0,0 +1,77 @@
+import { RangeFieldProps } from "../../../../types/field-props";
+import InputWrapper from "../../InputWrapper";
+import { Icon } from "../../../Icon";
+
+export const RangeInput = ({
+	value,
+	min,
+	max,
+	step = 1,
+	showValue = true,
+	onChange,
+
+	name,
+	id,
+	placeholder,
+	label,
+	required,
+	autocomplete,
+	setTouched,
+	setFocused,
+	readOnly,
+	disabled,
+	icon,
+
+	description,
+	focused,
+	errors,
+	touched,
+	type,
+	className,
+	style,
+}: RangeFieldProps) => {
+	return (
+		<InputWrapper
+			type={type}
+			id={id}
+			label={label}
+			description={description}
+			required={required}
+			focused={focused}
+			disabled={disabled || readOnly}
+			hasValue={!!value}
+			hasError={errors.length > 0 && touched}
+			errors={errors}
+			className={className}
+			style={style}>
+			<Icon icon={icon} />
+			{showValue && (
+				<span className='form-field__range-value'>{Number(value)}</span>
+			)}
+			<input
+				type={type}
+				name={name}
+				id={id}
+				value={Number(value)}
+				autoComplete={autocomplete ? autocomplete : 'off'}
+				onChange={e => onChange(Number(e.target.value))}
+				onBlur={() => {
+					if (setTouched) setTouched(true);
+					if (setFocused) setFocused(false);
+				}}
+				onFocus={() => {
+					if (setFocused) setFocused(true);
+				}}
+				min={min}
+				max={max}
+				step={step}
+				aria-valuemin={min}
+				aria-valuemax={max}
+				aria-valuenow={Number(value)}
+				readOnly={readOnly}
+				disabled={disabled}
+				aria-label={label || placeholder}
+			/>
+		</InputWrapper>
+	);
+};

package/src/components/Fields/Input/TextInput/index.tsx

@@ -0,0 +1,65 @@
+import InputWrapper from "../../InputWrapper";
+import { FieldProps } from "../../../../types";
+import { Icon } from "../../../Icon";
+
+export const TextInput = ({
+	value,
+	onChange,
+
+	name,
+	id,
+	placeholder,
+	label,
+	required,
+	autocomplete,
+	setTouched,
+	setFocused,
+	readOnly,
+	disabled,
+	icon,
+
+	description,
+	focused,
+	errors,
+	touched,
+	type,
+	className,
+	style,
+}: FieldProps) => {
+	return (
+		<InputWrapper
+			type={type}
+			id={id}
+			label={label}
+			description={description}
+			required={required}
+			focused={focused}
+			disabled={disabled || readOnly}
+			hasValue={!!value}
+			hasError={errors.length > 0 && touched}
+			errors={errors}
+			className={className}
+			style={style}>
+			<Icon icon={icon} />
+			<input
+				type={type}
+				name={name}
+				id={id}
+				value={value as string}
+				placeholder={`${placeholder ?? ''}${!label && required ? ' *' : ''}`}
+				autoComplete={autocomplete ? autocomplete : 'off'}
+				onChange={e => onChange(e.target.value)}
+				onBlur={() => {
+					if (setTouched) setTouched(true);
+					if (setFocused) setFocused(false);
+				}}
+				onFocus={() => {
+					if (setFocused) setFocused(true);
+				}}
+				readOnly={readOnly}
+				disabled={disabled}
+				aria-label={label || placeholder}
+			/>
+		</InputWrapper>
+	);
+};

package/src/components/Fields/InputWrapper/index.tsx

@@ -0,0 +1,78 @@
+import React, { memo } from 'react';
+
+interface InputWrapperProps {
+	id: string;
+	label?: string;
+	description?: string | React.ReactNode;
+	required?: boolean;
+	focused?: boolean;
+	disabled?: boolean;
+	hasValue?: boolean;
+	hasError?: boolean;
+	errors?: string[];
+	hideLayout?: boolean;
+	className?: string;
+	style?: React.CSSProperties;
+	children: React.ReactNode;
+	type?: string;
+}
+
+const InputWrapper: React.FC<InputWrapperProps> = ({
+	type = 'text',
+	id,
+	label,
+	description,
+	required = false,
+	focused = false,
+	disabled = false,
+	hasValue = false,
+	hasError = false,
+	errors = [],
+	hideLayout = false,
+	className = '',
+	style = {},
+	children,
+}) => {
+	const classes: string = [
+		'form-field',
+		`form-field__${type}`,
+		focused && 'form-field--focused',
+		hasValue && 'form-field--has-value',
+		hasError && 'form-field--has-errors',
+		disabled && 'form-field--disabled',
+		hideLayout && 'form-field--hidden-layout',
+		className,
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	return (
+		<div
+			className={classes}
+			style={style}
+			aria-required={required}
+			aria-invalid={hasError}>
+			{label && (
+				<label htmlFor={id} id={`${id}-label`}>
+					{label} {required && <span aria-hidden={true}>*</span>}
+				</label>
+			)}
+
+			<div className={`form-field__control`}>{children}</div>
+			{description && (
+				<div className='form-field__description'>{description}</div>
+			)}
+			{hasError && errors.length > 0 && (
+				<ul className='form-field__errors' role='alert'>
+					{[...new Set(errors)].map((x: string, i: number) => (
+						<li className={'form-field__errors-item'} key={i}>
+							{x}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};
+
+export default memo(InputWrapper);

package/src/components/Fields/Radio/index.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Option } from "@sio-group/form-types";
+import { RadioFieldProps } from "../../../types/field-props";
+import InputWrapper from "../InputWrapper";
+import { Icon } from "../../Icon";
+
+export const Radio = ({
+  value,
+  onChange,
+
+  options,
+  inline,
+
+  name,
+  id,
+  label,
+  required,
+  setTouched,
+  readOnly,
+  disabled,
+  icon,
+
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style,
+}: RadioFieldProps) => {
+  return (
+    <InputWrapper
+      type={type}
+      id={id}
+      label={label}
+      description={description}
+      required={required}
+      focused={focused}
+      disabled={disabled || readOnly}
+      hasError={errors.length > 0 && touched}
+      errors={errors}
+      className={`${className ?? ''}${inline ? ' form-field__radio-inline' : ''}`}
+      style={style}
+      hideLayout>
+      <Icon icon={icon} />
+      {options
+        .filter((option: string | Option) => typeof option === 'string' || !option.hide)
+        .map((option: string | Option) => {
+          const opt: Option =
+            typeof option === 'string'
+              ? { value: option, label: option }
+              : option;
+
+          return (
+            <label
+              htmlFor={`${id}-${opt.value}`}
+              key={opt.value}
+              className={
+                value === opt.value
+                  ? 'form-field--has-value'
+                  : ''
+              }>
+              <input
+                name={name}
+                type={type}
+                id={`${id}-${opt.value}`}
+                value={opt.value}
+                checked={value === opt.value}
+                onChange={() => {
+                  if (onChange) onChange(opt.value);
+                  if (setTouched) setTouched(true);
+                }}
+                readOnly={readOnly}
+                disabled={opt.disabled || disabled}
+              />
+              <div>{opt.label}</div>
+            </label>
+          );
+        })}
+    </InputWrapper>
+  )
+}

package/src/components/Fields/Select/index.tsx

@@ -0,0 +1,103 @@
+import { SelectOption } from "@sio-group/form-types";
+import { SelectFieldProps } from "../../../types/field-props";
+import InputWrapper from "../InputWrapper";
+import { Icon } from "../../Icon";
+
+export const Select = ({
+  value,
+  onChange,
+
+  options,
+  multiple,
+
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style,
+}: SelectFieldProps) => {
+  const renderOption = (option: SelectOption) => {
+    if (typeof option === 'string') {
+      return <option value={option} key={option}>{option}</option>;
+    }
+
+    if ("options" in option) {
+      return (
+        <optgroup label={option.label} key={option.label}>
+          {option.options.map(renderOption)}
+        </optgroup>
+      );
+    }
+
+    if (option.hide) return null;
+
+    return (
+      <option
+        value={option.value}
+        disabled={option.disabled}
+        key={option.value}
+      >
+        {option.label}
+      </option>
+    )
+  }
+
+  return (
+    <InputWrapper
+      type={type}
+      id={id}
+      label={label}
+      description={description}
+      required={required}
+      focused={focused}
+      disabled={disabled || readOnly}
+      hasValue={value !== undefined && value !== null && value !== ''}
+      hasError={errors.length > 0 && touched}
+      errors={errors}
+      className={`${className ?? ''} ${multiple ? 'form-field__select-multiple' : 'form-field__select-single'}`}
+      style={style}>
+      <Icon icon={icon} />
+      <select
+        name={name}
+        id={id}
+        value={value as string | string[]}
+        autoComplete={autocomplete ? autocomplete : 'off'}
+        onChange={e => {
+          if (multiple) {
+            const values = Array.from(e.target.selectedOptions).map(o => o.value);
+            onChange(values);
+          } else {
+            onChange(e.target.value);
+          }
+        }}
+        onBlur={() => {
+          if (setTouched) setTouched(true);
+          if (setFocused) setFocused(false);
+        }}
+        onFocus={() => {
+          if (setFocused) setFocused(true);
+        }}
+        disabled={disabled}
+        multiple={multiple}
+        aria-label={label || placeholder}
+      >
+        {placeholder && <option value="" selected disabled>{placeholder}{!label && required ? ' *' : ''}</option>}
+        {options.map(renderOption)}
+      </select>
+    </InputWrapper>
+  )
+}

package/src/components/Fields/Textarea/index.tsx

@@ -0,0 +1,70 @@
+import { TextareaFieldProps } from "../../../types/field-props";
+import InputWrapper from "../InputWrapper";
+import { Icon } from "../../Icon";
+
+
+export const Textarea = ({
+    value,
+    onChange,
+
+    rows,
+    cols,
+
+    name,
+    id,
+    placeholder,
+    label,
+    required,
+    autocomplete,
+    setTouched,
+    setFocused,
+    readOnly,
+    disabled,
+    icon,
+
+    description,
+    focused,
+    errors,
+    touched,
+    type,
+    className,
+    style,
+}: TextareaFieldProps) => {
+  return (
+    <InputWrapper
+      type={type}
+      id={id}
+      label={label}
+      description={description}
+      required={required}
+      focused={focused}
+      disabled={disabled || readOnly}
+      hasValue={!!value}
+      hasError={errors.length > 0 && touched}
+      errors={errors}
+      className={className}
+      style={style}>
+      <Icon icon={icon} />
+      <textarea
+        name={name}
+        id={id}
+        value={value as string}
+        rows={rows}
+        cols={cols}
+        placeholder={`${placeholder ?? ''}${!label && required ? ' *' : ''}`}
+        autoComplete={autocomplete ? autocomplete : 'off'}
+        onChange={e => onChange(e.target.value)}
+        onBlur={() => {
+          if (setTouched) setTouched(true);
+          if (setFocused) setFocused(false);
+        }}
+        onFocus={() => {
+          if (setFocused) setFocused(true);
+        }}
+        readOnly={readOnly}
+        disabled={disabled}
+        aria-label={label || placeholder}
+      />
+    </InputWrapper>
+  );
+}

package/src/components/Fields/index.tsx

@@ -0,0 +1,11 @@
+export * from './Checkbox';
+export * from './Input/Input';
+export { NumberInput } from './Input/NumberInput';
+export { RangeInput } from './Input/RangeInput';
+export { DateInput } from './Input/DateInput';
+export { FileInput } from './Input/FileInput';
+export { TextInput } from './Input/TextInput';
+export * from './InputWrapper';
+export * from './Radio';
+export * from './Select';
+export * from './Textarea';

package/src/components/Form.tsx

@@ -0,0 +1,163 @@
+import { ButtonContainerProps, FormConfig, FormContainerProps } from "../types/form-config";
+import { FormField } from "@sio-group/form-types";
+import React, { useMemo } from "react";
+import { useForm } from "../hooks/useForm";
+import { ButtonProps, LinkProps, FormLayout, RadioFieldProps, SelectFieldProps, TextareaFieldProps } from "../types";
+import { getColumnClasses } from "../utils/get-column-classes";
+import { Checkbox, Input, Radio, Select, Textarea } from "./Fields";
+import { Link } from "./Link";
+import { Button } from "./Button";
+
+const DefaultContainer: React.FC<FormContainerProps> = ({ children, ...props }) => (
+  <form {...props} noValidate>{children}</form>
+);
+
+const DefaultButtonContainer: React.FC<ButtonContainerProps> = ({ children }) => (
+  <div className="btn-group">{children}</div>
+);
+
+export const Form = ({
+    fields,
+    layout = [],
+    submitShow = true,
+    submitAction,
+    submitLabel = 'Bewaar',
+    cancelShow = false,
+    cancelAction,
+    cancelLabel = 'Annuleren',
+    buttons = [],
+    extraValidation = () => true,
+    className,
+    style,
+    disableWhenOffline = false,
+    container: Container = DefaultContainer,
+    buttonContainer: ButtonContainer = DefaultButtonContainer,
+}: FormConfig) => {
+  const { register, getValues, isValid, isBusy, isDirty, reset, submit } = useForm({
+    disableWhenOffline,
+  });
+
+  const loadElement = (field: FormField, renderLayout: boolean = false) => {
+    switch (field.type) {
+      case 'textarea':
+        return <Textarea {...register(field.name, field, renderLayout) as TextareaFieldProps} key={field.name} />;
+
+      case 'checkbox':
+        return <Checkbox {...register(field.name, field, renderLayout)} key={field.name} />;
+
+      case 'radio':
+        return <Radio {...register(field.name, field, renderLayout) as RadioFieldProps} key={field.name} />;
+
+      case 'select':
+        return <Select {...register(field.name, field, renderLayout) as SelectFieldProps} key={field.name} />
+
+      case 'text':
+      case 'search':
+      case 'email':
+      case 'tel':
+      case 'password':
+      case 'url':
+      case 'number':
+      case 'range':
+      case 'date':
+      case 'time':
+      case 'datetime-local':
+      case 'color':
+      case 'file':
+      case 'hidden':
+        return <Input {...register(field.name, field, renderLayout)} key={field.name} />;
+
+      default:
+        return <div key={field.name}>{field.type} to implement</div>;
+    }
+  };
+
+  const renderFields = () => {
+    const target: FormLayout[] | FormField[] = layout?.length ? layout : fields;
+    const hasLayout: boolean = layout?.length !== 0 || fields.some((f: FormField) => f.config.layout);
+
+    const content = target.map((element) => {
+      if ('fields' in element) {
+        const classes: string = getColumnClasses(element.layout, element.layout?.className);
+
+        return (
+          <div
+            key={element.fields.join('-')}
+            className={classes}
+            style={element.layout?.style}
+          >
+            {element.fields.map((name: string) => {
+              const field: FormField | undefined = fieldMap.get(name);
+              return field ? loadElement(field) : null;
+            })}
+          </div>
+        );
+      }
+
+      return loadElement(element, hasLayout);
+    });
+
+
+    return hasLayout
+      ? <div className="sio-row">{content}</div>
+      : content
+  };
+
+  const fieldMap = useMemo(() => {
+    const map = new Map<string, FormField>();
+    fields.forEach((f: FormField) => map.set(f.name, f));
+    return map;
+  }, [fields]);
+
+  const handleCancel = () => {
+    cancelAction?.();
+    reset();
+  };
+
+  const handleSubmit = async () => {
+    await submit(() => submitAction(getValues()));
+    reset();
+  };
+
+  const renderButton = (props: ButtonProps | LinkProps, i: number) => {
+    return props.type === 'link' ? (
+      <Link {...(props as LinkProps)} key={i} />
+    ) : (
+      <Button {...(props as ButtonProps)} key={i} />
+    );
+  }
+
+  const renderButtons = () => {
+    return submitShow || cancelShow || buttons.length ? (
+      <ButtonContainer>
+        {submitShow && (
+          <Button
+            type='submit'
+            onClick={handleSubmit}
+            variant='primary'
+            label={submitLabel}
+            loading={isBusy()}
+            disabled={!isValid() || !extraValidation(getValues())}
+          />
+        )}
+        {cancelShow && (
+          <Button
+            type='button'
+            onClick={handleCancel}
+            variant='secondary'
+            label={cancelLabel}
+            disabled={!isDirty()}
+          />
+        )}
+        {buttons?.map(renderButton)}
+      </ButtonContainer>
+    ) : null;
+  };
+
+  return (
+    <Container className={className} style={style} noValidate>
+      {renderFields()}
+      {renderButtons()}
+    </Container>
+  );
+}

package/src/components/Icon/index.tsx

@@ -0,0 +1,16 @@
+import { IconType } from "@sio-group/form-types";
+import { ReactNode } from "react";
+
+export const Icon = ({ icon }: { icon?:IconType }): ReactNode | null => {
+  if (!icon) return null;
+
+  if (typeof icon === 'string') {
+    return <span className='form-field__icon'><i className={icon} /></span>;
+  }
+
+  switch (icon.type) {
+    case 'class': return <span className='form-field__icon'><i className={icon.value} /></span>;
+    case 'emoji': return <span className='form-field__icon'><span>{icon.value}</span></span>;
+    case 'html': return <span dangerouslySetInnerHTML={{ __html: icon.value }} className='form-field__icon'></span>;
+  }
+}