ADS3-Design-System/src/components/templates/CenteredPage/CenteredPage.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import { CenteredPage } from './CenteredPage'
import { TopBar } from '@/components/organisms/TopBar/TopBar'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/molecules/Card/Card'
import { Input } from '@/components/atoms/Input/Input'
import { Button } from '@/components/atoms/Button/Button'
import { Checkbox } from '@/components/atoms/Checkbox/Checkbox'
import { Alert } from '@/components/molecules/Alert/Alert'
import { NswLogo } from '@/components/templates/_story-helpers'

const meta: Meta<typeof CenteredPage> = {
  title: 'Templates/CenteredPage',
  component: CenteredPage,
  tags: ['autodocs', 'template'],
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component: 'Full-page layout with no sidebar and horizontally/vertically centered content. Use for login, sign-up, error pages, onboarding, or any focused single-task flow.',
      },
    },
  },
}
export default meta

type Story = StoryObj<typeof CenteredPage>

export const Login: Story = {
  name: 'Login page',
  render: () => (
    <CenteredPage
      topBar={<TopBar title="" leading={<div className="flex size-14 items-center justify-center"><NswLogo /></div>} />}
    >
      <Card variant="elevated">
        <CardHeader>
          <CardTitle>Sign in</CardTitle>
          <CardDescription>Enter your credentials to access your account.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Input label="Email address" type="email" placeholder="you@example.com" />
          <Input label="Password" type="password" placeholder="Enter your password" />
          <div className="flex items-center justify-between">
            <Checkbox label="Remember me" />
            <a href="#" className="text-small text-info hover:underline">Forgot password?</a>
          </div>
        </CardContent>
        <CardFooter className="flex-col gap-3">
          <Button className="w-full">Sign in</Button>
          <p className="text-center text-small text-text-secondary">
            Don't have an account? <a href="#" className="text-info hover:underline">Create one</a>
          </p>
        </CardFooter>
      </Card>
    </CenteredPage>
  ),
}

export const ErrorPage: Story = {
  name: 'Error page',
  render: () => (
    <CenteredPage
      topBar={<TopBar title="" leading={<div className="flex size-14 items-center justify-center"><NswLogo /></div>} />}
      maxWidth="sm"
    >
      <div className="flex flex-col items-center text-center">
        <p className="text-[72px] font-bold leading-none text-primary">404</p>
        <h1 className="mt-4 text-h2 font-bold text-text">Page not found</h1>
        <p className="mt-2 text-body text-text-secondary">
          The page you're looking for doesn't exist or has been moved.
        </p>
        <div className="mt-6 flex gap-3">
          <Button variant="secondary">Go back</Button>
          <Button>Home</Button>
        </div>
      </div>
    </CenteredPage>
  ),
}

export const Onboarding: Story = {
  name: 'Onboarding step',
  render: () => (
    <CenteredPage
      topBar={<TopBar title="Getting Started" leading={<div className="flex size-14 items-center justify-center"><NswLogo /></div>} />}
      maxWidth="lg"
    >
      <Card variant="surface">
        <CardHeader>
          <CardTitle>Welcome to the platform</CardTitle>
          <CardDescription>Let's set up your workspace. This will only take a minute.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Alert variant="info" title="Step 1 of 3">
            Tell us about your organisation so we can customise your experience.
          </Alert>
          <Input label="Organisation name" placeholder="Enter your organisation name" />
          <Input label="Your role" placeholder="e.g. Manager, Coordinator" />
        </CardContent>
        <CardFooter>
          <div className="flex w-full justify-between">
            <Button variant="tertiary">Skip for now</Button>
            <Button>Continue</Button>
          </div>
        </CardFooter>
      </Card>
    </CenteredPage>
  ),
}