Add Storybook

[lcaohoanq]

This pull request introduces Storybook integration into the apps/web project, enhances the developer experience for UI component development, and improves the sign-in form's user feedback. The most significant changes include adding Storybook configuration, stories, and dependencies, as well as improving test coverage reporting and sign-in error handling.

Storybook Integration and Configuration:

• Added Storybook configuration files (main.ts, preview.ts) and sample stories (Button.stories.ts, Header.stories.ts, and associated components), enabling isolated UI component development and documentation. Also included a comprehensive Storybook documentation page (Configure.mdx). [1] [2] [3] [4] [5] [6]
• Updated package.json to include Storybook scripts (storybook, build-storybook) and added necessary Storybook-related dependencies. [1] [2]

Testing and CI Improvements:

• Enhanced the GitHub Actions workflow: renamed the test workflow file, clarified step names, ensured coverage is uploaded to Codecov, and restricted branch triggers for improved CI clarity. [1] [2]

Sign-in Form UX Improvements:

• Improved the sign-in form to display a loading spinner overlay during authentication and show error messages when authentication fails, providing better feedback to users. [1] [2] [3]

Linting Configuration:

• Updated ESLint configuration for Storybook compatibility and added the eslint-plugin-storybook dependency. [1] [2]

Summary by CodeRabbit

• Improvements

  • Sign-in form now shows detailed error messages and a full-screen loading overlay during authentication.

• New Features

  • Adds interactive component examples and docs (Button, Header, Page, Login/Signin stories) via Storybook.
  • New UI components and styles for Storybook previews and pages.

• Tests

  • Comprehensive unit and integration tests added for auth, form validation, and utilities.
  • Test setup and coverage reporting configured.

• Chores

  • Updated ignore patterns and example env entry; CI workflows adjusted for coverage uploads.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds Storybook configuration, components, stories, and styles; expands test infrastructure with Vitest and DOM mocks; integrates Codecov reporting and GitHub Actions; enhances SignInForm error/OAuth handling and replaces loading placeholder with a full-screen overlay; updates Vite config and package scripts/dependencies; updates .gitignore and env example.

Changes

Cohort / File(s)	Summary
Storybook Configuration apps/web/.storybook/main.ts, apps/web/.storybook/preview.ts, apps/web/eslint.config.js	Adds Storybook main and preview configs (stories globs, addons resolved via absolute path helper, controls matchers) and reorders/annotates ESLint config referencing Storybook plugin.
Storybook Stories & MDX apps/web/src/stories/*.stories.*, apps/web/src/stories/Configure.mdx	Adds story modules for Button, Header, Page, LoginPage (many variants including interaction/play tests), a Configure.mdx docs page, and associated story metadata/exports.
UI Components apps/web/src/stories/Button.tsx, apps/web/src/stories/Header.tsx, apps/web/src/stories/Page.tsx	Introduces Button, Header, and Page React components with typed props and exported interfaces/components.
Component Styles apps/web/src/stories/button.css, apps/web/src/stories/header.css, apps/web/src/stories/page.css	Adds CSS for Storybook button, header, and page layouts and modifiers.
SignInForm Enhancements apps/web/src/feature/auth/component/SigninForm.tsx	Adds OAuth2 config handling, a hasShownOAuthError flag, displays auth errorMsg via an alert, and replaces a no-op loading placeholder with a full-screen loading overlay.
Tests & Test Setup apps/web/src/test/setup.ts, apps/web/src/feature/auth/component/SigninForm.test.tsx, apps/web/src/feature/auth/component/SigninForm.validation.test.ts, apps/web/src/shared/lib/string-utils.test.ts	Adds test setup with DOM mocks, comprehensive SignInForm integration tests, Zod-based validation tests, and unit tests for string-utils.
Build / Dev tooling apps/web/package.json, apps/web/vite.config.js, apps/web/.env.example	Adds Storybook and testing devDependencies and scripts, injects Codecov plugin into Vite, adds test config/coverage settings to Vite, and adds CODECOV_TOKEN to env example.
CI Workflows .github/workflows/codecov-coverage.yml, .github/workflows/codecov-test.yml	Modifies existing coverage workflow to adjust triggers and upload params; adds new Codecov test workflow to run tests, collect coverage, and upload results.
Repo config .gitignore	Adds ignore patterns: apps/web/*.xml, *storybook.log, and storybook-static.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant UI as SignInForm (UI)
  participant S as Redux/AuthService
  participant Q as React Query
  participant R as Router

  Note over UI,S: Normal sign-in flow
  U->>UI: submit email + password
  UI->>S: dispatch signIn action
  S-->>UI: auth result (success / error)
  alt success
    UI->>Q: invalidate/refresh queries
    UI->>R: redirect to target URL
  else error
    UI-->>U: show errorMsg alert
  end

  Note over UI: OAuth2 config handling (once)
  UI->>UI: check useGoogleOAuth2Config
  alt oauth misconfigured
    UI-->>U: show OAuth error once (hasShownOAuthError prevents repeats)
  end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

• Pay special attention to:
  • SignInForm: OAuth flag semantics, errorMsg sourcing, and overlay behavior.
  • Tests: SignInForm.test.tsx relies on many mocks (routing, Redux, Query, toasts) — verify realism and isolation.
  • Vite config: codecovVitePlugin usage, coverage paths, and test block correctness.
  • CI workflows: working-directory and coverage artifact paths.

Poem

🐇
I hopped through stories, bright and new,
Buttons, pages, headers too.
Tests and coverage on the run,
OAuth woes now shown—just once for fun.
A carrot-toast to code well done!

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 8c1a238 and 7175451.

📒 Files selected for processing (1)

• .github/workflows/codecov-test.yml (1 hunks)

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
bithub	Ready	Preview	Comment	Nov 26, 2025 4:56am
bithub-admin	Ready	Preview	Comment	Nov 26, 2025 4:56am

[codecov]

Welcome to Codecov 🎉

Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests.

ℹ️ You can also turn on project coverage checks and project coverage reporting on Pull Request comment

Thanks for integrating Codecov - We've got you covered ☂️