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

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;

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

@@ -1,98 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useAdvancedProps from '~/components/Popover/Advanced/useAdvancedProps';
-import PopoverMenu from '~/components/PopoverMenu';
-import type { PopoverMenuItemProps } from '~/components/PopoverMenu/PopoverMenuItem';
-import type { AdvancedItem, AdvancedProps } from './types';
-
-export type { AdvancedProps };
-
-const Advanced: FunctionComponent<AdvancedProps> = function ({
-  button,
-  above = false,
-  right = false,
-  onAction,
-  items: originalItems = [],
-  wrapper: ButtonWrapper = ({ children }) => children,
-  search: SearchResults,
-  searchInput: SearchInput,
-  searchPlaceholder = 'Search..',
-  searchDebounceInterval = 200,
-  size = 'xs',
-  variant = 'panel-full',
-  selectedColorVariant = 'default',
-  ...props
-}) {
-  const {
-    classNames,
-    showPopover,
-    button: Button,
-    panel,
-    ref,
-    handleClose,
-    panelStyle,
-    items,
-    debouncedSearch,
-    onSearch,
-    clearSearch,
-    showPanel,
-    value,
-  } = useAdvancedProps({
-    button,
-    above,
-    right,
-    items: originalItems as AdvancedItem[],
-    onAction,
-    searchDebounceInterval,
-    variant,
-  });
-
-  const SearchResultsTag = SearchResults as unknown as FunctionComponent<any>;
-  const SearchInputTag = SearchInput as unknown as FunctionComponent<any>;
-
-  return (
-    <div className={classNames.wrapper}>
-      {showPopover && (
-        <div ref={ref} className={classNames.container}>
-          <div className={classNames.panelWrapper}>
-            <div className={classNames.popover}>
-              <PopoverMenu
-                header={
-                  SearchResults && (
-                    <SearchInputTag
-                      value={value}
-                      placeholder={searchPlaceholder}
-                      onChange={onSearch}
-                    />
-                  )
-                }
-                size={size}
-                items={items as PopoverMenuItemProps[]}
-                selectedColorVariant={selectedColorVariant}
-                onClose={handleClose}
-                {...props}
-                content={
-                  debouncedSearch ? (
-                    <SearchResultsTag
-                      query={debouncedSearch}
-                      clearSearch={clearSearch}
-                      handleClose={handleClose}
-                    />
-                  ) : null
-                }
-                {...props}
-              />
-            </div>
-            {showPanel && (
-              <div style={panelStyle} className={classNames.panel}>
-                {panel({ handleClose })}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      <ButtonWrapper>{Button as JSX.Element}</ButtonWrapper>
-    </div>
-  );
-};
-
-export default Advanced;

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

@@ -1,51 +0,0 @@
-import type { FunctionComponent, MouseEvent } from 'react';
-import type { StringIndexedObject } from '~/types';
-import { PopoverMenuItemSize } from '~/components/PopoverMenu/types';
-import type { PopoverMenuItemSelectedColorVariant } from '~/components/PopoverMenu/PopoverMenuItem/types';
-
-export interface AdvancedItem {
-  action?: {
-    type: 'open_panel';
-    action?: () => JSX.Element;
-    panel?: () => JSX.Element;
-  };
-  name: string;
-  icon?: string;
-  stopPropagation?: boolean;
-}
-
-export interface AdvancedWrapperArgs {
-  children: JSX.Element;
-}
-
-export interface AdvancedProps {
-  button: JSX.Element | JSX.Element[];
-  /**
-   * Position above button rather than below
-   */
-  above?: boolean;
-  /**
-   * Position popover to right-align rather than left-align
-   */
-  right?: boolean;
-  /**
-   * Button wrapper
-   */
-  wrapper?: (args: AdvancedWrapperArgs) => JSX.Element;
-  items?: AdvancedItem[];
-  /**
-   * On action callback
-   */
-  className?: string;
-  onAction?: (action: StringIndexedObject, e: MouseEvent) => void;
-  /**
-   * Size
-   */
-  size?: PopoverMenuItemSize;
-  search?: FunctionComponent;
-  searchInput?: FunctionComponent;
-  searchPlaceholder?: string;
-  searchDebounceInterval?: number;
-  variant?: 'panel-full' | 'panel-short' | 'green' | 'default';
-  selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
-}