@kanda-libs/ks-component-ts 0.2.240-qa3 → 0.2.242

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,66 +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}
-      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';

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

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

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

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

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