@tui-cruises/mein-schiff-web-react-component-library 2.0.0-rc.1

package/src/hooks/use-intersection-observer.ts

@@ -0,0 +1,190 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+
+/** The hook internal state. */
+type State = {
+  /** A boolean indicating if the element is intersecting. */
+  isIntersecting: boolean;
+  /** The intersection observer entry. */
+  entry?: IntersectionObserverEntry;
+};
+
+/** Represents the options for configuring the Intersection Observer. */
+type UseIntersectionObserverOptions = {
+  /**
+   * The element that is used as the viewport for checking visibility of the target.
+   * @default null
+   */
+  root?: Element | Document | null;
+  /**
+   * A margin around the root.
+   * @default '0%'
+   */
+  rootMargin?: string;
+  /**
+   * A threshold indicating the percentage of the target's visibility needed to trigger the callback.
+   * @default 0
+   */
+  threshold?: number | number[];
+  /**
+   * If true, freezes the intersection state once the element becomes visible.
+   * @default false
+   */
+  freezeOnceVisible?: boolean;
+  /**
+   * A callback function to be invoked when the intersection state changes.
+   * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
+   * @param {IntersectionObserverEntry} entry - The intersection observer Entry.
+   * @default undefined
+   */
+  onChange?: (
+    isIntersecting: boolean,
+    entry: IntersectionObserverEntry,
+  ) => void;
+  /**
+   * The initial state of the intersection.
+   * @default false
+   */
+  initialIsIntersecting?: boolean;
+};
+
+/**
+ * The return type of the useIntersectionObserver hook.
+ *
+ * Supports both tuple and object destructing.
+ * @param {(node: Element | null) => void} ref - The ref callback function.
+ * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
+ * @param {IntersectionObserverEntry | undefined} entry - The intersection observer Entry.
+ */
+type IntersectionReturn = [
+  (node?: Element | null) => void,
+  boolean,
+  IntersectionObserverEntry | undefined,
+] & {
+  ref: (node?: Element | null) => void;
+  isIntersecting: boolean;
+  entry?: IntersectionObserverEntry;
+};
+
+/**
+ * Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+ * @param {UseIntersectionObserverOptions} options - The options for the Intersection Observer.
+ * @returns {IntersectionReturn} The ref callback, a boolean indicating if the element is intersecting and the intersection observer entry.
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @example
+ * ```tsx
+ * // Example 1
+ * const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
+ * ```
+ *
+ * ```tsx
+ * // Example 2
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ * ```
+ */
+export function useIntersectionObserver({
+  threshold = 0,
+  root = null,
+  rootMargin = '0%',
+  freezeOnceVisible = false,
+  initialIsIntersecting = false,
+  onChange,
+}: UseIntersectionObserverOptions = {}): IntersectionReturn {
+  const [ref, setRef] = useState<Element | null>(null);
+
+  const [state, setState] = useState<State>(() => ({
+    isIntersecting: initialIsIntersecting,
+    entry: undefined,
+  }));
+
+  const callbackRef = useRef<UseIntersectionObserverOptions['onChange']>();
+
+  callbackRef.current = onChange;
+
+  const frozen = state.entry?.isIntersecting && freezeOnceVisible;
+
+  useEffect(() => {
+    // Ensure we have a ref to observe
+    if (!ref) return;
+
+    // Ensure the browser supports the Intersection Observer API
+    if (!('IntersectionObserver' in window)) return;
+
+    // Skip if frozen
+    if (frozen) return;
+
+    let unobserve: (() => void) | undefined;
+
+    const observer = new IntersectionObserver(
+      (entries: IntersectionObserverEntry[]): void => {
+        const thresholds = Array.isArray(observer.thresholds)
+          ? observer.thresholds
+          : [observer.thresholds];
+
+        entries.forEach(entry => {
+          const isIntersecting =
+            entry.isIntersecting &&
+            thresholds.some(threshold => entry.intersectionRatio >= threshold);
+
+          setState({ isIntersecting, entry });
+
+          if (callbackRef.current) {
+            callbackRef.current(isIntersecting, entry);
+          }
+
+          if (isIntersecting && freezeOnceVisible && unobserve) {
+            unobserve();
+            unobserve = undefined;
+          }
+        });
+      },
+      { threshold, root, rootMargin },
+    );
+
+    observer.observe(ref);
+
+    return () => {
+      observer.disconnect();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    ref,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(threshold),
+    root,
+    rootMargin,
+    frozen,
+    freezeOnceVisible,
+  ]);
+
+  // ensures that if the observed element changes, the intersection observer is reinitialized
+  const prevRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    if (
+      !ref &&
+      state.entry?.target &&
+      !freezeOnceVisible &&
+      !frozen &&
+      prevRef.current !== state.entry.target
+    ) {
+      prevRef.current = state.entry.target;
+      setState({ isIntersecting: initialIsIntersecting, entry: undefined });
+    }
+  }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);
+
+  const result = [
+    setRef,
+    !!state.isIntersecting,
+    state.entry,
+  ] as IntersectionReturn;
+
+  // Support object destructuring, by adding the specific values.
+  result.ref = result[0];
+  result.isIntersecting = result[1];
+  result.entry = result[2];
+
+  return result;
+}

