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

package/config/metro.cjs

@@ -0,0 +1,125 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const { makeMetroConfig } = require('@rnx-kit/metro-config');
+const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');
+const { withStorybook } = require('@storybook/react-native/withStorybook');
+
+const safeAreaStub = path.resolve(__dirname, 'react-native-safe-area-context.cjs');
+
+function resolvePlatformModule(moduleName, platform) {
+  if (platform !== 'win32') {
+    return moduleName;
+  }
+
+  if (moduleName === 'react-native') {
+    return '@office-iss/react-native-win32';
+  }
+
+  if (moduleName.startsWith('react-native/')) {
+    return `@office-iss/react-native-win32/${moduleName.slice('react-native/'.length)}`;
+  }
+
+  return moduleName;
+}
+
+function createDesktopStorybookMetroConfig({ configPath }) {
+  if (!configPath) {
+    throw new TypeError('createDesktopStorybookMetroConfig requires an app-owned Storybook configPath.');
+  }
+
+  const runtimeModulePath = writeRuntimeInstanceModule(path.dirname(configPath));
+  const symlinkResolver = MetroSymlinksResolver({
+    resolver: 'oxc-resolver',
+  });
+  const config = makeMetroConfig({
+    resolver: {
+      resolveRequest: (context, moduleName, platform) => {
+        // Storybook's path-based lite-mode mock does not recognize Yarn's virtual pnpm paths.
+        if (moduleName === '@storybook/react-native-ui' || moduleName.startsWith('@storybook/react-native-ui/')) {
+          return { type: 'empty' };
+        }
+        if (moduleName === 'react-native-safe-area-context') {
+          return { type: 'sourceFile', filePath: safeAreaStub };
+        }
+        return symlinkResolver(context, resolvePlatformModule(moduleName, platform), platform);
+      },
+      unstable_enablePackageExports: true,
+      unstable_conditionNames: ['react-native', 'import', 'require'],
+      disableHierarchicalLookup: true,
+      enableSymlinks: true,
+    },
+    transformer: {
+      unstable_allowRequireContext: true,
+    },
+  });
+
+  const storybookConfig = withStorybook(config, {
+    configPath,
+    liteMode: true,
+  });
+  const getPolyfills = storybookConfig.serializer?.getPolyfills;
+
+  return {
+    ...storybookConfig,
+    serializer: {
+      ...storybookConfig.serializer,
+      getPolyfills: (...args) => [...(getPolyfills?.(...args) ?? []), runtimeModulePath],
+    },
+  };
+}
+
+function writeRuntimeInstanceModule(projectRoot) {
+  const generatedDirectory = path.join(projectRoot, 'storybook-desktop.generated');
+  const runtimeModulePath = path.join(generatedDirectory, 'runtime-instance.js');
+  const storybookPort = readPort(process.env.STORYBOOK_WS_PORT, 7007);
+  const instanceId = process.env.FURN_STORYBOOK_INSTANCE_ID || 'default';
+  const driverManifest = readDriverManifest(process.env.STORYBOOK_DRIVER_MANIFEST);
+  const runtimeInstance = {
+    instanceId,
+    storybookPort,
+    ...(driverManifest
+      ? {
+          bridgeNonce: driverManifest.bridgeNonce,
+          endpoint: driverManifest.endpoint,
+          platformManifestDigest: driverManifest.platformManifestDigest,
+          portablePlanDigest: driverManifest.portablePlanDigest,
+          targetId: driverManifest.targetId,
+          testIDPrefix: driverManifest.testIDPrefix,
+        }
+      : {}),
+  };
+  const content = `globalThis.__FURN_DESKTOP_STORYBOOK_INSTANCE__ = Object.freeze(${JSON.stringify(runtimeInstance)});\n`;
+
+  fs.mkdirSync(generatedDirectory, { recursive: true });
+  if (!fs.existsSync(runtimeModulePath) || fs.readFileSync(runtimeModulePath, 'utf8') !== content) {
+    fs.writeFileSync(runtimeModulePath, content);
+  }
+
+  return runtimeModulePath;
+}
+
+function readDriverManifest(manifestPath) {
+  if (!manifestPath) {
+    return undefined;
+  }
+  if (!fs.existsSync(manifestPath)) {
+    throw new Error(`Desktop Driver manifest does not exist at ${manifestPath}.`);
+  }
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+  if (manifest.schemaVersion !== 1) {
+    throw new Error(`Unsupported Desktop Driver manifest schema "${manifest.schemaVersion}".`);
+  }
+  return manifest;
+}
+
+function readPort(value, fallback) {
+  const port = Number(value) || fallback;
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    throw new RangeError(`Invalid Storybook port "${value}".`);
+  }
+  return port;
+}
+
+module.exports = {
+  createDesktopStorybookMetroConfig,
+};

