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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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