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

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

@@ -0,0 +1,65 @@
+import React, { type FunctionComponent } from 'react';
+import Button from '../Button';
+import Text from '../Text';
+import { BANNER_SKELETONS, CLASS_NAMES } from './constants';
+
+export interface InfoBannerProps {
+  title?: string | JSX.Element;
+  icon?: JSX.Element;
+  nameContent?: JSX.Element;
+  search?: JSX.Element;
+  cta?: JSX.Element;
+  backArrow?: boolean;
+  isLoading?: boolean;
+  onGoBack?: () => void;
+  children?: JSX.Element;
+}
+
+const InfoBanner: FunctionComponent<InfoBannerProps> = function ({
+  title,
+  icon,
+  nameContent,
+  search,
+  cta,
+  backArrow = true,
+  isLoading = false,
+  onGoBack = () => {},
+  children,
+}) {
+  return (
+    <div className={CLASS_NAMES.container}>
+      <div className={CLASS_NAMES.nameContainer}>
+        {backArrow && (
+          <div className={CLASS_NAMES.backArrowContainer}>
+            <Button.Icon
+              id="info-banner-back-arrow"
+              icon="arrow-left"
+              onClick={() => {
+                onGoBack();
+              }}
+            />
+          </div>
+        )}
+        <div className={CLASS_NAMES.header}>
+          <div className={CLASS_NAMES.titleWrapper}>
+            <Text
+              className={CLASS_NAMES.title}
+              isLoading={isLoading}
+              text={title}
+              skeletonProps={BANNER_SKELETONS.title}
+            />
+            {!isLoading && icon}
+            {search}
+          </div>
+          {nameContent && (
+            <div className={CLASS_NAMES.nameContent}>{nameContent}</div>
+          )}
+        </div>
+        {cta && <span>{cta}</span>}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default InfoBanner;

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

@@ -0,0 +1,16 @@
+export const CLASS_NAMES = {
+  containerBase:
+    'flex flex-1 w-screen min-h-vvp flex-col space-between relative',
+  containerSticky: '',
+  wrapper: 'flex flex-1 w-full flex-col relative',
+  headerBase: 'w-full',
+  headerBorder: 'border-b-solid border-b border-neutral-200',
+  headerFixed: 'sticky top-0 z-50',
+  contentBase: 'flex flex-1 w-full flex-col',
+  contentPadding: 'py-8 px-6',
+  footerDefault: 'w-full px-6 mb-6',
+  footerFixed: 'w-full px-6 sticky bottom-6',
+  modalsShader: 'absolute bg-neutral-900 opacity-5 w-full h-full z-50',
+  widthLimit: 'w-full h-full max-w-7xl mx-auto',
+  flexGrow: 'flex flex-1',
+};

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

@@ -0,0 +1,82 @@
+import React, { FunctionComponent } from 'react';
+import useLayoutClassNames from './useLayoutClassNames';
+import {
+  Header as HeaderTeleporter,
+  Footer as FooterTeleporter,
+} from './teleporters';
+import ScrollTopButton from '~/components/ScrollTopButton';
+
+export interface LayoutProps {
+  children?: JSX.Element | JSX.Element[];
+  stickyHeader?: boolean;
+  stickyFooter?: boolean;
+  /**
+   * header background color
+   */
+  headerBg?: string;
+  /**
+   * background color
+   */
+  bg?: string;
+  /**
+   * Removes Border
+   */
+  noBorder?: boolean;
+  header?: JSX.Element;
+  footer?: JSX.Element;
+  /**
+   * Boolean flag for whether to show scroll top button
+   */
+  scrollTop?: boolean;
+  /**
+   * Removes content padding
+   */
+  noPadding?: boolean;
+  /**
+   * Only load header and footer if the component as mounted
+   * This is mainly used to allow for the use of this components
+   * in environments that support SSR (IE: NextJS)
+   */
+  checkForIsMounted?: boolean;
+}
+
+const Layout: FunctionComponent<LayoutProps> = function ({
+  children,
+  header,
+  footer,
+  checkForIsMounted = false,
+  ...restProps
+}) {
+  const { classNames, scrollTop } = useLayoutClassNames(restProps);
+
+  return (
+    <div id="layout" className={classNames.container}>
+      <div className={classNames.wrapper}>
+        <div className={classNames.header}>
+          <div className={classNames.headerWidthLimiter}>
+            <HeaderTeleporter.Target />
+          </div>
+        </div>
+        <div className={classNames.contentWidthLimiter}>
+          <div className={classNames.content}>
+            <HeaderTeleporter.Source>{header}</HeaderTeleporter.Source>
+            <FooterTeleporter.Source>{footer}</FooterTeleporter.Source>
+            {children}
+          </div>
+        </div>
+      </div>
+      <div className={classNames.footer}>
+        <FooterTeleporter.Target />
+      </div>
+
+      {scrollTop && <ScrollTopButton />}
+    </div>
+  );
+};
+
+const LayoutFooter = FooterTeleporter.Source;
+const LayoutHeader = HeaderTeleporter.Source;
+
+export { LayoutFooter, LayoutHeader };
+
+export default Layout;

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

@@ -0,0 +1,4 @@
+import { createTeleporter } from 'react-teleporter';
+
+export const Footer = createTeleporter();
+export const Header = createTeleporter();

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

@@ -0,0 +1,81 @@
+import clsx from 'clsx';
+import { CLASS_NAMES } from './constants';
+import type { LayoutProps } from '~/components/Layout/index';
+
+export interface LayoutClassNames {
+  wrapper: string;
+  modalsShader: string;
+  content: string;
+  container: string;
+  header: string;
+  footer: string;
+  headerWidthLimiter: string;
+  contentWidthLimiter: string;
+}
+
+export interface LayoutClassNamesHook {
+  scrollTop: boolean;
+  classNames: LayoutClassNames;
+}
+
+export type LayoutClassNamesHookArgs = Omit<
+  LayoutProps,
+  'children' | 'header' | 'footer'
+>;
+
+export default function useLayoutClassNames({
+  scrollTop = false,
+  stickyHeader,
+  stickyFooter,
+  headerBg,
+  bg,
+  noBorder,
+  noPadding,
+}: LayoutClassNamesHookArgs): LayoutClassNamesHook {
+  const {
+    containerSticky,
+    containerBase,
+    footerDefault,
+    footerFixed,
+    headerBase,
+    headerBorder,
+    headerFixed,
+    widthLimit,
+    contentBase,
+    contentPadding,
+    flexGrow,
+    ...classNames
+  } = CLASS_NAMES;
+
+  const container = clsx(
+    containerBase,
+    bg ? `bg-${bg}` : 'bg-neutral-000',
+    stickyFooter && containerSticky,
+  );
+
+  const header = clsx(
+    headerBase,
+    !noBorder && headerBorder,
+    headerBg ? `bg-${bg}` : 'bg-neutral-000',
+    stickyHeader && headerFixed,
+  );
+
+  const content = clsx(contentBase, !noPadding && contentPadding);
+
+  const footer = clsx(stickyFooter ? footerFixed : footerDefault);
+  const headerWidthLimiter = widthLimit;
+  const contentWidthLimiter = clsx(flexGrow, widthLimit);
+
+  return {
+    scrollTop,
+    classNames: {
+      ...classNames,
+      content,
+      container,
+      header,
+      footer,
+      headerWidthLimiter,
+      contentWidthLimiter,
+    },
+  };
+}

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

@@ -0,0 +1,27 @@
+import React, { FunctionComponent, useContext, useEffect } from 'react';
+import { ModalsWrapperContext } from '~/components/ModalsWrapper';
+
+export interface LoaderProps {
+  isLoading?: boolean;
+}
+
+const Loader: FunctionComponent<LoaderProps> = function ({
+  isLoading = false,
+}) {
+  const { setShowLoader } = useContext(ModalsWrapperContext);
+
+  useEffect(() => {
+    setShowLoader(isLoading);
+  }, [isLoading, setShowLoader]);
+
+  useEffect(
+    () => () => {
+      setShowLoader(false);
+    },
+    [setShowLoader],
+  );
+
+  return <></>;
+};
+
+export default Loader;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/LoadingProvider/Context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+export type LoadingProviderContext = boolean;
+
+export const Context = createContext<LoadingProviderContext>(false);

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

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from 'react';
+import useLoadingProviderValue from './useLoadingProviderValue';
+import { Context } from './Context';
+
+export interface LoadingProviderProps {
+  /**
+   * The children contained within the provider
+   */
+  children: JSX.Element;
+  /**
+   * isLoading state
+   */
+  isLoading: boolean;
+  /**
+   * overwrite state
+   */
+  overwrite?: boolean;
+}
+
+const LoadingProvider: FunctionComponent<LoadingProviderProps> = function ({
+  isLoading,
+  overwrite,
+  children,
+}) {
+  const value = useLoadingProviderValue(isLoading, overwrite);
+
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};
+
+export default LoadingProvider;

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

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { Context } from './Context';
+
+export default function useLoadingProviderValue(
+  isLoading = false,
+  overwrite = false,
+): boolean {
+  const isParentLoading = useContext(Context);
+
+  const defaultValue = isParentLoading || isLoading;
+
+  const overwritenValue =
+    typeof isLoading !== 'undefined' ? isLoading : isParentLoading;
+
+  const value = overwrite ? overwritenValue : defaultValue;
+
+  return value;
+}

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

@@ -0,0 +1,64 @@
+export const DEFAULT_SVG_PROPS = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 64 64',
+  fill: 'none',
+};
+
+export const DEFAULT_ANIMATION_PROPS = {
+  attributeName: 'transform',
+  type: 'rotate',
+  repeatCount: 'indefinite',
+};
+
+export const DEFAULT_STROKE_WIDTH = 8;
+
+export const DIRECTIONS = {
+  clockwise: {
+    from: '0 0 0',
+    to: '360 0 0',
+  },
+  anticlockwise: {
+    from: '360 0 0',
+    to: '0 0 0',
+  },
+};
+
+export const PATHS = {
+  path1: {
+    stroke: 'url(#spinner-secondHalf)',
+    d: 'M 60 32 A 28 28 0 0 1 4 32',
+  },
+  path2: {
+    stroke: 'url(#spinner-firstHalf)',
+    d: 'M 4 32 A 28 28 0 0 1 60 32',
+  },
+};
+
+export const LINEAR_GRAIDENT_PROPS = {
+  firstHalf: {
+    id: 'spinner-firstHalf',
+    stop1: {
+      offset: '0%',
+      stopOpacity: '0.5',
+      stopColor: 'currentColor',
+    },
+    stop2: {
+      offset: '100%',
+      stopOpacity: '1',
+      stopColor: 'currentColor',
+    },
+  },
+  secondHalf: {
+    id: 'spinner-secondHalf',
+    stop1: {
+      offset: '0%',
+      stopOpacity: '0.5',
+      stopColor: 'currentColor',
+    },
+    stop2: {
+      offset: '100%',
+      stopOpacity: '0',
+      stopColor: 'currentColor',
+    },
+  },
+};

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

@@ -0,0 +1,76 @@
+import React, { FunctionComponent } from 'react';
+import useLoadingSpinnerProps from './useLoadingSpinnerProps';
+import {
+  DEFAULT_SVG_PROPS,
+  DEFAULT_ANIMATION_PROPS,
+  DEFAULT_STROKE_WIDTH,
+  LINEAR_GRAIDENT_PROPS,
+  PATHS,
+} from './constants';
+
+export interface LoadingSpinnerProps {
+  /**
+   * Size of the spinner
+   */
+  size?: number;
+  /**
+   * Duration for the animation in ms
+   */
+  duration?: number;
+  /**
+   * Duration for the animation
+   */
+  anticlockwise?: boolean;
+  /**
+   * Classname to be applied to SVG
+   */
+  className: string;
+  /**
+   * Tailwind color name to set as stroke of the icon e.g. blue-300
+   */
+  stroke: string;
+}
+
+const LoadingSpinner: FunctionComponent<LoadingSpinnerProps> = function ({
+  size = 64,
+  duration = 1000,
+  anticlockwise = false,
+  className: initialClassName,
+  stroke,
+}) {
+  const { className, animationProps } = useLoadingSpinnerProps(
+    duration,
+    anticlockwise,
+    stroke,
+    initialClassName,
+  );
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      className={className}
+      {...DEFAULT_SVG_PROPS}
+    >
+      <defs>
+        <linearGradient id={LINEAR_GRAIDENT_PROPS.secondHalf.id}>
+          <stop {...LINEAR_GRAIDENT_PROPS.secondHalf.stop1} />
+          <stop {...LINEAR_GRAIDENT_PROPS.secondHalf.stop2} />
+        </linearGradient>
+        <linearGradient id={LINEAR_GRAIDENT_PROPS.firstHalf.id}>
+          <stop {...LINEAR_GRAIDENT_PROPS.firstHalf.stop1} />
+          <stop {...LINEAR_GRAIDENT_PROPS.firstHalf.stop2} />
+        </linearGradient>
+      </defs>
+
+      <g strokeWidth={DEFAULT_STROKE_WIDTH}>
+        <path {...PATHS.path1} />
+        <path {...PATHS.path2} />
+      </g>
+
+      <animateTransform {...DEFAULT_ANIMATION_PROPS} {...animationProps} />
+    </svg>
+  );
+};
+
+export default LoadingSpinner;

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

