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

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];
-}

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

@@ -1,72 +0,0 @@
-import { FunctionComponent, useCallback, useContext } from 'react';
-import ReactDOM from 'react-dom';
-import clsx from 'clsx';
-import { ModalsWrapperContext } from '~/components/ModalsWrapper';
-import useOuterClick, { OuterClickHook } from '~/hooks/useOuterClick';
-import { opacitySuffix } from '../helpers';
-import type { OPACITIES } from '../constants';
-import { BACKDROP_CLASS_NAME } from '../constants';
-import { getDocument } from '~/common/helpers';
-
-export interface ContainerChildrenArgs {
-  id: string;
-  showBackdrop: boolean;
-  backdropClassName: string;
-  handleClose: () => void;
-  ref: OuterClickHook;
-}
-
-export interface ContainerProps {
-  /**
-   * The ID of the modal
-   */
-  id: string;
-  /**
-   * The opacity oif the background
-   */
-  opacity?: typeof OPACITIES[number];
-  children: (args: ContainerChildrenArgs) => JSX.Element;
-}
-
-const Container: FunctionComponent<ContainerProps> = function ({
-  id,
-  opacity = 5,
-  children,
-}) {
-  const { visibleModals, hideModal } = useContext(ModalsWrapperContext);
-
-  const suffix = opacitySuffix(opacity);
-
-  const backdropClassName = clsx(BACKDROP_CLASS_NAME, `opacity${suffix}`);
-
-  const showBackdrop = visibleModals.indexOf(id) === 0;
-
-  /*
-   * Handles close logic
-   */
-  const handleClose = useCallback(() => {
-    hideModal(id);
-  }, [id, hideModal]);
-
-  /*
-   * Uses hook to call close when the click is outside of modal
-   */
-  const ref = useOuterClick(handleClose);
-
-  /*
-   * Displays nothing if modal is not visible
-   */
-  if (visibleModals.indexOf(id) === -1) {
-    return null;
-  }
-
-  /*
-   * Uses portal to move modal "modals" div on root so it would not have problems with z-index
-   */
-  return ReactDOM.createPortal(
-    children({ id, showBackdrop, backdropClassName, handleClose, ref }),
-    getDocument()?.getElementById('modals') as HTMLElement,
-  );
-};
-
-export default Container;

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

@@ -1,34 +0,0 @@
-import React, { FunctionComponent, MutableRefObject } from 'react';
-import Container, { ContainerProps } from './Container';
-
-export interface ModalContainerChildrenArgs {
-  id: string;
-  handleClose: () => void;
-  ref?: MutableRefObject<HTMLElement | undefined>;
-}
-
-export interface ModalContainerProps extends ContainerProps {
-  overlay?: boolean;
-  children: (args: ModalContainerChildrenArgs) => JSX.Element;
-}
-
-const ModalContainer: FunctionComponent<ModalContainerProps> = function ({
-  overlay = false,
-  children,
-  ...props
-}) {
-  return (
-    <Container {...props}>
-      {({ showBackdrop, backdropClassName, ...rest }) => (
-        <div className={`"w-vvp h-vvp" ${overlay ? 'absolute top-0' : ''}`}>
-          {showBackdrop && <div className={backdropClassName} />}
-          {children({
-            ...rest,
-          })}
-        </div>
-      )}
-    </Container>
-  );
-};
-
-export default ModalContainer;

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

@@ -1,39 +0,0 @@
-import type { FunctionComponent } from 'react';
-import type { OPACITIES } from '~/components/Modal/constants';
-import clsx from 'clsx';
-import {
-  BACKDROP_CLASS_NAME,
-  BASE_CLASS_NAME,
-} from '~/components/Modal/ModalLayout/ModalLayoutCenter/constants';
-import { OPACITY_CLASS_NAMES } from '~/components/Modal/constants';
-
-export interface ContainerChildrenArgs {
-  className: string;
-  backdropClassName: string;
-}
-
-export interface ContainerProps {
-  children: (args: ContainerChildrenArgs) => JSX.Element;
-  initialClassName?: string;
-  opacity?: typeof OPACITIES[number];
-}
-
-const Container: FunctionComponent<ContainerProps> = function ({
-  children,
-  initialClassName,
-  opacity,
-}) {
-  const className = clsx(BASE_CLASS_NAME, initialClassName);
-
-  const backdropClassName = clsx(
-    BACKDROP_CLASS_NAME,
-    OPACITY_CLASS_NAMES[opacity as unknown as number],
-  );
-
-  return children({
-    className,
-    backdropClassName,
-  });
-};
-
-export default Container;

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

@@ -1,4 +0,0 @@
-export const BASE_CLASS_NAME =
-  'flex flex-1 flex-col fixed bg-neutral-000 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-xl shadow-2xl';
-
-export const BACKDROP_CLASS_NAME = 'fixed bg-neutral-900 w-full h-full';

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

