@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/modal/modal.tsx

@@ -1,311 +0,0 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import {cva} from 'class-variance-authority';
-import {Button} from 'components/button';
-import {Icon} from 'components/icon';
-import {Text} from 'components/typography';
-import {motion, type Transition} from 'framer-motion';
-import {useMediaQuery} from 'hooks/useMediaQuery';
-import {type ComponentProps, createContext, useContext} from 'react';
-import {cn} from 'utils/cn';
-import {Drawer as VaulDrawer} from 'vaul';
-
-const modalDefaultTransition: Transition = {
-  type: 'spring',
-  stiffness: 300,
-  damping: 30,
-};
-
-type ModalContextValue = {
-  breakpoint: string;
-  isDesktop: boolean;
-};
-
-const ModalContext = createContext<ModalContextValue | null>(null);
-
-function useModalContext() {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error('Modal components must be used within a Modal component');
-  }
-  return context;
-}
-
-const modalOverlayVariants = cva(
-  'fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-);
-
-const modalContentVariants = cva(
-  'fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip',
-);
-
-function Modal({
-  breakpoint = '(min-width: 768px)',
-  children,
-  ...props
-}: ComponentProps<typeof DialogPrimitive.Root> & {breakpoint?: string}) {
-  const isDesktop = useMediaQuery(breakpoint);
-
-  const contextValue: ModalContextValue = {
-    breakpoint,
-    isDesktop,
-  };
-
-  const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;
-
-  return (
-    <ModalContext.Provider value={contextValue}>
-      <Root {...props}>{children}</Root>
-    </ModalContext.Provider>
-  );
-}
-
-function ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {
-  const {isDesktop} = useModalContext();
-
-  if (isDesktop) {
-    return <DialogPrimitive.Trigger {...props} />;
-  }
-
-  return <VaulDrawer.Trigger {...props} />;
-}
-
-function ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {
-  const {isDesktop} = useModalContext();
-
-  if (isDesktop) {
-    return <DialogPrimitive.Portal {...props} />;
-  }
-
-  return <VaulDrawer.Portal {...props} />;
-}
-
-function ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {
-  const {isDesktop} = useModalContext();
-
-  if (isDesktop) {
-    return <DialogPrimitive.Close {...props} />;
-  }
-
-  return <VaulDrawer.Close {...props} />;
-}
-
-type ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {
-  animated?: boolean;
-  transition?: Transition;
-};
-
-function ModalOverlay({
-  className,
-  animated = true,
-  transition = modalDefaultTransition,
-  ...props
-}: ModalOverlayProps) {
-  const {isDesktop} = useModalContext();
-
-  if (!isDesktop) {
-    return <VaulDrawer.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;
-  }
-
-  if (animated) {
-    return (
-      <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} asChild {...props}>
-        <motion.div
-          initial={{opacity: 0}}
-          animate={{opacity: 1}}
-          exit={{opacity: 0}}
-          transition={transition}
-        />
-      </DialogPrimitive.Overlay>
-    );
-  }
-
-  return <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;
-}
-
-type ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
-  animated?: boolean;
-  transition?: Transition;
-  overlayClassName?: string;
-};
-
-function ModalContent({
-  className,
-  children,
-  animated = true,
-  transition = modalDefaultTransition,
-  overlayClassName,
-  ...props
-}: ModalContentProps) {
-  const {isDesktop} = useModalContext();
-
-  if (!isDesktop) {
-    return (
-      <ModalPortal>
-        <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />
-        <VaulDrawer.Content
-          className={cn(
-            'fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip',
-            className,
-          )}
-          {...props}
-        >
-          <div className="relative w-full h-full flex flex-col min-h-0">
-            <div className="pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16" />
-            <div className="flex items-center justify-center pt-8 pb-8 shrink-0">
-              <div className="bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40" />
-            </div>
-            {children}
-          </div>
-        </VaulDrawer.Content>
-      </ModalPortal>
-    );
-  }
-
-  const baseClasses = cn(modalContentVariants(), className);
-
-  return (
-    <ModalPortal>
-      <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />
-      <DialogPrimitive.Content className={baseClasses} {...props}>
-        <div className="relative size-full">
-          <div className="pointer-events-none absolute inset-0 shadow-separator-inset rounded-16" />
-          {children}
-        </div>
-      </DialogPrimitive.Content>
-    </ModalPortal>
-  );
-}
-
-type ModalHeaderProps = ComponentProps<'div'> & {
-  title?: string;
-  showEscIndicator?: boolean;
-  showClose?: boolean;
-};
-
-function ModalHeader({
-  className,
-  title,
-  showEscIndicator = true,
-  showClose = true,
-  children,
-  ...props
-}: ModalHeaderProps) {
-  const {isDesktop} = useModalContext();
-
-  return (
-    <div className="flex flex-col w-full shrink-0" {...props}>
-      <div className="bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full">
-        {title ? (
-          <Text size="lg" className="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">
-            {title}
-          </Text>
-        ) : (
-          <div className="flex-1">{children}</div>
-        )}
-        <div className="flex items-center gap-8">
-          {isDesktop && showEscIndicator && (
-            <kbd className="flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4">
-              esc
-            </kbd>
-          )}
-          {showClose && (
-            <ModalClose asChild>
-              <Button
-                variant="transparent"
-                size="xs"
-                className="rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24"
-              >
-                <Icon name="close" />
-              </Button>
-            </ModalClose>
-          )}
-        </div>
-      </div>
-      <div className="bg-border-neutral-strong h-[1px] w-full" />
-    </div>
-  );
-}
-
-function ModalBody({className, children, ...props}: ComponentProps<'div'>) {
-  const {isDesktop} = useModalContext();
-
-  return (
-    <div
-      className={cn(
-        'bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full',
-        isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-function ModalFooter({className, children, ...props}: ComponentProps<'div'>) {
-  return (
-    <div className="flex flex-col w-full shrink-0" {...props}>
-      <div className="bg-border-neutral-strong h-[1px] w-full" />
-      <div className="bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full">
-        <div className={cn('flex items-center gap-16', className)}>{children}</div>
-      </div>
-    </div>
-  );
-}
-
-type ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
-
-function ModalTitle({className, ...props}: ModalTitleProps) {
-  const {isDesktop} = useModalContext();
-
-  const titleClassName = cn(
-    'font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base',
-    className,
-  );
-
-  if (!isDesktop) {
-    return <VaulDrawer.Title className={titleClassName} {...props} />;
-  }
-
-  return <DialogPrimitive.Title className={titleClassName} {...props} />;
-}
-
-type ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
-
-function ModalDescription({className, ...props}: ModalDescriptionProps) {
-  const {isDesktop} = useModalContext();
-
-  const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);
-
-  if (!isDesktop) {
-    return <VaulDrawer.Description className={descClassName} {...props} />;
-  }
-
-  return <DialogPrimitive.Description className={descClassName} {...props} />;
-}
-
-export {
-  Modal,
-  ModalPortal,
-  ModalOverlay,
-  ModalTrigger,
-  ModalClose,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  ModalTitle,
-  ModalDescription,
-  modalContentVariants,
-  modalOverlayVariants,
-  modalDefaultTransition,
-};
-
-export type {
-  ModalContentProps,
-  ModalHeaderProps,
-  ModalOverlayProps,
-  ModalTitleProps,
-  ModalDescriptionProps,
-};

package/src/components/moving-border/index.ts

@@ -1 +0,0 @@
-export * from './moving-border';

package/src/components/moving-border/moving-border.tsx

@@ -1,67 +0,0 @@
-import {
-  motion,
-  useAnimationFrame,
-  useMotionTemplate,
-  useMotionValue,
-  useTransform,
-} from 'framer-motion';
-import type {ComponentProps} from 'react';
-import {useRef} from 'react';
-
-export type MovingBorderProps = {
-  children: React.ReactNode;
-  duration?: number;
-  rx?: string;
-  ry?: string;
-} & ComponentProps<'svg'>;
-
-export function MovingBorder({
-  children,
-  duration = 3000,
-  rx,
-  ry,
-  ...otherProps
-}: MovingBorderProps) {
-  const pathRef = useRef<SVGRectElement | null>(null);
-  const progress = useMotionValue<number>(0);
-
-  useAnimationFrame((time: number) => {
-    const length = pathRef.current?.getTotalLength();
-    if (length) {
-      const pxPerMillisecond = length / duration;
-      progress.set((time * pxPerMillisecond) % length);
-    }
-  });
-
-  const x = useTransform(progress, (val: number) => pathRef.current?.getPointAtLength(val)?.x ?? 0);
-  const y = useTransform(progress, (val: number) => pathRef.current?.getPointAtLength(val)?.y ?? 0);
-
-  const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
-
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        preserveAspectRatio="none"
-        className="absolute h-full w-full"
-        width="100%"
-        height="100%"
-        {...otherProps}
-      >
-        <title>Moving Border</title>
-        <rect fill="none" width="100%" height="100%" rx={rx} ry={ry} ref={pathRef} />
-      </svg>
-      <motion.div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          display: 'inline-block',
-          transform,
-        }}
-      >
-        {children}
-      </motion.div>
-    </>
-  );
-}

