Storybook stories for the OpenFrame SSO authentication screens, showcasing both Login and Sign Up flows within the `SsoAuthShell` layout using controlled, interactive form components. ## Key Components | Export | Type | Description | |---|---|---| | `LoginEmpty` | `Story` | Login form with empty fields; submit disabled | | `LoginFilled` | `Story` | Login form pre-filled with email and password; submit enabled | | `SignUpEmpty` | `Story` | Sign Up form with empty fields; submit disabled | | `SignUpFilled` | `Story` | Sign Up form pre-filled with all valid fields; submit enabled | | `SsoLoginPage` | Helper component | Controlled wrapper for `OpenFrameSsoLoginForm` inside `SsoAuthShell` | | `SsoSignUpPage` | Helper component | Controlled wrapper for `OpenFrameSsoSignUpForm` inside `SsoAuthShell` | ## Usage Example ```typescript // Render the filled login story directly in Storybook import { LoginFilled } from './OpenFrameSso.stories' // Or compose the controlled helper in your own tests/previews import { useState } from 'react' import { OpenFrameSsoLoginForm, SsoAuthShell } from '../../components/features/auth' function MyLoginPreview() { const [email, setEmail] = useState('') const [password, setPassword] = useState('') return ( {}} onForgotPassword={() => {}} submitDisabled={!email.trim() || !password} /> ) } ``` ## Story Validation Logic Both helper components derive `submitDisabled` locally — no external state management required: - **Login:** enabled when `email` is non-empty and `password.length > 0` - **Sign Up:** enabled when all five fields are filled, `password.length >= 8`, and `password === confirmPassword` ## Notes - All `onSubmit` and `onForgotPassword` handlers are no-ops (`() => {}`) — stories are purely presentational - `SsoAuthShell` provides the full-screen centered layout: logo top, card centered, "Powered by Flamingo" footer - Stories are tagged `autodocs` for automatic Storybook documentation generation **Source:** [`OpenFrameSso.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/OpenFrameSso.stories.tsx)