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

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;

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

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

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