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

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

@@ -1,117 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useDesktopLayoutBoxedProps from './useDesktopLayoutBoxedProps';
-import HeaderBackground from '../../../assets/header/background.svg';
-import KandaLogo from '../../../assets/logos/kanda-wordmark.svg';
-import BackgroundLines from '../../../assets/images/background-lines.svg';
-import HelpButton from '~/components/HelpButton';
-import DesktopLayoutBoxedContent from './DesktopLayoutBoxedContent';
-import DesktopLayoutBoxedContentHeader from './DesktopLayoutBoxedContentHeader';
-import type { HomeLinkProps } from '~/components/ConfigWrapper';
-import type { StringIndexedObject } from '~/types';
-
-export interface DesktopLayoutBoxedProps {
-  children?: JSX.Element | JSX.Element[];
-  /**
-   * Right side option for header
-   */
-  options?: JSX.Element[];
-  logoProps?: StringIndexedObject<string>;
-  sidebar?: boolean | JSX.Element;
-  sidebarWidth?: string;
-  backgroundLines?: boolean;
-  /**
-   * Hide header
-   */
-  noHeader?: boolean;
-  /**
-   * Show help
-   */
-  help?: boolean;
-  layoutFooter?: JSX.Element | JSX.Element[];
-  /**
-   * Allow for the y axis to overflow when there is a lot of content within the card
-   */
-  allowYOverflow?: boolean;
-  /**
-   * Optional prop for whether or not to show the navigation, like with DesktopLayoutDefault
-   */
-  showNavigation?: boolean;
-}
-
-const DesktopLayoutBoxed: FunctionComponent<DesktopLayoutBoxedProps> =
-  function ({
-    children,
-    logoProps,
-    sidebar,
-    sidebarWidth = 'basis-1/3',
-    options = [],
-    backgroundLines = false,
-    noHeader = false,
-    help = false,
-    layoutFooter,
-    allowYOverflow = false,
-    showNavigation = false,
-  }) {
-    const {
-      classNames,
-      linkComponent: LinkComponent,
-      homeLinkProps,
-      sidebarView: SidebarView,
-      Header,
-    } = useDesktopLayoutBoxedProps({
-      sidebar,
-      sidebarWidth,
-      noHeader,
-      allowYOverflow,
-    });
-
-    const BackgroundLinesTag =
-      BackgroundLines as unknown as FunctionComponent<HomeLinkProps>;
-    const HeaderBackgroundTag =
-      HeaderBackground as unknown as FunctionComponent<HomeLinkProps>;
-
-    return (
-      <div id="layout" className={classNames.container}>
-        <div className={classNames.background}>
-          {!backgroundLines && <div className={classNames.shadow} />}
-          {backgroundLines && (
-            <BackgroundLinesTag className={classNames.backgroundLines} />
-          )}
-          <HeaderBackgroundTag className={classNames.lines} />
-        </div>
-        <div className={classNames.wrapper}>
-          {!noHeader && (
-            <div className={classNames.header}>
-              {!showNavigation && (
-                <LinkComponent {...homeLinkProps} className={classNames.logo}>
-                  <>
-                    <KandaLogo {...logoProps} />
-                  </>
-                </LinkComponent>
-              )}
-              {showNavigation && Header && <Header />}
-              <div className={classNames.options}>
-                {help && <HelpButton />}
-                {options.map((option, i) => (
-                  <div key={String(i)}>{option}</div>
-                ))}
-              </div>
-            </div>
-          )}
-          <div className={classNames.contentWrapper}>
-            {SidebarView && (
-              <div className={classNames.sidebar}>
-                <SidebarView />
-              </div>
-            )}
-            <div className={classNames.contentBox}>{children}</div>
-          </div>
-        </div>
-        {layoutFooter}
-      </div>
-    );
-  };
-
-export { DesktopLayoutBoxedContent, DesktopLayoutBoxedContentHeader };
-
-export default DesktopLayoutBoxed;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopLayout/DesktopLayoutBoxed/useDesktopLayoutBoxedProps.ts

