diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml
new file mode 100644
index 0000000..701a1d2
--- /dev/null
+++ b/.github/workflows/chromatic.yaml
@@ -0,0 +1,24 @@
+name: "Chromatic"
+
+on:
+ push:
+ branches:
+ - main
+
+jobs:
+ chromatic:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Publish to Chromatic
+ uses: chromaui/action@latest
+ with:
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+ exitZeroOnChanges: true
diff --git a/package-lock.json b/package-lock.json
index d94db14..5b99867 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.16",
+ "chromatic": "^10.6.0",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
@@ -4477,6 +4478,26 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/@storybook/addon-docs/node_modules/@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "dependencies": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/@storybook/addon-essentials": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.6.7.tgz",
@@ -4507,6 +4528,67 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/@storybook/addon-essentials/node_modules/@storybook/manager-api": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.7.tgz",
+ "integrity": "sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==",
+ "dev": true,
+ "dependencies": {
+ "@storybook/channels": "7.6.7",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/core-events": "7.6.7",
+ "@storybook/csf": "^0.1.2",
+ "@storybook/global": "^5.0.0",
+ "@storybook/router": "7.6.7",
+ "@storybook/theming": "7.6.7",
+ "@storybook/types": "7.6.7",
+ "dequal": "^2.0.2",
+ "lodash": "^4.17.21",
+ "memoizerific": "^1.11.3",
+ "store2": "^2.14.2",
+ "telejson": "^7.2.0",
+ "ts-dedent": "^2.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ }
+ },
+ "node_modules/@storybook/addon-essentials/node_modules/@storybook/router": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.7.tgz",
+ "integrity": "sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==",
+ "dev": true,
+ "dependencies": {
+ "@storybook/client-logger": "7.6.7",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ }
+ },
+ "node_modules/@storybook/addon-essentials/node_modules/@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "dependencies": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/@storybook/addon-highlight": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.7.tgz",
@@ -4664,6 +4746,67 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/@storybook/blocks/node_modules/@storybook/manager-api": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.7.tgz",
+ "integrity": "sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==",
+ "dev": true,
+ "dependencies": {
+ "@storybook/channels": "7.6.7",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/core-events": "7.6.7",
+ "@storybook/csf": "^0.1.2",
+ "@storybook/global": "^5.0.0",
+ "@storybook/router": "7.6.7",
+ "@storybook/theming": "7.6.7",
+ "@storybook/types": "7.6.7",
+ "dequal": "^2.0.2",
+ "lodash": "^4.17.21",
+ "memoizerific": "^1.11.3",
+ "store2": "^2.14.2",
+ "telejson": "^7.2.0",
+ "ts-dedent": "^2.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ }
+ },
+ "node_modules/@storybook/blocks/node_modules/@storybook/router": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.7.tgz",
+ "integrity": "sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==",
+ "dev": true,
+ "dependencies": {
+ "@storybook/client-logger": "7.6.7",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ }
+ },
+ "node_modules/@storybook/blocks/node_modules/@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "dependencies": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/@storybook/builder-manager": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.7.tgz",
@@ -5321,6 +5464,26 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/@storybook/components/node_modules/@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "dependencies": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/@storybook/core-client": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.7.tgz",
@@ -6014,32 +6177,6 @@
"url": "https://opencollective.com/storybook"
}
},
- "node_modules/@storybook/manager-api": {
- "version": "7.6.7",
- "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.7.tgz",
- "integrity": "sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==",
- "dev": true,
- "dependencies": {
- "@storybook/channels": "7.6.7",
- "@storybook/client-logger": "7.6.7",
- "@storybook/core-events": "7.6.7",
- "@storybook/csf": "^0.1.2",
- "@storybook/global": "^5.0.0",
- "@storybook/router": "7.6.7",
- "@storybook/theming": "7.6.7",
- "@storybook/types": "7.6.7",
- "dequal": "^2.0.2",
- "lodash": "^4.17.21",
- "memoizerific": "^1.11.3",
- "store2": "^2.14.2",
- "telejson": "^7.2.0",
- "ts-dedent": "^2.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/storybook"
- }
- },
"node_modules/@storybook/mdx2-csf": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
@@ -6253,21 +6390,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/@storybook/router": {
- "version": "7.6.7",
- "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.7.tgz",
- "integrity": "sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==",
- "dev": true,
- "dependencies": {
- "@storybook/client-logger": "7.6.7",
- "memoizerific": "^1.11.3",
- "qs": "^6.10.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/storybook"
- }
- },
"node_modules/@storybook/telemetry": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.7.tgz",
@@ -6325,26 +6447,6 @@
"@testing-library/dom": ">=7.21.4"
}
},
- "node_modules/@storybook/theming": {
- "version": "7.6.7",
- "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
- "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
- "dev": true,
- "dependencies": {
- "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
- "@storybook/client-logger": "7.6.7",
- "@storybook/global": "^5.0.0",
- "memoizerific": "^1.11.3"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/storybook"
- },
- "peerDependencies": {
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
- }
- },
"node_modules/@storybook/types": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
@@ -8473,6 +8575,29 @@
"node": ">=10"
}
},
+ "node_modules/chromatic": {
+ "version": "10.6.0",
+ "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-10.6.0.tgz",
+ "integrity": "sha512-pT8t0lbY6TCf33klkVGvZGgOcse8Tmzd/Y9LLP/XA53fK6sedlRxNEdJkIkV+/c2yKMEPqpmifpcfmHL35LKtw==",
+ "dev": true,
+ "bin": {
+ "chroma": "dist/bin.js",
+ "chromatic": "dist/bin.js",
+ "chromatic-cli": "dist/bin.js"
+ },
+ "peerDependencies": {
+ "chromatic-cypress": "^0.4.0 || ^1.0.0",
+ "chromatic-playwright": "^0.4.0 || ^1.0.0"
+ },
+ "peerDependenciesMeta": {
+ "chromatic-cypress": {
+ "optional": true
+ },
+ "chromatic-playwright": {
+ "optional": true
+ }
+ }
+ },
"node_modules/ci-info": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@@ -20753,6 +20878,20 @@
"remark-external-links": "^8.0.0",
"remark-slug": "^6.0.0",
"ts-dedent": "^2.0.0"
+ },
+ "dependencies": {
+ "@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "requires": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ }
+ }
}
},
"@storybook/addon-essentials": {
@@ -20775,6 +20914,53 @@
"@storybook/node-logger": "7.6.7",
"@storybook/preview-api": "7.6.7",
"ts-dedent": "^2.0.0"
+ },
+ "dependencies": {
+ "@storybook/manager-api": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.7.tgz",
+ "integrity": "sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==",
+ "dev": true,
+ "requires": {
+ "@storybook/channels": "7.6.7",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/core-events": "7.6.7",
+ "@storybook/csf": "^0.1.2",
+ "@storybook/global": "^5.0.0",
+ "@storybook/router": "7.6.7",
+ "@storybook/theming": "7.6.7",
+ "@storybook/types": "7.6.7",
+ "dequal": "^2.0.2",
+ "lodash": "^4.17.21",
+ "memoizerific": "^1.11.3",
+ "store2": "^2.14.2",
+ "telejson": "^7.2.0",
+ "ts-dedent": "^2.0.0"
+ }
+ },
+ "@storybook/router": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.7.tgz",
+ "integrity": "sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==",
+ "dev": true,
+ "requires": {
+ "@storybook/client-logger": "7.6.7",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0"
+ }
+ },
+ "@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "requires": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ }
+ }
}
},
"@storybook/addon-highlight": {
@@ -20884,6 +21070,53 @@
"tocbot": "^4.20.1",
"ts-dedent": "^2.0.0",
"util-deprecate": "^1.0.2"
+ },
+ "dependencies": {
+ "@storybook/manager-api": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.7.tgz",
+ "integrity": "sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==",
+ "dev": true,
+ "requires": {
+ "@storybook/channels": "7.6.7",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/core-events": "7.6.7",
+ "@storybook/csf": "^0.1.2",
+ "@storybook/global": "^5.0.0",
+ "@storybook/router": "7.6.7",
+ "@storybook/theming": "7.6.7",
+ "@storybook/types": "7.6.7",
+ "dequal": "^2.0.2",
+ "lodash": "^4.17.21",
+ "memoizerific": "^1.11.3",
+ "store2": "^2.14.2",
+ "telejson": "^7.2.0",
+ "ts-dedent": "^2.0.0"
+ }
+ },
+ "@storybook/router": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.7.tgz",
+ "integrity": "sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==",
+ "dev": true,
+ "requires": {
+ "@storybook/client-logger": "7.6.7",
+ "memoizerific": "^1.11.3",
+ "qs": "^6.10.0"
+ }
+ },
+ "@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "requires": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ }
+ }
}
},
"@storybook/builder-manager": {
@@ -21263,6 +21496,20 @@
"memoizerific": "^1.11.3",
"use-resize-observer": "^9.1.0",
"util-deprecate": "^1.0.2"
+ },
+ "dependencies": {
+ "@storybook/theming": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+ "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
+ "dev": true,
+ "requires": {
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@storybook/client-logger": "7.6.7",
+ "@storybook/global": "^5.0.0",
+ "memoizerific": "^1.11.3"
+ }
+ }
}
},
"@storybook/core-client": {
@@ -21699,28 +21946,6 @@
"integrity": "sha512-ZCrkB2zEXogzdOcVzD242ZVm4tlHqrayotnI6iOn9uiun0Pgny0m2d7s9Zge6K2dTOO1vZiOHuA/Mr6nnIDjsA==",
"dev": true
},
- "@storybook/manager-api": {
- "version": "7.6.7",
- "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.7.tgz",
- "integrity": "sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==",
- "dev": true,
- "requires": {
- "@storybook/channels": "7.6.7",
- "@storybook/client-logger": "7.6.7",
- "@storybook/core-events": "7.6.7",
- "@storybook/csf": "^0.1.2",
- "@storybook/global": "^5.0.0",
- "@storybook/router": "7.6.7",
- "@storybook/theming": "7.6.7",
- "@storybook/types": "7.6.7",
- "dequal": "^2.0.2",
- "lodash": "^4.17.21",
- "memoizerific": "^1.11.3",
- "store2": "^2.14.2",
- "telejson": "^7.2.0",
- "ts-dedent": "^2.0.0"
- }
- },
"@storybook/mdx2-csf": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
@@ -21867,17 +22092,6 @@
}
}
},
- "@storybook/router": {
- "version": "7.6.7",
- "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.7.tgz",
- "integrity": "sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==",
- "dev": true,
- "requires": {
- "@storybook/client-logger": "7.6.7",
- "memoizerific": "^1.11.3",
- "qs": "^6.10.0"
- }
- },
"@storybook/telemetry": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.7.tgz",
@@ -21923,18 +22137,6 @@
}
}
},
- "@storybook/theming": {
- "version": "7.6.7",
- "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
- "integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
- "dev": true,
- "requires": {
- "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
- "@storybook/client-logger": "7.6.7",
- "@storybook/global": "^5.0.0",
- "memoizerific": "^1.11.3"
- }
- },
"@storybook/types": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
@@ -23498,6 +23700,13 @@
"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
"dev": true
},
+ "chromatic": {
+ "version": "10.6.0",
+ "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-10.6.0.tgz",
+ "integrity": "sha512-pT8t0lbY6TCf33klkVGvZGgOcse8Tmzd/Y9LLP/XA53fK6sedlRxNEdJkIkV+/c2yKMEPqpmifpcfmHL35LKtw==",
+ "dev": true,
+ "requires": {}
+ },
"ci-info": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
diff --git a/package.json b/package.json
index b06dbe6..1a45654 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
- "build-storybook": "storybook build"
+ "build-storybook": "storybook build",
+ "chromatic": "chromatic --exit-zero-on-changes"
},
"dependencies": {
"react": "^18.2.0",
@@ -37,6 +38,7 @@
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.16",
+ "chromatic": "^10.6.0",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
diff --git a/src/components/Counter/index.spec.tsx b/src/components/Counter/index.spec.tsx
new file mode 100644
index 0000000..cd8ced2
--- /dev/null
+++ b/src/components/Counter/index.spec.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import Counter from ".";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+import { BasketProvider } from "../../context/Basket/BasketContext";
+
+describe("Counter Component Suite Test", () => {
+ it("should be modify the counter value if user click on quantity button", async () => {
+ const setOnClicMock = vi.fn();
+
+ render(
+
+
+ ,
+ );
+
+ expect(setOnClicMock()).toHaveBeenCalledWith("add");
+
+ const counterText = await screen.findByRole("paragraph", { name: "1" });
+ expect(counterText).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Counter/index.tsx b/src/components/Counter/index.tsx
index 62c5a08..5502ad2 100644
--- a/src/components/Counter/index.tsx
+++ b/src/components/Counter/index.tsx
@@ -13,6 +13,7 @@ const Component = ({ onClick, quantity }: CounterType) => {
onClick={() => {
onClick("sub");
}}
+ aria-label="Decrease quantity"
>
@@ -23,6 +24,7 @@ const Component = ({ onClick, quantity }: CounterType) => {
onClick={() => {
onClick("add");
}}
+ aria-label="Increase quantity"
>