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

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;

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

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import LoaderContainer from './LoaderContainer';
+
+export interface LoaderProps {
+  isLoading: boolean;
+}
+
+const Loader: FunctionComponent<LoaderProps> = function ({ isLoading }) {
+  return (
+    <LoaderContainer isLoading={isLoading}>
+      {({ width, classNames }) => (
+        <>
+          {isLoading && <div className={classNames.overlay} />}
+          <div data-cy="loader" className={classNames.container}>
+            <div className={classNames.bar} style={{ width }} />
+          </div>
+        </>
+      )}
+    </LoaderContainer>
+  );
+};
+
+export default Loader;

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

@@ -0,0 +1 @@
+export const ESC_KEY = 27;

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

@@ -0,0 +1,69 @@
+import { useCallback, useState, useEffect, useRef } from 'react';
+
+export interface AnimatedModalsHook {
+  showAnimatedModal: (modalId: string) => void;
+  hideAnimatedModal: (modalId: string) => void;
+  visibleAnimatedModals: string[];
+}
+
+/**
+ * Aninmated modals context values hook
+ */
+export default function useAnimatedModals(): AnimatedModalsHook {
+  const [visibleAnimatedModals, setVisibleAnimatedModals] = useState<string[]>(
+    [],
+  );
+  const [animatedModalsUpdated, setAnimatedModalsUpdate] = useState<number>();
+
+  const visibleAnimatedModalsRef = useRef<string[]>([]);
+
+  /**
+   * Sets modal to visible
+   * @param {string} modalId - id of modal
+   */
+  const showAnimatedModal = useCallback((modalId: string) => {
+    const isVisible = visibleAnimatedModalsRef.current.includes(modalId);
+
+    if (isVisible) {
+      return;
+    }
+
+    visibleAnimatedModalsRef.current = [
+      ...visibleAnimatedModalsRef.current,
+      modalId,
+    ];
+    setAnimatedModalsUpdate(Math.random());
+  }, []);
+
+  /**
+   * Sets modal to hidden
+   * @param {string} modalId - id of modal
+   */
+  const hideAnimatedModal = useCallback((modalId: string) => {
+    const isVisible = visibleAnimatedModalsRef.current.includes(modalId);
+
+    if (!isVisible) {
+      return;
+    }
+
+    const newVisibleModals = visibleAnimatedModalsRef.current.filter(
+      (modal) => modal !== modalId,
+    );
+
+    visibleAnimatedModalsRef.current = newVisibleModals;
+    setAnimatedModalsUpdate(Math.random());
+  }, []);
+
+  /**
+   * Update state from ref
+   */
+  useEffect(() => {
+    setVisibleAnimatedModals(visibleAnimatedModalsRef.current);
+  }, [animatedModalsUpdated]);
+
+  return {
+    showAnimatedModal,
+    hideAnimatedModal,
+    visibleAnimatedModals,
+  };
+}

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

