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

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

@@ -1,7 +0,0 @@
-export const SKELETON = {
-  width: 80,
-  height: 12,
-};
-
-export const CLASSNAME =
-  'mt-2.5 text-style-h-em text-neutral-900 flex flex-start flex-wrap align-center items-center';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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