package/src/hooks/use-screen-name-at-least.ts

@@ -0,0 +1,32 @@
+import { useScreenName } from './use-screen-name';
+import { ScreenName } from '../helpers/screen';
+
+/**
+ * Returns true if the width of current screen name matches at least the width of the given screen name.
+ * Supply an optional `ssrScreenName` for initial rendering.
+ *
+ * ```tsx
+ * const isAtLeastMd = useScreenNameAtLeast('md');
+ *
+ * if (isAtLeastMd) {
+ *   ...
+ * }
+ * ```
+ */
+export const useScreenNameAtLeast = (
+  screenName?: ScreenName,
+  ssrScreenName?: ScreenName,
+): boolean => {
+  const current = useScreenName(ssrScreenName);
+
+  if (screenName === current) {
+    return true;
+  }
+
+  const order: ScreenName[] = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+  const currIdx = order.findIndex(name => name === current);
+  const desiredIdx = order.findIndex(name => name === screenName);
+
+  return currIdx >= desiredIdx;
+};

package/src/hooks/use-screen-name.ts

@@ -0,0 +1,34 @@
+import { useActiveScreenNames } from './use-active-screen-names';
+import { ScreenName } from '../helpers/screen';
+
+type OptionalScreenName = ScreenName | undefined;
+
+/**
+ * Returns the current screen name.
+ * Supply an optional SSR screen name if desired.
+ *
+ * ```tsx
+ * const currentScreenName = useScreenName();
+ * ```
+ */
+export const useScreenName = (
+  ssrScreenName?: ScreenName,
+): OptionalScreenName => {
+  const defaults = {
+    xs: false,
+    sm: false,
+    md: false,
+    lg: false,
+    xl: false,
+    xxl: false,
+  };
+
+  if (ssrScreenName) {
+    defaults[ssrScreenName] = true;
+  }
+
+  const active = useActiveScreenNames(defaults);
+  const names = Object.keys(active) as ScreenName[];
+
+  return names.filter(name => active[name]).reverse()[0];
+};

package/src/hooks/use-store.ts

