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

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

@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import useNavigationLinkClassNames from '~/components/NavigationLink/useNavigationLinkClassNames';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import Icon from '~/components/Icon';
+import { ICON_PROPS, SKELETONS } from './constants';
+
+export interface NavigationLinkProps {
+  title?: string | JSX.Element | JSX.Element[];
+  subtitle?: string | JSX.Element | JSX.Element[];
+  badgeColor?: string;
+  className?: string;
+  isLoading?: boolean;
+  children?: JSX.Element | JSX.Element[] | string;
+}
+
+const NavigationLink: FunctionComponent<NavigationLinkProps> = function ({
+  className = '',
+  title,
+  subtitle,
+  badgeColor = '',
+  isLoading,
+}) {
+  const classNames = useNavigationLinkClassNames(className, badgeColor);
+
+  return (
+    <div className={classNames.container}>
+      <div className={classNames.content}>
+        <div className={classNames.titleWrapper}>
+          <span className={classNames.title}>
+            <SkeletonLoader
+              {...SKELETONS.title}
+              isLoading={isLoading}
+              afterLoading={title as JSX.Element}
+            />
+          </span>
+          {!isLoading && badgeColor && <div className={classNames.badge} />}
+        </div>
+        <p className={classNames.subtitle}>
+          <SkeletonLoader
+            {...SKELETONS.subtitle}
+            isLoading={isLoading}
+            afterLoading={subtitle as JSX.Element}
+          />
+        </p>
+      </div>
+      <div>
+        <Icon isLoading={isLoading} {...ICON_PROPS} />
+      </div>
+    </div>
+  );
+};
+
+export default NavigationLink;

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

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+
+import { NAVIGATON_LINK_CLASS_NAMES } from './constants';
+
+export interface NavigationLinkClassNamesHook {
+  content: string;
+  titleWrapper: string;
+  title: string;
+  subtitle: string;
+  container: string;
+  badge: string;
+}
+
+export default function useNavigationLinkClassNames(
+  initialClassName: string,
+  badgeColor: string,
+): NavigationLinkClassNamesHook {
+  const { containerBase, badgeBase, ...classNames } =
+    NAVIGATON_LINK_CLASS_NAMES;
+
+  const container = clsx(containerBase, initialClassName);
+  const badge = badgeColor && clsx(badgeBase, `bg-${badgeColor}`);
+
+  return {
+    ...classNames,
+    container,
+    badge,
+  };
+}

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

@@ -0,0 +1,19 @@
+export const CLASS_NAMES = {
+  base: 'flex rounded-full w-8 h-8 border-2 border-neutral-200 bg-neutral-000',
+  opacity: 'opacity-50',
+  margin: {
+    left: 'ml-4',
+    right: 'mr-4',
+  },
+};
+
+export const ICONS = {
+  next: 'chevron-right',
+  prev: 'chevron-left',
+};
+
+export const ICON_PROPS = {
+  size: 16,
+  stroke: 'neutral-500',
+  className: 'm-auto',
+};

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

@@ -0,0 +1,34 @@
+import React, { FunctionComponent, MouseEvent } from 'react';
+import Icon from '~/components/Icon';
+import { useButtonTracking } from '~/hooks';
+import usePaginationNavButtonProps from './usePaginationNavButtonProps';
+
+export interface PaginationNavButtonProps {
+  id: string;
+  next?: boolean;
+  disabled?: boolean;
+  onClick?: (e: MouseEvent) => void;
+}
+
+const PaginationNavButton: FunctionComponent<PaginationNavButtonProps> =
+  function ({ id, onClick: inputOnClick, disabled = false, next = false }) {
+    const { className, iconProps } = usePaginationNavButtonProps(
+      disabled,
+      next,
+    );
+
+    const { onClick } = useButtonTracking(id, inputOnClick);
+
+    return (
+      <button
+        id={id}
+        className={className}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        <Icon {...iconProps} />
+      </button>
+    );
+  };
+
+export default PaginationNavButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Pagination/PaginationNavButton/usePaginationNavButtonProps.ts

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import { CLASS_NAMES, ICONS, ICON_PROPS } from './constants';
+import type { IconProps } from '~/components/Icon/types';
+
+export interface PaginationNavButtonPropsHook {
+  className: string;
+  iconProps: IconProps;
+}
+
+export default function usePaginationNavButtonProps(
+  disabled: boolean,
+  next: boolean,
+): PaginationNavButtonPropsHook {
+  const className = clsx(
+    CLASS_NAMES.base,
+    disabled ? CLASS_NAMES.opacity : '',
+    next ? CLASS_NAMES.margin.left : CLASS_NAMES.margin.right,
+  );
+
+  const iconProps = {
+    ...ICON_PROPS,
+    icon: next ? ICONS.next : ICONS.prev,
+  };
+
+  return {
+    className,
+    iconProps,
+  };
+}

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

