@kanda-libs/ks-component-ts 0.2.240-qa2 → 0.2.241

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

@@ -1,31 +0,0 @@
-/**
- * Configurations related to external integrations for the web app
- */
-export const HELPCRUNCH_ENVIRONMENT_KEY =
-  process.env.REACT_APP_HELPCRUNCH_ENVIRONMENT_KEY ||
-  'e6e03cdd-8937-43da-b341-a819c9e43f0a';
-
-export const FRONT_ENVIRONMENT_KEY =
-  process.env.REACT_APP_FRONT_ENVIRONMENT_KEY ||
-  '1de90d16bdd78c65bacf3bb516bb6d48';
-
-export const FRONT_USER_HASH =
-  process.env.REACT_APP_FRONT_USER_HASH || '0e55409bec0c082d4fdcd6dd445a63a2';
-
-/**
- * Application URLs
- */
-export const PRIVACY_POLICY_URL =
-  process.env.REACT_APP_PRIVACY_POLICY_URL ||
-  'https://www.getkanda.com/privacy-policy';
-
-export const TERMS_AND_CONDITIONS_URL =
-  process.env.REACT_APP_LEGAL_PAGE || 'https://www.getkanda.com/legal-page';
-
-export const COOKIE_POLICY_URL =
-  process.env.REACT_APP_COOKIE_POLICY_URL ||
-  'https://www.getkanda.com/cookie-policy';
-
-export const RECAPTCHA_SITE_KEY =
-  process.env.REACT_APP_RECAPTCHA_SITE_KEY ||
-  '6Lcrc3ImAAAAAPPx3ppenG9jWLk3O5XuFRZi5Abj';

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

@@ -1,75 +0,0 @@
-/**
- * Abbreviate Number
- * @param {Number} value
- * @param {Number} fixed
- *
- * @returns {Array} value suffix
- */
-export const abbreviateNumber = (
-  value: number,
-  fixed = 1,
-): (string | number | null)[] => {
-  if (value === null) {
-    return [null];
-  }
-
-  if (value < 100000) {
-    return [value];
-  }
-
-  const powerParts = value.toPrecision(2).split('e'); // get power
-
-  const suffixIndex =
-    powerParts.length === 1
-      ? 0
-      : Math.floor(
-          Math.min(powerParts[1].slice(1) as unknown as number, 14) / 3,
-        ); // floor at decimals, ceiling at trillions
-
-  const remainingValue =
-    suffixIndex < 1
-      ? value.toFixed(0 + fixed)
-      : (value / 10 ** (suffixIndex * 3)).toFixed(1 + fixed); // divide by power
-
-  const normalizedValue =
-    (remainingValue as unknown as number) < 0
-      ? remainingValue
-      : Math.abs(remainingValue as unknown as number); // enforce -0 is 0
-
-  const suffix = ['', 'K', 'M', 'B', 'T'][suffixIndex]; // append power
-
-  return [normalizedValue, suffix];
-};
-
-/**
- * Returns the formatted currency.
- * The currency has been left as a variable for future proofing.
- *
- * DEV_NOTE: The locale is currently set to 'en-US', but in the future could
- * take any value from https://gist.github.com/ncreated/9934896 to allow
- * formatting from other countries.
- *
- * @param {number} value The price to be converted in the minor currency unit,
- * e.g. for GBP, in pence (£1.23 -> 123)
- * @param {String} currency The 3-letter currency code as defined by ISO 4217,
- * given in uppercase. See here for codes:
- * https://www2.1010data.com/documentationcenter/prod/1010dataReferenceManual/DataTypesAndFormats/currencyUnitCodes.html
- * Defaults to 'GBP'
- * @param {String} locale The locale of the format. Defaults to 'en-US'.
- * @param {Number} minorUnit The minor unit decimal place of the currency.
- * Defaults to 2 (e.g. GBP has 2 minpr units, £1.23)
- */
-export const formatToCurrency = (
-  value: number,
-  currency = 'GBP',
-  locale = 'en-US',
-  minorUnit = 2,
-): string => {
-  const majorUnitValue = value / 10 ** minorUnit;
-  const formatter = new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: minorUnit,
-  });
-  return formatter.format(majorUnitValue);
-};

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

