Storybook stories for the `CreateOrganizationForm` auth component, covering empty, filled, error, and SSO states within a full-page `AuthShell` layout. ## Key Components | Export | Type | Description | |---|---|---| | `Empty` | `Story` | Default state with empty fields, terms unchecked, and submit disabled | | `Filled` | `Story` | Pre-filled valid input with terms accepted and submit enabled | | `ErrorState` | `Story` | Validation error messages on email and organization name fields | | `SSO` | `Story` | SSO provider buttons replace standard submit; fields are disabled | | `CreateOrganizationPage` | Internal helper | Controlled wrapper composing `AuthShell`, `TabSelector`, and `CreateOrganizationForm` | ## Usage Example ```typescript // Render the Filled story directly in another Storybook file import { Filled } from './CreateOrganization.stories' export const MyStory = { render: () => , } ``` ```typescript // Replicate the SSO story setup in a test or custom harness import { CreateOrganizationForm, AuthShell } from '../../components/features/auth' import type { AuthSsoProvider } from '../../components/features/auth' const providers: AuthSsoProvider[] = ['openframe', 'google', 'microsoft'] }> {}} /> ``` ## Notes - Stories are rendered inside `AuthShell` with `layout: 'fullscreen'` to accurately reflect the two-column desktop / stacked mobile responsive layout. Use the Storybook viewport toolbar to verify breakpoints. - Submit is gated on all three fields being non-empty **and** `agreedToTerms` being `true` — reflected in the `Empty` vs `Filled` stories. - The `Login` tab renders a placeholder panel; its implementation is deferred to a later step. **Source:** [`CreateOrganization.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/CreateOrganization.stories.tsx)