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

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;

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

@@ -0,0 +1,18 @@
+import type { StringIndexedObject } from '~/types';
+
+export const CLASS_NAMES = {
+  container: `flex flex-1 flex-col fixed right-0 bottom-0 w-full`,
+  wrapper: 'flex flex-1 w-full flex-col relative p-6 pt-10',
+  header: 'absolute top-0 right-0 px-3 py-4 z-10',
+  space: 'w-full opacity-0',
+  bgBase:
+    'absolute top-0 -bottom-10 right-0 left-0 transform skew-y-slide-up origin-full bg-neutral-000',
+};
+
+export const VARIANTS: StringIndexedObject<string> = {
+  MARKETING: 'marketing',
+  DEFAULT: 'default',
+};
+
+export const SPACE =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaoAAAAcCAYAAAAwa/sqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7dxdjoIwFIbh4k/inbgCu/9NeOmi1DA9DdUjqY5YgULfJ2FaxQgXE79pv4yVAQBgYKfTSYZ6t9vVMrler7ZpGpnXVVXt3XiQ+Wq1knkt59xh3bypDAAAH9Bhc7vddJgYFzZ+dEFzlLF9vm7D6H7+CwQVAJTkfD7LYOVHz7CRlU9txkdQAcDc6LDpsYVmzHRhk4KgAoCxJfQ1KVtoc0VQAcC3XOCM3deUiKACUDa3jWZlfBE2YVWTS19TIoIKwPyFsCmgrykRQQVgepEttKewCVtohr6mRAQVgN+gr8FACCoAD7EtNHlMX4MJEVTA0tDXYGEIKiA3b7bQ6GtQIoIKGAJ9DfAzBBXwCn0NkAWCCnmTr5pxKxP5Z0wJBH8IFwZ+dGFx/x2OnV+v11bGSF/j5/Q1QPaajQEG9mnYhOf1+cvlElYy4bDt24awufc1nfN+lGuG9wrX08K19P0AyAtBhY+039YsK5PYh3vlwsY/7hk2x85o1Wv84+12+zZs9L2o+wGwIARVQWJhoz7Yn8Imct6qUYfJsZ3vI+f9QdgASEFQzUhqX2PiYbN/Mdev7bWF1rkmACQhqEZGXwMA/RBUX5igr2ELDUCxigyqsKoR9DUAkLfZBlVKX6NWNcIa+hoAyNakQRW20Mbua/5b1ehr6fsBAIwvOahS+hrzCA/6GgBA1GbKviYETXg/wgYA0CUrqnd9zaEdh+hrGgMAy8Bf0QP6A9tBPu/advbCAAAAAElFTkSuQmCC';

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

@@ -0,0 +1,46 @@
+import React, { forwardRef, FunctionComponent } from 'react';
+import Button from '~/components/Button';
+import type { HomeLinkProps } from '~/components/ConfigWrapper';
+import { default as Lines } from '~/assets/images/marketing-slide-up-header.svg';
+import Container from './Container';
+import { SPACE } from './constants';
+
+interface ModalLayoutSlideUpProps {
+  id: string;
+  children: JSX.Element | JSX.Element[];
+  onClose?: () => void;
+  variant?: 'DEFAULT' | 'MARKETING';
+}
+
+const ModalLayoutSlideUp = forwardRef<HTMLDivElement, ModalLayoutSlideUpProps>(
+  ({ id, children, variant = 'DEFAULT', onClose }, ref) => {
+    const LinesTag = Lines as unknown as FunctionComponent<HomeLinkProps>;
+
+    return (
+      <Container variant={variant}>
+        {({ classNames, linesVisible }) => (
+          <div className={classNames.container} ref={ref}>
+            <div className={classNames.bg}>
+              {linesVisible && <LinesTag className="w-full" />}
+            </div>
+            <img alt="" src={SPACE} className={classNames.space} />
+            {onClose && (
+              <div className={classNames.header}>
+                <Button.Icon
+                  id={`${id}-close`}
+                  onClick={onClose}
+                  icon="close"
+                />
+              </div>
+            )}
+            <div className={classNames.wrapper}>{children}</div>
+          </div>
+        )}
+      </Container>
+    );
+  },
+);
+
+ModalLayoutSlideUp.displayName = 'ModalLayoutSlideUp';
+
+export default ModalLayoutSlideUp;

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

@@ -0,0 +1,33 @@
+export const OPACITIES = [
+  5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
+  100,
+] as const;
+
+// This isn't great but we cannot do this dynamically as tailwind fails to pick
+// up the needed classes due to JIT compilation.
+export const OPACITY_CLASS_NAMES: Record<number, string> = {
+  5: 'opacity-5',
+  10: 'opacity-10',
+  15: 'opacity-15',
+  20: 'opacity-20',
+  25: 'opacity-25',
+  30: 'opacity-30',
+  35: 'opacity-35',
+  40: 'opacity-40',
+  45: 'opacity-45',
+  50: 'opacity-50',
+  55: 'opacity-55',
+  60: 'opacity-60',
+  65: 'opacity-65',
+  70: 'opacity-70',
+  75: 'opacity-75',
+  80: 'opacity-80',
+  85: 'opacity-85',
+  90: 'opacity-90',
+  95: 'opacity-95',
+  100: 'opacity-100',
+};
+
+export const BACKDROP_CLASS_NAME = 'fixed bg-neutral-900 w-full h-full';
+
+export const ESC_KEY = 27;

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

