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

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Timeline/constants.ts

@@ -1,22 +0,0 @@
-import type { StringIndexedObject } from '~/types';
-
-export const CLASS_NAMES = {
-  wrapper: '',
-  item: 'flex flex-row justify-start items-center',
-  itemIconWrapper: 'flex flex-col items-center',
-  itemIcon: 'w-2 h-2 rounded-full -my-2 z-20',
-  itemContent: 'ml-4 flex flex-col gap-y-1',
-  itemBorder: 'w-1 h-10 top-0 bottom-0',
-  itemBorderCompact: 'w-1 h-6 top-0 bottom-0',
-  itemBorderActive: 'bg-neutral-200',
-  itemTitle: 'text-style-g text-neutral-700 max-w-42',
-  itemDate: 'text-style-h text-neutral-500',
-  itemCloseIcon: 'ml-3 w-4 h-4 text-neutral-500',
-};
-
-export const FILL_CLASS_NAMES: StringIndexedObject<string> = {
-  green: 'bg-green-500',
-  red: 'bg-red-200',
-  yellow: 'bg-yellow',
-  grey: 'bg-neutral-600',
-};

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

@@ -1,95 +0,0 @@
-import clsx from 'clsx';
-import React, { type FunctionComponent } from 'react';
-import Button from '../Button';
-import Text from '../Text';
-import { CLASS_NAMES, FILL_CLASS_NAMES } from './constants';
-
-export interface TimelineItem {
-  title: string;
-  date?: string;
-  fill: keyof typeof FILL_CLASS_NAMES;
-}
-
-export interface TimelineProps {
-  items: TimelineItem[];
-  canDeleteItem?: boolean;
-  onDeleteItem?: (item: TimelineItem) => void;
-  flipped?: boolean;
-  compact?: boolean;
-}
-
-const Timeline: FunctionComponent<TimelineProps> = function ({
-  items,
-  canDeleteItem = false,
-  onDeleteItem = () => {},
-  flipped = false,
-  compact = false,
-}) {
-  const borderClass = compact
-    ? CLASS_NAMES.itemBorderCompact
-    : CLASS_NAMES.itemBorder;
-
-  return (
-    <div className={CLASS_NAMES.wrapper}>
-      {items.map((item, key) => {
-        const title = (
-          <Text text={item.title} className={CLASS_NAMES.itemTitle} />
-        );
-        const date = item.date && (
-          <Text text={item.date} className={CLASS_NAMES.itemDate} />
-        );
-
-        return (
-          <div className={CLASS_NAMES.item}>
-            <div className={CLASS_NAMES.itemIconWrapper}>
-              <div
-                className={clsx(
-                  borderClass,
-                  key !== 0 ? CLASS_NAMES.itemBorderActive : '',
-                )}
-              />
-              <div
-                className={clsx(
-                  CLASS_NAMES.itemIcon,
-                  FILL_CLASS_NAMES[item.fill],
-                )}
-              />
-              <div
-                className={clsx(
-                  borderClass,
-                  key !== items.length - 1 ? CLASS_NAMES.itemBorderActive : '',
-                )}
-              />
-            </div>
-            <div className={CLASS_NAMES.itemContent}>
-              {!flipped && (
-                <>
-                  {title}
-                  {date}
-                </>
-              )}
-              {flipped && (
-                <>
-                  {date}
-                  {title}
-                </>
-              )}
-            </div>
-            {canDeleteItem && (
-              <Button.Icon
-                id={`delete-${item.title}`}
-                icon="close"
-                className={CLASS_NAMES.itemCloseIcon}
-                onClick={() => {
-                  onDeleteItem(item);
-                }}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Timeline;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ToastContainer/constants.tsx

@@ -1,17 +0,0 @@
-import { Slide } from 'react-toastify';
-import CloseButton from '~/hooks/useToast/CloseButton';
-
-export const INITIAL_STATE = {
-  position: 'bottom-center',
-  autoClose: 5000,
-  hideProgressBar: false,
-  pauseOnHover: true,
-  pauseOnFocusLoss: true,
-  closeOnClick: false,
-  newestOnTop: true,
-  draggable: false,
-  closeButton: CloseButton,
-  transition: Slide,
-  theme: 'colored',
-  icon: false,
-};

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

@@ -1,16 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import {
-  ToastContainer as ReactToastifyToastContainer,
-  type ToastContainerProps,
-} from 'react-toastify';
-import useToastContainerState from '~/components/ToastContainer/useToastContainerState';
-
-const ToastContainer: FunctionComponent<ToastContainerProps> = function (
-  props,
-) {
-  const state = useToastContainerState(props);
-
-  return <ReactToastifyToastContainer {...state} />;
-};
-
-export default ToastContainer;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ToastContainer/useToastContainerState.ts

@@ -1,15 +0,0 @@
-import type { ToastContainerProps } from 'react-toastify';
-import { INITIAL_STATE } from './constants';
-
-export interface Hook {}
-
-export default function useToastContainerState(
-  props: ToastContainerProps,
-): Hook {
-  const state = {
-    ...INITIAL_STATE,
-    ...props,
-  };
-
-  return state;
-}

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

@@ -1,52 +0,0 @@
-export * from './DesktopLayout';
-
-export { default as Animations } from './Animations';
-export { default as AnimatedModalContainer } from './Modal/AnimatedModalContainer';
-export { default as Banner } from './Banner';
-export { default as BreakPoints } from './BreakPoints';
-export { default as Button } from './Button';
-export { default as Card } from './Card';
-export { default as CommonWrapper } from './CommonWrapper';
-export { default as ConfigWrapper } from './ConfigWrapper';
-export { default as CopyContent } from './CopyContent';
-export { default as DesktopFooter } from './DesktopFooter';
-export { default as DesktopHeader } from './DesktopHeader';
-export { default as FinanceStatusTag } from './FinanceStatusTag';
-export { default as Header } from './Header';
-export { default as HelpButton } from './HelpButton';
-export { default as Icon } from './Icon';
-export { default as InfoBanner } from './InfoBanner';
-export { default as Layout, LayoutFooter, LayoutHeader } from './Layout';
-export { default as Loader } from './Loader';
-export { default as LoadingProvider } from '~/components/LoadingProvider';
-export { default as LoadingSpinner } from './LoadingSpinner';
-export { default as Menu } from './Menu';
-export { default as ModalContainer } from './Modal/ModalContainer';
-export { default as ModalLayoutCenter } from './Modal/ModalLayout/ModalLayoutCenter';
-export { default as ModalLayoutFullScreen } from './Modal/ModalLayout/ModalLayoutFullScreen';
-export { default as ModalLayoutSlideLeft } from './Modal/ModalLayout/ModalLayoutSlideLeft';
-export { default as ModalLayoutSlideUp } from './Modal/ModalLayout/ModalLayoutSlideUp';
-export { default as NavigationLink } from './NavigationLink';
-export { default as Pagination } from './Pagination';
-export { default as PassConstants } from './Pass/PassConstants';
-export { default as PlaceHolder } from './PlaceHolder';
-export { default as Popover } from './Popover';
-export { default as PopoverMenu } from './PopoverMenu';
-export { default as PopoverMenuItem } from './PopoverMenu/PopoverMenuItem';
-export { default as Price } from './Price';
-export { default as Recaptcha } from './Recaptcha';
-export { default as ScrollTopButton } from './ScrollTopButton';
-export { default as Separator } from './Separator';
-export { default as SkeletonLoader } from '~/components/SkeletonLoader';
-export { default as StatusTag } from '~/components/StatusTag';
-export { default as StrengthMeter } from '~/components/StrengthMeter';
-export { default as Tag } from './Tag';
-export { default as Text } from './Text';
-export { default as TextSlides } from './TextSlides';
-export { default as TimeAgo } from './TimeAgo';
-export { default as Timeline } from './Timeline';
-export { default as ExpandableContent } from './ExpandableContent';
-export {
-  default as ModalsWrapper,
-  ModalsWrapperContext,
-} from './ModalsWrapper';

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