@fluentui-react-native/storybook-desktop-runtime 0.2.0

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@fluentui-react-native/storybook-desktop-runtime",
+  "version": "0.2.0",
+  "description": "React Native runtime and Metro services for desktop Storybook applications",
+  "license": "MIT",
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "packages/agentic/storybook-desktop-runtime"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./lib/index.js",
+      "default": "./src/index.ts"
+    },
+    "./metro": "./config/metro.cjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "fluentui-scripts clean",
+    "format": "fluentui-scripts format",
+    "lint": "fluentui-scripts lint"
+  },
+  "dependencies": {
+    "@fluentui-react-native/callout": "0.29.4",
+    "@fluentui-react-native/default-theme": "0.27.11",
+    "@fluentui-react-native/design": "0.4.0",
+    "@rnx-kit/metro-config": "^2.2.4",
+    "@rnx-kit/metro-resolver-symlinks": "^0.3.1",
+    "@storybook/react-native": "^10.4.7",
+    "@storybook/react-native-theming": "^10.4.7",
+    "@storybook/react-native-ui-common": "^10.4.7",
+    "@storybook/react-native-ui-lite": "^10.4.7",
+    "oxc-resolver": "^11.24.0",
+    "storybook": "^10.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@fluentui-react-native/scripts": "0.1.0",
+    "@office-iss/react-native-win32": "^0.81.0",
+    "@react-native/babel-preset": "^0.81.0",
+    "@types/react": "~19.1.4",
+    "react": "19.1.4",
+    "react-native": "^0.81.6",
+    "react-native-macos": "^0.81.0",
+    "react-native-windows": "^0.81.0"
+  },
+  "peerDependencies": {
+    "@office-iss/react-native-win32": "^0.81.0",
+    "@types/react": "~19.1.4",
+    "react": "19.1.4",
+    "react-native": "^0.81.6",
+    "react-native-macos": "^0.81.0",
+    "react-native-windows": "^0.81.0"
+  },
+  "peerDependenciesMeta": {
+    "@office-iss/react-native-win32": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-native-macos": {
+      "optional": true
+    },
+    "react-native-windows": {
+      "optional": true
+    }
+  },
+  "furn": {
+    "knip": {
+      "ignoreDependencies": [
+        "@fluentui-react-native/callout"
+      ]
+    }
+  },
+  "rnx-kit": {
+    "kitType": "library",
+    "alignDeps": {
+      "requirements": {
+        "development": [
+          "react-native@0.81"
+        ],
+        "production": [
+          "react-native@0.81"
+        ]
+      },
+      "capabilities": [
+        "babel-preset-react-native",
+        "core",
+        "core-macos",
+        "core-win32",
+        "core-windows"
+      ]
+    },
+    "extends": "@fluentui-react-native/scripts/kit-config"
+  }
+}

package/src/DesktopDriverBridge.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { addons } from 'storybook/preview-api';
+
+import { useDesktopStorybookConfig } from './DesktopStorybookConfig';
+
+export const desktopPrepareStoryEvent = 'furn:desktop:prepare-story';
+export const desktopRequestHelloEvent = 'furn:desktop:request-hello';
+export const desktopRuntimeHelloEvent = 'furn:desktop:hello';
+export const desktopStoryErrorEvent = 'furn:desktop:story-error';
+export const desktopStoryReadyEvent = 'furn:desktop:story-ready';
+
+type PrepareStoryPayload = {
+  requestId: string;
+  runId: string;
+  storyId: string;
+};
+
+export function DesktopDriverBridge(): null {
+  const { prepareStory, runtimeInstance } = useDesktopStorybookConfig();
+
+  React.useEffect(() => {
+    if (
+      !runtimeInstance?.bridgeNonce ||
+      !runtimeInstance.endpoint ||
+      !runtimeInstance.instanceId ||
+      !runtimeInstance.platformManifestDigest ||
+      !runtimeInstance.targetId
+    ) {
+      return undefined;
+    }
+    const channel = addons.getChannel();
+    const emitHello = () => {
+      channel.emit(desktopRuntimeHelloEvent, {
+        endpoint: runtimeInstance.endpoint,
+        instanceId: runtimeInstance.instanceId,
+        nonce: runtimeInstance.bridgeNonce,
+        platformManifestDigest: runtimeInstance.platformManifestDigest,
+        targetId: runtimeInstance.targetId,
+        version: 1,
+      });
+    };
+    const onPrepare = (payload: PrepareStoryPayload) => {
+      if (isPrepareStoryPayload(payload)) {
+        prepareStory(payload);
+      }
+    };
+
+    channel.on(desktopPrepareStoryEvent, onPrepare);
+    channel.on(desktopRequestHelloEvent, emitHello);
+    emitHello();
+    return () => {
+      channel.off(desktopPrepareStoryEvent, onPrepare);
+      channel.off(desktopRequestHelloEvent, emitHello);
+    };
+  }, [prepareStory, runtimeInstance]);
+
+  return null;
+}
+
+function isPrepareStoryPayload(value: unknown): value is PrepareStoryPayload {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const payload = value as Record<string, unknown>;
+  return typeof payload.requestId === 'string' && typeof payload.runId === 'string' && typeof payload.storyId === 'string';
+}