package/config/react-native-safe-area-context.cjs

@@ -0,0 +1,22 @@
+const React = require('react');
+const { View } = require('react-native');
+
+const insets = { top: 0, right: 0, bottom: 0, left: 0 };
+const frame = { x: 0, y: 0, width: 0, height: 0 };
+
+const SafeAreaInsetsContext = React.createContext(insets);
+const SafeAreaFrameContext = React.createContext(frame);
+
+const SafeAreaProvider = ({ children }) => React.createElement(View, { style: { flex: 1 } }, children);
+const SafeAreaView = React.forwardRef((props, ref) => React.createElement(View, { ref, ...props }));
+
+module.exports = {
+  SafeAreaProvider,
+  SafeAreaConsumer: SafeAreaInsetsContext.Consumer,
+  SafeAreaInsetsContext,
+  SafeAreaFrameContext,
+  SafeAreaView,
+  useSafeAreaInsets: () => insets,
+  useSafeAreaFrame: () => frame,
+  initialWindowMetrics: { insets, frame },
+};

package/lib/DesktopDriverBridge.d.ts

@@ -0,0 +1,7 @@
+export declare const desktopPrepareStoryEvent = "furn:desktop:prepare-story";
+export declare const desktopRequestHelloEvent = "furn:desktop:request-hello";
+export declare const desktopRuntimeHelloEvent = "furn:desktop:hello";
+export declare const desktopStoryErrorEvent = "furn:desktop:story-error";
+export declare const desktopStoryReadyEvent = "furn:desktop:story-ready";
+export declare function DesktopDriverBridge(): null;
+//# sourceMappingURL=DesktopDriverBridge.d.ts.map

package/lib/DesktopDriverBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopDriverBridge.d.ts","sourceRoot":"","sources":["../src/DesktopDriverBridge.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB,+BAA+B,CAAC;AACrE,eAAO,MAAM,wBAAwB,+BAA+B,CAAC;AACrE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AACjE,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AAQjE,wBAAgB,mBAAmB,IAAI,IAAI,CAwC1C"}

package/lib/DesktopDriverBridge.js

@@ -0,0 +1,52 @@
+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';
+export function DesktopDriverBridge() {
+    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) => {
+            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) {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const payload = value;
+    return typeof payload.requestId === 'string' && typeof payload.runId === 'string' && typeof payload.storyId === 'string';
+}
+//# sourceMappingURL=DesktopDriverBridge.js.map

package/lib/DesktopDriverBridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopDriverBridge.js","sourceRoot":"","sources":["../src/DesktopDriverBridge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,CAAC,MAAM,wBAAwB,GAAG,4BAA4B,CAAC;AACrE,MAAM,CAAC,MAAM,wBAAwB,GAAG,4BAA4B,CAAC;AACrE,MAAM,CAAC,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAC7D,MAAM,CAAC,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AACjE,MAAM,CAAC,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAQjE,MAAM,UAAU,mBAAmB;IACjC,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAEtE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IACE,CAAC,eAAe,EAAE,WAAW;YAC7B,CAAC,eAAe,CAAC,QAAQ;YACzB,CAAC,eAAe,CAAC,UAAU;YAC3B,CAAC,eAAe,CAAC,sBAAsB;YACvC,CAAC,eAAe,CAAC,QAAQ,EACzB,CAAC;YACD,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;QACpC,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE;gBACrC,QAAQ,EAAE,eAAe,CAAC,QAAQ;gBAClC,UAAU,EAAE,eAAe,CAAC,UAAU;gBACtC,KAAK,EAAE,eAAe,CAAC,WAAW;gBAClC,sBAAsB,EAAE,eAAe,CAAC,sBAAsB;gBAC9D,QAAQ,EAAE,eAAe,CAAC,QAAQ;gBAClC,OAAO,EAAE,CAAC;aACX,CAAC,CAAC;QACL,CAAC,CAAC;QACF,MAAM,SAAS,GAAG,CAAC,OAA4B,EAAE,EAAE;YACjD,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC;gBACnC,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QAEF,OAAO,CAAC,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,CAAC,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;QAChD,SAAS,EAAE,CAAC;QACZ,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;YACjD,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,SAAS,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAc;IAC3C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QACxC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,OAAO,GAAG,KAAgC,CAAC;IACjD,OAAO,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ,IAAI,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,IAAI,OAAO,OAAO,CAAC,OAAO,KAAK,QAAQ,CAAC;AAC3H,CAAC"}

