@jasperoosthoek/react-toolbox 0.8.1 → 0.9.1

package/src/utils/hooks.ts

@@ -1,95 +1,109 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-
-// https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect
-export const usePrevious = <T>(value: T): T | undefined => {
-  // Explicitly set initial value to `undefined`
-  const ref = useRef<T | undefined>(undefined);
-
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
-// https://stackoverflow.com/questions/54666401/how-to-use-throttle-or-debounce-with-react-hook
-export const useDebouncedEffect = (effect: () => void, deps: any[], delay: number) => {
-  useEffect(() => {
-    const handler = setTimeout(() => effect(), delay);
-
-    return () => clearTimeout(handler);
-  }, [...(deps || []), delay, effect]);
-};
-
-// https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate
-export const useForceUpdate = () => {
-  const [, updateState] = useState<any>(null);
-  return useCallback(() => updateState({}), []);
-}
-
-export const useSetState = <T>(initialState: T): [T, (subState: Partial<T>) => void] => {
-  const [state, setState] = useState(initialState);
-  const [callback, setCallback] = useState<() => void | undefined>();
-  useEffect(() => {
-    if (typeof callback === 'function') callback();
-  }, [callback]);
-  
-  const setSubState = (obj: Partial<T>, callback?: () => void) => {
-    setState({ ...state, ...obj });
-    if (callback) setCallback(callback);
-  }
-  return [state, setSubState];
-}
-
-// https://devtrium.com/posts/set-interval-react
-export const useInterval = (func: () => void, value: number) => useEffect(() => {
-  if (typeof func !== 'function') {
-    throw('First argument of useInterval should be a function');
-  } else if(
-    typeof value !== 'number'
-    || !isFinite(value)
-    || value <= 0
-  ) {
-    throw('Second argument of useInterval should be a positive number');
-  }
-  const interval = setInterval(func, value);
-
-  return () => clearInterval(interval);
-}, []);
-
-export const useLocalStorage = <T,>(key: string, initialValue: T): [T, (value: T) => void] => {
-  const initialLocalStorageValue = localStorage.getItem(key);
-
-  if (initialLocalStorageValue === null) {
-    localStorage.setItem(key, JSON.stringify(initialValue));
-  }
-
-  const [state, setState] = useState<T>(
-    initialLocalStorageValue
-      ? JSON.parse(initialLocalStorageValue) as T
-      : initialValue
-  );
-
-  useEffect(() => {
-    const handleStorageChange = (event: StorageEvent) => {
-      if (event.key === key && event.newValue) {
-        setState(JSON.parse(event.newValue) as T);
-      }
-    };
-
-    // Manually dispatch an event to update components in the same document
-    window.addEventListener('storage', handleStorageChange);
-    return () => window.removeEventListener('storage', handleStorageChange);
-  }, [key]);
-
-  const setLocalStorage = (value: T) => {
-    setState(value);
-    localStorage.setItem(key, JSON.stringify(value));
-    window.dispatchEvent(new StorageEvent('storage', {
-      key,
-      newValue: JSON.stringify(value),
-      oldValue: localStorage.getItem(key),
-    }));
-  };
-
-  return [state, setLocalStorage];
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+
+// https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect
+export const usePrevious = <T>(value: T): T | undefined => {
+  // Explicitly set initial value to `undefined`
+  const ref = useRef<T | undefined>(undefined);
+
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+// https://stackoverflow.com/questions/54666401/how-to-use-throttle-or-debounce-with-react-hook
+export const useDebouncedEffect = (effect: () => void, deps: any[], delay: number) => {
+  useEffect(() => {
+    const handler = setTimeout(() => effect(), delay);
+
+    return () => clearTimeout(handler);
+  }, [...(deps || []), delay]);
+};
+
+// https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate
+export const useForceUpdate = () => {
+  const [, updateState] = useState<any>(null);
+  return useCallback(() => updateState({}), []);
+}
+
+export const useSetState = <T>(initialState: T): [T, (subState: Partial<T>, callback?: () => void) => void] => {
+  const [state, setState] = useState(initialState);
+  
+  const setSubState = useCallback((obj: Partial<T>, callback?: () => void) => {
+    setState(prevState => {
+      const newState = { ...prevState, ...obj };
+      return newState;
+    });
+    if (callback) {
+      // Execute callback in next tick to ensure state is updated
+      Promise.resolve().then(callback);
+    }
+  }, []);
+  
+  return [state, setSubState];
+}
+
+// https://devtrium.com/posts/set-interval-react
+export const useInterval = (func: () => void, value: number) => useEffect(() => {
+  if (typeof func !== 'function') {
+    throw('First argument of useInterval should be a function');
+  } else if(
+    typeof value !== 'number'
+    || !isFinite(value)
+    || value <= 0
+  ) {
+    throw('Second argument of useInterval should be a positive number');
+  }
+  const interval = setInterval(func, value);
+
+  return () => clearInterval(interval);
+}, []);
+
+export const useLocalStorage = <T,>(key: string, initialValue: T): [T, (value: T) => void] => {
+  // Get initial value from localStorage or use provided initial value
+  const [state, setState] = useState<T>(() => {
+    try {
+      const item = localStorage.getItem(key);
+      if (item === null) {
+        localStorage.setItem(key, JSON.stringify(initialValue));
+        return initialValue;
+      }
+      return JSON.parse(item) as T;
+    } catch (error) {
+      console.error('Error reading from localStorage:', error);
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === key && event.newValue) {
+        try {
+          setState(JSON.parse(event.newValue) as T);
+        } catch (error) {
+          console.error('Error parsing localStorage value:', error);
+        }
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, [key]);
+
+  const setLocalStorage = useCallback((value: T) => {
+    try {
+      setState(value);
+      localStorage.setItem(key, JSON.stringify(value));
+      // Dispatch storage event for components in the same window
+      window.dispatchEvent(new StorageEvent('storage', {
+        key,
+        newValue: JSON.stringify(value),
+        oldValue: localStorage.getItem(key),
+      }));
+    } catch (error) {
+      console.error('Error writing to localStorage:', error);
+    }
+  }, [key]);
+
+  return [state, setLocalStorage];
 };

package/src/utils/timeAndDate.ts

@@ -1,4 +1,33 @@
-import moment from 'moment';
-
-export const getTimestamp = () => Math.round(new Date().getTime()/1000);
-export const getToday = () => moment().utc().startOf('day');
+import { startOfDay, format, parseISO, isValid } from 'date-fns';
+import { toZonedTime, fromZonedTime } from 'date-fns-tz';
+
+export const getTimestamp = () => Math.round(new Date().getTime() / 1000);
+
+export const getToday = () => {
+  const now = new Date();
+  const utcDate = toZonedTime(now, 'UTC');
+  return startOfDay(utcDate);
+};
+
+// Common date formatting utilities
+export const formatDate = (date: Date | string, pattern: string = 'yyyy-MM-dd') => {
+  const dateObj = typeof date === 'string' ? parseISO(date) : date;
+  return isValid(dateObj) ? format(dateObj, pattern) : '';
+};
+
+export const formatDateTime = (date: Date | string, pattern: string = 'yyyy-MM-dd HH:mm') => {
+  const dateObj = typeof date === 'string' ? parseISO(date) : date;
+  return isValid(dateObj) ? format(dateObj, pattern) : '';
+};
+
+// Convert local date to UTC
+export const toUtc = (date: Date | string, timezone?: string) => {
+  const dateObj = typeof date === 'string' ? parseISO(date) : date;
+  return timezone ? fromZonedTime(dateObj, timezone) : dateObj;
+};
+
+// Convert UTC date to local timezone
+export const fromUtc = (date: Date | string, timezone: string) => {
+  const dateObj = typeof date === 'string' ? parseISO(date) : date;
+  return toZonedTime(dateObj, timezone);
+};

package/src/utils/utils.ts

@@ -1,66 +1,74 @@
-import axios, { AxiosInstance } from 'axios';
-
-export const isEmpty = (value: unknown) =>
-  value === undefined
-  || value === null
-  || value === false
-  || (typeof value === 'object' && Object.keys(value).length === 0)
-  || (typeof value === 'string' && value.trim().length === 0);
-
-
-export const snakeToCamelCase = (str: string) => str.replace(
-  /([-_][a-z])/g,
-  (group) => group
-    .replace('-', '')
-    .replace('_', '')
-);
-
-export const camelToSnakeCase = (str: string) => (str
-  .split(/(?=[A-Z])/)
-  .map(x => x.toUpperCase())
-  .join('_')
-);
-
-export const pluralToSingle = (str: string) => {
-  if (str.slice(-1) !== 's') {
-    // This string is not plural: keep it unaltered
-    return str;
-  } else if (str.slice(-3) === 'ies') {
-    // Handle special case of categories
-    return `${str.slice(0, -3)}y`;
-  } else if (str.slice(-3) === 'IES') {
-    // Same but in upper case
-    return `${str.slice(0, -3)}Y`;
-  } else {
-    // Standard plural
-    return str.slice(0, -1);
-  }
-}
-
-export const arrayToObject = <T extends any[]>(array: T, byKey: string) => Object.fromEntries(array.map(obj => [obj[byKey], obj]));
-
-export const roundFixed = (str: string | number, decimals?: number) => parseFloat(`${str}`).toFixed(decimals || 0);
-export const round = (str: string | number, decimals?: number) => parseFloat(parseFloat(`${str}`).toFixed(decimals || 0));
-
-export type DownloadFileOptions = {
-  axios: AxiosInstance;
-}
-export const downloadFile = (url: string, filename: string, options: DownloadFileOptions) => (
-  // https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743
-  
-  (options.axios || axios.create())({
-    url,
-    method: 'GET',
-    responseType: 'blob',
-  }).then((response) => {
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute(
-      'download',
-      filename,
-    );
-    document.body.appendChild(link);
-    link.click();
-  })
-);
+export const isEmpty = (value: unknown) =>
+  value === undefined
+  || value === null
+  || value === false
+  || (typeof value === 'object' && Object.keys(value).length === 0)
+  || (typeof value === 'string' && value.trim().length === 0);
+
+
+export const snakeToCamelCase = (str: string) => str.replace(
+  /([-_])(.)/g,
+  (match, separator, char) => char.toUpperCase()
+);
+
+export const camelToSnakeCase = (str: string) => {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1_$2') // Insert underscore between lowercase and uppercase
+    .replace(/([a-zA-Z])([0-9])/g, '$1_$2') // Insert underscore between letter and number
+    .replace(/([0-9])([a-zA-Z])/g, '$1_$2') // Insert underscore between number and letter
+    .toUpperCase();
+};
+
+export const pluralToSingle = (str: string) => {
+  if (str.slice(-1) !== 's' && str.slice(-1) !== 'S') {
+    // This string is not plural: keep it unaltered
+    return str;
+  } else if (str.slice(-3).toLowerCase() === 'ies') {
+    // Handle special case of categories (case insensitive)
+    const prefix = str.slice(0, -3);
+    const lastChar = str.slice(-3, -2); // Get the character before 'ies'
+    return `${prefix}${lastChar === lastChar.toUpperCase() ? 'Y' : 'y'}`;
+  } else {
+    // Standard plural
+    return str.slice(0, -1);
+  }
+}
+
+export const arrayToObject = <T extends any[]>(array: T, byKey: string) => Object.fromEntries(array.map(obj => [obj[byKey], obj]));
+
+export const roundFixed = (str: string | number, decimals?: number) => parseFloat(`${str}`).toFixed(decimals || 0);
+export const round = (str: string | number, decimals?: number) => parseFloat(parseFloat(`${str}`).toFixed(decimals || 0));
+
+export type DownloadFileOptions = {
+  headers?: Record<string, string>;
+  fetchFn?: typeof fetch;
+}
+
+export const downloadFile = async (url: string, filename: string, options: DownloadFileOptions = {}) => {
+  try {
+    const fetchFn = options.fetchFn || fetch;
+    const response = await fetchFn(url, {
+      method: 'GET',
+      headers: options.headers || {},
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const blob = await response.blob();
+    const downloadUrl = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    
+    // Cleanup
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(downloadUrl);
+  } catch (error) {
+    console.error('Download failed:', error);
+    throw error;
+  }
+};

package/dist/components/forms/CreateEditModal.d.ts

@@ -1,41 +0,0 @@
-import React, { ReactElement } from 'react';
-import { FormComponentProps, FormSelectProps, FormOnChange, FormValue } from './FormFields';
-export type FormField = {
-    initialValue?: any;
-    type?: 'string' | 'number';
-    required?: boolean;
-    formProps?: any;
-    component?: (props: FormComponentProps | FormSelectProps) => ReactElement;
-    onChange?: FormOnChange;
-    label?: ReactElement | string;
-};
-export type IncludeData<T> = {
-    [key in Exclude<string, keyof T>]: any;
-};
-export type InitialState<T> = Partial<{
-    [key in keyof T]: FormValue;
-}>;
-export type FormFields = {
-    [key: string]: FormField;
-};
-export type OnSave<T, K> = (state: ({
-    [key in keyof T]: FormValue;
-}), callback: () => void) => void;
-export type Validate = (state: any) => any;
-export type ModalTitle = ReactElement | string;
-export type Width = 25 | 50 | 75 | 100;
-export type CreateEditModalProps<T extends FormFields, K extends IncludeData<T>> = {
-    initialState: InitialState<T> | K;
-    includeData?: K;
-    formFields: T;
-    show?: boolean;
-    onSave: OnSave<T, K>;
-    onHide: () => void;
-    validate?: Validate;
-    modalTitle?: ModalTitle;
-    loading?: boolean;
-    dialogClassName?: string;
-    width?: Width;
-};
-export declare const CreateEditModal: <T extends FormFields, K extends IncludeData<T>>({ initialState, formFields, includeData, show, onSave, onHide, validate, modalTitle, loading, dialogClassName, width, ...restProps }: CreateEditModalProps<T, K>) => React.JSX.Element;
-export declare const DisabledFormField: ({ value }: any) => React.JSX.Element;

package/dist/components/forms/CreateEditModalProvider.d.ts

@@ -1,41 +0,0 @@
-import React, { ReactNode } from 'react';
-import { FormFields, IncludeData, InitialState, OnSave, Validate, ModalTitle, Width } from './CreateEditModal';
-import { FormValue } from './FormFields';
-import { ButtonProps } from '../buttons/IconButtons';
-export type ShowCreateModal = (show?: boolean) => void;
-export type ShowEditModal<T, K> = (state: {
-    [key in keyof T]: FormValue;
-} & K) => void;
-export type ShowCreateModalButton = ButtonProps;
-export declare const ShowCreateModalButton: ({ onClick, ...props }: ButtonProps) => React.JSX.Element;
-export interface ShowEditModalButtonProps<T, K> extends ButtonProps {
-    state: {
-        [key in keyof T]: FormValue;
-    } & K;
-}
-export declare const ShowEditModalButton: ({ state, onClick, ...props }: ShowEditModalButtonProps<T, K>) => React.JSX.Element;
-type CreateEditModalContextType<T, K> = {
-    showCreateModal: ShowCreateModal;
-    showEditModal: ShowEditModal<T, K>;
-};
-type T = any;
-type K = any;
-export declare const CreateEditModalContext: React.Context<CreateEditModalContextType<any, any>>;
-export declare const useCreateEditModal: () => CreateEditModalContextType<any, any>;
-export type CreateEditModalProviderProps<T extends FormFields, K extends IncludeData<T>> = {
-    initialState: InitialState<T> | K;
-    includeData?: K;
-    formFields: T;
-    onSave?: OnSave<T, K>;
-    onCreate?: OnSave<T, K>;
-    onUpdate?: OnSave<T, K>;
-    validate?: Validate;
-    createModalTitle?: ModalTitle;
-    editModalTitle?: ModalTitle;
-    loading?: boolean;
-    dialogClassName?: string;
-    width?: Width;
-    children: ReactNode;
-};
-export declare const CreateEditModalProvider: React.FC<CreateEditModalProviderProps<T, K>>;
-export {};

package/dist/components/forms/FormFields.test.d.ts

@@ -1,4 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import '@testing-library/jest-dom/extend-expect';

package/dist/login/Login.d.ts

@@ -1,70 +0,0 @@
-import React, { ReactElement } from 'react';
-import { ThunkAction, ThunkDispatch } from 'redux-thunk';
-import axios, { AxiosInstance } from 'axios';
-export declare const LOGIN_SET_TOKEN = "LOGIN_SET_TOKEN";
-export declare const LOGIN_SET_CURRENT_USER = "LOGIN_SET_CURRENT_USER";
-export declare const LOGIN_UNSET_CURRENT_USER = "LOGIN_UNSET_CURRENT_USER";
-export type LoginActions = {
-    type: 'LOGIN_SET_TOKEN';
-    payload: string;
-} | {
-    type: 'LOGIN_SET_CURRENT_USER';
-    payload: any;
-} | {
-    type: 'LOGIN_UNSET_CURRENT_USER';
-};
-export type AuthState = {
-    isAuthenticated: boolean;
-    user: any | null;
-    token: string;
-};
-type Action = {
-    type: string;
-    [key: string]: any;
-};
-export type LoginFactoryProps = {
-    authenticatedComponent: (props: any) => ReactElement;
-    passwordResetUrl: string;
-    axios: typeof axios | AxiosInstance;
-    onError: (error: any) => void;
-    onLogout?: () => void;
-    loginUrl: string;
-    getUserUrl: string;
-    logoutUrl: string;
-    localStoragePrefix: string;
-};
-export type LoginProps = {
-    label?: string | ReactElement;
-};
-export declare const loginFactory: ({ authenticatedComponent, passwordResetUrl, axios, onError, onLogout, loginUrl, getUserUrl, logoutUrl, localStoragePrefix, }: LoginFactoryProps) => {
-    Login: ({ label }: LoginProps) => React.JSX.Element;
-    useLogin: () => {
-        login: (userData: any, callback?: () => void) => any;
-        getCurrentUser: (args_0?: {
-            callback?: (userData: any) => void;
-        }) => any;
-        setCurrentUser: (user: any) => any;
-        setToken: (token: string) => any;
-        unsetCurrentUser: () => any;
-        logout: () => any;
-    };
-    login: (userData: any, callback?: () => void) => ThunkAction<Promise<void>, any, undefined, LoginActions>;
-    getCurrentUser: ({ callback }?: {
-        callback?: (userData: any) => void;
-    }) => (dispatch: ThunkDispatch<any, undefined, any>) => Promise<void>;
-    setCurrentUser: (user: any) => (dispatch: ThunkDispatch<any, undefined, any>) => void;
-    setToken: (token: string) => (dispatch: ThunkDispatch<any, undefined, any>) => void;
-    unsetCurrentUser: () => (dispatch: ThunkDispatch<any, undefined, any>) => void;
-    logout: () => (dispatch: ThunkDispatch<any, undefined, any>) => Promise<void>;
-    authReducer: {
-        auth: (state: AuthState, action: Action) => {
-            isAuthenticated: boolean;
-            token: any;
-            user: any | null;
-        };
-    };
-    useAuth: () => any;
-    storeState: (state: any, action: Action) => void;
-    retrieveState: () => any;
-};
-export {};

package/src/components/forms/FormFields.test.tsx

@@ -1,107 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { FormInput, FormCheckbox, FormSelect, FormDropdown, FormBadgesSelection } from './FormFields';
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
-const mockFields = {
-  initialState: {},
-  initialValue: 'myval',
-  state: {},
-  setState: (obj: any) => {},
-  keyName: 'test123',
-  pristine: true,
-}
-
-test('FormInput component handles input correctly', () => {
-  const mockOnChange = jest.fn();
-  const { getByLabelText } = render(
-    <FormInput
-      {...mockFields}
-      label={<>test</>}
-      onChange={mockOnChange}
-    />
-  );
-  const input = getByLabelText('test') as HTMLInputElement;
-
-  fireEvent.change(input, { target: { value: 'new value' } });
-  expect(mockOnChange).toBeCalledWith('new value');
-});
-
-test('FormCheckbox component handles input correctly', () => {
-  const mockOnChange = jest.fn();
-  const { getByRole } = render(
-    <FormCheckbox
-      {...mockFields}
-      label={<>test</>}
-      onChange={mockOnChange}
-    />
-  );
-  const checkbox = getByRole('checkbox') as HTMLInputElement;
-
-  fireEvent.click(checkbox);
-  expect(mockOnChange).toBeCalledWith(true);
-});
-
-test('FormSelect component handles input correctly', () => {
-  const mockOnChange = jest.fn();
-  const list = [
-    {
-      id: '1',
-      name: 'item1',
-      children: 'Item 1',
-    }, 
-    {
-      id: '2',
-      name: 'item2',
-      children: 'Item 2',
-    },
-  ];
-  const { getByText, getByRole } = render(
-    <FormSelect
-      {...mockFields}
-      // @ts-ignore
-      list={list}
-      label={<>test</>}
-      onChange={mockOnChange}
-    />
-  );
-  const select = getByRole('listbox') as HTMLSelectElement;
-
-  fireEvent.change(select, { target: { value: '2' } });
-  
-  // Asserting the onChange callback was not called by the onChange event of the select
-  expect(mockOnChange).not.toBeCalled();
-  const option = getByText('Item 2') as HTMLOptionElement;
-  
-  // Asserting the onChange callback is called by the onClick event of the option
-  fireEvent.click(option);//, { target: { value: '2' } });
-  expect(mockOnChange).toBeCalledWith('2');
-});
-
-// test('FormDropdown component handles input correctly', () => {
-//   const mockOnChange = jest.fn();
-//   const list = [{ id: '1', name: 'item1' }, { id: '2', name: 'item2' }];
-//   const { getByText } = render(<FormDropdown list={list} onChange={mockOnChange} />);
-//   const item = getByText('item1') as HTMLSelectElement;
-
-//   fireEvent.click(item);
-//   expect(mockOnChange).toBeCalledWith('1');
-// });
-
-// test('FormBadgesSelection component handles input correctly', () => {
-//   const mockOnChange = jest.fn();
-//   const list = [{ id: '1', name: 'item1' }, { id: '2', name: 'item2' }];
-//   const { getByText } = render(<FormBadgesSelection list={list} onChange={mockOnChange} />);
-//   const item = getByText('item1') as HTMLSelectElement;
-
-//   fireEvent.click(item);
-//   expect(mockOnChange).toBeCalledWith('1');
-// });