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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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