@@ -1,12 +0,0 @@
-export { default as useMediaQuery } from './useMediaQuery';
-export { default as useIsDesktop } from './useIsDesktop';
-export { default as useClasses } from './useClasses';
-export { default as useToast } from './useToast';
-export { default as useVariants } from './useVariants';
-export { default as useHelpcrunch } from './useHelpcrunch';
-export { default as useEscClick } from './useEscClick';
-export { default as useOuterClick } from './useOuterClick';
-export { default as useButtonTracking } from './useButtonTracking';
-export { default as useMousePosition } from './useMousePosition';
-export { default as useFuse } from './useFuse';
-export { default as useFrontChatWidget } from './useFrontChatWidget';

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

@@ -1,30 +0,0 @@
-import { useCallback, type MouseEvent } from 'react';
-import { Amplitude, useAmplitude } from '@kanda-libs/ks-amplitude-provider';
-import type { ButtonOnClick } from '~/types';
-
-export interface UseButtonTrackingHook {
-  onClick: ButtonOnClick;
-}
-
-export default function useButtonTracking(
-  id: string,
-  onClick?: ButtonOnClick,
-): UseButtonTrackingHook {
-  const { logEvent } = useAmplitude();
-  const { flush } = Amplitude;
-
-  const interceptedOnClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>): void => {
-      logEvent('button-interacted', {
-        element_id: id,
-      });
-      flush();
-      if (onClick) onClick(event);
-    },
-    [logEvent, flush, id, onClick],
-  );
-
-  return {
-    onClick: interceptedOnClick,
-  };
-}

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

@@ -1 +0,0 @@
-export const VARIABLE_REGEX = /(?<key>{{(?<variable>.+)}})/g;

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

@@ -1,127 +0,0 @@
-import get from 'lodash.get';
-import type { StringIndexedObject } from '~/types';
-
-import { VARIABLE_REGEX } from './constants';
-
-/**
- * Gets variants value
- */
-export const getVariantValue = (variants: StringIndexedObject, key: string) =>
-  variants[key.replace('@', '')];
-
-/**
- * Checks if key has variable
- */
-export const isVariable = (key: string): boolean => key.includes('@');
-
-/**
- * replaces variables
- */
-export const replaceVariables = (
-  string: string,
-  variants: StringIndexedObject,
-): string => {
-  const matches = Array.from(string.matchAll(VARIABLE_REGEX));
-
-  return matches.reduce((prev, match) => {
-    const { variable, key } = match.groups || {};
-
-    if (variable && isVariable(variable)) {
-      return prev.replace(key, getVariantValue(variants, variable));
-    }
-
-    return prev;
-  }, string);
-};
-
-/**
- * Formats value
- */
-export const formatValue = (
-  classes: StringIndexedObject,
-  value: string | string[] | StringIndexedObject,
-  variants: StringIndexedObject = {},
-): string => {
-  if (typeof value === 'object' && !Array.isArray(value)) {
-    if (!Object.keys(value).some(isVariable)) return value as unknown as string;
-
-    const flatValue = Object.keys(value).reduce(
-      (arrayValues: string[], key) => {
-        if (isVariable(key)) {
-          const variantKey = getVariantValue(variants, key);
-
-          if (
-            typeof value[key][variantKey] === 'object' &&
-            !Array.isArray(value[key][variantKey])
-          )
-            return [
-              ...arrayValues,
-              formatValue(classes, value[key][variantKey], variants),
-            ];
-
-          if (
-            typeof value[key][variantKey] === 'object' &&
-            !Array.isArray(value[key][variantKey])
-          )
-            return [
-              ...arrayValues,
-              formatValue(classes, value[key][variantKey], variants),
-            ];
-
-          if (value[key][variantKey])
-            return [...arrayValues, value[key][variantKey]];
-
-          if (value[key][variantKey])
-            return [...arrayValues, value[key][variantKey]];
-
-          return arrayValues;
-        }
-
-        if (typeof value[key] === 'string') {
-          return [...arrayValues, value[key]];
-        }
-
-        return arrayValues;
-      },
-      [],
-    );
-
-    return formatValue(classes, flatValue, variants);
-  }
-
-  const normalizedValue = Array.isArray(value) ? value : [value];
-
-  return replaceVariables(
-    normalizedValue
-      .filter((part) => typeof part === 'string')
-      .join(' ')
-      .split(' ')
-      .reduce((acc, className) => {
-        const injectedClassName =
-          className.indexOf('.') === 0
-            ? get(classes, className.substr(1))
-            : className;
-
-        if (!injectedClassName) return acc;
-
-        return acc ? `${acc} ${injectedClassName}` : injectedClassName;
-      }, ''),
-    variants,
-  );
-};
-
-/**
- * Formats object values
- */
-export const formatObject = (
-  object: StringIndexedObject,
-  variants: StringIndexedObject,
-  initial: StringIndexedObject = {},
-): StringIndexedObject =>
-  Object.entries(object).reduce(
-    (formattedObject, [key, value]) => ({
-      ...formattedObject,
-      [key]: formatValue(formattedObject, value, variants),
-    }),
-    initial,
-  );

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

