@shipfox/react-ui 0.4.0 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,6 +43,9 @@
     "react-hook-form": "^7.52.1"
   },
   "devDependencies": {
+    "@argos-ci/cli": "^3.2.1",
+    "@argos-ci/storybook": "^5.2.1",
+    "@storybook/addon-vitest": "^9.1.16",
     "@storybook/builder-vite": "^9.1.8",
     "@storybook/react": "^9.1.8",
     "@storybook/react-vite": "^9.1.8",
@@ -59,6 +62,10 @@
     "storybook-addon-pseudo-states": "^9.1.8",
     "tailwindcss": "^4.1.13",
     "tw-animate-css": "^1.4.0",
+    "vitest": "^4.0.8",
+    "playwright": "^1.56.1",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.8",
     "@shipfox/biome": "1.3.1",
     "@shipfox/swc": "1.2.1",
     "@shipfox/ts-config": "1.3.5",
@@ -71,6 +78,7 @@
     "check": "biome-check",
     "storybook": "storybook dev",
     "storybook:build": "storybook build -o storybook-static",
+    "argos": "argos upload --build-name react-ui storybook-static",
     "test": "vitest-run",
     "type": "tsc-emit"
   }

package/src/components/button/button-link.stories.tsx

@@ -0,0 +1,86 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ButtonLink} from './button-link';
+
+const meta = {
+  title: 'Components/Button/ButtonLink',
+  component: ButtonLink,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['base', 'interactive', 'muted', 'subtle'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'xl'],
+    },
+    underline: {control: 'boolean'},
+    asChild: {control: 'boolean'},
+  },
+  args: {
+    children: 'Label',
+    variant: 'base',
+    size: 'sm',
+    underline: false,
+    href: '#',
+  },
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} variant="base">
+        Base
+      </ButtonLink>
+      <ButtonLink {...args} variant="interactive">
+        Interactive
+      </ButtonLink>
+      <ButtonLink {...args} variant="muted">
+        Muted
+      </ButtonLink>
+      <ButtonLink {...args} variant="subtle">
+        Subtle
+      </ButtonLink>
+    </div>
+  ),
+};
+
+export const WithUnderline: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} variant="base" underline>
+        Base
+      </ButtonLink>
+      <ButtonLink {...args} variant="interactive" underline>
+        Interactive
+      </ButtonLink>
+      <ButtonLink {...args} variant="muted" underline>
+        Muted
+      </ButtonLink>
+      <ButtonLink {...args} variant="subtle" underline>
+        Subtle
+      </ButtonLink>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} iconLeft="addLine">
+        Icon Left
+      </ButtonLink>
+      <ButtonLink {...args} iconRight="chevronRight">
+        Icon Right
+      </ButtonLink>
+      <ButtonLink {...args} iconLeft="addLine" iconRight="chevronRight">
+        Both Icons
+      </ButtonLink>
+    </div>
+  ),
+};

package/src/components/button/button-link.tsx

