@shipfox/react-ui 0.14.0 → 0.15.0

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

@@ -2,9 +2,11 @@ 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';
@@ -16,11 +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/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';

package/src/components/search/search-context.tsx

@@ -0,0 +1,78 @@
+import {createContext, useCallback, useContext, useEffect, useState} from 'react';
+import {SHORTCUT_KEY_REGEX} from './search-variants';
+
+export type SearchContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+};
+
+export const SearchContext = createContext<SearchContextValue | null>(null);
+
+export function useSearchContext() {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error('Search components must be used within a Search component');
+  }
+  return context;
+}
+
+export function useControllableState<T>(
+  controlledValue: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void,
+): [T, (value: T) => void] {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const setValue = useCallback(
+    (newValue: T) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange],
+  );
+
+  return [value, setValue];
+}
+
+export function useKeyboardShortcut(shortcutKey: string | undefined, onTrigger: () => void) {
+  useEffect(() => {
+    if (!shortcutKey) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const key = shortcutKey.toLowerCase();
+      const isMetaKey = key.startsWith('meta+') || key.startsWith('cmd+') || key.startsWith('⌘');
+      const isCtrlKey = key.startsWith('ctrl+');
+      const targetKey = key.replace(SHORTCUT_KEY_REGEX, '');
+
+      const shouldTrigger =
+        (isMetaKey && e.metaKey && e.key.toLowerCase() === targetKey) ||
+        (isCtrlKey && e.ctrlKey && e.key.toLowerCase() === targetKey) ||
+        (!isMetaKey && !isCtrlKey && e.key.toLowerCase() === targetKey && !e.metaKey && !e.ctrlKey);
+
+      if (!shouldTrigger) return;
+
+      if (!isMetaKey && !isCtrlKey) {
+        const target = e.target as HTMLElement;
+        if (
+          target.tagName === 'INPUT' ||
+          target.tagName === 'TEXTAREA' ||
+          target.isContentEditable
+        ) {
+          return;
+        }
+      }
+
+      e.preventDefault();
+      onTrigger();
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [shortcutKey, onTrigger]);
+}

package/src/components/search/search-inline.tsx

@@ -0,0 +1,107 @@
+import type {VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {useCallback, useRef, useState} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon';
+import {searchInputVariants} from './search-variants';
+
+export type SearchInlineProps = Omit<ComponentProps<'input'>, 'size'> &
+  VariantProps<typeof searchInputVariants> & {
+    showClearButton?: boolean;
+    onClear?: () => void;
+  };
+
+export function SearchInline({
+  className,
+  variant,
+  size,
+  radius,
+  value,
+  onChange,
+  onClear,
+  showClearButton = true,
+  ...props
+}: SearchInlineProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [internalValue, setInternalValue] = useState('');
+  const isControlled = value !== undefined;
+  const inputValue = isControlled ? value : internalValue;
+  const hasValue = Boolean(inputValue);
+  const isSmall = size === 'small';
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    },
+    [isControlled, onChange],
+  );
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue('');
+    }
+
+    if (onChange && inputRef.current) {
+      inputRef.current.value = '';
+      const syntheticEvent = {
+        target: inputRef.current,
+        currentTarget: inputRef.current,
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(syntheticEvent);
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  }, [isControlled, onChange, onClear]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape' && hasValue) {
+        e.preventDefault();
+        handleClear();
+      }
+    },
+    [hasValue, handleClear],
+  );
+
+  return (
+    <div
+      data-slot="search-inline"
+      className={cn(searchInputVariants({variant, size, radius}), className)}
+    >
+      <Icon
+        name="searchLine"
+        className={cn('shrink-0 text-foreground-neutral-muted', isSmall ? 'size-14' : 'size-16')}
+      />
+      <input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'flex-1 bg-transparent outline-none min-w-0',
+          'text-foreground-neutral-base',
+          'placeholder:text-foreground-neutral-muted',
+          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',
+        )}
+        {...props}
+      />
+      {showClearButton && hasValue && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className={cn(
+            'shrink-0 cursor-pointer rounded-4 p-2 -mx-2',
+            'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors',
+          )}
+          aria-label="Clear search"
+        >
+          <Icon name="closeLine" className="size-16" />
+        </button>
+      )}
+    </div>
+  );
+}