@@ -0,0 +1,35 @@
+import { DIRECTIONS } from './constants';
+import clsx from 'clsx';
+
+interface AnimationProps {
+  dur: string;
+  from: string;
+  to: string;
+}
+
+export interface LoadingSpinnerPropsHook {
+  className: string;
+  animationProps: AnimationProps;
+}
+
+export default function useLoadingSpinnerProps(
+  duration: number,
+  antiClockwise: boolean,
+  stroke: string,
+  initialClassName: string,
+): LoadingSpinnerPropsHook {
+  const className = clsx(
+    initialClassName,
+    stroke ? `stroke-current text-${stroke}` : '',
+  );
+
+  const animationProps = {
+    dur: `${duration}ms`,
+    ...(antiClockwise ? DIRECTIONS.anticlockwise : DIRECTIONS.clockwise),
+  };
+
+  return {
+    className,
+    animationProps,
+  };
+}

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

@@ -0,0 +1,15 @@
+import React, { FunctionComponent } from 'react';
+import { default as KandaWordMark } from '../../assets/logos/kanda-wordmark.svg';
+import type { StringIndexedObject } from '~/types';
+
+export interface LogoProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+const Logo: FunctionComponent<LogoProps> = function (props) {
+  return <KandaWordMark {...(props as StringIndexedObject)} />;
+};
+
+export default Logo;

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