@@ -0,0 +1,7 @@
+export const CLASS_NAMES = {
+  base: 'w-8 h-8 flex rounded-full text-style-g-em mr-0.5 last:mr-0',
+  hover: 'hover:bg-turquoise-200 hover:text-turquoise-400',
+  ellipsis: 'cursor-default',
+  active: 'bg-turquoise-100 text-turquoise-400',
+  normal: 'bg-neutral-000 text-neutral-500',
+};

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

@@ -0,0 +1,56 @@
+import React, { useMemo, type FunctionComponent, type MouseEvent } from 'react';
+import { useButtonTracking } from '~/hooks';
+import usePaginationNumberButtonClassNames from './usePaginationNumberButtonClassNames';
+
+export interface PaginationNumberButtonProps {
+  id: string;
+  /**
+   * Button text to display
+   */
+  text: string;
+  /**
+   * Active state of button
+   */
+  active: boolean;
+  /**
+   * Disabled state of button
+   */
+  disabled: boolean;
+  /**
+   * onClick function for button
+   */
+  onClick: (e: MouseEvent) => void;
+  /**
+   * onClick function for button
+   */
+  ellipsis: boolean;
+}
+
+const PaginationNumberButton: FunctionComponent<PaginationNumberButtonProps> =
+  function ({
+    id: buttonId,
+    text,
+    onClick: inputOnClick,
+    active = false,
+    disabled = false,
+    ellipsis = false,
+  }) {
+    const classNames = usePaginationNumberButtonClassNames(active, ellipsis);
+
+    const id = useMemo(() => `pagination-nav-page-${buttonId}`, [buttonId]);
+
+    const { onClick } = useButtonTracking(id, inputOnClick);
+
+    return (
+      <button
+        id={id}
+        className={classNames.button}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        <span className={classNames.text}>{text}</span>
+      </button>
+    );
+  };
+
+export default PaginationNumberButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Pagination/PaginationNumberButton/usePaginationNumberButtonClassNames.ts

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import { CLASS_NAMES } from './constants';
+import type { StringIndexedObject } from '~/types';
+
+export default function usePaginationNumberButtonClassNames(
+  active: boolean,
+  ellipsis: boolean,
+): StringIndexedObject<string> {
+  const classNames = {
+    button: ellipsis
+      ? clsx(CLASS_NAMES.base, CLASS_NAMES.normal, CLASS_NAMES.ellipsis)
+      : clsx(
+          CLASS_NAMES.base,
+          active
+            ? CLASS_NAMES.active
+            : clsx(CLASS_NAMES.normal, CLASS_NAMES.hover),
+        ),
+    text: 'm-auto',
+  };
+
+  return classNames;
+}

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

@@ -0,0 +1,4 @@
+export const CLASS_NAMES = {
+  container: 'flex flex-row',
+  buttonWrapper: 'flex flex-row',
+};

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

