Add Chromatic visual testing setup

[getamas]

Description

• Upgrade Storybook to the latest version
• Setup visual testing through Vitest and Chromatic

Implementation choices:

Link to task/bug:

https://greenspark-force.monday.com/boards/3658967791/views/83096355/pulses/9290231571?userId=54391332

[netlify]

✅ Deploy Preview for gs-components ready!

Name	Link
🔨 Latest commit	f052b23
🔍 Latest deploy log	https://app.netlify.com/projects/gs-components/deploys/6867ae1efc7dcc0008a5488d
😎 Deploy Preview	https://deploy-preview-26--gs-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull Request Overview

This PR upgrades Storybook to v9 and integrates Chromatic visual testing alongside Vitest for Storybook stories.

• Upgraded Storybook and related addons to the latest versions and switched imports to vue3-vite
• Configured a dedicated Vitest project for Storybook with browser (Playwright) testing and Chromatic setup
• Added Chromatic configuration and supporting setup files for visual regression testing

Reviewed Changes

Copilot reviewed 16 out of 18 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
vitest.config.ts	Added storybookTest plugin, browser-based project settings, and merged with main Vite config
src/stories/*.stories.ts	Updated Storybook framework imports from @storybook/vue3 to @storybook/vue3-vite
.storybook/main.ts	Replaced essentials and interactions addons with docs and Vitest addons
package.json	Bumped Storybook, Chromatic, and added a test-storybook script
chromatic.config.json	Introduced Chromatic configuration (projectId, onlyChanged, zip)
.storybook/vitest.setup.ts	Created Vitest setup to run Storybook’s beforeAll hooks
.storybook/preview.ts	Switched preview imports to @storybook/vue3-vite

Comments suppressed due to low confidence (4)

vitest.config.ts:8

• [nitpick] The variable name dirname may be confused with Node’s built-in __dirname. Consider renaming it to something more descriptive, like storybookConfigDir, to improve clarity.

const dirname =

.storybook/main.ts:7

• Removing @storybook/addon-essentials also drops controls, actions, viewport, and other essential features. If those are still required, add them individually or re-add essentials.

    '@chromatic-com/storybook',

package.json:77

• [nitpick] Verify that the unscoped storybook package is necessary; typically Storybook is managed via scoped packages under @storybook/* rather than an unscoped storybook dependency.

    "storybook": "^9.0.15",

.storybook/vitest.setup.ts:2

• Double-check that setProjectAnnotations is correctly imported from the intended testing utility. The Storybook testing documentation often references @storybook/testing-vue or the addon package rather than the framework entrypoint.

import { setProjectAnnotations } from '@storybook/vue3-vite'