@jasperoosthoek/react-toolbox 0.8.1 → 0.9.1

package/src/components/forms/fields/FormCheckbox.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+
+export interface FormCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'onChange' | 'type'> {
+  name: string;
+  label?: React.ReactElement | string;
+}
+
+export const FormCheckbox = (props: FormCheckboxProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+
+  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
+  const checkboxId = `${props.name}-checkbox`; // Use different ID to avoid conflict
+
+  return (
+    <Form.Group controlId={props.name}>
+      {isInvalid && error && (
+        <Form.Text id={errorId} className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Check
+        id={checkboxId}
+        type="checkbox"
+        {...mergedProps}
+        checked={!!value}
+        isInvalid={isInvalid}
+        aria-describedby={errorId}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.checked);
+        }}
+        label={label ? (
+          <span>
+            {label}
+            {required && ' *'}
+          </span>
+        ) : undefined}
+      />
+    </Form.Group>
+  );
+};
+
+export const FormSwitch = (props: FormCheckboxProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+
+  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
+  const switchId = `${props.name}-switch`; // Use different ID to avoid conflict
+
+  return (
+    <Form.Group controlId={props.name}>
+      {isInvalid && error && (
+        <Form.Text id={errorId} className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Check
+        id={switchId}
+        type="switch"
+        {...mergedProps}
+        checked={!!value}
+        isInvalid={isInvalid}
+        aria-describedby={errorId}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.checked);
+        }}
+        label={label ? (
+          <span>
+            {label}
+            {required && ' *'}
+          </span>
+        ) : undefined}
+      />
+    </Form.Group>
+  );
+};

package/src/components/forms/fields/FormDropdown.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo, KeyboardEvent } from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+import { useLocalization } from '../../../localization/LocalizationContext';
+
+type DisabledProps = {
+  list: any[];
+  value: string | number;
+  state: any;
+  initialState: any;
+  initialValue: any;
+}
+
+export interface FormDropdownProps<T> extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'name' | 'value' | 'onChange' | 'disabled' | 'list'
+> {
+  name: string;
+  label?: React.ReactElement | string;
+  list?: T[];
+  options?: T[]; // Alias for list
+  idKey?: keyof T;
+  nameKey?: keyof T;
+  disabled?: boolean | ((props: DisabledProps) => boolean);
+}
+
+export const FormDropdown = <T,>(props: FormDropdownProps<T>) => {
+  const { 
+    list: listProp,
+    options,
+    idKey = 'value' as keyof T, // Change default to match test
+    nameKey = 'label' as keyof T, // Change default to match test
+    disabled,
+    ...componentProps
+  } = props;
+  
+  const { value, onChange, isInvalid, error, label, required, mergedProps, submit } = useFormField(componentProps);
+  const { strings } = useLocalization();
+
+  // Use options or list, with options taking precedence
+  const listBase = options || listProp;
+
+  const [list, mismatch] = useMemo(() => {
+    if (!listBase || !Array.isArray(listBase)) {
+      return [null, null] as [T[] | null, any];
+    }
+    
+    // Handle string arrays by converting them to { value, label } objects
+    if (listBase.length > 0 && typeof listBase[0] === 'string') {
+      const convertedList = listBase.map((item: any) => ({
+        value: item,
+        label: item
+      })) as unknown as T[];
+      return [convertedList, null];
+    }
+    
+    // Only validate object arrays
+    if (listBase.length > 0 && typeof listBase[0] === 'object') {
+      const mismatch = listBase?.find((item: any) => (
+        !['number', 'string'].includes(typeof item[idKey])
+        || !['number', 'string'].includes(typeof item[nameKey])
+      ))
+      if (mismatch) return [null, mismatch];
+    }
+    
+    return [listBase, null];
+  }, [listBase, idKey, nameKey]);
+
+  if (!list) {
+    console.error(
+      `FormDropdown Error:
+      - Each item in 'list' must include a valid 'idKey' (${String(idKey)}) and 'nameKey' (${String(nameKey)}).
+      - Both keys must exist on every item and be of type 'string' or 'number'.
+      - One or more items failed this check.
+      
+      Received list:`,
+      listBase,
+      ...mismatch ? ['First mismatch:', mismatch] : []
+    );
+    return null;
+  }
+  
+  const selectedItem = list.find(item => item[idKey] === value);
+  
+  return (
+    <Form.Group controlId={props.name}>
+      {label && <Form.Label htmlFor={props.name}>{label}{required && ' *'}</Form.Label>}
+      {isInvalid && error && (
+        <Form.Text className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      
+      <Form.Select
+        id={props.name}
+        value={value || ''}
+        isInvalid={isInvalid}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e: KeyboardEvent<HTMLSelectElement>) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            submit();
+          }
+        }}
+        {...mergedProps}
+      >
+        {list.map((item, key) =>
+          <option
+            key={key}
+            value={item[idKey] as string | number}
+            disabled={
+              typeof disabled === 'function'
+                ? disabled({ list, value: item[idKey] as number | string, state: {}, initialState: {}, initialValue: '' })
+                : disabled
+            }
+          >
+            {item[nameKey] as string}
+          </option>
+        )}
+      </Form.Select>
+    </Form.Group>
+  );
+};