@@ -0,0 +1,77 @@
+import type { PostiveOrNegativeNumber } from '~/types';
+import type { PaginationNumberButtonProps } from '~/components/Pagination/PaginationNumberButton';
+
+/**
+ * Takes the current page index and the total page count, and determines the
+ * button array to generate the pagination buttons
+ * @param index - the 0 indexed current page index
+ * @param count - the total number of pages
+ */
+export const generateButtonArray = (
+  index: number,
+  count: number,
+): PostiveOrNegativeNumber[] => {
+  // If less than 6, all numbers are shown
+  if (count < 6) return Array.from({ length: count }, (_, index) => index + 1);
+
+  // If at the 0 boundary, create array with first 3 buttons, ellipses, then
+  // final button numbers
+  if (index === 0)
+    return [...[...new Array(3).keys()].map((value) => value + 1), -1, count];
+
+  // If at the end boundary, create array with first button, ellipses, then
+  // final 3 button numbers
+  if (index === count - 1)
+    return [
+      1,
+      -1,
+      ...[...new Array(3).keys()].map((value) => value + count - 2),
+    ];
+
+  // Construct initial array
+  const initialArray: PostiveOrNegativeNumber[] = [-2, -1, 0, 1, 2]
+    // map values to value + index + 1 (to account for 0 indexed)
+    .map((i) => i + index + 1)
+    // reduce final array to remove buttons whose numbers are too low
+    .reduce((final, value) => {
+      // If less than 2, remove
+      if (value < 2) return final;
+      // If more than the page count - 1, then remove
+      if (value > count - 1) return final;
+      // If value is less than then index (2 less than current page), remove
+      if (value < index) {
+        final.push(-1);
+        return final;
+      }
+      // If value is more than then index + 2 (2 more than current page), remove
+      if (value > index + 2) {
+        final.push(-1);
+        return final;
+      }
+      // Add value to final array
+      final.push(value);
+      return final;
+    }, [] as PostiveOrNegativeNumber[]);
+
+  // Return final array with first and last numbers as well
+  return [1, ...initialArray, count];
+};
+
+export const createButtons = (
+  index: number,
+  count: number,
+  callback: (index: number) => void,
+): PaginationNumberButtonProps[] => {
+  const buttonArray = generateButtonArray(index, count);
+  return buttonArray.reduce((buttons, value, currentIndex) => {
+    buttons.push({
+      id: String(currentIndex),
+      text: value === -1 ? '...' : String(value),
+      onClick: () => callback(value - 1),
+      active: index === value - 1,
+      disabled: value === -1 || index === value - 1,
+      ellipsis: value === -1,
+    });
+    return buttons;
+  }, [] as PaginationNumberButtonProps[]);
+};

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

@@ -0,0 +1,44 @@
+import React, { FunctionComponent } from 'react';
+import usePaginationProps from './usePaginationProps';
+import PaginationNavButton from './PaginationNavButton';
+import PaginationNumberButton from './PaginationNumberButton';
+import { CLASS_NAMES } from './constants';
+
+export interface PaginationProps {
+  pageIndex: number;
+  pageCount: number;
+  setPage: (pageIndex: number) => void;
+}
+
+const Pagination: FunctionComponent<PaginationProps> = function ({
+  pageIndex,
+  pageCount,
+  setPage,
+}) {
+  const { buttons, previousPage, previousDisabled, nextPage, nextDisabled } =
+    usePaginationProps(pageIndex, pageCount, setPage);
+
+  return (
+    <div className={CLASS_NAMES.container}>
+      <PaginationNavButton
+        id="pagination-nav-previous"
+        onClick={previousPage}
+        disabled={previousDisabled}
+        next={false}
+      />
+      <div className={CLASS_NAMES.buttonWrapper}>
+        {buttons.map((button) => (
+          <PaginationNumberButton key={button.id} {...button} />
+        ))}
+      </div>
+      <PaginationNavButton
+        id="pagination-nav-next"
+        onClick={nextPage}
+        disabled={nextDisabled}
+        next
+      />
+    </div>
+  );
+};
+
+export default Pagination;

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

