@sio-group/form-react 0.1.0 → 0.2.0

package/src/assets/scss/utilities/_mixins.scss

@@ -0,0 +1,6 @@
+@use 'sass:color';
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

package/src/components/Button/index.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { ButtonProps } from "../../types";
+
+const ButtonComponent: React.FC<ButtonProps> = ({
+    type = 'button',
+    label,
+    onClick,
+    variant = 'primary',
+    color = 'default',
+    size = 'md',
+    block = false,
+    loading = false,
+    disabled = false,
+    className = '',
+    ariaLabel = '',
+    style = {},
+    children,
+}: ButtonProps) => {
+  const isDisabled: boolean = disabled || loading;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
+
+    onClick?.(e);
+  };
+
+  const buttonClasses = [
+    'btn',
+    `btn--${variant}`,
+    `btn--${size}`,
+    `btn--${color}`,
+    block && 'btn--block',
+    loading && 'btn--loading',
+    isDisabled && 'btn--disabled',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      className={buttonClasses}
+      style={style}
+      disabled={isDisabled}
+      aria-label={ariaLabel || (label as string)}
+      aria-busy={loading}
+      aria-disabled={isDisabled}>
+      {loading ? (
+        <>
+					<span className='btn__spinner' aria-hidden='true'>
+						<svg viewBox='0 0 20 20'>
+							<circle cx='10' cy='10' r='8' />
+						</svg>
+					</span>
+          <span className='btn__loading-text'>Processing...</span>
+        </>
+      ) : (
+        <>
+          {children}
+          {label}
+        </>
+      )}
+    </button>
+  );
+};
+
+/**
+ * Button component for user interaction.
+ *
+ * @component
+ * @example
+ * // Primaire button
+ * <Button label="Save" onClick={handleSave} />
+ *
+ * @example
+ * // Submit button with loading state
+ * <Button
+ *   type="submit"
+ *   label="Send"
+ *   variant="primary"
+ *   loading
+ * />
+ *
+ * @example
+ * // Button with icon and tekst
+ * <Button type="button" onClick={handleClick}>
+ *   <Icon name="plus" />
+ *   <span>Add</span>
+ * </Button>
+ *
+ * @example
+ * // Error variant
+ * <Button
+ *   type="button"
+ *   label="Delete"
+ *   variant="secondary"
+ *   color="error"
+ *   onClick={handleDelete}
+ * />
+ */
+export const Button: React.FC<ButtonProps> = React.memo(ButtonComponent);

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { FieldProps } from "../../../types";
+import InputWrapper from "../InputWrapper";
+import { Icon } from "../../Icon";
+
+export const Checkbox = ({
+    value,
+    onChange,
+
+    name,
+    id,
+    label,
+    required,
+    setTouched,
+    readOnly,
+    disabled,
+    icon,
+
+    description,
+    focused,
+    errors,
+    touched,
+    type,
+    className,
+    style,
+}: FieldProps) => {
+  return (
+    <InputWrapper
+      type={type}
+      id={id}
+      description={description}
+      required={required}
+      focused={focused}
+      disabled={disabled || readOnly}
+      hasValue={value === true}
+      hasError={errors.length > 0 && touched}
+      errors={errors}
+      className={className}
+      style={style}
+      hideLayout>
+      <Icon icon={icon} />
+      <label htmlFor={id}>
+        <input
+          name={name}
+          type={type}
+          id={id}
+          checked={value as boolean}
+          onChange={(e) => {
+            onChange?.(e.target.checked);
+            setTouched?.(true);
+          }}
+          readOnly={readOnly}
+          disabled={disabled}
+        />
+        <div>{label}</div> {required && <span aria-hidden={true}>*</span>}
+      </label>
+    </InputWrapper>
+  )
+}

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

