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

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

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

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

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

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

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

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

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

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

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

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

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

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

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