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

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';

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

@@ -0,0 +1,87 @@
+import React, { type FunctionComponent, type MouseEvent } from 'react';
+import type { HomeLinkProps } from '~/components/ConfigWrapper';
+import { MENU_MODAL_ID } from '~/components/Menu/constants';
+import Animations from '~/components/Animations';
+import AnimatedModalContainer from '~/components/Modal/AnimatedModalContainer';
+import ModalLayoutSlideLeft from '~/components/Modal/ModalLayout/ModalLayoutSlideLeft';
+import Icon from '~/components/Icon';
+import HelpButton from '~/components/HelpButton';
+import MenuHeader from './MenuHeader';
+
+export interface MenuItem {
+  name: string;
+  icon: string;
+  href?: string;
+  target?: string;
+  to?: string;
+  onClick?: (e: MouseEvent) => void;
+  stroke?: string;
+  size?: number;
+}
+
+export interface MenuProps {
+  items: MenuItem[];
+  footer?: JSX.Element | JSX.Element[];
+  companyName?: string | JSX.Element | JSX.Element[];
+  companyProfilePicture?: string;
+  plan?: string | JSX.Element | JSX.Element[];
+  linkComponent?: FunctionComponent<HomeLinkProps>;
+  hideHelp?: boolean;
+}
+
+const Menu: FunctionComponent<MenuProps> = function ({
+  items = [],
+  linkComponent: LinkComponent = 'a',
+  footer,
+  companyName,
+  companyProfilePicture,
+  plan,
+  hideHelp = false,
+}) {
+  return (
+    <AnimatedModalContainer id={MENU_MODAL_ID} opacity={50}>
+      {({ isVisible, hideModal, handleClose }) => (
+        <Animations.SlideLeft show={isVisible} onEnd={hideModal}>
+          <ModalLayoutSlideLeft
+            footer={footer}
+            header={
+              <MenuHeader
+                companyName={companyName}
+                companyProfilePicture={companyProfilePicture}
+                plan={plan}
+                onClose={handleClose}
+                hideHelp={hideHelp}
+              />
+            }
+          >
+            <>
+              <div className="-mt-8">
+                {items.map(({ icon, name, stroke, size, ...itemProps }, i) => (
+                  <div
+                    onClick={handleClose}
+                    className="cursor-pointer mt-8"
+                    key={String(i)}
+                  >
+                    <LinkComponent {...itemProps}>
+                      <div className="flex flex-1 w-full h-8 items-center ">
+                        <Icon icon={icon} stroke={stroke} size={size || 32} />
+                        <p className="ml-4 style-d-em">{name}</p>
+                      </div>
+                    </LinkComponent>
+                  </div>
+                ))}
+              </div>
+              {!hideHelp && (
+                <div className="flex flex-row mt-8">
+                  <HelpButton variant="text" />
+                </div>
+              )}
+            </>
+          </ModalLayoutSlideLeft>
+        </Animations.SlideLeft>
+      )}
+    </AnimatedModalContainer>
+  );
+};
+
+export default Menu;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/AnimatedModalContainer/Container.tsx

@@ -0,0 +1,107 @@
+import React, { FunctionComponent } from 'react';
+import ReactDOM from 'react-dom';
+import { useRef, useState, useCallback, useContext, useEffect } from 'react';
+import clsx from 'clsx';
+
+import { BACKDROP_CLASS_NAME, ESC_KEY } from '../constants';
+import { opacitySuffix } from '../helpers';
+import { useOuterClick } from '~/hooks';
+import { Context as ModalsWrapperContext } from '~/components/ModalsWrapper';
+import type { OuterClickHook } from '~/hooks/useOuterClick';
+import type { BaseAnimatedModalContainerProps } from './types';
+import { getDocument } from '~/common/helpers';
+
+export interface ContainerChildrenArgs {
+  isShown: boolean;
+  backdropClassName: string;
+  isVisible: boolean;
+  handleClose: () => void;
+  hideModal: () => void;
+  ref: OuterClickHook;
+}
+
+export interface ContainerProps extends BaseAnimatedModalContainerProps {
+  children: (args: ContainerChildrenArgs) => JSX.Element;
+}
+
+const Container: FunctionComponent<ContainerProps> = function ({
+  id,
+  opacity,
+  children,
+}) {
+  const { visibleAnimatedModals: visibleModals, hideAnimatedModal: hideModal } =
+    useContext(ModalsWrapperContext);
+
+  const [isVisible, setIsVisible] = useState(visibleModals.indexOf(id) !== -1);
+  const isShown = visibleModals.indexOf(id) !== -1;
+
+  const suffix = opacitySuffix(opacity);
+
+  const backdropClassName = clsx(BACKDROP_CLASS_NAME, `opacity${suffix}`);
+
+  const modalsRef = useRef(visibleModals);
+
+  /*
+   * Handles close logic
+   */
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  /*
+   * Uses hook to call close when the click is outside of modal
+   */
+  const ref = useOuterClick(handleClose);
+
+  const onHide = useCallback(() => {
+    hideModal(id);
+    setIsVisible(false);
+    modalsRef.current = [];
+  }, [hideModal, id]);
+
+  /**
+   * Hiddes last modal when ESC key is pressed
+   */
+  useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.keyCode === ESC_KEY) {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (modalsRef.current.indexOf(id) === -1 && isShown) {
+      setIsVisible(true);
+      modalsRef.current = visibleModals;
+    }
+  }, [id, isShown, visibleModals]);
+
+  if (!isShown) {
+    return <></>;
+  }
+
+  /*
+   * Uses portal to move modal "modals" div on root so it would not have problems with z-index
+   */
+  return ReactDOM.createPortal(
+    children({
+      isShown,
+      backdropClassName,
+      isVisible,
+      handleClose,
+      hideModal: onHide,
+      ref,
+    }),
+    getDocument()?.getElementById('modals') as HTMLElement,
+  );
+};
+
+Container.displayName = 'AnimatedModalContainer-Container';
+
+export default Container;

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

@@ -0,0 +1,34 @@
+import React, { FunctionComponent } from 'react';
+import type { BaseAnimatedModalContainerProps } from './types';
+import Container, {
+  ContainerChildrenArgs,
+} from '~/components/Modal/AnimatedModalContainer/Container';
+import Animations from '~/components/Animations';
+
+export interface AnimatedModalContainerProps
+  extends BaseAnimatedModalContainerProps {
+  children: (
+    args: Omit<ContainerChildrenArgs, 'backdropClassName'>,
+  ) => JSX.Element;
+}
+
+const AnimatedModalContainer: FunctionComponent<AnimatedModalContainerProps> =
+  function ({ children, ...props }) {
+    return (
+      <Container {...props}>
+        {({ backdropClassName, isVisible, ...rest }) => (
+          <div className="w-vvp h-vvp">
+            <Animations.Fade show={isVisible}>
+              <div className={backdropClassName} />
+            </Animations.Fade>
+            {children({
+              isVisible,
+              ...rest,
+            })}
+          </div>
+        )}
+      </Container>
+    );
+  };
+
+export default AnimatedModalContainer;

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

@@ -0,0 +1,6 @@
+import type { OPACITIES } from '~/components/Modal/constants';
+
+interface BaseAnimatedModalContainerProps {
+  id: string;
+  opacity: typeof OPACITIES[number];
+}