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

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

@@ -0,0 +1,56 @@
+import React, { FunctionComponent } from 'react';
+import SkeletonLoader, {
+  SkeletonLoaderProps,
+} from '~/components/SkeletonLoader';
+import { CLASSNAME, SKELETON } from './constants';
+import Options from './CardOptions';
+
+export interface CardFooterProps {
+  /**
+   * Item footer
+   */
+  footer?: JSX.Element | string | null;
+  /**
+   * Item footer options
+   */
+  footerOptions?: JSX.Element[];
+  /**
+   * Data is loading state
+   */
+  isLoading?: boolean;
+  /**
+   * Skeleton props for footer
+   */
+  footerSkeleton?: SkeletonLoaderProps | null;
+  /**
+   * Skeleton props for footer options
+   */
+  footerOptionsSkeleton?: SkeletonLoaderProps;
+}
+
+const CardFooter: FunctionComponent<CardFooterProps> = function ({
+  footer = null,
+  footerOptions = [],
+  isLoading = false,
+  footerSkeleton = null,
+  footerOptionsSkeleton = {},
+}) {
+  return (
+    <div className={CLASSNAME}>
+      <SkeletonLoader
+        isLoading={isLoading && !!footerSkeleton}
+        {...SKELETON}
+        {...footerSkeleton}
+        afterLoading={footer}
+      />
+      <Options
+        footer={!!footer || !!footerSkeleton}
+        footerOptions={footerOptions}
+        isLoading={isLoading && !!footerOptionsSkeleton}
+        footerOptionsSkeleton={footerOptionsSkeleton}
+      />
+    </div>
+  );
+};
+
+export default CardFooter;

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

@@ -0,0 +1,6 @@
+export const SKELETON = {
+  width: 80,
+  height: 14,
+};
+
+export const CLASSNAME = 'ml-4';

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

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from 'react';
+import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
+import Section from '~/components/Card/CardSection';
+import { CLASSNAME, SKELETON } from './constants';
+
+export interface CardOptionProps {
+  option?: JSX.Element | string;
+  isLoading?: boolean;
+  skeleton?: SkeletonLoaderProps | false;
+}
+
+const CardOption: FunctionComponent<CardOptionProps> = function ({
+  skeleton = false,
+  option,
+  ...props
+}) {
+  return (
+    <Section
+      skeletonProps={{
+        ...SKELETON,
+        ...(skeleton || {}),
+      }}
+      className={CLASSNAME}
+      {...props}
+      content={option}
+    />
+  );
+};
+
+export default CardOption;

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

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from 'react';
+import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
+import SkeletonLoader from '~/components/SkeletonLoader';
+
+export interface CardSectionProps {
+  skeletonProps: SkeletonLoaderProps;
+  className: string;
+  content?: JSX.Element | string;
+  isLoading?: boolean;
+}
+
+const CardSection: FunctionComponent<CardSectionProps> = function ({
+  content,
+  isLoading = false,
+  skeletonProps,
+  className,
+}) {
+  return (
+    <div className={className}>
+      <SkeletonLoader
+        isLoading={isLoading && !!skeletonProps}
+        {...skeletonProps}
+        afterLoading={content}
+      />
+    </div>
+  );
+};
+
+CardSection.displayName = 'Card-CardSection';
+
+export default CardSection;

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

@@ -0,0 +1,6 @@
+export const SKELETON = {
+  width: 120,
+  height: 14,
+};
+
+export const CLASSNAME = 'text-style-g-em text-neutral-900 flex flex-1 w-full';

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

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from 'react';
+import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
+import Section from '~/components/Card/CardSection';
+import { CLASSNAME, SKELETON } from './constants';
+
+export interface CardTitleProps {
+  title?: JSX.Element | string;
+  isLoading?: boolean;
+  skeleton?: SkeletonLoaderProps | boolean;
+}
+
+const CardTitle: FunctionComponent<CardTitleProps> = function ({
+  skeleton = false,
+  title,
+  ...props
+}) {
+  return (
+    <Section
+      skeletonProps={{
+        ...SKELETON,
+        ...(typeof skeleton !== 'boolean' ? skeleton : {}),
+      }}
+      className={CLASSNAME}
+      {...props}
+      content={title}
+    />
+  );
+};
+
+export default CardTitle;

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

@@ -0,0 +1,10 @@
+export const CARD_CLASS_NAMES = {
+  baseContainer: {
+    base: 'flex-col flex text-neutral-600 w-full',
+    '@variant': {
+      default: 'border rounded-xl border-solid border-neutral-200',
+    },
+  },
+  headerBase: 'flex flex-row space-between w-full',
+  headerMargin: 'mb-2.5',
+};

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

