@shipfox/react-ui 0.12.0 → 0.14.0

package/src/components/code-block/code-block-footer.tsx

@@ -1,7 +1,9 @@
 import {Slot} from '@radix-ui/react-slot';
 import {Icon} from 'components/icon/icon';
+import {ShinyText} from 'components/shiny-text';
 import {Text} from 'components/typography';
 import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
+import {ShipfoxLoader} from 'shipfox-loader-react';
 import {cn} from 'utils/cn';
 
 export type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {
@@ -27,7 +29,7 @@ export function CodeBlockFooter({
   const defaultIcon =
     icon ??
     (state === 'running' ? (
-      <Icon name="shipfox" className="size-20" aria-hidden="true" />
+      <ShipfoxLoader size={20} animation="circular" color="white" background="dark" />
     ) : (
       <Icon
         name="checkCircleSolid"
@@ -57,7 +59,15 @@ export function CodeBlockFooter({
       <CodeBlockFooterIcon className="text-tag-success-icon">{defaultIcon}</CodeBlockFooterIcon>
       {(message || description) && (
         <CodeBlockFooterContent>
-          {message && <CodeBlockFooterMessage>{message}</CodeBlockFooterMessage>}
+          {message && (
+            <CodeBlockFooterMessage>
+              {state === 'running' && typeof message === 'string' ? (
+                <ShinyText text={message} speed={3} />
+              ) : (
+                message
+              )}
+            </CodeBlockFooterMessage>
+          )}
           {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}
         </CodeBlockFooterContent>
       )}

package/src/components/confetti/confetti.stories.tsx

@@ -0,0 +1,38 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Confetti, ConfettiButton} from './confetti';
+
+const meta = {
+  title: 'Components/Confetti',
+  component: Confetti,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Confetti>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex h-400 w-600 items-center justify-center rounded-16 bg-background-subtle-base">
+      <ConfettiButton>Click for Confetti!</ConfettiButton>
+    </div>
+  ),
+};
+
+export const WithOptions: Story = {
+  render: () => (
+    <div className="flex h-400 w-600 items-center justify-center rounded-16 bg-background-subtle-base">
+      <ConfettiButton
+        options={{
+          particleCount: 150,
+          spread: 60,
+          colors: ['#ff6b6b', '#4ecdc4', '#ffe66d', '#95e1d3'],
+        }}
+      >
+        Custom Confetti Button
+      </ConfettiButton>
+    </div>
+  ),
+};

package/src/components/confetti/confetti.tsx

@@ -0,0 +1,140 @@
+import type {
+  GlobalOptions as ConfettiGlobalOptions,
+  CreateTypes as ConfettiInstance,
+  Options as ConfettiOptions,
+} from 'canvas-confetti';
+import confetti from 'canvas-confetti';
+import {Button} from 'components/button';
+import type {ComponentProps, ReactNode} from 'react';
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+
+type ConfettiApi = {
+  fire: (options?: ConfettiOptions) => Promise<void>;
+};
+
+const ConfettiContext = createContext<ConfettiApi | null>(null);
+
+export type ConfettiRef = ConfettiApi | null;
+
+export type ConfettiProps = ComponentProps<'canvas'> & {
+  options?: ConfettiOptions;
+  globalOptions?: ConfettiGlobalOptions;
+  manualstart?: boolean;
+  children?: ReactNode;
+};
+
+const ConfettiComponent = forwardRef<ConfettiRef, ConfettiProps>(
+  (
+    {
+      options,
+      globalOptions = {resize: true, useWorker: true},
+      manualstart = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const instanceRef = useRef<ConfettiInstance | null>(null);
+    const hasAutoFiredRef = useRef<boolean>(false);
+    const optionsRef = useRef<ConfettiOptions | undefined>(options);
+
+    useEffect(() => {
+      optionsRef.current = options;
+    }, [options]);
+
+    const canvasRef = useCallback(
+      (node: HTMLCanvasElement | null) => {
+        if (node !== null) {
+          if (instanceRef.current) {
+            instanceRef.current.reset();
+          }
+          instanceRef.current = confetti.create(node, {
+            ...globalOptions,
+          });
+        } else {
+          if (instanceRef.current) {
+            instanceRef.current.reset();
+            instanceRef.current = null;
+          }
+        }
+      },
+      [globalOptions],
+    );
+
+    const fire = useCallback(async (opts: ConfettiOptions = {}) => {
+      try {
+        await instanceRef.current?.({...optionsRef.current, ...opts});
+      } catch (error) {
+        // biome-ignore lint/suspicious/noConsole: we need to log the error
+        console.error('Confetti error:', error);
+      }
+    }, []);
+
+    const api = useMemo<ConfettiApi>(
+      () => ({
+        fire,
+      }),
+      [fire],
+    );
+
+    useImperativeHandle(ref, () => api, [api]);
+
+    useEffect(() => {
+      if (!manualstart && !hasAutoFiredRef.current && instanceRef.current) {
+        hasAutoFiredRef.current = true;
+        void instanceRef.current(optionsRef.current);
+      }
+    }, [manualstart]);
+
+    return (
+      <ConfettiContext.Provider value={api}>
+        <canvas ref={canvasRef} {...props} />
+        {children}
+      </ConfettiContext.Provider>
+    );
+  },
+);
+
+ConfettiComponent.displayName = 'Confetti';
+
+export const Confetti = ConfettiComponent;
+
+export type ConfettiButtonProps = ComponentProps<'button'> & {
+  options?: ConfettiOptions & ConfettiGlobalOptions & {canvas?: HTMLCanvasElement};
+};
+
+export function ConfettiButton({options, onClick, children, ...props}: ConfettiButtonProps) {
+  const handleClick: ComponentProps<'button'>['onClick'] = async (event) => {
+    try {
+      const rect = event.currentTarget.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = rect.top + rect.height / 2;
+      await confetti({
+        ...options,
+        origin: {
+          x: x / window.innerWidth,
+          y: y / window.innerHeight,
+        },
+      });
+    } catch (error) {
+      // biome-ignore lint/suspicious/noConsole: we need to log the error
+      console.error('Confetti button error:', error);
+    }
+
+    onClick?.(event);
+  };
+
+  return (
+    <Button onClick={handleClick} {...props}>
+      {children}
+    </Button>
+  );
+}

package/src/components/confetti/index.ts

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

package/src/components/dropdown-menu/index.ts

@@ -1,29 +1 @@
-export type {
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuContentProps,
-  DropdownMenuItemProps,
-  DropdownMenuLabelProps,
-  DropdownMenuRadioItemProps,
-  DropdownMenuShortcutProps,
-  DropdownMenuSubTriggerProps,
-} from './dropdown-menu';
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  dropdownMenuContentVariants,
-  dropdownMenuItemVariants,
-  dropdownMenuLabelVariants,
-} from './dropdown-menu';
+export * from './dropdown-menu';

package/src/components/icon/icon.tsx

@@ -78,9 +78,13 @@ export type IconName = keyof typeof iconsMap;
 export const iconNames = Object.keys(iconsMap) as IconName[];
 
 type BaseIconProps = ComponentProps<RemixiconComponentType>;
-type IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;
+type IconProps = {name: IconName; size?: number | string} & Omit<
+  BaseIconProps,
+  'name' | 'size' | 'width' | 'height'
+>;
 
-export function Icon({name, ...props}: IconProps) {
+export function Icon({name, size, ...props}: IconProps) {
   const IconComponent = iconsMap[name];
-  return <IconComponent {...props} />;
+  const svgProps = size && typeof size === 'number' ? {...props, width: size, height: size} : props;
+  return <IconComponent {...svgProps} />;
 }

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './button';
 export * from './calendar';
 export * from './checkbox';
 export * from './code-block';
+export * from './confetti';
 export * from './date-picker';
 export * from './date-time-range-picker';
 export * from './dot-grid';
@@ -17,7 +18,10 @@ export * from './input';
 export * from './item';
 export * from './label';
 export * from './modal';
+export * from './moving-border';
 export * from './popover';
+export * from './shiny-text';
+export * from './tabs';
 export * from './textarea';
 export * from './theme';
 export * from './toast';

package/src/components/modal/index.ts

@@ -1,23 +1 @@
-export type {
-  ModalContentProps,
-  ModalDescriptionProps,
-  ModalHeaderProps,
-  ModalOverlayProps,
-  ModalTitleProps,
-} from './modal';
-export {
-  Modal,
-  ModalBody,
-  ModalClose,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  ModalPortal,
-  ModalTitle,
-  ModalTrigger,
-  modalContentVariants,
-  modalDefaultTransition,
-  modalOverlayVariants,
-} from './modal';
+export * from './modal';

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

@@ -14,6 +14,7 @@ import {
   CodeBlockHeader,
   CodeBlockItem,
 } from 'components/code-block';
+import {Confetti, type ConfettiRef} from 'components/confetti';
 import {DatePicker} from 'components/date-picker';
 import {DynamicItem} from 'components/dynamic-item';
 import {Icon} from 'components/icon';
@@ -22,7 +23,7 @@ import {ItemTitle} from 'components/item';
 import {Label} from 'components/label';
 import {MovingBorder} from 'components/moving-border';
 import {Text} from 'components/typography';
-import {useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {cn} from 'utils/cn';
 import illustration2 from '../../assets/illustration-2.svg';
 import illustrationBg from '../../assets/illustration-gradient.svg';
@@ -140,7 +141,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">
@@ -214,14 +215,59 @@ export const GithubActions: Story = {
   },
   render: () => {
     const [open, setOpen] = useState(false);
+    const [footerState, setFooterState] = useState<'running' | 'done'>('running');
+    const confettiRef = useRef<ConfettiRef>(null);
+
+    useEffect(() => {
+      if (open && footerState === 'running') {
+        const timer = setTimeout(() => {
+          setFooterState('done');
+        }, 3000);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }
+    }, [open, footerState]);
+
+    useEffect(() => {
+      if (footerState === 'done' && open) {
+        const timer = setTimeout(() => {
+          if (confettiRef.current) {
+            void confettiRef.current.fire();
+          }
+        }, 200);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }
+    }, [footerState, open]);
+
+    useEffect(() => {
+      if (!open) {
+        setFooterState('running');
+      }
+    }, [open]);
 
     return (
       <div className="flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip">
+        <Confetti
+          ref={confettiRef}
+          manualstart
+          options={{
+            particleCount: 200,
+            spread: 100,
+            colors: ['#ff6b6b', '#4ecdc4', '#ffe66d', '#95e1d3'],
+          }}
+          className="fixed inset-0 pointer-events-none z-100"
+          style={{width: '100%', height: '100%'}}
+        />
         <Modal open={open} onOpenChange={setOpen}>
           <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">
@@ -316,9 +362,17 @@ export const GithubActions: Story = {
                     )}
                   </CodeBlockBody>
                   <CodeBlockFooter
-                    state="running"
-                    message="Waiting for Shipfox runner event…"
-                    description="This usually takes 30-60 seconds after you commit the workflow file."
+                    state={footerState}
+                    message={
+                      footerState === 'running'
+                        ? 'Waiting for Shipfox runner event…'
+                        : 'Runners connected!'
+                    }
+                    description={
+                      footerState === 'running'
+                        ? 'This usually takes 30-60 seconds after you commit the workflow file.'
+                        : ''
+                    }
                   />
                 </CodeBlock>
               </div>

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/shiny-text/index.ts

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

package/src/components/shiny-text/shiny-text.tsx

@@ -0,0 +1,21 @@
+import {cn} from 'utils/cn';
+
+type ShinyTextProps = {
+  text: string;
+  disabled?: boolean;
+  speed?: number;
+  className?: string;
+};
+
+function ShinyText({text, disabled = false, speed = 5, className = ''}: ShinyTextProps) {
+  const animationDuration = `${speed}s`;
+
+  return (
+    <span className={cn('shiny-text', {disabled: disabled}, className)} style={{animationDuration}}>
+      {text}
+    </span>
+  );
+}
+
+export {ShinyText};
+export type {ShinyTextProps};

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>
+  ),
+};