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

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

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react';
+import type { ButtonInlineLinkProps } from './types';
+import BaseButton from '~/components/Button/BaseButton';
+import useButtonInlineLink from './useButtonInlineLink';
+
+export type { ButtonInlineLinkProps };
+
+const ButtonInlineLink: FunctionComponent<ButtonInlineLinkProps> = function ({
+  id,
+  className,
+  variant = 'grey',
+  ...restProps
+}) {
+  const { isLoading = false } = restProps;
+
+  const variantProps = useButtonInlineLink(
+    variant,
+    className as string,
+    isLoading,
+  );
+
+  return <BaseButton id={id} {...restProps} {...variantProps} />;
+};
+
+export default ButtonInlineLink;

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

@@ -0,0 +1,42 @@
+import type { BaseButtonProps } from '~/components/Button/BaseButton/types';
+import type { IconProps } from '~/components/Icon/types';
+import type { ButtonOnClick } from '~/types';
+
+export type ButtonInlineLinkVariant =
+  | 'custom'
+  | 'grey'
+  | 'turquoise'
+  | 'lavender';
+
+export interface ButtonInlineLinkProps extends BaseButtonProps {
+  id: string;
+  onClick?: ButtonOnClick;
+  /**
+   * Children
+   */
+  children?: string | JSX.Element | JSX.Element[];
+  /**
+   * ClassName
+   */
+  className?: string;
+  /**
+   * Button variant name
+   */
+  variant?: ButtonInlineLinkVariant;
+  /**
+   * Whether or not the button is disabled
+   */
+  disabled?: boolean;
+  /**
+   * sets button type to submit insted of button
+   */
+  submit?: boolean;
+  /**
+   * Button label
+   */
+  label?: string | JSX.Element | JSX.Element[];
+  /**
+   * Display Loading state
+   */
+  isLoading?: boolean;
+}

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

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+import { CLASS_NAMES, BUTTON_VARIANTS } from './constants';
+import type { StringIndexedObject } from '~/types';
+
+export interface ButtonInlineLinkHook {
+  classNames: StringIndexedObject<string>;
+}
+
+export default function useButtonInlineLink(
+  variant: string,
+  initialClassName: string,
+  isLoading: boolean,
+): ButtonInlineLinkHook {
+  const { buttonBase, buttonLoading, buttonNotLoading, ...classNames } =
+    CLASS_NAMES;
+
+  const colorVariant = BUTTON_VARIANTS[variant] || {};
+
+  const button = clsx(
+    buttonBase,
+    colorVariant.className,
+    initialClassName,
+    isLoading ? buttonLoading : buttonNotLoading,
+  );
+
+  return {
+    classNames: {
+      ...classNames,
+      button,
+    },
+  };
+}

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

@@ -0,0 +1,48 @@
+import type { StringIndexedObject } from '~/types';
+
+export const CLASS_NAMES = {
+  buttonBase: 'relative transition-all duration-100 ease-in',
+  contentBase: 'flex flex-1 items-center justify-items-center justify-center',
+};
+
+export const BUTTON_VARIANTS: StringIndexedObject<StringIndexedObject<string>> =
+  {
+    custom: {},
+    turquoise: {
+      className: 'text-turquoise-300 hover:text-turquoise-500',
+    },
+    grey: {
+      className: 'text-neutral-600 hover:text-neutral-700',
+    },
+    'light-grey': {
+      className: 'text-neutral-500 hover:text-neutral-600',
+    },
+  };
+
+export const BUTTON_SIZES_VARIANTS: Record<
+  string | number,
+  StringIndexedObject<string | StringIndexedObject<number>>
+> = {
+  custom: {},
+  16: {
+    className: 'text-style-f-em',
+    iconSpacing: '2',
+    iconProps: {
+      size: 16,
+    },
+  },
+  14: {
+    className: 'text-style-g-em',
+    iconSpacing: '2',
+    iconProps: {
+      size: 16,
+    },
+  },
+  12: {
+    className: 'text-style-h-em',
+    iconSpacing: '1.5',
+    iconProps: {
+      size: 12,
+    },
+  },
+};

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

@@ -0,0 +1,37 @@
+import React, { FunctionComponent } from 'react';
+import type { ButtonLinkProps } from './types';
+import useButtonLink from '~/components/Button/ButtonLink/useButtonLink';
+import BaseButton from '~/components/Button/BaseButton';
+import type { IconProps } from '~/components/Icon/types';
+
+export type { ButtonLinkProps };
+
+const ButtonLink: FunctionComponent<ButtonLinkProps> = function ({
+  id,
+  className,
+  variant = 'turquoise',
+  left = false,
+  size = 16,
+  iconSpacing,
+  ...restProps
+}) {
+  const { iconProps = {}, isLoading = false } = restProps;
+
+  const variantProps = useButtonLink(
+    variant,
+    left,
+    size as number,
+    className as string,
+    iconProps as IconProps,
+    iconSpacing as number,
+    isLoading as boolean,
+  );
+
+  return (
+    <BaseButton id={id} {...restProps} {...variantProps}>
+      {restProps.children as JSX.Element}
+    </BaseButton>
+  );
+};
+
+export default ButtonLink;

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

