@shipfox/react-ui 0.13.0 → 0.15.0

package/src/components/dashboard/components/mobile-menu.tsx

@@ -0,0 +1,50 @@
+import {Button} from 'components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'components/dropdown-menu';
+import {Icon} from 'components/icon';
+import {ShinyText} from 'components/shiny-text';
+import {useResolvedTheme} from 'hooks/useResolvedTheme';
+import {ShipfoxLoader} from 'shipfox-loader-react';
+
+export function MobileMenu() {
+  const resolvedTheme = useResolvedTheme();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="transparent"
+          className="flex md:hidden items-center justify-center shrink-0 w-40 h-40 bg-background-subtle-base hover:bg-background-neutral-hover transition-colors rounded-none border-l border-border-neutral-strong"
+          aria-label="Menu"
+        >
+          <Icon name="menuLine" className="size-18 text-foreground-neutral-subtle" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-200">
+        <DropdownMenuItem>
+          <div className="flex items-center gap-8">
+            <ShipfoxLoader
+              size={13}
+              animation="circular"
+              color={resolvedTheme === 'dark' ? 'white' : 'orange'}
+              background={resolvedTheme === 'dark' ? 'dark' : 'light'}
+            />
+            <ShinyText
+              text="Complete setup"
+              className="flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-left"
+            />
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem icon="searchLine">Search</DropdownMenuItem>
+        <DropdownMenuItem icon="questionLine">Help</DropdownMenuItem>
+        <DropdownMenuItem icon="notification3Line">Notifications</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/dashboard/components/organization-selector.tsx

@@ -0,0 +1,51 @@
+import {Avatar} from 'components/avatar';
+import {Button} from 'components/button';
+import {Icon} from 'components/icon';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from 'components/select';
+
+export function OrganizationSelector() {
+  return (
+    <Select defaultValue="stripe">
+      <SelectTrigger className="w-200 h-40 shadow-none bg-background-neutral-base hover:bg-background-neutral-hover rounded-none gap-8 pl-12 border-l min-[321px]:border-r border-border-neutral-strong">
+        <div className="flex items-center gap-8 flex-1 min-w-0">
+          <SelectValue placeholder="Select organization" />
+        </div>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="stripe">
+          <div className="flex items-center gap-8">
+            <Avatar size="3xs" content="logo" logoName="stripe" radius="rounded" />
+            <span>Stripe</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="shipfox">
+          <div className="flex items-center gap-8">
+            <Avatar size="3xs" content="logo" logoName="shipfox" radius="rounded" />
+            <span>Shipfox</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="github">
+          <div className="flex items-center gap-8">
+            <Avatar size="3xs" content="logo" logoName="github" radius="rounded" />
+            <span>GitHub</span>
+          </div>
+        </SelectItem>
+        <SelectSeparator />
+        <Button
+          variant="transparent"
+          className="w-full justify-start text-foreground-neutral-subtle"
+        >
+          <Icon name="addLine" className="size-16 shrink-0" />
+          <span>New organization</span>
+        </Button>
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/dashboard/components/top-menu.tsx

@@ -0,0 +1,26 @@
+import {Tabs, TabsList, TabsTrigger} from 'components/tabs';
+
+export function TopMenu({
+  activeTab,
+  onTabChange,
+}: {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between w-full">
+      <div className="flex items-center flex-1 min-w-0 pl-12 md:pl-20 pr-8">
+        <Tabs value={activeTab} onValueChange={onTabChange}>
+          <TabsList className="h-48 gap-8 md:gap-12">
+            <TabsTrigger value="analytics" className="text-sm font-medium">
+              Analytics
+            </TabsTrigger>
+            <TabsTrigger value="jobs" className="text-sm font-medium">
+              Jobs
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/components/topbar-button.tsx

@@ -0,0 +1,27 @@
+import {Button} from 'components/button';
+import {Icon, type IconName} from 'components/icon';
+import {cn} from 'utils/cn';
+
+export function TopbarButton({
+  className,
+  icon,
+  label,
+}: {
+  className?: string;
+  icon: IconName;
+  label?: string;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="transparent"
+      className={cn(
+        'flex items-center justify-center overflow-hidden shrink-0 w-40 h-40 bg-background-subtle-base hover:bg-background-neutral-hover transition-colors rounded-none border-l border-border-neutral-strong',
+        className,
+      )}
+      aria-label={label ?? undefined}
+    >
+      <Icon name={icon} className="size-18 text-foreground-neutral-subtle" />
+    </Button>
+  );
+}

package/src/components/dashboard/components/topbar.tsx

@@ -0,0 +1,40 @@
+import {cn} from 'utils/cn';
+import {CompleteSetupButton} from './complete-setup-button';
+import {MobileMenu} from './mobile-menu';
+import {OrganizationSelector} from './organization-selector';
+import {TopbarButton} from './topbar-button';
+import {UserProfile} from './user-profile';
+
+export function Topbar({hideLogo = false}: {hideLogo?: boolean}) {
+  return (
+    <div className="flex flex-col items-start w-full bg-background-subtle-base">
+      <div className="flex items-center justify-between w-full shrink-0 border-b border-border-neutral-strong">
+        <div className="flex items-center flex-1 min-w-0">
+          <div className={cn('shrink-0', hideLogo ? 'opacity-0' : 'opacity-100')}>
+            <TopbarButton icon="shipfox" label="Shipfox" className="border-none" />
+          </div>
+          <OrganizationSelector />
+          <div className="hidden md:block flex-1 h-40 bg-background-subtle-base" />
+        </div>
+
+        <CompleteSetupButton className="hidden md:flex" />
+
+        <div className="hidden md:block">
+          <TopbarButton icon="searchLine" label="Search" />
+        </div>
+
+        <div className="hidden md:block">
+          <TopbarButton icon="questionLine" label="Help" />
+        </div>
+
+        <div className="hidden md:block">
+          <TopbarButton icon="notification3Line" label="Notifications" />
+        </div>
+
+        <MobileMenu />
+
+        <UserProfile />
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/components/user-profile.tsx

@@ -0,0 +1,90 @@
+import {Avatar} from 'components/avatar';
+import {UserBadge} from 'components/badge';
+import {Button} from 'components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'components/dropdown-menu';
+import {ShinyText} from 'components/shiny-text';
+
+function UsageGauge({used, total}: {used: number; total: number}) {
+  const percentage = total <= 0 ? 0 : Math.min((used / total) * 100, 100);
+
+  return (
+    <div className="flex h-8 w-full rounded-full bg-tag-neutral-bg overflow-hidden">
+      <div className="h-full bg-tag-success-icon rounded-l-2" style={{width: `${percentage}%`}} />
+    </div>
+  );
+}
+
+export function UserProfile() {
+  const userName = 'Thierry Abalea';
+  const userEmail = 'thierryabalea@acme.com';
+  const creditsUsed = 3213;
+  const creditsTotal = 6000;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="flex items-center justify-center h-40 px-8 cursor-pointer border-l border-border-neutral-strong">
+          <Avatar className="size-24 md:hidden" content="image" fallback="TA" />
+          <UserBadge name={userName} className="hidden md:inline-flex" />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-220">
+        <div className="flex items-center gap-12 px-8 py-4">
+          <Avatar className="size-28 shrink-0" content="image" fallback="TA" />
+          <div className="flex flex-col min-w-0">
+            <span className="text-sm font-medium leading-20 text-foreground-neutral-base truncate">
+              {userName}
+            </span>
+            <span className="text-xs leading-20 text-foreground-neutral-subtle truncate">
+              {userEmail}
+            </span>
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem icon="sparkling2Fill">Getting started</DropdownMenuItem>
+        <DropdownMenuItem icon="userLine">Profile settings</DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <div className="flex flex-col gap-8 px-8 py-4">
+          <div className="flex items-center justify-between gap-8">
+            <div className="flex items-center gap-8">
+              <Avatar className="size-12" content="logo" logoName="stripe" radius="rounded" />
+              <span className="text-sm font-medium leading-20 text-foreground-neutral-subtle">
+                Usage
+              </span>
+            </div>
+            <span className="text-sm font-medium leading-20 text-foreground-neutral-subtle">
+              {creditsUsed} / {creditsTotal}
+            </span>
+          </div>
+          <UsageGauge used={creditsUsed} total={creditsTotal} />
+          <span className="text-xs leading-20 text-foreground-neutral-subtle">
+            {creditsTotal} free credits every month.
+          </span>
+        </div>
+
+        <div className="px-8 pb-12">
+          <Button type="button" className="w-full">
+            <ShinyText
+              text="Upgrade Plan"
+              className="flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-center"
+            />
+          </Button>
+        </div>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem icon="logoutCircleLine">Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/dashboard/dashboard.stories.tsx

@@ -0,0 +1,25 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Dashboard} from './dashboard';
+
+const meta = {
+  title: 'Dashboard/Example',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-screen w-full">
+      <Dashboard />
+    </div>
+  ),
+};

package/src/components/dashboard/dashboard.tsx

@@ -0,0 +1,61 @@
+import {useMotionValueEvent, useScroll} from 'framer-motion';
+import {useCallback, useRef, useState} from 'react';
+import {AnalyticsContent} from './components/analytics-content';
+import {AnimatedLogo} from './components/animated-logo';
+import {JobsContent} from './components/jobs-content';
+import {TopMenu} from './components/top-menu';
+import {Topbar} from './components/topbar';
+
+const LOGO_HEIGHT = 48;
+const TOPBAR_HEIGHT = 41;
+
+export function Dashboard() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const topbarRef = useRef<HTMLDivElement>(null);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [activeTab, setActiveTab] = useState('analytics');
+
+  const {scrollY} = useScroll({
+    container: containerRef,
+  });
+
+  useMotionValueEvent(scrollY, 'change', (latest) => {
+    const progress = Math.min(latest / TOPBAR_HEIGHT, 1);
+    setScrollProgress(progress);
+  });
+
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab);
+    if (containerRef.current) {
+      containerRef.current.scrollTo({top: 0, behavior: 'instant'});
+    }
+    setScrollProgress(0);
+  }, []);
+
+  const isTopbarHidden = scrollProgress >= 1;
+
+  return (
+    <div className="flex flex-col w-full h-full">
+      <AnimatedLogo scrollProgress={scrollProgress} />
+
+      <div ref={containerRef} className="flex flex-col w-full h-full overflow-auto">
+        <div ref={topbarRef}>
+          <Topbar hideLogo={isTopbarHidden} />
+        </div>
+
+        <div className="sticky top-0 z-40 border-b border-border-neutral-strong bg-background-neutral-base">
+          <div
+            style={{
+              paddingLeft: `${(1 - (1 - scrollProgress) ** 3) * (LOGO_HEIGHT - 8)}px`,
+            }}
+          >
+            <TopMenu activeTab={activeTab} onTabChange={handleTabChange} />
+          </div>
+        </div>
+
+        {activeTab === 'analytics' && <AnalyticsContent />}
+        {activeTab === 'jobs' && <JobsContent />}
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/index.ts

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

package/src/components/form/form.stories.tsx

@@ -1,3 +1,4 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
 import {zodResolver} from '@hookform/resolvers/zod';
 import type {Meta, StoryObj} from '@storybook/react';
 import {Button} from 'components/button';
@@ -86,6 +87,10 @@ function BasicFormExample() {
 
 export const Basic: Story = {
   render: () => <BasicFormExample />,
+  play: async (context) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await argosScreenshot(context, 'Form Basic');
+  },
 };
 
 const componentsFormSchema = z.object({

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

@@ -2,9 +2,12 @@ export * from './alert';
 export * from './avatar';
 export * from './badge';
 export * from './button';
+export * from './button-group';
 export * from './calendar';
 export * from './checkbox';
 export * from './code-block';
+export * from './command';
+export * from './confetti';
 export * from './date-picker';
 export * from './date-time-range-picker';
 export * from './dot-grid';
@@ -15,10 +18,16 @@ export * from './icon';
 export * from './inline-tips';
 export * from './input';
 export * from './item';
+export * from './kbd';
 export * from './label';
 export * from './modal';
 export * from './moving-border';
 export * from './popover';
+export * from './search';
+export * from './select';
+export * from './shiny-text';
+export * from './skeleton';
+export * from './table';
 export * from './tabs';
 export * from './textarea';
 export * from './theme';

package/src/components/kbd/index.ts

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

package/src/components/kbd/kbd.stories.tsx

@@ -0,0 +1,64 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Kbd, KbdGroup} from './kbd';
+
+const meta = {
+  title: 'Components/Kbd',
+  component: Kbd,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Kbd>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8">
+      <Kbd>Ctrl</Kbd>
+      <Kbd>Alt</Kbd>
+      <Kbd>Shift</Kbd>
+      <Kbd>⌘</Kbd>
+      <Kbd>⌥</Kbd>
+      <Kbd>⇧</Kbd>
+    </div>
+  ),
+};
+
+export const KeyCombination: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-12">
+      <Kbd>⌘K</Kbd>
+      <KbdGroup>
+        <Kbd>Ctrl</Kbd>
+        <Kbd>Shift</Kbd>
+        <Kbd>P</Kbd>
+      </KbdGroup>
+      <KbdGroup>
+        <Kbd>Alt</Kbd>
+        <Kbd>Enter</Kbd>
+      </KbdGroup>
+    </div>
+  ),
+};
+
+export const InMenu: Story = {
+  render: () => (
+    <div className="max-w-400 rounded-10 border border-border-neutral-base p-8">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors">
+          <span className="text-sm text-foreground-neutral-subtle">Copy</span>
+          <Kbd>⌘C</Kbd>
+        </div>
+        <div className="flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors">
+          <span className="text-sm text-foreground-neutral-subtle">Paste</span>
+          <Kbd>⌘V</Kbd>
+        </div>
+        <div className="h-px bg-border-neutral-base my-4" />
+        <div className="flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors">
+          <span className="text-sm text-foreground-neutral-subtle">Command Palette</span>
+          <Kbd>⌘K</Kbd>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/kbd/kbd.tsx

@@ -0,0 +1,32 @@
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+type KbdProps = ComponentProps<'kbd'>;
+
+export function Kbd({className, ...props}: KbdProps) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'pointer-events-none inline-flex h-20 w-fit min-w-20 items-center justify-center gap-1 rounded-4 px-4 font-display text-xs font-medium select-none',
+        'bg-background-components-base text-foreground-neutral-subtle border border-border-neutral-base shadow-button-neutral',
+        '[&_svg:not([class*="size-"])]:size-12',
+        'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type KbdGroupProps = ComponentProps<'div'>;
+
+export function KbdGroup({className, ...props}: KbdGroupProps) {
+  return (
+    <div
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-4', className)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,28 @@
+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';