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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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