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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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