Merge branch 'main' into zoomcontainer

Author: ghengeveld

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,35 @@
+name: Bug report 🐞
+description: >-
+  Something is broken and you have a reliable reproduction? Let us know here.
+  To get help, check out the documentation or contact Chromatic customer support.
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if you can.
+      placeholder: >-
+        BE AWARE THIS IS A PUBLIC REPOSITORY. DO NOT INCLUDE SENSITIVE INFORMATION.
+        Contact customer support directly if you need to share sensitive details.
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: To reproduce
+      description: >-
+        Explain the steps to reproduce the bug. If you have a public repository with a reproduction, please provide a link to it here.
+    validations:
+      required: true
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      description: >-
+        Include as many relevant details about the environment you experienced the bug in.
+        - Operating system
+        - Browser
+        - Storybook version
+        - Visual Test Addon version
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Documentation 📚
+    url: https://www.chromatic.com/docs/visual-tests-addon/
+    about: Check out the official docs for answers to common questions.
+  - name: Customer support 💬
+    url: https://www.chromatic.com/start?support
+    about: Chat with Chromatic customer support for help with your account or technical issues.

.github/workflows/check-labels.yml

@@ -0,0 +1,18 @@
+name: Check PR Labels
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled, synchronize]
+
+jobs:
+  check-labels:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: chromaui/pr-label-checker-action@main
+        with:
+          one-of: |
+            major, minor, patch
+            release, skip-release
+          none-of: DO NOT MERGE

.github/workflows/chromatic.yml

@@ -10,7 +10,7 @@ jobs:
           fetch-depth: 0
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts
+        run: yarn install --immutable
 
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_TOKEN }}
 
@@ -17,7 +17,7 @@ jobs:
         run: git fetch --unshallow --tags
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts
+        run: yarn install --immutable
 
       - name: Create Release
         run: yarn run release

.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts
+        run: yarn install --immutable
 
       - name: Lint
         run: yarn lint

.gitignore

@@ -8,3 +8,11 @@ build-storybook.log
 chromatic.log
 chromatic-build-*.xml
 chromatic-diagnostics.json
+
+**/.pnp.*
+**/.yarn/*
+!**/.yarn/patches
+!**/.yarn/plugins
+!**/.yarn/releases
+!**/.yarn/sdks
+!**/.yarn/versions

.storybook/main.ts

@@ -24,12 +24,12 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "@storybook/addon-designs",
     {
-      name: useDistVersion ? "../dist/index.js" : "../src/dev.ts",
+      name: useDistVersion ? "../dist/preset.js" : "../src/dev.ts",
       options: {
         configFile: configFileMap[CHROMATIC_BASE_URL || '"https://www.chromatic.com"'],
       },
     },
-    "@storybook/addon-mdx-gfm"
+    "@storybook/addon-mdx-gfm",
   ],
   docs: {
     autodocs: "tag",
@@ -43,8 +43,14 @@ const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   refs: {
     "@storybook/components": {
-      title: "@storybook/components",
-      url: "https://next--635781f3500dd2c49e189caf.chromatic.com",
+      title: "Storybook Components",
+      url: "https://next--635781f3500dd2c49e189caf.chromatic.com/",
+      expanded: false,
+    },
+    "@storybook/icons": {
+      title: "Storybook Icons",
+      url: "https://main--64b56e737c0aeefed9d5e675.chromatic.com/",
+      expanded: false,
     },
   },
   async viteFinal(config, { configType }) {

.storybook/preview.tsx

@@ -13,14 +13,16 @@ import {
 } from "@storybook/theming";
 import { HttpResponse, graphql } from "msw";
 import { initialize, mswLoader } from "msw-storybook-addon";
-import React, { useState } from "react";
+import React from "react";
 
 import { AuthProvider } from "../src/AuthContext";
 import { baseModes } from "../src/modes";
 import { UninstallProvider } from "../src/screens/Uninstalled/UninstallContext";
 import { RunBuildProvider } from "../src/screens/VisualTests/RunBuildContext";
 import { GraphQLClientProvider } from "../src/utils/graphQLClient";
 import { storyWrapper } from "../src/utils/storyWrapper";
+import { TelemetryProvider } from "../src/utils/TelemetryContext";
+import { useSessionState } from "../src/utils/useSessionState";
 
 // Initialize MSW
 initialize({
@@ -64,7 +66,7 @@ const Panel = styled.div<{ orientation: "right" | "bottom" }>(
     boxShadow: `0 0 0 1px ${theme.background.content}`,
     background: theme.background.content,
     color: theme.base === "light" ? theme.color.dark : theme.color.mediumlight,
-    fontSize: theme.typography.size.s2 - 1,
+    fontSize: theme.typography.size.s2,
   })
 );
 
@@ -73,7 +75,7 @@ const ThemedSetRoot = () => {
   React.useEffect(() => {
     document.body.style.background = theme.background.content;
     document.body.style.color = theme.color.defaultText;
-    document.body.style.fontSize = `${theme.typography.size.s2 - 1}px`;
+    document.body.style.fontSize = `${theme.typography.size.s2}px`;
   });
   return null;
 };
@@ -122,6 +124,10 @@ const withTheme = (StoryFn, { globals, parameters }) => {
 
 const withGraphQLClient = storyWrapper(GraphQLClientProvider);
 
+const withTelemetry = storyWrapper(TelemetryProvider, () => ({
+  value: action("telemetry"),
+}));
+
 const withAuth = storyWrapper(AuthProvider, () => ({
   value: {
     accessToken: "token",
@@ -137,9 +143,12 @@ const withManagerApi = storyWrapper(ManagerContext.Provider, ({ argsByTarget })
 }));
 
 const withUninstall: Decorator = (Story) => {
-  const [addonInstalled, setAddonInstalled] = useState(false);
+  const [addonUninstalled, setAddonUninstalled] = useSessionState("addonUninstalled", false);
   return (
-    <UninstallProvider addonUninstalled={addonInstalled} setAddonUninstalled={setAddonInstalled}>
+    <UninstallProvider
+      addonUninstalled={addonUninstalled}
+      setAddonUninstalled={setAddonUninstalled}
+    >
       <Story />
     </UninstallProvider>
   );
@@ -199,7 +208,15 @@ export const graphQLArgLoader: Loader = async ({ argTypes, argsByTarget, paramet
 };
 
 const preview: Preview = {
-  decorators: [withTheme, withGraphQLClient, withAuth, withUninstall, withManagerApi, withRunBuild],
+  decorators: [
+    withTheme,
+    withGraphQLClient,
+    withTelemetry,
+    withAuth,
+    withUninstall,
+    withManagerApi,
+    withRunBuild,
+  ],
   loaders: [graphQLArgLoader],
   parameters: {
     actions: {

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
 }