@shipfox/client-auth 17.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -39,10 +39,10 @@
     "@shipfox/api-auth-dto": "12.0.0",
     "@shipfox/api-workspaces-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-invitations": "17.0.0",
-    "@shipfox/client-ui": "17.0.0",
-    "@shipfox/react-ui": "1.2.0",
-    "@shipfox/client-shell": "17.0.0"
+    "@shipfox/client-invitations": "22.0.0",
+    "@shipfox/client-shell": "22.0.0",
+    "@shipfox/client-ui": "22.0.0",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/pages/workspace-onboarding-page.test.tsx

@@ -66,7 +66,7 @@ describe('WorkspaceOnboardingPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderAuthPage(
+    const {container} = renderAuthPage(
       '/',
       <AuthGuard>
         <WorkspaceGuard>
@@ -74,7 +74,13 @@ describe('WorkspaceOnboardingPage', () => {
         </WorkspaceGuard>
       </AuthGuard>,
     );
-    fireEvent.change(await screen.findByLabelText('Workspace name'), {
+    const workspaceName = await screen.findByLabelText('Workspace name');
+    expect(container.querySelector('[data-slot="panel-header"]')).toHaveAttribute(
+      'data-variant',
+      'plain',
+    );
+    expect(container.querySelector('[data-slot="panel-body"]')).toBeInTheDocument();
+    fireEvent.change(workspaceName, {
       target: {value: '  Acme  '},
     });
     fireEvent.click(screen.getByRole('button', {name: 'Create workspace'}));
@@ -111,13 +117,17 @@ describe('WorkspaceOnboardingPage', () => {
     const slug = screen.getByLabelText('Workspace slug');
     expect(screen.getByText(`${window.location.origin}/w/acme`)).toBeInTheDocument();
     fireEvent.change(name, {target: {value: 'Acme Labs'}});
-    expect(slug).toHaveValue('acme-labs');
-    expect(screen.getByText(`${window.location.origin}/w/acme-labs`)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(slug).toHaveValue('acme-labs');
+      expect(screen.getByText(`${window.location.origin}/w/acme-labs`)).toBeInTheDocument();
+    });
 
     fireEvent.change(slug, {target: {value: 'custom-workspace'}});
     fireEvent.change(name, {target: {value: 'Renamed Labs'}});
-    expect(slug).toHaveValue('custom-workspace');
-    expect(screen.getByText(`${window.location.origin}/w/custom-workspace`)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(slug).toHaveValue('custom-workspace');
+      expect(screen.getByText(`${window.location.origin}/w/custom-workspace`)).toBeInTheDocument();
+    });
   });
 
   test('checks a manually edited workspace slug for availability', async () => {

package/src/pages/workspace-onboarding-page.tsx

@@ -1,11 +1,12 @@
 import {slugifyName, slugSchema} from '@shipfox/api-common-dto';
 import {createWorkspaceBodySchema} from '@shipfox/api-workspaces-dto';
+import {FocusedFrame} from '@shipfox/client-shell/runtime';
 import {displayNameFieldError, SlugField} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@shipfox/react-ui/card';
 import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
 import {Icon} from '@shipfox/react-ui/icon';
+import {Panel, PanelBody, PanelHeader, PanelTitle} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
@@ -17,23 +18,6 @@ import {useAuthState} from '#hooks/use-auth-state.js';
 import {lastWorkspaceIdAtom, rememberLastWorkspaceId} from '#state/last-workspace.js';
 import {workspaceOnboardingErrorToFormError} from './form-errors.js';
 
-const previewMetrics = [
-  {label: 'Runs', value: '--'},
-  {label: 'Passed', value: '--'},
-  {label: 'Failed', value: '--'},
-  {label: 'Duration', value: '--'},
-];
-const previewBars = [
-  {id: 'runs-start', height: 32},
-  {id: 'runs-mid-low', height: 48},
-  {id: 'runs-dip', height: 28},
-  {id: 'runs-mid-high', height: 66},
-  {id: 'runs-mid', height: 54},
-  {id: 'runs-peak', height: 82},
-  {id: 'runs-late-low', height: 44},
-  {id: 'runs-late-high', height: 74},
-];
-
 function isSlugValid(value: string): boolean {
   return slugSchema.safeParse(value).success;
 }
@@ -78,8 +62,8 @@ export function WorkspaceOnboardingPage() {
   });
 
   return (
-    <main className="min-h-screen bg-background-subtle-base px-frame py-frame max-[520px]:px-row">
-      <div className="mx-auto flex min-h-[calc(100vh-64px)] w-full max-w-[1120px] flex-col gap-section">
+    <main className="min-h-screen px-frame py-frame max-[520px]:px-row">
+      <FocusedFrame className="flex min-h-[calc(100vh-64px)] flex-col gap-section">
         <header className="flex items-center justify-between">
           <div className="flex items-center gap-inline">
             <div className="flex size-36 items-center justify-center rounded-8 border border-border-neutral-base bg-background-neutral-base shadow-button-neutral">
@@ -91,9 +75,9 @@ export function WorkspaceOnboardingPage() {
           </div>
         </header>
 
-        <section className="grid flex-1 items-center gap-region lg:grid-cols-[minmax(0,440px)_minmax(0,1fr)]">
+        <section className="flex flex-1 items-center">
           <form
-            className="relative z-10 w-full"
+            className="w-full"
             noValidate
             aria-labelledby="workspace-onboarding-title"
             onSubmit={(event) => {
@@ -102,168 +86,114 @@ export function WorkspaceOnboardingPage() {
               void form.handleSubmit();
             }}
           >
-            <Card className="gap-section p-panel shadow-button-neutral">
-              <CardHeader className="gap-inline">
-                <CardTitle id="workspace-onboarding-title" variant="h1">
+            <Panel>
+              <PanelHeader variant="plain" className="flex-col items-start gap-inline">
+                <PanelTitle id="workspace-onboarding-title" variant="h1">
                   Create your workspace
-                </CardTitle>
-                <CardDescription>Give your team a place to collaborate.</CardDescription>
-              </CardHeader>
+                </PanelTitle>
+                <Text size="sm" className="text-foreground-neutral-muted">
+                  Give your team a place to collaborate.
+                </Text>
+              </PanelHeader>
 
-              {formError ? (
-                <Callout role="alert" type="error">
-                  {formError}
-                </Callout>
-              ) : null}
+              <PanelBody className="flex flex-col gap-section p-panel">
+                {formError ? (
+                  <Callout role="alert" type="error">
+                    {formError}
+                  </Callout>
+                ) : null}
 
-              <CardContent className="flex flex-col gap-inline">
-                <form.Field
-                  name="name"
-                  validators={{
-                    onBlur: ({value}) =>
-                      displayNameFieldError(
-                        value,
-                        'Workspace name',
-                        createWorkspaceBodySchema.shape.name,
-                      ),
-                    onSubmit: ({value}) =>
-                      displayNameFieldError(
-                        value,
-                        'Workspace name',
-                        createWorkspaceBodySchema.shape.name,
-                      ),
-                  }}
-                >
-                  {(field) => (
-                    <FormField label="Workspace name" id="workspace-name" error={fieldError(field)}>
-                      <FormFieldInput
-                        autoComplete="organization"
-                        name="name"
-                        placeholder="Acme"
-                        type="text"
+                <div className="flex flex-col gap-inline">
+                  <form.Field
+                    name="name"
+                    validators={{
+                      onBlur: ({value}) =>
+                        displayNameFieldError(
+                          value,
+                          'Workspace name',
+                          createWorkspaceBodySchema.shape.name,
+                        ),
+                      onSubmit: ({value}) =>
+                        displayNameFieldError(
+                          value,
+                          'Workspace name',
+                          createWorkspaceBodySchema.shape.name,
+                        ),
+                    }}
+                  >
+                    {(field) => (
+                      <FormField
+                        label="Workspace name"
+                        id="workspace-name"
+                        error={fieldError(field)}
+                      >
+                        <FormFieldInput
+                          autoComplete="organization"
+                          name="name"
+                          placeholder="Acme"
+                          type="text"
+                          value={field.state.value}
+                          onChange={(event) => {
+                            const name = event.target.value;
+                            field.handleChange(name);
+                            if (!slugTouched) {
+                              form.setFieldValue(
+                                'slug',
+                                name ? slugifyName(name, {fallback: 'workspace'}) : '',
+                              );
+                            }
+                          }}
+                          onBlur={field.handleBlur}
+                        />
+                      </FormField>
+                    )}
+                  </form.Field>
+                  <form.Field
+                    name="slug"
+                    validators={{
+                      onBlur: createWorkspaceBodySchema.shape.slug,
+                      onSubmit: createWorkspaceBodySchema.shape.slug,
+                    }}
+                  >
+                    {(field) => (
+                      <SlugField
+                        id="workspace-slug"
+                        label="Workspace slug"
+                        name="slug"
                         value={field.state.value}
-                        onChange={(event) => {
-                          const name = event.target.value;
-                          field.handleChange(name);
-                          if (!slugTouched) {
-                            form.setFieldValue(
-                              'slug',
-                              name ? slugifyName(name, {fallback: 'workspace'}) : '',
-                            );
-                          }
+                        onChange={(value) => {
+                          setSlugTouched(true);
+                          field.handleChange(value);
                         }}
                         onBlur={field.handleBlur}
+                        error={fieldError(field)}
+                        description={
+                          <span className="break-all font-code">
+                            {`${window.location.origin}/w/${field.state.value || 'acme'}`}
+                          </span>
+                        }
+                        placeholder="acme"
+                        checkEnabled={slugTouched}
+                        isValid={isSlugValid}
+                        checkAvailability={checkWorkspaceSlugAvailability}
                       />
-                    </FormField>
-                  )}
-                </form.Field>
-                <form.Field
-                  name="slug"
-                  validators={{
-                    onBlur: createWorkspaceBodySchema.shape.slug,
-                    onSubmit: createWorkspaceBodySchema.shape.slug,
-                  }}
-                >
-                  {(field) => (
-                    <SlugField
-                      id="workspace-slug"
-                      label="Workspace slug"
-                      name="slug"
-                      value={field.state.value}
-                      onChange={(value) => {
-                        setSlugTouched(true);
-                        field.handleChange(value);
-                      }}
-                      onBlur={field.handleBlur}
-                      error={fieldError(field)}
-                      description={
-                        <span className="break-all font-code">
-                          {`${window.location.origin}/w/${field.state.value || 'acme'}`}
-                        </span>
-                      }
-                      placeholder="acme"
-                      checkEnabled={slugTouched}
-                      isValid={isSlugValid}
-                      checkAvailability={checkWorkspaceSlugAvailability}
-                    />
-                  )}
-                </form.Field>
-              </CardContent>
-
-              <Button
-                className="w-full"
-                iconRight="chevronRight"
-                isLoading={createWorkspace.isPending}
-                type="submit"
-              >
-                {createWorkspace.isPending ? 'Creating workspace...' : 'Create workspace'}
-              </Button>
-            </Card>
-          </form>
+                    )}
+                  </form.Field>
+                </div>
 
-          <div className="hidden flex-col gap-group lg:flex" aria-hidden="true">
-            <div className="grid grid-cols-4 gap-cluster">
-              {previewMetrics.map((metric) => (
-                <div
-                  className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral"
-                  key={metric.label}
+                <Button
+                  className="w-full"
+                  iconRight="chevronRight"
+                  isLoading={createWorkspace.isPending}
+                  type="submit"
                 >
-                  <Text size="xs" className="text-foreground-neutral-muted">
-                    {metric.label}
-                  </Text>
-                  <Text size="xl" bold>
-                    {metric.value}
-                  </Text>
-                </div>
-              ))}
-            </div>
-            <div className="grid grid-cols-2 gap-group">
-              <PreviewPanel title="Performance over time" />
-              <PreviewPanel title="Duration distribution" bars />
-            </div>
-            <div className="flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral">
-              <Text size="sm" bold>
-                Jobs breakdown
-              </Text>
-              <div className="flex flex-col gap-inline">
-                {[0, 1, 2, 3].map((row) => (
-                  <div
-                    className="grid grid-cols-[1fr_80px_80px] gap-cluster border-t border-border-neutral-base pt-[10px]"
-                    key={row}
-                  >
-                    <div className="h-12 rounded-full bg-background-neutral-disabled" />
-                    <div className="h-12 rounded-full bg-background-neutral-disabled" />
-                    <div className="h-12 rounded-full bg-background-neutral-disabled" />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
+                  {createWorkspace.isPending ? 'Creating workspace...' : 'Create workspace'}
+                </Button>
+              </PanelBody>
+            </Panel>
+          </form>
         </section>
-      </div>
+      </FocusedFrame>
     </main>
   );
 }
-
-function PreviewPanel({title, bars = false}: {title: string; bars?: boolean}) {
-  return (
-    <div className="flex flex-col gap-group rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral">
-      <Text size="sm" bold>
-        {title}
-      </Text>
-      <div className="flex h-[220px] items-end gap-inline border-b border-l border-border-neutral-base px-row pb-[10px]">
-        {previewBars.map((bar) => (
-          <div
-            className={
-              bars
-                ? 'w-full rounded-t-4 bg-background-neutral-disabled'
-                : 'w-full rounded-full bg-background-neutral-disabled'
-            }
-            key={`${title}-${bar.id}`}
-            style={{height: `${bar.height}%`}}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/routes/index.tsx

@@ -4,6 +4,7 @@ import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {redirect} from '@tanstack/react-router';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   beforeLoad: ({context}: {context: RouterContext}) => {
     const auth = context.auth;
     if (!auth || auth.isLoading) return;

package/src/routes/login.tsx

@@ -4,6 +4,7 @@ import {LoginPage} from '#pages/login-page.js';
 import {validateRedirectSearch} from './inputs.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: validateRedirectSearch,
   component: () => (
     <GuestGuard>

package/src/routes/logout.tsx

@@ -2,4 +2,8 @@ import {defineRoute} from '@shipfox/client-shell/runtime';
 import {LogoutPage} from '#pages/logout-page.js';
 import {validateRedirectSearch} from './inputs.js';
 
-export default defineRoute({validateSearch: validateRedirectSearch, component: LogoutPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  validateSearch: validateRedirectSearch,
+  component: LogoutPage,
+});

package/src/routes/reset.tsx

@@ -4,6 +4,7 @@ import {PasswordResetPage} from '#pages/password-reset-page.js';
 import {validatePasswordResetSearch} from './inputs.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: validatePasswordResetSearch,
   component: () => (
     <GuestGuard>

package/src/routes/signup.tsx

@@ -4,6 +4,7 @@ import {SignupPage} from '#pages/signup-page.js';
 import {validateRedirectSearch} from './inputs.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: validateRedirectSearch,
   component: () => (
     <GuestGuard>

package/src/routes/workspace-onboarding.tsx

@@ -4,6 +4,7 @@ import {redirect} from '@tanstack/react-router';
 import {WorkspaceOnboardingPage} from '#pages/workspace-onboarding-page.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   beforeLoad: ({context, location}: {context: RouterContext; location: {href: string}}) => {
     const auth = context.auth;
     if (!auth || auth.isLoading) return;