@shipfox/react-ui 0.15.0 → 0.17.0

package/src/components/dashboard/components/animated-logo.tsx

@@ -1,25 +0,0 @@
-import {Icon} from 'components/icon';
-import {motion} from 'framer-motion';
-
-const LOGO_HEIGHT = 48;
-
-export function AnimatedLogo({scrollProgress}: {scrollProgress: number}) {
-  const isVisible = scrollProgress > 0;
-
-  if (!isVisible) return null;
-
-  const easedProgress = 1 - (1 - scrollProgress) ** 3;
-
-  return (
-    <motion.div
-      className="fixed top-0 left-0 z-50 flex items-center justify-center shrink-0 w-48 h-48 bg-background-neutral-base"
-      style={{
-        opacity: easedProgress,
-        transform: `translateY(${-LOGO_HEIGHT + easedProgress * LOGO_HEIGHT}px)`,
-      }}
-      initial={false}
-    >
-      <Icon name="shipfox" className="size-20 text-foreground-neutral-subtle" />
-    </motion.div>
-  );
-}

package/src/components/dashboard/components/complete-setup-button.tsx

@@ -1,30 +0,0 @@
-import {Button} from 'components/button';
-import {ShinyText} from 'components/shiny-text';
-import {useResolvedTheme} from 'hooks/useResolvedTheme';
-import {ShipfoxLoader} from 'shipfox-loader-react';
-import {cn} from 'utils/cn';
-
-export function CompleteSetupButton({className}: {className?: string}) {
-  const resolvedTheme = useResolvedTheme();
-  return (
-    <Button
-      type="button"
-      variant="transparent"
-      className={cn(
-        'flex items-center gap-8 min-w-124 max-w-280 overflow-hidden px-12 py-10 transition-colors rounded-none h-40 border-l border-border-neutral-strong',
-        className,
-      )}
-    >
-      <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"
-      />
-    </Button>
-  );
-}

package/src/components/dashboard/components/jobs-content.tsx

@@ -1,51 +0,0 @@
-import {Button} from 'components/button';
-import {Icon} from 'components/icon';
-import {SearchInline} from 'components/search/search-inline';
-import {DataTable} from 'components/table/data-table';
-import {jobColumns} from 'components/table/table.stories.columns';
-import {jobsData} from 'components/table/table.stories.data';
-import {Header as TypographyHeader} from 'components/typography';
-import {useMemo, useState} from 'react';
-
-export function JobsContent() {
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const filteredData = useMemo(
-    () => jobsData.filter((job) => job.name.toLowerCase().includes(searchQuery.toLowerCase())),
-    [searchQuery],
-  );
-
-  return (
-    <div className="min-h-[calc(100vh-48px)] p-12 md:p-24 bg-background-neutral-base">
-      <div className="rounded-t-8 overflow-hidden">
-        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-12 md:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 bg-background-neutral-base">
-          <TypographyHeader variant="h3" className="text-foreground-neutral-base">
-            Jobs breakdown
-          </TypographyHeader>
-
-          <div className="flex items-center gap-8 md:gap-16 w-full md:w-auto">
-            <SearchInline
-              placeholder="Search..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              onClear={() => setSearchQuery('')}
-              className="flex-1 md:w-240"
-            />
-            <Button variant="secondary" aria-label="Insert column left" className="shrink-0">
-              <Icon name="insertColumnLeft" className="size-16 text-foreground-neutral-subtle" />
-            </Button>
-          </div>
-        </div>
-
-        <DataTable
-          columns={jobColumns}
-          data={filteredData}
-          pagination={true}
-          pageSize={10}
-          pageSizeOptions={[10, 20, 50, 100]}
-          className="rounded-t-none"
-        />
-      </div>
-    </div>
-  );
-}

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

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

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

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

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

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

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

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

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

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