@@ -0,0 +1,58 @@
+import type { BaseButtonProps } from '~/components/Button/BaseButton/types';
+import type { IconProps } from '~/components/Icon/types';
+import type { ButtonOnClick } from '~/types';
+
+export type ButtonLinkVariant = 'turquoise' | 'grey' | 'light-grey' | 'custom';
+
+export interface ButtonLinkProps extends Omit<BaseButtonProps, 'children'> {
+  id: string;
+  onClick?: ButtonOnClick;
+  /**
+   * Children
+   */
+  children?: JSX.Element | JSX.Element[] | string;
+  /**
+   * ClassName
+   */
+  className?: string;
+  /**
+   * Icon name
+   */
+  icon?: string;
+  /**
+   * Icon props
+   */
+  iconProps?: IconProps;
+  /**
+   * Button variant name
+   */
+  variant?: ButtonLinkVariant;
+  /**
+   * sets button type to submit insted of button
+   */
+  submit?: boolean;
+  /**
+   * changes position of the icon to left from right
+   */
+  left?: boolean;
+  /**
+   * Button size
+   */
+  size?: 'custom' | 16 | 14 | 12;
+  /**
+   * Button label
+   */
+  label?: JSX.Element | JSX.Element[] | string;
+  /**
+   * Display Loading state
+   */
+  isLoading?: boolean;
+  /**
+   * Icon spacing
+   */
+  iconSpacing?: number;
+  /**
+   * Sets button to disabled
+   */
+  disabled?: boolean;
+}

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

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+import {
+  CLASS_NAMES,
+  BUTTON_VARIANTS,
+  BUTTON_SIZES_VARIANTS,
+} from './constants';
+import type { StringIndexedObject, Variant } from '~/types';
+import type { IconProps } from '~/components/Icon/types';
+
+export interface ButtonLinkHook {
+  classNames: StringIndexedObject<string>;
+  iconProps: IconProps;
+}
+
+export default function useButtonLink(
+  variant: string,
+  left: boolean,
+  size: number,
+  initialClassName: string,
+  initialIconProps: IconProps,
+  initialIconSpacing: Variant,
+  isLoading: boolean,
+): ButtonLinkHook {
+  const { buttonBase, contentBase, ...classNames } = CLASS_NAMES;
+
+  const colorVariant = BUTTON_VARIANTS[variant] || {};
+  const sizeVariant = BUTTON_SIZES_VARIANTS[size] || {};
+
+  const button = clsx(
+    buttonBase,
+    colorVariant.className,
+    sizeVariant.className,
+    initialClassName,
+    isLoading && 'pointer-events-none',
+  );
+
+  const content = clsx(contentBase, left ? 'flex-row-reverse' : 'flex-row');
+
+  const iconSpace = initialIconSpacing || sizeVariant.iconSpacing;
+
+  const iconClassName = clsx(
+    left ? `mr-${iconSpace}` : `ml-${iconSpace}`,
+    initialIconProps.className,
+  );
+
+  const iconProps = {
+    ...(sizeVariant.iconProps as unknown as IconProps),
+    ...initialIconProps,
+    className: iconClassName,
+  };
+
+  return {
+    classNames: {
+      ...classNames,
+      button,
+      content,
+    },
+    iconProps,
+  };
+}

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