@@ -1,63 +0,0 @@
-import { FunctionComponent, useContext } from 'react';
-import {
-  ConfigWrapperContext,
-  HomeLinkProps,
-} from '~/components/ConfigWrapper';
-import type { DesktopLayoutBoxedProps } from '~/components/DesktopLayout/DesktopLayoutBoxed/index';
-import { useClasses } from '~/hooks';
-import type { StringIndexedObject } from '~/types';
-import type { NavigationLinkProps } from '~/components/NavigationLink';
-import { CLASS_NAMES } from './constants';
-
-export type DesktopLayoutBoxedArgs = Omit<
-  DesktopLayoutBoxedProps,
-  | 'children'
-  | 'options'
-  | 'logoProps'
-  | 'backgroundLines'
-  | 'help'
-  | 'layoutFooter'
->;
-
-export interface DesktopLayoutBoxedPropsHook {
-  linkComponent: FunctionComponent<NavigationLinkProps>;
-  homeLinkProps: HomeLinkProps;
-  sidebarView: FunctionComponent;
-  classNames: StringIndexedObject;
-  Header?: FunctionComponent<{}>;
-}
-
-export default function useDesktopLayoutBoxedProps({
-  sidebar,
-  sidebarWidth,
-  noHeader,
-  allowYOverflow,
-}: DesktopLayoutBoxedArgs): DesktopLayoutBoxedPropsHook {
-  const {
-    linkComponent,
-    homeLinkProps,
-    sidebar: defaultSidebar,
-    desktopHeader: Header,
-  } = useContext(ConfigWrapperContext);
-
-  const sidebarView = (
-    sidebar === true ? defaultSidebar : sidebar
-  ) as FunctionComponent;
-
-  const classNames = useClasses(CLASS_NAMES, {
-    contentBox: ['.contentBox', sidebar ? 'basis-2/3' : 'w-full'],
-    variants: {
-      noHeader,
-      allowYOverflow,
-    },
-    sidebar: ['.sidebarBase', sidebarWidth],
-  });
-
-  return {
-    linkComponent: linkComponent as FunctionComponent<HomeLinkProps>,
-    homeLinkProps: homeLinkProps as HomeLinkProps,
-    sidebarView,
-    classNames,
-    Header,
-  };
-}

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

@@ -1,7 +0,0 @@
-import { WRAPPER_CLASS_NAME, CONTAINER_CLASS_NAME } from '../constants';
-
-export const CLASS_NAMES = {
-  container: `${CONTAINER_CLASS_NAME} flex-1`,
-  wrapper: `${WRAPPER_CLASS_NAME} flex-1`,
-  content: 'flex flex-1 w-full flex-col py-20',
-};

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

@@ -1,20 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { CLASS_NAMES } from './constants';
-
-export interface ContentProps {
-  children?: JSX.Element | JSX.Element[];
-}
-
-const DesktopLayoutDefaultContent: FunctionComponent<ContentProps> = function ({
-  children,
-}) {
-  return (
-    <div className={CLASS_NAMES.container}>
-      <div className={CLASS_NAMES.wrapper}>
-        <div className={CLASS_NAMES.content}>{children}</div>
-      </div>
-    </div>
-  );
-};
-
-export default DesktopLayoutDefaultContent;

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

@@ -1,10 +0,0 @@
-import { WRAPPER_CLASS_NAME, CONTAINER_CLASS_NAME } from '../constants';
-
-export const CLASS_NAMES = {
-  container: CONTAINER_CLASS_NAME,
-  wrapper: WRAPPER_CLASS_NAME,
-  content: 'flex w-full flex-col h-52 mx-10 xl:mx-0 relative justify-center',
-  option: 'absolute left-0 transform -translate-x-full pr-3 -mt-1',
-  shadow:
-    'w-full h-80 absolute bg-neutral-50 transform skew-y-slide-up origin-0',
-};

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

