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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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