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

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Animations/Fade/Container.tsx

@@ -0,0 +1,51 @@
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { opacitySuffix } from '~/components/Modal/helpers';
+import type { OPACITIES } from '~/components/Modal/constants';
+import type { BaseFadeProps } from './types';
+
+export interface ContainerChildrenArgs {
+  onAnimationEnd: () => void;
+  className: string;
+}
+
+export interface ContainerProps extends BaseFadeProps {
+  children: (args: ContainerChildrenArgs) => JSX.Element;
+}
+
+const Container: FunctionComponent<ContainerProps> = function ({
+  show,
+  className: initialClassName,
+  opacity,
+  children,
+  onEnd,
+}) {
+  const [shouldRender, setShouldRender] = useState(show);
+
+  const onAnimationEnd = () => {
+    if (show) return;
+    setShouldRender(false);
+    if (onEnd) onEnd();
+  };
+
+  useEffect(() => {
+    if (show) setShouldRender(true);
+  }, [show]);
+
+  if (!shouldRender) return <></>;
+
+  const suffix = opacitySuffix(opacity as typeof OPACITIES[number]);
+
+  const className = clsx(
+    '',
+    initialClassName,
+    show ? `animate-fade-in${suffix}` : `animate-fade-out${suffix}`,
+  );
+
+  return children({
+    onAnimationEnd,
+    className,
+  });
+};
+
+export default Container;

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

@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from 'react';
+import type { BaseFadeProps } from './types';
+import Container from './Container';
+
+export interface FadeProps extends BaseFadeProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+const Fade: FunctionComponent<FadeProps> = function ({ children, ...props }) {
+  return (
+    <Container {...props}>
+      {({ className, onAnimationEnd }) => (
+        <div className={className} onAnimationEnd={onAnimationEnd}>
+          {children}
+        </div>
+      )}
+    </Container>
+  );
+};
+
+export default Fade;

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