@@ -0,0 +1,12 @@
+/**
+ * function to decide whether to show or not the separation dot
+ * @param index - index of item
+ * @param footer - footer element
+ */
+export const showDot = (index?: number, footer?: boolean): boolean => {
+  if (index === 0 && !footer) {
+    return false;
+  }
+
+  return true;
+};

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

@@ -0,0 +1,78 @@
+import React, { FunctionComponent } from 'react';
+import type { CardProps } from './types';
+import useCardProps from '~/components/Card/useCardProps';
+import CardContent from '~/components/Card/CardContent';
+import CardFooter from '~/components/Card/CardFooter';
+import CardTitle from '~/components/Card/CardTitle';
+import CardOption from '~/components/Card/CardOption';
+import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
+
+const Card: FunctionComponent<CardProps> = function ({
+  children = null,
+  option,
+  title,
+  footer,
+  footerOptions = [],
+  isLoading = false,
+  showLoadingSkeleton,
+  className,
+  padding = 'py-5 px-4',
+  noContent = false,
+  variant = 'default',
+  fullHeightContent = false,
+  ...restProps
+}) {
+  const { classNames, showFooter } = useCardProps({
+    className,
+    padding,
+    noContent,
+    variant,
+    title,
+    footer,
+    footerOptions,
+    isLoading,
+    showLoadingSkeleton,
+  });
+
+  return (
+    <div className={classNames.container} {...restProps}>
+      <div className={classNames.header}>
+        <CardTitle
+          title={title as JSX.Element | string}
+          isLoading={isLoading}
+          skeleton={showLoadingSkeleton?.title}
+        />
+        <CardOption
+          option={option as JSX.Element | string}
+          isLoading={isLoading}
+          skeleton={
+            showLoadingSkeleton?.option as unknown as SkeletonLoaderProps
+          }
+        />
+      </div>
+      <CardContent
+        content={children as JSX.Element | string}
+        isLoading={isLoading}
+        fullHeightContent={fullHeightContent}
+        skeleton={
+          showLoadingSkeleton?.content as unknown as SkeletonLoaderProps
+        }
+      />
+      {showFooter && (
+        <CardFooter
+          footer={footer as JSX.Element | string | null}
+          footerOptions={footerOptions as JSX.Element[]}
+          isLoading={isLoading}
+          footerSkeleton={
+            showLoadingSkeleton?.footer as unknown as SkeletonLoaderProps
+          }
+          footerOptionsSkeleton={
+            showLoadingSkeleton?.footerOptions as unknown as SkeletonLoaderProps
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+export default Card;

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

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'react';
+
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  children?: JSX.Element | JSX.Element[];
+  className?: string;
+  /**
+   * Title of card
+   */
+  title?: JSX.Element | JSX.Element[] | string;
+  padding?: string;
+  /**
+   * Top right option
+   */
+  option?: JSX.Element | JSX.Element[] | string;
+  footer?: JSX.Element | JSX.Element[] | string;
+  footerOptions?: JSX.Element | JSX.Element[] | string;
+  noContent?: boolean;
+  isLoading?: boolean;
+  showLoadingSkeleton?: {
+    title?: boolean;
+    option?: boolean;
+    content?: boolean;
+    footer?: boolean;
+    footerOptions?: boolean;
+  };
+  variant?: 'default' | 'simple';
+  fullHeightContent?: boolean;
+}
+
+export interface CardProps {
+  children?: JSX.Element | JSX.Element[];
+  option?: JSX.Element | JSX.Element[] | string;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Card/useCardProps.ts

@@ -0,0 +1,46 @@
+import { useClasses } from '~/hooks';
+import type { StringIndexedObject } from '~/types';
+import { CARD_CLASS_NAMES } from './constants';
+import type { CardProps } from './types';
+
+export type CardPropsHookArgs = Omit<CardProps, 'children' | 'option'>;
+
+export interface CardPropsHook {
+  classNames: StringIndexedObject<string>;
+  showFooter: boolean;
+}
+
+export default function useCardProps({
+  className,
+  padding,
+  footerOptions,
+  noContent,
+  footer,
+  title,
+  isLoading,
+  showLoadingSkeleton,
+  variant,
+}: CardPropsHookArgs): CardPropsHook {
+  const showHeaderMargin =
+    !noContent && (title || (isLoading && showLoadingSkeleton?.title));
+
+  const classNames = useClasses(CARD_CLASS_NAMES, {
+    variants: {
+      variant,
+    },
+    container: ['.baseContainer', padding, className],
+    header: ['.headerBase', showHeaderMargin && '.headerMargin'],
+  });
+
+  const showFooter =
+    footer ||
+    (footerOptions as string | JSX.Element[]).length > 0 ||
+    (isLoading && showLoadingSkeleton?.footer) ||
+    (isLoading && showLoadingSkeleton?.footerOptions);
+
+  return {
+    classNames,
+    showFooter: showFooter as boolean,
+  };
+}
+0;

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

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+import FrontChatWidget from '~/components/FrontChatWidget';
+import ToastContainer from '~/components/ToastContainer';
+import Recaptcha from '~/components/Recaptcha';
+import ModalsWrapper, {
+  type ModalsWrapperProps,
+} from '~/components/ModalsWrapper';
+
+export interface CommonWrapperProps extends ModalsWrapperProps {
+  children: JSX.Element | JSX.Element[];
+  showHelp?: boolean;
+  recaptcha?: boolean;
+}
+
+const CommonWrapper: FunctionComponent<CommonWrapperProps> = function ({
+  children,
+  showHelp = true,
+  recaptcha = false,
+}) {
+  return (
+    <ModalsWrapper>
+      <>
+        {showHelp && <FrontChatWidget />}
+        {recaptcha && <Recaptcha />}
+        <ToastContainer />
+        <>{children}</>
+      </>
+    </ModalsWrapper>
+  );
+};
+
+export default CommonWrapper;

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

@@ -0,0 +1,46 @@
+import React, { createContext, FunctionComponent } from 'react';
+
+export interface HomeLinkProps {
+  href?: string;
+  className?: string;
+  to?: string;
+}
+
+export interface Props {
+  children?: JSX.Element | JSX.Element[];
+  linkComponent?: string | FunctionComponent<HomeLinkProps>;
+  desktopHeader?: FunctionComponent;
+  desktopFooter?: FunctionComponent;
+  homeLinkProps?: HomeLinkProps;
+  sidebar?: FunctionComponent;
+}
+
+export const ConfigWrapperContext = createContext<Omit<Props, 'children'>>({
+  linkComponent: 'a',
+  homeLinkProps: { href: '/' },
+});
+
+const ConfigWrapper: FunctionComponent<Props> = function ({
+  children,
+  linkComponent = 'a',
+  desktopHeader,
+  desktopFooter,
+  homeLinkProps = { href: '/' },
+  sidebar,
+}) {
+  const props = {
+    linkComponent,
+    desktopHeader,
+    desktopFooter,
+    homeLinkProps,
+    sidebar,
+  };
+
+  return (
+    <ConfigWrapperContext.Provider value={props}>
+      {children}
+    </ConfigWrapperContext.Provider>
+  );
+};
+
+export default ConfigWrapper;

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

@@ -0,0 +1,5 @@
+export const DEFAULT_TIMEOUT = 5000;
+
+export const DEFAULT_MESSAGE = 'Click to copy';
+
+export const DEFAULT_CLICKED_MESSAGE = 'Copied';

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

@@ -0,0 +1,24 @@
+/**
+ * Copies string contents to the clipboard
+ */
+export const copyToClipboard = (content: string): void => {
+  // create element
+  const element = document.createElement('textarea');
+  // Set element value to content
+  element.value = content;
+  // Make element readonly
+  element.setAttribute('readonly', '');
+  // Style element to be hidden
+  element.style.position = 'absolute';
+  element.style.left = '-9999px';
+  // Append to body
+  document.body.appendChild(element);
+  // Select the content
+  element.select();
+  // Fix for mobiles
+  element.setSelectionRange(0, 99999);
+  // Add content to clipboard
+  navigator.clipboard.writeText(element.value);
+  // Remove the element
+  document.body.removeChild(element);
+};

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

@@ -0,0 +1,51 @@
+import React, { FunctionComponent } from 'react';
+import useCopyContent from './useCopyContent';
+import {
+  DEFAULT_TIMEOUT,
+  DEFAULT_MESSAGE,
+  DEFAULT_CLICKED_MESSAGE,
+} from './constants';
+
+export interface CopyContentProps {
+  children?: JSX.Element | JSX.Element[];
+  /**
+   * Element to be shown when clicked
+   */
+  clickedView?: JSX.Element | JSX.Element[];
+  /**
+   * DesktopLayoutBoxedContent to be copied
+   */
+  content: string;
+  /**
+   * HTML ID for the input
+   */
+  id?: string;
+  className?: string;
+  time?: number;
+}
+
+const CopyContent: FunctionComponent<CopyContentProps> = function ({
+  children = null,
+  clickedView = null,
+  className = '',
+  id = '',
+  content,
+  time = DEFAULT_TIMEOUT,
+}) {
+  const { clicked, handleClick } = useCopyContent(content, time);
+
+  return (
+    <button
+      id={id}
+      onClick={handleClick}
+      className={className}
+      disabled={clicked}
+    >
+      {clicked
+        ? clickedView || DEFAULT_CLICKED_MESSAGE
+        : children || DEFAULT_MESSAGE}
+    </button>
+  );
+};
+
+export default CopyContent;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/CopyContent/useCopyContent.ts

@@ -0,0 +1,35 @@
+import { useState, useRef } from 'react';
+import { copyToClipboard } from './helpers';
+
+export interface CopyContentHook {
+  clicked: boolean;
+  handleClick: () => void;
+}
+
+export default function useCopyContent(
+  content: string,
+  time: number,
+): CopyContentHook {
+  const [clicked, setClicked] = useState(false);
+
+  const timerRef = useRef<number | undefined>();
+
+  const handleClick = () => {
+    // Set state to clicked
+    setClicked(true);
+    // Clear timeout
+    clearTimeout(timerRef.current);
+    // Copy content to clipboard
+    copyToClipboard(content);
+    // After `time`, set button to clickable again
+    timerRef.current = setTimeout(
+      () => setClicked(false),
+      time,
+    ) as unknown as number;
+  };
+
+  return {
+    clicked,
+    handleClick,
+  };
+}

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

@@ -0,0 +1,37 @@
+import {
+  PRIVACY_POLICY_URL,
+  TERMS_AND_CONDITIONS_URL,
+  COOKIE_POLICY_URL,
+} from '~/config';
+
+export const COPYRIGHT = '© 2021 Kanda';
+
+export const LINK = [
+  {
+    label: 'Privacy policy',
+    url: PRIVACY_POLICY_URL,
+    target: '_blank',
+  },
+  {
+    label: 'Terms & Conditions',
+    url: TERMS_AND_CONDITIONS_URL,
+    target: '_blank',
+  },
+  {
+    label: 'Cookie policy',
+    url: COOKIE_POLICY_URL,
+    target: '_blank',
+  },
+];
+
+export const CLASS_NAMES = {
+  container: 'h-60 overflow-hidden',
+  contentContainer:
+    'absolute bottom-0 left-0 right-0 flex flex-1 px-8 2xl:px-52',
+  wrapper:
+    'flex flex-1 w-full flex-row max-w-screen-lg 2xl:max-w-screen-2xl mx-auto',
+  content: 'flex flex-col md:flex-row items-center mb-16 px-3',
+  shadow: 'w-full h-60 bg-neutral-50 transform skew-y-slide-up origin-full',
+  copyright: 'text-style-g-em text-neutral-600',
+  link: 'text-style-g-em text-neutral-500 md:ml-12',
+};

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

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from 'react';
+
+import { CLASS_NAMES, COPYRIGHT, LINK } from './constants';
+
+const DesktopFooter: FunctionComponent = function ({}) {
+  return (
+    <div className={CLASS_NAMES.container}>
+      <div className={CLASS_NAMES.shadow} />
+      <div className={CLASS_NAMES.contentContainer}>
+        <div className={CLASS_NAMES.wrapper}>
+          <div className={CLASS_NAMES.content}>
+            <p className={CLASS_NAMES.copyright}>{COPYRIGHT}</p>
+            {LINK.map((link) => (
+              <a
+                key={link.url}
+                className={CLASS_NAMES.link}
+                href={link.url}
+                target={link.target}
+                rel="noreferrer"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DesktopFooter;

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

@@ -0,0 +1,23 @@
+export const CLASS_NAMES = {
+  container:
+    'group hidden lg:flex lg:flex-col items-center mr-4 ml-4 relative z-10',
+  content: 'flex flex-row items-center',
+  defaultAvatar: 'w-10 h-10 flex justify-center items-center',
+  loader: 'w-10 h-10 rounded-full bg-neutral-100',
+  companyProfilePicture: 'w-10 h-10 rounded-full object-contain',
+  infoContainer: 'flex flex-1 flex-col ml-4 justify-center',
+  companyName: 'text-style-f-em text-neutral-900 ml-4',
+  plan: 'text-style-g text-neutral-600',
+  popover: 'hidden group-hover:block absolute top-0 mt-10 p-10 bg-red-200',
+};
+
+export const SKELETONS = {
+  avatar: {
+    width: 24,
+    height: 24,
+    className: 'leading-unset',
+  },
+  title: {
+    width: 100,
+  },
+};