@@ -0,0 +1,10 @@
+export const CLASS_NAMES = {
+  container: 'flex flex-1 flex-row items-center bg-neutral-000 pr-20 min-h-28',
+  defaultAvatar:
+    'w-12 h-12 my-auto lavender-200 rounded-full flex justify-center items-center',
+  loader: 'w-12 h-12 my-auto rounded-full bg-neutral-100',
+  companyProfilePicture: 'w-12 h-12 my-auto rounded-full object-contain',
+  infoContainer: 'flex flex-1 flex-col ml-4 justify-center my-auto',
+  companyName: 'text-style-f-em text-neutral-900',
+  plan: 'text-style-g text-neutral-600',
+};

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

@@ -0,0 +1,67 @@
+import React, { FunctionComponent } from 'react';
+import { Img } from 'react-image';
+import Button from '~/components/Button';
+import HeaderBase from '~/components/Header/HeaderBase';
+import { CLASS_NAMES } from './constants';
+import { DEFAULT_AVATAR_ICON_PROPS } from '~/common/constants';
+import Icon from '~/components/Icon';
+
+export interface MenuHeaderProps {
+  /**
+   * On close callback
+   */
+  onClose: () => void;
+  companyName?: string | JSX.Element | JSX.Element[];
+  companyProfilePicture?: string;
+  plan?: string | JSX.Element | JSX.Element[];
+  hideHelp?: boolean;
+}
+
+const MenuHeader: FunctionComponent<MenuHeaderProps> = function ({
+  onClose,
+  companyName,
+  companyProfilePicture,
+  plan,
+  hideHelp = false,
+}) {
+  return (
+    <HeaderBase
+      help={!hideHelp}
+      hideNumber
+      options={[
+        <Button.Icon
+          id="mobile-header-menu-close"
+          key="close"
+          onClick={onClose}
+          icon="close"
+        />,
+      ]}
+    >
+      <div className={CLASS_NAMES.container}>
+        {companyProfilePicture ? (
+          <Img
+            alt={companyName as string}
+            className={CLASS_NAMES.companyProfilePicture}
+            src={companyProfilePicture}
+            loader={<div className={CLASS_NAMES.loader} />}
+            unloader={
+              <div className={CLASS_NAMES.defaultAvatar}>
+                <Icon {...DEFAULT_AVATAR_ICON_PROPS} />
+              </div>
+            }
+          />
+        ) : (
+          <div className={CLASS_NAMES.defaultAvatar}>
+            <Icon {...DEFAULT_AVATAR_ICON_PROPS} />
+          </div>
+        )}
+        <div className={CLASS_NAMES.infoContainer}>
+          <p className={CLASS_NAMES.companyName}>{companyName || 'My Kanda'}</p>
+          {plan && <p className={CLASS_NAMES.plan}>{plan}</p>}
+        </div>
+      </div>
+    </HeaderBase>
+  );
+};
+
+export default MenuHeader;

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

@@ -0,0 +1 @@
+export const MENU_MODAL_ID = 'menu';