@fluentui-react-native/storybook-desktop-runtime 0.2.1 → 0.3.1

package/src/StorybookTheme.tsx

@@ -2,7 +2,7 @@ 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 { ThemedRoot, themedStyleSheetFactory, useThemeState } from '@fluentui-react-native/design';
 import type { ThemeReference } from '@fluentui-react-native/design/theming';
 
 import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
@@ -16,99 +16,112 @@ const themeChoiceNames = ['none', 'light', 'dark', 'highContrast'] as const;
 type ThemeChoiceName = (typeof themeChoiceNames)[number];
 
 const themeChoices: Record<ThemeChoiceName, ThemeChoice> = {
-  none: { label: 'No theme' },
+  none: { label: 'Default Flex' },
   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 testID = useDesktopStorybookTestID('app-root');
+
+  return (
+    <ThemedRoot style={layoutStyles.root} testID={testID} theme={themeChoices[selectedName].theme}>
+      <StorybookThemeContent selectedName={selectedName} onSelect={setSelectedName}>
+        {children}
+      </StorybookThemeContent>
+    </ThemedRoot>
+  );
+}
+
+function StorybookThemeContent({
+  children,
+  selectedName,
+  onSelect,
+}: React.PropsWithChildren<{ selectedName: ThemeChoiceName; onSelect: (name: ThemeChoiceName) => void }>) {
+  const styles = getStyles(useThemeState());
   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 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={() => onSelect(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>
-    </StorybookThemeContext.Provider>
+      <View style={layoutStyles.root}>{children}</View>
+    </View>
   );
 }
 
-export function StorybookThemeProvider({ children }: React.PropsWithChildren) {
-  const theme = React.useContext(StorybookThemeContext);
-  return theme ? <ThemeProvider theme={theme}>{children}</ThemeProvider> : children;
-}
-
-const styles = StyleSheet.create({
+const layoutStyles = 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,
-  },
 });
+
+const getStyles = themedStyleSheetFactory('StorybookTheme', ({ tokens }) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      backgroundColor: tokens.color.surfaceNeutralFar,
+    },
+    header: {
+      alignItems: 'center',
+      backgroundColor: tokens.color.backgroundNeutralSubtle,
+      borderBottomColor: tokens.color.strokeNeutralSubtle,
+      borderBottomWidth: 1,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+      minHeight: 44,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    label: {
+      color: tokens.color.foregroundNeutralPrimary,
+      fontSize: 14,
+      fontWeight: '600',
+      marginEnd: 4,
+    },
+    option: {
+      backgroundColor: tokens.color.backgroundNeutralLoud,
+      borderColor: tokens.color.strokeNeutralSoft,
+      borderRadius: 4,
+      borderWidth: 1,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+    },
+    selectedOption: {
+      backgroundColor: tokens.color.backgroundBrandHeavy,
+      borderColor: tokens.color.strokeBrandLoud,
+    },
+    pressedOption: {
+      opacity: 0.75,
+    },
+    optionText: {
+      color: tokens.color.foregroundNeutralPrimary,
+      fontSize: 12,
+    },
+    selectedOptionText: {
+      color: tokens.color.foregroundBrandOnloud,
+      fontWeight: '600',
+    },
+  }),
+);

package/src/StorybookUI.win32.tsx

@@ -14,7 +14,7 @@ import { Win32ResizeHandle } from './Win32ResizeHandle';
 const emptyRefs = {};
 const emptyStatus = {};
 