package/src/components/forms/fields/FormInput.tsx

@@ -0,0 +1,114 @@
+import React, { ChangeEvent, KeyboardEvent } from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+
+export interface FormInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'onChange'> {
+  name: string;
+  label?: React.ReactElement | string;
+  as?: string;         // For textarea, select, etc.
+  rows?: number;       // For textarea
+  onChange: (value: string) => void;
+}
+
+export const FormInput = (props: FormInputProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps, submit } = useFormField(props);
+
+  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
+
+  return (
+    <Form.Group controlId={props.name}>
+      {label && <Form.Label htmlFor={props.name}>{label}{required && ' *'}</Form.Label>}
+      {isInvalid && error && (
+        <Form.Text id={errorId} className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Control
+        id={props.name}
+        autoComplete="off"
+        {...mergedProps}
+        value={value || ''}
+        isInvalid={isInvalid}
+        aria-describedby={errorId}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.value);
+        }}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Enter' && mergedProps.as !== 'textarea') {
+            // Pressing the enter key will save data unless it is a multi line text area
+            e.preventDefault();
+            submit();
+          }
+        }}
+      />
+    </Form.Group>
+  );
+};
+
+export const FormTextarea = ({ rows = 3, ...props }: FormInputProps) => (
+  <FormInput as="textarea" rows={rows} {...props} />
+);
+
+export const FormDate = (props: FormInputProps) => (
+  <FormInput type="date" {...props} />
+);
+
+export interface FormDateTimeProps extends Omit<FormInputProps, 'value' | 'onChange'> {
+  value?: string | Date;
+  onChange?: (value: string) => void;
+  timezone?: string;
+}
+
+export const FormDateTime = ({ value, onChange, timezone, ...props }: FormDateTimeProps) => {
+  // Convert value to datetime-local format (YYYY-MM-DDTHH:mm)
+  const formatForInput = (val: string | Date | undefined) => {
+    if (!val) return '';
+    
+    try {
+      const date = typeof val === 'string' ? new Date(val) : val;
+      if (isNaN(date.getTime())) return '';
+      
+      // Format as YYYY-MM-DDTHH:mm for datetime-local input
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+    } catch {
+      return '';
+    }
+  };
+  
+  const handleChange = (inputValue: string) => {
+    if (!onChange) return;
+    
+    if (!inputValue) {
+      onChange('');
+      return;
+    }
+    
+    try {
+      // Convert datetime-local value to ISO string
+      const date = new Date(inputValue);
+      if (isNaN(date.getTime())) {
+        onChange('');
+        return;
+      }
+      
+      onChange(date.toISOString());
+    } catch {
+      onChange('');
+    }
+  };
+  
+  return (
+    <FormInput 
+      type="datetime-local"
+      value={formatForInput(value)}
+      onChange={handleChange}
+      {...props}
+    />
+  );
+};

