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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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