@@ -0,0 +1,95 @@
+import { DateFieldProps } from "../../../../types/field-props";
+import { RefObject, useRef } from "react";
+import InputWrapper from "../../InputWrapper";
+import { Button } from "../../../Button";
+import { Icon } from "../../../Icon";
+import { CustomIcons } from '../../../../utils/custom-icons'
+
+export const DateInput = ({
+	value,
+	min,
+	max,
+	step = 1,
+	onChange,
+
+	name,
+	id,
+	placeholder,
+	label,
+	required,
+	autocomplete,
+	setTouched,
+	setFocused,
+	readOnly,
+	disabled,
+	icon,
+
+	description,
+	focused,
+	errors,
+	touched,
+	type,
+	className,
+	style,
+}: DateFieldProps) => {
+	const inputRef: RefObject<HTMLInputElement> =
+		useRef<HTMLInputElement>(null);
+
+	const showPicker = () => {
+		if (inputRef.current) {
+			inputRef.current.focus();
+			if (inputRef.current?.showPicker) {
+				inputRef.current.showPicker();
+			}
+		}
+	};
+
+	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
+				ref={inputRef}
+				type={type}
+				value={(value ?? '').toString()}
+				min={min}
+				max={max}
+				step={step}
+				onChange={e => onChange(e.target.value)}
+				name={name}
+				id={id}
+				placeholder={`${placeholder}${!label && required ? ' *' : ''}`}
+				autoComplete={autocomplete ? autocomplete : 'off'}
+				onBlur={() => {
+					if (setTouched) setTouched(true);
+					if (setFocused) setFocused(false);
+				}}
+				onFocus={() => {
+					if (setFocused) setFocused(true);
+				}}
+				readOnly={readOnly}
+				disabled={disabled}
+				aria-label={label || placeholder}
+			/>
+			<Button
+				className='form-field__action'
+				type='button'
+				onClick={showPicker}
+				disabled={disabled}
+				aria-label={`Open ${type} picker`}
+				label={type === 'date' ? CustomIcons.Date() : (type === 'time' ? CustomIcons.Time() : CustomIcons.DateTime())}
+			/>
+		</InputWrapper>
+	);
+};

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