-export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story, storyHash, theme }) => {
+export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story, storyHash, storyBackgroundColor, theme }) => {
   const storiesAnchorRef = React.useRef<View>(null);
   const addonsAnchorRef = React.useRef<View>(null);
   const [sidebarVisible, setSidebarVisible] = React.useState(true);
@@ -67,7 +67,7 @@ export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story,
   return (
     <ThemeProvider theme={theme}>
       <StorageProvider storage={storage}>
-        <View style={styles.root} testID={chromeTestID}>
+        <View style={[styles.root, { backgroundColor: theme.background.app }]} testID={chromeTestID}>
           {sidebarVisible ? (
             <>
               <View
@@ -174,7 +174,7 @@ export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story,
                 </Text>
               </View>
             ) : null}
-            <View style={styles.preview} testID={previewTestID}>
+            <View style={[styles.preview, { backgroundColor: storyBackgroundColor ?? theme.background.preview }]} testID={previewTestID}>
               {children}
             </View>
             {addonsVisible ? (

package/src/ThemedStorybookUI.tsx

@@ -0,0 +1,9 @@
+import type { SBUI } from '@storybook/react-native-ui-common';
+
+import { StorybookUIComponent } from './StorybookUI';
+import { useStorybookTheme } from './useStorybookTheme';
+
+export const ThemedStorybookUI: SBUI = (props) => {
+  const theme = useStorybookTheme();
+  return <StorybookUIComponent {...props} theme={theme} />;
+};

package/src/Win32CalloutPortal.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { Callout } from '@fluentui-react-native/callout';
 import type { CalloutProps, DirectionalHint } from '@fluentui-react-native/callout';
+import { RootInputBoundary } from '@fluentui-react-native/design';
 import { useTheme } from '@storybook/react-native-theming';
 
 type Win32CalloutPortalProps = React.PropsWithChildren<{
@@ -55,13 +56,13 @@ export function Win32CalloutPortal({
       target={target}
       testID={testID}
     >
-      <View
+      <RootInputBoundary
         collapsable={false}
         style={[styles.content, { backgroundColor: theme.background.content, height, width }]}
         testID={`${testID}-content`}
       >
         {children}
-      </View>
+      </RootInputBoundary>
     </Callout>
   );
 }

package/src/createDesktopStorybookApp.tsx

@@ -1,12 +1,10 @@
-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 { DesktopStorybookConfigProvider } from './DesktopStorybookConfig';
 import type { DesktopStorybookRuntimeInstance } from './DesktopStorybookConfig';
 import { StorybookThemeHost } from './StorybookTheme';
-import { StorybookUIComponent } from './StorybookUI';
+import { ThemedStorybookUI } from './ThemedStorybookUI';
 
 export type DesktopStorybookOptions = {
   enableWebsockets?: boolean;
@@ -35,7 +33,7 @@ export function createDesktopStorybookApp(
     enableWebsockets,
     host,
     port: port ?? runtimeInstance?.storybookPort ?? 7007,
-    CustomUIComponent: StorybookUIComponent,
+    CustomUIComponent: ThemedStorybookUI,
     storage,
   });
 
@@ -43,30 +41,13 @@ export function createDesktopStorybookApp(
     const resolvedTestIDPrefix = runtimeInstance?.testIDPrefix ?? testIDPrefix;
     return (
       <DesktopStorybookConfigProvider runtimeInstance={runtimeInstance} testIDPrefix={resolvedTestIDPrefix}>
-        <DesktopStorybookAppRoot>
+        <StorybookThemeHost>
           <DesktopDriverBridge />
-          <StorybookThemeHost>
-            <StorybookUI />
-          </StorybookThemeHost>
-        </DesktopStorybookAppRoot>
+          <StorybookUI />
+        </StorybookThemeHost>
       </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,
-  },
-});

package/src/createDesktopStorybookPreview.tsx

@@ -2,19 +2,16 @@ import { StyleSheet, View } from 'react-native';
 import type { Preview } from '@storybook/react-native';
 
 import { DesktopStoryRoot } from './DesktopStoryRoot';
-import { StorybookThemeProvider } from './StorybookTheme';
 
 export function createDesktopStorybookPreview(): Preview {
   return {
     decorators: [
       (Story, context) => (
-        <StorybookThemeProvider>
-          <DesktopStoryRoot storyId={context.id}>
-            <View style={styles.story}>
-              <Story />
-            </View>
-          </DesktopStoryRoot>
-        </StorybookThemeProvider>
+        <DesktopStoryRoot storyId={context.id}>
+          <View style={styles.story}>
+            <Story />
+          </View>
+        </DesktopStoryRoot>
       ),
     ],
     parameters: {},

package/src/useStorybookTheme.test.tsx

@@ -0,0 +1,92 @@
+import { PlatformColor } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design';
+import type { ThemeState } from '@fluentui-react-native/design';
+import type { Theme } from '@storybook/react-native-theming';
+
+import { useStorybookTheme } from './useStorybookTheme';
+
+function Probe({ themes, states }: { themes: Theme[]; states?: ThemeState[] }) {
+  themes.push(useStorybookTheme());
+  const state = useThemeState();
+  states?.push(state);
+  return null;
+}
+
+describe('Storybook theme palette', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('derives colors from the current tokens and updates after source invalidation', async () => {
+    const themes: Theme[] = [];
+    const states: ThemeState[] = [];
+    const source = new FlexThemeReference({
+      base: { color: { surfaceNeutralFar: '#123456', foregroundNeutralPrimary: '#abcdef' } },
+    });
+    const scene = await render(
+      <ThemedRoot theme={source}>
+        <Probe themes={themes} states={states} />
+      </ThemedRoot>,
+    );
+
+    expect(themes[0].background.app).toBe('#123456');
+    expect(themes[0].background.content).toBe('#123456');
+    expect(themes[0].background.preview).toBe('#123456');
+    expect(themes[0].color.defaultText).toBe('#abcdef');
+    await scene.rerender(
+      <ThemedRoot theme={source}>
+        <Probe themes={themes} states={states} />
+      </ThemedRoot>,
+    );
+    expect(themes[themes.length - 1]).toBe(themes[0]);
+
+    await act(() => source.update({ color: { surfaceNeutralFar: '#654321' } }));
+    expect(themes[themes.length - 1].background.app).toBe('#654321');
+    expect(themes[themes.length - 1].background.content).toBe('#654321');
+    expect(themes[themes.length - 1].background.preview).toBe('#654321');
+    expect(themes[themes.length - 1]).not.toBe(themes[0]);
+    expect(themes[themes.length - 1].appBorderColor).toBe(states[states.length - 1].tokens.color.strokeNeutralSubtle);
+  });
+
+  it('warns and substitutes a contrasting theme color for native opaque colors', async () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation();
+    const themes: Theme[] = [];
+    const states: ThemeState[] = [];
+    const source = new FlexThemeReference({ base: { color: { foregroundBrandPrimary: PlatformColor('labelColor') } } });
+    await render(
+      <ThemedRoot theme={source}>
+        <Probe themes={themes} states={states} />
+      </ThemedRoot>,
+    );
+    expect(themes[0].color.primary).toBe(states[0].tokens.color.fixedBlack);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('foregroundBrandPrimary'));
+  });
+
+  it.each([
+    ['light', 'standard', 'fixedWhite'],
+    ['dark', 'standard', 'fixedBlack'],
+    ['light', 'highContrast', 'fixedBlack'],
+    ['dark', 'highContrast', 'fixedBlack'],
+  ] as const)('retains the native canvas fallback for %s/%s', async (colorScheme, contrast, fallback) => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation();
+    const themes: Theme[] = [];
+    const states: ThemeState[] = [];
+    const source = new FlexThemeReference({
+      appearance: { colorScheme, contrast },
+      base: { color: { surfaceNeutralFar: PlatformColor('windowBackgroundColor') } },
+    });
+    await render(
+      <ThemedRoot theme={source}>
+        <Probe themes={themes} states={states} />
+      </ThemedRoot>,
+    );
+
+    expect(themes[0].background.content).toBe(states[0].tokens.color[fallback]);
+    expect(themes[0].background.preview).toBe(states[0].tokens.color[fallback]);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('surfaceNeutralFar'));
+  });
+});

package/src/useStorybookTheme.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+
+import { useThemeState } from '@fluentui-react-native/design';
+import type { SemanticColorTokenValues, ThemeState } from '@fluentui-react-native/design';
+import { darkTheme, theme as lightTheme } from '@storybook/react-native-theming';
+import type { Theme } from '@storybook/react-native-theming';
+
+export function useStorybookTheme(): Theme {
+  const state = useThemeState();
+  const { theme, nativeColors } = React.useMemo(() => storybookThemeFromThemeState(state), [state]);
+  React.useEffect(() => {
+    if (nativeColors.length > 0) {
+      console.warn(
+        `Storybook chrome cannot resolve native system colors; using fixed contrasting theme colors for: ${nativeColors.join(', ')}.`,
+      );
+    }
+  }, [nativeColors]);
+  return theme;
+}
+
+function storybookThemeFromThemeState({ appearance, highContrast, tokens }: ThemeState) {
+  const base = highContrast || appearance.colorScheme === 'dark' ? darkTheme : lightTheme;
+  const foreground = base.base === 'dark' ? 'fixedWhite' : 'fixedBlack';
+  const background = base.base === 'dark' ? 'fixedBlack' : 'fixedWhite';
+  const nativeColors = new Set<keyof SemanticColorTokenValues>();
+  const color = (name: keyof SemanticColorTokenValues, role: 'foreground' | 'background' = 'foreground'): string => {
+    const value = tokens.color[name];
+    // Storybook also passes these colors to JS color utilities, not just native styles.
+    if (typeof value === 'string') {
+      return value;
+    }
+    nativeColors.add(name);
+    const fallbackName = role === 'foreground' ? foreground : background;
+    const fallback = tokens.color[fallbackName];
+    if (typeof fallback !== 'string') {
+      throw new Error(`Storybook chrome requires a literal "${fallbackName}" fallback for the "${name}" theme token.`);
+    }
+    return fallback;
+  };
+
+  const theme: Theme = {
+    ...base,
+    color: {
+      ...base.color,
+      primary: color('foregroundBrandPrimary'),
+      secondary: color('backgroundBrandHeavy'),
+      secondaryLighter: color('backgroundBrandSoft', 'background'),
+      tertiary: color('foregroundSuccessPrimary'),
+      ancillary: color('foregroundBrandPrimary'),
+      orange: color('foregroundWarningPrimary'),
+      gold: color('foregroundWarningPrimary'),
+      green: color('foregroundSuccessPrimary'),
+      seafoam: color('foregroundSuccessPrimary'),
+      purple: color('foregroundBrandPrimary'),
+      ultraviolet: color('foregroundBrandPrimary'),
+      lightest: color('foregroundBrandOnloud', 'background'),
+      lighter: color('surfaceNeutralNear', 'background'),
+      light: color('backgroundNeutralSubtle', 'background'),
+      mediumlight: color('strokeNeutralSubtle'),
+      medium: color('strokeNeutralSoft'),
+      mediumdark: color('foregroundNeutralSecondary'),
+      dark: color('foregroundNeutralPrimary'),
+      darker: color('foregroundNeutralPrimary'),
+      darkest: color('foregroundNeutralPrimary'),
+      border: color('strokeNeutralSoft'),
+      positive: color('foregroundSuccessPrimary'),
+      negative: color('foregroundDangerPrimary'),
+      warning: color('foregroundWarningPrimary'),
+      critical: color('foregroundDangerPrimary'),
+      defaultText: color('foregroundNeutralPrimary'),
+      inverseText: color('foregroundNeutralOnloud', 'background'),
+      positiveText: color('foregroundSuccessPrimary'),
+      negativeText: color('foregroundDangerPrimary'),
+      warningText: color('foregroundWarningPrimary'),
+    },
+    background: {
+      ...base.background,
+      app: color('surfaceNeutralFar', 'background'),
+      bar: color('backgroundNeutralSubtle', 'background'),
+      // LiteUI and StoryView paint the canvas with content rather than preview.
+      content: color('surfaceNeutralFar', 'background'),
+      preview: color('surfaceNeutralFar', 'background'),
+      hoverable: color('backgroundNeutralSoft', 'background'),
+      positive: color('backgroundSuccessSubtle', 'background'),
+      negative: color('backgroundDangerSubtle', 'background'),
+      warning: color('backgroundWarningSubtle', 'background'),
+      critical: color('backgroundDangerSubtle', 'background'),
+    },
+    textMutedColor: color('foregroundNeutralTertiary'),
+    input: {
+      ...base.input,
+      border: color('strokeNeutralSoft'),
+      background: color('backgroundNeutralLoud', 'background'),
+      color: color('foregroundNeutralPrimary'),
+    },
+    button: {
+      ...base.button,
+      background: color('backgroundNeutralLoud', 'background'),
+      border: color('strokeNeutralSoft'),
+    },
+    boolean: {
+      ...base.boolean,
+      background: color('backgroundNeutralSoft', 'background'),
+      selectedBackground: color('backgroundBrandHeavy'),
+    },
+    appBorderColor: color('strokeNeutralSubtle'),
+    barTextColor: color('foregroundNeutralPrimary'),
+    barHoverColor: color('foregroundBrandPrimary'),
+    barSelectedColor: color('foregroundBrandPrimary'),
+    barBg: color('backgroundNeutralSubtle', 'background'),
+  };
+  return { theme, nativeColors: [...nativeColors] };
+}