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

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,63 @@
+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].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]).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'));
+  });
+});

package/src/useStorybookTheme.ts

@@ -0,0 +1,112 @@
+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'),
+      content: color('surfaceNeutralNear', '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] };
+}