@kanda-libs/ks-component-ts 0.2.254 → 0.2.256-qa

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useFuse.ts

@@ -0,0 +1,86 @@
+import Fuse from 'fuse.js';
+import {
+  type ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { useDebounce } from 'use-debounce';
+import type { StringIndexedObject } from '~/types';
+
+export interface FuseValue<T = StringIndexedObject> {
+  docs: T[];
+}
+
+export interface FuseHit<T> {
+  item: T;
+  refIndex: number;
+}
+
+export interface FuseHook<T> {
+  hits: FuseHit<T>[];
+  handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+  setQuery: Dispatch<SetStateAction<string>>;
+  query: string;
+}
+
+export default function useFuse<T>(
+  list: T[],
+  options: StringIndexedObject,
+  initialQuery: string,
+  debounce: number = 100,
+): FuseHook<T> {
+  const isMounted = useRef(false);
+
+  const [originalQuery, setQuery] = useState(initialQuery || '');
+  const [query] = useDebounce(originalQuery, debounce || 100);
+
+  // let's memoize the fuse instance for performances
+  const fuse = useMemo(() => {
+    const { limit, matchAllOnEmptyQuery, ...fuseOptions } = options;
+
+    return new Fuse(list, fuseOptions);
+  }, [list, options]);
+
+  // memoize results whenever the query or options change
+  const hits = useMemo(
+    // if query is empty and `matchAllOnEmptyQuery` is `true` then return all list
+    // NOTE: we remap the results to match the return structure of `fuse.search()`
+    () =>
+      !query && options.matchAllOnEmptyQuery
+        ? (fuse.getIndex() as unknown as FuseValue<T>).docs
+            .slice(0, options.limit)
+            .map((item: T, refIndex: number) => ({ item, refIndex }))
+        : fuse.search(query, { limit: options.limit }),
+    [fuse, options, query],
+  );
+
+  // pass a handling helper to speed up implementation
+  const handleSearch = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value.trim()),
+    [setQuery],
+  );
+
+  /**
+   * Handle mount
+   * */
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  // still returning `setQuery` for custom handler implementations
+  return {
+    hits,
+    handleSearch,
+    setQuery,
+    query,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useHelpcrunch.ts

@@ -0,0 +1,70 @@
+import type { StringIndexedObject } from '~/types';
+
+export interface HelpCrunchHook {
+  openChat: () => void;
+  closeChat: () => void;
+  showNewMessage: (message: string) => void;
+  showProactiveMessage: (id: string | number) => void;
+  update: (settings: StringIndexedObject) => void;
+}
+
+/**
+ * Hook for using helpcrunch Javascript API Methods.
+ *
+ * Docs:
+ * - Methods:
+ *   https://docs.helpcrunch.com/developers/methods
+ */
+export default function useHelpcrunch(): HelpCrunchHook {
+  const openChat = () => {
+    // If helpcrunch isn't available, return
+    if (!window.HelpCrunch) return;
+    // show chat window
+    window.HelpCrunch('openChat');
+  };
+
+  const closeChat = () => {
+    // If helpcrunch isn't available, return
+    if (!window.HelpCrunch) return;
+    // hide chat window
+    window.HelpCrunch('closeChat');
+  };
+
+  const showNewMessage = (message: string) => {
+    // If helpcrunch isn't available, return
+    if (!window.HelpCrunch) return;
+    window.HelpCrunch('typeUserMessage', message);
+  };
+
+  const showProactiveMessage = (id: string | number): void => {
+    // If helpcrunch isn't available, return
+    if (!window.HelpCrunch) return;
+    window.HelpCrunch('sendProactiveChatAutoMessage', id as string);
+  };
+
+  /**
+   * Function calls the HelpCrunch update method
+   * @param {Object} - Settings/Data (HelpCrunch setings) to update HelpCrunch with,
+   * allowed attributes contained in Attributes & Objects docs link above
+   */
+  const update = (settings: StringIndexedObject) => {
+    // If helpcrunch isn't available, return
+    if (!window.HelpCrunch) return;
+    // Check the settings passed is an object - if so, run the update method
+    if (
+      typeof settings === 'object' &&
+      settings !== null &&
+      !Array.isArray(settings)
+    ) {
+      window.HelpCrunch('updateUser', settings);
+    }
+  };
+
+  return {
+    openChat,
+    closeChat,
+    showNewMessage,
+    showProactiveMessage,
+    update,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useIsDesktop/index.tsx

@@ -0,0 +1,11 @@
+import { DESKTOP_MEDIA_QUERY } from './isDesktop-constants';
+
+import useMediaQuery from '../useMediaQuery';
+
+/**
+ * The hook to check it current view is on desktop
+ * @return {Boolean} true if it's desktop
+ */
+const useIsDesktop = () => useMediaQuery(DESKTOP_MEDIA_QUERY);
+
+export default useIsDesktop;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useIsDesktop/isDesktop-constants.tsx

@@ -0,0 +1 @@
+export const DESKTOP_MEDIA_QUERY = "(min-width: 768px)";

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useIsMounted.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+export type IsMountedHook = boolean;
+
+export default function useIsMounted(): IsMountedHook {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return isMounted.current;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useMediaQuery/index.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState, useCallback } from 'react';
+
+import { getMatches } from './mediaQuery-functions';
+
+/**
+ * The hook to match media queries.
+ * Returns true if there are matches for media query
+ *
+ * @param {string} query media query ex: (min-width: 768px)
+ * @return {Boolean} true if it matches
+ */
+
+const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  const handleChange = useCallback(
+    () => setMatches(getMatches(query)),
+    [query],
+  );
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia - if/else used for Safari 14 or before, see:
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener#browser_compatibility
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener('change', handleChange);
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query, handleChange]);
+
+  return matches;
+};
+
+export default useMediaQuery;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useMediaQuery/mediaQuery-functions.tsx