@@ -0,0 +1,76 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon, type IconName} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const buttonLinkVariants = cva(
+  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium',
+  {
+    variants: {
+      variant: {
+        base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+        interactive:
+          'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',
+        muted:
+          'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+        subtle:
+          'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+      },
+      size: {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-md',
+        xl: 'text-xl',
+      },
+      underline: {
+        true: 'underline decoration-solid [text-underline-position:from-font]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'base',
+      size: 'sm',
+      underline: false,
+    },
+  },
+);
+
+const iconSizeMap = {
+  xs: 14,
+  sm: 14,
+  md: 16,
+  xl: 20,
+} as const;
+
+export function ButtonLink({
+  className,
+  variant,
+  size = 'sm',
+  underline,
+  asChild = false,
+  children,
+  iconLeft,
+  iconRight,
+  ...props
+}: ComponentProps<'a'> &
+  VariantProps<typeof buttonLinkVariants> & {
+    asChild?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+  }) {
+  const Comp = asChild ? Slot : 'a';
+  const iconSize = iconSizeMap[size as keyof typeof iconSizeMap];
+
+  return (
+    <Comp
+      data-slot="button-link"
+      className={cn(buttonLinkVariants({variant, size, underline, className}))}
+      {...props}
+    >
+      {iconLeft && <Icon name={iconLeft} size={iconSize} />}
+      {children}
+      {iconRight && <Icon name={iconRight} size={iconSize} />}
+    </Comp>
+  );
+}

package/src/components/button/button.stories.tsx

@@ -6,6 +6,7 @@ const variantOptions = [
   'primary',
   'secondary',
   'danger',
+  'success',
   'transparent',
   'transparentMuted',
 ] as const;
@@ -48,7 +49,6 @@ export const Variants: Story = {
               <th>{size}</th>
               <th>Default</th>
               <th>Hover</th>
-              <th>Active</th>
               <th>Focus</th>
               <th>Disabled</th>
             </tr>
@@ -71,11 +71,6 @@ export const Variants: Story = {
                     Click me
                   </Button>
                 </td>
-                <td>
-                  <Button {...args} variant={variant} className="active" size={size}>
-                    Click me
-                  </Button>
-                </td>
                 <td>
                   <Button {...args} variant={variant} className="focus" size={size}>
                     Click me
@@ -98,7 +93,6 @@ export const Variants: Story = {
 Variants.parameters = {
   pseudo: {
     hover: '.hover',
-    active: '.active',
     focusVisible: '.focus',
   },
 };

package/src/components/button/button.tsx

@@ -15,18 +15,20 @@ export const buttonVariants = cva(
           'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',
         danger:
           'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+        success:
+          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
         transparent:
           'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
         transparentMuted:
           'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
       },
       size: {
-        '2xs': 'px-6 text-xs gap-4',
-        xs: 'px-6 py-2 text-xs gap-4',
-        sm: 'px-8 py-4 text-sm gap-6',
-        md: 'px-10 py-6 text-md gap-8',
-        lg: 'px-12 py-8 text-lg gap-8',
-        xl: 'px-12 py-10 text-xl gap-10',
+        '2xs': 'h-20 px-6 text-xs gap-4',
+        xs: 'h-24 px-6 text-xs gap-4',
+        sm: 'h-28 px-8 text-sm gap-6',
+        md: 'h-32 px-10 text-md gap-8',
+        lg: 'h-36 px-12 text-lg gap-8',
+        xl: 'h-40 px-12 text-xl gap-10',
       },
     },
     defaultVariants: {

package/src/components/button/icon-button.stories.tsx

@@ -0,0 +1,182 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {IconButton} from './icon-button';
+
+const variantOptions = ['primary', 'transparent'] as const;
+const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
+const radiusOptions = ['rounded', 'full'] as const;
+
+const meta = {
+  title: 'Components/Button/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: variantOptions,
+    },
+    size: {
+      control: 'select',
+      options: sizeOptions,
+    },
+    radius: {
+      control: 'select',
+      options: radiusOptions,
+    },
+    muted: {control: 'boolean'},
+    asChild: {control: 'boolean'},
+  },
+  args: {
+    icon: 'addLine',
+    variant: 'primary',
+    size: 'md',
+    radius: 'rounded',
+    muted: false,
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      {sizeOptions.map((size) => (
+        <div key={size} className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Size: {size}
+          </Code>
+          {radiusOptions.map((radius) => (
+            <table
+              key={radius}
+              className="w-fit border-separate border-spacing-x-32 border-spacing-y-16"
+            >
+              <thead>
+                <tr>
+                  <th>{radius}</th>
+                  <th>Default</th>
+                  <th>Hover</th>
+                  <th>Focus</th>
+                  <th>Disabled</th>
+                </tr>
+              </thead>
+              <tbody>
+                {variantOptions.map((variant) => (
+                  <tr key={variant}>
+                    <td>
+                      <Code variant="label" className="text-foreground-neutral-subtle">
+                        {variant}
+                      </Code>
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        className="hover"
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        className="focus"
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        disabled
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+Variants.parameters = {
+  pseudo: {
+    hover: '.hover',
+    focusVisible: '.focus',
+  },
+};
+
+export const Muted: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Normal:</Code>
+        <IconButton {...args} icon="addLine" aria-label="Add" />
+        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" />
+      </div>
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Muted:</Code>
+        <IconButton {...args} icon="addLine" aria-label="Add" muted />
+        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" muted />
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: ({children: _children, ...args}) => (
+    <div className="flex flex-col gap-16">
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Rounded:</Code>
+        {sizeOptions.map((size) => (
+          <IconButton
+            {...args}
+            key={size}
+            icon="addLine"
+            aria-label="Add"
+            size={size}
+            radius="rounded"
+          />
+        ))}
+      </div>
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Full:</Code>
+        {sizeOptions.map((size) => (
+          <IconButton
+            {...args}
+            key={size}
+            icon="addLine"
+            aria-label="Add"
+            size={size}
+            radius="full"
+          />
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/components/button/icon-button.tsx

@@ -0,0 +1,69 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon, type IconName} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const iconButtonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+        transparent:
+          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
+      },
+      size: {
+        '2xs': 'w-20 h-20 text-xs',
+        xs: 'w-24 h-24 text-xs',
+        sm: 'w-28 h-28 text-sm',
+        md: 'w-32 h-32 text-md',
+        lg: 'w-36 h-36 text-lg',
+        xl: 'w-40 h-40 text-xl',
+      },
+      radius: {
+        rounded: 'rounded-6',
+        full: 'rounded-full',
+      },
+      muted: {
+        true: 'opacity-60',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+      radius: 'rounded',
+      muted: false,
+    },
+  },
+);
+
+export function IconButton({
+  className,
+  variant,
+  size,
+  radius,
+  muted,
+  asChild = false,
+  children,
+  icon,
+  ...props
+}: ComponentProps<'button'> &
+  VariantProps<typeof iconButtonVariants> & {
+    asChild?: boolean;
+    icon?: IconName;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="icon-button"
+      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}
+      {...props}
+    >
+      {icon ? <Icon name={icon} /> : children}
+    </Comp>
+  );
+}

package/src/components/button/index.ts

@@ -1 +1,3 @@
 export * from './button';
+export * from './button-link';
+export * from './icon-button';

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

@@ -49,8 +49,11 @@ export function CodeContent({
             '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',
         )}
       >
-        {lines.map((line) => (
-          <span className="line px-12 w-full relative font-code text-xs leading-20" key={line}>
+        {lines.map((line, index) => (
+          <span
+            className="line px-12 w-full relative font-code text-xs leading-20"
+            key={`${index}-${line}`}
+          >
             {line}
           </span>
         ))}

package/src/components/icon/icon.tsx

@@ -1,5 +1,7 @@
 import {
   type RemixiconComponentType,
+  RiAddLine,
+  RiArrowRightSLine,
   RiCheckLine,
   RiCloseLine,
   RiFileCopyLine,
@@ -56,6 +58,8 @@ const iconsMap = {
   money: RiMoneyDollarCircleLine,
   homeSmile: RiHomeSmileFill,
   copy: RiFileCopyLine,
+  addLine: RiAddLine,
+  chevronRight: RiArrowRightSLine,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;

package/src/onboarding/sign-in.stories.tsx

@@ -0,0 +1,73 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Avatar} from 'components/avatar';
+import {Button} from 'components/button';
+import {Header, Text} from 'components/typography';
+
+const meta = {
+  title: 'Onboarding/Signin',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async (ctx) => {
+    await argosScreenshot(ctx, 'example-screenshot');
+  },
+  render: () => {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background-subtle-base">
+        {/* Background illustration - simplified decorative element */}
+        <div className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 -translate-y-[120px]">
+          <div
+            className="h-[332px] w-[800px] opacity-20"
+            style={{
+              backgroundImage: `radial-gradient(circle, rgba(255, 75, 0, 0.3) 1px, transparent 1px)`,
+              backgroundSize: '24px 24px',
+              backgroundPosition: '-80px 31px',
+            }}
+          />
+        </div>
+
+        {/* Main content */}
+        <div className="relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24">
+          {/* Logo and title section */}
+          <div className="flex flex-col items-center gap-16">
+            <Avatar content="logo" size="xl" radius="rounded" logoName="shipfox" />
+            <div className="flex min-w-[128px] flex-col items-center gap-4 text-center">
+              <Header
+                variant="h1"
+                className="text-[28px] font-medium leading-[44px] text-foreground-neutral-base"
+              >
+                Connect to Shipfox
+              </Header>
+              <Text
+                size="sm"
+                className="text-sm font-normal leading-[24px] text-foreground-neutral-subtle"
+              >
+                Log in to access Shipfox.
+              </Text>
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex w-full flex-col gap-20">
+            <Button variant="primary" size="md" iconLeft="google" className="w-full">
+              Continue with Google
+            </Button>
+            <Button variant="primary" size="md" iconLeft="microsoft" className="w-full">
+              Continue with Microsoft
+            </Button>
+            <Button variant="transparent" size="md" className="w-full">
+              Connect with Enterprise SSO
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/vitest.config.ts

@@ -1,6 +1,14 @@
+import * as path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {argosVitestPlugin} from '@argos-ci/storybook/vitest-plugin';
 import {defineConfig} from '@shipfox/vitest';
+import {storybookTest} from '@storybook/addon-vitest/vitest-plugin';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
+import {playwright} from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
 // https://vitejs.dev/config/
 export default defineConfig(
@@ -8,9 +16,28 @@ export default defineConfig(
     plugins: [react(), tailwindcss()],
     css: {},
     test: {
-      environment: 'jsdom',
-      setupFiles: ['./test/setup.ts'],
-      globalSetup: './test/global.ts',
+      projects: [
+        {
+          extends: true,
+          plugins: [
+            storybookTest({configDir: path.join(dirname, '.storybook')}),
+            argosVitestPlugin({
+              uploadToArgos: !!process.env.CI,
+              token: process.env.ARGOS_TOKEN,
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            browser: {
+              enabled: true,
+              headless: true,
+              provider: playwright(),
+              instances: [{browser: 'chromium'}],
+            },
+            setupFiles: ['.storybook/vitest.setup.ts'],
+          },
+        },
+      ],
     },
   },
   import.meta.url,