@@ -1,36 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Icon as IconButton } from '~/components/Button';
-import type { OPACITIES } from '../../constants';
-import Container from './Container';
-
-interface ModalLayoutCenterProps {
-  id: string;
-  children: JSX.Element | JSX.Element[];
-  onClose?: () => void;
-  className?: string;
-  opacity?: typeof OPACITIES[number];
-}
-
-const ModalLayoutCenter = forwardRef<HTMLDivElement, ModalLayoutCenterProps>(
-  (
-    { id, children, onClose, className: initialClassName, opacity = 5 },
-    ref,
-  ) => (
-    <Container initialClassName={initialClassName} opacity={opacity}>
-      {({ className }) => (
-        <div className={className} ref={ref}>
-          <div className="flex flex-1 w-full flex-col relative p-6">
-            <div className="absolute top-0 right-0 p-3">
-              <IconButton id={`${id}-close`} onClick={onClose} icon="close" />
-            </div>
-            {children}
-          </div>
-        </div>
-      )}
-    </Container>
-  ),
-);
-
-ModalLayoutCenter.displayName = 'ModalLayoutCenter';
-
-export default ModalLayoutCenter;

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

@@ -1,12 +0,0 @@
-export const BODY_FULLSCREEN_MODAL_CLASS_NAME = 'full-screen-modal-visible';
-
-export const FULLSCREEN_MODAL_CLASS_NAME = 'full-screen-modal';
-
-export const CLASS_NAMES = {
-  container: `${FULLSCREEN_MODAL_CLASS_NAME} w-screen min-h-vvp bg-neutral-000 absolute overflow-scroll top-0`,
-  headerBase: 'w-full bg-neutral-000',
-  headerBorder: 'border-b border-neutral-200',
-  wrapper: 'flex flex-1 w-full min-h-full flex-col absolute pb-6',
-  content: 'flex flex-1 flex-col py-8 px-6 self-stretch',
-  footer: 'flex w-full px-6',
-};

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

@@ -1,48 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useModalLayoutFullScreenClassNames from './useModalLayoutFullScreenClassNames';
-
-export interface ModalLayoutFullScreenProps {
-  children: JSX.Element | JSX.Element[];
-  /**
-   * Header component
-   */
-  header?: JSX.Element;
-  /**
-   * Footer component
-   */
-  footer?: JSX.Element;
-  /**
-   * Removes header border
-   */
-  noBorder?: boolean;
-  /**
-   * Keep header in place
-   */
-  stickyHeader?: boolean;
-}
-
-const ModalLayoutFullScreen: FunctionComponent<ModalLayoutFullScreenProps> =
-  function ({
-    children = null,
-    header,
-    footer,
-    noBorder = false,
-    stickyHeader = false,
-  }) {
-    const classNames = useModalLayoutFullScreenClassNames(
-      noBorder,
-      stickyHeader,
-    );
-
-    return (
-      <div className={classNames.container}>
-        <div className={classNames.wrapper}>
-          <div className={classNames.header}>{header}</div>
-          <div className={classNames.content}>{children}</div>
-          <div className={classNames.footer}>{footer}</div>
-        </div>
-      </div>
-    );
-  };
-
-export default ModalLayoutFullScreen;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalLayout/ModalLayoutFullScreen/useModalLayoutFullScreenClassNames.ts

@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import clsx from 'clsx';
-import { getDocument } from '~/common/helpers';
-import {
-  CLASS_NAMES,
-  FULLSCREEN_MODAL_CLASS_NAME,
-  BODY_FULLSCREEN_MODAL_CLASS_NAME,
-} from './constants';
-
-export interface ModalLayoutFullScreenClassNamesHook {
-  container: string;
-  wrapper: string;
-  content: string;
-  footer: string;
-  header: string;
-}
-
-export default function useModalLayoutFullScreenClassNames(
-  noBorder: boolean,
-  stickyHeader: boolean,
-): ModalLayoutFullScreenClassNamesHook {
-  const { headerBase, headerBorder, ...classNames } = CLASS_NAMES;
-
-  const header = clsx(
-    headerBase,
-    noBorder ? '' : headerBorder,
-    stickyHeader ? 'sticky top-0' : '',
-  );
-
-  useEffect(() => {
-    document.body.classList.add(BODY_FULLSCREEN_MODAL_CLASS_NAME);
-
-    return () => {
-      if (
-        getDocument()?.getElementsByClassName(FULLSCREEN_MODAL_CLASS_NAME)
-          .length === 0
-      ) {
-        getDocument()?.body.classList.remove(BODY_FULLSCREEN_MODAL_CLASS_NAME);
-      }
-    };
-  }, []);
-
-  return {
-    ...classNames,
-    header,
-  };
-}

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