@@ -0,0 +1,84 @@
+import { useCallback, useState, useEffect, useRef } from 'react';
+
+import { ESC_KEY } from '../constants';
+
+export interface ModalsHook {
+  showModal: (modalId: string) => void;
+  hideModal: (modalId: string) => void;
+  visibleModals: string[];
+}
+
+export default function useModals(): ModalsHook {
+  const [visibleModals, setVisibleModals] = useState<string[]>([]);
+  const [modalsUpdated, setModalsUpdate] = useState<number>();
+
+  const visibleModalsRef = useRef<string[]>([]);
+
+  /**
+   * Sets modal to visible
+   * @param {string} modalId - id of modal
+   */
+  const showModal = useCallback((modalId: string) => {
+    const isVisible = visibleModalsRef.current.includes(modalId);
+
+    if (isVisible) {
+      return;
+    }
+
+    visibleModalsRef.current = [...visibleModalsRef.current, modalId];
+    setModalsUpdate(Math.random());
+  }, []);
+
+  /**
+   * Sets modal to hidden
+   * @param {string} modalId - id of modal
+   */
+  const hideModal = useCallback((modalId: string) => {
+    const isVisible = visibleModalsRef.current.includes(modalId);
+
+    if (!isVisible) {
+      return;
+    }
+
+    const newVisibleModals = visibleModalsRef.current.filter(
+      (modal) => modal !== modalId,
+    );
+
+    visibleModalsRef.current = newVisibleModals;
+    setModalsUpdate(Math.random());
+  }, []);
+
+  /**
+   * Hiddes last modal when ESC key is pressed
+   */
+  useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.keyCode === ESC_KEY) {
+        if (visibleModalsRef.current.length === 0) {
+          return;
+        }
+
+        const lastModal = [...visibleModalsRef.current].pop();
+        hideModal(lastModal as string);
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, [hideModal]);
+
+  /**
+   * Update state from ref
+   */
+  useEffect(() => {
+    setVisibleModals(visibleModalsRef.current);
+  }, [modalsUpdated]);
+
+  return {
+    showModal,
+    hideModal,
+    visibleModals,
+  };
+}

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

@@ -0,0 +1,29 @@
+import { type Dispatch, type SetStateAction, useState } from 'react';
+import useModals, { type ModalsHook } from './useModals';
+import useAnimatedModals, {
+  type AnimatedModalsHook,
+} from './useAnimatedModals';
+import useViewportVariables from './useViewportVariables';
+
+type ChildModalHooks = ModalsHook & AnimatedModalsHook;
+
+export interface ModalsWrapperHook extends ChildModalHooks {
+  showLoader: boolean;
+  setShowLoader: Dispatch<SetStateAction<boolean>>;
+}
+
+export default function useModalsWrapper(): ModalsWrapperHook {
+  useViewportVariables();
+
+  const [showLoader, setShowLoader] = useState(false);
+
+  const contextValues = useModals();
+  const animatedContextValues = useAnimatedModals();
+
+  return {
+    showLoader,
+    setShowLoader,
+    ...contextValues,
+    ...animatedContextValues,
+  };
+}

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

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { getDocument, getWindow } from '~/common/helpers';
+
+export interface Viewport {
+  w?: number;
+  h?: number;
+}
+
+export default function useViewportVariables(): void {
+  const styleElement = useRef<HTMLElement>();
+  const window = getWindow();
+  const enabled = useRef(typeof window?.innerHeight === 'number');
+
+  const innerViewport = useRef<Viewport>({ w: 0, h: 0 });
+  const outerViewport = useRef<Viewport>({ w: 0, h: 0 });
+
+  /**
+   * Calculates new viewport
+   */
+  const calculateViewport = useCallback(
+    () =>
+      new Promise((resolve, reject) => {
+        if (!enabled.current) {
+          return reject(
+            new Error('Could not calculate window?.visualViewport'),
+          );
+        }
+
+        innerViewport.current.w = window?.innerWidth;
+        innerViewport.current.h = window?.innerHeight;
+
+        outerViewport.current.w = window?.outerWidth;
+        outerViewport.current.h = window?.outerHeight;
+
+        return resolve(true);
+      }),
+    [],
+  );
+
+  /**
+   * Stores viewport as css variables
+   */
+  const setViewport = useCallback(() => {
+    if (styleElement.current) {
+      styleElement.current.innerHTML = `
+        :root {
+          --100vvw: ${Math.min(
+            innerViewport.current.w || 0,
+            outerViewport.current.w || 0,
+          )}px;
+          --100vvh: ${Math.min(
+            innerViewport.current.h || 0,
+            outerViewport.current.h || 0,
+          )}px;
+
+          --offset-w: ${
+            (outerViewport.current.w || 0) - (innerViewport.current.w || 0)
+          }px;
+          --offset-h: ${
+            (outerViewport.current.h || 0) - (innerViewport.current.h || 0)
+          }px;
+        }
+      `;
+    }
+  }, []);
+
+  /**
+   * Calculates and then stores viewport
+   */
+  const refresh = useCallback(() => {
+    calculateViewport().then(setViewport);
+  }, [calculateViewport, setViewport]);
+
+  /**
+   * Created and style tag on html head element
+   */
+  useEffect(() => {
+    const styleId = 'viewport_fix_variables';
+    if (!getDocument()) {
+      return;
+    }
+
+    const exists = document.getElementById(styleId);
+
+    if (exists) return;
+
+    const styleTag = document.createElement('style');
+
+    styleTag.id = styleId;
+
+    styleElement.current = styleTag;
+
+    document.head.prepend(styleTag);
+  }, []);
+
+  /**
+   * Listens to resize to call refresh, and removes listener on dismount
+   */
+  useEffect(() => {
+    if (!enabled.current) {
+      return;
+    }
+
+    refresh();
+
+    window?.visualViewport?.addEventListener('resize', refresh);
+
+    return () => {
+      window?.visualViewport?.removeEventListener('resize', refresh);
+    };
+  }, [refresh]);
+}

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

