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

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

@@ -1,45 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import Skeleton, { SkeletonProps } from 'react-loading-skeleton';
-
-import useSkeletonLoader from '~/components/SkeletonLoader/useSkeletonLoader';
-
-export interface SkeletonLoaderProps extends SkeletonProps {
-  /**
-   * The loading state of the component - defaults to false
-   */
-  isLoading?: boolean;
-  /**
-   * The component to show after loading
-   */
-  afterLoading?: JSX.Element | string | null;
-  /**
-   * HTML className for the wrapper
-   */
-  wrapperClassName?: string;
-}
-
-const SkeletonLoader: FunctionComponent<SkeletonLoaderProps> = function ({
-  isLoading = false,
-  afterLoading = <div />,
-  wrapperClassName,
-  ...restProps
-}) {
-  const { loading, classNames } = useSkeletonLoader(
-    wrapperClassName,
-    isLoading,
-  );
-
-  const SkeletonTag = Skeleton as unknown as FunctionComponent<SkeletonProps>;
-
-  if (loading) {
-    return (
-      <div className={classNames.wrapper}>
-        <SkeletonTag {...restProps} />
-      </div>
-    );
-  }
-
-  return <>{afterLoading}</>;
-};
-
-export default SkeletonLoader;

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

@@ -1,31 +0,0 @@
-import { useContext } from 'react';
-import { DEFAULT_WRAPPER_CLASS_NAME } from '~/components/SkeletonLoader/constants';
-import { Context } from '~/components/LoadingProvider/Context';
-
-export interface Hook {
-  loading: boolean;
-  classNames: {
-    wrapper: string;
-  };
-}
-
-export default function useSkeletonLoader(
-  wrapperClassName = '',
-  isLoading = false,
-): Hook {
-  const wrapper = wrapperClassName || DEFAULT_WRAPPER_CLASS_NAME;
-
-  const contextLoading = useContext(Context);
-  /**
-   * Allow to force isLoading
-   * To be able to set is loading false even if the parent context is loading
-   */
-  const loading = typeof isLoading !== 'undefined' ? isLoading : contextLoading;
-
-  return {
-    loading,
-    classNames: {
-      wrapper,
-    },
-  };
-}

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

@@ -1,20 +0,0 @@
-export const FORMATTER = {
-  prefixAgo: null,
-  prefixFromNow: null,
-  suffixAgo: null,
-  suffixFromNow: null,
-  seconds: '%ds ago',
-  minute: '%dm ago',
-  minutes: '%dm ago',
-  hour: '%dh ago',
-  hours: '%dh ago',
-  day: '%dd ago',
-  days: '%dd ago',
-  week: '%dw ago',
-  weeks: '%dw ago',
-  month: '%dmo ago',
-  months: '%dmo ago',
-  year: '%dy ago',
-  years: '%dy ago',
-  wordSeparator: ' ',
-};

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

@@ -1,36 +0,0 @@
-import type { TagColor } from '~/components/Tag/types';
-
-export const defaultExtractColor = (status: string): TagColor => {
-  if (status === 'draft') return 'grey';
-  if (status === 'sent') return 'green';
-  if (status === 'accepted') return 'green';
-  if (status === 'declined') return 'violet';
-  if (status === 'lead') return 'violet';
-  return 'grey';
-};
-
-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;
-};

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

@@ -1,36 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import Tag from '~/components/Tag';
-import type { StatusTagStatus } from '~/components/StatusTag/types';
-import type { TagColor, TagProps } from '~/components/Tag/types';
-import useStatusTagProps from '~/components/StatusTag/useStatusTagProps';
-import { defaultExtractColor } from '~/components/StatusTag/helpers';
-import TimeAgo from '~/components/TimeAgo';
-
-export interface StatusTagProps extends TagProps {
-  status: StatusTagStatus;
-  timestamp?: number;
-  formatStatus?: (status: string) => string;
-  extractColor?: (status: string) => TagColor;
-}
-
-const StatusTag: FunctionComponent<StatusTagProps> = function ({
-  status,
-  timestamp,
-  formatStatus = (status) => status,
-  extractColor = defaultExtractColor,
-  ...tagProps
-}) {
-  const { color } = useStatusTagProps(status, extractColor);
-
-  if (!color) {
-    return <></>;
-  }
-
-  return (
-    <Tag label={formatStatus(status)} color={color as TagColor} {...tagProps}>
-      <>{timestamp && <TimeAgo timestamp={timestamp} className="ml-1" />}</>
-    </Tag>
-  );
-};
-
-export default StatusTag;

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

@@ -1,13 +0,0 @@
-export type StatusTagStatus =
-  | 'draft'
-  | 'sent'
-  | 'accepted'
-  | 'declined'
-  | 'lead';
-
-declare module 'react-timeago/lib/formatters/buildFormatter' {
-  // @ts-ignore
-  import type { Formatter } from 'react-timeago';
-  const buildFormatter: (formatter: Formatter) => Formatter;
-  export default buildFormatter;
-}

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

@@ -1,16 +0,0 @@
-import type { TagColor } from '~/components/Tag/types';
-
-export interface StatusTagPropsHook {
-  color: string;
-}
-
-export default function useStatusTagProps(
-  status: string,
-  extractColor: (status: string) => TagColor,
-): StatusTagPropsHook {
-  const color = extractColor(status);
-
-  return {
-    color: color as string,
-  };
-}

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,
-  };
-}