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

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

@@ -1,31 +0,0 @@
-import type { StringIndexedObject } from '~/types';
-
-export const CLASS_NAMES = {
-  container: 'flex flex-row flex-1 w-full',
-  baseItem:
-    'flex flex-1 w-full h-1.5 rounded-full mr-1 transition-all duration-300 ease-in-out',
-  inactiveItem: '.baseItem bg-neutral-200',
-  skeletonWrapper: 'w-full mr-4',
-};
-
-export const DEFAULT_TOTAL_ITEMS = 5;
-
-export const SCORE_COLORS = [
-  'neutral-200',
-  'red-200',
-  'orange-200',
-  'turquoise-300',
-  'turquoise-400',
-];
-
-/**
- * Whilst we could just do `bg-${score}`, this wouldn't be picked up by tailwind's
- * JIT build. So we need to explicitly define the colors.
- */
-export const SCORE_TO_BACKGROUND_CLASS: StringIndexedObject<string> = {
-  'neutral-200': 'bg-neutral-200',
-  'red-200': 'bg-red-200',
-  'orange-200': 'bg-orange-200',
-  'turquoise-300': 'bg-turquoise-300',
-  'turquoise-400': 'bg-turquoise-400',
-};

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

@@ -1,34 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { DEFAULT_TOTAL_ITEMS } from './constants';
-import SkeletonLoader from '~/components/SkeletonLoader';
-import useStrengthMeter from './useStrengthMeter';
-
-export interface StrengthMeterProps {
-  score: number;
-  isLoading?: boolean;
-  totalItems?: number;
-}
-
-const StrengthMeter: FunctionComponent<StrengthMeterProps> = function ({
-  score,
-  isLoading = false,
-  totalItems = DEFAULT_TOTAL_ITEMS,
-}) {
-  const { items, classNames } = useStrengthMeter(score, totalItems);
-
-  return (
-    <SkeletonLoader
-      wrapperClassName={classNames.skeletonWrapper}
-      isLoading={isLoading}
-      afterLoading={
-        <div className={classNames.container}>
-          {items.map((itemClassName, key) => (
-            <div key={String(key)} className={itemClassName} />
-          ))}
-        </div>
-      }
-    />
-  );
-};
-
-export default StrengthMeter;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/StrengthMeter/useStrengthMeter.ts

@@ -1,35 +0,0 @@
-import { useClasses } from '~/hooks';
-
-import {
-  CLASS_NAMES,
-  SCORE_COLORS,
-  SCORE_TO_BACKGROUND_CLASS,
-} from './constants';
-import type { StringIndexedObject } from '~/types';
-
-export interface StrengthMeterHook {
-  items: string[];
-  classNames: StringIndexedObject<string>;
-}
-
-export default function useStrengthMeter(
-  score: number,
-  totalItems: number,
-): StrengthMeterHook {
-  const color = SCORE_COLORS[score];
-
-  const classNames = useClasses(CLASS_NAMES, {
-    activeItem: ['.baseItem', SCORE_TO_BACKGROUND_CLASS[color]],
-  });
-
-  const itemsArray = Array.from(Array(totalItems));
-
-  const items = itemsArray.map((_, index) =>
-    index < score ? classNames.activeItem : classNames.inactiveItem,
-  );
-
-  return {
-    items,
-    classNames,
-  };
-}

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

@@ -1,25 +0,0 @@
-import type { StringIndexedObject } from '~/types';
-
-export const TAG_BASE_CLASSES =
-  'border border-solid rounded-full inline-flex items-center';
-
-export const TAG_VARIANTS: StringIndexedObject = {
-  outline: 'bg-opacity-0',
-  solid: 'bg-opacity-100',
-};
-
-export const TAG_SIZES: Record<number, string> = {
-  31: 'px-3 h-7.75 text-style-i-em-up',
-  28: 'px-3 h-7 text-style-i-em-up',
-  24: 'px-2 h-6 text-style-i-em-up',
-  21: 'px-1.5 h-5.25 text-style-j-em-up',
-};
-
-export const TAG_COLOURS: StringIndexedObject = {
-  grey: 'border-neutral-200 bg-neutral-200 text-neutral-600',
-  violet: 'border-violet-100 bg-violet-100 text-violet-200',
-  lavender: 'border-lavender-100 bg-lavender-100 text-lavender-200',
-  green: 'border-turquoise-100 bg-turquoise-100 text-turquoise-500',
-  blue: 'border-blue-100 bg-blue-100 text-blue-200',
-  orange: 'border-orange-100 bg-orange-100 text-orange-200',
-};

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

