@flamingo-stack/openframe-frontend-core 0.0.585 → 0.0.586-snapshot.20260903151444

package/src/components/features/auth/login-form.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import type { KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
+import { AlertTriangleIcon } from '../../icons-v2-generated/interface/alert-triangle-icon';
+import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
+import { LabeledDivider } from './labeled-divider';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 
@@ -11,8 +14,6 @@ export interface LoginFormProps {
   /** Controlled email value */
   email: string;
   onEmailChange: (value: string) => void;
-  /** Enter-key handler on the email field (optional). */
-  onSubmit?: () => void;
   emailPlaceholder?: string;
   loading?: boolean;
   disabled?: boolean;
@@ -22,8 +23,8 @@ export interface LoginFormProps {
   /** Informational status under the email field (e.g. live tenant discovery). `errors.email` wins. */
   emailStatus?: { message: string; variant: 'error' | 'warning' | 'success' | 'muted' };
   /**
-   * SSO providers rendered below the email field. Always visible; gate
-   * clickability with `ssoDisabled` / `ssoEnabledProviders`.
+   * SSO providers, rendered ABOVE the email field with a divider between the two. Always visible;
+   * gate clickability with `ssoDisabled` / `ssoEnabledProviders`.
    */
   ssoProviders: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
@@ -31,21 +32,44 @@ export interface LoginFormProps {
   ssoDisabled?: boolean;
   /** When set, only these providers are clickable; the rest stay disabled. */
   ssoEnabledProviders?: AuthSsoProvider[];
-  /** Verb prefix for provider buttons, e.g. "Continue with". Ignored for "openframe". */
+  /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
+  /** Label on the divider between the provider buttons and the email field. */
+  dividerLabel?: string;
+  /**
+   * The discovered tenant's own SSO options, rendered UNDER the email field — unlike `ssoProviders`
+   * above, these depend on knowing the tenant, so they cannot be offered before an address is
+   * typed. Shares `onSsoClick`.
+   *
+   * Three states, and the empty array is not the same as nothing: `undefined` means discovery has
+   * not resolved a tenant yet and the slot stays empty, while `[]` means it resolved and the tenant
+   * has none — which is an answer worth showing rather than silence.
+   */
+  customSsoProviders?: AuthSsoProvider[];
+  /** Shown in place of the custom SSO buttons when the resolved tenant has none configured. */
+  noCustomSsoLabel?: string;
+  /** Primary submit under the email field. Omit the handler to hide the button. */
+  onSubmitClick?: () => void;
+  submitLabel?: string;
+  /** Disables just the primary submit (fields stay editable). */
+  submitDisabled?: boolean;
+  /** Overrides the default heading. */
+  title?: string;
+  /** Overrides the default sub-heading. */
+  subtitle?: ReactNode;
   className?: string;
 }
 
 /**
  * Login form (Login tab). Presentational + controlled — the consumer owns
- * state, validation and discovery. Single-screen design: the email field and
- * the SSO provider buttons are always visible; the buttons unlock once the
- * consumer validates the email (real-time tenant discovery).
+ * state, validation and discovery. Single-screen design: the provider buttons come first and need
+ * nothing typed, then the email field below them. Whether the providers are gated is the
+ * consumer's call via `ssoDisabled`; the identity-first flows leave them open, because the server
+ * resolves the tenant from the identity the provider asserts.
  */
 export function LoginForm({
   email,
   onEmailChange,
-  onSubmit,
   emailPlaceholder = 'username@mail.com',
   loading = false,
   disabled = false,
@@ -56,6 +80,14 @@ export function LoginForm({
   ssoDisabled = false,
   ssoEnabledProviders,
   ssoActionLabel = 'Continue with',
+  dividerLabel = 'or continue with OpenFrame SSO',
+  customSsoProviders,
+  noCustomSsoLabel = 'No additional SSO configurations for this domain',
+  onSubmitClick,
+  submitLabel = 'Continue',
+  submitDisabled = false,
+  title = 'Login to OpenFrame',
+  subtitle = 'Enter your email to access your organization.',
   className,
 }: LoginFormProps) {
   const fieldDisabled = disabled || loading;
@@ -63,10 +95,11 @@ export function LoginForm({
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
 
+  // Enter drives the same action as the visible button, under the same gate. A form with no
+  // submit (the Login tab, where the providers are the only way on) simply does nothing.
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !fieldDisabled) {
-      onSubmit?.();
-    }
+    if (event.key !== 'Enter' || fieldDisabled || submitDisabled) return;
+    onSubmitClick?.();
   };
 
   return (
@@ -78,10 +111,25 @@ export function LoginForm({
     >
       {/* Header */}
       <div className="flex flex-col">
-        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">Login to OpenFrame</h1>
-        <p className="text-ods-text-secondary text-h4">Enter your email to access your organization.</p>
+        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">{title}</h1>
+        <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </div>
 
+      {/* Providers come FIRST. They need nothing typed, and putting the email above them taught
+          people to fill it in before tapping one — the behaviour that made a provider button look
+          broken while it waited on a field it never needed. */}
+      {ssoProviders.length > 0 && (
+        <SsoProviderButtons
+          providers={ssoProviders}
+          onSsoClick={onSsoClick}
+          actionLabel={ssoActionLabel}
+          disabled={disabled || loading || ssoDisabled}
+          enabledProviders={ssoEnabledProviders}
+        />
+      )}
+
+      {ssoProviders.length > 0 && <LabeledDivider label={dividerLabel} />}
+
       {/* Email */}
       <Input
         type="email"
@@ -96,14 +144,45 @@ export function LoginForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* SSO providers — always visible, unlocked by the consumer */}
-      <SsoProviderButtons
-        providers={ssoProviders}
-        onSsoClick={onSsoClick}
-        actionLabel={ssoActionLabel}
-        disabled={disabled || loading || ssoDisabled}
-        enabledProviders={ssoEnabledProviders}
-      />
+      {customSsoProviders &&
+        (customSsoProviders.length > 0 ? (
+          <SsoProviderButtons
+            providers={customSsoProviders}
+            onSsoClick={onSsoClick}
+            actionLabel={ssoActionLabel}
+            disabled={disabled || loading}
+          />
+        ) : (
+          // Same footprint as the button it stands in for, so nothing shifts when a tenant does
+          // have options. Tokens are the design's: soft-grey surface, grey text and icon, the
+          // bold-body step, a 24px icon, and 12/16 for the inset and the gap.
+          <div
+            role="status"
+            className="flex h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:h-12"
+          >
+            <AlertTriangleIcon className="h-6 w-6 shrink-0" />
+            {noCustomSsoLabel}
+          </div>
+        ))}
+
+      {onSubmitClick && (
+        // Full width on a phone, half the row and right-aligned from `md` up, matching the design.
+        // The spacer, rather than a width on the button, keeps it flush with the fields' right edge.
+        <div className="flex items-center gap-[var(--spacing-system-l)]">
+          <div className="hidden flex-1 md:block" />
+          <Button
+            type="button"
+            variant="accent"
+            fullWidth
+            className="md:flex-1"
+            loading={loading}
+            disabled={submitDisabled || fieldDisabled}
+            onClick={onSubmitClick}
+          >
+            {submitLabel}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/features/auth/openframe-sso-signup-form.tsx

@@ -5,7 +5,7 @@ import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
-import { PasswordInput } from '../../ui/password-input';
+import { AccountDetailsFields } from './account-details-fields';
 
 export interface OpenFrameSsoSignUpFormProps {
   /** Controlled field values */
@@ -75,10 +75,6 @@ export function OpenFrameSsoSignUpForm({
 
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
-  const firstNameErr = useDeferredError(errors?.firstName, firstName);
-  const lastNameErr = useDeferredError(errors?.lastName, lastName);
-  const passwordErr = useDeferredError(errors?.password, password);
-  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword);
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
@@ -111,45 +107,17 @@ export function OpenFrameSsoSignUpForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* Name + password fields — single column on every breakpoint */}
-      <Input
-        label="First Name"
-        placeholder="Enter First Name"
-        value={firstName}
-        error={firstNameErr.error}
-        disabled={fieldsDisabled}
-        onBlur={firstNameErr.onBlur}
-        onChange={event => onFirstNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <Input
-        label="Last Name"
-        placeholder="Enter Last Name"
-        value={lastName}
-        error={lastNameErr.error}
-        disabled={fieldsDisabled}
-        onBlur={lastNameErr.onBlur}
-        onChange={event => onLastNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Password"
-        placeholder="Enter Password"
-        value={password}
-        error={passwordErr.error}
-        disabled={fieldsDisabled}
-        onBlur={passwordErr.onBlur}
-        onChange={event => onPasswordChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Confirm Password"
-        placeholder="Confirm Password"
-        value={confirmPassword}
-        error={confirmErr.error}
+      <AccountDetailsFields
+        firstName={firstName}
+        lastName={lastName}
+        password={password}
+        confirmPassword={confirmPassword}
+        onFirstNameChange={onFirstNameChange}
+        onLastNameChange={onLastNameChange}
+        onPasswordChange={onPasswordChange}
+        onConfirmPasswordChange={onConfirmPasswordChange}
+        errors={errors}
         disabled={fieldsDisabled}
-        onBlur={confirmErr.onBlur}
-        onChange={event => onConfirmPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
 

package/src/components/features/auth/sso-providers.tsx

@@ -12,7 +12,7 @@ export type AuthSsoProvider = 'openframe' | 'google' | 'microsoft' | 'apple';
 
 export const PROVIDER_META: Record<AuthSsoProvider, { name: string; Icon: ComponentType<{ className?: string }> }> = {
   openframe: {
-    name: 'OpenFrame SSO',
+    name: 'OpenFrame',
     Icon: ({ className }) => (
       <OpenFrameLogo
         className={className}
@@ -29,7 +29,7 @@ export const PROVIDER_META: Record<AuthSsoProvider, { name: string; Icon: Compon
 export interface SsoProviderButtonsProps {
   providers: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
-  /** Verb prefix for provider buttons, e.g. "Continue with". Ignored for "openframe". */
+  /** Verb prefix for provider buttons, e.g. "Continue with". */
   actionLabel?: string;
   disabled?: boolean;
   /**
@@ -65,7 +65,7 @@ export function SsoProviderButtons({
             leftIcon={<Icon className="h-5 w-5" />}
             onClick={() => onSsoClick?.(provider)}
           >
-            {provider === 'openframe' ? meta.name : `${actionLabel} ${meta.name}`}
+            {`${actionLabel} ${meta.name}`}
           </Button>
         );
       })}

package/src/components/ui/__tests__/data-table-compiler-identity.test.tsx

@@ -0,0 +1,74 @@
+import type { ColumnDef, Table } from '@tanstack/react-table';
+import { render, renderHook, screen } from '@testing-library/react';
+import { memo } from 'react';
+import { describe, expect, it } from 'vitest';
+import { DataTable } from '../data-table';
+import { useDataTable } from '../data-table/use-data-table';
+
+/**
+ * What this pins down: `useDataTable` must hand back a NEW reference on every
+ * render, because `useReactTable` creates one instance for the life of the
+ * component and mutates it in place.
+ *
+ * Everything inside `<DataTable>` reads its rows back out of that instance
+ * through context, so a caller compiled by the React Compiler caches
+ * `<DataTable table={table}>` and its children on the table's identity — which
+ * never changes — and a table that gains rows renders nothing new. On an
+ * infinite-scroll table that is a request loop: the sentinel never moves down,
+ * so `DataTable.InfiniteFooter` keeps asking for the next page.
+ *
+ * `CachedTable` below stands in for that compiled caller. `memo` bails out on
+ * identical props exactly like the compiler's `if ($[n] !== table)` guard.
+ */
+
+interface Row {
+  id: string;
+  name: string;
+}
+
+const COLUMNS: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name', cell: ({ row }) => row.original.name }];
+
+const getRowId = (row: Row) => row.id;
+
+function rows(count: number): Row[] {
+  return Array.from({ length: count }, (_, i) => ({ id: `r${i}`, name: `row-${i}` }));
+}
+
+const CachedTable = memo(function CachedTableImpl({ table }: { table: Table<Row> }) {
+  return (
+    <DataTable table={table}>
+      <DataTable.Body<Row> />
+    </DataTable>
+  );
+});
+
+function TableHost({ data }: { data: Row[] }) {
+  const table = useDataTable<Row>({ data, columns: COLUMNS, getRowId });
+  return <CachedTable table={table} />;
+}
+
+describe('useDataTable identity', () => {
+  it('lets a consumer memoized on the table render rows that arrived later', () => {
+    const { rerender } = render(<TableHost data={rows(2)} />);
+    expect(screen.getAllByText(/^row-\d$/)).toHaveLength(2);
+
+    rerender(<TableHost data={rows(4)} />);
+    expect(screen.getAllByText(/^row-\d$/)).toHaveLength(4);
+  });
+
+  it('forwards reads and writes to the single underlying instance', () => {
+    const { result, rerender } = renderHook(({ data }) => useDataTable<Row>({ data, columns: COLUMNS, getRowId }), {
+      initialProps: { data: rows(3) },
+    });
+
+    const first = result.current;
+    expect(first.getRowModel().rows).toHaveLength(3);
+    // A write through one handle must be visible through the next one.
+    first.setOptions(prev => ({ ...prev, meta: { probed: true } }));
+
+    rerender({ data: rows(5) });
+    expect(result.current).not.toBe(first);
+    expect(result.current.getRowModel().rows).toHaveLength(5);
+    expect(result.current.options.meta).toEqual({ probed: true });
+  });
+});

package/src/components/ui/data-table/use-data-table.ts

@@ -98,7 +98,12 @@ export function useDataTable<T>({
   getFilteredRowModel: getFilteredRowModelOverride,
   ...rest
 }: UseDataTableOptions<T>): Table<T> {
-  return useReactTable<T>({
+  // Opted out of the React Compiler on purpose — see the handle published at the
+  // end of this function. Nothing here is worth memoizing anyway: `setOptions`
+  // runs on every render regardless.
+  'use no memo';
+
+  const table = useReactTable<T>({
     ...rest,
     getCoreRowModel: coreRowModelFactory as TableOptions<T>['getCoreRowModel'],
     getSortedRowModel: clientSideSorting
@@ -110,4 +115,34 @@ export function useDataTable<T>({
     manualSorting: manualSorting ?? !clientSideSorting,
     manualFiltering: manualFiltering ?? !clientSideFiltering,
   });
+
+  // A fresh handle per render, and the reason this hook doesn't just return
+  // `useReactTable`'s value.
+  //
+  // `useReactTable` creates ONE instance for the life of the component and
+  // mutates it in place, so its identity is the same object whether a page of
+  // rows just arrived or nothing happened at all. Every consumer reads rows and
+  // state back out of that instance through context (`DataTable.Body`,
+  // `.Header`, `.RowCount`, `.CursorFooter`) — which worked only because the
+  // caller re-rendered and rebuilt their elements.
+  //
+  // Under the React Compiler it stops working, because the compiler caches on
+  // identity: `<DataTable table={table}>` and its children get cached on
+  // `table`, and inside the compiled `DataTableBody` the entire body —
+  // `table.getRowModel().rows` included — sits behind a `$[n] !== table` guard.
+  // A table that gains rows then renders nothing new. On an infinite-scroll
+  // table that is a loop: the sentinel never moves down, so
+  // `DataTable.InfiniteFooter` asks for the next page forever.
+  //
+  // The proxy forwards every read, write and TanStack mutation to that single
+  // instance, so nothing about the table's behaviour changes — only its
+  // identity, which is what puts it back inside React's reactive graph.
+  //
+  // The `use no memo` at the top of this hook is what keeps it a FRESH handle:
+  // without it the compiler caches this very object on `table` and hands back
+  // the same one forever, i.e. the bug. Keying a `useMemo` on
+  // `getRowModel()`/`getState()` instead is not better — `useReactTable`
+  // rebuilds `options.state` on every render anyway, so it would republish just
+  // as often while reading as though it did not.
+  return new Proxy(table, {});
 }

package/src/stories/auth/Login.stories.tsx

@@ -48,8 +48,7 @@ function LoginPage(initial: Partial<LoginFormProps>) {
           email={email}
           onEmailChange={setEmail}
           submitDisabled={!isValid}
-          onSubmit={() => {}}
-          onForgotPassword={() => {}}
+          onSubmitClick={() => {}}
         />
       ) : (
         <div className="flex min-h-[240px] items-center justify-center rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)] text-ods-text-secondary text-h4">
@@ -70,9 +69,20 @@ export const Filled: Story = {
   render: () => <LoginPage email="roman@mail.com" />,
 };
 
-const SSO_PROVIDERS: AuthSsoProvider[] = ['openframe', 'google', 'microsoft', 'apple'];
+/** The generic providers, which need nothing typed and render above the email field. */
+const SSO_PROVIDERS: AuthSsoProvider[] = ['google', 'microsoft', 'apple'];
 
-/** SSO configured: email filled, submit replaced by provider buttons. */
+/** Providers above the email field, before anything is typed. */
 export const SSO: Story = {
-  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} />,
+  render: () => <LoginPage ssoProviders={SSO_PROVIDERS} />,
+};
+
+/** Discovery resolved a tenant that has its own SSO: its options appear under the email. */
+export const CustomSso: Story = {
+  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} customSsoProviders={['openframe']} />,
+};
+
+/** Discovery resolved a tenant with none configured — the empty array is the answer, not silence. */
+export const NoCustomSso: Story = {
+  render: () => <LoginPage email="roman@mail.com" ssoProviders={SSO_PROVIDERS} customSsoProviders={[]} />,
 };