@shipfox/react-ui 0.13.0 → 0.14.0

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/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';
@@ -19,6 +20,7 @@ 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';

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';
@@ -214,9 +215,54 @@ 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>
@@ -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/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/index.ts

@@ -1,3 +1,4 @@
+export {ShipfoxLoader} from 'shipfox-loader-react';
 export * from './components';
 export * from './hooks';
 export * from './utils';