@kanda-libs/ks-component-ts 0.2.246 → 0.2.247-qa

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

@@ -0,0 +1,86 @@
+import React, { FunctionComponent } from 'react';
+import type { PopoverMenuProps } from './types';
+import usePopoverMenu from './usePopoverMenu';
+import PopoverMenuItem, { type PopoverMenuItemProps } from './PopoverMenuItem';
+import type { NavigationLinkProps } from '~/components/NavigationLink';
+import type { StringIndexedObject } from '~/types';
+
+const PopoverMenu: FunctionComponent<PopoverMenuProps> = function ({
+  items,
+  className = '',
+  onClose,
+  size,
+  header,
+  content,
+  selectedColorVariant = 'default',
+  notice: Notice,
+}) {
+  const { linkComponent: LinkComponent, classNames } =
+    usePopoverMenu(className);
+
+  const LinkComponentTag =
+    LinkComponent as FunctionComponent<NavigationLinkProps>;
+
+  return (
+    <div className={classNames.container}>
+      {Notice && <Notice />}
+      <div className={classNames.paddingContainer}>
+        {header && (
+          <>
+            {header}
+            <div className={classNames.seperatorWrapper}>
+              <div className={classNames.seperator} />
+            </div>
+          </>
+        )}
+        <div onClick={onClose} className={classNames.content}>
+          {content ||
+            items.map(
+              ({ icon, name, arrow, selected, seperator, ...linkProps }) => {
+                const popoverMenuItemProps: PopoverMenuItemProps = {
+                  icon,
+                  name,
+                  size,
+                  arrow,
+                  selected,
+                  selectedColorVariant,
+                };
+
+                return (
+                  <React.Fragment key={name}>
+                    {seperator ? (
+                      <div className={classNames.seperatorWrapper}>
+                        <div className={classNames.seperator} />
+                      </div>
+                    ) : (
+                      <>
+                        {linkProps.onClick ? (
+                          <div
+                            key={name}
+                            {...linkProps}
+                            className={classNames.link}
+                          >
+                            <PopoverMenuItem {...popoverMenuItemProps} />
+                          </div>
+                        ) : (
+                          <LinkComponentTag
+                            key={name}
+                            {...(linkProps as StringIndexedObject<string>)}
+                            className={classNames.link}
+                          >
+                            <PopoverMenuItem {...popoverMenuItemProps} />
+                          </LinkComponentTag>
+                        )}
+                      </>
+                    )}
+                  </React.Fragment>
+                );
+              },
+            )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PopoverMenu;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/types.d.ts

@@ -0,0 +1,22 @@
+import { PopoverMenuItemProps } from '~/components/PopoverMenu/PopoverMenuItem';
+import type { FunctionComponent } from 'react';
+import type { PopoverMenuItemSelectedColorVariant } from './PopoverMenuItem/types';
+
+export type PopoverMenuItemSize = 'xs' | 'small' | 'medium' | 'big';
+
+export interface PopoverMenuProps {
+  className?: string;
+  /**
+   * On close function
+   */
+  onClose?: () => void;
+  items: PopoverMenuItemProps[];
+  size?: PopoverMenuItemSize;
+  header?: JSX.Element | JSX.Element[] | null;
+  content?: JSX.Element | JSX.Element[] | null;
+  /**
+   * Notice banner to show
+   */
+  notice?: FunctionComponent;
+  selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
+}

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

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { useClasses } from '~/hooks';
+import { ConfigWrapperContext } from '~/components/ConfigWrapper';
+import { CLASS_NAMES } from './constants';
+import type { StringIndexedObject } from '~/types';
+import type { NavigationLinkProps } from '~/components/NavigationLink';
+
+export interface PopoverMenuHook {
+  linkComponent: string | React.FunctionComponent<NavigationLinkProps>;
+  classNames: StringIndexedObject<string>;
+}
+
+export default function usePopoverMenu(className: string): PopoverMenuHook {
+  const { linkComponent } = useContext(ConfigWrapperContext);
+
+  const classNames = useClasses(CLASS_NAMES, {
+    container: ['.baseContainer', className],
+  });
+
+  return {
+    linkComponent: linkComponent as string,
+    classNames,
+  };
+}

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

@@ -0,0 +1,45 @@
+export const CLASS_NAMES = {
+  baseWrapper: 'flex items-center',
+  baseContainer: 'flex flex-row items-start',
+  container: 'flex flex-col w-full',
+  wrapper: 'flex flex-col',
+  headingMobile: 'block md:hidden',
+  headingDesktop: 'hidden md:block',
+  grid: 'grid grid-cols-2',
+  cardContainer: 'flex flex-col',
+  title: 'text-neutral-500 mb-1',
+  pounds: 'text-green-500',
+  cents: 'text-green-400 text-12-18-em md:pt-px',
+  priceWrapper: 'md:min-h-6',
+  text: 'text-green-500 md:flex-row',
+};
+
+export const SKELETONS = {
+  pounds: {
+    width: 40,
+  },
+  cents: {
+    width: 16,
+  },
+};
+
+export const VARIANTS = {
+  default: {
+    wrapper: 'border border-neutral-300 p-4 md:p-8 rounded-lg',
+    headingMobile: 'text-12-18-em text-neutral-700 mb-2',
+    headingDesktop: 'text-16-20-em text-neutral-700 mb-6',
+    grid: 'gap-3 md:gap-6',
+    title: 'text-10-17-em-up md:text-12-18-em-up ',
+    pounds: 'text-18-22-em md:text-24-28-em',
+    text: 'text-18-22-em md:text-24-28-em ',
+  },
+  noBox: {
+    wrapper: 'mt-3',
+    headingMobile: 'text-14-22-em text-neutral-700 mb-2',
+    headingDesktop: 'text-16-20-em text-neutral-700 mb-6',
+    grid: 'gap-5 md:gap-6',
+    title: 'text-12-18-em-up',
+    pounds: 'text-24-28-em',
+    text: 'text-24-28-em ',
+  },
+};

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

@@ -0,0 +1,74 @@
+import React, { FunctionComponent } from 'react';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import usePriceProps from '~/components/Price/usePriceProps';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import { SKELETONS } from './constants';
+
+export interface PriceProps {
+  className?: string;
+  /**
+   * Price color
+   */
+  color?: string;
+  wrapperClassName?: string;
+  poundsClassName?: string;
+  centsClassName?: string;
+  /**
+   * Price amount in cents
+   */
+  amount?: number;
+  isLoading?: boolean;
+}
+
+const Price: FunctionComponent<PriceProps> = function ({
+  color = 'turquoise-300',
+  amount = 0,
+  wrapperClassName = 'h-full', // line height of text-style-b
+  poundsClassName = 'text-style-d',
+  centsClassName = 'text-style-h-em',
+  className = '',
+  isLoading = false,
+}) {
+  const { classNames, pounds, suffix, centsLabel } = usePriceProps(
+    color,
+    amount,
+    className,
+    wrapperClassName,
+  );
+
+  const NumberFormatTag =
+    NumberFormat as unknown as FunctionComponent<NumberFormatProps>;
+
+  return (
+    <div className={classNames.wrapper}>
+      <div className={classNames.container}>
+        <div className={poundsClassName}>
+          <SkeletonLoader
+            isLoading={isLoading}
+            {...SKELETONS.pounds}
+            afterLoading={
+              <NumberFormatTag
+                displayType="text"
+                value={pounds}
+                thousandSeparator
+                prefix="£"
+                suffix={suffix}
+              />
+            }
+          />
+        </div>
+        {!suffix && (
+          <div className={centsClassName}>
+            <SkeletonLoader
+              isLoading={isLoading}
+              {...SKELETONS.cents}
+              afterLoading={centsLabel}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Price;

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

@@ -0,0 +1,40 @@
+import { CLASS_NAMES } from './constants';
+import clsx from 'clsx';
+import { abbreviateNumber } from '~/helpers/number';
+
+export interface PricePropsHook {
+  classNames: {
+    wrapper: string;
+    container: string;
+  };
+  pounds: number;
+  suffix: string;
+  centsLabel: string;
+}
+
+export default function usePriceProps(
+  colour: string,
+  amount: number,
+  initialClassName: string,
+  initialWrapperClassName: string,
+): PricePropsHook {
+  const { baseContainer, baseWrapper } = CLASS_NAMES;
+
+  const container = clsx(baseContainer, `text-${colour}`, initialClassName);
+  const wrapper = clsx(baseWrapper, initialWrapperClassName);
+
+  const [pounds, suffix] = abbreviateNumber(Math.floor(amount / 100));
+  const cents = `${Math.round(amount % 100)}`.padStart(2, '0');
+
+  const centsLabel = `.${cents}`;
+
+  return {
+    classNames: {
+      wrapper,
+      container,
+    },
+    pounds: pounds as number,
+    suffix: suffix as string,
+    centsLabel,
+  };
+}

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

@@ -0,0 +1,2 @@
+export const SCRIPT_BUNDLE =
+  'https://www.google.com/recaptcha/enterprise.js?render=$RECAPTCHA_SITE_KEY';

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

@@ -0,0 +1,19 @@
+import { FunctionComponent, useEffect, useRef } from 'react';
+
+import { SCRIPT_BUNDLE } from './constants';
+import { RECAPTCHA_SITE_KEY } from '~/config';
+
+const Recaptcha: FunctionComponent = function () {
+  const recaptchaRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (recaptchaRef.current) return;
+    const s1 = document.createElement('script');
+    s1.type = 'text/javascript';
+    s1.src = SCRIPT_BUNDLE.replace('$RECAPTCHA_SITE_KEY', RECAPTCHA_SITE_KEY);
+    document.head.appendChild(s1);
+  }, []);
+
+  return null;
+};
+
+export default Recaptcha;

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

@@ -0,0 +1,20 @@
+import type {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '~/components/Button/ButtonIcon/types';
+
+export const CLASSNAMES = {
+  base: 'fixed right-4 bottom-4',
+  show: 'block',
+  hide: 'hidden',
+};
+
+export const BUTTON_PROPS = {
+  variant: 'solid-grey' as ButtonIconVariant,
+  size: '40-20' as ButtonIconSize,
+  icon: 'arrow-up',
+};
+
+export const MIN_SCROLL_HEIGHT = 120;
+
+export const TIMEOUT = 100;

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

@@ -0,0 +1,19 @@
+import { MIN_SCROLL_HEIGHT } from './constants';
+
+/**
+ * Function to scroll to top of body
+ */
+export const determineScrollHeight = (): boolean => {
+  const element =
+    document.documentElement || document.body.parentNode || document.body;
+
+  // If ref doesn't exist, return
+  if (!element) return false;
+  // Extract scrollTop
+  const { scrollTop } = element;
+
+  // If scrollTop is less than 120px, return false
+  if (scrollTop < MIN_SCROLL_HEIGHT) return false;
+  // Else retur true
+  return true;
+};

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

@@ -0,0 +1,27 @@
+import React, { FunctionComponent, MutableRefObject } from 'react';
+import useScrollTopButton from './useScrollTopButton';
+import { Icon as IconButton } from '~/components/Button';
+import { BUTTON_PROPS } from './constants';
+
+export interface ScrollTopButtonProps {
+  containerRef?: MutableRefObject<HTMLElement>;
+}
+
+const ScrollTopButton: FunctionComponent<ScrollTopButtonProps> = function ({
+  containerRef,
+}) {
+  const { className, scrollTop } = useScrollTopButton(containerRef);
+
+  return (
+    <IconButton
+      id="scroll-top"
+      onClick={() => {
+        scrollTop();
+      }}
+      {...BUTTON_PROPS}
+      className={className}
+    />
+  );
+};
+
+export default ScrollTopButton;

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

@@ -0,0 +1,66 @@
+import { useState, useEffect, useRef, MutableRefObject } from 'react';
+import clsx from 'clsx';
+import { CLASSNAMES, TIMEOUT } from './constants';
+import { determineScrollHeight } from './helpers';
+
+export interface ScrollTopButtonHook {
+  className: string;
+  scrollTop: () => void;
+}
+
+/**
+ * Hook used for firing off a scroll to top method when clicking the scroll to
+ * top button
+ */
+export default function useScrollTopButton(
+  containerRef: MutableRefObject<HTMLElement> | undefined,
+): ScrollTopButtonHook {
+  // Anonymous state to construct button className
+  const [showButton, setShowButton] = useState(determineScrollHeight());
+
+  /**
+   * Function to scroll to top of element
+   */
+  const scrollTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Classname for button - extended with button show state
+  const className = clsx(
+    CLASSNAMES.base,
+    showButton ? CLASSNAMES.show : CLASSNAMES.hide,
+  );
+
+  // Reference used for debouncing
+  const checkScroll = useRef(true);
+  // Effect attaches event listener to element
+  useEffect(() => {
+    // Scroll listener function to check scroll position
+    const scrollListener = () => {
+      // If checker reference is false, return
+      if (!checkScroll.current) return;
+      // Set checker reference to false
+      checkScroll.current = false;
+      // Set the show button state
+      setShowButton(determineScrollHeight());
+      // Use timeout to debounce, runs ever 100 milliseconds
+      setTimeout(() => {
+        // Allow scroll checking again
+        checkScroll.current = true;
+        // Set show button state
+        setShowButton(determineScrollHeight());
+      }, TIMEOUT);
+    };
+    // Add the event listener to the element
+    window.addEventListener('scroll', scrollListener);
+    return () => {
+      // Remove the event listener
+      window.removeEventListener('scroll', scrollListener);
+    };
+  }, [containerRef]);
+
+  return {
+    className,
+    scrollTop,
+  };
+}

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

@@ -0,0 +1 @@
+export const CLASSNAME = 'mb-6 border-neutral-200';

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

@@ -0,0 +1,10 @@
+import React, { type FunctionComponent } from 'react';
+import { CLASSNAME } from './constants';
+
+export interface SeparatorProps {}
+
+const Separator: FunctionComponent<SeparatorProps> = function () {
+  return <hr className={CLASSNAME} />;
+};
+
+export default Separator;

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

@@ -0,0 +1 @@
+export const DEFAULT_WRAPPER_CLASS_NAME = '';

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

@@ -0,0 +1,45 @@
+import React, { FunctionComponent } from 'react';
+import Skeleton, { SkeletonProps } from 'react-loading-skeleton';
+
+import useSkeletonLoader from '~/components/SkeletonLoader/useSkeletonLoader';
+
+export interface SkeletonLoaderProps extends SkeletonProps {
+  /**
+   * The loading state of the component - defaults to false
+   */
+  isLoading?: boolean;
+  /**
+   * The component to show after loading
+   */
+  afterLoading?: JSX.Element | string | null;
+  /**
+   * HTML className for the wrapper
+   */
+  wrapperClassName?: string;
+}
+
+const SkeletonLoader: FunctionComponent<SkeletonLoaderProps> = function ({
+  isLoading = false,
+  afterLoading = <div />,
+  wrapperClassName,
+  ...restProps
+}) {
+  const { loading, classNames } = useSkeletonLoader(
+    wrapperClassName,
+    isLoading,
+  );
+
+  const SkeletonTag = Skeleton as unknown as FunctionComponent<SkeletonProps>;
+
+  if (loading) {
+    return (
+      <div className={classNames.wrapper}>
+        <SkeletonTag {...restProps} />
+      </div>
+    );
+  }
+
+  return <>{afterLoading}</>;
+};
+
+export default SkeletonLoader;

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

@@ -0,0 +1,31 @@
+import { useContext } from 'react';
+import { DEFAULT_WRAPPER_CLASS_NAME } from '~/components/SkeletonLoader/constants';
+import { Context } from '~/components/LoadingProvider/Context';
+
+export interface Hook {
+  loading: boolean;
+  classNames: {
+    wrapper: string;
+  };
+}
+
+export default function useSkeletonLoader(
+  wrapperClassName = '',
+  isLoading = false,
+): Hook {
+  const wrapper = wrapperClassName || DEFAULT_WRAPPER_CLASS_NAME;
+
+  const contextLoading = useContext(Context);
+  /**
+   * Allow to force isLoading
+   * To be able to set is loading false even if the parent context is loading
+   */
+  const loading = typeof isLoading !== 'undefined' ? isLoading : contextLoading;
+
+  return {
+    loading,
+    classNames: {
+      wrapper,
+    },
+  };
+}

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

@@ -0,0 +1,20 @@
+export const FORMATTER = {
+  prefixAgo: null,
+  prefixFromNow: null,
+  suffixAgo: null,
+  suffixFromNow: null,
+  seconds: '%ds ago',
+  minute: '%dm ago',
+  minutes: '%dm ago',
+  hour: '%dh ago',
+  hours: '%dh ago',
+  day: '%dd ago',
+  days: '%dd ago',
+  week: '%dw ago',
+  weeks: '%dw ago',
+  month: '%dmo ago',
+  months: '%dmo ago',
+  year: '%dy ago',
+  years: '%dy ago',
+  wordSeparator: ' ',
+};

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

@@ -0,0 +1,36 @@
+import type { TagColor } from '~/components/Tag/types';
+
+export const defaultExtractColor = (status: string): TagColor => {
+  if (status === 'draft') return 'grey';
+  if (status === 'sent') return 'green';
+  if (status === 'accepted') return 'green';
+  if (status === 'declined') return 'violet';
+  if (status === 'lead') return 'violet';
+  return 'grey';
+};
+
+export const checkAndFormatTimestamp = (
+  timestamp: number,
+  minYear = 2019,
+): Date => {
+  // Construct date object
+  const date = new Date(timestamp);
+
+  // Timestamp is incorrectly formatted (not in milliseconds) if year in date
+  // object from timestamp is less than min year. Need to correct timestamp
+  if (date.getFullYear() < minYear) {
+    // catch case for timestamp in seconds - will be less than 10^10
+    if (date.getTime() < 10 ** 10) {
+      return new Date(timestamp * 1000);
+    }
+    // catch case for timestamp in tenths of seconds - will be less than 10^11
+    if (date.getTime() < 10 ** 11) {
+      return new Date(timestamp * 100);
+    }
+    // if neither of above, timestamp in hundreths of seconds - will be less
+    // than 10^12
+    return new Date(timestamp * 10);
+  }
+
+  return date;
+};

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

@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from 'react';
+import Tag from '~/components/Tag';
+import type { StatusTagStatus } from '~/components/StatusTag/types';
+import type { TagColor, TagProps } from '~/components/Tag/types';
+import useStatusTagProps from '~/components/StatusTag/useStatusTagProps';
+import { defaultExtractColor } from '~/components/StatusTag/helpers';
+import TimeAgo from '~/components/TimeAgo';
+
+export interface StatusTagProps extends TagProps {
+  status: StatusTagStatus;
+  timestamp?: number;
+  formatStatus?: (status: string) => string;
+  extractColor?: (status: string) => TagColor;
+}
+
+const StatusTag: FunctionComponent<StatusTagProps> = function ({
+  status,
+  timestamp,
+  formatStatus = (status) => status,
+  extractColor = defaultExtractColor,
+  ...tagProps
+}) {
+  const { color } = useStatusTagProps(status, extractColor);
+
+  if (!color) {
+    return <></>;
+  }
+
+  return (
+    <Tag label={formatStatus(status)} color={color as TagColor} {...tagProps}>
+      <>{timestamp && <TimeAgo timestamp={timestamp} className="ml-1" />}</>
+    </Tag>
+  );
+};
+
+export default StatusTag;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/StatusTag/types.d.ts

@@ -0,0 +1,13 @@
+export type StatusTagStatus =
+  | 'draft'
+  | 'sent'
+  | 'accepted'
+  | 'declined'
+  | 'lead';
+
+declare module 'react-timeago/lib/formatters/buildFormatter' {
+  // @ts-ignore
+  import type { Formatter } from 'react-timeago';
+  const buildFormatter: (formatter: Formatter) => Formatter;
+  export default buildFormatter;
+}

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

@@ -0,0 +1,16 @@
+import type { TagColor } from '~/components/Tag/types';
+
+export interface StatusTagPropsHook {
+  color: string;
+}
+
+export default function useStatusTagProps(
+  status: string,
+  extractColor: (status: string) => TagColor,
+): StatusTagPropsHook {
+  const color = extractColor(status);
+
+  return {
+    color: color as string,
+  };
+}