@@ -0,0 +1,45 @@
+'use client';
+
+import type { Store } from '../helpers/store';
+import { useEffect, useState } from 'react';
+
+type ValueFromStore<S extends Store> = ReturnType<S['get']>;
+type UseSharedStoreReturnValue<S extends Store> = [ValueFromStore<S>, S['set']];
+
+/**
+ * Use a Store.
+ *
+ * ```tsx
+ * import { myCountStore } from './../stores';
+ *
+ * const MyComponent = () => {
+ *   const [count, setCount] = useStore(myCountStore);
+ *
+ *   return (
+ *     <div>
+ *       Value: { count }
+ *       <br />
+ *       <button onClick={() => setCount(prev => prev + 1)}>
+ *         Increase Count
+ *       </button>
+ *       <br />
+ *       <button onClick={() => setCount(0)}>
+ *         Reset Count
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useStore = <S extends Store<any>>(
+  store: S,
+  initial?: ValueFromStore<S>,
+): UseSharedStoreReturnValue<S> => {
+  const [value, setValue] = useState<ValueFromStore<S>>(initial ?? store.get());
+
+  useEffect(() => {
+    return store.onChange(value => setValue(value));
+  }, [store]);
+
+  return [value, store.set];
+};

package/src/hooks/use-toasts.ts

@@ -0,0 +1,111 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { ToastInStore, toastsStore } from '../stores/toasts-store';
+import { useStore } from './use-store';
+
+type PushOptions = {
+  title: string;
+  text?: ReactNode;
+  duration?: number;
+};
+
+type PushOptionsOrMessage = PushOptions | string;
+
+type PushHandler = (options: PushOptionsOrMessage) => ToastRemoveHandler;
+
+type UseToastsReturnValue = {
+  push: PushHandler;
+};
+
+export type ToastRemoveHandler = () => void;
+
+/**
+ * Transforms {@link PushOptionsOrMessage} to a {@link ToastInStore}.
+ */
+const pushOptionsToToast = (options: PushOptionsOrMessage): ToastInStore => {
+  // Transform a string to the simplest possible PushOptions object.
+  if (typeof options === 'string') {
+    options = {
+      title: options,
+    };
+  }
+
+  // Destruct the options and assign default values.
+  const { text, title, duration = 3000 } = options;
+
+  // Let's try to create a somewhat unique ID.
+  const id = Date.now() + Math.round(Math.random() * 999);
+
+  return {
+    id,
+    text,
+    title,
+    duration,
+  };
+};
+
+/**
+ * Returns helpers for managing toast messages in the toast store.
+ *
+ * ### Push a Message
+ *
+ * In order to push a message invoke the returned `push()` function.
+ *
+ * ```tsx
+ * const { push } = useToasts();
+ *
+ * // The most basic example -- pushes only a toast with a title.
+ * push('Please verify your email address before you attempt to sign in.');
+ *
+ * push({
+ *   title: 'Your account has been created',
+ *   text: 'Please verify your email address before you attempt to sign in.',
+ * });
+ *
+ * // This toast message disappears after 10 seconds.
+ * push({
+ *   title: 'Your account has been created',
+ *   text: 'Please verify your email address before you attempt to sign in.',
+ *   duration: 10000,
+ * });
+ * ```
+ *
+ * ### Remove a Pushed Message
+ *
+ * You can remove a pushed message by invoking the return value of the `push()` function.
+ *
+ * ```tsx
+ * // This toast message stays visible until removed.
+ *
+ * const removeMessage = push({
+ *   title: 'Your account has been created',
+ *   text: 'Please verify your email address before you attempt to sign in.',
+ *   duration: Infinity,
+ * });
+ *
+ * // Let's remove it manually after 5 seconds.
+ * setTimeout(() => {
+ *   removeMessage();
+ * }, 5000);
+ * ```
+ */
+export const useToasts = (): UseToastsReturnValue => {
+  // Get the current toasts & the SetToastsAction
+  const [, setToasts] = useStore(toastsStore);
+
+  return {
+    push: options => {
+      // Get a Toast from the options
+      const toast = pushOptionsToToast(options);
+
+      // Push the toast to the current stack of toasts.
+      setToasts(prev => [...prev, toast]);
+
+      // Return the function to remove the toast.
+      return () => {
+        setToasts(prev => prev.filter(({ id }) => id !== toast.id));
+      };
+    },
+  };
+};

package/src/stores/toasts-store.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { createStore } from '../helpers/store';
+
+export type ToastInStore = {
+  id: number;
+  title: string;
+  text?: ReactNode;
+  duration: number;
+};
+
+export const toastsStore = createStore<ToastInStore[]>([]);