@@ -0,0 +1,79 @@
+export const BUTTON_CLASS_NAME = {
+  base: 'relative transition-all duration-100 ease-in-out {{@className}}',
+  '@variant': {
+    solid:
+      'bg-turquoise-300 text-neutral-000 rounded-full disabled:bg-neutral-300 disabled:text-neutral-000 hover:bg-turquoise-400',
+    danger:
+      'bg-red-200 text-neutral-000 rounded-full disabled:bg-neutral-300 disabled:text-neutral-000 hover:bg-red-500',
+    gradient:
+      'bg-gradient-b-big text-neutral-900 rounded-full disabled:bg-neutral-300 disabled:text-neutral-000 disabled:bg-none bg-200 bg-left hover:bg-right duration-300',
+    outline:
+      'bg-neutral-000 ring-2 ring-inset ring-neutral-200 text-neutral-600 rounded-full disabled:ring-neutral-100 disabled:text-neutral-400 hover:ring-neutral-300 hover:text-neutral-700',
+    ghost: 'text-neutral-500 disabled:text-neutral-400 hover:text-neutral-600',
+  },
+  '@size': {
+    48: 'px-8 h-12 text-style-f-em',
+    40: 'px-4 h-10 text-style-g-em',
+    32: 'px-4 h-8 text-style-h-em',
+    24: 'px-3 h-6 text-style-h-em',
+  },
+  '@loading': {
+    true: 'pointer-events-none',
+  },
+};
+
+const CONTAINER_CLASS_NAME =
+  'flex flex-1 items-center justify-items-center justify-center';
+
+const CONTENT_CLASS_NAME = {
+  base: 'flex flex-1 items-center justify-items-center justify-center',
+  '@left': {
+    true: 'flex-row-reverse',
+    false: 'flex-row',
+  },
+};
+
+const ICON_SPACE_CLASS_NAME = {
+  '@size': {
+    48: 'w-3',
+    40: 'w-2',
+    32: 'w-2',
+    24: 'w-1',
+  },
+};
+
+const ICON_PROPS = {
+  '@size': {
+    48: {
+      size: 20,
+    },
+    40: {
+      size: 20,
+    },
+    32: {
+      size: 20,
+    },
+    24: {
+      size: 12,
+    },
+  },
+};
+
+const SKELETON_PROPS = {
+  wrapperClassName: 'absolute w-full h-full top-0 left-0',
+  className: 'leading-unset',
+  height: '100%',
+};
+
+export default {
+  classNames: {
+    button: BUTTON_CLASS_NAME,
+    container: CONTAINER_CLASS_NAME,
+    content: CONTENT_CLASS_NAME,
+    iconSpace: ICON_SPACE_CLASS_NAME,
+  },
+  props: {
+    skeleton: SKELETON_PROPS,
+    icon: ICON_PROPS,
+  },
+};

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

@@ -0,0 +1,67 @@
+import React, { FunctionComponent } from 'react';
+import type { ButtonTextProps } from '~/components/Button/ButtonText/types';
+import Pass from '~/components/Pass';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import Icon from '~/components/Icon';
+import constants from './constants';
+import type { Variant } from '~/types';
+import { useButtonTracking } from '~/hooks';
+
+export type { ButtonTextProps };
+
+const ButtonText: FunctionComponent<ButtonTextProps> = function ({
+  id,
+  onClick: inputOnClick,
+  variant = 'solid',
+  iconSpacing,
+  label,
+  size = 48 as unknown as Variant,
+  children = null,
+  icon,
+  iconProps = {},
+  className,
+  disabled = false,
+  submit = false,
+  left = false,
+  isLoading = false,
+  append = null,
+  prepend = null,
+  ...restProps
+}) {
+  const { onClick } = useButtonTracking(id, inputOnClick);
+
+  return (
+    <Pass.Constants
+      constants={constants}
+      className={className as string}
+      variant={variant as Variant}
+      left={left}
+      iconSpacing={iconSpacing as Variant}
+      loading={isLoading}
+      size={size}
+    >
+      {({ classNames, getButtonProps, getIconProps, getSkeletonProps }) => (
+        <button
+          id={id}
+          type={submit ? 'submit' : 'button'}
+          {...getButtonProps(restProps)}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          <span className={classNames.container}>
+            {prepend}
+            <span className={classNames.content}>
+              {label || children}
+              {icon && <span className={classNames.iconSpace} />}
+              {icon && <Icon {...getIconProps({ ...iconProps, icon })} />}
+            </span>
+            {append}
+          </span>
+          <SkeletonLoader {...getSkeletonProps({ isLoading })} />
+        </button>
+      )}
+    </Pass.Constants>
+  );
+};
+
+export default ButtonText;

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

@@ -0,0 +1,62 @@
+import type { Variant } from '~/types';
+import type { HTMLAttributes } from 'react';
+import type { IconProps } from '~/components/Icon/types';
+import type { ButtonOnClick } from '~/types';
+import { BUTTON_CLASS_NAME } from './constants';
+
+export type ButtonTextVariant = keyof typeof BUTTON_CLASS_NAME['@variant'];
+
+export interface ButtonTextProps extends HTMLAttributes<HTMLButtonElement> {
+  id: string;
+  children?: JSX.Element | JSX.Element[];
+  onClick?: ButtonOnClick;
+  className?: string;
+  /**
+   * Icon name
+   */
+  icon?: string;
+  /**
+   * Icon props
+   */
+  iconProps?: IconProps;
+  /**
+   * Button variant name
+   */
+  variant?: ButtonTextVariant;
+  /**
+   * Sets button to disabled
+   */
+  disabled?: boolean;
+  /**
+   * Sets button type to submit insted of button
+   */
+  submit?: boolean;
+  /**
+   * Changes position of the icon to left from right
+   */
+  left?: boolean;
+  /**
+   * Button size
+   */
+  size?: Variant;
+  /**
+   * Button label
+   */
+  label?: JSX.Element | JSX.Element[] | string;
+  /**
+   * Display Loading state
+   */
+  isLoading?: boolean;
+  /**
+   * Icon spacing
+   */
+  iconSpacing?: Variant;
+  /**
+   * Append
+   */
+  append?: JSX.Element | JSX.Element[];
+  /**
+   * Prepend
+   */
+  prepend?: JSX.Element | JSX.Element[];
+}

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

