@kanda-libs/ks-component-ts 0.2.240-qa3 → 0.2.241

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

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

@@ -1,53 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useNavigationLinkClassNames from '~/components/NavigationLink/useNavigationLinkClassNames';
-import SkeletonLoader from '~/components/SkeletonLoader';
-import Icon from '~/components/Icon';
-import { ICON_PROPS, SKELETONS } from './constants';
-
-export interface NavigationLinkProps {
-  title?: string | JSX.Element | JSX.Element[];
-  subtitle?: string | JSX.Element | JSX.Element[];
-  badgeColor?: string;
-  className?: string;
-  isLoading?: boolean;
-  children?: JSX.Element | JSX.Element[] | string;
-}
-
-const NavigationLink: FunctionComponent<NavigationLinkProps> = function ({
-  className = '',
-  title,
-  subtitle,
-  badgeColor = '',
-  isLoading,
-}) {
-  const classNames = useNavigationLinkClassNames(className, badgeColor);
-
-  return (
-    <div className={classNames.container}>
-      <div className={classNames.content}>
-        <div className={classNames.titleWrapper}>
-          <span className={classNames.title}>
-            <SkeletonLoader
-              {...SKELETONS.title}
-              isLoading={isLoading}
-              afterLoading={title as JSX.Element}
-            />
-          </span>
-          {!isLoading && badgeColor && <div className={classNames.badge} />}
-        </div>
-        <p className={classNames.subtitle}>
-          <SkeletonLoader
-            {...SKELETONS.subtitle}
-            isLoading={isLoading}
-            afterLoading={subtitle as JSX.Element}
-          />
-        </p>
-      </div>
-      <div>
-        <Icon isLoading={isLoading} {...ICON_PROPS} />
-      </div>
-    </div>
-  );
-};
-
-export default NavigationLink;

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

@@ -1,29 +0,0 @@
-import clsx from 'clsx';
-
-import { NAVIGATON_LINK_CLASS_NAMES } from './constants';
-
-export interface NavigationLinkClassNamesHook {
-  content: string;
-  titleWrapper: string;
-  title: string;
-  subtitle: string;
-  container: string;
-  badge: string;
-}
-
-export default function useNavigationLinkClassNames(
-  initialClassName: string,
-  badgeColor: string,
-): NavigationLinkClassNamesHook {
-  const { containerBase, badgeBase, ...classNames } =
-    NAVIGATON_LINK_CLASS_NAMES;
-
-  const container = clsx(containerBase, initialClassName);
-  const badge = badgeColor && clsx(badgeBase, `bg-${badgeColor}`);
-
-  return {
-    ...classNames,
-    container,
-    badge,
-  };
-}

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

@@ -1,19 +0,0 @@
-export const CLASS_NAMES = {
-  base: 'flex rounded-full w-8 h-8 border-2 border-neutral-200 bg-neutral-000',
-  opacity: 'opacity-50',
-  margin: {
-    left: 'ml-4',
-    right: 'mr-4',
-  },
-};
-
-export const ICONS = {
-  next: 'chevron-right',
-  prev: 'chevron-left',
-};
-
-export const ICON_PROPS = {
-  size: 16,
-  stroke: 'neutral-500',
-  className: 'm-auto',
-};

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

@@ -1,34 +0,0 @@
-import React, { FunctionComponent, MouseEvent } from 'react';
-import Icon from '~/components/Icon';
-import { useButtonTracking } from '~/hooks';
-import usePaginationNavButtonProps from './usePaginationNavButtonProps';
-
-export interface PaginationNavButtonProps {
-  id: string;
-  next?: boolean;
-  disabled?: boolean;
-  onClick?: (e: MouseEvent) => void;
-}
-
-const PaginationNavButton: FunctionComponent<PaginationNavButtonProps> =
-  function ({ id, onClick: inputOnClick, disabled = false, next = false }) {
-    const { className, iconProps } = usePaginationNavButtonProps(
-      disabled,
-      next,
-    );
-
-    const { onClick } = useButtonTracking(id, inputOnClick);
-
-    return (
-      <button
-        id={id}
-        className={className}
-        onClick={onClick}
-        disabled={disabled}
-      >
-        <Icon {...iconProps} />
-      </button>
-    );
-  };
-
-export default PaginationNavButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Pagination/PaginationNavButton/usePaginationNavButtonProps.ts

