chore: storybook support for app components

[adamhaeger]

Storybook now implemented in app-components.

#18742

Description

• Story book support in app-components
• Moved global styles from App/frontend/src/index.css to app-components for easy reuse
• Story added for Card.tsx in app-components

Verification

• Related issues are connected (if applicable)
• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

Summary by CodeRabbit

• New Features

  • Added Storybook integration for interactive component documentation and testing.
  • Introduced design system styling with CSS custom properties for consistent theming.

• Chores

  • Updated testing dependency (vitest) to version 4.1.5.
  • Added Storybook packages and Chromatic integration to development toolchain.
  • Consolidated global styling into a shared library component.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request extracts shared global styles and CSS utilities into the form-component library, establishes Storybook infrastructure for component documentation with a React Vite setup, and integrates the form-component library into the frontend application via a workspace dependency.

Changes

Storybook & Shared Styles Integration

Layer / File(s)	Summary
Shared Global Styles Foundation libs/form-component/src/styles/global.css	Create a comprehensive stylesheet with Altinn-DIN font, CSS custom properties for colours/spacing/borders, browser workarounds (PDF links, toggles, disabled selects), .altinnLink styling with external-link indicators via SVG data URIs, list and dropdown spacing, RTL table adjustments, and .sr-only accessibility utility.
Storybook Infrastructure Setup libs/form-component/.storybook/main.ts, libs/form-component/.storybook/preview.tsx	Configure Storybook with React Vite framework, story globs, addons (Chromatic, docs, links), and preview layout set to centred with global/design-system CSS imports and a decorator wrapping stories with data-color-scheme="light" and data-size="md" attributes.
Form-Component Package Configuration libs/form-component/package.json, libs/form-component/tsconfig.json	Update package.json with Storybook and Chromatic scripts/dependencies, define exports map including ./styles/global.css, upgrade vitest to 4.1.5; extend TypeScript compilation to include .storybook/**/*.
AppCard Component Story libs/form-component/src/app-components/Card/Card.stories.tsx	Define Storybook story metadata and Preview variant for AppCard with initial args (title, description, footer).
Frontend App Stylesheet Consolidation src/App/frontend/package.json, src/App/frontend/src/index.css	Add @app/form-component workspace dependency; consolidate global styles by importing shared form-component stylesheet and removing 184 lines of duplicate CSS (font, theme variables, workarounds, link decorations, accessibility classes).
Dependency Versions & Metadata libs/form-engine/package.json, src/App/frontend/monorepo-changed-paths.txt	Upgrade vitest from 3.0.0 to 4.1.5 in form-engine; add yarn release script and index.css to monorepo changed-paths list.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A tale of styles shared and stories told—
Form-component emerges, a library bold!
Storybook's canvas now beckons each card,
Global styles shine, no more working so hard.
From chaos to order, the frontend stands tall! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarises the main change: adding Storybook support to app components, which is the primary focus across the changeset.
Description check	✅ Passed	The description covers the main changes, references the related issue, and completes the verification checklist appropriately.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/storybook-support-for-app-components

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.84%. Comparing base (97894a6) to head (ad0cdde).
⚠️ Report is 62 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18749      +/-   ##
==========================================
+ Coverage   95.71%   95.84%   +0.12%     
==========================================
  Files        2587     3016     +429     
  Lines       33007    39548    +6541     
  Branches     4080     4842     +762     
==========================================
+ Hits        31593    37904    +6311     
- Misses       1069     1230     +161     
- Partials      345      414      +69     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[phlipsterit]

Great work :) I think it will be very nice to have storybook for this project.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@libs/form-component/src/styles/global.css`:
- Line 1: Replace the problematic CSS patterns to satisfy Stylelint: change the
`@import` url('https://altinncdn.no/fonts/altinn-din/altinn-din.css'); rule to the
import-notation form `@import`
"https://altinncdn.no/fonts/altinn-din/altinn-din.css"; ensure there are no
unexpected blank lines before declarations (fix declaration-empty-line-before by
removing or adding required spacing around the affected declarations), and
normalize any inline comments to have proper spacing inside comment markers
(e.g., convert /*bad-comment*/ to /* good comment */) for the occurrences
flagged (including the other occurrences around the same file).
- Line 175: The .sr-only rule uses the deprecated clip property; update it to
use modern clipping by replacing clip: rect(0, 0, 0, 0) with a clip-path
fallback strategy: keep the existing clip line for legacy support, add
clip-path: inset(50%) (and -webkit-clip-path: inset(50%) for older WebKit) so
screen-reader-only behavior remains, and ensure the .sr-only selector (in
styles/global.css) still includes the other accessibility rules (position,
width/height, overflow, white-space) unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 35f1b1b4-8d7e-4b5b-8f7a-116fdaf4cc2e

📥 Commits

Reviewing files that changed from the base of the PR and between 457dfe9 and ad0cdde.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (10)

• libs/form-component/.storybook/main.ts
• libs/form-component/.storybook/preview.tsx
• libs/form-component/package.json
• libs/form-component/src/app-components/Card/Card.stories.tsx
• libs/form-component/src/styles/global.css
• libs/form-component/tsconfig.json
• libs/form-engine/package.json
• src/App/frontend/monorepo-changed-paths.txt
• src/App/frontend/package.json
• src/App/frontend/src/index.css