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

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

@@ -0,0 +1,98 @@
+import React, { FunctionComponent } from 'react';
+import useAdvancedProps from '~/components/Popover/Advanced/useAdvancedProps';
+import PopoverMenu from '~/components/PopoverMenu';
+import type { PopoverMenuItemProps } from '~/components/PopoverMenu/PopoverMenuItem';
+import type { AdvancedItem, AdvancedProps } from './types';
+
+export type { AdvancedProps };
+
+const Advanced: FunctionComponent<AdvancedProps> = function ({
+  button,
+  above = false,
+  right = false,
+  onAction,
+  items: originalItems = [],
+  wrapper: ButtonWrapper = ({ children }) => children,
+  search: SearchResults,
+  searchInput: SearchInput,
+  searchPlaceholder = 'Search..',
+  searchDebounceInterval = 200,
+  size = 'xs',
+  variant = 'panel-full',
+  selectedColorVariant = 'default',
+  ...props
+}) {
+  const {
+    classNames,
+    showPopover,
+    button: Button,
+    panel,
+    ref,
+    handleClose,
+    panelStyle,
+    items,
+    debouncedSearch,
+    onSearch,
+    clearSearch,
+    showPanel,
+    value,
+  } = useAdvancedProps({
+    button,
+    above,
+    right,
+    items: originalItems as AdvancedItem[],
+    onAction,
+    searchDebounceInterval,
+    variant,
+  });
+
+  const SearchResultsTag = SearchResults as unknown as FunctionComponent<any>;
+  const SearchInputTag = SearchInput as unknown as FunctionComponent<any>;
+
+  return (
+    <div className={classNames.wrapper}>
+      {showPopover && (
+        <div ref={ref} className={classNames.container}>
+          <div className={classNames.panelWrapper}>
+            <div className={classNames.popover}>
+              <PopoverMenu
+                header={
+                  SearchResults && (
+                    <SearchInputTag
+                      value={value}
+                      placeholder={searchPlaceholder}
+                      onChange={onSearch}
+                    />
+                  )
+                }
+                size={size}
+                items={items as PopoverMenuItemProps[]}
+                selectedColorVariant={selectedColorVariant}
+                onClose={handleClose}
+                {...props}
+                content={
+                  debouncedSearch ? (
+                    <SearchResultsTag
+                      query={debouncedSearch}
+                      clearSearch={clearSearch}
+                      handleClose={handleClose}
+                    />
+                  ) : null
+                }
+                {...props}
+              />
+            </div>
+            {showPanel && (
+              <div style={panelStyle} className={classNames.panel}>
+                {panel({ handleClose })}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      <ButtonWrapper>{Button as JSX.Element}</ButtonWrapper>
+    </div>
+  );
+};
+
+export default Advanced;

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

@@ -0,0 +1,51 @@
+import type { FunctionComponent, MouseEvent } from 'react';
+import type { StringIndexedObject } from '~/types';
+import { PopoverMenuItemSize } from '~/components/PopoverMenu/types';
+import type { PopoverMenuItemSelectedColorVariant } from '~/components/PopoverMenu/PopoverMenuItem/types';
+
+export interface AdvancedItem {
+  action?: {
+    type: 'open_panel';
+    action?: () => JSX.Element;
+    panel?: () => JSX.Element;
+  };
+  name: string;
+  icon?: string;
+  stopPropagation?: boolean;
+}
+
+export interface AdvancedWrapperArgs {
+  children: JSX.Element;
+}
+
+export interface AdvancedProps {
+  button: JSX.Element | JSX.Element[];
+  /**
+   * Position above button rather than below
+   */
+  above?: boolean;
+  /**
+   * Position popover to right-align rather than left-align
+   */
+  right?: boolean;
+  /**
+   * Button wrapper
+   */
+  wrapper?: (args: AdvancedWrapperArgs) => JSX.Element;
+  items?: AdvancedItem[];
+  /**
+   * On action callback
+   */
+  className?: string;
+  onAction?: (action: StringIndexedObject, e: MouseEvent) => void;
+  /**
+   * Size
+   */
+  size?: PopoverMenuItemSize;
+  search?: FunctionComponent;
+  searchInput?: FunctionComponent;
+  searchPlaceholder?: string;
+  searchDebounceInterval?: number;
+  variant?: 'panel-full' | 'panel-short' | 'green' | 'default';
+  selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Advanced/useAdvancedProps.ts

@@ -0,0 +1,232 @@
+import {
+  useState,
+  cloneElement,
+  useCallback,
+  useMemo,
+  type MouseEvent,
+  MutableRefObject,
+} from 'react';
+import clsx from 'clsx';
+import { useDebounce } from 'use-debounce';
+import {
+  VARIANTS,
+  PANEL_STYLE,
+  BASE_CLASS_NAMES,
+  VARIANT_CLASS_NAMES,
+  ACTIONS,
+} from './constants';
+import { emptyPanel, popoverRounding } from './helpers';
+import { useOuterClick, useEscClick } from '~/hooks';
+
+import type {
+  AdvancedItem,
+  AdvancedProps,
+} from '~/components/Popover/Advanced/types';
+import type { StringIndexedObject } from '~/types';
+
+export type AdvancedPropsHookArgs = Omit<
+  AdvancedProps,
+  'wrapper' | 'className' | 'size' | 'searchInput' | 'searchPlaceholder'
+>;
+
+interface AdvancedPropsEvent {
+  target: {
+    value: string;
+  };
+}
+
+export interface AdvancedPanelArgs {
+  handleClose: () => void;
+}
+
+export interface AdvancedPropsHook {
+  classNames: StringIndexedObject;
+  showPopover: boolean;
+  button: JSX.Element | JSX.Element;
+  panel: (args: AdvancedPanelArgs) => JSX.Element;
+  ref: MutableRefObject<any>;
+  handleClose: () => void;
+  panelStyle: StringIndexedObject;
+  items: AdvancedItem[];
+  debouncedSearch: string;
+  onSearch: (event: AdvancedPropsEvent) => void;
+  clearSearch: () => void;
+  showPanel: boolean;
+  value: string;
+}
+
+export default function useAdvancedProps({
+  button,
+  above,
+  right,
+  items: originalItems,
+  onAction,
+  searchDebounceInterval = 100,
+  variant = 'panel-full',
+}: AdvancedPropsHookArgs): AdvancedPropsHook {
+  const [search, setSearch] = useState('');
+  const [debouncedSearch] = useDebounce(search, searchDebounceInterval);
+
+  const [showPopover, setShowPopover] = useState(false);
+  const [panel, setPanel] = useState<() => JSX.Element>(() => emptyPanel);
+  const [selected, setSelected] = useState(-1);
+
+  const onClick = useCallback(
+    () => setShowPopover(!showPopover),
+    [showPopover],
+  );
+
+  /**
+   * Handles close logic
+   */
+  const handleClose = useCallback(() => {
+    if (!showPopover) return;
+    setShowPopover(false);
+    setPanel(() => emptyPanel);
+  }, [showPopover]);
+
+  /**
+   * Handles chained esc key logic
+   */
+  const handleEsc = useCallback(() => {
+    if (debouncedSearch) {
+      setSearch('');
+      return;
+    }
+    if (!showPopover) return;
+    if (!!panel) {
+      setPanel(() => emptyPanel);
+      return;
+    }
+    setShowPopover(false);
+  }, [debouncedSearch, showPopover, panel]);
+
+  /*
+   * Uses hook to call close when the click is outside of modal
+   */
+  const ref = useOuterClick(handleClose);
+
+  /*
+   * Uses hook to call close when the click is outside of modal
+   */
+  useEscClick(handleEsc);
+
+  const newButton = useMemo(
+    () =>
+      cloneElement(button as JSX.Element, {
+        onClick: () => onClick(),
+      }),
+    [button, onClick],
+  );
+
+  const containerClassName = clsx(
+    BASE_CLASS_NAMES.container,
+    above
+      ? VARIANT_CLASS_NAMES.above.container
+      : VARIANT_CLASS_NAMES.below.container,
+    right
+      ? VARIANT_CLASS_NAMES.right.container
+      : VARIANT_CLASS_NAMES.left.container,
+  );
+
+  const popoverClassName = clsx(
+    BASE_CLASS_NAMES.popover,
+    popoverRounding(!!panel, variant, !!right),
+  );
+
+  const positionVariantClassName = right
+    ? VARIANT_CLASS_NAMES.right.panel
+    : VARIANT_CLASS_NAMES.left.panel;
+
+  const panelClassName = clsx(
+    BASE_CLASS_NAMES.panel,
+    above ? VARIANT_CLASS_NAMES.above.panel : VARIANT_CLASS_NAMES.below.panel,
+    (VARIANT_CLASS_NAMES as StringIndexedObject)[variant]?.panel ||
+      positionVariantClassName,
+  );
+
+  const panelStyle = VARIANTS.includes(variant) ? PANEL_STYLE[variant] : {};
+
+  const classNames = {
+    ...BASE_CLASS_NAMES,
+    container: containerClassName,
+    popover: popoverClassName,
+    panel: panelClassName,
+  };
+
+  /**
+   * Enhances items
+
+   */
+  const items = useMemo(
+    () =>
+      (originalItems as AdvancedItem[]).map((itemProps, i) => {
+        const action = itemProps.action || { type: '', panel: null };
+
+        /**
+         * Handles action click
+         * @param {Event} event
+         */
+        const handleClick = (event: MouseEvent) => {
+          if (action.type === ACTIONS.OPEN_PANEL || itemProps.stopPropagation) {
+            event.stopPropagation();
+          }
+
+          if (action.type === ACTIONS.OPEN_PANEL) {
+            setSelected(i);
+
+            if (!!panel && selected === i) {
+              setPanel(() => emptyPanel);
+              setSelected(-1);
+
+              return;
+            }
+
+            setPanel(() => action.panel as () => JSX.Element);
+          }
+
+          if (onAction) {
+            onAction(action, event);
+          }
+        };
+
+        const props = {
+          ...itemProps,
+          onClick: handleClick,
+          selected: i === selected,
+        };
+
+        if (action.type !== ACTIONS.OPEN_PANEL) return props;
+
+        return { ...props, arrow: true };
+      }),
+    [originalItems, selected, onAction, panel],
+  );
+
+  /**
+   * Handles search
+   */
+  const onSearch = (event: AdvancedPropsEvent) => setSearch(event.target.value);
+
+  const value = search;
+
+  const clearSearch = () => setSearch('');
+
+  const showPanel = panel !== emptyPanel;
+
+  return {
+    classNames,
+    showPopover,
+    button: newButton,
+    panel,
+    ref,
+    handleClose,
+    panelStyle,
+    items,
+    debouncedSearch,
+    onSearch,
+    clearSearch,
+    showPanel,
+    value,
+  };
+}

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

@@ -0,0 +1,4 @@
+export const CLASS_NAMES = {
+  baseWrapper:
+    'absolute border border-neutral-200 rounded-lg bg-neutral-000 shadow-popover z-30',
+};

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

@@ -0,0 +1,77 @@
+import React, { FunctionComponent, MutableRefObject } from 'react';
+import useStandardPopover from '~/components/Popover/Standard/useStandardPopover';
+
+export interface StandardHandleCloseArgs {
+  handleClose: () => void;
+}
+
+export type StandardHandleClose = (
+  args: StandardHandleCloseArgs,
+) => JSX.Element | JSX.Element[];
+
+export interface StandardProps {
+  children: StandardHandleClose;
+  button?: JSX.Element | JSX.Element | null;
+  className?: string;
+  /**
+   * Position above button rather than below
+   */
+  above?: boolean;
+  /**
+   * Position popover to right-align rather than left-align
+   */
+  right?: boolean;
+  /**
+   * Visible state
+   */
+  visible?: boolean | number;
+  /**
+   * Y margin shift - tailwind className
+   */
+  yMargin?: string;
+  /**
+   * X margin shift - tailwind className
+   */
+  xMargin?: string;
+}
+
+const Standard: FunctionComponent<StandardProps> = function ({
+  children,
+  above = false,
+  right = false,
+  visible = false,
+  button = null,
+  yMargin,
+  xMargin,
+}) {
+  const {
+    classNames,
+    showPopover,
+    button: Button,
+    ref,
+    handleClose,
+  } = useStandardPopover({
+    above,
+    right,
+    visible,
+    button,
+    yMargin,
+    xMargin,
+  });
+
+  return (
+    <div className={classNames.container}>
+      {Button}
+      {showPopover && (
+        <div
+          ref={ref as MutableRefObject<HTMLDivElement>}
+          className={classNames.wrapper}
+        >
+          {children({ handleClose })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Standard;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Standard/useStandardPopover.ts

@@ -0,0 +1,96 @@
+import {
+  useState,
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  FunctionComponentElement,
+} from 'react';
+
+import { CLASS_NAMES } from './constants';
+import useOuterClick, { type OuterClickHook } from '~/hooks/useOuterClick';
+import useEscClick from '~/hooks/useEscClick';
+import { useClasses } from '~/hooks';
+
+import type { StandardProps } from './index';
+import type { StringIndexedObject } from '~/types';
+
+export type StandardPopoverArgs = Omit<StandardProps, 'children'>;
+
+export interface StandardPopoverHook {
+  handleClose: () => void;
+  classNames: StringIndexedObject;
+  showPopover: boolean;
+  onClick: (e: MouseEvent) => void;
+  button: FunctionComponentElement<any> | null | undefined;
+  ref: OuterClickHook;
+}
+
+export default function useStandardPopover({
+  button,
+  above,
+  right,
+  visible,
+  className,
+  xMargin,
+  yMargin,
+}: StandardPopoverArgs): StandardPopoverHook {
+  const [showPopover, setShowPopover] = useState(visible);
+
+  const onClick = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowPopover(!showPopover);
+  };
+
+  const hidePopover = () => setShowPopover(false);
+
+  /**
+   * Handles close logic
+   */
+  const handleClose = useCallback(() => setShowPopover(false), []);
+
+  /*
+   * Uses hook to call close when the click is outside of modal
+   */
+  const ref = useOuterClick(hidePopover);
+  /*
+   * Uses hook to call close when the click is outside of modal
+   */
+  useEscClick(hidePopover);
+
+  const newButton =
+    button && cloneElement(button, { onClick: (e: MouseEvent) => onClick(e) });
+
+  const y = useMemo(() => {
+    if (yMargin) return yMargin;
+    return above ? 'mb-1.5' : 'mt-1.5';
+  }, [above, yMargin]);
+
+  const classNames = useClasses(CLASS_NAMES, {
+    container: ['relative', className],
+    wrapper: [
+      '.baseWrapper',
+      above ? 'bottom-full' : 'top-full',
+      y,
+      right ? 'right-0' : 'left-0',
+      xMargin || '',
+    ],
+  });
+
+  /**
+   * Update state when prop changes
+   */
+  useEffect(() => {
+    setShowPopover(visible);
+  }, [visible]);
+
+  return {
+    handleClose,
+    classNames,
+    showPopover: showPopover as boolean,
+    onClick,
+    button: newButton,
+    ref,
+  };
+}

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

@@ -0,0 +1,4 @@
+export const CLASS_NAMES = {
+  popover:
+    'absolute border border-neutral-200 rounded-lg bg-neutral-000 shadow-popover z-30 p-2 max-w-100',
+};

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

@@ -0,0 +1,28 @@
+import React, { type MutableRefObject, type FunctionComponent } from 'react';
+import { CLASS_NAMES } from './constants';
+import useStickyPopover from './useStickyPopover';
+
+export interface StickyProps {
+  children: JSX.Element;
+  content: JSX.Element;
+}
+
+const Sticky: FunctionComponent<StickyProps> = function ({
+  children,
+  content,
+}) {
+  const { ref, showPopover, popoverStyle } = useStickyPopover();
+
+  return (
+    <div ref={ref as MutableRefObject<HTMLDivElement>}>
+      {content}
+      {showPopover && (
+        <div style={popoverStyle} className={CLASS_NAMES.popover}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Sticky;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Sticky/useStickyPopover.ts

@@ -0,0 +1,55 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type MutableRefObject,
+  type CSSProperties,
+} from 'react';
+import { useMousePosition } from '~/hooks';
+
+export interface StickyPopoverHook {
+  ref: MutableRefObject<HTMLDivElement | undefined>;
+  showPopover: boolean;
+  popoverStyle: CSSProperties;
+}
+
+export default function useStickyPopover(): StickyPopoverHook {
+  const ref = useRef<HTMLDivElement>();
+  const [showPopover, setShowPopover] = useState(false);
+  const { x, y } = useMousePosition(ref as MutableRefObject<HTMLElement>);
+
+  const handleMouseEnter = useCallback(() => {
+    setShowPopover(true);
+  }, [setShowPopover]);
+
+  const handleMouseLeave = useCallback(() => {
+    setShowPopover(false);
+  }, [setShowPopover]);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.addEventListener('mouseenter', handleMouseEnter);
+      ref.current.addEventListener('mouseleave', handleMouseLeave);
+      return () => {
+        if (ref.current) {
+          ref.current.removeEventListener('mouseenter', handleMouseEnter);
+          ref.current.removeEventListener('mouseleave', handleMouseLeave);
+        }
+      };
+    }
+
+    return () => {};
+  }, [ref]);
+
+  const popoverStyle: CSSProperties = {
+    left: `${x}px`,
+    top: `${y}px`,
+  };
+
+  return {
+    ref,
+    showPopover,
+    popoverStyle,
+  };
+}

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

@@ -0,0 +1,11 @@
+import Standard from './Standard';
+import Advanced from './Advanced';
+import Sticky from './Sticky';
+
+const Popover = {
+  Standard,
+  Advanced,
+  Sticky,
+};
+
+export default Popover;