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

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

@@ -1,71 +0,0 @@
-export const CLASS_NAMES = {
-  container: {
-    base: 'flex flex-row flex-1 items-center py-2.5 px-3 rounded-lg transition-all duration-300 ease-in-out',
-    '@selectedColor': {
-      default: 'hover:bg-neutral-100',
-      green: 'hover:bg-green-100',
-    },
-    '@selected': {
-      default: 'bg-neutral-100',
-      green: 'bg-green-100',
-    },
-  },
-  name: {
-    base: 'flex flex-1',
-    '@size': {
-      xs: 'text-style-h ml-2.5',
-      small: 'text-style-g ml-3',
-      medium: 'text-red-600 text-style-g ml-3 min-w-30',
-      big: 'text-style-f ml-4',
-    },
-    '@selectedColor': {
-      default: 'text-neutral-600',
-      green: 'text-green-600',
-    },
-  },
-  icon: {
-    base: 'neutral-500',
-    '@selectedColor': {
-      green: 'green-600',
-    },
-  },
-};
-
-export const VARIANTS = {
-  xs: {
-    iconProps: {
-      size: 16,
-    },
-    arrowIconProps: {
-      icon: 'chevron-right',
-      size: 16,
-    },
-  },
-  small: {
-    iconProps: {
-      size: 20,
-    },
-    arrowIconProps: {
-      icon: 'chevron-right',
-      size: 16,
-    },
-  },
-  medium: {
-    iconProps: {
-      size: 20,
-    },
-    arrowIconProps: {
-      icon: 'chevron-right',
-      size: 16,
-    },
-  },
-  big: {
-    iconProps: {
-      size: 24,
-    },
-    arrowIconProps: {
-      icon: 'chevron-right',
-      size: 20,
-    },
-  },
-};

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

@@ -1,59 +0,0 @@
-import React, { FunctionComponent, HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import Icon from '~/components/Icon';
-import usePopoverMenuItem from './usePopoverMenuItem';
-import type { PopoverMenuItemSize } from '~/components/PopoverMenu/types';
-import { useButtonTracking } from '~/hooks';
-import type { PopoverMenuItemSelectedColorVariant } from './types';
-
-export interface PopoverMenuItemProps
-  extends HTMLAttributes<HTMLButtonElement | HTMLDivElement> {
-  name: string;
-  icon: string;
-  size?: PopoverMenuItemSize;
-  arrow?: boolean;
-  selected?: boolean;
-  seperator?: boolean;
-  selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
-}
-
-const PopoverMenuItem: FunctionComponent<PopoverMenuItemProps> = function ({
-  name,
-  icon,
-  size = 'small',
-  arrow = false,
-  selected = false,
-  onClick: inputOnClick,
-  className,
-  selectedColorVariant = 'default',
-  ...restProps
-}) {
-  const { classNames, iconProps, arrowIconProps } = usePopoverMenuItem(
-    size,
-    selected,
-    selectedColorVariant,
-  );
-
-  const id = `popover-menu-item-${name.toLowerCase().replace(/ /g, '-')}`;
-
-  const { onClick } = useButtonTracking(id, inputOnClick);
-
-  return (
-    <button
-      id={id}
-      className={clsx(classNames.container, className)}
-      onClick={onClick}
-      {...restProps}
-    >
-      <Icon
-        icon={icon}
-        {...iconProps}
-        stroke={iconProps.stroke || classNames.icon}
-      />
-      <div className={classNames.name}>{name}</div>
-      {arrow && <Icon {...arrowIconProps} />}
-    </button>
-  );
-};
-
-export default PopoverMenuItem;

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

@@ -1 +0,0 @@
-export type PopoverMenuItemSelectedColorVariant = 'default' | 'green';

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

@@ -1,35 +0,0 @@
-import { CLASS_NAMES, VARIANTS } from './constants';
-import { useClasses } from '~/hooks';
-import type { StringIndexedObject } from '~/types';
-import type { PopoverMenuItemSize } from '~/components/PopoverMenu/types';
-import type { IconProps } from '~/components/Icon/types';
-import type { PopoverMenuItemSelectedColorVariant } from './types';
-
-export interface PopoverMenuHook {
-  classNames: StringIndexedObject<string>;
-  iconProps: IconProps;
-  arrowIconProps: IconProps;
-  seperator?: boolean;
-}
-
-export default function usePopoverMenu(
-  size: PopoverMenuItemSize,
-  selected: boolean,
-  selectedColor: PopoverMenuItemSelectedColorVariant,
-): PopoverMenuHook {
-  const classNames = useClasses(CLASS_NAMES, {
-    variants: {
-      size,
-      selected: selected ? selectedColor : '',
-      selectedColor: selected ? selectedColor : 'default',
-    },
-  });
-
-  const { iconProps, arrowIconProps } = VARIANTS[size];
-
-  return {
-    classNames,
-    iconProps,
-    arrowIconProps,
-  };
-}

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

@@ -1,8 +0,0 @@
-export const CLASS_NAMES = {
-  baseContainer: 'flex flex-col flex-1 relative',
-  paddingContainer: 'flex flex-col flex-1 p-2',
-  content: 'flex flex-col flex-1',
-  link: 'flex flex-1 flex-row',
-  seperatorWrapper: 'flex flex-1 flex-row -mx-2 my-1',
-  seperator: 'bg-neutral-100 w-full h-px',
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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