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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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