@@ -1,28 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import type { TagProps } from '~/components/Tag/types';
-import useTagClassName from '~/components/Tag/useTagClassName';
-
-const Tag: FunctionComponent<TagProps> = function ({
-  label,
-  children,
-  className: initialClassName,
-  variant = 'outline',
-  color = 'grey',
-  size = 24,
-}) {
-  const className = useTagClassName({
-    className: initialClassName,
-    variant,
-    color,
-    size,
-  });
-
-  return (
-    <span className={className}>
-      {label}
-      {children}
-    </span>
-  );
-};
-
-export default Tag;

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

@@ -1,20 +0,0 @@
-export type TagColor =
-  | 'grey'
-  | 'violet'
-  | 'lavender'
-  | 'green'
-  | 'blue'
-  | 'orange'
-  | null;
-
-export interface TagProps {
-  className?: string | JSX.Element;
-  label?: string;
-  children?: JSX.Element | JSX.Element[];
-  color?: TagColor;
-  size?: 31 | 28 | 24 | 21;
-  /**
-   * Tag variant name
-   */
-  variant?: 'solid' | 'outline';
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Tag/useTagClassName.ts

@@ -1,31 +0,0 @@
-import clsx from 'clsx';
-import {
-  TAG_BASE_CLASSES,
-  TAG_VARIANTS,
-  TAG_COLOURS,
-  TAG_SIZES,
-} from './constants';
-import type { TagProps } from './types';
-
-type TagClassNameHookArgs = Omit<TagProps, 'label' | 'children'>;
-
-export default function useTagClassName({
-  color,
-  variant,
-  size,
-  className: initialClassName,
-}: TagClassNameHookArgs): string {
-  const variantClassName = TAG_VARIANTS[variant as string];
-  const colours = TAG_COLOURS[color as string];
-  const sizeClassName = TAG_SIZES[size as number];
-
-  const className = clsx(
-    TAG_BASE_CLASSES,
-    variantClassName,
-    sizeClassName,
-    colours,
-    initialClassName,
-  );
-
-  return className;
-}

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

@@ -1,43 +0,0 @@
-import React, { FunctionComponent, HTMLAttributes } from 'react';
-import type { SkeletonProps } from 'react-loading-skeleton';
-import SkeletonLoader from '~/components/SkeletonLoader';
-
-export interface TextProps extends HTMLAttributes<HTMLElement> {
-  text?: JSX.Element | string;
-  className?: string;
-  skeletonClassName?: string;
-  isLoading?: boolean;
-  textComponent?: keyof JSX.IntrinsicElements;
-  skeletonProps?: SkeletonProps;
-  htmlFor?: string;
-}
-
-const Text: FunctionComponent<TextProps> = function ({
-  text,
-  isLoading = false,
-  textComponent: TextComponent = 'span',
-  className = 'text-style-g',
-  skeletonClassName = '',
-  skeletonProps = {},
-  ...restProps
-}) {
-  const TextComponentTag = TextComponent as unknown as FunctionComponent<
-    HTMLAttributes<HTMLElement>
-  >;
-
-  return (
-    <TextComponentTag
-      className={className}
-      {...(restProps as HTMLAttributes<HTMLElement>)}
-    >
-      <SkeletonLoader
-        isLoading={isLoading}
-        className={skeletonClassName}
-        afterLoading={text}
-        {...skeletonProps}
-      />
-    </TextComponentTag>
-  );
-};
-
-export default Text;

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

@@ -1,24 +0,0 @@
-import React, { type FunctionComponent } from 'react';
-import useTextSlides from './useTextSlides';
-
-export interface TextSlidesProps {
-  children: JSX.Element[];
-  autoRotating?: boolean;
-  autoRotateTime?: number;
-}
-
-const TextSlides: FunctionComponent<TextSlidesProps> = function ({
-  children,
-  autoRotating = true,
-  autoRotateTime = 500,
-}) {
-  const { activeSlide } = useTextSlides(
-    children.length,
-    autoRotating,
-    autoRotateTime,
-  );
-
-  return <>{children[activeSlide]}</>;
-};
-
-export default TextSlides;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/TextSlides/useTextSlides.ts

@@ -1,50 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export interface TextSlidesHook {
-  activeSlide: number;
-  nextSlide: () => void;
-  prevSlide: () => void;
-}
-
-export default function useTextSlides(
-  amountOfSlides: number,
-  autoRotating = true,
-  autoRotateTime = 500,
-): TextSlidesHook {
-  const [activeSlide, setActiveSlide] = useState(0);
-
-  const nextSlide = () => {
-    if (activeSlide < amountOfSlides - 1) {
-      setActiveSlide(activeSlide + 1);
-    } else {
-      setActiveSlide(0);
-    }
-  };
-
-  const prevSlide = () => {
-    if (activeSlide > 0) {
-      setActiveSlide(activeSlide - 1);
-    } else {
-      setActiveSlide(amountOfSlides - 1);
-    }
-  };
-
-  //   A useEffect call that will auto rotate the slides based
-  //   on the autoRotating boolean and autoRotateTime number (in ms)
-  useEffect(() => {
-    if (autoRotating) {
-      const interval = setInterval(() => {
-        nextSlide();
-      }, autoRotateTime);
-      return () => clearInterval(interval);
-    }
-
-    return () => {};
-  }, [activeSlide, autoRotateTime, autoRotating]);
-
-  return {
-    activeSlide,
-    nextSlide,
-    prevSlide,
-  };
-}

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

@@ -1,20 +0,0 @@
-import type { StringIndexedObject } from '~/types';
-
-export const PERIODS: StringIndexedObject<string> = {
-  second: '%ds ago',
-  minute: '%dm ago',
-  hour: '%dh ago',
-  day: '%dd ago',
-  week: '%dw ago',
-  month: '%dmo ago',
-  year: '%dy ago',
-};
-
-export const PERIOD_LENGTHS: StringIndexedObject<number> = {
-  second: 60,
-  minute: 60,
-  hour: 24,
-  day: 7,
-  week: 4.33,
-  month: 12,
-};

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

@@ -1,66 +0,0 @@
-import { PERIOD_LENGTHS, PERIODS } from '~/components/TimeAgo/constants';
-import type { StringIndexedObject } from '~/types';
-
-export const checkAndFormatTimestamp = (
-  timestamp: number,
-  minYear = 2019,
-): Date => {
-  // Construct date object
-  const date = new Date(timestamp);
-
-  // Timestamp is incorrectly formatted (not in milliseconds) if year in date
-  // object from timestamp is less than min year. Need to correct timestamp
-  if (date.getFullYear() < minYear) {
-    // catch case for timestamp in seconds - will be less than 10^10
-    if (date.getTime() < 10 ** 10) {
-      return new Date(timestamp * 1000);
-    }
-    // catch case for timestamp in tenths of seconds - will be less than 10^11
-    if (date.getTime() < 10 ** 11) {
-      return new Date(timestamp * 100);
-    }
-    // if neither of above, timestamp in hundreths of seconds - will be less
-    // than 10^12
-    return new Date(timestamp * 10);
-  }
-
-  return date;
-};
-
-export const timeAgoInWords = (
-  fromDate: Date,
-  periods: StringIndexedObject<string> = PERIODS,
-  periodLengths: StringIndexedObject<number> = PERIOD_LENGTHS,
-): string => {
-  const toDate = new Date();
-
-  let difference = Math.abs(toDate.getTime() - fromDate.getTime()) / 1000;
-  let lengthKey = 0;
-
-  const periodKeys = Object.keys(periods);
-  const periodLengthKeys = Object.keys(periodLengths);
-
-  if (difference < 10) return 'just now';
-
-  if (difference < 60)
-    return periods[periodKeys[0]].replace(
-      '%d',
-      Math.round(difference).toString(),
-    );
-
-  for (
-    let i = 0;
-    difference >= periodLengths[periodLengthKeys[i]] &&
-    i < periodLengthKeys.length;
-    i++
-  ) {
-    lengthKey = i;
-    difference /= periodLengths[periodLengthKeys[i]];
-  }
-
-  difference = Math.round(difference);
-
-  const period = periods[periodKeys[lengthKey + 1]];
-
-  return period.replace('%d', difference.toString());
-};

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

@@ -1,22 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useTimeAgoProps from '~/components/TimeAgo/useTimeAgoProps';
-
-export interface TimeAgoProps {
-  className?: string;
-  /**
-   * Timestamp - any valid date timestamp format, as converted to date using
-   * `new Date(timestamp)` for initial checking
-   */
-  timestamp?: number;
-}
-
-const TimeAgo: FunctionComponent<TimeAgoProps> = function ({
-  className,
-  timestamp,
-}) {
-  const { formattedDate } = useTimeAgoProps(timestamp as number);
-
-  return <span className={className}>{formattedDate}</span>;
-};
-
-export default TimeAgo;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/TimeAgo/useTimeAgoProps.ts

@@ -1,17 +0,0 @@
-import { checkAndFormatTimestamp, timeAgoInWords } from './helpers';
-import { useMemo } from 'react';
-
-export interface TimeAgoPropsHook {
-  date: Date;
-  formattedDate: string;
-}
-
-export default function useTimeAgoProps(timestamp: number): TimeAgoPropsHook {
-  const date = checkAndFormatTimestamp(timestamp);
-  const formattedDate = useMemo(() => timeAgoInWords(date), [date]);
-
-  return {
-    date,
-    formattedDate,
-  };
-}

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

@@ -1,22 +0,0 @@
-import type { StringIndexedObject } from '~/types';
-
-export const CLASS_NAMES = {
-  wrapper: '',
-  item: 'flex flex-row justify-start items-center',
-  itemIconWrapper: 'flex flex-col items-center',
-  itemIcon: 'w-2 h-2 rounded-full -my-2 z-20',
-  itemContent: 'ml-4 flex flex-col gap-y-1',
-  itemBorder: 'w-1 h-10 top-0 bottom-0',
-  itemBorderCompact: 'w-1 h-6 top-0 bottom-0',
-  itemBorderActive: 'bg-neutral-200',
-  itemTitle: 'text-style-g text-neutral-700 max-w-42',
-  itemDate: 'text-style-h text-neutral-500',
-  itemCloseIcon: 'ml-3 w-4 h-4 text-neutral-500',
-};
-
-export const FILL_CLASS_NAMES: StringIndexedObject<string> = {
-  green: 'bg-green-500',
-  red: 'bg-red-200',
-  yellow: 'bg-yellow',
-  grey: 'bg-neutral-600',
-};

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

@@ -1,95 +0,0 @@
-import clsx from 'clsx';
-import React, { type FunctionComponent } from 'react';
-import Button from '../Button';
-import Text from '../Text';
-import { CLASS_NAMES, FILL_CLASS_NAMES } from './constants';
-
-export interface TimelineItem {
-  title: string;
-  date?: string;
-  fill: keyof typeof FILL_CLASS_NAMES;
-}
-
-export interface TimelineProps {
-  items: TimelineItem[];
-  canDeleteItem?: boolean;
-  onDeleteItem?: (item: TimelineItem) => void;
-  flipped?: boolean;
-  compact?: boolean;
-}
-
-const Timeline: FunctionComponent<TimelineProps> = function ({
-  items,
-  canDeleteItem = false,
-  onDeleteItem = () => {},
-  flipped = false,
-  compact = false,
-}) {
-  const borderClass = compact
-    ? CLASS_NAMES.itemBorderCompact
-    : CLASS_NAMES.itemBorder;
-
-  return (
-    <div className={CLASS_NAMES.wrapper}>
-      {items.map((item, key) => {
-        const title = (
-          <Text text={item.title} className={CLASS_NAMES.itemTitle} />
-        );
-        const date = item.date && (
-          <Text text={item.date} className={CLASS_NAMES.itemDate} />
-        );
-
-        return (
-          <div className={CLASS_NAMES.item}>
-            <div className={CLASS_NAMES.itemIconWrapper}>
-              <div
-                className={clsx(
-                  borderClass,
-                  key !== 0 ? CLASS_NAMES.itemBorderActive : '',
-                )}
-              />
-              <div
-                className={clsx(
-                  CLASS_NAMES.itemIcon,
-                  FILL_CLASS_NAMES[item.fill],
-                )}
-              />
-              <div
-                className={clsx(
-                  borderClass,
-                  key !== items.length - 1 ? CLASS_NAMES.itemBorderActive : '',
-                )}
-              />
-            </div>
-            <div className={CLASS_NAMES.itemContent}>
-              {!flipped && (
-                <>
-                  {title}
-                  {date}
-                </>
-              )}
-              {flipped && (
-                <>
-                  {date}
-                  {title}
-                </>
-              )}
-            </div>
-            {canDeleteItem && (
-              <Button.Icon
-                id={`delete-${item.title}`}
-                icon="close"
-                className={CLASS_NAMES.itemCloseIcon}
-                onClick={() => {
-                  onDeleteItem(item);
-                }}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Timeline;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ToastContainer/constants.tsx

@@ -1,17 +0,0 @@
-import { Slide } from 'react-toastify';
-import CloseButton from '~/hooks/useToast/CloseButton';
-
-export const INITIAL_STATE = {
-  position: 'bottom-center',
-  autoClose: 5000,
-  hideProgressBar: false,
-  pauseOnHover: true,
-  pauseOnFocusLoss: true,
-  closeOnClick: false,
-  newestOnTop: true,
-  draggable: false,
-  closeButton: CloseButton,
-  transition: Slide,
-  theme: 'colored',
-  icon: false,
-};

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

@@ -1,16 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import {
-  ToastContainer as ReactToastifyToastContainer,
-  type ToastContainerProps,
-} from 'react-toastify';
-import useToastContainerState from '~/components/ToastContainer/useToastContainerState';
-
-const ToastContainer: FunctionComponent<ToastContainerProps> = function (
-  props,
-) {
-  const state = useToastContainerState(props);
-
-  return <ReactToastifyToastContainer {...state} />;
-};
-
-export default ToastContainer;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ToastContainer/useToastContainerState.ts

@@ -1,15 +0,0 @@
-import type { ToastContainerProps } from 'react-toastify';
-import { INITIAL_STATE } from './constants';
-
-export interface Hook {}
-
-export default function useToastContainerState(
-  props: ToastContainerProps,
-): Hook {
-  const state = {
-    ...INITIAL_STATE,
-    ...props,
-  };
-
-  return state;
-}

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

@@ -1,52 +0,0 @@
-export * from './DesktopLayout';
-
-export { default as Animations } from './Animations';
-export { default as AnimatedModalContainer } from './Modal/AnimatedModalContainer';
-export { default as Banner } from './Banner';
-export { default as BreakPoints } from './BreakPoints';
-export { default as Button } from './Button';
-export { default as Card } from './Card';
-export { default as CommonWrapper } from './CommonWrapper';
-export { default as ConfigWrapper } from './ConfigWrapper';
-export { default as CopyContent } from './CopyContent';
-export { default as DesktopFooter } from './DesktopFooter';
-export { default as DesktopHeader } from './DesktopHeader';
-export { default as FinanceStatusTag } from './FinanceStatusTag';
-export { default as Header } from './Header';
-export { default as HelpButton } from './HelpButton';
-export { default as Icon } from './Icon';
-export { default as InfoBanner } from './InfoBanner';
-export { default as Layout, LayoutFooter, LayoutHeader } from './Layout';
-export { default as Loader } from './Loader';
-export { default as LoadingProvider } from '~/components/LoadingProvider';
-export { default as LoadingSpinner } from './LoadingSpinner';
-export { default as Menu } from './Menu';
-export { default as ModalContainer } from './Modal/ModalContainer';
-export { default as ModalLayoutCenter } from './Modal/ModalLayout/ModalLayoutCenter';
-export { default as ModalLayoutFullScreen } from './Modal/ModalLayout/ModalLayoutFullScreen';
-export { default as ModalLayoutSlideLeft } from './Modal/ModalLayout/ModalLayoutSlideLeft';
-export { default as ModalLayoutSlideUp } from './Modal/ModalLayout/ModalLayoutSlideUp';
-export { default as NavigationLink } from './NavigationLink';
-export { default as Pagination } from './Pagination';
-export { default as PassConstants } from './Pass/PassConstants';
-export { default as PlaceHolder } from './PlaceHolder';
-export { default as Popover } from './Popover';
-export { default as PopoverMenu } from './PopoverMenu';
-export { default as PopoverMenuItem } from './PopoverMenu/PopoverMenuItem';
-export { default as Price } from './Price';
-export { default as Recaptcha } from './Recaptcha';
-export { default as ScrollTopButton } from './ScrollTopButton';
-export { default as Separator } from './Separator';
-export { default as SkeletonLoader } from '~/components/SkeletonLoader';
-export { default as StatusTag } from '~/components/StatusTag';
-export { default as StrengthMeter } from '~/components/StrengthMeter';
-export { default as Tag } from './Tag';
-export { default as Text } from './Text';
-export { default as TextSlides } from './TextSlides';
-export { default as TimeAgo } from './TimeAgo';
-export { default as Timeline } from './Timeline';
-export { default as ExpandableContent } from './ExpandableContent';
-export {
-  default as ModalsWrapper,
-  ModalsWrapperContext,
-} from './ModalsWrapper';