package/src/components/popover/index.ts

@@ -1 +0,0 @@
-export * from './popover';

package/src/components/popover/popover.tsx

@@ -1,60 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-function Popover({...props}: ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root {...props} />;
-}
-
-function PopoverTrigger({...props}: ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger {...props} />;
-}
-
-function PopoverAnchor({...props}: ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor {...props} />;
-}
-
-function PopoverPortal({...props}: ComponentProps<typeof PopoverPrimitive.Portal>) {
-  return <PopoverPrimitive.Portal {...props} />;
-}
-
-function PopoverContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPortal>
-      <PopoverPrimitive.Content
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'z-50 rounded-10 bg-background-neutral-overlay shadow-tooltip outline-none',
-          'data-[state=open]:animate-in data-[state=closed]:animate-out',
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          className,
-        )}
-        {...props}
-      />
-    </PopoverPortal>
-  );
-}
-
-function PopoverArrow({className, ...props}: ComponentProps<typeof PopoverPrimitive.Arrow>) {
-  return (
-    <PopoverPrimitive.Arrow
-      className={cn('fill-background-neutral-overlay', className)}
-      {...props}
-    />
-  );
-}
-
-function PopoverClose({...props}: ComponentProps<typeof PopoverPrimitive.Close>) {
-  return <PopoverPrimitive.Close {...props} />;
-}
-
-export {Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose};

