Merge pull request #147 from argos-ci/storybook-quickstart-gha-file

feat(storybook): add github actions file content

Author: gregberge

docs/quickstart/storybook.mdx

@@ -77,28 +77,47 @@ It will capture screenshots of your stories in `./screenshots` directory.
 
 ## 4. Setup CI to run tests and upload screenshots
 
-First build your Storybook:
-
-```sh
-npm run build-storybook
+Below is a complete GitHub Actions workflow to build your Storybook, run tests, capture screenshots, and upload them to Argos.
+If you use another CI provider, adapt the steps accordingly.
+
+```yml title=".github/workflows/storybook-test.yml"
+name: Storybook Test
+permissions: {}
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Install Playwright dependencies
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Storybook tests and capture screenshots
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server ./storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook"
+
+      - name: Upload screenshots to Argos
+        # 👇 Replace `<ARGOS_TOKEN>` with your project token, available in your Argos project settings.
+        run: npm exec -- argos upload --token <ARGOS_TOKEN> ./screenshots
 ```
 
-Then serve your Storybook and run tests:
-
-```sh
-npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-    "npx http-server ./storybook-static --port 6006 --silent" \
-    "npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook"
-```
-
-Finally upload screenshots to Argos:
-
-```sh
-npm exec -- argos upload --token <ARGOS_TOKEN> ./screenshots
-```
-
-**Note:** The value of `ARGOS_TOKEN` is available in your project settings.
-
 To learn how to run tests on a deployed Storybook, refer to the [Storybook test runner documentation](https://storybook.js.org/docs/writing-tests/test-runner#set-up-ci-to-run-tests).
 
 <Congratulation />
@@ -113,4 +132,3 @@ To learn how to run tests on a deployed Storybook, refer to the [Storybook test
 ---
 
 <HelpSection />
-```