@@ -0,0 +1,169 @@
+import { ChangeEvent } from "react";
+import { FileFieldProps } from "../../../../types/field-props";
+import InputWrapper from "../../InputWrapper";
+import { Button } from "../../../Button";
+import { Icon } from "../../../Icon";
+import { isValidFile } from "@sio-group/form-validation";
+import { getAccept } from "../../../../utils/get-accept-string";
+import { CustomIcons } from "../../../../utils/custom-icons";
+import { getFileSize } from "../../../../utils/get-file-size";
+import { FileTypeIcon } from "../../../../utils/file-type-icon";
+
+export const FileInput = ({
+	value,
+	onChange,
+	onError,
+
+	accept,
+	filesize,
+	multiple = false,
+	capture,
+	onFileRemove,
+	onRemoveAll,
+
+	name,
+	id,
+	placeholder,
+	label,
+	required,
+	autocomplete,
+	setTouched,
+	setFocused,
+	readOnly,
+	disabled,
+	icon,
+
+	description,
+	focused,
+	errors,
+	touched,
+	type,
+	className,
+	style,
+}: FileFieldProps) => {
+	const currentFiles = (value as File[]) ?? [];
+
+	const handleRemove = (index: number) => {
+		const removedFile: File = currentFiles[index];
+		const newFiles: File[] = currentFiles.filter((_, i) => i !== index);
+		onChange(newFiles);
+		onFileRemove?.(removedFile, index, newFiles);
+	}
+
+	const handleRemoveAll = () => {
+		const removedFiles: File[] = [...currentFiles];
+		onChange([]);
+		onRemoveAll?.(removedFiles);
+	}
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const files: File[] = Array.from(e.target.files ?? []);
+		const validator = isValidFile(filesize, getAccept(accept));
+
+		let fileList: File[] = [...currentFiles];
+		const errorList: string[] = [];
+
+		for (let file of files) {
+			const error: string | null = validator(file);
+			if (error) {
+				errorList.push(error);
+			} else {
+				if (multiple) {
+					fileList.push(file);
+				} else {
+					fileList = [file]
+				}
+			}
+		}
+
+		onChange(fileList);
+		if (onError) onError(errorList ?? [])
+	};
+
+	return (
+		<>
+			<InputWrapper
+				type={type}
+				id={id}
+				label={label}
+				description={description}
+				required={required}
+				focused={focused}
+				disabled={disabled || readOnly}
+				hasValue={currentFiles.length > 0}
+				hasError={errors.length > 0 && touched}
+				errors={errors}
+				className={className}
+				style={style}>
+				<Icon icon={icon} />
+				<input
+					type={type}
+					name={name}
+					id={id}
+					placeholder={`${placeholder}${!label && required ? ' *' : ''}`}
+					autoComplete={autocomplete ? autocomplete : 'off'}
+					onChange={handleChange}
+					onBlur={() => {
+						if (setTouched) setTouched(true);
+						if (setFocused) setFocused(false);
+					}}
+					onFocus={() => {
+						if (setFocused) setFocused(true);
+					}}
+					accept={getAccept(accept)}
+					capture={capture}
+					readOnly={readOnly}
+					disabled={disabled}
+					aria-label={label || placeholder}
+					multiple={multiple}
+				/>
+				<Button
+					className='form-field__action'
+					type='button'
+					onClick={() => {
+						if (setTouched) setTouched(true);
+						document.getElementById(id)?.click();
+					}}
+					disabled={disabled}
+					aria-label='Select files'
+					label={CustomIcons.FileUpload()}
+				/>
+			</InputWrapper>
+
+			{currentFiles.length !== 0 && (
+				<div className='form-field__upload-file-section'>
+					{currentFiles.map((file, index) => (
+						<div className='form-field__upload-file' key={index}>
+							<div className='form-field__upload-file-label'>
+								{FileTypeIcon(file.type || 'text/uri-list')}
+								<span>
+									{file.name}
+									{file.size
+										? ` (${getFileSize(file.size)})`
+										: ''}
+								</span>
+							</div>
+							<div className='form-field__upload-file__buttons'>
+								<button
+									type="button"
+									className='form-field__upload-file-remove-button'
+									onClick={() => handleRemove(index)}>
+									{CustomIcons.TrashIcon()}
+								</button>
+							</div>
+						</div>
+					))}
+					<div className='form-field__upload-buttons'>
+						<button
+							type="button"
+							className='form-field__upload-remove-all-button'
+							onClick={handleRemoveAll}>
+							{CustomIcons.TrashIcon()}
+							<span>Verwijder alles</span>
+						</button>
+					</div>
+				</div>
+			)}
+			</>
+	);
+};

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

@@ -0,0 +1,45 @@
+import React, { memo, useMemo } from 'react';
+import { NumberInput } from "./NumberInput";
+import { RangeInput } from "./RangeInput";
+import { DateInput } from "./DateInput";
+import { FileInput } from "./FileInput";
+import { TextInput } from "./TextInput";
+import {
+	DateFieldProps,
+	FieldProps,
+	FileFieldProps,
+	NumberFieldProps,
+	RangeFieldProps
+} from "../../../types";
+
+export const Input = memo(
+	(props: FieldProps) => {
+		const { type = 'text' } = props;
+
+		return useMemo(() => {
+			switch (props.type) {
+				case 'number':
+					return <NumberInput {...props as NumberFieldProps} />;
+				case 'range':
+					return <RangeInput {...props as RangeFieldProps} />;
+				case 'date':
+				case 'time':
+				case 'datetime-local':
+					return <DateInput{...props as DateFieldProps} />;
+				case 'file':
+					return <FileInput {...props as FileFieldProps} />;
+				case 'hidden':
+					return (
+						<input
+							type={props.type}
+							name={props.name}
+							id={props.id}
+							value={props.value as string}
+						/>
+					);
+				default:
+					return <TextInput {...props} />;
+			}
+		}, [type, props]);
+	},
+);

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

