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

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

@@ -1,86 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,125 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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,
-  };
-}