package/lib/DesktopStoryRoot.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type DesktopStoryRootProps = {
+    children: React.ReactNode;
+    storyId: string;
+};
+export declare function DesktopStoryRoot({ children, storyId }: DesktopStoryRootProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DesktopStoryRoot.d.ts.map

package/lib/DesktopStoryRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopStoryRoot.d.ts","sourceRoot":"","sources":["../src/DesktopStoryRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CA4C5E"}

package/lib/DesktopStoryRoot.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+export function DesktopStoryRoot({ children, storyId }) {
+    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 (_jsx(StoryRenderErrorBoundary, { onError: (message) => {
+            if (activeSelection) {
+                addons.getChannel().emit(desktopStoryErrorEvent, {
+                    message,
+                    requestId: activeSelection.requestId,
+                    runId: activeSelection.runId,
+                    storyId,
+                });
+            }
+        }, children: _jsx(View, { accessibilityLabel: marker, style: styles.root, testID: testID, children: children }) }, key));
+}
+class StoryRenderErrorBoundary extends React.Component {
+    state = {};
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error.message);
+    }
+    render() {
+        return this.state.error ? null : this.props.children;
+    }
+}
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+    },
+});
+//# sourceMappingURL=DesktopStoryRoot.js.map

package/lib/DesktopStoryRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopStoryRoot.js","sourceRoot":"","sources":["../src/DesktopStoryRoot.tsx"],"names":[],"mappings":"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"}

package/lib/DesktopStorybookConfig.d.ts

@@ -0,0 +1,28 @@
+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;
+};
+export declare function DesktopStorybookConfigProvider({ children, runtimeInstance, testIDPrefix, }: React.PropsWithChildren<Pick<DesktopStorybookConfig, 'runtimeInstance' | 'testIDPrefix'>>): import("react/jsx-runtime").JSX.Element;
+export declare function useDesktopStorybookConfig(): DesktopStorybookConfig;
+export declare function useDesktopStorybookTestID(suffix: string): string;
+export {};
+//# sourceMappingURL=DesktopStorybookConfig.d.ts.map

package/lib/DesktopStorybookConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopStorybookConfig.d.ts","sourceRoot":"","sources":["../src/DesktopStorybookConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,uBAAuB,GAAG;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,GAAG,IAAI,CAAC;IAClF,eAAe,CAAC,EAAE,+BAA+B,CAAC;IAClD,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AASF,wBAAgB,8BAA8B,CAAC,EAC7C,QAAQ,EACR,eAAe,EACf,YAAY,GACb,EAAE,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,sBAAsB,EAAE,iBAAiB,GAAG,cAAc,CAAC,CAAC,2CAU3F;AAED,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE;AAED,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAGhE"}

package/lib/DesktopStorybookConfig.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const defaultConfig = {
+    prepareStory: () => undefined,
+    testIDPrefix: 'storybook-desktop',
+};
+const DesktopStorybookConfigContext = React.createContext(defaultConfig);
+export function DesktopStorybookConfigProvider({ children, runtimeInstance, testIDPrefix, }) {
+    const [selection, setSelection] = React.useState();
+    const prepareStory = React.useCallback((next) => {
+        setSelection((current) => ({ ...next, previewGeneration: (current?.previewGeneration ?? 0) + 1 }));
+    }, []);
+    const value = React.useMemo(() => ({ prepareStory, runtimeInstance, selection, testIDPrefix }), [prepareStory, runtimeInstance, selection, testIDPrefix]);
+    return _jsx(DesktopStorybookConfigContext.Provider, { value: value, children: children });
+}
+export function useDesktopStorybookConfig() {
+    return React.useContext(DesktopStorybookConfigContext);
+}
+export function useDesktopStorybookTestID(suffix) {
+    const { testIDPrefix } = useDesktopStorybookConfig();
+    return `${testIDPrefix}-${suffix}`;
+}
+//# sourceMappingURL=DesktopStorybookConfig.js.map

