@shipfox/react-ui 0.12.0 → 0.13.0

package/src/components/modal/modal.stories.tsx

@@ -140,7 +140,7 @@ export const ImportForm: Story = {
           <ModalTrigger asChild>
             <Button>Import past jobs from GitHub</Button>
           </ModalTrigger>
-          <ModalContent aria-describedby={undefined}>
+          <ModalContent aria-describedby={undefined} overlayClassName="bg-background-modal-overlay">
             <ModalTitle className="sr-only">Import past jobs from GitHub</ModalTitle>
             <ModalHeader title="Import past jobs from GitHub" />
             <ModalBody className="gap-20">
@@ -221,7 +221,7 @@ export const GithubActions: Story = {
           <ModalTrigger asChild>
             <Button>Run GitHub Actions on Shipfox</Button>
           </ModalTrigger>
-          <ModalContent aria-describedby={undefined}>
+          <ModalContent aria-describedby={undefined} overlayClassName="bg-background-modal-overlay">
             <ModalTitle className="sr-only">Run GitHub Actions on Shipfox</ModalTitle>
             <ModalHeader title="Run GitHub Actions on Shipfox" />
             <ModalBody className="gap-32">

package/src/components/modal/modal.tsx

@@ -125,6 +125,7 @@ function ModalOverlay({
 type ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
   animated?: boolean;
   transition?: Transition;
+  overlayClassName?: string;
 };
 
 function ModalContent({
@@ -132,6 +133,7 @@ function ModalContent({
   children,
   animated = true,
   transition = modalDefaultTransition,
+  overlayClassName,
   ...props
 }: ModalContentProps) {
   const {isDesktop} = useModalContext();
@@ -139,7 +141,7 @@ function ModalContent({
   if (!isDesktop) {
     return (
       <ModalPortal>
-        <ModalOverlay animated={animated} transition={transition} />
+        <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',
@@ -163,7 +165,7 @@ function ModalContent({
 
   return (
     <ModalPortal>
-      <ModalOverlay animated={animated} transition={transition} />
+      <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" />

package/src/components/tabs/index.ts

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

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,100 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
+import {Tabs, TabsContent, TabsContents, TabsList, TabsTrigger} from '.';
+
+const meta = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {defaultValue: 'analytics'} as never,
+  render: () => (
+    <div className="bg-background-neutral-background p-24 w-[80vw]">
+      <Tabs defaultValue="analytics">
+        <TabsList className="gap-12 border-b border-neutral-strong">
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+          <TabsTrigger value="jobs">Jobs</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  args: {value: 'analytics', onValueChange: () => undefined} as never,
+  render: () => {
+    const [value, setValue] = useState('analytics');
+    return (
+      <div className="bg-background-neutral-background p-24 w-[80vw]">
+        <Tabs value={value} onValueChange={setValue}>
+          <TabsList className="gap-12 border-b border-neutral-strong">
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="jobs">Jobs</TabsTrigger>
+          </TabsList>
+          <TabsContents>
+            <TabsContent value="analytics">
+              <div className="py-16">
+                <p className="text-foreground-neutral-base">
+                  Analytics content - Current value: {value}
+                </p>
+              </div>
+            </TabsContent>
+            <TabsContent value="jobs">
+              <div className="py-16">
+                <p className="text-foreground-neutral-base">
+                  Jobs content - Current value: {value}
+                </p>
+              </div>
+            </TabsContent>
+          </TabsContents>
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const MultipleTabs: Story = {
+  args: {defaultValue: 'tab1'} as never,
+  render: () => (
+    <div className="bg-background-neutral-background p-24 w-[80vw]">
+      <Tabs defaultValue="tab1">
+        <TabsList className="gap-12 border-b border-neutral-strong">
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+          <TabsTrigger value="tab4">Tab 4</TabsTrigger>
+        </TabsList>
+        <TabsContents>
+          <TabsContent value="tab1">
+            <div className="py-16">
+              <p className="text-foreground-neutral-base">Content for Tab 1</p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab2">
+            <div className="py-16">
+              <p className="text-foreground-neutral-base">Content for Tab 2</p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab3">
+            <div className="py-16">
+              <p className="text-foreground-neutral-base">Content for Tab 3</p>
+            </div>
+          </TabsContent>
+          <TabsContent value="tab4">
+            <div className="py-16">
+              <p className="text-foreground-neutral-base">Content for Tab 4</p>
+            </div>
+          </TabsContent>
+        </TabsContents>
+      </Tabs>
+    </div>
+  ),
+};

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,380 @@
+import {type HTMLMotionProps, motion, type Transition} from 'framer-motion';
+import {
+  Children,
+  type ComponentProps,
+  createContext,
+  forwardRef,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {cn} from 'utils/cn';
+import {debounce} from 'utils/debounce';
+
+type TabsContextType<T extends string = string> = {
+  activeValue: T;
+  handleValueChange: (value: T) => void;
+  registerTrigger: (value: string, node: HTMLElement | null) => void;
+  getTriggerElement: (value: string) => HTMLElement | undefined;
+  getAllTriggerValues: () => string[];
+};
+
+const TabsContext = createContext<TabsContextType<string> | undefined>(undefined);
+
+function useTabs<T extends string = string>(): TabsContextType<T> {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error('useTabs must be used within a Tabs component');
+  }
+  return context as unknown as TabsContextType<T>;
+}
+
+type BaseTabsProps = ComponentProps<'div'> & {
+  children: ReactNode;
+};
+
+type UnControlledTabsProps<T extends string = string> = BaseTabsProps & {
+  defaultValue?: T;
+  value?: never;
+  onValueChange?: never;
+};
+
+type ControlledTabsProps<T extends string = string> = BaseTabsProps & {
+  value: T;
+  onValueChange?: (value: T) => void;
+  defaultValue?: never;
+};
+
+type TabsProps<T extends string = string> = UnControlledTabsProps<T> | ControlledTabsProps<T>;
+
+function Tabs<T extends string = string>({
+  defaultValue,
+  value,
+  onValueChange,
+  children,
+  className,
+  ...props
+}: TabsProps<T>) {
+  const [activeValue, setActiveValue] = useState<T | undefined>(defaultValue ?? undefined);
+  const triggersRef = useRef(new Map<string, HTMLElement>());
+  const initialSet = useRef(false);
+  const isControlled = value !== undefined;
+
+  useEffect(() => {
+    if (
+      !isControlled &&
+      activeValue === undefined &&
+      triggersRef.current.size > 0 &&
+      !initialSet.current
+    ) {
+      const firstTab = Array.from(triggersRef.current.keys())[0];
+      setActiveValue(firstTab as T);
+      initialSet.current = true;
+    }
+  }, [activeValue, isControlled]);
+
+  const registerTrigger = useCallback(
+    (value: string, node: HTMLElement | null) => {
+      if (node) {
+        triggersRef.current.set(value, node);
+        if (!isControlled && activeValue === undefined && !initialSet.current) {
+          setActiveValue(value as T);
+          initialSet.current = true;
+        }
+      } else {
+        triggersRef.current.delete(value);
+      }
+    },
+    [isControlled, activeValue],
+  );
+
+  const handleValueChange = useCallback(
+    (val: T) => {
+      if (!isControlled) setActiveValue(val);
+      else onValueChange?.(val);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const getTriggerElement = useCallback((val: string) => {
+    return triggersRef.current.get(val);
+  }, []);
+
+  const getAllTriggerValues = useCallback(() => {
+    return Array.from(triggersRef.current.keys());
+  }, []);
+
+  const resolvedActiveValue: T = useMemo(() => {
+    if (value !== undefined) return value;
+    if (activeValue !== undefined) return activeValue;
+    const firstKey = Array.from(triggersRef.current.keys())[0];
+    return (firstKey ?? '') as T;
+  }, [value, activeValue]);
+
+  return (
+    <TabsContext.Provider
+      value={{
+        activeValue: resolvedActiveValue as string,
+        handleValueChange: handleValueChange as (value: string) => void,
+        registerTrigger,
+        getTriggerElement,
+        getAllTriggerValues,
+      }}
+    >
+      <div
+        data-slot="tabs"
+        className={cn('flex flex-col gap-2', className)}
+        {...(props as ComponentProps<'div'>)}
+      >
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+type TabsListProps = ComponentProps<'div'> & {
+  children: ReactNode;
+  activeClassName?: string;
+  transition?: Transition;
+};
+
+function TabsList({
+  children,
+  className,
+  activeClassName,
+  transition = {
+    type: 'spring',
+    stiffness: 400,
+    damping: 30,
+  },
+  ...props
+}: TabsListProps) {
+  const {activeValue, getTriggerElement} = useTabs();
+  const [indicatorStyle, setIndicatorStyle] = useState<{
+    left: number;
+    width: number;
+  } | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const updateIndicator = useCallback(() => {
+    const activeTrigger = getTriggerElement(activeValue);
+
+    if (activeTrigger && listRef.current) {
+      const listRect = listRef.current.getBoundingClientRect();
+      const triggerRect = activeTrigger.getBoundingClientRect();
+      setIndicatorStyle({
+        left: triggerRect.left - listRect.left,
+        width: triggerRect.width,
+      });
+    }
+  }, [activeValue, getTriggerElement]);
+
+  useEffect(() => {
+    const debouncedUpdate = debounce(updateIndicator, 100);
+    window.addEventListener('resize', debouncedUpdate);
+    requestAnimationFrame(updateIndicator);
+
+    return () => {
+      window.removeEventListener('resize', debouncedUpdate);
+    };
+  }, [updateIndicator]);
+
+  return (
+    <div
+      ref={listRef}
+      role="tablist"
+      data-slot="tabs-list"
+      className={cn('relative inline-flex items-center gap-8', className)}
+      {...(props as ComponentProps<'div'>)}
+    >
+      {children}
+      {indicatorStyle && (
+        <motion.div
+          className={cn(
+            'absolute bottom-0 h-2 bg-foreground-highlight-interactive',
+            activeClassName,
+          )}
+          initial={false}
+          animate={{
+            left: indicatorStyle.left,
+            width: indicatorStyle.width,
+          }}
+          transition={transition}
+        />
+      )}
+    </div>
+  );
+}
+
+type TabsTriggerProps = Omit<HTMLMotionProps<'button'>, 'ref'> & {
+  value: string;
+  children: ReactNode;
+};
+
+const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({value, children, className, onKeyDown, ...props}, ref) => {
+    const {
+      activeValue,
+      handleValueChange,
+      registerTrigger,
+      getAllTriggerValues,
+      getTriggerElement,
+    } = useTabs();
+
+    const localRef = useRef<HTMLButtonElement | null>(null);
+    useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);
+
+    useEffect(() => {
+      registerTrigger(value, localRef.current);
+      return () => registerTrigger(value, null);
+    }, [value, registerTrigger]);
+
+    const isActive = activeValue === value;
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLButtonElement>) => {
+        onKeyDown?.(event);
+
+        const allValues = getAllTriggerValues();
+        const currentIndex = allValues.indexOf(value);
+
+        if (currentIndex === -1) return;
+
+        let targetIndex = currentIndex;
+        let shouldPreventDefault = true;
+
+        switch (event.key) {
+          case 'ArrowLeft': {
+            targetIndex = currentIndex > 0 ? currentIndex - 1 : allValues.length - 1;
+            break;
+          }
+          case 'ArrowRight': {
+            targetIndex = currentIndex < allValues.length - 1 ? currentIndex + 1 : 0;
+            break;
+          }
+          case 'Home': {
+            targetIndex = 0;
+            break;
+          }
+          case 'End': {
+            targetIndex = allValues.length - 1;
+            break;
+          }
+          default: {
+            shouldPreventDefault = false;
+            return;
+          }
+        }
+
+        if (shouldPreventDefault) {
+          event.preventDefault();
+          const targetValue = allValues[targetIndex];
+          if (targetValue) {
+            handleValueChange(targetValue);
+            const targetElement = getTriggerElement(targetValue);
+            targetElement?.focus();
+          }
+        }
+      },
+      [value, getAllTriggerValues, getTriggerElement, handleValueChange, onKeyDown],
+    );
+
+    return (
+      <motion.button
+        ref={localRef}
+        data-slot="tabs-trigger"
+        role="tab"
+        tabIndex={isActive ? 0 : -1}
+        whileTap={{scale: 0.95}}
+        onClick={() => handleValueChange(value)}
+        onKeyDown={handleKeyDown}
+        data-state={isActive ? 'active' : 'inactive'}
+        aria-selected={isActive}
+        aria-controls={`tabpanel-${value}`}
+        id={`tab-${value}`}
+        className={cn(
+          'relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap px-0 py-10 text-sm font-medium transition-colors outline-none focus-visible:shadow-border-interactive-with-active focus-visible:rounded-2 disabled:pointer-events-none disabled:opacity-50',
+          isActive ? 'text-foreground-neutral-base' : 'text-foreground-neutral-muted',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </motion.button>
+    );
+  },
+);
+
+TabsTrigger.displayName = 'TabsTrigger';
+
+type TabsContentsProps = ComponentProps<'div'> & {
+  children: ReactNode;
+};
+
+function TabsContents({children, className, ...props}: TabsContentsProps) {
+  const {activeValue} = useTabs();
+  const childrenArray = Children.toArray(children);
+
+  const activeChild = childrenArray.find(
+    (child): child is ReactElement<{value: string}> =>
+      isValidElement(child) &&
+      typeof child.props === 'object' &&
+      child.props !== null &&
+      'value' in child.props &&
+      child.props.value === activeValue,
+  );
+
+  return (
+    <div data-slot="tabs-contents" className={cn(className)} {...(props as ComponentProps<'div'>)}>
+      {activeChild}
+    </div>
+  );
+}
+
+type TabsContentProps = ComponentProps<'div'> & {
+  value: string;
+  children: ReactNode;
+};
+
+function TabsContent({children, value, className, ...props}: TabsContentProps) {
+  const {activeValue} = useTabs();
+  const isActive = activeValue === value;
+
+  if (!isActive) {
+    return null;
+  }
+
+  return (
+    <div
+      role="tabpanel"
+      data-slot="tabs-content"
+      aria-labelledby={`tab-${value}`}
+      className={cn(className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContents,
+  TabsContent,
+  useTabs,
+  type TabsContextType,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentsProps,
+  type TabsContentProps,
+};

package/src/components/toast/index.ts

@@ -1,2 +1,2 @@
-export {Toaster, type ToasterProps, toast} from './toast';
-export {ToastCustom, type ToastCustomProps} from './toast-custom';
+export * from './toast';
+export * from './toast-custom';

package/src/utils/debounce.ts

@@ -0,0 +1,15 @@
+export function debounce<T extends (...args: never[]) => void>(
+  fn: T,
+  delay: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+}

package/src/utils/index.ts

@@ -2,4 +2,5 @@ export * from './avatar';
 export * from './clipboard';
 export * from './cn';
 export * from './date';
+export * from './debounce';
 export * from './format';