Add ShareMenu component

.storybook/preview.tsx

@@ -1,20 +1,19 @@
-import { ManagerContext } from 'storybook/manager-api';
 import type { Decorator, Loader, Preview } from '@storybook/react-vite';
-import { fn } from 'storybook/test';
+import { graphql, HttpResponse } from 'msw';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import React from 'react';
+import { ManagerContext } from 'storybook/manager-api';
+import { fn, sb } from 'storybook/test';
 import {
-  Global,
-  ThemeProvider,
   convert,
   createReset,
+  Global,
   styled,
+  ThemeProvider,
   themes,
   useTheme,
 } from 'storybook/theming';
-import { HttpResponse, graphql } from 'msw';
-import { initialize, mswLoader } from 'msw-storybook-addon';
-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';
@@ -23,6 +22,10 @@ import { storyWrapper } from '../src/utils/storyWrapper';
 import { TelemetryProvider } from '../src/utils/TelemetryContext';
 import { useSessionState } from '../src/utils/useSessionState';
 
+sb.mock(import('../src/utils/useAuth.ts'));
+sb.mock(import('../src/utils/useSharedState.ts'));
+sb.mock(import('../src/utils/useTestProviderStore.ts'));
+
 // Initialize MSW
 initialize({
   onUnhandledRequest(req) {
@@ -127,15 +130,6 @@ const withTelemetry = storyWrapper(TelemetryProvider, () => ({
   value: fn().mockName('telemetry'),
 }));
 
-const withAuth = storyWrapper(AuthProvider, () => ({
-  value: {
-    accessToken: 'token',
-    setAccessToken: fn(),
-    subdomain: 'www',
-    setSubdomain: fn(),
-  },
-}));
-
 const withManagerApi = storyWrapper(ManagerContext.Provider, ({ argsByTarget }) => ({
   value: {
     api: { ...argsByTarget['manager-api'] },
@@ -213,7 +207,6 @@ const preview: Preview = {
     withTheme,
     withGraphQLClient,
     withTelemetry,
-    withAuth,
     withUninstall,
     withManagerApi,
     withRunBuild,

package.json

@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@neoconfetti/react": "^1.0.0",
-    "chromatic": "^13.3.4",
+    "chromatic": "^14.0.0",
     "filesize": "^10.0.12",
     "jsonfile": "^6.1.0",
     "strip-ansi": "^7.1.0"
@@ -68,9 +68,9 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@parcel/watcher": "^2.4.1",
     "@storybook/addon-designs": "^11.1.1",
-    "@storybook/addon-docs": "^10.2.1",
+    "@storybook/addon-docs": "0.0.0-pr-33653-sha-6047da63",
     "@storybook/icons": "^2.0.1",
-    "@storybook/react-vite": "^10.2.1",
+    "@storybook/react-vite": "0.0.0-pr-33653-sha-6047da63",
     "@types/jsonfile": "^6.1.1",
     "@types/node": "^22.13.5",
     "@types/pluralize": "^0.0.29",
@@ -91,7 +91,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^10.2.1",
+    "eslint-plugin-storybook": "0.0.0-pr-33653-sha-6047da63",
     "graphql": "^16.8.1",
     "msw": "^2.0.0",
     "msw-storybook-addon": "^2.0.6",
@@ -105,7 +105,7 @@
     "react-dom": "^18.3.1",
     "react-joyride": "^2.7.2",
     "rimraf": "^3.0.2",
-    "storybook": "^10.2.1",
+    "storybook": "0.0.0-pr-33653-sha-6047da63",
     "ts-dedent": "^2.2.0",
     "tsup": "^6.6.3",
     "typescript": "^5.7.3",
@@ -119,7 +119,7 @@
     "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "storybook": "^0.0.0-0 || ^10.1.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0"
+    "storybook": "0.0.0-pr-33653-sha-6047da63"
   },
   "packageManager": "yarn@4.12.0",
   "engines": {
@@ -146,7 +146,8 @@
   },
   "bundler": {
     "exportEntries": [
-      "./src/index.ts"
+      "./src/index.ts",
+      "./src/disableSnapshots.ts"
     ],
     "managerEntries": [
       "./src/manager.tsx"

src/Panel.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react';
 import type { API } from 'storybook/manager-api';
-import { experimental_getStatusStore, useChannel, useStorybookState } from 'storybook/manager-api';
+import { experimental_getStatusStore, useStorybookState } from 'storybook/manager-api';
 
-import { AuthProvider } from './AuthContext';
 import { Spinner } from './components/design-system';
 import {
   ADDON_ID,
@@ -27,12 +26,13 @@ import { ControlsProvider } from './screens/VisualTests/ControlsContext';
 import { RunBuildProvider } from './screens/VisualTests/RunBuildContext';
 import { VisualTests } from './screens/VisualTests/VisualTests';
 import { GitInfoPayload, LocalBuildProgress, UpdateStatusFunction } from './types';
-import { createClient, GraphQLClientProvider, useAccessToken } from './utils/graphQLClient';
+import { createClient, GraphQLClientProvider } from './utils/graphQLClient';
 import { TelemetryProvider } from './utils/TelemetryContext';
+import { useAuth } from './utils/useAuth';
 import { useBuildEvents } from './utils/useBuildEvents';
 import { useChannelFetch } from './utils/useChannelFetch';
 import { useProjectId } from './utils/useProjectId';
-import { clearSessionState, useSessionState } from './utils/useSessionState';
+import { useSessionState } from './utils/useSessionState';
 import { useSharedState } from './utils/useSharedState';
 
 interface PanelProps {
@@ -42,15 +42,8 @@ interface PanelProps {
 
 const statusStore = experimental_getStatusStore(ADDON_ID);
 
-export const Panel = ({ active }: PanelProps) => {
-  const [accessToken, updateAccessToken] = useAccessToken();
-  const setAccessToken = useCallback(
-    (token: string | null) => {
-      updateAccessToken(token);
-      if (!token) clearSessionState('authenticationScreen', 'exchangeParameters');
-    },
-    [updateAccessToken]
-  );
+export const Panel = ({ active, api }: PanelProps) => {
+  const [auth] = useAuth();
   const { storyId } = useStorybookState();
 
   const [gitInfo] = useSharedState<GitInfoPayload>(GIT_INFO);
@@ -60,7 +53,7 @@ export const Panel = ({ active }: PanelProps) => {
   const [localBuildProgress, setLocalBuildProgress] =
     useSharedState<LocalBuildProgress>(LOCAL_BUILD_PROGRESS);
   const [, setOutdated] = useSharedState<boolean>(IS_OUTDATED);
-  const emit = useChannel({});
+  const { emit } = api;
 
   const updateBuildStatus = useCallback<UpdateStatusFunction>((statuses) => {
     statusStore.unset();
@@ -80,30 +73,30 @@ export const Panel = ({ active }: PanelProps) => {
   // If the user creates a project in a dialog (either during login or later, it get set here)
   const [createdProjectId, setCreatedProjectId] = useSessionState<string>('createdProjectId');
   const [addonUninstalled, setAddonUninstalled] = useSharedState<boolean>(REMOVE_ADDON);
-  const [subdomain, setSubdomain] = useSessionState<string>('subdomain', 'www');
 
   const trackEvent = useCallback((data: any) => emit(TELEMETRY, data), [emit]);
-  const { isRunning, startBuild, stopBuild } = useBuildEvents({ localBuildProgress, accessToken });
+  const { isRunning, startBuild, stopBuild } = useBuildEvents({
+    localBuildProgress,
+    accessToken: auth.token,
+  });
 
   const channelFetch = useChannelFetch();
   const fetch = globalThis.LOGLEVEL === 'debug' ? globalThis.fetch : channelFetch;
   const withProviders = (children: React.ReactNode) => (
     <GraphQLClientProvider value={createClient({ fetch })}>
       <TelemetryProvider value={trackEvent}>
-        <AuthProvider value={{ accessToken, setAccessToken, subdomain, setSubdomain }}>
-          <UninstallProvider
-            addonUninstalled={addonUninstalled}
-            setAddonUninstalled={setAddonUninstalled}
-          >
-            <ControlsProvider>
-              <RunBuildProvider watchState={{ isRunning, startBuild, stopBuild }}>
-                <div hidden={!active} style={{ containerType: 'size', height: '100%' }}>
-                  {children}
-                </div>
-              </RunBuildProvider>
-            </ControlsProvider>
-          </UninstallProvider>
-        </AuthProvider>
+        <UninstallProvider
+          addonUninstalled={addonUninstalled}
+          setAddonUninstalled={setAddonUninstalled}
+        >
+          <ControlsProvider>
+            <RunBuildProvider watchState={{ isRunning, startBuild, stopBuild }}>
+              <div hidden={!active} style={{ containerType: 'size', height: '100%' }}>
+                {children}
+              </div>
+            </RunBuildProvider>
+          </ControlsProvider>
+        </UninstallProvider>
       </TelemetryProvider>
     </GraphQLClientProvider>
   );
@@ -125,13 +118,9 @@ export const Panel = ({ active }: PanelProps) => {
   }
 
   // Render the Authentication flow if the user is not signed in.
-  if (!accessToken) {
+  if (!auth.token) {
     return withProviders(
-      <Authentication
-        setAccessToken={setAccessToken}
-        setCreatedProjectId={setCreatedProjectId}
-        hasProjectId={!!projectId}
-      />
+      <Authentication setCreatedProjectId={setCreatedProjectId} hasProjectId={!!projectId} />
     );
   }