@jasperoosthoek/react-toolbox 0.9.4 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "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

@@ -43,6 +43,7 @@ export const useFormField = (componentProps: { name: string; label?: any; requir
     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,6 @@ export const useFormField = (componentProps: { name: string; label?: any; requir
     required,
     mergedProps,
     submit,
+    formId,
   };
 };

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>
@@ -98,15 +100,23 @@ export const FormFieldsRenderer = () => {
   return (
     <Form>
       {Object.entries(formFields).map(([name, config]) => {
+        // Common props for all field types
+        const commonProps = {
+          key: name,
+          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}
             />
           );
         }
@@ -115,10 +125,8 @@ export const FormFieldsRenderer = () => {
         if (config.type === 'select' && config.options) {
           return (
             <FormSelect 
-              key={name} 
-              name={name} 
-              options={config.options}
-              {...config.formProps}
+              {...commonProps}
+              options={config.options || []}
             />
           );
         }
@@ -126,12 +134,10 @@ 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}
             />
           );
         }
@@ -139,19 +145,26 @@ export const FormFieldsRenderer = () => {
         if (config.type === 'checkbox' || config.type === 'boolean') {
           return (
             <FormCheckbox 
-              key={name} 
-              name={name} 
-              {...config.formProps}
+              {...commonProps}
+            />
+          );
+        }
+        
+        if (config.type === 'textarea') {
+          return (
+            <FormInput 
+              {...commonProps}
+              as="textarea"
+              rows={config.rows || 3}
             />
           );
         }
         
-        // 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'}
           />
         );
       })}

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

@@ -53,13 +53,14 @@ export const FormBadgesSelection = (props: FormBadgesSelectionProps) => {
     ...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}`;
   
   return (
-    <Form.Group controlId={props.name}>
+    <Form.Group controlId={controlId}>
       {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
       {isInvalid && error && (
         <Form.Text className="text-danger">

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 } = 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}>
       {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 } = 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}>
       {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,7 +34,7 @@ export const FormDropdown = <T,>(props: FormDropdownProps<T>) => {
     ...componentProps
   } = props;
   
-  const { value, onChange, isInvalid, error, label, required, mergedProps, submit } = useFormField(componentProps);
+  const { value, onChange, isInvalid, error, label, required, mergedProps, submit, formId } = useFormField(componentProps);
   const { strings } = useLocalization();
 
   // Use options or list, with options taking precedence
@@ -81,10 +81,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}>
+      {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
       {isInvalid && error && (
         <Form.Text className="text-danger">
           {error}
@@ -92,7 +93,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 } = 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}>
+      {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 } = useFormField(props);
+  const { options = [], placeholder = "Choose..." } = props;
+  const controlId = `${formId}-${props.name}`;
 
   return (
-    <Form.Group controlId={props.name}>
+    <Form.Group controlId={controlId}>
       {label && <Form.Label>{label}{required && ' *'}</Form.Label>}
       {isInvalid && error && (
         <Form.Text className="text-danger">

package/src/components/tables/DataTable.tsx

@@ -270,12 +270,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 +364,7 @@ export const DataTable = <D extends any[]>({
                             )}
                             active={key === optionsDropdown.selected}
                           >
-                            {text}
+                            {text === null ? strings.getString('everything') : text}
                           </Dropdown.Item>
                         )
                       }