package/src/components/forms/fields/FormSelect.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { useFormField } from '../FormField';
+
+export interface FormSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'value' | 'onChange'> {
+  name: string;
+  label?: React.ReactElement | string;
+  options: Array<{ value: string | number; label: string; disabled?: boolean }>;
+  placeholder?: string;
+}
+
+export const FormSelect = (props: FormSelectProps) => {
+  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+  const { options, placeholder = "Choose..." } = props;
+
+  return (
+    <Form.Group controlId={props.name}>
+      {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
+      {isInvalid && error && (
+        <Form.Text className="text-danger">
+          {error}
+        </Form.Text>
+      )}
+      <Form.Select
+        {...mergedProps}
+        value={value || ''}
+        isInvalid={isInvalid}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+          onChange(e.target.value);
+        }}
+      >
+        <option value="" disabled>
+          {placeholder}
+        </option>
+        {options.map((option, index) => (
+          <option 
+            key={index} 
+            value={option.value} 
+            disabled={option.disabled}
+          >
+            {option.label}
+          </option>
+        ))}
+      </Form.Select>
+    </Form.Group>
+  );
+};

package/src/components/forms/fields/index.ts

@@ -0,0 +1,6 @@
+// Export all form field components
+export * from './FormInput';
+export * from './FormSelect';
+export * from './FormCheckbox';
+export * from './FormDropdown';
+export * from './FormBadgesSelection';

package/src/index.ts

@@ -1,29 +1,32 @@
-export * from './components/buttons/IconButtons';
-export * from './components/buttons/ConfirmButton';
-export { default as ConfirmButton } from './components/buttons/ConfirmButton';
-export { default as DeleteConfirmButton } from './components/buttons/DeleteConfirmButton';
-export * from './components/buttons/DeleteConfirmButton';
-
-export * from './components/forms/FormModal';
-export * from './components/forms/FormModalProvider';
-export * from './components/forms/FormFields';
-
-export * from './components/indicators/LoadingIndicator';
-export * from './components/indicators/CheckIndicator';
-
-export * from './components/tables/DataTable';
-export * from './components/tables/DragAndDropList';
-export * from './components/tables/SearchBox';
-
-export * from './components/errors/Errors';
-export * from './components/errors/ErrorBoundary';
-
-export * from './components/login/LoginPage';
-
-export * from './utils/hooks';
-export * from './utils/timeAndDate';
-export * from './utils/utils';
-
-
-export * from './localization/localization';
-export * from './localization/LocalizationContext';
+export * from './components/buttons/IconButtons';
+export * from './components/buttons/ConfirmButton';
+export { default as ConfirmButton } from './components/buttons/ConfirmButton';
+export { default as DeleteConfirmButton } from './components/buttons/DeleteConfirmButton';
+export * from './components/buttons/DeleteConfirmButton';
+
+export * from './components/forms/FormProvider';
+export * from './components/forms/FormModal';
+export * from './components/forms/FormModalProvider';
+export * from './components/forms/FormFields';
+export * from './components/forms/FormField';
+export * from './components/forms/fields';
+
+export * from './components/indicators/LoadingIndicator';
+export * from './components/indicators/CheckIndicator';
+
+export * from './components/tables/DataTable';
+export * from './components/tables/DragAndDropList';
+export * from './components/tables/SearchBox';
+
+export * from './components/errors/Errors';
+export * from './components/errors/ErrorBoundary';
+
+export * from './components/login/LoginPage';
+
+export * from './utils/hooks';
+export * from './utils/timeAndDate';
+export * from './utils/utils';
+
+
+export * from './localization/localization';
+export * from './localization/LocalizationContext';