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

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

@@ -0,0 +1,61 @@
+import React, { FunctionComponent } from 'react';
+import { Img } from 'react-image';
+import type { CompanyInfoProps } from '~/components/DesktopHeader/CompanyInfo/types';
+import { CLASS_NAMES, SKELETONS } from './constants';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import Icon from '~/components/Icon';
+import CompanyInfoPopover from '../CompanyInfoPopover';
+import { DEFAULT_AVATAR_ICON_PROPS } from '~/common/constants';
+import useIsMounted from '~/hooks/useIsMounted';
+
+const CompanyInfo: FunctionComponent<CompanyInfoProps> = function ({
+  companyName = 'My Kanda',
+  companyProfilePicture,
+  isLoading,
+  showAvatar = true,
+  ...restProps
+}) {
+  const isMounted = useIsMounted();
+
+  return (
+    <div className={CLASS_NAMES.container}>
+      <div className={CLASS_NAMES.content}>
+        {showAvatar && (
+          <SkeletonLoader
+            isLoading={isLoading}
+            {...SKELETONS.avatar}
+            afterLoading={
+              isMounted ? (
+                <Img
+                  key={companyProfilePicture}
+                  alt={companyName}
+                  className={CLASS_NAMES.companyProfilePicture}
+                  src={companyProfilePicture as string}
+                  loader={<SkeletonLoader isLoading {...SKELETONS.avatar} />}
+                  unloader={
+                    <div className={CLASS_NAMES.defaultAvatar}>
+                      <Icon {...DEFAULT_AVATAR_ICON_PROPS} />
+                    </div>
+                  }
+                />
+              ) : (
+                <></>
+              )
+            }
+          />
+        )}
+        <p className={CLASS_NAMES.companyName}>
+          <SkeletonLoader
+            isLoading={isLoading}
+            afterLoading={companyName || 'My Kanda'}
+            {...SKELETONS.title}
+          />
+        </p>
+        <Icon icon="chevron-down" size={16} className="my-auto ml-2" />
+      </div>
+      <CompanyInfoPopover {...restProps} />
+    </div>
+  );
+};
+
+export default CompanyInfo;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopHeader/CompanyInfo/types.d.ts

@@ -0,0 +1,19 @@
+import type { CompanyItem } from '~/components/DesktopHeader/CompanyInfoPopover/types';
+
+export interface CompanyInfoProps {
+  companyName?: string;
+  /**
+   * Company profile picture url
+   */
+  companyProfilePicture?: string;
+  isLoading?: boolean;
+  /**
+   * Items for the company menu
+   */
+  companyItems: CompanyItem[];
+  /**
+   * Function for logging out
+   */
+  logout?: () => void;
+  showAvatar?: boolean;
+}

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

@@ -0,0 +1,10 @@
+export const CLASS_NAMES = {
+  container: 'hidden group-hover:block absolute top-0 right-0 w-64 pb-6',
+  popover:
+    'flex flex-1 flex-col mt-12 bg-neutral-000 border border-neutral-300 rounded-lg overflow-hidden',
+};
+
+export const LOGOUT_ITEM = {
+  icon: 'logout',
+  name: 'Logout',
+};

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

@@ -0,0 +1,40 @@
+import React, { FunctionComponent } from 'react';
+import PopoverMenu from '~/components/PopoverMenu';
+import type { PopoverMenuItemProps } from '~/components/PopoverMenu/PopoverMenuItem';
+import type { CompanyItem } from './types';
+import useCompanyInfoPopover from './useCompanyInfoPopover';
+import { CLASS_NAMES } from './constants';
+
+export interface CompanyInfoPopoverProps {
+  /**
+   * Company items
+   */
+  companyItems: CompanyItem[];
+  /**
+   * Notice banner to show
+   */
+  notice?: FunctionComponent;
+  /**
+   * Function for logging out
+   */
+  logout?: () => void;
+}
+
+const CompanyInfoPopover: FunctionComponent<CompanyInfoPopoverProps> =
+  function ({ companyItems, notice, logout }) {
+    const { items } = useCompanyInfoPopover(companyItems, logout);
+
+    return (
+      <div className={CLASS_NAMES.container}>
+        <div className={CLASS_NAMES.popover}>
+          <PopoverMenu
+            items={items as PopoverMenuItemProps[]}
+            notice={notice}
+            size="small"
+          />
+        </div>
+      </div>
+    );
+  };
+
+export default CompanyInfoPopover;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopHeader/CompanyInfoPopover/types.d.ts

