@fluentui-react-native/storybook-desktop-runtime 0.3.3 → 0.3.5

package/src/StorybookTheme.tsx

@@ -2,66 +2,158 @@ import * as React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { createDefaultTheme } from '@fluentui-react-native/default-theme';
-import { ThemedRoot, themedStyleSheetFactory, useThemeState } from '@fluentui-react-native/design';
-import type { ThemeReference } from '@fluentui-react-native/design/theming';
+import { FlexThemeReference, ThemedRoot, ThemeProvider, themedStyleSheetFactory, useThemeState } from '@fluentui-react-native/design';
+import type { ColorTone, ThemeAppearanceOptions, ThemeSource } from '@fluentui-react-native/design';
 
 import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
 
-type ThemeChoice = {
-  label: string;
-  theme?: ThemeReference;
+/** The theme configuration selected in the Storybook toolbar. */
+export type StorybookThemeSelection = {
+  /** The story theme: the package's Flex defaults or the legacy Fluent default theme. The chrome always uses Flex. */
+  source: 'flex' | 'fluent';
+  colorScheme: 'light' | 'dark' | 'system';
+  contrast: 'standard' | 'highContrast';
+  /** Flex palette and interaction tone. Legacy Fluent themes have no tone. */
+  colorTone: ColorTone;
 };
 
-const themeChoiceNames = ['none', 'light', 'dark', 'highContrast'] as const;
-type ThemeChoiceName = (typeof themeChoiceNames)[number];
+type ThemeAxisKey = keyof StorybookThemeSelection;
 
-const themeChoices: Record<ThemeChoiceName, ThemeChoice> = {
-  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' }) },
+type ThemeAxis = {
+  readonly key: ThemeAxisKey;
+  /** Stable test-ID segment for the axis and its options. */
+  readonly id: string;
+  readonly label: string;
+  readonly options: readonly { readonly value: string; readonly label: string }[];
 };
 
+/** A deterministic default that does not depend on the host appearance. */
+export const defaultStorybookThemeSelection: Readonly<StorybookThemeSelection> = Object.freeze({
+  source: 'flex',
+  colorScheme: 'light',
+  contrast: 'standard',
+  colorTone: 'cool',
+});
+
+function themeAxis<Key extends ThemeAxisKey>(
+  key: Key,
+  id: string,
+  label: string,
+  options: readonly { value: StorybookThemeSelection[Key]; label: string }[],
+): ThemeAxis {
+  return { key, id, label, options };
+}
+
+const themeAxes: readonly ThemeAxis[] = [
+  themeAxis('source', 'source', 'Theme', [
+    { value: 'flex', label: 'Flex' },
+    { value: 'fluent', label: 'Fluent' },
+  ]),
+  themeAxis('colorScheme', 'scheme', 'Scheme', [
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+    { value: 'system', label: 'System' },
+  ]),
+  themeAxis('contrast', 'contrast', 'Contrast', [
+    { value: 'standard', label: 'Standard' },
+    { value: 'highContrast', label: 'High' },
+  ]),
+  themeAxis('colorTone', 'tone', 'Tone', [
+    { value: 'cool', label: 'Cool' },
+    { value: 'warm', label: 'Warm' },
+  ]),
+];
+
+// Each source resolves every appearance itself, so selection changes only the appearance request.
+const themeSources: Record<StorybookThemeSelection['source'], ThemeSource> = {
+  flex: new FlexThemeReference(),
+  fluent: createDefaultTheme({ appearance: 'dynamic' }),
+};
+
+function appearanceFromSelection({ source, colorScheme, contrast, colorTone }: StorybookThemeSelection): ThemeAppearanceOptions {
+  // Omitting tone for Fluent keeps the resolved appearance at its cool default.
+  return source === 'flex' ? { colorScheme, contrast, colorTone } : { colorScheme, contrast };
+}
+
+function isAxisDisabled(key: ThemeAxisKey, selection: StorybookThemeSelection): boolean {
+  return key === 'colorTone' && selection.source !== 'flex';
+}
+
+type StoryTheme = {
+  readonly theme: ThemeSource;
+  readonly appearance: ThemeAppearanceOptions;
+};
+
+const StoryThemeContext = React.createContext<StoryTheme | undefined>(undefined);
+
 export function StorybookThemeHost({ children }: React.PropsWithChildren) {
-  const [selectedName, setSelectedName] = React.useState<ThemeChoiceName>('none');
+  const [selection, setSelection] = React.useState<StorybookThemeSelection>(defaultStorybookThemeSelection);
+  const storyTheme = React.useMemo<StoryTheme>(
+    () => ({ theme: themeSources[selection.source], appearance: appearanceFromSelection(selection) }),
+    [selection],
+  );
   const testID = useDesktopStorybookTestID('app-root');
 
+  // The chrome always uses Flex at the selected appearance; only story content follows the selected source.
   return (
-    <ThemedRoot style={layoutStyles.root} testID={testID} theme={themeChoices[selectedName].theme}>
-      <StorybookThemeContent selectedName={selectedName} onSelect={setSelectedName}>
-        {children}
-      </StorybookThemeContent>
+    <ThemedRoot appearance={storyTheme.appearance} style={layoutStyles.root} testID={testID} theme={themeSources.flex}>
+      <StoryThemeContext.Provider value={storyTheme}>
+        <StorybookThemeContent selection={selection} onSelectionChange={setSelection}>
+          {children}
+        </StorybookThemeContent>
+      </StoryThemeContext.Provider>
     </ThemedRoot>
   );
 }
 
+/** Applies the selected story theme inside the Flex chrome without adding a view or a second input root. */
+export function StorybookStoryTheme({ children }: React.PropsWithChildren) {
+  const storyTheme = React.useContext(StoryThemeContext);
+  if (!storyTheme) {
+    return <>{children}</>;
+  }
+  return (
+    <ThemeProvider appearance={storyTheme.appearance} theme={storyTheme.theme}>
+      {children}
+    </ThemeProvider>
+  );
+}
+
 function StorybookThemeContent({
   children,
-  selectedName,
-  onSelect,
-}: React.PropsWithChildren<{ selectedName: ThemeChoiceName; onSelect: (name: ThemeChoiceName) => void }>) {
+  selection,
+  onSelectionChange,
+}: React.PropsWithChildren<{
+  selection: StorybookThemeSelection;
+  onSelectionChange: React.Dispatch<React.SetStateAction<StorybookThemeSelection>>;
+}>) {
   const styles = getStyles(useThemeState());
   const toolbarTestID = useDesktopStorybookTestID('theme-toolbar');
-  const optionTestID = useDesktopStorybookTestID('theme');
+  const axisTestID = useDesktopStorybookTestID('theme');
+  const [openAxis, setOpenAxis] = React.useState<ThemeAxisKey>();
+
+  const select = (key: ThemeAxisKey, value: string) => {
+    onSelectionChange((current) => (current[key] === value ? current : ({ ...current, [key]: value } as StorybookThemeSelection)));
+    setOpenAxis(undefined);
+  };
 
   return (
     <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;
+        {themeAxes.map((axis) => {
+          const disabled = isAxisDisabled(axis.key, selection);
           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>
+            <ThemeAxisDropdown
+              axis={axis}
+              disabled={disabled}
+              key={axis.key}
+              open={!disabled && openAxis === axis.key}
+              styles={styles}
+              testID={`${axisTestID}-${axis.id}`}
+              value={disabled ? defaultStorybookThemeSelection[axis.key] : selection[axis.key]}
+              onSelect={(value) => select(axis.key, value)}
+              onToggle={() => setOpenAxis((current) => (current === axis.key ? undefined : axis.key))}
+            />
           );
         })}
       </View>
@@ -70,6 +162,65 @@ function StorybookThemeContent({
   );
 }
 
+type ThemeAxisDropdownProps = {
+  axis: ThemeAxis;
+  disabled: boolean;
+  open: boolean;
+  styles: ReturnType<typeof getStyles>;
+  testID: string;
+  value: string;
+  onSelect(value: string): void;
+  onToggle(): void;
+};
+
+function ThemeAxisDropdown({ axis, disabled, open, styles, testID, value, onSelect, onToggle }: ThemeAxisDropdownProps) {
+  const selectedLabel = axis.options.find((option) => option.value === value)?.label ?? value;
+
+  return (
+    <View style={styles.field}>
+      <Text style={[styles.label, disabled && styles.disabledText]}>{axis.label}</Text>
+      <View>
+        <Pressable
+          accessibilityLabel={axis.label}
+          accessibilityRole="combobox"
+          accessibilityState={{ disabled, expanded: open }}
+          accessibilityValue={{ text: selectedLabel }}
+          disabled={disabled}
+          onPress={onToggle}
+          style={({ pressed }) => [styles.option, styles.trigger, pressed && styles.pressedOption, disabled && styles.disabledOption]}
+          testID={testID}
+        >
+          <Text style={[styles.optionText, disabled && styles.disabledText]}>{selectedLabel}</Text>
+          <Text style={[styles.chevron, disabled && styles.disabledText]}>{open ? '\u25b4' : '\u25be'}</Text>
+        </Pressable>
+        {open ? (
+          <View accessibilityRole="list" style={styles.menu} testID={`${testID}-menu`}>
+            {axis.options.map((option) => {
+              const selected = option.value === value;
+              return (
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityState={{ selected }}
+                  key={option.value}
+                  onPress={() => onSelect(option.value)}
+                  style={({ pressed }) => [
+                    styles.menuOption,
+                    selected && styles.selectedOption,
+                    pressed && (selected ? styles.pressedSelectedOption : styles.pressedMenuOption),
+                  ]}
+                  testID={`${testID}-${option.value}`}
+                >
+                  <Text style={[styles.optionText, selected && styles.selectedOptionText]}>{option.label}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
 const layoutStyles = StyleSheet.create({
   root: {
     flex: 1,
@@ -80,48 +231,91 @@ const getStyles = themedStyleSheetFactory('StorybookTheme', ({ tokens }) =>
   StyleSheet.create({
     root: {
       flex: 1,
-      backgroundColor: tokens.color.surfaceNeutralFar,
+      backgroundColor: tokens.color.surfaceNeutralFar.rest,
     },
     header: {
-      alignItems: 'center',
-      backgroundColor: tokens.color.backgroundNeutralSubtle,
-      borderBottomColor: tokens.color.strokeNeutralSubtle,
+      alignItems: 'flex-start',
+      backgroundColor: tokens.color.backgroundNeutralSubtle.rest,
+      borderBottomColor: tokens.color.strokeNeutralSubtle.rest,
       borderBottomWidth: 1,
       flexDirection: 'row',
       flexWrap: 'wrap',
-      gap: 8,
+      gap: 16,
       minHeight: 44,
       paddingHorizontal: 12,
-      paddingVertical: 6,
+      paddingVertical: 8,
+    },
+    field: {
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      gap: 6,
     },
     label: {
-      color: tokens.color.foregroundNeutralPrimary,
+      color: tokens.color.foregroundNeutralPrimary.rest,
       fontSize: 14,
       fontWeight: '600',
-      marginEnd: 4,
+      paddingVertical: 5,
     },
     option: {
-      backgroundColor: tokens.color.backgroundNeutralLoud,
-      borderColor: tokens.color.strokeNeutralSoft,
+      backgroundColor: tokens.color.surfaceNeutralNearer.rest,
+      borderColor: tokens.color.strokeNeutralLoud.rest,
       borderRadius: 4,
       borderWidth: 1,
       paddingHorizontal: 10,
       paddingVertical: 5,
     },
-    selectedOption: {
-      backgroundColor: tokens.color.backgroundBrandHeavy,
-      borderColor: tokens.color.strokeBrandLoud,
+    trigger: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: 8,
+      justifyContent: 'space-between',
+      minWidth: 96,
     },
     pressedOption: {
-      opacity: 0.75,
+      backgroundColor: tokens.color.surfaceNeutralNearer.pressed,
+      borderColor: tokens.color.strokeNeutralLoud.pressed,
+    },
+    disabledOption: {
+      backgroundColor: tokens.color.backgroundNeutralDisabled.rest,
+      borderColor: tokens.color.strokeNeutralDisabled.rest,
+    },
+    menu: {
+      backgroundColor: tokens.color.surfaceNeutralNearer.rest,
+      borderColor: tokens.color.strokeNeutralSubtle.rest,
+      borderRadius: 4,
+      borderWidth: 1,
+      gap: 2,
+      marginTop: 4,
+      padding: 2,
+    },
+    menuOption: {
+      backgroundColor: tokens.color.backgroundNeutralTransparent.rest,
+      borderRadius: 3,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+    },
+    pressedMenuOption: {
+      backgroundColor: tokens.color.backgroundNeutralTransparent.pressed,
+    },
+    selectedOption: {
+      backgroundColor: tokens.color.backgroundNeutralSoft.rest,
+    },
+    pressedSelectedOption: {
+      backgroundColor: tokens.color.backgroundNeutralSoft.pressed,
     },
     optionText: {
-      color: tokens.color.foregroundNeutralPrimary,
+      color: tokens.color.foregroundNeutralPrimary.rest,
+      fontSize: 12,
+    },
+    chevron: {
+      color: tokens.color.foregroundNeutralSecondary.rest,
       fontSize: 12,
     },
     selectedOptionText: {
-      color: tokens.color.foregroundBrandOnloud,
       fontWeight: '600',
     },
+    disabledText: {
+      color: tokens.color.foregroundNeutralDisabled.rest,
+    },
   }),
 );

package/src/ThemedStorybookUI.tsx

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

package/src/useStorybookTheme.test.tsx

@@ -47,7 +47,7 @@ describe('Storybook theme palette', () => {
     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);
+    expect(themes[themes.length - 1].appBorderColor).toBe(states[states.length - 1].tokens.color.strokeNeutralSubtle.rest);
   });
 
   it('warns and substitutes a contrasting theme color for native opaque colors', async () => {
@@ -60,7 +60,7 @@ describe('Storybook theme palette', () => {
         <Probe themes={themes} states={states} />
       </ThemedRoot>,
     );
-    expect(themes[0].color.primary).toBe(states[0].tokens.color.fixedBlack);
+    expect(themes[0].color.primary).toBe(states[0].tokens.color.fixedBlack.rest);
     expect(warn).toHaveBeenCalledTimes(1);
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('foregroundBrandPrimary'));
   });
@@ -84,8 +84,8 @@ describe('Storybook theme palette', () => {
       </ThemedRoot>,
     );
 
-    expect(themes[0].background.content).toBe(states[0].tokens.color[fallback]);
-    expect(themes[0].background.preview).toBe(states[0].tokens.color[fallback]);
+    expect(themes[0].background.content).toBe(states[0].tokens.color[fallback].rest);
+    expect(themes[0].background.preview).toBe(states[0].tokens.color[fallback].rest);
     expect(warn).toHaveBeenCalledTimes(1);
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('surfaceNeutralFar'));
   });

package/src/useStorybookTheme.ts

@@ -24,14 +24,14 @@ function storybookThemeFromThemeState({ appearance, highContrast, tokens }: Them
   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];
+    const value = tokens.color[name].rest;
     // 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];
+    const fallback = tokens.color[fallbackName].rest;
     if (typeof fallback !== 'string') {
       throw new Error(`Storybook chrome requires a literal "${fallbackName}" fallback for the "${name}" theme token.`);
     }