package/src/components/renovate.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended",
-    "group:recommended",
-    "monorepo:turbo",
-    "monorepo:vitest",
-    "monorepo:react",
-    "packages:react",
-    "packages:vite",
-    "packages:unitTest",
-    "helpers:pinGitHubActionDigests",
-    "helpers:followTypescriptRc",
-    "customManagers:biomeVersions",
-    "customManagers:dockerfileVersions",
-    "replacements:all",
-    "security:openssf-scorecard",
-    ":configMigration",
-    "abandonments:recommended",
-    ":gitSignOff",
-    "schedule:daily"
-  ]
-}

package/src/components/search/index.ts

@@ -1,28 +0,0 @@
-export {Search, type SearchProps} from './search';
-export {useSearchContext} from './search-context';
-export {SearchInline, type SearchInlineProps} from './search-inline';
-export {
-  SearchContent,
-  type SearchContentProps,
-  SearchEmpty,
-  type SearchEmptyProps,
-  SearchFooter,
-  type SearchFooterProps,
-  SearchGroup,
-  type SearchGroupProps,
-  SearchInput,
-  type SearchInputProps,
-  SearchItem,
-  type SearchItemProps,
-  SearchList,
-  type SearchListProps,
-  SearchSeparator,
-  type SearchSeparatorProps,
-} from './search-modal';
-export {SearchTrigger, type SearchTriggerProps} from './search-trigger';
-
-export {
-  searchDefaultTransition,
-  searchInputVariants,
-  searchTriggerVariants,
-} from './search-variants';

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

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

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