@@ -0,0 +1,19 @@
+import type { OPACITIES } from './constants';
+
+/*
+ * Produces the opacity suffix for the modal backdrop
+ *
+ */
+export const opacitySuffix = (opacity: typeof OPACITIES[number]): string => {
+  try {
+    // Type check on opacity, ensure it is an int
+    const intOpacity = parseInt(opacity as unknown as string, 10);
+    // Use modulo 100 to get correct fade increment -
+    if ((100 + intOpacity) % 100) return `-${(100 + intOpacity) % 100}`;
+    // If intOpacity is 100, we just returned an empty string as `fade-in` goes
+    // from 0 to 100
+    return '';
+  } catch {
+    return '';
+  }
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ModalsWrapper/Loader/LoaderContainer.tsx

@@ -0,0 +1,99 @@
+import React, {
+  type FunctionComponent,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import ReactDOM from 'react-dom';
+import clsx from 'clsx';
+import { useDebounce } from 'use-debounce';
+import {
+  SLOW_ANIMATION,
+  FAST_ANIMATION,
+  WIDTHS,
+  FAST_ANIMATION_SPEED,
+  INITIAL_DELAY,
+  CLASS_NAMES,
+  DEBOUNCE_INTERVAL,
+} from './constants';
+import { getDocument } from '~/common/helpers';
+
+interface LoaderContainerChildrenArgs {
+  width: string;
+  classNames: {
+    bar: string;
+    overlay: string;
+    container: string;
+  };
+}
+
+export interface LoaderContainerProps {
+  isLoading: boolean;
+  children: (args: LoaderContainerChildrenArgs) => JSX.Element;
+}
+
+const LoaderContainer: FunctionComponent<LoaderContainerProps> = function ({
+  children,
+  isLoading,
+}) {
+  const loaded = useRef(false);
+
+  const [animate, setAnimate] = useState(SLOW_ANIMATION);
+  const [width, setWidth] = useState(WIDTHS.START);
+
+  const [debouncedLoading] = useDebounce(isLoading, DEBOUNCE_INTERVAL);
+
+  /**
+   * Creates css animations when isLoading is true
+   * and resets the state after it's completed
+   */
+  useEffect(() => {
+    if (debouncedLoading) {
+      // starts the fake animation to given percentage
+      setTimeout(() => {
+        loaded.current = true;
+        setAnimate(SLOW_ANIMATION);
+        setWidth(WIDTHS.LOADING);
+      }, INITIAL_DELAY);
+      return;
+    }
+
+    if (loaded.current) {
+      // starts a fast animation to 100%
+      setAnimate(FAST_ANIMATION);
+      setWidth(WIDTHS.COMPLETE);
+      loaded.current = false;
+      setTimeout(() => {
+        // resets the state to initial values after animation is complete
+        setAnimate('');
+        setWidth(WIDTHS.START);
+      }, FAST_ANIMATION_SPEED);
+      return;
+    }
+
+    // resets the state to initial values
+    setAnimate('');
+    setWidth(WIDTHS.START);
+  }, [debouncedLoading]);
+
+  const { baseBar, ...classNames } = CLASS_NAMES;
+
+  const bar = clsx(baseBar, animate);
+
+  const modals = getDocument()?.getElementById('modals');
+
+  if (!modals) return <></>;
+
+  return ReactDOM.createPortal(
+    children({
+      width,
+      classNames: {
+        ...classNames,
+        bar,
+      },
+    }),
+    getDocument()?.getElementById('modals') as HTMLElement,
+  );
+};
+
+export default LoaderContainer;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ModalsWrapper/Loader/constants.ts

@@ -0,0 +1,21 @@
+export const SLOW_ANIMATION = 'duration-3000 transition-all ease';
+
+export const FAST_ANIMATION_SPEED = 300;
+
+export const INITIAL_DELAY = 50;
+
+export const FAST_ANIMATION = 'duration-300 transition-all ease';
+
+export const WIDTHS = {
+  START: '0%',
+  LOADING: '75%',
+  COMPLETE: '100%',
+};
+
+export const CLASS_NAMES = {
+  overlay: 'fixed top-0 bottom-0 right-0 left-0 z-40',
+  container: 'fixed bottom-0 right-0 left-0 z-50',
+  baseBar: 'bg-gradient-to-r from-blue-200 to-turquoise-300 h-2',
+};
+
+export const DEBOUNCE_INTERVAL = 100;