@helpwave/hightide 0.0.9 → 0.0.11

package/{globals.css → dist/css/globals.css}

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import '../../node_modules/tailwindcss/dist/lib.d.mts';
 
 /* variants */
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

package/dist/hooks/useHoverState.d.ts

@@ -0,0 +1,40 @@
+import type { Dispatch, SetStateAction } from 'react';
+type UseHoverStateProps = {
+    /**
+     * The delay after which the menu is closed in milliseconds
+     *
+     * default: 200ms
+     */
+    closingDelay: number;
+    /**
+     * Whether the hover state management should be disabled
+     *
+     * default: false
+     */
+    isDisabled: boolean;
+};
+type UseHoverStateReturnType = {
+    /**
+     * Whether the element is hovered
+     */
+    isHovered: boolean;
+    /**
+     * Function to change the current hover status
+     */
+    setIsHovered: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Handlers to pass on to the component that should be hovered
+     */
+    handlers: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+};
+/**
+ * @param props See UseHoverStateProps
+ *
+ * A react hook for managing the hover state of a component. The handlers provided should be
+ * forwarded to the component which should be hovered over
+ */
+export declare const useHoverState: (props?: Partial<UseHoverStateProps> | undefined) => UseHoverStateReturnType;
+export {};

package/dist/hooks/useHoverState.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+const defaultUseHoverStateProps = {
+    closingDelay: 200,
+    isDisabled: false,
+};
+/**
+ * @param props See UseHoverStateProps
+ *
+ * A react hook for managing the hover state of a component. The handlers provided should be
+ * forwarded to the component which should be hovered over
+ */
+export const useHoverState = (props = undefined) => {
+    const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+    const [isHovered, setIsHovered] = useState(false);
+    const [timer, setTimer] = useState();
+    const onMouseEnter = () => {
+        if (isDisabled) {
+            return;
+        }
+        clearTimeout(timer);
+        setIsHovered(true);
+    };
+    const onMouseLeave = () => {
+        if (isDisabled) {
+            return;
+        }
+        setTimer(setTimeout(() => {
+            setIsHovered(false);
+        }, closingDelay));
+    };
+    useEffect(() => {
+        if (timer) {
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    });
+    useEffect(() => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+    }, [isDisabled]); // eslint-disable-line react-hooks/exhaustive-deps
+    return {
+        isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }
+    };
+};

package/dist/hooks/useLanguage.d.ts

@@ -0,0 +1,17 @@
+import type { Dispatch, PropsWithChildren, SetStateAction } from 'react';
+export declare const languages: readonly ["en", "de"];
+export type Languages = typeof languages[number];
+export declare const languagesLocalNames: Record<Languages, string>;
+export declare const DEFAULT_LANGUAGE = "en";
+export type LanguageContextValue = {
+    language: Languages;
+    setLanguage: Dispatch<SetStateAction<Languages>>;
+};
+export declare const LanguageContext: import("react").Context<LanguageContextValue>;
+export declare const useLanguage: () => LanguageContextValue;
+export declare const useLocale: (overWriteLanguage?: Languages) => string;
+type ProvideLanguageProps = {
+    initialLanguage?: Languages;
+};
+export declare const ProvideLanguage: ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hooks/useLanguage.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import useLocalStorage from './useLocalStorage';
+export const languages = ['en', 'de'];
+export const languagesLocalNames = {
+    en: 'English',
+    de: 'Deutsch',
+};
+export const DEFAULT_LANGUAGE = 'en';
+export const LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+export const useLanguage = () => useContext(LanguageContext);
+export const useLocale = (overWriteLanguage) => {
+    const { language } = useLanguage();
+    const mapping = {
+        en: 'en-US',
+        de: 'de-DE'
+    };
+    return mapping[overWriteLanguage !== null && overWriteLanguage !== void 0 ? overWriteLanguage : language];
+};
+export const ProvideLanguage = ({ initialLanguage, children }) => {
+    const [language, setLanguage] = useState(initialLanguage !== null && initialLanguage !== void 0 ? initialLanguage : DEFAULT_LANGUAGE);
+    const [storedLanguage, setStoredLanguage] = useLocalStorage('language', initialLanguage !== null && initialLanguage !== void 0 ? initialLanguage : DEFAULT_LANGUAGE);
+    useEffect(() => {
+        if (language !== initialLanguage && initialLanguage) {
+            console.warn('LanguageProvider initial state changed: Prefer using useLanguages\'s setLanguage instead');
+            setLanguage(initialLanguage);
+        }
+    }, [initialLanguage]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        // TODO set locale of html tag here as well
+        setStoredLanguage(language);
+    }, [language, setStoredLanguage]);
+    useEffect(() => {
+        if (storedLanguage !== null) {
+            setLanguage(storedLanguage);
+            return;
+        }
+        const languagesToTestAgainst = Object.values(languages);
+        const matchingBrowserLanguages = window.navigator.languages
+            .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))
+            .filter(entry => entry !== undefined);
+        if (matchingBrowserLanguages.length === 0)
+            return;
+        const firstMatch = matchingBrowserLanguages[0];
+        setLanguage(firstMatch);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsx(LanguageContext.Provider, { value: {
+            language,
+            setLanguage
+        }, children: children }));
+};

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react';
+type SetValue<T> = Dispatch<SetStateAction<T>>;
+declare const useLocalStorage: <T>(key: string, initValue: T) => [T, SetValue<T>];
+export default useLocalStorage;