@@ -0,0 +1,41 @@
+import { useMemo, useCallback } from 'react';
+import { createButtons } from './helpers';
+import type { PaginationNumberButtonProps } from './PaginationNumberButton';
+
+export interface PaginationPropsHook {
+  buttons: PaginationNumberButtonProps[];
+  nextPage: () => void;
+  previousPage: () => void;
+  nextDisabled: boolean;
+  previousDisabled: boolean;
+}
+
+export default function usePaginationProps(
+  pageIndex: number,
+  pageCount: number,
+  setPage: (pageIndex: number) => void,
+): PaginationPropsHook {
+  const buttons = useMemo(
+    () => createButtons(pageIndex, pageCount, setPage),
+    [setPage, pageCount, pageIndex],
+  );
+
+  const nextPage = useCallback(
+    () => setPage(pageIndex + 1),
+    [pageIndex, setPage],
+  );
+  const previousPage = useCallback(
+    () => setPage(pageIndex - 1),
+    [pageIndex, setPage],
+  );
+  const nextDisabled = pageIndex === pageCount - 1;
+  const previousDisabled = pageIndex === 0;
+
+  return {
+    buttons,
+    nextPage,
+    previousPage,
+    nextDisabled,
+    previousDisabled,
+  };
+}

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

@@ -0,0 +1,34 @@
+import type { FunctionComponent } from 'react';
+import type { PropsHook } from '~/hooks/useProps';
+import usePass, { type Options } from '~/hooks/usePass';
+import type { Variant } from '~/types';
+
+export interface PassConstantsProps {
+  children: (args: PropsHook) => JSX.Element;
+  constants: Options;
+  className: string;
+  variant: Variant;
+  left: boolean;
+  iconSpacing: Variant;
+  loading: boolean;
+  size: Variant;
+}
+
+const PassConstants: FunctionComponent<PassConstantsProps> = function ({
+  children,
+  constants,
+  ...variants
+}) {
+  const { helpers, props, classNames } = constants;
+
+  const passProps = usePass({
+    classNames,
+    variants,
+    helpers,
+    props,
+  });
+
+  return children(passProps);
+};
+
+export default PassConstants;

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

@@ -0,0 +1,3 @@
+import Constants from './PassConstants';
+
+export default { Constants };

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

@@ -0,0 +1,12 @@
+export const PLACE_HOLDER_CLASS_NAMES = {
+  baseContainer:
+    'w-full h-full flex flex-1 flex-col bg-placeholder-card bg-100 relative',
+  baseWrapper: 'relative w-full h-full flex flex-1 flex-col items-center',
+  baseBackground:
+    'absolute w-full h-2/6 bottom-0 z-2 bg-gradient-to-b from-transparent-white',
+  baseEffect:
+    ' w-full h-2/3 flex flex-col items-center justify-center bg-gradient-radial to-transparent-white',
+  content: 'justify-items-center flex-col p-8',
+  title: 'text-style-d-em text-neutral-500 flex flex-1 text-center',
+  cta: 'mt-6 flex items-center justify-center',
+};

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