@@ -0,0 +1,65 @@
+import React, {
+  createContext,
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+} from 'react';
+import { SkeletonTheme } from 'react-loading-skeleton';
+import useModalsWrapper from './hooks/useModalsWrapper';
+import Loader from './Loader';
+
+interface SkeletonThemeProps {
+  color?: string;
+  highlightColor?: string;
+  children?: JSX.Element | JSX.Element[];
+}
+
+export interface ModalsWrapperContextValue {
+  visibleModals: string[];
+  visibleAnimatedModals: string[];
+  showLoader?: boolean;
+  showAnimatedModal: (modalId: string) => void;
+  hideAnimatedModal: (modalId: string) => void;
+  showModal: (modalId: string) => void;
+  hideModal: (modalId: string) => void;
+  setShowLoader: Dispatch<SetStateAction<boolean>>;
+}
+
+export interface ModalsWrapperProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+export const ModalsWrapperContext = createContext<ModalsWrapperContextValue>({
+  visibleModals: [],
+  visibleAnimatedModals: [],
+  showLoader: false,
+  showAnimatedModal: () => true,
+  hideAnimatedModal: () => true,
+  showModal: () => true,
+  hideModal: () => true,
+  setShowLoader: () => true,
+});
+
+const Context = ModalsWrapperContext;
+
+export { Context };
+
+const ModalsWrapper: FunctionComponent<ModalsWrapperProps> = function ({
+  children,
+}) {
+  const { showLoader, ...values } = useModalsWrapper();
+
+  const SkeletonThemeTag =
+    SkeletonTheme as unknown as FunctionComponent<SkeletonThemeProps>;
+
+  return (
+    <SkeletonThemeTag color="#F4F6FA" highlightColor="#E7EBF4">
+      <Loader isLoading={showLoader} />
+      <ModalsWrapperContext.Provider value={values}>
+        {children}
+      </ModalsWrapperContext.Provider>
+    </SkeletonThemeTag>
+  );
+};
+
+export default ModalsWrapper;

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

@@ -0,0 +1,27 @@
+export const NAVIGATON_LINK_CLASS_NAMES = {
+  containerBase: 'w-full flex flex-1 flex-row relative items-center',
+  content: 'w-full flex flex-1 flex-col',
+  titleWrapper: 'flex flex-1 flex-row',
+  title: 'text-style-f-em text-neutral-700 relative',
+  subtitle: 'text-style-g text-neutral-600 mt-0.5',
+  badgeBase: 'ml-1 w-2 h-2 rounded-full',
+};
+
+export const ICON_PROPS = {
+  icon: 'chevron-right',
+  stroke: 'neutral-500',
+  size: 20,
+};
+
+export const SKELETONS = {
+  title: {
+    width: 160,
+  },
+  subtitle: {
+    width: 200,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+};