@shipfox/react-ui 0.13.0 → 0.15.0

package/src/components/search/search-context.tsx

@@ -0,0 +1,78 @@
+import {createContext, useCallback, useContext, useEffect, useState} from 'react';
+import {SHORTCUT_KEY_REGEX} from './search-variants';
+
+export type SearchContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+};
+
+export const SearchContext = createContext<SearchContextValue | null>(null);
+
+export function useSearchContext() {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error('Search components must be used within a Search component');
+  }
+  return context;
+}
+
+export function useControllableState<T>(
+  controlledValue: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void,
+): [T, (value: T) => void] {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const setValue = useCallback(
+    (newValue: T) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange],
+  );
+
+  return [value, setValue];
+}
+
+export function useKeyboardShortcut(shortcutKey: string | undefined, onTrigger: () => void) {
+  useEffect(() => {
+    if (!shortcutKey) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const key = shortcutKey.toLowerCase();
+      const isMetaKey = key.startsWith('meta+') || key.startsWith('cmd+') || key.startsWith('⌘');
+      const isCtrlKey = key.startsWith('ctrl+');
+      const targetKey = key.replace(SHORTCUT_KEY_REGEX, '');
+
+      const shouldTrigger =
+        (isMetaKey && e.metaKey && e.key.toLowerCase() === targetKey) ||
+        (isCtrlKey && e.ctrlKey && e.key.toLowerCase() === targetKey) ||
+        (!isMetaKey && !isCtrlKey && e.key.toLowerCase() === targetKey && !e.metaKey && !e.ctrlKey);
+
+      if (!shouldTrigger) return;
+
+      if (!isMetaKey && !isCtrlKey) {
+        const target = e.target as HTMLElement;
+        if (
+          target.tagName === 'INPUT' ||
+          target.tagName === 'TEXTAREA' ||
+          target.isContentEditable
+        ) {
+          return;
+        }
+      }
+
+      e.preventDefault();
+      onTrigger();
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [shortcutKey, onTrigger]);
+}

package/src/components/search/search-inline.tsx

@@ -0,0 +1,107 @@
+import type {VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {useCallback, useRef, useState} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon';
+import {searchInputVariants} from './search-variants';
+
+export type SearchInlineProps = Omit<ComponentProps<'input'>, 'size'> &
+  VariantProps<typeof searchInputVariants> & {
+    showClearButton?: boolean;
+    onClear?: () => void;
+  };
+
+export function SearchInline({
+  className,
+  variant,
+  size,
+  radius,
+  value,
+  onChange,
+  onClear,
+  showClearButton = true,
+  ...props
+}: SearchInlineProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [internalValue, setInternalValue] = useState('');
+  const isControlled = value !== undefined;
+  const inputValue = isControlled ? value : internalValue;
+  const hasValue = Boolean(inputValue);
+  const isSmall = size === 'small';
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    },
+    [isControlled, onChange],
+  );
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue('');
+    }
+
+    if (onChange && inputRef.current) {
+      inputRef.current.value = '';
+      const syntheticEvent = {
+        target: inputRef.current,
+        currentTarget: inputRef.current,
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(syntheticEvent);
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  }, [isControlled, onChange, onClear]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape' && hasValue) {
+        e.preventDefault();
+        handleClear();
+      }
+    },
+    [hasValue, handleClear],
+  );
+
+  return (
+    <div
+      data-slot="search-inline"
+      className={cn(searchInputVariants({variant, size, radius}), className)}
+    >
+      <Icon
+        name="searchLine"
+        className={cn('shrink-0 text-foreground-neutral-muted', isSmall ? 'size-14' : 'size-16')}
+      />
+      <input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'flex-1 bg-transparent outline-none min-w-0',
+          'text-foreground-neutral-base',
+          'placeholder:text-foreground-neutral-muted',
+          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',
+        )}
+        {...props}
+      />
+      {showClearButton && hasValue && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className={cn(
+            'shrink-0 cursor-pointer rounded-4 p-2 -mx-2',
+            'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors',
+          )}
+          aria-label="Clear search"
+        >
+          <Icon name="closeLine" className="size-16" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/search/search-modal.tsx

@@ -0,0 +1,198 @@
+import {Command as CommandPrimitive} from 'cmdk';
+import type {ComponentProps, ReactNode} from 'react';
+import {useCallback} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon';
+import {Kbd} from '../kbd';
+import {Modal, ModalBody, ModalContent, type ModalContentProps} from '../modal/modal';
+import {useSearchContext} from './search-context';
+
+export type SearchContentProps = {
+  breakpoint?: string;
+} & Omit<ModalContentProps, 'open' | 'onOpenChange'>;
+
+export function SearchContent({
+  breakpoint = '(min-width: 768px)',
+  className,
+  children,
+  overlayClassName,
+  onEscapeKeyDown,
+  ...props
+}: SearchContentProps) {
+  const {open, setOpen, searchValue, setSearchValue} = useSearchContext();
+
+  const handleEscapeKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (searchValue) {
+        event.preventDefault();
+        setSearchValue('');
+      } else {
+        onEscapeKeyDown?.(event);
+      }
+    },
+    [searchValue, setSearchValue, onEscapeKeyDown],
+  );
+
+  return (
+    <Modal open={open} onOpenChange={setOpen} breakpoint={breakpoint}>
+      <ModalContent
+        data-slot="search-content"
+        className={cn('top-[15%]! translate-y-0!', className)}
+        overlayClassName={cn('backdrop-blur-sm', overlayClassName)}
+        onEscapeKeyDown={handleEscapeKeyDown}
+        {...props}
+      >
+        <ModalBody className="flex flex-col p-0 min-h-0 overflow-hidden md:overflow-clip">
+          {children}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export type SearchInputProps = Omit<
+  ComponentProps<typeof CommandPrimitive.Input>,
+  'value' | 'onValueChange'
+>;
+
+export function SearchInput({className, ...props}: SearchInputProps) {
+  const {open, searchValue, setSearchValue} = useSearchContext();
+
+  return (
+    <div className="w-full shrink-0 flex items-center gap-8 border-b border-border-neutral-strong px-16 py-12">
+      <Icon name="searchLine" className="size-16 shrink-0 text-foreground-neutral-muted" />
+      <CommandPrimitive.Input
+        data-slot="search-input"
+        autoFocus={open}
+        value={searchValue}
+        onValueChange={setSearchValue}
+        className={cn(
+          'flex-1 bg-transparent text-sm leading-20 outline-none',
+          'placeholder:text-foreground-neutral-muted',
+          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',
+          className,
+        )}
+        {...props}
+      />
+      <Kbd>Esc</Kbd>
+    </div>
+  );
+}
+
+export type SearchListProps = ComponentProps<typeof CommandPrimitive.List>;
+
+export function SearchList({className, ...props}: SearchListProps) {
+  return (
+    <CommandPrimitive.List
+      data-slot="search-list"
+      className={cn(
+        'flex-1 min-h-0 w-full overflow-y-auto overflow-x-hidden px-8 py-4 scrollbar',
+        'md:max-h-400',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type SearchEmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
+
+export function SearchEmpty({className, ...props}: SearchEmptyProps) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="search-empty"
+      className={cn('py-32 text-center text-sm text-foreground-neutral-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export type SearchGroupProps = ComponentProps<typeof CommandPrimitive.Group>;
+
+export function SearchGroup({className, ...props}: SearchGroupProps) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="search-group"
+      className={cn(
+        'overflow-hidden',
+        '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4',
+        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20',
+        '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle',
+        '[&_[cmdk-group-heading]]:select-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type SearchItemProps = ComponentProps<typeof CommandPrimitive.Item> & {
+  icon?: ReactNode;
+  description?: string;
+};
+
+export function SearchItem({className, children, icon, description, ...props}: SearchItemProps) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="search-item"
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-12 rounded-8 p-8',
+        'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
+        'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled',
+        className,
+      )}
+      {...props}
+    >
+      {icon && <span className="shrink-0 text-foreground-neutral-muted">{icon}</span>}
+      <div className="flex-1 min-w-0">
+        <div className="truncate">{children}</div>
+        {description && (
+          <div className="truncate text-xs text-foreground-neutral-muted">{description}</div>
+        )}
+      </div>
+    </CommandPrimitive.Item>
+  );
+}
+
+export type SearchSeparatorProps = ComponentProps<typeof CommandPrimitive.Separator>;
+
+export function SearchSeparator({className, ...props}: SearchSeparatorProps) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="search-separator"
+      className={cn('my-8 h-px bg-border-neutral-base', className)}
+      {...props}
+    />
+  );
+}
+
+export type SearchFooterProps = ComponentProps<'div'>;
+
+export function SearchFooter({className, ...props}: SearchFooterProps) {
+  return (
+    <div
+      data-slot="search-footer"
+      className={cn(
+        'w-full shrink-0 flex items-center justify-end gap-12 px-16 py-12',
+        'border-t border-border-neutral-strong',
+        'bg-background-components-base',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-8">
+        <span className="text-xs font-medium text-foreground-neutral-subtle">Navigation</span>
+        <div className="flex items-center gap-4">
+          <Kbd>↓</Kbd>
+          <Kbd>↑</Kbd>
+        </div>
+      </div>
+      <div className="h-12 w-px bg-border-neutral-strong" />
+      <div className="flex items-center gap-8">
+        <span className="text-xs font-medium text-foreground-neutral-subtle">Open result</span>
+        <Kbd>↵</Kbd>
+      </div>
+    </div>
+  );
+}

package/src/components/search/search-trigger.tsx

@@ -0,0 +1,47 @@
+import type {VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon';
+import {Kbd} from '../kbd';
+import {useSearchContext} from './search-context';
+import {searchTriggerVariants} from './search-variants';
+
+export type SearchTriggerProps = ComponentProps<'button'> &
+  VariantProps<typeof searchTriggerVariants> & {
+    placeholder?: string;
+    shortcut?: string;
+  };
+
+export function SearchTrigger({
+  className,
+  variant,
+  size,
+  radius,
+  placeholder = 'Search',
+  shortcut = '⌘K',
+  ...props
+}: SearchTriggerProps) {
+  const {setOpen} = useSearchContext();
+  const isSmall = size === 'small';
+
+  return (
+    <button
+      type="button"
+      data-slot="search-trigger"
+      onClick={() => setOpen(true)}
+      className={cn(searchTriggerVariants({variant, size, radius}), className)}
+      {...props}
+    >
+      <Icon name="searchLine" className={cn('shrink-0', isSmall ? 'size-14' : 'size-16')} />
+      <span className="flex-1 text-left truncate">{placeholder}</span>
+      <Kbd
+        className={cn(
+          isSmall && 'h-16 min-w-16 px-4 text-[10px]',
+          radius === 'rounded' && 'rounded-full',
+        )}
+      >
+        {shortcut}
+      </Kbd>
+    </button>
+  );
+}

package/src/components/search/search-variants.ts

@@ -0,0 +1,88 @@
+import {cva} from 'class-variance-authority';
+import type {Transition} from 'framer-motion';
+
+const sharedInputStyles = [
+  'inline-flex items-center gap-8',
+  'text-sm leading-20',
+  'transition-[color,box-shadow,background-color] outline-none',
+];
+
+const variantStyles = {
+  primary: {
+    base: ['bg-background-field-base', 'shadow-button-neutral'],
+    focus: 'focus-within:shadow-border-interactive-with-active',
+    hover: 'hover:bg-background-field-hover',
+    focusVisible: 'focus-visible:shadow-border-interactive-with-active',
+  },
+  secondary: {
+    base: ['bg-background-field-component', 'border border-border-neutral-strong'],
+    focus: 'focus-within:shadow-border-interactive-with-active',
+    hover: 'hover:bg-background-field-component-hover',
+    focusVisible: 'focus-visible:shadow-border-interactive-with-active',
+  },
+};
+
+const sizeStyles = {
+  base: 'h-32 px-8 py-6',
+  small: 'h-28 px-8 py-4',
+};
+
+const radiusStyles = {
+  rounded: 'rounded-full',
+  squared: 'rounded-6',
+};
+
+export const searchInputVariants = cva(sharedInputStyles, {
+  variants: {
+    variant: {
+      primary: [...variantStyles.primary.base, variantStyles.primary.focus],
+      secondary: [...variantStyles.secondary.base, variantStyles.secondary.focus],
+    },
+    size: sizeStyles,
+    radius: radiusStyles,
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'base',
+    radius: 'squared',
+  },
+});
+
+export const searchTriggerVariants = cva(
+  [
+    ...sharedInputStyles,
+    'cursor-pointer text-foreground-neutral-muted',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          ...variantStyles.primary.base,
+          variantStyles.primary.hover,
+          variantStyles.primary.focusVisible,
+        ],
+        secondary: [
+          ...variantStyles.secondary.base,
+          variantStyles.secondary.hover,
+          variantStyles.secondary.focusVisible,
+        ],
+      },
+      size: sizeStyles,
+      radius: radiusStyles,
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'base',
+      radius: 'squared',
+    },
+  },
+);
+
+export const searchDefaultTransition: Transition = {
+  type: 'spring',
+  stiffness: 400,
+  damping: 30,
+};
+
+export const SHORTCUT_KEY_REGEX = /^(meta\+|cmd\+|ctrl\+|⌘\+?)/i;