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

package/src/StorybookUI.win32.tsx

@@ -0,0 +1,330 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { ThemeProvider } from '@storybook/react-native-theming';
+import { StorageProvider } from '@storybook/react-native-ui-common';
+import type { SBUI, Selection } from '@storybook/react-native-ui-common';
+import { Sidebar } from '@storybook/react-native-ui-lite';
+
+import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
+import { Win32AddonsPanel } from './Win32AddonsPanel';
+import { Win32CalloutPortal } from './Win32CalloutPortal';
+import { Win32ResizeHandle } from './Win32ResizeHandle';
+
+const emptyRefs = {};
+const emptyStatus = {};
+
+export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story, storyHash, theme }) => {
+  const storiesAnchorRef = React.useRef<View>(null);
+  const addonsAnchorRef = React.useRef<View>(null);
+  const [sidebarVisible, setSidebarVisible] = React.useState(true);
+  const [sidebarWidth, setSidebarWidth] = React.useState(280);
+  const [addonsVisible, setAddonsVisible] = React.useState(true);
+  const [addonsHeight, setAddonsHeight] = React.useState(280);
+  const [storyDrawerOpen, setStoryDrawerOpen] = React.useState(false);
+  const [addonsPanelOpen, setAddonsPanelOpen] = React.useState(false);
+  const chromeTestID = useDesktopStorybookTestID('win32-chrome');
+  const sidebarTestID = useDesktopStorybookTestID('win32-sidebar');
+  const sidebarResizeTestID = useDesktopStorybookTestID('win32-sidebar-resize');
+  const toolbarTestID = useDesktopStorybookTestID('win32-desktop-toolbar');
+  const showSidebarTestID = useDesktopStorybookTestID('win32-show-sidebar');
+  const popoutStoriesTestID = useDesktopStorybookTestID('win32-popout-stories');
+  const showAddonsTestID = useDesktopStorybookTestID('win32-show-addons');
+  const popoutAddonsTestID = useDesktopStorybookTestID('win32-popout-addons');
+  const previewTestID = useDesktopStorybookTestID('win32-preview');
+  const addonsResizeTestID = useDesktopStorybookTestID('win32-addons-resize');
+  const inlineAddonsTestID = useDesktopStorybookTestID('win32-inline-addons');
+  const storyDrawerTestID = useDesktopStorybookTestID('win32-story-drawer');
+  const closeStoriesTestID = useDesktopStorybookTestID('win32-close-stories');
+  const addonsDrawerTestID = useDesktopStorybookTestID('win32-addons-drawer');
+  const hideSidebarTestID = useDesktopStorybookTestID('win32-hide-sidebar');
+
+  const setSelection = React.useCallback(
+    (selection: Selection) => {
+      if (selection?.storyId) {
+        setStory(selection.storyId);
+        setStoryDrawerOpen(false);
+        setSidebarVisible(true);
+      }
+    },
+    [setStory],
+  );
+  const closeStoryDrawer = React.useCallback(() => {
+    setStoryDrawerOpen(false);
+    setSidebarVisible(true);
+  }, []);
+  const closeAddonsDrawer = React.useCallback(() => {
+    setAddonsPanelOpen(false);
+    setAddonsVisible(true);
+  }, []);
+  const resizeSidebar = React.useCallback((delta: number) => {
+    setSidebarWidth((current) => Math.min(Math.max(current + delta, 200), 480));
+  }, []);
+  const resizeAddons = React.useCallback((delta: number) => {
+    setAddonsHeight((current) => Math.min(Math.max(current - delta, 160), 520));
+  }, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <StorageProvider storage={storage}>
+        <View style={styles.root} testID={chromeTestID}>
+          {sidebarVisible ? (
+            <>
+              <View
+                style={[
+                  styles.sidebar,
+                  {
+                    backgroundColor: theme.background.content,
+                    borderColor: theme.appBorderColor,
+                    width: sidebarWidth,
+                  },
+                ]}
+                testID={sidebarTestID}
+              >
+                <View accessibilityLabel="Storybook sidebar" accessible style={styles.sidebarHeader} testID={`${sidebarTestID}-header`}>
+                  <Text style={[styles.sidebarTitle, { color: theme.barTextColor }]}>Stories</Text>
+                  <Pressable
+                    accessibilityLabel="Hide story sidebar"
+                    accessibilityRole="button"
+                    onPress={() => setSidebarVisible(false)}
+                    style={styles.headerButton}
+                    testID={hideSidebarTestID}
+                  >
+                    <Text style={{ color: theme.color.mediumdark }}>Hide</Text>
+                  </Pressable>
+                </View>
+                <View style={styles.sidebarContent}>
+                  <Sidebar
+                    index={storyHash}
+                    indexError={undefined}
+                    previewInitialized
+                    refs={emptyRefs}
+                    setSelection={setSelection}
+                    status={emptyStatus}
+                    storyId={story?.id}
+                  />
+                </View>
+              </View>
+              <Win32ResizeHandle direction="horizontal" onResize={resizeSidebar} testID={sidebarResizeTestID} />
+            </>
+          ) : null}
+          <View style={styles.main}>
+            {!sidebarVisible ? (
+              <View
+                accessibilityLabel="Storybook desktop toolbar"
+                accessible
+                style={[styles.toolbar, { backgroundColor: theme.background.content, borderBottomColor: theme.appBorderColor }]}
+                testID={toolbarTestID}
+              >
+                <Pressable
+                  accessibilityRole="button"
+                  onPress={() => setSidebarVisible(true)}
+                  style={[styles.toolbarButton, { backgroundColor: theme.button.background, borderColor: theme.appBorderColor }]}
+                  testID={showSidebarTestID}
+                >
+                  <Text style={{ color: theme.color.mediumdark }}>Show stories</Text>
+                </Pressable>
+                <Pressable
+                  accessibilityRole="button"
+                  onPress={() => setStoryDrawerOpen(true)}
+                  ref={storiesAnchorRef}
+                  style={({ pressed }) => [
+                    styles.toolbarButton,
+                    {
+                      backgroundColor: storyDrawerOpen ? theme.barSelectedColor : theme.button.background,
+                      borderColor: theme.appBorderColor,
+                      opacity: pressed ? 0.75 : 1,
+                    },
+                  ]}
+                  testID={popoutStoriesTestID}
+                >
+                  <Text style={{ color: storyDrawerOpen ? theme.color.lightest : theme.color.mediumdark }}>Pop out stories</Text>
+                </Pressable>
+                {!addonsVisible ? (
+                  <Pressable
+                    accessibilityRole="button"
+                    onPress={() => setAddonsVisible(true)}
+                    style={[styles.toolbarButton, { backgroundColor: theme.button.background, borderColor: theme.appBorderColor }]}
+                    testID={showAddonsTestID}
+                  >
+                    <Text style={{ color: theme.color.mediumdark }}>Show addons</Text>
+                  </Pressable>
+                ) : null}
+                <Pressable
+                  accessibilityRole="button"
+                  onPress={() => {
+                    setAddonsVisible(false);
+                    setAddonsPanelOpen(true);
+                  }}
+                  ref={addonsAnchorRef}
+                  style={({ pressed }) => [
+                    styles.toolbarButton,
+                    {
+                      backgroundColor: addonsPanelOpen ? theme.barSelectedColor : theme.button.background,
+                      borderColor: theme.appBorderColor,
+                      opacity: pressed ? 0.75 : 1,
+                    },
+                  ]}
+                  testID={popoutAddonsTestID}
+                >
+                  <Text style={{ color: addonsPanelOpen ? theme.color.lightest : theme.color.mediumdark }}>Pop out addons</Text>
+                </Pressable>
+                <Text numberOfLines={1} style={[styles.currentStory, { color: theme.textMutedColor }]}>
+                  {story ? `${story.title}/${story.name}` : 'No story selected'}
+                </Text>
+              </View>
+            ) : null}
+            <View style={styles.preview} testID={previewTestID}>
+              {children}
+            </View>
+            {addonsVisible ? (
+              <>
+                <Win32ResizeHandle direction="vertical" onResize={resizeAddons} testID={addonsResizeTestID} />
+                <View
+                  style={[
+                    styles.addons,
+                    {
+                      backgroundColor: theme.background.content,
+                      height: addonsHeight,
+                    },
+                  ]}
+                  testID={inlineAddonsTestID}
+                >
+                  <Win32AddonsPanel onClose={() => setAddonsVisible(false)} parameters={story?.parameters} storyId={story?.id} />
+                </View>
+              </>
+            ) : null}
+          </View>
+          <Win32CalloutPortal
+            accessibilityLabel="Storybook stories"
+            directionalHint="bottomLeftEdge"
+            height={600}
+            onDismiss={closeStoryDrawer}
+            target={storiesAnchorRef}
+            testID={storyDrawerTestID}
+            visible={storyDrawerOpen}
+            width={360}
+          >
+            <View style={styles.drawerHeader}>
+              <Text style={[styles.drawerTitle, { color: theme.barTextColor }]}>Stories</Text>
+              <Pressable
+                accessibilityLabel="Close story drawer"
+                accessibilityRole="button"
+                onPress={closeStoryDrawer}
+                style={styles.closeButton}
+                testID={closeStoriesTestID}
+              >
+                <Text style={{ color: theme.color.mediumdark }}>Close</Text>
+              </Pressable>
+            </View>
+            <View style={styles.drawerContent}>
+              <Sidebar
+                index={storyHash}
+                indexError={undefined}
+                previewInitialized
+                refs={emptyRefs}
+                setSelection={setSelection}
+                status={emptyStatus}
+                storyId={story?.id}
+              />
+            </View>
+          </Win32CalloutPortal>
+          <Win32CalloutPortal
+            accessibilityLabel="Storybook addons"
+            directionalHint="bottomLeftEdge"
+            height={480}
+            onDismiss={closeAddonsDrawer}
+            target={addonsAnchorRef}
+            testID={addonsDrawerTestID}
+            visible={addonsPanelOpen}
+            width={520}
+          >
+            <Win32AddonsPanel onClose={closeAddonsDrawer} parameters={story?.parameters} storyId={story?.id} />
+          </Win32CalloutPortal>
+        </View>
+      </StorageProvider>
+    </ThemeProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  sidebar: {
+    borderRightWidth: 1,
+  },
+  sidebarHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    minHeight: 44,
+    paddingHorizontal: 12,
+  },
+  sidebarTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  sidebarContent: {
+    flex: 1,
+  },
+  headerButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 32,
+    paddingHorizontal: 8,
+  },
+  main: {
+    flex: 1,
+  },
+  toolbar: {
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    gap: 8,
+    minHeight: 44,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  toolbarButton: {
+    alignItems: 'center',
+    borderRadius: 4,
+    borderWidth: 1,
+    justifyContent: 'center',
+    minHeight: 30,
+    paddingHorizontal: 12,
+  },
+  currentStory: {
+    flex: 1,
+    fontSize: 11,
+    marginStart: 4,
+  },
+  addons: {
+    minHeight: 160,
+  },
+  drawerHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    minHeight: 44,
+    paddingHorizontal: 12,
+  },
+  drawerTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  closeButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 32,
+    paddingHorizontal: 8,
+  },
+  drawerContent: {
+    flex: 1,
+    minHeight: 420,
+  },
+  preview: {
+    flex: 1,
+  },
+});