@@ -0,0 +1,169 @@
+import { ChangeEvent, KeyboardEvent } from "react";
+import { NumberFieldProps } from "../../../../types/field-props";
+import InputWrapper from "../../InputWrapper";
+import { Icon } from "../../../Icon";
+import { Button } from "../../../Button";
+
+export const NumberInput = ({
+	value,
+	min,
+	max,
+	step = 1,
+	spinner = true,
+	onChange,
+
+	name,
+	id,
+	placeholder,
+	label,
+	required,
+	autocomplete,
+	setTouched,
+	setFocused,
+	readOnly,
+	disabled,
+	icon,
+
+	description,
+	focused,
+	errors,
+	touched,
+	type,
+	className,
+	style,
+}: NumberFieldProps) => {
+	const getPrecision = (step: number) => {
+		const stepStr: string = step.toString();
+		if (!stepStr.includes(".")) return 0;
+		return stepStr.split(".")[1].length;
+	};
+
+	const handleIncrement = () => {
+		const newValue: number = Math.max(min ?? 0, Math.min(Number(value) + step, max ?? Infinity));
+		onChange(newValue.toFixed(getPrecision(step)));
+	};
+
+	const handleDecrement = () => {
+		const newValue: number = Math.max(Number(value) - step, min ?? -Infinity);
+		onChange(newValue.toFixed(getPrecision(step)));
+	};
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			handleIncrement();
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			handleDecrement();
+		}
+	};
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		let value: string = ''
+		if (e.target.value) {
+			value = e.target.valueAsNumber.toString();
+		}
+
+		onChange(value)
+	}
+
+	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}>
+			{spinner && spinner === 'horizontal' && (
+				<Button
+					type='button'
+					variant="link"
+					className="form-field__spinner-btn"
+					onClick={handleDecrement}
+					disabled={
+						disabled ||
+						(min !== undefined && Number(value) <= min)
+					}
+					aria-label='Decrease value'
+					label="-"
+				/>
+			)}
+			<Icon icon={icon} />
+			<input
+				type='number'
+				value={value !== '' ? Number(value) : ''}
+				min={min}
+				max={max}
+				step={step}
+				onChange={handleChange}
+				onKeyDown={(e) => {
+					handleKeyDown(e);
+					setTouched?.(true)
+				}}
+				aria-valuemin={min}
+				aria-valuemax={max}
+				aria-valuenow={Number(value)}
+				name={name}
+				id={id}
+				placeholder={`${placeholder ?? ''}${!label && required ? ' *' : ''}`}
+				autoComplete={autocomplete ? autocomplete : 'off'}
+				onBlur={() => {
+					setTouched?.(true);
+					setFocused?.(false);
+				}}
+				onFocus={() => {
+					setFocused?.(true);
+				}}
+				readOnly={readOnly}
+				disabled={disabled}
+				aria-label={label || placeholder}
+				style={spinner && spinner === 'horizontal' ? {textAlign: 'center'} : {}}
+			/>
+
+			{spinner &&
+				(spinner === 'horizontal'
+					? <Button
+							type='button'
+							variant="link"
+							className="form-field__spinner-btn"
+							onClick={handleIncrement}
+							disabled={
+								disabled ||
+								(max !== undefined && Number(value) >= max)
+							}
+							aria-label='Increase value'
+							label="+"
+						/>
+					: <div className='form-field__spinner' aria-hidden='true'>
+							<Button
+								type='button'
+								onClick={handleIncrement}
+								disabled={
+									disabled ||
+									(max !== undefined && Number(value) >= max)
+								}
+								aria-label='Increase value'
+								label="&#9650;"
+							/>
+							<Button
+								type='button'
+								onClick={handleDecrement}
+								disabled={
+								  disabled ||
+									(min !== undefined && Number(value) <= min)
+							  }
+								aria-label='Decrease value'
+								label="&#9660;"
+							/>
+					</div>
+				)}
+		</InputWrapper>
+	);
+};