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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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