@@ -0,0 +1,50 @@
+import React, { type FunctionComponent, type HTMLAttributes } from 'react';
+import usePlaceHolderClassNames from '~/components/PlaceHolder/usePlaceHolderClassNames';
+
+export interface PlaceHolderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  children?: JSX.Element;
+  className?: string;
+  backgroundColour?: string;
+  /**
+   * Title of card
+   */
+  title?: JSX.Element | string;
+  /**
+   * Call to action element
+   */
+  cta?: JSX.Element | string;
+  /**
+   * Set's content to top
+   */
+  top?: boolean;
+}
+
+const PlaceHolder: FunctionComponent<PlaceHolderProps> = function ({
+  children = null,
+  title,
+  cta,
+  className = '',
+  top = false,
+  backgroundColour = '',
+  ...restProps
+}) {
+  const classNames = usePlaceHolderClassNames(className, backgroundColour, top);
+
+  return (
+    <div className={classNames.container} {...restProps}>
+      <div className={classNames.wrapper}>
+        <div className={classNames.effect}>
+          <div className={classNames.content}>
+            <div className={classNames.title}>{title} </div>
+            <div className={classNames.cta}>{cta}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className={classNames.background} />
+    </div>
+  );
+};
+
+export default PlaceHolder;

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

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+
+import { PLACE_HOLDER_CLASS_NAMES } from './constants';
+
+export interface PlaceholderClassNamesHook {
+  content: string;
+  title: string;
+  cta: string;
+  container: string;
+  wrapper: string;
+  background: string;
+  effect: string;
+}
+
+export default function usePlaceHolderClassNames(
+  className: string,
+  backgroundColour: string,
+  top: boolean,
+): PlaceholderClassNamesHook {
+  const {
+    baseContainer,
+    baseWrapper,
+    baseBackground,
+    baseEffect,
+    ...classNames
+  } = PLACE_HOLDER_CLASS_NAMES;
+
+  const container = clsx(baseContainer, className);
+  const wrapper = clsx(baseContainer, !top && 'justify-center');
+  const background = clsx(
+    baseBackground,
+    backgroundColour ? `to-${backgroundColour}` : 'to-neutral-000',
+  );
+  const effect = clsx(
+    baseEffect,
+    backgroundColour ? `from-${backgroundColour}` : 'from-neutral-000',
+  );
+
+  return {
+    ...classNames,
+    container,
+    wrapper,
+    background,
+    effect,
+  };
+}

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

@@ -0,0 +1,64 @@
+import type { StringIndexedObject } from '~/types';
+
+export const VARIANTS = ['default', 'panel-short', 'panel-full', 'green'];
+
+export const BASE_ROUNDING = 'rounded-lg';
+
+export const ROUNDING: StringIndexedObject<string> = {
+  green: 'rounded-lg mr-2',
+  'panel-short': 'rounded-l-lg rounded-br-lg',
+  'panel-full': 'rounded-l-lg',
+};
+
+export const ROUNDING_RIGHT: StringIndexedObject<string> = {
+  green: 'rounded-lg',
+  'panel-short': 'rounded-r-lg rounded-bl-lg',
+  'panel-full': 'rounded-r-lg',
+};
+
+export const PANEL_STYLE = {
+  default: {},
+  green: {},
+  'panel-short': {
+    maxHeight: 'calc(100% - 8px)',
+  },
+  'panel-full': {
+    maxHeight: '100%',
+  },
+};
+
+export const BASE_CLASS_NAMES = {
+  wrapper: 'relative max-w-full',
+  panelWrapper: 'relative w-full h-full flex flex-row',
+  container: 'absolute mt-1.5 z-10',
+  popover: 'border border-neutral-200 bg-neutral-000 shadow-popover',
+  panel:
+    'absolute border border-neutral-200 bg-neutral-000 shadow-popover z-10 overflow-auto',
+};
+
+export const VARIANT_CLASS_NAMES = {
+  above: {
+    container: 'bottom-full',
+    panel: 'bottom-0',
+  },
+  below: {
+    container: 'top-full',
+    panel: 'top-0',
+  },
+  right: {
+    container: 'right-0',
+    panel: 'right-full border-r-0 rounded-l-lg',
+  },
+  left: {
+    container: 'left-0',
+    panel: 'left-full border-l-0 rounded-r-lg',
+  },
+  green: {
+    container: 'left-0',
+    panel: 'left-full border-l-0 rounded-lg',
+  },
+};
+
+export const ACTIONS = {
+  OPEN_PANEL: 'open_panel',
+};

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

@@ -0,0 +1,14 @@
+import { VARIANTS, BASE_ROUNDING, ROUNDING, ROUNDING_RIGHT } from './constants';
+
+export const popoverRounding = (
+  showPanel: boolean,
+  variant: string,
+  right: boolean,
+): string => {
+  if (!VARIANTS.includes(variant)) return BASE_ROUNDING;
+  if (!showPanel) return BASE_ROUNDING;
+  if (right) return ROUNDING_RIGHT[variant];
+  return ROUNDING[variant];
+};
+
+export const emptyPanel = () => null as unknown as JSX.Element;