@jasperoosthoek/react-toolbox 0.8.0 → 0.9.0

package/src/localization/localization.ts

@@ -1,131 +1,131 @@
-export type LocalizationFunction = (...args: (string | number)[]) => string;
-
-export type LocalizationElement = {
-  [languageString: string]: (string | LocalizationFunction)
-}
-
-export type AdditionalLocalization = {
-  [lang: string]: LocalizationElement;
-}
-
-export interface LocalizationStrings {
-  select: string;
-  search: string;
-  no_information_to_display: string;
-  information_is_being_loaded: string;
-  delete: string;
-  are_you_sure: string;
-  close: string;
-  save: string;
-  cancel: string;
-  ok: string;
-  your_email: string;
-  enter_email: string;
-  your_password: string;
-  enter_password: string;
-  login: string;
-  logout: string;
-  forgot_password: string;
-  reset_password: string;
-  required_field: string;
-  choose_one: string;
-  everything: string;
-  number_of_rows: string;
-  modal_create: string;
-  modal_edit: string;
-}
-
-export type Localization = {
-  [lang: string]: LocalizationStrings;
-}
-
-export type Languages = {
-  [languageIso: string]: string;
-}
-export const defaultLanguages: Languages = {
-  en: "English",
-  fr: "Français",
-  nl: "Nederlands",
-} as const;
-
-export const defaultLocalization: Localization = {
-  en: {
-    select: "Select",
-    search: "Search",
-    no_information_to_display: "No information to display",
-    information_is_being_loaded: "The information is being loaded...",
-    delete: "Delete",
-    are_you_sure: "Are you sure?",
-    close: "Close",
-    save: "Save",
-    cancel: "Cancel",
-    ok: "OK",
-    your_email: "Your email",
-    enter_email: "Enter email address",
-    your_password: "Your password",
-    enter_password: "Enter password",
-    login: "Login",
-    logout: "Logout",
-    forgot_password: "Forgot password?",
-    reset_password: "Reset password",
-    required_field: "required",
-    choose_one: "Choose one",
-    everything: "Everything",
-    number_of_rows: "Number of rows",
-    modal_create: 'New',
-    modal_edit: 'Edit',
-  },
-  fr: {
-    no_information_to_display: "Sélectionner",
-    select: "Recherche",
-    search: "Aucune information à afficher",
-    information_is_being_loaded: "L'information est en cours de téléchargement...",
-    delete: "Supprimer",
-    are_you_sure: "Es-tu sûr?",
-    close: "Fermer",
-    save: "Sauvegarder",
-    cancel: "Annuler",
-    ok: "D'accord'",
-    your_email: "Votre adresse e-mail",
-    enter_email: "Entrez l'adresse e-mail",
-    your_password: "Votre mot de passe",
-    enter_password: "Entrez votre mot de passe",
-    login: "Connexion",
-    logout: "Se déconnecter",
-    forgot_password: "Mot de passe oublié?",
-    reset_password: "Réinitialiser le mot de passe",
-    required_field: "requis",
-    choose_one: "Choisissez-en un",
-    number_of_rows: "Tout",
-    everything: "Nombre de rangées",
-    modal_create: 'Nouveau',
-    modal_edit: 'Éditer',
-  },
-  nl: {
-    no_information_to_display: "Geen informatie om weer te geven.",
-    select: "Selecteer",
-    search: "Zoeken",
-    information_is_being_loaded: "De gegevens worden geladen...",
-    delete: "Verwijderen",
-    are_you_sure: "Weet u het zeker?",
-    close: "Sluiten",
-    save: "Opslaan",
-    cancel: "Annuleren",
-    ok: "OK",
-    your_email: "Uw e-mail",
-    enter_email: "Voer e-mailadres in",
-    your_password: "Uw wachtwoord",
-    enter_password: "Voer wachtwoord in",
-    login: "Inloggen",
-    logout: "Uitloggen",
-    forgot_password: "Wachtwoord vergeten?",
-    reset_password: "Wachtwoord resetten",
-    required_field: "verplicht",
-    choose_one: "Maak een keuze",
-    number_of_rows: "Aantal rijen",
-    everything: "Alles",
-    modal_create: 'Nieuw',
-    modal_edit: 'Bewerken',
-  },
-} as const;
-
+export type LocalizationFunction = (...args: (string | number)[]) => string;
+
+export type LocalizationElement = {
+  [languageString: string]: (string | LocalizationFunction)
+}
+
+export type AdditionalLocalization = {
+  [lang: string]: LocalizationElement;
+}
+
+export interface LocalizationStrings {
+  select: string;
+  search: string;
+  no_information_to_display: string;
+  information_is_being_loaded: string;
+  delete: string;
+  are_you_sure: string;
+  close: string;
+  save: string;
+  cancel: string;
+  ok: string;
+  your_email: string;
+  enter_email: string;
+  your_password: string;
+  enter_password: string;
+  login: string;
+  logout: string;
+  forgot_password: string;
+  reset_password: string;
+  required_field: string;
+  choose_one: string;
+  everything: string;
+  number_of_rows: string;
+  modal_create: string;
+  modal_edit: string;
+}
+
+export type Localization = {
+  [lang: string]: LocalizationStrings;
+}
+
+export type Languages = {
+  [languageIso: string]: string;
+}
+export const defaultLanguages: Languages = {
+  en: "English",
+  fr: "Français",
+  nl: "Nederlands",
+} as const;
+
+export const defaultLocalization: Localization = {
+  en: {
+    select: "Select",
+    search: "Search",
+    no_information_to_display: "No information to display",
+    information_is_being_loaded: "The information is being loaded...",
+    delete: "Delete",
+    are_you_sure: "Are you sure?",
+    close: "Close",
+    save: "Save",
+    cancel: "Cancel",
+    ok: "OK",
+    your_email: "Your email",
+    enter_email: "Enter email address",
+    your_password: "Your password",
+    enter_password: "Enter password",
+    login: "Login",
+    logout: "Logout",
+    forgot_password: "Forgot password?",
+    reset_password: "Reset password",
+    required_field: "required",
+    choose_one: "Choose one",
+    everything: "Everything",
+    number_of_rows: "Number of rows",
+    modal_create: 'New',
+    modal_edit: 'Edit',
+  },
+  fr: {
+    select: "Sélectionner",
+    search: "Recherche",
+    no_information_to_display: "Aucune information à afficher",
+    information_is_being_loaded: "L'information est en cours de téléchargement...",
+    delete: "Supprimer",
+    are_you_sure: "Êtes-vous sûr?",
+    close: "Fermer",
+    save: "Sauvegarder",
+    cancel: "Annuler",
+    ok: "D'accord'",
+    your_email: "Votre adresse e-mail",
+    enter_email: "Entrez l'adresse e-mail",
+    your_password: "Votre mot de passe",
+    enter_password: "Entrez votre mot de passe",
+    login: "Connexion",
+    logout: "Se déconnecter",
+    forgot_password: "Mot de passe oublié?",
+    reset_password: "Réinitialiser le mot de passe",
+    required_field: "requis",
+    choose_one: "Choisissez-en un",
+    everything: "Tout",
+    number_of_rows: "Nombre de rangées",
+    modal_create: 'Nouveau',
+    modal_edit: 'Éditer',
+  },
+  nl: {
+    select: "Selecteer",
+    search: "Zoeken",
+    no_information_to_display: "Geen informatie om weer te geven.",
+    information_is_being_loaded: "De gegevens worden geladen...",
+    delete: "Verwijderen",
+    are_you_sure: "Weet u het zeker?",
+    close: "Sluiten",
+    save: "Opslaan",
+    cancel: "Annuleren",
+    ok: "OK",
+    your_email: "Uw e-mail",
+    enter_email: "Voer e-mailadres in",
+    your_password: "Uw wachtwoord",
+    enter_password: "Voer wachtwoord in",
+    login: "Inloggen",
+    logout: "Uitloggen",
+    forgot_password: "Wachtwoord vergeten?",
+    reset_password: "Wachtwoord resetten",
+    required_field: "verplicht",
+    choose_one: "Maak een keuze",
+    everything: "Alles",
+    number_of_rows: "Aantal rijen",
+    modal_create: 'Nieuw',
+    modal_edit: 'Bewerken',
+  },
+} as const;
+

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;
+  }
+};