CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: catch up Storybook preview, coverage, and story hygiene

Browse Source 
Stories were throwing without AuthModal/CreateFlow providers, autodocs was a no-op, and several DS/create-flow screens had no stories.
This commit is contained in:
adilallo
2026-08-17 19:25:46 -06:00
parent 1983a67ffd
commit db1581337c
44 changed files with 1215 additions and 932 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/modals/Login.stories.tsx
+15 -12
View File
@@ -1,6 +1,9 @@
import React, { Suspense, useEffect } from "react";
import Login from "../../app/components/modals/Login";
import LoginForm from "../../app/components/modals/Login/LoginForm";
import messages from "../../messages/en/index";
const backToHome = messages.pages.login.backToHome;
/**
* Storybook runs outside Next.js request context; successful "Send link" needs fetch mocked
@@ -43,11 +46,11 @@ function FakeMarketingPageBehindOverlay({
return (
<div className="relative min-h-[100dvh] overflow-hidden">
<div
className="absolute inset-0 bg-gradient-to-br from-amber-100 via-white to-amber-50"
className="absolute inset-0 bg-[var(--color-surface-inverse-brand-primary)]"
aria-hidden
/>
<div className="relative z-0 px-8 py-16">
<p className="font-inter max-w-md text-lg text-neutral-800">
<p className="max-w-md text-large-paragraph text-[var(--color-content-invert-primary)]">
Placeholder page content — the login overlay portals above this and
uses backdrop blur (`blurredYellow`).
</p>
@@ -107,13 +110,13 @@ export const HeaderOverlayBlurred = {
belowCard={
<a
href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
className="text-center text-small-paragraph text-[var(--color-content-invert-tertiary)] hover:opacity-90"
>
← Back to home
{backToHome}
</a>
}
>
<Suspense fallback={<p className="font-inter p-6">Loading…</p>}>
<Suspense fallback={<p className="p-6 text-small-paragraph">Loading…</p>}>
<LoginForm />
</Suspense>
</Login>
@@ -152,13 +155,13 @@ export const FullPageRouteSolid = {
belowCard={
<a
href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
className="text-center text-small-paragraph text-[var(--color-content-invert-tertiary)] hover:opacity-90"
>
← Back to home
{backToHome}
</a>
}
>
<Suspense fallback={<p className="font-inter p-6">Loading…</p>}>
<Suspense fallback={<p className="p-6 text-small-paragraph">Loading…</p>}>
<LoginForm />
</Suspense>
</Login>
@@ -178,15 +181,15 @@ export const ModalChromeOnly = {
belowCard={
<a
href="/"
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
className="text-center text-small-paragraph text-[var(--color-content-invert-tertiary)] hover:opacity-90"
>
← Back to home
{backToHome}
</a>
}
>
<p
id="login-modal-heading"
className="font-inter px-2 py-4 text-[var(--color-content-default-primary)]"
className="px-2 py-4 text-[var(--color-content-default-primary)]"
>
Placeholder body — use &quot;Header overlay&quot; or &quot;Full-page
route&quot; for the real flow.
@@ -215,7 +218,7 @@ export const FormOnly = {
],
render: () => (
<div className="mx-auto max-w-[560px] rounded-[20px] bg-[var(--color-surface-default-primary)] p-6 shadow-lg">
<Suspense fallback={<p className="font-inter">Loading…</p>}>
<Suspense fallback={<p className="text-small-paragraph">Loading…</p>}>
<LoginForm />
</Suspense>
</div>