@@ -1,26 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { CLASS_NAMES } from './constants';
-
-export interface ContentHeaderDefaultProps {
-  option?: JSX.Element;
-  children?: JSX.Element | JSX.Element[];
-}
-
-const DesktopLayoutDefaultContentHeader: FunctionComponent<ContentHeaderDefaultProps> =
-  function ({ option, children }) {
-    return (
-      <>
-        <div className={CLASS_NAMES.shadow} />
-        <div className={CLASS_NAMES.container}>
-          <div className={CLASS_NAMES.wrapper}>
-            <div className={CLASS_NAMES.content}>
-              {option && <div className={CLASS_NAMES.option}>{option}</div>}
-              {children}
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  };
-
-export default DesktopLayoutDefaultContentHeader;

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

@@ -1,11 +0,0 @@
-export const CLASS_NAMES = {
-  container: 'flex flex-col flex-1 w-screen min-h-vvp relative',
-  background: 'absolute w-full',
-  lines: 'absolute left-0 top-0 z-20',
-  headerWrapper: 'mt-10 flex w-full px-8 xl:px-16',
-};
-
-export const WRAPPER_CLASS_NAME =
-  'flex w-full flex-col max-w-screen-lg 2xl:max-w-screen-2xl m-auto';
-
-export const CONTAINER_CLASS_NAME = 'px-8 2xl:px-52 flex flex-col w-full';

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

@@ -1,33 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useDesktopLayoutProps from '~/components/DesktopLayout/DesktopLayoutDefault/useDesktopLayoutProps';
-import type { HomeLinkProps } from '~/components/ConfigWrapper';
-import { default as HeaderBackground } from '../../../assets/header/background.svg';
-import { CLASS_NAMES } from './constants';
-
-export interface DesktopLayoutDefaultProps {
-  children?: JSX.Element | JSX.Element[];
-}
-
-const DesktopLayoutDefault: FunctionComponent<DesktopLayoutDefaultProps> =
-  function ({ children }) {
-    const { Header, Footer } = useDesktopLayoutProps();
-
-    const HeaderBackgroundTag =
-      HeaderBackground as unknown as FunctionComponent<HomeLinkProps>;
-
-    return (
-      <div id="layout" className={CLASS_NAMES.container}>
-        <div className={CLASS_NAMES.background}>
-          <HeaderBackgroundTag className={CLASS_NAMES.lines} />
-        </div>
-        <div className={CLASS_NAMES.headerWrapper}>{Header && <Header />}</div>
-        {children}
-        {Footer && <Footer />}
-      </div>
-    );
-  };
-
-export { default as DesktopLayoutDefaultContent } from './DesktopLayoutDefaultContent';
-export { default as DesktopLayoutDefaultContentHeader } from './DesktopLayoutDefaultContentHeader';
-
-export default DesktopLayoutDefault;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopLayout/DesktopLayoutDefault/useDesktopLayoutProps.ts

@@ -1,17 +0,0 @@
-import { ConfigWrapperContext } from '~/components/ConfigWrapper';
-import { FunctionComponent, useContext } from 'react';
-
-export interface DesktopLayoutPropsHook {
-  Header: FunctionComponent;
-  Footer: FunctionComponent;
-}
-
-export default function useDesktopLayoutProps(): DesktopLayoutPropsHook {
-  const { desktopHeader: Header, desktopFooter: Footer } =
-    useContext(ConfigWrapperContext);
-
-  return {
-    Header: Header as FunctionComponent,
-    Footer: Footer as FunctionComponent,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopLayout/index.ts

@@ -1,18 +0,0 @@
-import DesktopLayoutBoxed, {
-  DesktopLayoutBoxedContent,
-  DesktopLayoutBoxedContentHeader,
-} from '~/components/DesktopLayout/DesktopLayoutBoxed';
-
-import DesktopLayoutDefault, {
-  DesktopLayoutDefaultContent,
-  DesktopLayoutDefaultContentHeader,
-} from '~/components/DesktopLayout/DesktopLayoutDefault';
-
-export {
-  DesktopLayoutBoxed,
-  DesktopLayoutBoxedContent,
-  DesktopLayoutBoxedContentHeader,
-  DesktopLayoutDefault,
-  DesktopLayoutDefaultContent,
-  DesktopLayoutDefaultContentHeader,
-};

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

@@ -1,41 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import Icon from '../Icon';
-import Text from '../Text';
-import useExpandableContentProps from './useExpandableContentProps';
-
-export interface ExpandableContentProps {
-  showLabel: string;
-  hideLabel: string;
-  compact?: boolean;
-  children: JSX.Element | JSX.Element[];
-}
-
-const ExpandableContent: FunctionComponent<ExpandableContentProps> = function ({
-  showLabel,
-  hideLabel,
-  compact = false,
-  children,
-}) {
-  const { showContent, onClick, classNames, icon } =
-    useExpandableContentProps(compact);
-
-  return (
-    <div className={classNames.outerContainer}>
-      <button type="button" onClick={onClick} className={classNames.button}>
-        <Text
-          text={showContent ? hideLabel : showLabel}
-          className={classNames.label}
-        />
-        <Icon
-          icon={icon}
-          className={classNames.icon}
-          size={20}
-          stroke="neutral-600"
-        />
-      </button>
-      {showContent && <div className={classNames.container}>{children}</div>}
-    </div>
-  );
-};
-
-export default ExpandableContent;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ExpandableContent/useExpandableContentProps.ts

@@ -1,50 +0,0 @@
-import clsx from 'clsx';
-import { useCallback, useState } from 'react';
-
-export interface ExpandableContentPropsHook {
-  showContent: boolean;
-  onClick: () => void;
-  classNames: {
-    button: string;
-    container: string;
-    label: string;
-    icon: string;
-  };
-  icon: string;
-}
-
-export default function useExpandableContentProps(compact: boolean) {
-  const [showContent, setShowContent] = useState(false);
-
-  const onClick = useCallback(() => {
-    setShowContent(!showContent);
-  }, [showContent]);
-
-  const classNames = {
-    outerContainer: clsx(
-      'flex flex-col mb-4',
-      compact ? '' : 'rounded-lg shadow-card',
-    ),
-    button: clsx(
-      'flex flex-1 flex-row py-4 px-5',
-      compact ? '' : 'border border-neutral-300',
-      showContent ? 'rounded-t-lg' : 'rounded-lg',
-    ),
-    container: clsx(
-      compact
-        ? ''
-        : 'py-4 px-5 border border-t-0 border-neutral-300 rounded-b-lg',
-    ),
-    label: 'text-14-22-em text-neutral-600',
-    icon: 'ml-3',
-  };
-
-  const icon = showContent ? 'chevron-up' : 'chevron-down';
-
-  return {
-    showContent,
-    onClick,
-    classNames,
-    icon,
-  };
-}

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

@@ -1,20 +0,0 @@
-import type { TagColor } from '~/components/Tag/types';
-
-export const formatStatus = (status: string): string =>
-  status.replace(/_/g, ' ');
-
-export const extractColor = (status: string): TagColor => {
-  if (status === 'not_applied') return null;
-  if (status === 'under_review') return null;
-  if (status === 'applied_for_finance') return 'blue';
-  if (status === 'finance_deposit_paid') return 'blue';
-  if (status === 'finance_not_approved') return 'violet';
-  if (status === 'financed') return 'green';
-  if (status === 'sat_note_sent') return 'blue';
-  if (status === 'sat_note_viewed') return 'blue';
-  if (status === 'sat_note_signed') return 'green';
-  if (status === 'sat_note_delayed') return 'green';
-  if (status === 'payout_pending') return 'green';
-  if (status === 'paid') return 'green';
-  return null;
-};

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

@@ -1,23 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import type { StatusTagProps } from '~/components/StatusTag';
-import StatusTag from '~/components/StatusTag';
-import { extractColor, formatStatus } from './helpers';
-
-export type FinanceStatusTagProps = Omit<
-  StatusTagProps,
-  'formatStatus' | 'extractColor'
->;
-
-const FinanceStatusTag: FunctionComponent<FinanceStatusTagProps> = function (
-  props,
-) {
-  return (
-    <StatusTag
-      formatStatus={formatStatus}
-      extractColor={extractColor}
-      {...props}
-    />
-  );
-};
-
-export default FinanceStatusTag;

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

@@ -1,2 +0,0 @@
-export const SCRIPT_BUNDLE =
-  'https://chat-assets.frontapp.com/v1/chat.bundle.js';

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

@@ -1,34 +0,0 @@
-import { FunctionComponent, useCallback, useEffect, useRef } from 'react';
-
-import { SCRIPT_BUNDLE } from './constants';
-import { FRONT_ENVIRONMENT_KEY } from '~/config';
-
-const FrontChatWidget: FunctionComponent = function () {
-  const timerRef = useRef<NodeJS.Timer | null>(null);
-  const init = useCallback(() => {
-    if (!window.FrontChat) {
-      timerRef.current = setTimeout(() => init(), 100);
-      return;
-    }
-    clearTimeout(timerRef.current as unknown as number);
-    window.FrontChat('init', {
-      chatId: FRONT_ENVIRONMENT_KEY,
-      useDefaultLauncher: false,
-    });
-  }, []);
-
-  const bundleRef = useRef<boolean>(false);
-  useEffect(() => {
-    if (bundleRef.current) return;
-    const s1 = document.createElement('script');
-    s1.type = 'text/javascript';
-    s1.src = SCRIPT_BUNDLE;
-    document.head.appendChild(s1);
-
-    init();
-  }, [init]);
-
-  return null;
-};
-
-export default FrontChatWidget;

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

@@ -1,21 +0,0 @@
-import React, { type FunctionComponent } from 'react';
-import BreakPoints from '~/components/BreakPoints';
-import Icon from '~/components/Icon';
-import Text from '~/components/Text';
-
-const PhoneLink: FunctionComponent = function () {
-  const content = (
-    <div className="flex flex-row items-center justify-center mr-4 text-neutral-700 gap-x-2">
-      <Icon icon="phone" size={18} /> <Text text="03308187500" />
-    </div>
-  );
-
-  return (
-    <BreakPoints
-      desktop={content}
-      mobile={<a href="tel:443308187500">{content}</a>}
-    />
-  );
-};
-
-export default PhoneLink;

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

@@ -1,6 +0,0 @@
-export const CLASS_NAMES = {
-  containerBase:
-    'flex flex-1 flex-row space-between items-top min-h-20 pr-3 pl-6 relative overflow-hidden',
-  content: 'flex flex-1 items-center',
-  options: 'flex flex-row items-center my-5 mx-4 absolute right-0 top-0',
-};

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

@@ -1,62 +0,0 @@
-import React, { FunctionComponent, HTMLAttributes } from 'react';
-import HelpButton from '~/components/HelpButton';
-import useHeaderBaseClassNames from './useHeaderBaseClassNames';
-import { default as HeaderBackground } from '../../../assets/header/background.svg';
-import PhoneLink from './PhoneLink';
-
-export interface HeaderBaseProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  children?: JSX.Element | JSX.Element[];
-  /**
-   * Right side options for header
-   */
-  options?: JSX.Element[];
-  /**
-   * Show the help item
-   */
-  help?: boolean;
-  /**
-   * Top lines
-   */
-  lines?: boolean;
-  /**
-   * Hide number on header
-   */
-  hideNumber?: boolean;
-}
-
-const HeaderBase: FunctionComponent<HeaderBaseProps> = function ({
-  className = '',
-  children = null,
-  options = [],
-  help = false,
-  lines = false,
-  hideNumber = false,
-  ...restProps
-}) {
-  const classNames = useHeaderBaseClassNames(className);
-
-  const HeaderBackgroundTag = HeaderBackground as unknown as FunctionComponent<
-    HTMLAttributes<SVGElement>
-  >;
-
-  return (
-    <div className={classNames.container} {...restProps}>
-      <div className={classNames.content}>{children}</div>
-      {lines ? (
-        <HeaderBackgroundTag className="absolute top-0 left-0" />
-      ) : (
-        <></>
-      )}
-      <div className={classNames.options}>
-        {!hideNumber && <PhoneLink />}
-        {help && <HelpButton variant="button" />}
-        {options.map((option, i) => (
-          <div key={String(i)}>{option}</div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default HeaderBase;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Header/HeaderBase/useHeaderBaseClassNames.ts

@@ -1,21 +0,0 @@
-import { CLASS_NAMES } from './constants';
-import clsx from 'clsx';
-
-export interface HeaderBaseClassNamesHook {
-  container: string;
-  content: string;
-  options: string;
-}
-
-export default function useHeaderBaseClassNames(
-  initialClassName: string,
-): HeaderBaseClassNamesHook {
-  const { containerBase, ...restClassNames } = CLASS_NAMES;
-
-  const container = clsx(containerBase, initialClassName);
-
-  return {
-    ...restClassNames,
-    container,
-  };
-}

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

@@ -1,13 +0,0 @@
-import type {
-  ButtonIconSize,
-  ButtonIconVariant,
-} from '~/components/Button/ButtonIcon/types';
-
-export const MENU_MODAL_ID = 'menu';
-
-export const MENU_BUTTON_PROPS = {
-  id: 'mobile-header-menu',
-  size: '40-20' as ButtonIconSize,
-  variant: 'ghost-grey' as ButtonIconVariant,
-  icon: 'menu',
-};