@@ -1,29 +0,0 @@
-import clsx from 'clsx';
-import { CLASS_NAMES, ICONS, ICON_PROPS } from './constants';
-import type { IconProps } from '~/components/Icon/types';
-
-export interface PaginationNavButtonPropsHook {
-  className: string;
-  iconProps: IconProps;
-}
-
-export default function usePaginationNavButtonProps(
-  disabled: boolean,
-  next: boolean,
-): PaginationNavButtonPropsHook {
-  const className = clsx(
-    CLASS_NAMES.base,
-    disabled ? CLASS_NAMES.opacity : '',
-    next ? CLASS_NAMES.margin.left : CLASS_NAMES.margin.right,
-  );
-
-  const iconProps = {
-    ...ICON_PROPS,
-    icon: next ? ICONS.next : ICONS.prev,
-  };
-
-  return {
-    className,
-    iconProps,
-  };
-}

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

@@ -1,7 +0,0 @@
-export const CLASS_NAMES = {
-  base: 'w-8 h-8 flex rounded-full text-style-g-em mr-0.5 last:mr-0',
-  hover: 'hover:bg-turquoise-200 hover:text-turquoise-400',
-  ellipsis: 'cursor-default',
-  active: 'bg-turquoise-100 text-turquoise-400',
-  normal: 'bg-neutral-000 text-neutral-500',
-};

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

@@ -1,56 +0,0 @@
-import React, { useMemo, type FunctionComponent, type MouseEvent } from 'react';
-import { useButtonTracking } from '~/hooks';
-import usePaginationNumberButtonClassNames from './usePaginationNumberButtonClassNames';
-
-export interface PaginationNumberButtonProps {
-  id: string;
-  /**
-   * Button text to display
-   */
-  text: string;
-  /**
-   * Active state of button
-   */
-  active: boolean;
-  /**
-   * Disabled state of button
-   */
-  disabled: boolean;
-  /**
-   * onClick function for button
-   */
-  onClick: (e: MouseEvent) => void;
-  /**
-   * onClick function for button
-   */
-  ellipsis: boolean;
-}
-
-const PaginationNumberButton: FunctionComponent<PaginationNumberButtonProps> =
-  function ({
-    id: buttonId,
-    text,
-    onClick: inputOnClick,
-    active = false,
-    disabled = false,
-    ellipsis = false,
-  }) {
-    const classNames = usePaginationNumberButtonClassNames(active, ellipsis);
-
-    const id = useMemo(() => `pagination-nav-page-${buttonId}`, [buttonId]);
-
-    const { onClick } = useButtonTracking(id, inputOnClick);
-
-    return (
-      <button
-        id={id}
-        className={classNames.button}
-        onClick={onClick}
-        disabled={disabled}
-      >
-        <span className={classNames.text}>{text}</span>
-      </button>
-    );
-  };
-
-export default PaginationNumberButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Pagination/PaginationNumberButton/usePaginationNumberButtonClassNames.ts

@@ -1,22 +0,0 @@
-import clsx from 'clsx';
-import { CLASS_NAMES } from './constants';
-import type { StringIndexedObject } from '~/types';
-
-export default function usePaginationNumberButtonClassNames(
-  active: boolean,
-  ellipsis: boolean,
-): StringIndexedObject<string> {
-  const classNames = {
-    button: ellipsis
-      ? clsx(CLASS_NAMES.base, CLASS_NAMES.normal, CLASS_NAMES.ellipsis)
-      : clsx(
-          CLASS_NAMES.base,
-          active
-            ? CLASS_NAMES.active
-            : clsx(CLASS_NAMES.normal, CLASS_NAMES.hover),
-        ),
-    text: 'm-auto',
-  };
-
-  return classNames;
-}

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

@@ -1,4 +0,0 @@
-export const CLASS_NAMES = {
-  container: 'flex flex-row',
-  buttonWrapper: 'flex flex-row',
-};