@@ -0,0 +1,8 @@
+import type { OPACITIES } from '~/components/Modal/constants';
+
+export interface BaseFadeProps {
+  show: boolean;
+  className?: string;
+  onEnd?: () => void;
+  opacity?: typeof OPACITIES[number];
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Animations/SlideLeft/Container.tsx

@@ -0,0 +1,47 @@
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import type { BaseSlideLeftProps } from './types';
+import { BASE_CLASSNAME } from './constants';
+
+export interface ContainerChildrenArgs {
+  onAnimationEnd: () => void;
+  className: string;
+}
+
+export interface ContainerProps extends BaseSlideLeftProps {
+  children: (args: ContainerChildrenArgs) => JSX.Element;
+}
+
+const Container: FunctionComponent<ContainerProps> = function ({
+  show,
+  className: initialClassName,
+  children,
+  onEnd,
+}) {
+  const [shouldRender, setShouldRender] = useState(show);
+
+  const onAnimationEnd = () => {
+    if (show) return;
+    setShouldRender(false);
+    if (onEnd) onEnd();
+  };
+
+  useEffect(() => {
+    if (show) setShouldRender(true);
+  }, [show]);
+
+  if (!shouldRender) return <></>;
+
+  const className = clsx(
+    BASE_CLASSNAME,
+    initialClassName,
+    show ? `animate-slide-left-in` : `animate-slide-left-out`,
+  );
+
+  return children({
+    onAnimationEnd,
+    className,
+  });
+};
+
+export default Container;

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

@@ -0,0 +1 @@
+export const BASE_CLASSNAME = 'w-full h-full transform';

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

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react';
+import type { BaseSlideLeftProps } from './types';
+import Container from './Container';
+
+export interface SlideLeftProps extends BaseSlideLeftProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+const SlideLeft: FunctionComponent<SlideLeftProps> = function ({
+  children,
+  ...props
+}) {
+  return (
+    <Container {...props}>
+      {({ className, onAnimationEnd }) => (
+        <div className={className} onAnimationEnd={onAnimationEnd}>
+          {children}
+        </div>
+      )}
+    </Container>
+  );
+};
+
+export default SlideLeft;

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

@@ -0,0 +1,5 @@
+export interface BaseSlideLeftProps {
+  show: boolean;
+  className?: string;
+  onEnd?: () => void;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Animations/index.ts

@@ -0,0 +1,9 @@
+import Fade from './Fade';
+import SlideLeft from './SlideLeft';
+
+const Animations = {
+  Fade,
+  SlideLeft,
+};
+
+export default Animations;

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

@@ -0,0 +1,6 @@
+export const CLASS_NAMES = {
+  container:
+    'relative flex p-4 bg-turquoise-100 rounded-lg min-h-28 overflow-hidden',
+  background: 'absolute -right-px -bottom-22 md:-bottom-18',
+  backgroundHiddenOnMobile: 'hidden md:block',
+};

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

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+import { default as Background } from '../../assets/images/banner-background.svg';
+import { CLASS_NAMES } from './constants';
+import type { HomeLinkProps } from '~/components/ConfigWrapper';
+import clsx from 'clsx';
+
+export interface BannerProps {
+  children?: JSX.Element | JSX.Element[];
+  hideBackgroundOnMobile?: boolean;
+}
+
+const Banner: FunctionComponent<BannerProps> = function ({
+  children,
+  hideBackgroundOnMobile = false,
+}) {
+  const BackgroundTag =
+    Background as unknown as FunctionComponent<HomeLinkProps>;
+
+  return (
+    <div className={CLASS_NAMES.container}>
+      <BackgroundTag
+        className={clsx(
+          CLASS_NAMES.background,
+          hideBackgroundOnMobile && CLASS_NAMES.backgroundHiddenOnMobile,
+        )}
+      />
+      {children}
+    </div>
+  );
+};
+
+export default Banner;

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

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react';
+import useIsDesktop from '~/hooks/useIsDesktop';
+
+export interface BreakPointsProps {
+  /**
+   * Desktop node(s) to display
+   */
+  desktop?: JSX.Element | string;
+  /**
+   * Mobile node(s) to display
+   */
+  mobile?: JSX.Element | string;
+}
+
+const BreakPoints: FunctionComponent<BreakPointsProps> = function ({
+  desktop,
+  mobile,
+}) {
+  const isDesktop = useIsDesktop();
+
+  return <>{isDesktop ? desktop : mobile}</>;
+};
+
+export default BreakPoints;

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

@@ -0,0 +1,5 @@
+export const SKELETON_PROPS = {
+  wrapperClassName: 'absolute w-full h-full top-0 left-0',
+  className: 'leading-unset',
+  height: '100%',
+};

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

@@ -0,0 +1,52 @@
+import React, { type FunctionComponent } from 'react';
+import Icon from '~/components/Icon';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import { useButtonTracking } from '~/hooks';
+import { SKELETON_PROPS } from './constants';
+import type { BaseButtonProps } from './types';
+
+export type { BaseButtonProps };
+
+const BaseButton: FunctionComponent<BaseButtonProps> = function ({
+  id,
+  onClick: inputOnClick,
+  label,
+  children = null,
+  append = null,
+  prepend = null,
+  icon,
+  iconProps = {},
+  disabled = false,
+  submit = false,
+  classNames,
+  isLoading = false,
+  ...restProps
+}) {
+  const type = submit ? 'submit' : 'button';
+
+  const { onClick } = useButtonTracking(id, inputOnClick);
+
+  return (
+    <button
+      id={id}
+      type={type}
+      disabled={disabled}
+      className={classNames?.button}
+      ref={restProps.forwardRef}
+      {...restProps}
+      onClick={onClick}
+    >
+      <span className="flex flex-1 items-center justify-items-center justify-center">
+        {prepend}
+        <span className={classNames?.content}>
+          {label || children}
+          {icon && <Icon {...iconProps} icon={icon} />}
+        </span>
+        {append}
+      </span>
+      <SkeletonLoader {...SKELETON_PROPS} isLoading={isLoading} />
+    </button>
+  );
+};
+
+export default BaseButton;

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

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, MutableRefObject } from 'react';
+import type { IconProps } from '~/components/Icon/types';
+import type { ButtonOnClick } from '~/types';
+
+export interface BaseButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  id: string;
+  onClick?: ButtonOnClick;
+  /**
+   * ClassNames
+   */
+  classNames?: {
+    button?: string;
+    content?: string;
+  };
+  /**
+   * Children
+   */
+  children?: string | JSX.Element | JSX.Element[];
+  /**
+   * Icon name
+   */
+  icon?: string;
+  /**
+   * Icon props
+   */
+  iconProps?: IconProps;
+  /**
+   * sets button to disabled
+   */
+  disabled?: boolean;
+  /**
+   * sets button type to submit instead of button
+   */
+  submit?: boolean;
+  /**
+   * Button label
+   */
+  label?: JSX.Element | JSX.Element[] | string;
+  /**
+   * Display Loading state
+   */
+  isLoading?: boolean;
+  /**
+   * Append
+   */
+  append?: JSX.Element | JSX.Element[];
+  /**
+   * Append
+   */
+  prepend?: JSX.Element | JSX.Element[];
+  /**
+   * Forwarded ref
+   */
+  forwardRef?: MutableRefObject<HTMLButtonElement>;
+}

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