package/src/Win32AddonsPanel.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '@storybook/react-native-theming';
+import type { Parameters } from 'storybook/internal/csf';
+import { Addon_TypesEnum } from 'storybook/internal/types';
+import type { Addon_BaseType, Addon_Collection } from 'storybook/internal/types';
+import { addons } from 'storybook/manager-api';
+
+import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
+
+type Win32AddonsPanelProps = {
+  onClose: () => void;
+  parameters?: Parameters;
+  storyId?: string;
+};
+
+function preferredPanelId(panels: [string, Addon_BaseType][]) {
+  return panels.find(([id]) => id.includes('actions'))?.[0] ?? panels[0]?.[0];
+}
+
+export function Win32AddonsPanel({ onClose, parameters, storyId }: Win32AddonsPanelProps) {
+  const theme = useTheme();
+  const panelTestID = useDesktopStorybookTestID('win32-addons-panel');
+  const addonTestID = useDesktopStorybookTestID('win32-addon');
+  const closeTestID = useDesktopStorybookTestID('win32-close-addons');
+  const panels = React.useMemo(() => {
+    const allPanels: Addon_Collection<Addon_BaseType> = addons.getElements(Addon_TypesEnum.PANEL);
+    return Object.entries(allPanels).filter(([, panel]) => !panel.paramKey || !parameters?.[panel.paramKey]?.disable);
+  }, [parameters]);
+  const [selectedPanelId, setSelectedPanelId] = React.useState(() => preferredPanelId(panels));
+  const activePanel = panels.find(([id]) => id === selectedPanelId) ?? panels[0];
+
+  React.useEffect(() => {
+    if (!panels.some(([id]) => id === selectedPanelId)) {
+      setSelectedPanelId(preferredPanelId(panels));
+    }
+  }, [panels, selectedPanelId]);
+
+  return (
+    <View style={styles.root} testID={panelTestID}>
+      <View
+        accessibilityLabel="Storybook addons panel"
+        accessible
+        style={[styles.header, { borderBottomColor: theme.appBorderColor }]}
+        testID={`${panelTestID}-header`}
+      >
+        <ScrollView
+          contentContainerStyle={styles.tabs}
+          horizontal
+          keyboardShouldPersistTaps="handled"
+          showsHorizontalScrollIndicator={false}
+        >
+          {panels.map(([id, panel]) => {
+            const title = typeof panel.title === 'function' ? panel.title({}) : panel.title;
+            const selected = id === activePanel?.[0];
+
+            return (
+              <Pressable
+                accessibilityLabel={String(title)}
+                accessibilityRole="tab"
+                accessibilityState={{ selected }}
+                key={id}
+                onPress={() => setSelectedPanelId(id)}
+                style={[
+                  styles.tab,
+                  selected && {
+                    borderBottomColor: theme.barSelectedColor,
+                    borderBottomWidth: 2,
+                  },
+                ]}
+                testID={`${addonTestID}-${id.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`}
+              >
+                <Text style={{ color: selected ? theme.barSelectedColor : theme.color.mediumdark }}>{String(title)}</Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+        <Pressable
+          accessibilityLabel="Close addons panel"
+          accessibilityRole="button"
+          onPress={onClose}
+          style={styles.closeButton}
+          testID={closeTestID}
+        >
+          <Text style={{ color: theme.color.mediumdark }}>Close</Text>
+        </Pressable>
+      </View>
+      <ScrollView contentContainerStyle={styles.panelContent} key={storyId} keyboardShouldPersistTaps="handled">
+        {!storyId ? (
+          <Text style={{ color: theme.color.mediumdark }}>No story selected.</Text>
+        ) : !activePanel ? (
+          <Text style={{ color: theme.color.mediumdark }}>No addons loaded.</Text>
+        ) : (
+          <PanelRenderer panel={activePanel[1]} />
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+function PanelRenderer({ panel }: { panel: Addon_BaseType }) {
+  return panel.render({ active: true });
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 240,
+  },
+  header: {
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+  },
+  tabs: {
+    alignItems: 'stretch',
+  },
+  tab: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 40,
+    paddingHorizontal: 14,
+  },
+  closeButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 40,
+    paddingHorizontal: 12,
+  },
+  panelContent: {
+    flexGrow: 1,
+    padding: 12,
+  },
+});

package/src/Win32CalloutPortal.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Callout } from '@fluentui-react-native/callout';
+import type { CalloutProps, DirectionalHint } from '@fluentui-react-native/callout';
+import { useTheme } from '@storybook/react-native-theming';
+
+type Win32CalloutPortalProps = React.PropsWithChildren<{
+  accessibilityLabel: string;
+  directionalHint: DirectionalHint;
+  height: number;
+  onDismiss: () => void;
+  onShow?: () => void;
+  target: CalloutProps['target'];
+  testID: string;
+  visible: boolean;
+  width: number;
+}>;
+
+export function Win32CalloutPortal({
+  accessibilityLabel,
+  children,
+  directionalHint,
+  height,
+  onDismiss,
+  onShow,
+  target,
+  testID,
+  visible,
+  width,
+}: Win32CalloutPortalProps) {
+  const theme = useTheme();
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Callout
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="dialog"
+      backgroundColor={theme.background.content}
+      borderColor={theme.appBorderColor}
+      borderRadius={8}
+      borderWidth={1}
+      directionalHint={directionalHint}
+      gapSpace={4}
+      maxHeight={height}
+      maxWidth={width}
+      minPadding={12}
+      minWidth={width}
+      onDismiss={onDismiss}
+      onShow={onShow}
+      setInitialFocus
+      target={target}
+      testID={testID}
+    >
+      <View
+        collapsable={false}
+        style={[styles.content, { backgroundColor: theme.background.content, height, width }]}
+        testID={`${testID}-content`}
+      >
+        {children}
+      </View>
+    </Callout>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    overflow: 'hidden',
+  },
+});

package/src/Win32ResizeHandle.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { PanResponder, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '@storybook/react-native-theming';
+
+type Win32ResizeHandleProps = {
+  direction: 'horizontal' | 'vertical';
+  onResize: (delta: number) => void;
+  testID: string;
+};
+
+export function Win32ResizeHandle({ direction, onResize, testID }: Win32ResizeHandleProps) {
+  const theme = useTheme();
+  const previousDeltaRef = React.useRef(0);
+  const [active, setActive] = React.useState(false);
+  const horizontal = direction === 'horizontal';
+  const panResponder = React.useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+          previousDeltaRef.current = 0;
+          setActive(true);
+        },
+        onPanResponderMove: (_, gestureState) => {
+          const nextDelta = horizontal ? gestureState.dx : gestureState.dy;
+          onResize(nextDelta - previousDeltaRef.current);
+          previousDeltaRef.current = nextDelta;
+        },
+        onPanResponderRelease: () => setActive(false),
+        onPanResponderTerminate: () => setActive(false),
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true,
+      }),
+    [horizontal, onResize],
+  );
+
+  return (
+    <View
+      {...panResponder.panHandlers}
+      accessibilityLabel={horizontal ? 'Resize story sidebar' : 'Resize addons panel'}
+      accessibilityRole="adjustable"
+      accessible
+      style={[
+        horizontal ? styles.horizontal : styles.vertical,
+        {
+          backgroundColor: active ? theme.barSelectedColor : 'transparent',
+          borderColor: active ? theme.barSelectedColor : theme.appBorderColor,
+        },
+      ]}
+      testID={testID}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  horizontal: {
+    alignSelf: 'stretch',
+    borderLeftWidth: 1,
+    width: 6,
+  },
+  vertical: {
+    borderTopWidth: 1,
+    height: 6,
+    width: '100%',
+  },
+});