package/src/DesktopStoryRoot.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { addons } from 'storybook/preview-api';
+
+import { desktopStoryErrorEvent, desktopStoryReadyEvent } from './DesktopDriverBridge';
+import { useDesktopStorybookConfig, useDesktopStorybookTestID } from './DesktopStorybookConfig';
+
+type DesktopStoryRootProps = {
+  children: React.ReactNode;
+  storyId: string;
+};
+
+export function DesktopStoryRoot({ children, storyId }: DesktopStoryRootProps) {
+  const { runtimeInstance, selection } = useDesktopStorybookConfig();
+  const testID = useDesktopStorybookTestID('story-root');
+  const activeSelection = selection?.storyId === storyId ? selection : undefined;
+
+  React.useEffect(() => {
+    if (!activeSelection || !runtimeInstance?.portablePlanDigest) {
+      return;
+    }
+    addons.getChannel().emit(desktopStoryReadyEvent, {
+      portablePlanDigest: runtimeInstance.portablePlanDigest,
+      previewGeneration: activeSelection.previewGeneration,
+      requestId: activeSelection.requestId,
+      runId: activeSelection.runId,
+      storyId,
+    });
+  }, [activeSelection, runtimeInstance?.portablePlanDigest, storyId]);
+
+  const marker = JSON.stringify({
+    previewGeneration: activeSelection?.previewGeneration ?? 0,
+    runId: activeSelection?.runId,
+    storyId,
+  });
+  const key = activeSelection ? `${activeSelection.runId}:${activeSelection.previewGeneration}` : storyId;
+
+  return (
+    <StoryRenderErrorBoundary
+      key={key}
+      onError={(message) => {
+        if (activeSelection) {
+          addons.getChannel().emit(desktopStoryErrorEvent, {
+            message,
+            requestId: activeSelection.requestId,
+            runId: activeSelection.runId,
+            storyId,
+          });
+        }
+      }}
+    >
+      <View accessibilityLabel={marker} style={styles.root} testID={testID}>
+        {children}
+      </View>
+    </StoryRenderErrorBoundary>
+  );
+}
+
+type StoryRenderErrorBoundaryProps = {
+  children: React.ReactNode;
+  onError(message: string): void;
+};
+
+type StoryRenderErrorBoundaryState = {
+  error?: Error;
+};
+
+class StoryRenderErrorBoundary extends React.Component<StoryRenderErrorBoundaryProps, StoryRenderErrorBoundaryState> {
+  override state: StoryRenderErrorBoundaryState = {};
+
+  static getDerivedStateFromError(error: Error): StoryRenderErrorBoundaryState {
+    return { error };
+  }
+
+  override componentDidCatch(error: Error): void {
+    this.props.onError(error.message);
+  }
+
+  override render(): React.ReactNode {
+    return this.state.error ? null : this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+});

package/src/DesktopStorybookConfig.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+export type DesktopRuntimeSelection = {
+  previewGeneration: number;
+  requestId: string;
+  runId: string;
+  storyId: string;
+};
+
+export type DesktopStorybookRuntimeInstance = {
+  bridgeNonce?: string;
+  endpoint?: 'macos' | 'windows' | 'win32';
+  instanceId?: string;
+  platformManifestDigest?: string;
+  portablePlanDigest?: string;
+  storybookPort?: number;
+  targetId?: string;
+  testIDPrefix?: string;
+};
+
+type DesktopStorybookConfig = {
+  prepareStory(selection: Omit<DesktopRuntimeSelection, 'previewGeneration'>): void;
+  runtimeInstance?: DesktopStorybookRuntimeInstance;
+  selection?: DesktopRuntimeSelection;
+  testIDPrefix: string;
+};
+
+const defaultConfig: DesktopStorybookConfig = {
+  prepareStory: () => undefined,
+  testIDPrefix: 'storybook-desktop',
+};
+
+const DesktopStorybookConfigContext = React.createContext<DesktopStorybookConfig>(defaultConfig);
+
+export function DesktopStorybookConfigProvider({
+  children,
+  runtimeInstance,
+  testIDPrefix,
+}: React.PropsWithChildren<Pick<DesktopStorybookConfig, 'runtimeInstance' | 'testIDPrefix'>>) {
+  const [selection, setSelection] = React.useState<DesktopRuntimeSelection>();
+  const prepareStory = React.useCallback((next: Omit<DesktopRuntimeSelection, 'previewGeneration'>) => {
+    setSelection((current) => ({ ...next, previewGeneration: (current?.previewGeneration ?? 0) + 1 }));
+  }, []);
+  const value = React.useMemo(
+    () => ({ prepareStory, runtimeInstance, selection, testIDPrefix }),
+    [prepareStory, runtimeInstance, selection, testIDPrefix],
+  );
+  return <DesktopStorybookConfigContext.Provider value={value}>{children}</DesktopStorybookConfigContext.Provider>;
+}
+
+export function useDesktopStorybookConfig(): DesktopStorybookConfig {
+  return React.useContext(DesktopStorybookConfigContext);
+}
+
+export function useDesktopStorybookTestID(suffix: string): string {
+  const { testIDPrefix } = useDesktopStorybookConfig();
+  return `${testIDPrefix}-${suffix}`;
+}

