@jasperoosthoek/react-toolbox 0.9.4 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,10 @@
   },
   "description": "Extensive library of React components that work together with react-bootstrap",
   "files": [
-    "src/",
+    "src/components/",
+    "src/localization/",
+    "src/utils/",
+    "src/index.ts",
     "dist/",
     "change-log.md"
   ],
@@ -26,24 +29,35 @@
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.19",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.0.0",
     "babel-jest": "^29.7.0",
-    "babel-loader": "^8.2.5",
     "bootstrap": "^5.1.3",
-    "css-loader": "^6.7.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "style-loader": "^3.3.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-icons": "^5.4.0",
     "ts-jest": "^29.1.0",
-    "ts-loader": "^9.4.2",
     "typescript": "^5.8.2",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-node-externals": "^3.0.0"
+    "vite": "^5.0.0"
+  },
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
   },
-  "main": "dist/index.js",
   "scripts": {
-    "build": "webpack",
+    "build": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json",
+    "build:examples": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",

package/src/components/forms/FormField.tsx

@@ -37,12 +37,13 @@ export const FormField = ({ children, ...props }: FormFieldProps) => {
 
 // Hook to get form field value and setter for a specific field
 export const useFormField = (componentProps: { name: string; label?: any; required?: boolean; [key: string]: any }) => {
-  const { name, label: propLabel, required: propRequired, ...htmlProps } = componentProps;
+  const { name, label: propLabel, required: propRequired, className, ...htmlProps } = componentProps;
   
   const { 
-    getValue, 
+    getValue,
     setValue, 
     formFields, 
+    formId,
     validationErrors, 
     pristine, 
     validated, 
@@ -61,6 +62,7 @@ export const useFormField = (componentProps: { name: string; label?: any; requir
       required: false,
       mergedProps: {},
       submit: () => {},
+      formId: '',
     };
   }
 
@@ -88,5 +90,7 @@ export const useFormField = (componentProps: { name: string; label?: any; requir
     required,
     mergedProps,
     submit,
+    formId,
+    className,
   };
 };

package/src/components/forms/FormModal.tsx

@@ -17,6 +17,7 @@ export type FormModalProps = {
   width?: Width;
   submitText?: string;
   cancelText?: string;
+  children?: React.ReactNode;
 }
 
 export const FormModal = ({
@@ -27,6 +28,7 @@ export const FormModal = ({
   width,
   submitText,
   cancelText,
+  children,
 }: FormModalProps) => {
   const {
     formData,
@@ -63,7 +65,7 @@ export const FormModal = ({
       )}
 
       <Modal.Body>
-        <FormFieldsRenderer />
+        {children ? children : <FormFieldsRenderer />}
       </Modal.Body>
 
       <Modal.Footer>
@@ -91,22 +93,30 @@ export const FormModal = ({
 export const FormFieldsRenderer = () => {
   const { formFields, hasProvider } = useForm();
 
-  if (!hasProvider || !formFields) {
+  if (!hasProvider || !formFields) { 
     return null;
   }
 
   return (
     <Form>
       {Object.entries(formFields).map(([name, config]) => {
+        // Common props for all field types
+        const commonProps = {
+          name,
+          label: config.label,
+          placeholder: config.placeholder,
+          required: config.required,
+          ...config.formProps
+        };
+
         // Renderer decides which component to use based on config
         if (config.component) {
           // Custom component specified in config
           const Component = config.component;
           return (
             <Component 
-              key={name} 
-              name={name} 
-              {...config.formProps}
+              {...commonProps}
+              key={name}
             />
           );
         }
@@ -115,10 +125,9 @@ export const FormFieldsRenderer = () => {
         if (config.type === 'select' && config.options) {
           return (
             <FormSelect 
-              key={name} 
-              name={name} 
-              options={config.options}
-              {...config.formProps}
+              {...commonProps}
+              options={config.options || []}
+              key={name}
             />
           );
         }
@@ -126,12 +135,11 @@ export const FormFieldsRenderer = () => {
         if (config.type === 'dropdown' && config.list) {
           return (
             <FormDropdown 
-              key={name} 
-              name={name} 
-              list={config.list}
+              {...commonProps}
+              list={config.list || []}
               idKey={config.idKey}
               nameKey={config.nameKey}
-              {...config.formProps}
+              key={name}
             />
           );
         }
@@ -139,19 +147,29 @@ export const FormFieldsRenderer = () => {
         if (config.type === 'checkbox' || config.type === 'boolean') {
           return (
             <FormCheckbox 
-              key={name} 
-              name={name} 
-              {...config.formProps}
+              {...commonProps}
+              key={name}
+            />
+          );
+        }
+        
+        if (config.type === 'textarea') {
+          return (
+            <FormInput 
+              {...commonProps}
+              as="textarea"
+              rows={config.rows || 3}
+              key={name}
             />
           );
         }
         
-        // Default to FormInput for most cases
+        // Default to FormInput for most cases (text, number, email, etc.)
         return (
           <FormInput 
-            key={name} 
-            name={name} 
-            {...config.formProps}
+            {...commonProps}
+            type={config.type === 'number' ? 'number' : 'text'}
+            key={name}
           />
         );
       })}

package/src/components/forms/FormProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, ReactNode, createContext } from 'react';
+import React, { useEffect, useState, useContext, ReactNode, createContext, useId } from 'react';
 import { useSetState, usePrevious } from '../../utils/hooks';
 import { isEmpty } from '../../utils/utils';
 import { useLocalization } from '../../localization/LocalizationContext';
@@ -12,10 +12,12 @@ export type FormFieldConfig = {
   component?: any;
   onChange?: (value: FormValue, formData?: any) => any;
   label?: React.ReactElement | string;
+  placeholder?: string;
   options?: Array<{ value: string | number; label: string; disabled?: boolean }>; // For select fields
   list?: any[]; // For dropdown fields
   idKey?: string; // For dropdown fields
   nameKey?: string; // For dropdown fields
+  rows?: number; // For textarea fields
 }
 
 export type FormFields = { [key: string]: FormFieldConfig };
@@ -30,6 +32,7 @@ export type Validate = (state: any) => any;
 
 type FormContextType<T extends FormFields> = {
   formFields: T;
+  formId: string;
   formData: { [key in keyof T]: FormValue } | null;
   initialFormData: { [key in keyof T]: FormValue } | null;
   pristine: boolean;
@@ -48,6 +51,7 @@ type FormContextType<T extends FormFields> = {
 
 const defaultFormState: FormContextType<any> = {
   formFields: {},
+  formId: '',
   formData: null,
   initialFormData: null,
   pristine: true,
@@ -88,6 +92,7 @@ export const FormProvider = <T extends FormFields>({
   resetTrigger,
 }: FormProviderProps<T>) => {
   const { strings } = useLocalization();
+  const formId = useId();
 
   if (!formFields) {
     console.error(`Property formFields cannot be empty.`);
@@ -194,6 +199,7 @@ export const FormProvider = <T extends FormFields>({
 
   const contextValue: FormContextType<T> = {
     formFields,
+    formId,
     formData,
     initialFormData,
     pristine,

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

@@ -17,6 +17,7 @@ export const BadgeSelection = ({ selected = true, disabled, cursor, onClick, sty
       ...cursor ? { cursor } : {},
       ...style || {},
     }}
+    className='mx-1'
     {...disabled ? {} : { onClick }}
     {...restProps}
   />
@@ -43,23 +44,29 @@ export interface FormBadgesSelectionProps extends Omit<
   disabled?: boolean | ((props: DisabledProps) => boolean);
 }
 
+// This component is in serious need of some TLC...
 export const FormBadgesSelection = (props: FormBadgesSelectionProps) => {
   const {
     list,
-    idKey = 'id',
+    idKey = 'value',
     multiple,
     integer,
     disabled,
+    className,
     ...componentProps
   } = props;
   
-  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(componentProps);
-  
+  const { value, onChange, isInvalid, error, label, required, mergedProps, formId } = useFormField(componentProps);
+
   const isMultiple = multiple || multiple === false ? multiple : value instanceof Array;
   const parseInteger = (value: string | number): string | number => integer ? parseInt(`${value}`) : `${value}`;
+  const controlId = `${formId}-${props.name}`;
+  if (!list) {
+    console.error('Missing required list property in FormBadgesSelection')
+  }
   
   return (
-    <Form.Group controlId={props.name}>
+    <Form.Group controlId={controlId} className={className}>
       {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
       {isInvalid && error && (
         <Form.Text className="text-danger">
@@ -84,12 +91,16 @@ export const FormBadgesSelection = (props: FormBadgesSelectionProps) => {
               onClick={() => {
                 if (Array.isArray(value)) {
                   if(selected) {
-                    onChange(value.filter(id => parseInteger(id) !== parseInteger(item[idKey])).toString());
+                    // The "as string[]" cast is not ideal and use cases need to be reviewed
+                    onChange(value.filter(id => parseInteger(id) !== parseInteger(item[idKey])) as string[]);
                   } else {
                     onChange(
-                      integer
-                        ? [...value.map((v: string | number ) => parseInt(v as string)), parseInt(item[idKey])]
-                        : [...value.map((v: string | number ) => `${v}`), `${item[idKey]}`]
+                      [
+                        ...value,
+                        integer
+                          ? parseInt(item[idKey])
+                          : `${item[idKey]}`
+                      ] as string[]
                      );
                   }
                 } else {
@@ -98,7 +109,7 @@ export const FormBadgesSelection = (props: FormBadgesSelectionProps) => {
               }}
               {...mergedProps}
             >
-              {item.name}
+              {item.label}
             </BadgeSelection>
           );
         })}

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

@@ -8,20 +8,19 @@ export interface FormCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLIn
 }
 
 export const FormCheckbox = (props: FormCheckboxProps) => {
-  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+  const { value, onChange, isInvalid, error, label, required, mergedProps, formId, className } = useFormField(props);
 
-  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
-  const checkboxId = `${props.name}-checkbox`; // Use different ID to avoid conflict
+  const errorId = isInvalid && error ? `${formId}-${props.name}-error` : undefined;
+  const controlId = `${formId}-${props.name}`;
 
   return (
-    <Form.Group controlId={props.name}>
+    <Form.Group controlId={controlId} className={`mt-2 mb-2${className ? ` ${className}` : ''}`}>
       {isInvalid && error && (
         <Form.Text id={errorId} className="text-danger">
           {error}
         </Form.Text>
       )}
       <Form.Check
-        id={checkboxId}
         type="checkbox"
         {...mergedProps}
         checked={!!value}
@@ -42,20 +41,19 @@ export const FormCheckbox = (props: FormCheckboxProps) => {
 };
 
 export const FormSwitch = (props: FormCheckboxProps) => {
-  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
+  const { value, onChange, isInvalid, error, label, required, mergedProps, formId, className } = useFormField(props);
 
-  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
-  const switchId = `${props.name}-switch`; // Use different ID to avoid conflict
+  const errorId = isInvalid && error ? `${formId}-${props.name}-error` : undefined;
+  const controlId = `${formId}-${props.name}`;
 
   return (
-    <Form.Group controlId={props.name}>
+    <Form.Group controlId={controlId} className={className}>
       {isInvalid && error && (
         <Form.Text id={errorId} className="text-danger">
           {error}
         </Form.Text>
       )}
       <Form.Check
-        id={switchId}
         type="switch"
         {...mergedProps}
         checked={!!value}

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

@@ -34,8 +34,7 @@ export const FormDropdown = <T,>(props: FormDropdownProps<T>) => {
     ...componentProps
   } = props;
   
-  const { value, onChange, isInvalid, error, label, required, mergedProps, submit } = useFormField(componentProps);
-  const { strings } = useLocalization();
+  const { value, onChange, isInvalid, error, label, required, mergedProps, submit, formId, className } = useFormField(componentProps);
 
   // Use options or list, with options taking precedence
   const listBase = options || listProp;
@@ -81,10 +80,11 @@ export const FormDropdown = <T,>(props: FormDropdownProps<T>) => {
   }
   
   const selectedItem = list.find(item => item[idKey] === value);
+  const controlId = `${formId}-${props.name}`;
   
   return (
-    <Form.Group controlId={props.name}>
-      {label && <Form.Label htmlFor={props.name}>{label}{required && ' *'}</Form.Label>}
+    <Form.Group controlId={controlId} className={className}>
+      {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
       {isInvalid && error && (
         <Form.Text className="text-danger">
           {error}
@@ -92,7 +92,6 @@ export const FormDropdown = <T,>(props: FormDropdownProps<T>) => {
       )}
       
       <Form.Select
-        id={props.name}
         value={value || ''}
         isInvalid={isInvalid}
         onChange={(e) => onChange(e.target.value)}

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

@@ -7,24 +7,24 @@ export interface FormInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
   label?: React.ReactElement | string;
   as?: string;         // For textarea, select, etc.
   rows?: number;       // For textarea
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
 }
 
 export const FormInput = (props: FormInputProps) => {
-  const { value, onChange, isInvalid, error, label, required, mergedProps, submit } = useFormField(props);
+  const { value, onChange, isInvalid, error, label, required, mergedProps, submit, formId, className } = useFormField(props);
 
-  const errorId = isInvalid && error ? `${props.name}-error` : undefined;
+  const errorId = isInvalid && error ? `${formId}-${props.name}-error` : undefined;
+  const controlId = `${formId}-${props.name}`;
 
   return (
-    <Form.Group controlId={props.name}>
-      {label && <Form.Label htmlFor={props.name}>{label}{required && ' *'}</Form.Label>}
+    <Form.Group controlId={controlId} className={className}>
+      {label && <Form.Label>{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 || ''}

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

@@ -10,11 +10,12 @@ export interface FormSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSel
 }
 
 export const FormSelect = (props: FormSelectProps) => {
-  const { value, onChange, isInvalid, error, label, required, mergedProps } = useFormField(props);
-  const { options, placeholder = "Choose..." } = props;
+  const { value, onChange, isInvalid, error, label, required, mergedProps, formId, className } = useFormField(props);
+  const { options = [], placeholder = "Choose..." } = props;
+  const controlId = `${formId}-${props.name}`;
 
   return (
-    <Form.Group controlId={props.name}>
+    <Form.Group controlId={controlId} className={className}>
       {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
       {isInvalid && error && (
         <Form.Text className="text-danger">

package/src/components/indicators/FixedLoadingIndicator.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+interface FixedLoadingIndicatorProps {
+  show: boolean;
+  message: string;
+  variant?: 'info' | 'warning' | 'success' | 'danger' | 'primary' | 'secondary';
+  position?: {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+  };
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const FixedLoadingIndicator: React.FC<FixedLoadingIndicatorProps> = ({
+  show,
+  message,
+  variant = 'info',
+  position = { top: '20px', right: '20px' },
+  className = '',
+  style = {}
+}) => {
+  if (!show) return null;
+
+  const defaultStyle: React.CSSProperties = {
+    position: 'fixed',
+    zIndex: 1050,
+    minWidth: '250px',
+    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+    ...position,
+    ...style
+  };
+
+  return (
+    <div 
+      className={`alert alert-${variant} ${className}`}
+      style={defaultStyle}
+    >
+      <div className="d-flex align-items-center">
+        <div className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></div>
+        {message}
+      </div>
+    </div>
+  );
+};
+
+export default FixedLoadingIndicator;

package/src/components/tables/DataTable.tsx

@@ -45,6 +45,7 @@ export type DataTableColumn<R> = {
   name: ReactNode | string | number;
   orderBy?: OrderByColumn<R>;
   optionsDropdown?: OptionsDropdown;
+  search?: string | ((row: R) => string | number);
   className?: string;
   value?: number | string | ((row: R)  => number);
   formatSum?: ((value: number) => ReactElement | string | number) | ReactElement | string | number;
@@ -78,7 +79,6 @@ export type DataTableProps<D extends any[]> = {
   columns: DataTableColumn<D[number]>[];
   rowsPerPage?: number | null;
   rowsPerPageOptions?: RowsPerPageOptions;
-  filterColumn?: string | ((row: D[number]) => string) | (string | ((row: D[number]) => string))[];
   orderByDefault?: ((row: D[number]) => number) | string | null;
   orderByDefaultDirection?: OrderByDirection;
   onMove?: OnMove<D[number]>;
@@ -99,7 +99,6 @@ export const DataTable = <D extends any[]>({
   columns,
   rowsPerPage: rowsPerPageDefault = 10,
   rowsPerPageOptions = [10, 25, 50, 100, null],
-  filterColumn,
   orderByDefault,
   orderByDefaultDirection='asc',
   onMove,
@@ -121,29 +120,34 @@ export const DataTable = <D extends any[]>({
   if (Object.keys(restProps).length !== 0) console.error('Unrecognised props:', restProps);
   
   const [filterText, setFilterText] = useState('');
-  const [, forceUpdate] = useReducer(x => x + 1, 0);
   const [orderBy, setOrderBy] = useState<{ order: OrderByDirection; column: OrderByColumn<R> } | null>(null);
   const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageDefault);
   const [page, setPage] = useState(0);
+  
   let data = allData && (
-  Object.values(allData).filter(row =>
-    filterColumn && filterText
-      ? (
-          typeof filterColumn === 'function'
-            ? filterColumn(row)
-            : Array.isArray(filterColumn)
-              ? filterColumn.reduce((acc, col) => {
-                  if (typeof col === 'function') {
-                    return acc + ' ' + col(row);
-                  } else if (typeof row[col] !== 'undefined') {
-                    return acc + ' ' + row[col];
-                  }
-                  return acc;
-                }, '')
-              : row[filterColumn]
-        ).toString().match(new RegExp(`${filterText}`, 'i'))
-      : true
-    )
+    Object.values(allData).filter(row => {
+      if (!filterText) return true;
+
+      const regex = new RegExp(filterText, 'i');
+
+      for (const { search } of columns) {
+        if (!search) continue;
+
+        let value: any = '';
+
+        if (typeof search === 'function') {
+          value = search(row);
+        } else if (row[search] !== undefined) {
+          value = row[search];
+        }
+
+        if (value && regex.test(String(value))) {
+          return true; // early return on first match
+        }
+      }
+
+      return false;
+    })
   );
 
   const pagesCount = (data && rowsPerPage && Math.ceil(data.length / rowsPerPage));
@@ -217,7 +221,7 @@ export const DataTable = <D extends any[]>({
     value && data.reduce((sum, row) => (
       sum + (typeof value === 'function' ? value(row) : row[value])
     ), 0)
-  )), [columns])
+  )), [columns, data])
   
   if (!Component) return null;
 
@@ -270,12 +274,6 @@ export const DataTable = <D extends any[]>({
                     setRowsPerPage(e.target.value === 'everything' ? null : parseInt(e.target.value))
                   }
                 >
-                  <option
-                    value="everything"
-                    disabled={rowsPerPage !== null}
-                  >
-                    {strings.getString('select')}
-                  </option>
                   {rowsPerPageOptions.map((option, index) => (
                     <option key={index} value={option === null ? 'everything' : option}>
                       {option === null ? strings.getString('everything') : option}
@@ -370,7 +368,7 @@ export const DataTable = <D extends any[]>({
                             )}
                             active={key === optionsDropdown.selected}
                           >
-                            {text}
+                            {text === null ? strings.getString('everything') : text}
                           </Dropdown.Item>
                         )
                       }
@@ -452,7 +450,6 @@ export const DataTable = <D extends any[]>({
         {showSum && (
           <tfoot>
             <tr>
-
               {columns.map(({ value, formatSum }, index) =>
                 <td
                   key={index}

package/src/index.ts

@@ -13,6 +13,7 @@ export * from './components/forms/fields';
 
 export * from './components/indicators/LoadingIndicator';
 export * from './components/indicators/CheckIndicator';
+export * from './components/indicators/FixedLoadingIndicator';
 
 export * from './components/tables/DataTable';
 export * from './components/tables/DragAndDropList';