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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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