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

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

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

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

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

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

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

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

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

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

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

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