@@ -0,0 +1,8 @@
+export interface CompanyItem {
+  active?: boolean;
+  name: string;
+  href?: string;
+  target?: string;
+  to?: string;
+  onClick?: () => void;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopHeader/CompanyInfoPopover/useCompanyInfoPopover.ts

@@ -0,0 +1,36 @@
+import { useCallback, useMemo } from 'react';
+import type { CompanyItem } from './types';
+import { LOGOUT_ITEM } from './constants';
+
+export interface CompanyInfoPopoverHook {
+  items: CompanyItem[];
+  handleLogout: () => void;
+}
+
+export default function useCompanyInfoPopover(
+  companyItems: CompanyItem[],
+  logout?: () => void,
+): CompanyInfoPopoverHook {
+  const handleLogout = useCallback(() => {
+    if (logout) {
+      logout();
+      return;
+    }
+  }, [logout]);
+
+  const items = useMemo<CompanyItem[]>(
+    () => [
+      ...companyItems,
+      {
+        ...LOGOUT_ITEM,
+        onClick: handleLogout,
+      },
+    ],
+    [companyItems, handleLogout],
+  );
+
+  return {
+    items,
+    handleLogout,
+  };
+}

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

@@ -0,0 +1,7 @@
+export const CLASS_NAMES = {
+  container:
+    'hidden lg:flex lg:flex-1 w-full flex-row justify-center absolute -ml-8',
+  itemBase: 'ml-8 text-style-f-em px-3 py-2 rounded-lg',
+  itemInactive: 'text-neutral-500',
+  itemActive: 'bg-turquoise-100 text-turquoise-500',
+};

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

@@ -0,0 +1,11 @@
+import clsx from 'clsx';
+import { CLASS_NAMES } from './constants';
+
+/**
+ * Items class name
+ */
+export const itemClassName = (active: boolean): string =>
+  clsx(
+    CLASS_NAMES.itemBase,
+    active ? CLASS_NAMES.itemActive : CLASS_NAMES.itemInactive,
+  );

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

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from 'react';
+import type { NavigationLinkProps } from '~/components/NavigationLink';
+import type { CompanyItem } from '~/components/DesktopHeader/CompanyInfoPopover/types';
+import { CLASS_NAMES } from './constants';
+import { itemClassName } from '~/components/DesktopHeader/DesktopMenu/helpers';
+
+export interface DesktopMenuProps {
+  companyItems: CompanyItem[];
+  linkComponent: string | React.FunctionComponent<NavigationLinkProps>;
+}
+
+const DesktopMenu: FunctionComponent<DesktopMenuProps> = function ({
+  companyItems = [],
+  linkComponent: LinkComponent = 'a',
+}) {
+  return (
+    <div className={CLASS_NAMES.container}>
+      {companyItems.map(({ name, active, ...itemProps }) => (
+        <LinkComponent
+          className={itemClassName(active as boolean)}
+          {...itemProps}
+          key={name}
+        >
+          {name}
+        </LinkComponent>
+      ))}
+    </div>
+  );
+};
+
+export default DesktopMenu;

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

@@ -0,0 +1,24 @@
+import type {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '~/components/Button/ButtonIcon/types';
+
+export const CLASS_NAMES = {
+  container:
+    'flex flex-1 flex-row h-10 items-center justify-between -mx-3 relative',
+  logo: 'ml-3',
+  mobileMenu: 'lg:hidden',
+  optionsWrapper: 'flex flex-row items-center z-40',
+  options: 'flex flex-row items-center',
+  homeLink: 'z-10',
+};
+
+export const MENU_MODAL_ID = 'menu';
+
+export const MENU_BUTTON_PROPS = {
+  id: 'desktop-header-menu',
+  size: '40-20' as ButtonIconSize,
+  variant: 'ghost-grey' as ButtonIconVariant,
+  key: 'menu',
+  icon: 'menu',
+};

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

@@ -0,0 +1,58 @@
+import React, { FunctionComponent } from 'react';
+import type { DesktopHeaderProps } from './types';
+import Logo from '~/components/Logo';
+import HelpButton from '~/components/HelpButton';
+import type { HomeLinkProps } from '~/components/ConfigWrapper';
+import useDesktopHeaderProps from './useDesktopHeaderProps';
+import CompanyInfo from './CompanyInfo';
+import DesktopMenu from './DesktopMenu';
+import { CLASS_NAMES } from './constants';
+
+const DesktopHeader: FunctionComponent<DesktopHeaderProps> = function ({
+  items = [],
+  help = true,
+  extraOptions = null,
+  hideHomeLink = false,
+  noLinkLogo = false,
+  showAvatar = true,
+  ...companyInfo
+}) {
+  const {
+    options,
+    linkComponent: LinkComponent,
+    homeLinkProps,
+  } = useDesktopHeaderProps();
+
+  const LogoTag = Logo as unknown as FunctionComponent<HomeLinkProps>;
+
+  return (
+    <div className={CLASS_NAMES.container}>
+      {!hideHomeLink && (
+        <React.Fragment>
+          {noLinkLogo ? (
+            <div className={CLASS_NAMES.homeLink}>
+              <LogoTag className={CLASS_NAMES.logo} />
+            </div>
+          ) : (
+            <LinkComponent className={CLASS_NAMES.homeLink} {...homeLinkProps}>
+              <LogoTag className={CLASS_NAMES.logo} />
+            </LinkComponent>
+          )}
+        </React.Fragment>
+      )}
+      <div className={CLASS_NAMES.optionsWrapper}>
+        <div className={CLASS_NAMES.options}>
+          {extraOptions}
+          {help && <HelpButton />}
+          {options.map((option, i) => (
+            <div key={String(i)}>{option}</div>
+          ))}
+        </div>
+        <CompanyInfo {...companyInfo} showAvatar={showAvatar} />
+      </div>
+      <DesktopMenu companyItems={items} linkComponent={LinkComponent} />
+    </div>
+  );
+};
+
+export default DesktopHeader;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopHeader/types.d.ts

@@ -0,0 +1,44 @@
+import type { CompanyItem } from '~/components/DesktopHeader/CompanyInfoPopover/types';
+import type { FunctionComponent } from 'react';
+
+export interface DesktopHeaderProps {
+  items?: CompanyItem[];
+  companyItems: CompanyItem[];
+  /**
+   * Notice banner to show
+   */
+  notice?: FunctionComponent;
+  /**
+   * Company name
+   */
+  companyName?: string;
+  /**
+   * Company profile picture url
+   */
+  companyProfilePicture?: string;
+  /**
+   * isLoading
+   */
+  isLoading?: boolean;
+  /**
+   * Display front chat widget
+   */
+  help?: boolean;
+  /**
+   * Displays extra actions alongside help / menu
+   */
+  extraOptions?: JSX.Element;
+  /**
+   * Function for logging out
+   */
+  logout?: () => void;
+  /**
+   * Function for logging out
+   */
+  hideHomeLink?: boolean;
+  /**
+   * Display logo without link component
+   */
+  noLinkLogo?: boolean;
+  showAvatar?: boolean;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/DesktopHeader/useDesktopHeaderProps.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+
+import Button from '~/components/Button';
+import type { NavigationLinkProps } from '~/components/NavigationLink';
+import { ModalsWrapperContext } from '../ModalsWrapper';
+import { ConfigWrapperContext, HomeLinkProps } from '../ConfigWrapper';
+import { CLASS_NAMES, MENU_BUTTON_PROPS, MENU_MODAL_ID } from './constants';
+
+export interface DesktopHeaderPropsHook {
+  options: JSX.Element[];
+  linkComponent: string | React.FunctionComponent<NavigationLinkProps>;
+  homeLinkProps: HomeLinkProps;
+}
+
+export default function useDesktopHeaderProps(): DesktopHeaderPropsHook {
+  const { showAnimatedModal } = useContext(ModalsWrapperContext);
+  const { linkComponent, homeLinkProps } = useContext(ConfigWrapperContext);
+
+  const handleMenu = () => showAnimatedModal(MENU_MODAL_ID);
+
+  const options = [
+    <Button.Icon
+      {...MENU_BUTTON_PROPS}
+      key="menu"
+      className={CLASS_NAMES.mobileMenu}
+      onClick={handleMenu}
+    />,
+  ];
+
+  return {
+    options,
+    linkComponent: linkComponent as string,
+    homeLinkProps: homeLinkProps as HomeLinkProps,
+  };
+}

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

@@ -0,0 +1,3 @@
+export const CLASS_NAMES = {
+  contentFooter: 'flex flex-end w-full justify-end p-10',
+};

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

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

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

@@ -0,0 +1,33 @@
+export const CLASS_NAMES = {
+  wrapper: {
+    base: 'flex flex-col',
+    '@top': {
+      false: 'my-auto',
+    },
+    '@flex': {
+      true: 'flex-1 items-center',
+    },
+  },
+  container: {
+    base: 'flex flex-row w-full justify-center',
+    '@noPadding': {
+      false: 'px-16 lg:px-38 pt-18',
+      true: '',
+    },
+    '@flex': {
+      true: 'flex-1',
+    },
+    '@footer': {
+      false: 'pb-18',
+    },
+  },
+  content: {
+    base: 'flex flex-col',
+    '@left': {
+      false: 'items-center text-center',
+    },
+    '@flex': {
+      true: 'flex-1',
+    },
+  },
+};

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

@@ -0,0 +1,57 @@
+import React, { FunctionComponent } from 'react';
+import useContentClassNames from './useContentClassNames';
+
+export interface ContentDefaultProps {
+  children?: JSX.Element | JSX.Element[];
+  footer?: JSX.Element | JSX.Element[];
+  header?: JSX.Element | JSX.Element[];
+  /**
+   * Align content to top
+   */
+  top?: boolean;
+  /**
+   * Align content to left
+   */
+  left?: boolean;
+  flex?: boolean;
+  width?: string;
+  /**
+   * Don't add padding to the content
+   */
+  noPadding?: boolean;
+}
+
+const DesktopLayoutBoxedContent: FunctionComponent<ContentDefaultProps> =
+  function ({
+    children,
+    header,
+    footer,
+    width = 'w-120 max-w-120',
+    top = false,
+    left = false,
+    flex = false,
+    noPadding = false,
+  }) {
+    const classNames = useContentClassNames({
+      footer,
+      width,
+      top,
+      left,
+      flex,
+      noPadding,
+    });
+
+    return (
+      <>
+        {header}
+        <div className={classNames.wrapper}>
+          <div className={classNames.container}>
+            <div className={classNames.content}>{children}</div>
+          </div>
+          {footer}
+        </div>
+      </>
+    );
+  };
+
+export default DesktopLayoutBoxedContent;

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

@@ -0,0 +1,27 @@
+import type { ContentDefaultProps } from './index';
+import type { StringIndexedObject } from '~/types';
+import { useClasses } from '~/hooks';
+import { CLASS_NAMES } from './constants';
+
+export type ContentClassNamesArgs = Omit<
+  ContentDefaultProps,
+  'children' | 'header'
+>;
+
+export default function useContentClassNames({
+  footer,
+  width,
+  ...variants
+}: ContentClassNamesArgs): StringIndexedObject {
+  const extendedVariants = {
+    ...variants,
+    footer: Boolean(footer),
+  };
+
+  const classNames = useClasses(CLASS_NAMES, {
+    variants: extendedVariants,
+    content: ['.content', width],
+  });
+
+  return classNames;
+}

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

@@ -0,0 +1,3 @@
+export const CLASS_NAMES = {
+  contentHeader: 'flex w-full p-6 absolute z-10',
+};

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

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

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

@@ -0,0 +1,30 @@
+export const CLASS_NAMES = {
+  container: 'flex flex-col flex-1 w-screen min-h-vvp relative',
+  sidebarBase: 'flex flex-initial w-1/3 max-w-80 mr-6 lg:mr-8 xl:mr-16',
+  backgroundLines: 'absolute  w-screen top-0 left-0 bottom-0 right-0',
+  background: 'absolute w-screen h-screen overflow-hidden',
+  header: 'my-10 flex w-full h-10 flex-row justify-between items-center mx-3',
+  shadow: 'w-full h-80 bg-neutral-50 transform skew-y-slide-up origin-0',
+  lines: 'absolute left-0 top-0',
+  options: 'flex flex-row',
+  wrapper: {
+    base: 'flex flex-1 w-full flex-col relative mx-auto px-6 lg:px-8 xl:px-16',
+    '@noHeader': {
+      false: 'pb-30',
+      true: 'pb-20',
+    },
+  },
+  contentWrapper: {
+    base: 'flex flex-1 w-full max-w-5xl desktop:max-w-none desktop:px-36 mx-auto',
+    '@noHeader': {
+      true: 'mt-20',
+    },
+  },
+  contentBox: {
+    base: 'flex flex-1 flex-col shadow-a bg-neutral-000 border border-neutral-300 rounded-lg overflow-hidden relative',
+    '@allowYOverflow': {
+      true: 'overflow-y-scroll',
+    },
+  },
+  logo: '-ml-3',
+};