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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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