@shipfox/react-ui 0.4.0 → 0.6.0

package/src/components/typography/text.tsx

@@ -24,7 +24,15 @@ export type TextProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>
     bold?: boolean;
   };
 
-export function Text({children, className, size, as, compact, bold, ...props}: TextProps) {
+export function Text({
+  children,
+  className,
+  size,
+  as,
+  compact = true,
+  bold = false,
+  ...props
+}: TextProps) {
   const Component = as ?? 'p';
   return (
     <Component

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useCopyToClipboard';
+export * from './useMediaQuery';
 export * from './useResolvedTheme';
 export * from './useShikiHighlight';
 export * from './useShikiStyleInjection';

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,87 @@
+import {useEffect, useState} from 'react';
+
+class MediaQueryManager {
+  private queries = new Map<string, MediaQueryList>();
+  private listeners = new Map<string, Set<() => void>>();
+  private changeHandlers = new Map<string, () => void>();
+
+  getMatches(query: string): boolean {
+    if (typeof window === 'undefined') return false;
+
+    if (!this.queries.has(query)) {
+      this.queries.set(query, window.matchMedia(query));
+      this.listeners.set(query, new Set());
+    }
+
+    const mediaQuery = this.queries.get(query);
+    return mediaQuery ? mediaQuery.matches : false;
+  }
+
+  subscribe(query: string, callback: () => void): () => void {
+    if (typeof window === 'undefined') {
+      return () => {
+        // Cleanup function for SSR - no-op
+      };
+    }
+
+    if (!this.queries.has(query)) {
+      this.queries.set(query, window.matchMedia(query));
+      this.listeners.set(query, new Set());
+    }
+
+    const mediaQuery = this.queries.get(query);
+    const listeners = this.listeners.get(query);
+
+    if (!mediaQuery || !listeners) {
+      return () => {
+        // Cleanup function - no-op if query wasn't found
+      };
+    }
+
+    listeners.add(callback);
+
+    if (listeners.size === 1) {
+      const changeHandler = () => {
+        for (const cb of listeners) {
+          cb();
+        }
+      };
+      this.changeHandlers.set(query, changeHandler);
+      mediaQuery.addEventListener('change', changeHandler);
+    }
+
+    return () => {
+      listeners.delete(callback);
+
+      if (listeners.size === 0) {
+        const changeHandler = this.changeHandlers.get(query);
+        if (changeHandler) {
+          mediaQuery.removeEventListener('change', changeHandler);
+          this.changeHandlers.delete(query);
+        }
+        this.queries.delete(query);
+        this.listeners.delete(query);
+      }
+    };
+  }
+}
+
+const mediaQueryManager = new MediaQueryManager();
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => mediaQueryManager.getMatches(query));
+
+  useEffect(() => {
+    const updateMatches = () => {
+      setMatches(mediaQueryManager.getMatches(query));
+    };
+
+    const unsubscribe = mediaQueryManager.subscribe(query, updateMatches);
+
+    updateMatches();
+
+    return unsubscribe;
+  }, [query]);
+
+  return matches;
+}

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/tsconfig.build.json

@@ -9,5 +9,11 @@
     "types": ["@shipfox/vite/client"]
   },
   "include": ["src"],
-  "exclude": ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.tsx", "**/*.stories.ts"]
+  "exclude": [
+    "**/*.test.tsx",
+    "**/*.test.ts",
+    "**/*.stories.tsx",
+    "**/*.stories.ts",
+    "**/build-css-entry.ts"
+  ]
 }

package/vite.css.config.ts

@@ -0,0 +1,30 @@
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {defineConfig} from '@shipfox/vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default defineConfig(
+  {
+    plugins: [react(), tailwindcss()],
+    build: {
+      outDir: 'dist',
+      emptyOutDir: false,
+      cssCodeSplit: false,
+      rollupOptions: {
+        input: resolve(__dirname, 'src/build-css-entry.ts'),
+        output: {
+          entryFileNames: 'css-entry.js',
+          assetFileNames: 'styles.css',
+        },
+      },
+    },
+    css: {
+      minify: true,
+    },
+  },
+  import.meta.url,
+);

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,