package/lib/DesktopStorybookConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopStorybookConfig.js","sourceRoot":"","sources":["../src/DesktopStorybookConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,MAAM,aAAa,GAA2B;IAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS;IAC7B,YAAY,EAAE,mBAAmB;CAClC,CAAC;AAEF,MAAM,6BAA6B,GAAG,KAAK,CAAC,aAAa,CAAyB,aAAa,CAAC,CAAC;AAEjG,MAAM,UAAU,8BAA8B,CAAC,EAC7C,QAAQ,EACR,eAAe,EACf,YAAY,GAC8E;IAC1F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,EAA2B,CAAC;IAC5E,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAwD,EAAE,EAAE;QAClG,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,iBAAiB,EAAE,CAAC,OAAO,EAAE,iBAAiB,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACrG,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAClE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,CAAC,CACzD,CAAC;IACF,OAAO,KAAC,6BAA6B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA0C,CAAC;AACnH,CAAC;AAED,MAAM,UAAU,yBAAyB;IACvC,OAAO,KAAK,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,MAAc;IACtD,MAAM,EAAE,YAAY,EAAE,GAAG,yBAAyB,EAAE,CAAC;IACrD,OAAO,GAAG,YAAY,IAAI,MAAM,EAAE,CAAC;AACrC,CAAC"}

package/lib/StorybookTheme.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare function StorybookThemeHost({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function StorybookThemeProvider({ children }: React.PropsWithChildren): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal>;
+//# sourceMappingURL=StorybookTheme.d.ts.map

package/lib/StorybookTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorybookTheme.d.ts","sourceRoot":"","sources":["../src/StorybookTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAgCvE;AAED,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,mRAG3E"}

package/lib/StorybookTheme.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useDesktopStorybookTestID } from './DesktopStorybookConfig';
+const themeChoiceNames = ['none', 'light', 'dark', 'highContrast'];
+const themeChoices = {
+    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(undefined);
+export function StorybookThemeHost({ children }) {
+    const [selectedName, setSelectedName] = React.useState('none');
+    const selectedTheme = themeChoices[selectedName].theme;
+    const toolbarTestID = useDesktopStorybookTestID('theme-toolbar');
+    const optionTestID = useDesktopStorybookTestID('theme');
+    return (_jsx(StorybookThemeContext.Provider, { value: selectedTheme, children: _jsxs(View, { style: styles.root, children: [_jsxs(View, { accessibilityRole: "toolbar", style: styles.header, testID: toolbarTestID, children: [_jsx(Text, { style: styles.label, children: "Theme" }), themeChoiceNames.map((name) => {
+                            const choice = themeChoices[name];
+                            const selected = name === selectedName;
+                            return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected }, onPress: () => setSelectedName(name), style: ({ pressed }) => [styles.option, selected && styles.selectedOption, pressed && styles.pressedOption], testID: `${optionTestID}-${name}`, children: _jsx(Text, { style: [styles.optionText, selected && styles.selectedOptionText], children: choice.label }) }, name));
+                        })] }), _jsx(View, { style: styles.storybook, children: children })] }) }));
+}
+export function StorybookThemeProvider({ children }) {
+    const theme = React.useContext(StorybookThemeContext);
+    return theme ? _jsx(ThemeProvider, { theme: theme, children: children }) : 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,
+    },
+});
+//# sourceMappingURL=StorybookTheme.js.map

package/lib/StorybookTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorybookTheme.js","sourceRoot":"","sources":["../src/StorybookTheme.tsx"],"names":[],"mappings":"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"}

package/lib/StorybookUI.d.ts

@@ -0,0 +1,2 @@
+export { LiteUI as StorybookUIComponent } from '@storybook/react-native-ui-lite';
+//# sourceMappingURL=StorybookUI.d.ts.map

package/lib/StorybookUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorybookUI.d.ts","sourceRoot":"","sources":["../src/StorybookUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC"}

package/lib/StorybookUI.js

@@ -0,0 +1,2 @@
+export { LiteUI as StorybookUIComponent } from '@storybook/react-native-ui-lite';
+//# sourceMappingURL=StorybookUI.js.map

package/lib/StorybookUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorybookUI.js","sourceRoot":"","sources":["../src/StorybookUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC"}

package/lib/StorybookUI.win32.d.ts

@@ -0,0 +1,3 @@
+import type { SBUI } from '@storybook/react-native-ui-common';
+export declare const StorybookUIComponent: SBUI;
+//# sourceMappingURL=StorybookUI.win32.d.ts.map

package/lib/StorybookUI.win32.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorybookUI.win32.d.ts","sourceRoot":"","sources":["../src/StorybookUI.win32.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAa,MAAM,mCAAmC,CAAC;AAWzE,eAAO,MAAM,oBAAoB,EAAE,IAuOlC,CAAC"}