package/src/StorybookTheme.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { createDefaultTheme } from '@fluentui-react-native/default-theme';
+import { ThemeProvider } from '@fluentui-react-native/design/theming';
+import type { ThemeReference } from '@fluentui-react-native/design/theming';
+
+import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
+
+type ThemeChoice = {
+  label: string;
+  theme?: ThemeReference;
+};
+
+const themeChoiceNames = ['none', 'light', 'dark', 'highContrast'] as const;
+type ThemeChoiceName = (typeof themeChoiceNames)[number];
+
+const themeChoices: Record<ThemeChoiceName, ThemeChoice> = {
+  none: { label: 'No theme' },
+  light: { label: 'Light', theme: createDefaultTheme({ appearance: 'light' }) },
+  dark: { label: 'Dark', theme: createDefaultTheme({ appearance: 'dark' }) },
+  highContrast: { label: 'High contrast', theme: createDefaultTheme({ appearance: 'highContrast' }) },
+};
+
+const StorybookThemeContext = React.createContext<ThemeReference | undefined>(undefined);
+
+export function StorybookThemeHost({ children }: React.PropsWithChildren) {
+  const [selectedName, setSelectedName] = React.useState<ThemeChoiceName>('none');
+  const selectedTheme = themeChoices[selectedName].theme;
+  const toolbarTestID = useDesktopStorybookTestID('theme-toolbar');
+  const optionTestID = useDesktopStorybookTestID('theme');
+
+  return (
+    <StorybookThemeContext.Provider value={selectedTheme}>
+      <View style={styles.root}>
+        <View accessibilityRole="toolbar" style={styles.header} testID={toolbarTestID}>
+          <Text style={styles.label}>Theme</Text>
+          {themeChoiceNames.map((name) => {
+            const choice = themeChoices[name];
+            const selected = name === selectedName;
+            return (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityState={{ selected }}
+                key={name}
+                onPress={() => setSelectedName(name)}
+                style={({ pressed }) => [styles.option, selected && styles.selectedOption, pressed && styles.pressedOption]}
+                testID={`${optionTestID}-${name}`}
+              >
+                <Text style={[styles.optionText, selected && styles.selectedOptionText]}>{choice.label}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+        <View style={styles.storybook}>{children}</View>
+      </View>
+    </StorybookThemeContext.Provider>
+  );
+}
+
+export function StorybookThemeProvider({ children }: React.PropsWithChildren) {
+  const theme = React.useContext(StorybookThemeContext);
+  return theme ? <ThemeProvider theme={theme}>{children}</ThemeProvider> : children;
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  header: {
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    borderBottomColor: '#d1d1d1',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  label: {
+    color: '#242424',
+    fontSize: 14,
+    fontWeight: '600',
+    marginEnd: 4,
+  },
+  option: {
+    backgroundColor: '#ffffff',
+    borderColor: '#b3b3b3',
+    borderRadius: 4,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  selectedOption: {
+    backgroundColor: '#0f6cbd',
+    borderColor: '#0f6cbd',
+  },
+  pressedOption: {
+    opacity: 0.75,
+  },
+  optionText: {
+    color: '#242424',
+    fontSize: 12,
+  },
+  selectedOptionText: {
+    color: '#ffffff',
+    fontWeight: '600',
+  },
+  storybook: {
+    flex: 1,
+  },
+});

package/src/StorybookUI.ts

@@ -0,0 +1 @@
+export { LiteUI as StorybookUIComponent } from '@storybook/react-native-ui-lite';