Merge branch 'main' into feat/zodify-config

.github/workflows/main.yml

@@ -30,12 +30,6 @@ jobs:
       - name: Build Example Storybook v6.5 with StoryStore v7
         run: npm run build-example-storybook-v6.5-storystore-v7
 
-      - name: Test
-        run: npm run test
-
-      - name: Build
-        run: npm run build
-
       - name: Build Example Pages
         run: npm run build-example-next-js-pages
 
@@ -48,6 +42,12 @@ jobs:
       - name: Build Example Vite
         run: npm run build-example-vite
 
+      - name: Test
+        run: npm run test
+
+      - name: Build
+        run: npm run build
+
       - name: Run Example Next.js Pages
         run: npm run run-example-next-js-pages &
 

.gitignore

@@ -110,3 +110,4 @@ dist
 /.vscode/settings.json
 /lostpixel.config.js
 /lostpixel.config.ts
+/pagesJson.json

README.md

@@ -48,7 +48,7 @@
 | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | ![ezgif-5-e71eb0773d](https://user-images.githubusercontent.com/29632358/185067771-03467437-badd-466b-ad6c-60d7183d99ae.gif) | ![ezgif-5-43091ece5d](https://user-images.githubusercontent.com/29632358/185067989-3f2d818b-c01f-4304-97f6-77295b1970d9.gif) |
 
-- **Lost Pixel Platform** - the **UI and CI helpers** that allow you to use lost-pixel's managed version. This includes specified regression UI, collaboration with team members, and an easy approval/rejection process for the snapshots. You can configure it once and enjoy hassle-free visual regression tests integrated into your GitHub actions pipeline.
+- **Lost Pixel Platform** - the **UI and CI helpers** that allow you to use lost-pixel's managed version. This includes specified regression UI, collaboration with team members, and an easy approval/rejection process for the snapshots. You can configure it once and enjoy hassle-free visual regression tests integrated into your GitHub actions pipeline. `lost-pixel` repository is **core** to the SaaS offering and is being actively improved & maintained.
 
 https://user-images.githubusercontent.com/29632358/222420960-57924da4-d0bf-4478-9322-fc68686485b6.mp4
 
@@ -64,6 +64,7 @@ https://user-images.githubusercontent.com/29632358/222420960-57924da4-d0bf-4478-
 ## Features
 - 🌐 Visual regression testing in a browser of your choice (chrome, firefox, safari)
 - 📱 Responsive tests running with [different breakpoints and viewports](https://docs.lost-pixel.com/user-docs/recipes/general-recipes/viewport-tests)
+- 🖥️ Multiple browser execution (Chrome, Mozilla, Safari)
 - 🔀 Parallel execution (limited in OSS version)
 - 🎚️ Flexible sensitivity [thresholds](https://docs.lost-pixel.com/user-docs/recipes/general-recipes/thresholds)
 - 🔄 Flaky test retries. [Utilities to reduce flakiness](https://docs.lost-pixel.com/user-docs/recipes/general-recipes/flakiness).
@@ -127,7 +128,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
 ```
 
 </details>
@@ -197,7 +198,7 @@ jobs:
         run: npm run serve &
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
 ```
 
 </details>
@@ -255,7 +256,7 @@ jobs:
         run: npm run story:build
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
 ```
 
 </details>
@@ -317,7 +318,7 @@ jobs:
         run: npm run start &
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
 ```
 
 </details>
@@ -397,7 +398,7 @@ jobs:
         run: npx playwright install --with-deps && npm run test:e2e
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
         env:
           LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}
 ```
@@ -451,3 +452,7 @@ If you are already using Lost Pixel it would mean a lot to us if you give us a s
 ## Contributing 🏗️
 
 **Lost Pixel** is open source in it's heart and welcomes any external contribution. You can refer to [CONTRIBUTING.md](https://github.com/lost-pixel/lost-pixel/blob/main/CONTRIBUTING.md) to get going with the project locally in couple of minutes.
+
+## Lost Pixel Usage Insights 📈
+
+[![lost-pixel npminsights](https://npminsights.vercel.app/api/package/readme-image/lost-pixel)](https://npminsights.vercel.app/package/lost-pixel)

action.yml

@@ -13,6 +13,6 @@ inputs:
     required: false
 runs:
   using: 'docker'
-  image: 'docker://lostpixel/lost-pixel:v3.8.2'
+  image: 'docker://lostpixel/lost-pixel:v3.11.0'
   # for branch testing
   # image: 'Dockerfile'

docs/api-reference/lost-pixel.config.js-or-ts.md

@@ -8,10 +8,11 @@ description: >-
 
 #### Options
 
-* **browser**: `'chromium' | 'firefox' | 'webkit'`
+* **browser**: `'chromium' | 'firefox' | 'webkit' | Array<'chromium' | 'firefox' | 'webkit'>`
   * **Required**
   * Defaults to `'chromium'`
-  * Browser to use when doing the screenshots: **chromium**, **firefox**, or **webkit**
+  * This option specifies which browser(s) will be used for capturing screenshots.
+  * Accepted values are **chromium**, **firefox**, and **webkit**, which can be used individually or as an array for multiple browsers.
 * **lostPixelPlatform**: `string`
   * **Required**
   * Defaults to `'https://api.lost-pixel.com'` if not provided

docs/guides/getting-started/getting-started-2.md

@@ -38,7 +38,7 @@ coverY: 0
            run: npm run serve &
 
          - name: Lost Pixel
-           uses: lost-pixel/lost-pixel@v3.8.2
+           uses: lost-pixel/lost-pixel@v3.11.0
    </code></pre>
 
 4. _(Optional)_ Add [automatic PR for easy baseline update](../../recipes/lost-pixel-oss/automatic-baseline-update-pr.md)

docs/guides/getting-started/getting-started.md

@@ -42,7 +42,7 @@ coverY: 0
           run: npm run serve &
 
         - name: Lost Pixel
-          uses: lost-pixel/lost-pixel@v3.8.2
+          uses: lost-pixel/lost-pixel@v3.11.0
    ```
 
    {% endcode %}

docs/recipes/lost-pixel-oss/automatic-baseline-update-pr.md

@@ -36,7 +36,7 @@ jobs:
 
       - name: Lost Pixel
         id: lp
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
         env:
           LOST_PIXEL_MODE: update
       - name: Create Pull Request

docs/recipes/lost-pixel-platform/monorepo.md

@@ -70,7 +70,7 @@ jobs:
           CI: true
 
       - name: ${{ matrix.config.name }}
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
         env:
           LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}
           LOST_PIXEL_CONFIG_DIR: ${{ matrix.config.package }}
@@ -83,7 +83,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Lost Pixel Finalize
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
         env:
           LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}
           LOST_PIXEL_CONFIG_DIR: apps/web

docs/setup/integrating-with-github-actions.md

@@ -4,7 +4,7 @@ Lost Pixel has first-class support for GitHub Actions, offering a dedicated acti
 
 ```
 - name: Lost Pixel
-  uses: lost-pixel/lost-pixel@v3.8.2
+  uses: lost-pixel/lost-pixel@v3.11.0
 ```
 
 As outlined in [modes](project-configuration/modes.md), Lost Pixel can run in different modes or all of them simultaneously. You would need to build the respective provider and serve it in the action to make it available for the Lost Pixel, e.g. build & serve storybook, build & serve ladle, build & serve next app
@@ -36,7 +36,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0
 ```
 {% endcode %}
 
@@ -47,7 +47,7 @@ Using Lost Pixel in **Platform Mode,** you need to provide the `LOST_PIXEL_API_K
 
 ```
 - name: Lost Pixel
-  uses: lost-pixel/lost-pixel@v3.8.2
+  uses: lost-pixel/lost-pixel@v3.11.0
   env:
       LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}
 ```

examples/example-storybook-v6.4/workflows/ci.yml

@@ -21,4 +21,4 @@ jobs:
         run: npm run build-storybook
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0

examples/example-storybook-v6.5-storystore-v7/stories/Button.stories.js

@@ -30,9 +30,17 @@ Primary.args = {
   label: 'Button',
 };
 Primary.parameters = {
-  lostpixel:{
-    breakpoints: [420, 1000]
-  }}
+  lostpixel: {
+    breakpoints: [420, 1000],
+    extraShots: [
+      { suffix: 'with XXX label', args: { label: 'XXX' } },
+      {
+        suffix: 'with MMM label & red',
+        args: { label: 'MMM', backgroundColor: 'red', primary: false },
+      },
+    ],
+  },
+};
 
 export const Secondary = Template.bind({});
 Secondary.args = {

examples/example-storybook-v6.5-storystore-v7/workflows/ci.yml

@@ -21,4 +21,4 @@ jobs:
         run: npm run build-storybook
 
       - name: Lost Pixel
-        uses: lost-pixel/lost-pixel@v3.8.2
+        uses: lost-pixel/lost-pixel@v3.11.0

examples/example-swyxkit/lostpixel.config.ts

@@ -4,7 +4,9 @@ import { CustomProjectConfig } from 'lost-pixel';
 export const config: CustomProjectConfig = {
   histoireShots:{
     histoireUrl: './.histoire/dist',
+
   },
+  threshold:0.04,
   generateOnly: true,
   failOnDifference: true,
 };