@@ -0,0 +1,7 @@
+export const getMatches = (query: string): boolean => {
+  // Prevents SSR issues
+  if (typeof window !== "undefined") {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useMousePosition.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState, useRef, type MutableRefObject } from 'react';
+
+export interface MousePositionHook {
+  x: number | null;
+  y: number | null;
+}
+
+interface HeightAndWidth {
+  height: number;
+  width: number;
+}
+
+export default function useMousePosition(
+  ref: MutableRefObject<HTMLElement> | null = null,
+  offsetY = 10,
+  offsetX = 35,
+): MousePositionHook {
+  const [mousePosition, setMousePosition] = useState<MousePositionHook>({
+    x: null,
+    y: null,
+  });
+
+  const heightAndWidth = useRef<HeightAndWidth>({ height: 0, width: 0 });
+
+  useEffect(() => {
+    if (ref?.current) {
+      heightAndWidth.current.height = ref.current.offsetHeight;
+      heightAndWidth.current.width = ref.current.offsetWidth;
+    }
+  }, [ref]);
+
+  useEffect(() => {
+    const updateMousePosition = ({ pageX, pageY }: MouseEvent) => {
+      // This is used for positioning in the bottom right of the mouse. Useful for components
+      // such as popovers but it's also optional
+      setMousePosition({
+        x: pageX - heightAndWidth.current.width / 4 + offsetX,
+        y: pageY - heightAndWidth.current.height / 4 + offsetY,
+      });
+    };
+
+    window.addEventListener('mousemove', updateMousePosition);
+    return () => {
+      window.removeEventListener('mousemove', updateMousePosition);
+    };
+  }, []);
+  return mousePosition;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useOuterClick.ts

@@ -0,0 +1,36 @@
+import { useRef, useEffect, MutableRefObject } from 'react';
+
+export type OuterClickHook = MutableRefObject<HTMLElement | undefined>;
+
+/**
+ * Hook that detect when the click is outside of the component
+ */
+export default function useOuterClick(
+  callback: (e: MouseEvent) => void,
+): OuterClickHook {
+  /**
+   * Stores callback on ref so the effect can be called on mount / unmount
+   */
+  const callbackRef = useRef(callback);
+  const innerRef = useRef<HTMLElement>();
+
+  /**
+   * Sets listeners on mount and removes them on unmount,
+   * calles callback if click target is outside of component suplied with ref
+   */
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (
+        innerRef.current &&
+        callbackRef.current &&
+        !innerRef.current.contains(e.target as HTMLElement)
+      )
+        callbackRef.current(e);
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  return innerRef;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/usePass.ts

@@ -0,0 +1,22 @@
+import useVariants from '~/hooks/useVariants';
+import type { StringIndexedObject } from 'types';
+import { useClasses } from '~/hooks/index';
+import useProps from '~/hooks/useProps';
+
+export type Options = StringIndexedObject;
+
+export default function usePass(options: Options = {}) {
+  const { props, helpers = {} } = options;
+
+  const variants = useVariants(options.variants || {});
+
+  const classNames = useClasses(options.classNames || {}, {
+    variants,
+  });
+
+  return useProps(props || {}, {
+    classNames,
+    variants,
+    helpers,
+  });
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useProps/constants.ts

@@ -0,0 +1,2 @@
+export const VARIANT_REGEX =
+  /@(?<variantPair>(?<variant>[^.]+).(?<value>[^.]+)[.])/g;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useProps/helpers.ts

@@ -0,0 +1,125 @@
+import set from 'lodash.set';
+import { VARIANT_REGEX } from './constants';
+import type { StringIndexedObject, Variants } from 'types';
+
+export const flatObject = (input: StringIndexedObject): StringIndexedObject => {
+  const flat = (
+    res: StringIndexedObject,
+    key: string,
+    val: StringIndexedObject,
+    pre = '',
+  ): StringIndexedObject => {
+    const prefix = [pre, key].filter((v) => v).join('.');
+    return typeof val === 'object'
+      ? Object.keys(val).reduce(
+          (prev, curr) => flat(prev, curr, val[curr], prefix),
+          res,
+        )
+      : Object.assign(res, { [prefix]: val });
+  };
+
+  return Object.keys(input).reduce(
+    (prev, curr) => flat(prev, curr, input[curr]),
+    {},
+  );
+};
+
+export const capitalize = (text: string) => {
+  if (typeof text !== 'string') return '';
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+
+interface Match {
+  groups: {
+    variant: string;
+    value: string;
+  };
+}
+
+/**
+ * Formats object values
+ * @param {Object} object
+ * @param {Function} formatter
+ * @returns {Object} formated object
+ */
+export const formatObject = (
+  object: StringIndexedObject,
+  variants: Variants,
+) => {
+  const flat = flatObject(object);
+
+  const entries = Object.entries(flat).filter(([key]) => {
+    const matches = Array.from(
+      `${key}.`.matchAll(VARIANT_REGEX),
+    ) as unknown as Match[];
+
+    return matches.every((match) => {
+      const { variant, value } = match.groups;
+
+      return (
+        value === `${variants[variant]}` ||
+        value === `${Boolean(variants[variant])}`
+      );
+    });
+  });
+
+  const replaced = entries.map(([key, value]) => [
+    `${key}.`.replace(VARIANT_REGEX, '').slice(0, -1),
+    value,
+  ]);
+
+  return replaced.reduce(
+    (prev, [key, value]) => set(prev, key as string, value),
+    {},
+  );
+};
+
+/**
+ * Creates a function name from className
+ * @param {String} className
+ * @returns {String} function name
+ */
+export const getFunctionName = (className: string) =>
+  `get${capitalize(className)}Props`;
+
+/**
+ * Create getters
+ * @param {Object} formattedProps
+ * @param {Object} classNames
+ * @param {Object} helpers
+ * @returns {Object} getter functions
+ */
+export const createGetters = (
+  formattedProps: StringIndexedObject,
+  classNames: StringIndexedObject,
+  helpers: StringIndexedObject,
+) => {
+  const allKeys = [
+    ...new Set([...Object.keys(formattedProps), ...Object.keys(classNames)]),
+  ];
+
+  return Object.fromEntries(
+    allKeys.map((className) => [
+      getFunctionName(className),
+      (viewProps = {}) => {
+        const helper = helpers?.[className];
+
+        const initialProps = {
+          ...formattedProps?.[className],
+          ...(classNames[className] && { className: classNames[className] }),
+        };
+
+        if (typeof helper === 'function')
+          return helper({}, initialProps, viewProps);
+
+        return Object.entries(viewProps).reduce((prevProps, [key, value]) => {
+          if (typeof helper?.[key] === 'function') {
+            return helper?.[key]({ key }, prevProps, value);
+          }
+
+          return { ...prevProps, [key]: value };
+        }, initialProps);
+      },
+    ]),
+  );
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useProps/index.ts

@@ -0,0 +1,40 @@
+import type { StringIndexedObject, Variants } from 'types';
+import { createGetters, formatObject } from './helpers';
+import type { HTMLAttributes } from 'react';
+import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
+import type { IconProps } from '~/components/Icon/types';
+
+export interface Options {
+  helpers: object;
+  variants: Variants;
+  classNames: StringIndexedObject;
+}
+
+interface PropsGetters {
+  getButtonProps: (
+    args: StringIndexedObject,
+  ) => HTMLAttributes<HTMLButtonElement>;
+  getIconProps: (args: StringIndexedObject) => IconProps;
+  getSkeletonProps: (args: SkeletonLoaderProps) => IconProps;
+}
+
+export interface PropsHook extends PropsGetters {
+  classNames: StringIndexedObject;
+}
+
+export default function useProps(props: object, options: Options): PropsHook {
+  const { helpers, variants, classNames } = options;
+
+  const formattedProps = formatObject(props, variants);
+
+  const getters = createGetters(
+    formattedProps,
+    classNames,
+    helpers,
+  ) as unknown as PropsGetters;
+
+  return {
+    classNames,
+    ...getters,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/CloseButton/index.tsx

@@ -0,0 +1,24 @@
+import React, { type FunctionComponent } from 'react';
+import * as Button from '~/components/Button';
+import type { ButtonOnClick } from '~/types';
+
+export interface CloseButtonProps {
+  closeToast: ButtonOnClick;
+}
+
+const CloseButton: FunctionComponent<CloseButtonProps> = function ({
+  closeToast,
+}) {
+  return (
+    <Button.Icon
+      id="hide-toast"
+      icon="close"
+      variant="ghost-grey"
+      size="32-16"
+      onClick={closeToast}
+      className="min-w-8"
+    />
+  );
+};
+
+export default CloseButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/Message/constants.ts

@@ -0,0 +1,14 @@
+export const DEFAULT_ICON_PROPS = {
+  size: 24,
+  icon: 'info',
+  stroke: 'neutral-300',
+  className: 'my-auto mr-3',
+};
+
+export const DEFAULT_CONTAINER_PROPS = {
+  className: 'flex flex-row w-full',
+};
+
+export const DEFAULT_SPAN_PROPS = {
+  className: 'text-style-g-em text-neutral-900 my-auto',
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/Message/index.tsx

@@ -0,0 +1,35 @@
+import React, { FunctionComponent, HTMLProps } from 'react';
+import useMessage from './useMessage';
+import Icon from '~/components/Icon';
+import type { IconProps } from '~/components/Icon/types';
+
+export interface MessageProps {
+  message: string;
+  showIcon?: boolean;
+  icon?: IconProps;
+  container?: HTMLProps<HTMLDivElement>;
+  span?: HTMLProps<HTMLDivElement>;
+}
+
+const Message: FunctionComponent<MessageProps> = function ({
+  message,
+  showIcon = false,
+  icon,
+  container,
+  span,
+}) {
+  const { iconProps, containerProps, spanProps } = useMessage(
+    icon,
+    container,
+    span,
+  );
+
+  return (
+    <div {...containerProps}>
+      {showIcon && <Icon {...iconProps} />}
+      <span {...spanProps}>{message}</span>
+    </div>
+  );
+};
+
+export default Message;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/Message/useMessage.ts

@@ -0,0 +1,40 @@
+import type { HTMLProps } from 'react';
+import {
+  DEFAULT_ICON_PROPS,
+  DEFAULT_CONTAINER_PROPS,
+  DEFAULT_SPAN_PROPS,
+} from './constants';
+import type { IconProps } from '~/components/Icon/types';
+
+export interface Hook {
+  iconProps: IconProps;
+  containerProps: HTMLProps<HTMLDivElement>;
+  spanProps: HTMLProps<HTMLDivElement>;
+}
+
+export default function useMessage(
+  icon: IconProps | null = null,
+  container: HTMLProps<HTMLDivElement> | null = null,
+  span: HTMLProps<HTMLDivElement> | null = null,
+): Hook {
+  const iconProps = {
+    ...DEFAULT_ICON_PROPS,
+    ...(icon || {}),
+  };
+
+  const containerProps = {
+    ...DEFAULT_CONTAINER_PROPS,
+    ...(container || {}),
+  };
+
+  const spanProps = {
+    ...DEFAULT_SPAN_PROPS,
+    ...(span || {}),
+  };
+
+  return {
+    iconProps,
+    containerProps,
+    spanProps,
+  };
+}