package/dist/hooks/useLocalStorage.js

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from 'react';
+import { LocalStorageService } from '../util/storage';
+const useLocalStorage = (key, initValue) => {
+    const get = useCallback(() => {
+        if (typeof window === 'undefined') {
+            return initValue;
+        }
+        const storageService = new LocalStorageService();
+        const value = storageService.get(key);
+        return value || initValue;
+    }, [initValue, key]);
+    const [storedValue, setStoredValue] = useState(get);
+    const setValue = useCallback(value => {
+        const newValue = value instanceof Function ? value(storedValue) : value;
+        const storageService = new LocalStorageService();
+        storageService.set(key, value);
+        setStoredValue(newValue);
+    }, [storedValue, setStoredValue, key]);
+    useEffect(() => {
+        setStoredValue(get());
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return [storedValue, setValue];
+};
+export default useLocalStorage;

package/dist/hooks/useOutsideClick.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const useOutsideClick: <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => void;

package/dist/hooks/useOutsideClick.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+export const useOutsideClick = (refs, handler) => {
+    useEffect(() => {
+        const listener = (event) => {
+            // returning means not "not clicking outside"
+            // if no target exists, return
+            if (event.target === null)
+                return;
+            // if the target is a ref's element or descendent thereof, return
+            if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
+                return;
+            }
+            handler();
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [refs, handler]);
+};

package/dist/hooks/useSaveDelay.d.ts

@@ -0,0 +1,5 @@
+declare function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number): {
+    restartTimer: (onSave: () => void) => void;
+    clearUpdateTimer: (hasSaved?: boolean) => void;
+};
+export default useSaveDelay;

package/dist/hooks/useSaveDelay.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+function useSaveDelay(setNotificationStatus, delay) {
+    const [updateTimer, setUpdateTimer] = useState(undefined);
+    const [notificationTimer, setNotificationTimer] = useState(undefined);
+    const restartTimer = (onSave) => {
+        clearTimeout(updateTimer);
+        setUpdateTimer(setTimeout(() => {
+            onSave();
+            setNotificationStatus(true);
+            // Show Saved Notification for fade animation duration
+            clearTimeout(notificationTimer);
+            setNotificationTimer(setTimeout(() => {
+                setNotificationStatus(false);
+                clearTimeout(notificationTimer);
+            }, delay));
+            clearTimeout(updateTimer);
+        }, delay));
+    };
+    const clearUpdateTimer = (hasSaved = true) => {
+        clearTimeout(updateTimer);
+        if (hasSaved) {
+            setNotificationStatus(true);
+            clearTimeout(notificationTimer);
+            setNotificationTimer(setTimeout(() => {
+                setNotificationStatus(false);
+                clearTimeout(notificationTimer);
+            }, delay));
+        }
+        else {
+            setNotificationStatus(false);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            clearTimeout(updateTimer);
+            clearTimeout(notificationTimer);
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return { restartTimer, clearUpdateTimer };
+}
+export default useSaveDelay;

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,16 @@
+import type { Dispatch, SetStateAction, PropsWithChildren } from 'react';
+import type { Translation } from './useTranslation';
+export type ThemeType = 'light' | 'dark';
+export type ThemeTypeTranslation = Record<ThemeType, string>;
+export declare const defaultThemeTypeTranslation: Translation<ThemeTypeTranslation>;
+type ThemeContextType = {
+    theme: ThemeType;
+    setTheme: Dispatch<SetStateAction<ThemeType>>;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextType>;
+type ThemeProviderProps = {
+    initialTheme?: ThemeType;
+};
+export declare const ThemeProvider: ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/dist/hooks/useTheme.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { createContext, useState, useEffect } from 'react';
+export const defaultThemeTypeTranslation = {
+    en: {
+        dark: 'Dark',
+        light: 'Light'
+    },
+    de: {
+        dark: 'Dunkel',
+        light: 'Hell'
+    }
+};
+export const ThemeContext = createContext({
+    theme: 'light',
+    setTheme: (_) => {
+    },
+});
+export const ThemeProvider = ({ children, initialTheme = 'light' }) => {
+    const [theme, setTheme] = useState(initialTheme);
+    useEffect(() => {
+        if (theme !== initialTheme) {
+            console.warn('ThemeProvider initial state changed: Prefer using useTheme\'s setTheme instead');
+            setTheme(initialTheme);
+        }
+    }, [initialTheme]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        document.documentElement.setAttribute('data-theme', theme);
+    }, [theme]);
+    return (_jsx(ThemeContext.Provider, { value: { theme, setTheme }, children: children }));
+};
+export const useTheme = () => useContext(ThemeContext);

package/dist/hooks/useTranslation.d.ts

@@ -0,0 +1,24 @@
+import type { Languages } from './useLanguage';
+export type Translation<T> = Record<Languages, T>;
+type OverwriteTranslationType<Translation extends Record<string, unknown>> = {
+    language?: Languages;
+    translation?: Partial<Record<Languages, Partial<Translation>>>;
+};
+/**
+ * Adds the `language` prop to the component props.
+ *
+ * @param Translation the type of the translation object
+ *
+ * @param Props the type of the component props, defaults to `Record<string, never>`,
+ *              if you don't expect any other props other than `language` and get an
+ *              error when using your component (because it uses `forwardRef` etc.)
+ *              you can try out `Record<string, unknown>`, this might resolve your
+ *              problem as `SomeType & never` is still `never` but `SomeType & unknown`
+ *              is `SomeType` which means that adding back props (like `ref` etc.)
+ *              works properly
+ */
+export type PropsForTranslation<Translation extends Record<string, unknown>, Props = Record<string, never>> = Props & {
+    overwriteTranslation?: OverwriteTranslationType<Translation>;
+};
+export declare const useTranslation: <Translation extends Record<string, unknown>>(defaults: Record<Languages, Translation>, translationOverwrite?: OverwriteTranslationType<Translation>) => Translation;
+export {};

package/dist/hooks/useTranslation.js

@@ -0,0 +1,11 @@
+import { useLanguage } from './useLanguage';
+export const useTranslation = (defaults, translationOverwrite = {}) => {
+    const { language: languageProp, translation: overwrite } = translationOverwrite;
+    const { language: inferredLanguage } = useLanguage();
+    const usedLanguage = languageProp !== null && languageProp !== void 0 ? languageProp : inferredLanguage;
+    let defaultValues = defaults[usedLanguage];
+    if (overwrite && overwrite[usedLanguage]) {
+        defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+    }
+    return defaultValues;
+};

package/dist/util/array.d.ts

@@ -0,0 +1,23 @@
+export declare const equalSizeGroups: <T>(array: T[], groupSize: number) => T[][];
+/**
+ * @param start
+ * @param end inclusive
+ * @param allowEmptyRange Whether the range can be defined empty via end < start
+ */
+export declare const range: (start: number, end: number, allowEmptyRange?: boolean) => number[];
+/** Finds the closest match
+ * @param list The list of all possible matches
+ * @param firstCloser Return whether item1 is closer than item2
+ */
+export declare const closestMatch: <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => T;
+/**
+ * returns the item in middle of a list and its neighbours before and after
+ * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]
+ */
+export declare const getNeighbours: <T>(list: T[], item: T, neighbourDistance?: number) => T[];
+export declare const createLoopingListWithIndex: <T>(list: T[], startIndex?: number, length?: number, forwards?: boolean) => [number, T][];
+export declare const createLoopingList: <T>(list: T[], startIndex?: number, length?: number, forwards?: boolean) => T[];
+export declare const ArrayUtil: {
+    unique: <T>(list: T[]) => T[];
+    difference: <T>(list: T[], removeList: T[]) => T[];
+};

package/dist/util/array.js

@@ -0,0 +1,103 @@
+export const equalSizeGroups = (array, groupSize) => {
+    if (groupSize <= 0) {
+        console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
+        return [[...array]];
+    }
+    const groups = [];
+    for (let i = 0; i < array.length; i += groupSize) {
+        groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
+    }
+    return groups;
+};
+/**
+ * @param start
+ * @param end inclusive
+ * @param allowEmptyRange Whether the range can be defined empty via end < start
+ */
+export const range = (start, end, allowEmptyRange = false) => {
+    if (end < start) {
+        if (!allowEmptyRange) {
+            console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`);
+        }
+        return [];
+    }
+    return Array.from({ length: end - start + 1 }, (_, index) => index + start);
+};
+/** Finds the closest match
+ * @param list The list of all possible matches
+ * @param firstCloser Return whether item1 is closer than item2
+ */
+export const closestMatch = (list, firstCloser) => {
+    return list.reduce((item1, item2) => {
+        return firstCloser(item1, item2) ? item1 : item2;
+    });
+};
+/**
+ * returns the item in middle of a list and its neighbours before and after
+ * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]
+ */
+export const getNeighbours = (list, item, neighbourDistance = 2) => {
+    const index = list.indexOf(item);
+    const totalItems = neighbourDistance * 2 + 1;
+    if (list.length < totalItems) {
+        console.warn('List is to short');
+        return list;
+    }
+    if (index === -1) {
+        console.error('item not found in list');
+        return list.splice(0, totalItems);
+    }
+    let start = index - neighbourDistance;
+    if (start < 0) {
+        start += list.length;
+    }
+    const end = (index + neighbourDistance + 1) % list.length;
+    const result = [];
+    let ignoreOnce = list.length === totalItems;
+    for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {
+        result.push(list[i]);
+        if (end === i && ignoreOnce) {
+            ignoreOnce = false;
+        }
+    }
+    return result;
+};
+export const createLoopingListWithIndex = (list, startIndex = 0, length = 0, forwards = true) => {
+    if (length < 0) {
+        console.warn(`createLoopingList: length must be >= 0, given ${length}`);
+    }
+    else if (length === 0) {
+        length = list.length;
+    }
+    const returnList = [];
+    if (forwards) {
+        for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {
+            returnList.push([i, list[i]]);
+        }
+    }
+    else {
+        for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {
+            returnList.push([i, list[i]]);
+        }
+    }
+    return returnList;
+};
+export const createLoopingList = (list, startIndex = 0, length = 0, forwards = true) => {
+    return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item);
+};
+export const ArrayUtil = {
+    unique: (list) => {
+        const seen = new Set();
+        return list.filter((item) => {
+            if (seen.has(item)) {
+                return false;
+            }
+            seen.add(item);
+            return true;
+        });
+    },
+    difference: (list, removeList) => {
+        const remove = new Set(removeList);
+        return list.filter((item) => !remove.has(item));
+    }
+};

package/{util/builder.ts → dist/util/builder.d.ts}

@@ -3,7 +3,4 @@
  * @param value The value to update which gets return with the same reference
  * @param update The updates to apply on the object
  */
-export const builder = <T>(value: T, update: (value: T) => void): T => {
-  update(value)
-  return value
-}
+export declare const builder: <T>(value: T, update: (value: T) => void) => T;

package/dist/util/builder.js

@@ -0,0 +1,9 @@
+/**
+ * A simple function that implements the builder pattern
+ * @param value The value to update which gets return with the same reference
+ * @param update The updates to apply on the object
+ */
+export const builder = (value, update) => {
+    update(value);
+    return value;
+};

package/dist/util/date.d.ts

@@ -0,0 +1,28 @@
+export declare const monthsList: readonly ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+export type Month = typeof monthsList[number];
+export declare const weekDayList: readonly ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+export type WeekDay = typeof weekDayList[number];
+export declare const formatDate: (date: Date) => string;
+export declare const formatDateTime: (date: Date) => string;
+export declare const getDaysInMonth: (year: number, month: number) => number;
+export type Duration = {
+    years?: number;
+    months?: number;
+    days?: number;
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    milliseconds?: number;
+};
+export declare const changeDuration: (date: Date, duration: Duration, isAdding?: boolean) => Date;
+export declare const addDuration: (date: Date, duration: Duration) => Date;
+export declare const subtractDuration: (date: Date, duration: Duration) => Date;
+export declare const getBetweenDuration: (startDate: Date, endDate: Date) => Duration;
+/** Checks if a given date is in the range of two dates
+ *
+ * An undefined value for startDate or endDate means no bound for the start or end respectively
+ */
+export declare const isInTimeSpan: (value: Date, startDate?: Date, endDate?: Date) => boolean;
+/** Compare two dates on the year, month, day */
+export declare const equalDate: (date1: Date, date2: Date) => boolean;
+export declare const getWeeksForCalenderMonth: (date: Date, weekStart: WeekDay, weeks?: number) => Date[][];