@@ -1,14 +0,0 @@
-import type { StringIndexedObject } from '~/types';
-import { formatObject } from './helpers';
-import useVariants from '~/hooks/useVariants';
-
-export default function useClasses(
-  constants: StringIndexedObject = {},
-  extend: StringIndexedObject = {},
-): StringIndexedObject {
-  const { variants, ...extendedClassNames } = extend;
-
-  const formattedConstants = formatObject(constants, useVariants(variants));
-
-  return formatObject(extendedClassNames, variants, formattedConstants);
-}

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

@@ -1,26 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-const ESC_KEY = 27;
-
-export default function useEscClick(
-  callback: (e: KeyboardEvent) => void,
-): void {
-  /**
-   * Stores callback on ref so the effect can be called on mount / unmount
-   */
-  const callbackRef = useRef(callback);
-
-  /**
-   * Sets listeners on mount and removes them on unmount,
-   * calls callback if user clicks ESC key
-   */
-  useEffect(() => {
-    const handleEsc = (event: KeyboardEvent) => {
-      if (event.keyCode === ESC_KEY && callbackRef.current)
-        callbackRef.current(event);
-    };
-
-    document.addEventListener('keydown', handleEsc);
-    return () => document.removeEventListener('keydown', handleEsc);
-  }, []);
-}

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

@@ -1,71 +0,0 @@
-import crypto from 'crypto-js';
-
-import type { StringIndexedObject } from '~/types';
-import { FRONT_USER_HASH } from '~/config';
-
-export interface FrontChatWidgetSettings {
-  email: string;
-  name?: string;
-  customFields?: StringIndexedObject;
-}
-
-export interface FrontChatWidgetHook {
-  openChat: () => void;
-  closeChat: () => void;
-  update: (settings: FrontChatWidgetSettings) => void;
-}
-
-/**
- * Hook for using FrontChat Javascript API Methods.
- *
- * Docs:
- * - Methods:
- *   https://dev.frontapp.com/docs/chat-sdk-reference
- */
-export default function useFrontChatWidget(): FrontChatWidgetHook {
-  const openChat = () => {
-    // If FrontChat isn't available, return
-    if (!window.FrontChat) return;
-    // show chat window
-    window.FrontChat('show');
-  };
-
-  const closeChat = () => {
-    // If FrontChat isn't available, return
-    if (!window.FrontChat) return;
-    // hide chat window
-    window.FrontChat('hide');
-  };
-
-  /**
-   * Function calls the FrontChat update method
-   * @param {Object} - Settings/Data (FrontChat setings) to update FrontChat with,
-   * allowed attributes contained in Attributes & Objects docs link above
-   */
-  const update = (settings: FrontChatWidgetSettings) => {
-    // If FrontChat isn't available, return
-    const { email } = settings;
-    if (!window.FrontChat) return;
-    // Check the settings passed is an object - if so, run the update method
-    if (
-      typeof settings === 'object' &&
-      settings !== null &&
-      !Array.isArray(settings)
-    ) {
-      const userHash = crypto
-        .HmacSHA256(email, FRONT_USER_HASH)
-        .toString(crypto.enc.Hex);
-      const payload = {
-        ...settings,
-        userHash,
-      };
-      window.FrontChat('identity', payload);
-    }
-  };
-
-  return {
-    openChat,
-    closeChat,
-    update,
-  };
-}

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