ci: add chromatic

.github/workflows/.chromatic.yml

@@ -0,0 +1,25 @@
+name: 'Chromatic'
+
+on: 
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.19.0]
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/prod.yml

@@ -38,3 +38,6 @@ jobs:
           CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
         with:
           coverageCommand: yarn test:coverage
+
+      - name: Run chromatic - Publish Storybook
+        run: yarn chromatic

.gitignore

@@ -2,3 +2,4 @@ dist
 node_modules
 package-lock.json
 coverage
+build-storybook.log

README.md

@@ -35,3 +35,7 @@ We have the following types:
 - temp: Temporary commits that won't be included in your CHANGELOG.
 
 Example: `feat: add feature #issue_id`
+
+## Deploy 🚀
+
+<a href="https://main--63da5890a06a8f8f995110dd.chromatic.com"> Storybook </a>

package.json

@@ -17,26 +17,29 @@
     "test:watch": "jest -i --watchAll",
     "prepare": "husky install",
     "lint-staged": "lint-staged",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "chromatic": "npx chromatic --project-token=CHROMATIC_PROJECT_TOKEN"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/iurynogueira/ion-react.git"
   },
-  "author": "Brisanet-Desenvolvimento",
+  "author": {
+    "name": "Brisanet-Desenvolvimento"
+  },
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/iurynogueira/ion-react/issues"
   },
   "homepage": "https://github.com/iurynogueira/ion-react#readme",
   "devDependencies": {
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
-    "@commitlint/cz-commitlint": "^17.4.2",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
+    "@commitlint/cz-commitlint": "^17.4.2",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
@@ -57,16 +60,17 @@
     "@typescript-eslint/parser": "^5.49.0",
     "babel-jest": "^29.4.1",
     "babel-loader": "^8.3.0",
-    "css-loader": "^6.7.3",
+    "chromatic": "^6.15.0",
     "commitizen": "^4.3.0",
+    "css-loader": "^6.7.3",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.1",
+    "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
-    "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.3",

src/components/button/styles.scss

@@ -1,5 +1,5 @@
 .btn {
   font-size: 30px;
   padding: 10px 20px;
-  background-color: blueviolet;
+  background-color: orangered;
 }