RI-7640: Implement storybook

[pd-redis]

This pull request introduces Storybook integration for the project, enabling component-driven development, documentation, and visual testing. It adds Storybook configuration files, updates build and linting tools, and provides initial stories for several UI components. The changes also include theming, styling, and utility enhancements to support Storybook and improve the developer experience.

Storybook Integration and Configuration

• Added Storybook configuration files, including .storybook/main.ts, .storybook/preview.tsx, .storybook/vite.config.ts, .storybook/tsconfig.json, and .storybook/redis-theme.ts, to enable and customize Storybook for the project. These files configure addons, theming, Vite integration, and global styles. [1] [2] [3] [4] [5]
• Added .storybook/preview-head.html to set up global variables and CSS for Storybook docs and previews.

Component Stories and Utilities

• Added initial Storybook stories for UI components such as AnalyticsTabs, AutoRefresh, Button, DestructiveButton, and ActionIconButton to demonstrate usage and enable visual testing. [1] [2] [3] [4] [5]
• Introduced utility and helper files for Storybook, such as .storybook/helpers/styles.ts, .storybook/RootStoryLayout.tsx, and .storybook/Story.context.ts, to provide styled containers, context, and layout customization for stories. [1] [2] [3]

Build, Lint, and Babel Enhancements

• Updated package.json to add Storybook-related scripts (sb, build-sb), dependencies (@storybook/*, eslint-plugin-storybook, etc.), and upgraded msw to v2. [1] [2] [3] [4] [5]
• Modified .eslintrc.js to extend with plugin:storybook/recommended and added eslint-plugin-storybook for linting Storybook files. [1] [2]
• Updated babel.config.cjs to include the @babel/plugin-proposal-decorators plugin for Storybook support.

Component and Style Refactoring

• Re-exported FormField from @redis-ui/components to simplify imports in the codebase.

These changes collectively establish a robust Storybook environment, streamline UI component development, and enhance the project's tooling and developer workflow.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
3 out of 4 committers have signed the CLA.

✅ dantovska
✅ KrumTy
✅ pd-redis
❌ Kristiyan Ivanov

---

Kristiyan Ivanov seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[github-actions]

Code Coverage - Integration Tests

Status	Category	Percentage	Covered / Total
🟢	Statements	81.66%	16275/19928
🟡	Branches	64.66%	7346/11360
🟡	Functions	70.64%	2284/3233
🟢	Lines	81.31%	15313/18832

[github-actions]

Code Coverage - Backend unit tests

St.❔	Category	Percentage	Covered / Total
🟢	Statements	92.33%	13870/15022
🟡	Branches	74.11%	4188/5651
🟢	Functions	85.84%	2133/2485
🟢	Lines	92.13%	13259/14391

Test suite run success

2965 tests passing in 287 suites.

Report generated by 🧪jest coverage report action from b4d5126

[github-actions]

Code Coverage - Frontend unit tests

St.❔	Category	Percentage	Covered / Total
🟢	Statements	82.56%	20251/24528
🟡	Branches	67.92%	8751/12884
🟡	Functions	77.05%	5418/7032
🟢	Lines	82.99%	19831/23896

Test suite run success

5229 tests passing in 681 suites.

Report generated by 🧪jest coverage report action from b4d5126