Updating

.github/workflows/test.yml

@@ -12,18 +12,44 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+
+      - name: Install required dependencies for Puppeteer
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libnss3 \
+            libatk1.0-0 \
+            libatk-bridge2.0-0 \
+            libxcomposite1 \
+            libxdamage1 \
+            libxrandr2 \
+            libgbm1 \
+            libasound2 \
+            libpangocairo-1.0-0 \
+            libatspi2.0-0 \
+            libcups2 \
+            libxss1 \
+            libxshmfence1 \
+            libglu1-mesa \
+            libpci3 \
+            libdrm2 \
+            libgtk-3-0 \
+            chromium-browser || sudo apt-get install -y chromium
+
+      - name: Install dependencies
+        run: npm ci
 
-      - run: npm ci
-
-      - run: npx eyes-storybook
+      - name: Run Eyes Storybook
+        run: npx eyes-storybook -f ./applitools.config.js
         env: 
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
+

.github/workflows/updates.yml

@@ -2,36 +2,41 @@ name: Updates
 
 on:
   schedule:
-    - cron: "0 12 * * *"
+    - cron: "0 12 * * *"  # Runs daily at 12:00 UTC
   workflow_dispatch:
 
 jobs:
   test:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
+      - name: Set up Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 12.x
+          node-version: 20.x
 
-      - run: npm install
+      - name: Install dependencies
+        run: npm install
 
-      - run: npm install -g npm-check-updates
+      - name: Install npm-check-updates
+        run: npm install -g npm-check-updates
 
       - name: Check for Updates
         run: ncu -u
 
-      - name: Install Updates
+      - name: Install Updated Packages
         run: npm install
 
-      - run: npx eyes-storybook
+      - name: Run Eyes Storybook
+        run: npx eyes-storybook
         env: 
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
-
-      - uses: mikeal/publish-to-github-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH_NAME: 'master'
+
+      - name: Publish Changes to GitHub
+        uses: ad-m/github-push-action@v0.6.0
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: 'master'
+

.gitignore

@@ -15,7 +15,10 @@
 .env.development.local
 .env.test.local
 .env.production.local
+/storybook-static
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,33 @@
+
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions"
+  ],
+
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
+  },
+
+  "staticDirs": [
+  ],
+
+  docs: {
+    autodocs: false
+  },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
+};
+export default config;

README.md

@@ -1,17 +1,37 @@
 # Applitools Tutorial - Storybook React
 
-Get started with Applitools Eyes visual testing with this example of using the [Storybook](https://storybook.js.org/) and the [Eyes Storybook SDK](https://github.com/applitools/eyes.sdk.javascript1/tree/master/packages/eyes-storybook).
+Get started with Applitools Eyes visual testing with this example of using [Storybook](https://storybook.js.org/) and our [Eyes Storybook SDK](https://applitools.com/tutorials/sdks/storybook).
 
-Learn more about how to install and start this project with our [Storybook React tutorial](https://applitools.com/tutorials/storybook-react.html)!
-
-<https://applitools.com/tutorials/storybook-react.html>
+Learn more about how to install and start this project with our [Storybook React tutorial](https://applitools.com/tutorials/sdks/storybook)!
 
 _If you're looking for the CSF format for creating Storybook stories, check out the [Storybook CSF React tutorial](https://github.com/applitools/tutorial-storybook-csf-react)._
 
+# Installation & Run
+1. Install the dependencies
+    ```sh
+    npm install
+    ```
+
+To authenticate via the Applitools server and run tests, you need to set your API key provided from Applitools Eyes. For details on how to retrieve your API key, see [the Applitools documentation](https://applitools.com/tutorials/getting-started/retrieve-api-key).
+
+2. Choose one of the following options to set your API Key.
+    * Set your Applitools API Key as an environment variable. 
+        * macOS/Linux: `export APPLITOOLS_API_KEY=<Your API Key>`
+        * Windows: `set APPLITOOLS_API_KEY=<Your API Key>`
+
+    * Set your Applitools API Key inside the **applitools.config.js** file via the `apiKey` setting.
+        * Note: If you are not using the Eyes public cloud, you will need to update the `serverUrl` to your Eyes server URL in the **applitools.config.js** configuration file or set via an `APPLITOOLS_SERVER_URL` environment variable. See our [documentation](https://applitools.com/tutorials/sdks/storybook/config) for more information on these settings.
+
+3. Run the example test
+    ```sh
+    npx eyes-storybook
+    ```
+
+4. After the example tests complete. Visit your Applitools Eyes dashboard to view the results.
+
 ## More Information
 
-Learn more about Applitools [Eyes](https://info.applitools.com/ucY77) and the [Ultrafast Test Cloud](https://info.applitools.com/ucY78) at [applitools.com](https://info.applitools.com/ucY76).
+Learn more about [Applitools Eyes](https://www.applitools.com) and the [Applitool Ultrafast Grid](https://applitools.com/platform/ultrafast-grid).
 
-More about the Eyes Images SDK:
+More about the Eyes Storybook SDK:
 * https://www.npmjs.com/package/@applitools/eyes-storybook
-* https://applitools.com/docs/api/eyes-sdk/indexm/classindex-storybook-javascript.html

applitools.config.js

@@ -1,3 +1,19 @@
+// See https://applitools.com/tutorials/sdks/storybook/config#properties for additional configuration properties.
 module.exports = {
-  concurrency: 1,
+  apiKey: process.env.APPLITOOLS_API_KEY,
+  serverUrl: 'https://eyes.applitools.com',
+  batchName: 'Storybook React Tutorial',
+  testConcurrency: 10,
+  showLogs: false,
+  browser: [ // See https://applitools.com/tutorials/sdks/storybook/browsers for additional supported browsers and devices.
+    { width: 1024, height: 768, name: 'chrome' },
+    // { width: 1024, height: 768, name: 'firefox' },
+    // { chromeEmulationInfo: { deviceName: 'Galaxy S20' } },
+ ],
+ puppeteerOptions: process.env.GITHUB_ACTIONS
+  ? {
+      executablePath: '/usr/bin/chromium', 
+      args: ['--no-sandbox', '--disable-setuid-sandbox']
+    }
+  : undefined, 
 }