@kanda-libs/ks-component-ts 0.2.247-qa → 0.2.247

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useOuterClick.ts

@@ -1,36 +0,0 @@
-import { useRef, useEffect, MutableRefObject } from 'react';
-
-export type OuterClickHook = MutableRefObject<HTMLElement | undefined>;
-
-/**
- * Hook that detect when the click is outside of the component
- */
-export default function useOuterClick(
-  callback: (e: MouseEvent) => void,
-): OuterClickHook {
-  /**
-   * Stores callback on ref so the effect can be called on mount / unmount
-   */
-  const callbackRef = useRef(callback);
-  const innerRef = useRef<HTMLElement>();
-
-  /**
-   * Sets listeners on mount and removes them on unmount,
-   * calles callback if click target is outside of component suplied with ref
-   */
-  useEffect(() => {
-    const handleClick = (e: MouseEvent) => {
-      if (
-        innerRef.current &&
-        callbackRef.current &&
-        !innerRef.current.contains(e.target as HTMLElement)
-      )
-        callbackRef.current(e);
-    };
-
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, []);
-
-  return innerRef;
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/usePass.ts

@@ -1,22 +0,0 @@
-import useVariants from '~/hooks/useVariants';
-import type { StringIndexedObject } from 'types';
-import { useClasses } from '~/hooks/index';
-import useProps from '~/hooks/useProps';
-
-export type Options = StringIndexedObject;
-
-export default function usePass(options: Options = {}) {
-  const { props, helpers = {} } = options;
-
-  const variants = useVariants(options.variants || {});
-
-  const classNames = useClasses(options.classNames || {}, {
-    variants,
-  });
-
-  return useProps(props || {}, {
-    classNames,
-    variants,
-    helpers,
-  });
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useProps/constants.ts

@@ -1,2 +0,0 @@
-export const VARIANT_REGEX =
-  /@(?<variantPair>(?<variant>[^.]+).(?<value>[^.]+)[.])/g;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useProps/helpers.ts

@@ -1,125 +0,0 @@
-import set from 'lodash.set';
-import { VARIANT_REGEX } from './constants';
-import type { StringIndexedObject, Variants } from 'types';
-
-export const flatObject = (input: StringIndexedObject): StringIndexedObject => {
-  const flat = (
-    res: StringIndexedObject,
-    key: string,
-    val: StringIndexedObject,
-    pre = '',
-  ): StringIndexedObject => {
-    const prefix = [pre, key].filter((v) => v).join('.');
-    return typeof val === 'object'
-      ? Object.keys(val).reduce(
-          (prev, curr) => flat(prev, curr, val[curr], prefix),
-          res,
-        )
-      : Object.assign(res, { [prefix]: val });
-  };
-
-  return Object.keys(input).reduce(
-    (prev, curr) => flat(prev, curr, input[curr]),
-    {},
-  );
-};
-
-export const capitalize = (text: string) => {
-  if (typeof text !== 'string') return '';
-  return text.charAt(0).toUpperCase() + text.slice(1);
-};
-
-interface Match {
-  groups: {
-    variant: string;
-    value: string;
-  };
-}
-
-/**
- * Formats object values
- * @param {Object} object
- * @param {Function} formatter
- * @returns {Object} formated object
- */
-export const formatObject = (
-  object: StringIndexedObject,
-  variants: Variants,
-) => {
-  const flat = flatObject(object);
-
-  const entries = Object.entries(flat).filter(([key]) => {
-    const matches = Array.from(
-      `${key}.`.matchAll(VARIANT_REGEX),
-    ) as unknown as Match[];
-
-    return matches.every((match) => {
-      const { variant, value } = match.groups;
-
-      return (
-        value === `${variants[variant]}` ||
-        value === `${Boolean(variants[variant])}`
-      );
-    });
-  });
-
-  const replaced = entries.map(([key, value]) => [
-    `${key}.`.replace(VARIANT_REGEX, '').slice(0, -1),
-    value,
-  ]);
-
-  return replaced.reduce(
-    (prev, [key, value]) => set(prev, key as string, value),
-    {},
-  );
-};
-
-/**
- * Creates a function name from className
- * @param {String} className
- * @returns {String} function name
- */
-export const getFunctionName = (className: string) =>
-  `get${capitalize(className)}Props`;
-
-/**
- * Create getters
- * @param {Object} formattedProps
- * @param {Object} classNames
- * @param {Object} helpers
- * @returns {Object} getter functions
- */
-export const createGetters = (
-  formattedProps: StringIndexedObject,
-  classNames: StringIndexedObject,
-  helpers: StringIndexedObject,
-) => {
-  const allKeys = [
-    ...new Set([...Object.keys(formattedProps), ...Object.keys(classNames)]),
-  ];
-
-  return Object.fromEntries(
-    allKeys.map((className) => [
-      getFunctionName(className),
-      (viewProps = {}) => {
-        const helper = helpers?.[className];
-
-        const initialProps = {
-          ...formattedProps?.[className],
-          ...(classNames[className] && { className: classNames[className] }),
-        };
-
-        if (typeof helper === 'function')
-          return helper({}, initialProps, viewProps);
-
-        return Object.entries(viewProps).reduce((prevProps, [key, value]) => {
-          if (typeof helper?.[key] === 'function') {
-            return helper?.[key]({ key }, prevProps, value);
-          }
-
-          return { ...prevProps, [key]: value };
-        }, initialProps);
-      },
-    ]),
-  );
-};

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useProps/index.ts

@@ -1,40 +0,0 @@
-import type { StringIndexedObject, Variants } from 'types';
-import { createGetters, formatObject } from './helpers';
-import type { HTMLAttributes } from 'react';
-import type { SkeletonLoaderProps } from '~/components/SkeletonLoader';
-import type { IconProps } from '~/components/Icon/types';
-
-export interface Options {
-  helpers: object;
-  variants: Variants;
-  classNames: StringIndexedObject;
-}
-
-interface PropsGetters {
-  getButtonProps: (
-    args: StringIndexedObject,
-  ) => HTMLAttributes<HTMLButtonElement>;
-  getIconProps: (args: StringIndexedObject) => IconProps;
-  getSkeletonProps: (args: SkeletonLoaderProps) => IconProps;
-}
-
-export interface PropsHook extends PropsGetters {
-  classNames: StringIndexedObject;
-}
-
-export default function useProps(props: object, options: Options): PropsHook {
-  const { helpers, variants, classNames } = options;
-
-  const formattedProps = formatObject(props, variants);
-
-  const getters = createGetters(
-    formattedProps,
-    classNames,
-    helpers,
-  ) as unknown as PropsGetters;
-
-  return {
-    classNames,
-    ...getters,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/CloseButton/index.tsx

@@ -1,24 +0,0 @@
-import React, { type FunctionComponent } from 'react';
-import * as Button from '~/components/Button';
-import type { ButtonOnClick } from '~/types';
-
-export interface CloseButtonProps {
-  closeToast: ButtonOnClick;
-}
-
-const CloseButton: FunctionComponent<CloseButtonProps> = function ({
-  closeToast,
-}) {
-  return (
-    <Button.Icon
-      id="hide-toast"
-      icon="close"
-      variant="ghost-grey"
-      size="32-16"
-      onClick={closeToast}
-      className="min-w-8"
-    />
-  );
-};
-
-export default CloseButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/Message/constants.ts

@@ -1,14 +0,0 @@
-export const DEFAULT_ICON_PROPS = {
-  size: 24,
-  icon: 'info',
-  stroke: 'neutral-300',
-  className: 'my-auto mr-3',
-};
-
-export const DEFAULT_CONTAINER_PROPS = {
-  className: 'flex flex-row w-full',
-};
-
-export const DEFAULT_SPAN_PROPS = {
-  className: 'text-style-g-em text-neutral-900 my-auto',
-};

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/Message/index.tsx

@@ -1,35 +0,0 @@
-import React, { FunctionComponent, HTMLProps } from 'react';
-import useMessage from './useMessage';
-import Icon from '~/components/Icon';
-import type { IconProps } from '~/components/Icon/types';
-
-export interface MessageProps {
-  message: string;
-  showIcon?: boolean;
-  icon?: IconProps;
-  container?: HTMLProps<HTMLDivElement>;
-  span?: HTMLProps<HTMLDivElement>;
-}
-
-const Message: FunctionComponent<MessageProps> = function ({
-  message,
-  showIcon = false,
-  icon,
-  container,
-  span,
-}) {
-  const { iconProps, containerProps, spanProps } = useMessage(
-    icon,
-    container,
-    span,
-  );
-
-  return (
-    <div {...containerProps}>
-      {showIcon && <Icon {...iconProps} />}
-      <span {...spanProps}>{message}</span>
-    </div>
-  );
-};
-
-export default Message;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/Message/useMessage.ts

@@ -1,40 +0,0 @@
-import type { HTMLProps } from 'react';
-import {
-  DEFAULT_ICON_PROPS,
-  DEFAULT_CONTAINER_PROPS,
-  DEFAULT_SPAN_PROPS,
-} from './constants';
-import type { IconProps } from '~/components/Icon/types';
-
-export interface Hook {
-  iconProps: IconProps;
-  containerProps: HTMLProps<HTMLDivElement>;
-  spanProps: HTMLProps<HTMLDivElement>;
-}
-
-export default function useMessage(
-  icon: IconProps | null = null,
-  container: HTMLProps<HTMLDivElement> | null = null,
-  span: HTMLProps<HTMLDivElement> | null = null,
-): Hook {
-  const iconProps = {
-    ...DEFAULT_ICON_PROPS,
-    ...(icon || {}),
-  };
-
-  const containerProps = {
-    ...DEFAULT_CONTAINER_PROPS,
-    ...(container || {}),
-  };
-
-  const spanProps = {
-    ...DEFAULT_SPAN_PROPS,
-    ...(span || {}),
-  };
-
-  return {
-    iconProps,
-    containerProps,
-    spanProps,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/constants.ts

@@ -1,56 +0,0 @@
-const BASE_PROPS = {
-  showIcon: true,
-  container: {
-    className: 'flex flex-row w-full',
-  },
-  icon: {
-    size: 24,
-    className: 'my-auto mr-3',
-  },
-  span: {
-    className: 'text-style-g-em text-neutral-900 my-auto',
-  },
-};
-
-const INFO_MESSAGE_PROPS = {
-  ...BASE_PROPS,
-  icon: {
-    ...BASE_PROPS.icon,
-    icon: 'info',
-    stroke: 'neutral-600',
-  },
-};
-
-const ERROR_MESSAGE_PROPS = {
-  ...BASE_PROPS,
-  icon: {
-    ...BASE_PROPS.icon,
-    icon: 'error',
-    stroke: 'red-200',
-  },
-};
-
-const SUCCESS_MESSAGE_PROPS = {
-  ...BASE_PROPS,
-  icon: {
-    ...BASE_PROPS.icon,
-    icon: 'check',
-    stroke: 'turquoise-300',
-  },
-};
-
-const WARNING_MESSAGE_PROPS = {
-  ...BASE_PROPS,
-  icon: {
-    ...BASE_PROPS.icon,
-    icon: 'warning',
-    stroke: 'orange-200',
-  },
-};
-
-export const TOAST_MESSAGE_FUNCTION_PROPS = {
-  info: INFO_MESSAGE_PROPS,
-  error: ERROR_MESSAGE_PROPS,
-  success: SUCCESS_MESSAGE_PROPS,
-  warning: WARNING_MESSAGE_PROPS,
-};

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/index.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { toast, type ToastOptions } from 'react-toastify';
-import type { ToastContent } from 'react-toastify/dist/types';
-import Message, { type MessageProps } from './Message';
-import { TOAST_MESSAGE_FUNCTION_PROPS } from './constants';
-import type {
-  ToastMessageFunction,
-  ToastMessageFunctionType,
-  ToastId,
-} from './types';
-
-export interface ToastHook {
-  toast: (content: ToastContent, options?: ToastOptions) => ToastId;
-  dismiss: (id: ToastId) => void;
-  showInfo: ToastMessageFunction;
-  showError: ToastMessageFunction;
-  showWarning: ToastMessageFunction;
-  showSuccess: ToastMessageFunction;
-}
-
-export default function useToast(): ToastHook {
-  function createToastMessageFunction(
-    type: ToastMessageFunctionType,
-  ): ToastMessageFunction {
-    return (
-      message: string,
-      messageProps: Omit<MessageProps, 'message'> = {},
-      options: ToastOptions = {},
-    ): ToastId => {
-      const props = {
-        ...TOAST_MESSAGE_FUNCTION_PROPS[type],
-        ...messageProps,
-      };
-
-      return toast[type](<Message message={message} {...props} />, options);
-    };
-  }
-
-  const dismiss = toast.dismiss;
-
-  return {
-    toast,
-    dismiss,
-    showInfo: createToastMessageFunction('info'),
-    showError: createToastMessageFunction('error'),
-    showWarning: createToastMessageFunction('warning'),
-    showSuccess: createToastMessageFunction('success'),
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useToast/types.d.ts

@@ -1,14 +0,0 @@
-import { Id, ToastOptions } from 'react-toastify';
-import { MessageProps } from '~/hooks/useToast/Message';
-import { TOAST_MESSAGE_FUNCTION_PROPS } from '~/hooks/useToast/constants';
-
-export type ToastId = Id;
-
-export type ToastMessageFunction = (
-  message: string,
-  messageProps?: Omit<MessageProps, 'message'>,
-  options?: ToastOptions,
-) => ToastId;
-
-export type ToastMessageFunctionType =
-  keyof typeof TOAST_MESSAGE_FUNCTION_PROPS;

package/app/.yalc/@kanda-libs/ks-design-library/src/hooks/useVariants.ts

@@ -1,22 +0,0 @@
-import { useContext } from 'react';
-import type { Variants } from '~/types';
-import { Context } from '~/components/LoadingProvider/Context';
-import useIsDesktop from '~/hooks/useIsDesktop';
-
-export interface Hook extends Variants {
-  media: 'desktop' | 'mobile';
-  loading: boolean;
-}
-
-export default function useVariants(variants: Variants): Hook {
-  const isDesktop = useIsDesktop();
-  const loading = useContext(Context);
-
-  const media = isDesktop ? 'desktop' : 'mobile';
-
-  return {
-    media,
-    loading,
-    ...variants,
-  };
-}

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

@@ -1,17 +0,0 @@
-import Logo from '~/components/Logo';
-
-export * from './components';
-export * from './hooks';
-
-export { Logo };
-
-export type { IconProps } from '~/components/Icon/types';
-
-export type {
-  ButtonTextVariant,
-  ButtonLinkVariant,
-  ButtonIconVariant,
-  ButtonInlineLinkVariant,
-} from '~/components/Button';
-
-export type { FuseHit } from '~/hooks/useFuse';

package/app/.yalc/@kanda-libs/ks-design-library/src/moduleTypes.d.ts

@@ -1 +0,0 @@
-declare module '*.svg';