@@ -0,0 +1,26 @@
+import Text from './ButtonText';
+import Link from './ButtonLink';
+import InlineLink from './ButtonInlineLink';
+import Icon from './ButtonIcon';
+import type { ButtonTextVariant } from './ButtonText/types';
+import type { ButtonLinkVariant } from './ButtonLink/types';
+import type { ButtonInlineLinkVariant } from './ButtonInlineLink/types';
+import type { ButtonIconVariant } from './ButtonIcon/types';
+
+export { Text, Link, Icon, InlineLink };
+
+const Button = {
+  Text,
+  Link,
+  Icon,
+  InlineLink,
+};
+
+export type {
+  ButtonTextVariant,
+  ButtonLinkVariant,
+  ButtonIconVariant,
+  ButtonInlineLinkVariant,
+};
+
+export default Button;

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

@@ -0,0 +1,5 @@
+export const SKELETON = {
+  height: 14,
+};
+
+export const CLASSNAME = 'text-style-h w-full';

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

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

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

@@ -0,0 +1,10 @@
+export const SKELETON = {
+  width: 80,
+  height: 12,
+};
+
+export const CLASSNAMES = {
+  option:
+    'text-style-h text-neutral-500 flex flex-row items-center align-center',
+  dot: 'block w-0.75 h-0.75 rounded-full bg-neutral-400 mx-2',
+};

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

@@ -0,0 +1,59 @@
+import React, { FunctionComponent } from 'react';
+import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
+import useOptions from './useOptions';
+import { CLASSNAMES, SKELETON } from './constants';
+import SkeletonLoader from '~/components/SkeletonLoader';
+
+export interface CardOptionsProps {
+  /**
+   * Whether the footer is visible
+   */
+  footer?: boolean;
+  /**
+   * Item footer options
+   */
+  footerOptions?: JSX.Element[];
+  /**
+   * Data is loading state
+   */
+  isLoading?: boolean;
+  /**
+   * Skeleton props for footer options
+   */
+  footerOptionsSkeleton?: SkeletonLoaderProps;
+}
+
+const CardOptions: FunctionComponent<CardOptionsProps> = function ({
+  footer,
+  footerOptions = [],
+  isLoading = false,
+  footerOptionsSkeleton = {},
+}) {
+  const options = useOptions(
+    isLoading,
+    footer,
+    footerOptions,
+    footerOptionsSkeleton,
+  );
+
+  const skeletonProps = footerOptionsSkeleton || SKELETON;
+
+  return (
+    <>
+      {options.map((option) => (
+        <React.Fragment key={option.key}>
+          {option.showDot && <span className={CLASSNAMES.dot} />}
+          <span className={CLASSNAMES.option}>
+            <SkeletonLoader
+              isLoading={isLoading && !!footerOptionsSkeleton}
+              {...skeletonProps}
+              afterLoading={option.content}
+            />
+          </span>
+        </React.Fragment>
+      ))}
+    </>
+  );
+};
+
+export default CardOptions;

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

@@ -0,0 +1,5 @@
+export interface CardFooterOption {
+  key: string;
+  showDot: boolean;
+  content: string | JSX.Element;
+}

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

@@ -0,0 +1,27 @@
+import type { CardFooterOption } from './types';
+import { showDot } from '~/components/Card/helpers';
+import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
+
+export default function useOptions(
+  isLoading?: boolean,
+  footer?: boolean,
+  footerOptions: JSX.Element[] = [],
+  skeletonProps?: SkeletonLoaderProps,
+): CardFooterOption[] {
+  const options =
+    isLoading && skeletonProps
+      ? [
+          {
+            key: 'skeleton',
+            showDot: showDot(0, footer),
+            content: '',
+          },
+        ]
+      : footerOptions.map((option, i) => ({
+          key: `option-${i}`,
+          showDot: showDot(i, footer),
+          content: option,
+        }));
+
+  return options;
+}

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

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