@@ -0,0 +1,85 @@
+import type { StringIndexedObject } from '~/types';
+
+export const CLASS_NAMES: StringIndexedObject<string> = {
+  buttonBase:
+    'flex flex-row items-center justify-center transition-all duration-100 ease-in group',
+  skeletonBase: 'leading-unset',
+  wrapper: 'relative',
+  indicatorBase:
+    'w-2 h-2 -m-0.5 rounded-full ring-2 ring-inset absolute top-0 right-0 transition-all duration-100 ease-in',
+};
+
+export const BUTTON_ICON_VARIANTS: StringIndexedObject<
+  StringIndexedObject<string | boolean>
+> = {
+  'ghost-grey': {
+    className: 'text-neutral-600 active:bg-neutral-100 group',
+    indicator: 'ring-neutral-000 group-active:ring-neutral-100',
+    circle: true,
+  },
+  turquoise: {
+    className: 'bg-turquoise-300 text-neutral-000 active:bg-turquoise-400',
+    indicator: 'ring-turquoise-300 group-active:ring-turquoise-400',
+    circle: true,
+  },
+  'light-turquoise': {
+    className:
+      'bg-turquoise-100 text-turquoise-400 active:bg-turquoise-200 active:text-red-500',
+    indicator: 'ring-turquoise-100 group-active:ring-turquoise-200',
+    circle: true,
+  },
+  'solid-grey': {
+    className:
+      'bg-neutral-200 text-neutral-600 active:bg-neutral-300 active:text-neutral-700',
+    indicator: 'ring-neutral-200 group-active:ring-neutral-300',
+    circle: true,
+  },
+  custom: {},
+};
+
+export const BUTTON_ICON_SIZE_VARIANTS: StringIndexedObject<
+  StringIndexedObject<number | StringIndexedObject<number>>
+> = {
+  '48-20': {
+    iconProps: {
+      size: 20,
+    },
+    size: 48,
+  },
+  '40-20': {
+    iconProps: {
+      size: 20,
+    },
+    size: 40,
+  },
+  '32-20': {
+    iconProps: {
+      size: 20,
+    },
+    size: 32,
+  },
+  '16-16': {
+    iconProps: {
+      size: 16,
+    },
+    size: 16,
+  },
+  '32-16': {
+    iconProps: {
+      size: 16,
+    },
+    size: 32,
+  },
+  '28-16': {
+    iconProps: {
+      size: 16,
+    },
+    size: 28,
+  },
+  '36-12': {
+    iconProps: {
+      size: 12,
+    },
+    size: 36,
+  },
+};

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

@@ -0,0 +1,63 @@
+import React, { FunctionComponent } from 'react';
+import type { ButtonIconProps } from './types';
+import useButtonIcon from '~/components/Button/ButtonIcon/useButtonIcon';
+import Icon from '~/components/Icon';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import type { IconProps } from '~/components/Icon/types';
+import { useButtonTracking } from '~/hooks';
+
+export type { ButtonIconProps };
+
+const ButtonIcon: FunctionComponent<ButtonIconProps> = function ({
+  children = null,
+  id,
+  onClick: inputOnClick,
+  submit,
+  size = '40-20',
+  variant = 'ghost-grey',
+  icon,
+  className: initialClassName,
+  iconProps: initialIconProps = {},
+  isLoading,
+  indicator,
+  indicatorPosition = 'top-0 right-0',
+  ...restProps
+}) {
+  const { iconProps, classNames, circle, type, style } = useButtonIcon(
+    submit as boolean,
+    variant,
+    size,
+    initialIconProps as IconProps,
+    initialClassName as string,
+    indicator as string,
+    indicatorPosition,
+  );
+
+  const { onClick } = useButtonTracking(id, inputOnClick);
+
+  return (
+    <SkeletonLoader
+      className={classNames.skeleton}
+      isLoading={isLoading}
+      circle={circle}
+      {...style}
+      afterLoading={
+        <button
+          id={id}
+          className={classNames.button}
+          style={style}
+          {...restProps}
+          type={type as 'button' | 'submit' | 'reset'}
+          onClick={onClick}
+        >
+          <div className={classNames.wrapper}>
+            <Icon {...iconProps} icon={icon as string} />
+            {indicator && <span className={classNames.indicator} />}
+          </div>
+        </button>
+      }
+    />
+  );
+};
+
+export default ButtonIcon;

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