package/src/createDesktopStorybookApp.tsx

@@ -0,0 +1,72 @@
+import type * as React from 'react';
+import { StyleSheet, View as NativeView } from 'react-native';
+import type { View } from '@storybook/react-native';
+
+import { DesktopDriverBridge } from './DesktopDriverBridge';
+import { DesktopStorybookConfigProvider, useDesktopStorybookTestID } from './DesktopStorybookConfig';
+import type { DesktopStorybookRuntimeInstance } from './DesktopStorybookConfig';
+import { StorybookThemeHost } from './StorybookTheme';
+import { StorybookUIComponent } from './StorybookUI';
+
+export type DesktopStorybookOptions = {
+  enableWebsockets?: boolean;
+  host?: string;
+  port?: number;
+  testIDPrefix?: string;
+};
+
+export function createDesktopStorybookApp(
+  view: Pick<View, 'getStorybookUI'>,
+  { enableWebsockets = true, host = '127.0.0.1', port, testIDPrefix = 'storybook-desktop' }: DesktopStorybookOptions = {},
+) {
+  const runtimeInstance = (
+    globalThis as typeof globalThis & {
+      __FURN_DESKTOP_STORYBOOK_INSTANCE__?: DesktopStorybookRuntimeInstance;
+    }
+  ).__FURN_DESKTOP_STORYBOOK_INSTANCE__;
+  const memoryStore: Record<string, string> = {};
+  const storage = {
+    getItem: async (key: string) => (key in memoryStore ? memoryStore[key] : null),
+    setItem: async (key: string, value: string) => {
+      memoryStore[key] = value;
+    },
+  };
+  const StorybookUI = view.getStorybookUI({
+    enableWebsockets,
+    host,
+    port: port ?? runtimeInstance?.storybookPort ?? 7007,
+    CustomUIComponent: StorybookUIComponent,
+    storage,
+  });
+
+  function DesktopStorybookApp() {
+    const resolvedTestIDPrefix = runtimeInstance?.testIDPrefix ?? testIDPrefix;
+    return (
+      <DesktopStorybookConfigProvider runtimeInstance={runtimeInstance} testIDPrefix={resolvedTestIDPrefix}>
+        <DesktopStorybookAppRoot>
+          <DesktopDriverBridge />
+          <StorybookThemeHost>
+            <StorybookUI />
+          </StorybookThemeHost>
+        </DesktopStorybookAppRoot>
+      </DesktopStorybookConfigProvider>
+    );
+  }
+
+  return DesktopStorybookApp;
+}
+
+function DesktopStorybookAppRoot({ children }: React.PropsWithChildren) {
+  const testID = useDesktopStorybookTestID('app-root');
+  return (
+    <NativeView style={styles.root} testID={testID}>
+      {children}
+    </NativeView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+});