@@ -1,12 +0,0 @@
-export const BODY_SLIDE_LEFT_MODAL_CLASS_NAME = 'slide-left-modal-visible';
-
-export const SLIDE_LEFT_MODAL_CLASS_NAME = 'slide-left-modal';
-
-export const CLASS_NAMES = {
-  container: `${SLIDE_LEFT_MODAL_CLASS_NAME} w-screen max-w-sm min-h-vvp bg-neutral-000 absolute right-0`,
-  headerBase: 'w-full',
-  headerBorder: 'border-b border-neutral-200',
-  wrapper: 'flex flex-1 w-full min-h-full flex-col absolute pb-6',
-  content: 'flex flex-1 flex-col py-8 px-6 self-stretch',
-  footer: 'flex w-full px-6',
-};

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

@@ -1,39 +0,0 @@
-import React, { forwardRef } from 'react';
-import useModalLayoutSlideLeftClassNames from './useModalLayoutSlideLeftClassNames';
-
-interface ModalLayoutSlideLeftProps {
-  children?: JSX.Element | JSX.Element[];
-  /**
-   * Header component
-   */
-  header?: JSX.Element | JSX.Element[];
-  /**
-   * Footer component
-   */
-  footer?: JSX.Element | JSX.Element[];
-  /**
-   * Removes header border
-   */
-  noBorder?: boolean;
-}
-
-const ModalLayoutSlideLeft = forwardRef<
-  HTMLDivElement,
-  ModalLayoutSlideLeftProps
->(({ children, header, footer, noBorder = false }, ref) => {
-  const classNames = useModalLayoutSlideLeftClassNames(noBorder);
-
-  return (
-    <div className={classNames.container} ref={ref}>
-      <div className={classNames.wrapper}>
-        <div className={classNames.header}>{header}</div>
-        <div className={classNames.content}>{children}</div>
-        <div className={classNames.footer}>{footer}</div>
-      </div>
-    </div>
-  );
-});
-
-ModalLayoutSlideLeft.displayName = 'ModalLayoutSlideLeft';
-
-export default ModalLayoutSlideLeft;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalLayout/ModalLayoutSlideLeft/useModalLayoutSlideLeftClassNames.ts

@@ -1,42 +0,0 @@
-import { useEffect } from 'react';
-import clsx from 'clsx';
-import {
-  BODY_SLIDE_LEFT_MODAL_CLASS_NAME,
-  CLASS_NAMES,
-  SLIDE_LEFT_MODAL_CLASS_NAME,
-} from './constants';
-import { getDocument } from '~/common/helpers';
-
-export interface ModalLayoutSlideLeftClassNamesHook {
-  header: string;
-  container: string;
-  wrapper: string;
-  content: string;
-  footer: string;
-}
-
-export default function useModalLayoutSlideLeftClassNames(
-  noBorder: boolean,
-): ModalLayoutSlideLeftClassNamesHook {
-  const { headerBase, headerBorder, ...classNames } = CLASS_NAMES;
-
-  const header = clsx(headerBase, noBorder ? '' : headerBorder);
-
-  useEffect(() => {
-    document.body.classList.add(BODY_SLIDE_LEFT_MODAL_CLASS_NAME);
-
-    return () => {
-      if (
-        getDocument()?.getElementsByClassName(SLIDE_LEFT_MODAL_CLASS_NAME)
-          .length === 0
-      ) {
-        getDocument()?.body.classList.remove(BODY_SLIDE_LEFT_MODAL_CLASS_NAME);
-      }
-    };
-  }, []);
-
-  return {
-    ...classNames,
-    header,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalLayout/ModalLayoutSlideUp/Container.ts

@@ -1,41 +0,0 @@
-import type { FunctionComponent } from 'react';
-
-import clsx from 'clsx';
-import { CLASS_NAMES, VARIANTS } from './constants';
-
-export interface ContainerChildrenArgs {
-  classNames: {
-    container: string;
-    wrapper: string;
-    header: string;
-    space: string;
-    bg: string;
-  };
-  linesVisible: boolean;
-}
-
-export interface ContainerProps {
-  variant: 'DEFAULT' | 'MARKETING';
-  children: (args: ContainerChildrenArgs) => JSX.Element;
-}
-
-const Container: FunctionComponent<ContainerProps> = function ({
-  variant = 'DEFAULT',
-  children,
-}) {
-  const { bgBase, ...classNames } = CLASS_NAMES;
-
-  const bg = clsx(bgBase, variant !== VARIANTS.MARKETING && 'shadow-c');
-
-  const linesVisible = variant === VARIANTS.MARKETING;
-
-  return children({
-    classNames: {
-      ...classNames,
-      bg,
-    },
-    linesVisible,
-  });
-};
-
-export default Container;