@@ -0,0 +1,71 @@
+import type { HTMLAttributes } from 'react';
+import type { IconProps } from '~/components/Icon/types';
+import type { ButtonOnClick } from '~/types';
+
+export type ButtonIconVariant =
+  | 'turquoise'
+  | 'light-turquoise'
+  | 'solid-grey'
+  | 'ghost-grey'
+  | 'custom';
+
+export type ButtonIconSize =
+  | number
+  | '48-20'
+  | '40-20'
+  | '32-20'
+  | '32-16'
+  | '28-16'
+  | '36-12';
+
+export interface ButtonIconProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Children
+   */
+  children?: JSX.Element | JSX.Element[];
+  /**
+   * HTML ID of element
+   */
+  id: string;
+  onClick?: ButtonOnClick;
+  /**
+   * ClassName
+   */
+  className?: string;
+  /**
+   * Icon name
+   */
+  icon?: string;
+  /**
+   * Button variant
+   */
+  variant?: ButtonIconVariant;
+  /**
+   * Button size
+   */
+  size?: ButtonIconSize;
+  /**
+   * sets button type to submit insted of button
+   */
+  submit?: boolean;
+  /**
+   * Display Loading state
+   */
+  isLoading?: boolean;
+  /**
+   * Icon props
+   */
+  iconProps?: IconProps;
+  /**
+   * indircator color
+   */
+  indicator?: string;
+  /**
+   * indicator position
+   */
+  indicatorPosition?: string;
+  /**
+   * Sets button to disabled
+   */
+  disabled?: boolean;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Button/ButtonIcon/useButtonIcon.ts

@@ -0,0 +1,85 @@
+import clsx from 'clsx';
+import type { StringIndexedObject } from '~/types';
+import type {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '~/components/Button/ButtonIcon/types';
+import {
+  BUTTON_ICON_SIZE_VARIANTS,
+  BUTTON_ICON_VARIANTS,
+  CLASS_NAMES,
+} from './constants';
+import type { IconProps } from '~/components/Icon/types';
+
+export interface ButtonIconHook {
+  iconProps: IconProps;
+  classNames: StringIndexedObject<string>;
+  circle: boolean;
+  style: {
+    width: number;
+    height: number;
+  };
+  type: string;
+}
+
+export default function useButtonIcon(
+  submit: boolean,
+  variant: ButtonIconVariant,
+  size: ButtonIconSize,
+  initialIconProps: IconProps,
+  initialClassName: string,
+  indicatorColor: string,
+  indicatorPosition: string,
+): ButtonIconHook {
+  const { size: variantSize, iconProps: sizeIconProps } =
+    BUTTON_ICON_SIZE_VARIANTS[size] || {};
+
+  const { buttonBase, skeletonBase, indicatorBase, ...restClassNames } =
+    CLASS_NAMES;
+
+  const { circle, ...iconVariant } = BUTTON_ICON_VARIANTS[variant] || {};
+
+  const button = clsx(
+    buttonBase,
+    iconVariant.className,
+    circle && 'rounded-full',
+    initialClassName,
+  );
+
+  const indicator = clsx(
+    indicatorBase,
+    iconVariant.indicator,
+    `bg-${indicatorColor}`,
+    indicatorPosition,
+  );
+
+  const skeleton = clsx(skeletonBase, initialClassName);
+
+  const classNames = {
+    ...restClassNames,
+    skeleton,
+    button,
+    indicator,
+  };
+
+  const style = {
+    width: variantSize || size,
+    height: variantSize || size,
+  };
+
+  const iconProps = {
+    ...(sizeIconProps as unknown as IconProps),
+    ...(iconVariant.iconProps as unknown as IconProps),
+    ...initialIconProps,
+  };
+
+  const type = submit ? 'submit' : 'button';
+
+  return {
+    iconProps,
+    classNames,
+    circle: circle as boolean,
+    style: style as { width: number; height: number },
+    type,
+  };
+}

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

@@ -0,0 +1,25 @@
+import type { StringIndexedObject } from '~/types';
+
+export const CLASS_NAMES = {
+  buttonBase: 'relative transition-all duration-100 ease-in',
+  buttonLoading: 'pointer-events-none',
+  buttonNotLoading: 'border-b solid',
+  content: 'flex flex-1 items-center justify-items-center justify-center',
+};
+
+export const BUTTON_VARIANTS: StringIndexedObject<StringIndexedObject<string>> =
+  {
+    custom: {},
+    grey: {
+      className:
+        'text-style-h-em text-neutral-600 hover:text-neutral-700 border-neutral-300',
+    },
+    turquoise: {
+      className:
+        'text-style-h-em text-turquoise-300 hover:text-turquoise-500 border-turquoise-200',
+    },
+    lavender: {
+      className:
+        'text-style-h-em text-lavender-200 hover:text-lavender-300 border-lavender-100',
+    },
+  };