From cac23ad7b0be3ed8b61c27b7a036a11f9b20e998 Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Thu, 6 Aug 2026 16:09:21 -0700 Subject: [PATCH 1/2] Add Windows support to agentic Storybook Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- .../agentic-components/storybook/.gitignore | 21 ++++++++++++-- .../agentic-components/storybook/README.md | 28 +++++++++++++++++-- .../agentic-components/storybook/package.json | 6 +++- .../storybook/react-native.config.js | 18 ++++++++++++ yarn.lock | 1 + 5 files changed, 67 insertions(+), 7 deletions(-) diff --git a/packages/agentic-components/storybook/.gitignore b/packages/agentic-components/storybook/.gitignore index 2b970837cc..ac4016316f 100644 --- a/packages/agentic-components/storybook/.gitignore +++ b/packages/agentic-components/storybook/.gitignore @@ -5,7 +5,7 @@ src/storybook.requires.js # Metro bundle output *.jsbundle -# Generated native project + build output (react-native-test-app regenerates these). +# Generated native projects + build output (react-native-test-app regenerates these). # The hand-written macos/Podfile is kept under version control. macos/Pods/ macos/build/ @@ -14,6 +14,21 @@ macos/Podfile.lock macos/.xcode.env macos/*.xcodeproj/ macos/*.xcworkspace/ +windows/.vs/ +windows/ARM64/ +windows/AppPackages/ +windows/Debug/ +windows/Release/ +windows/build/ +windows/ReactApp.Package/ +windows/x64/ +windows/x86/ +windows/packages/ +windows/*.binlog +windows/*.err +windows/*.hprof +windows/*.sln +windows/*.wrn +windows/ExperimentalFeatures.props +windows/NuGet.Config dist/ - - diff --git a/packages/agentic-components/storybook/README.md b/packages/agentic-components/storybook/README.md index d86e077d84..9c99a15578 100644 --- a/packages/agentic-components/storybook/README.md +++ b/packages/agentic-components/storybook/README.md @@ -1,4 +1,4 @@ -# Agentic Components Storybook (react-native-macos) +# Agentic Components Storybook On-device [Storybook](https://storybook.js.org/) app (Storybook for React Native v10) for `@fluentui-react-native/agentic-components`. It loads every `*.stories.(ts|tsx)` file from the @@ -62,12 +62,34 @@ Requires Xcode + CocoaPods. > therefore not installed; `metro.config.js` aliases the import to a JS-only stub in > `.storybook-mocks/`, so no native module is needed. +## Running on Windows + +The Windows app also uses `react-native-test-app`. Its generated Win32 project uses React Native +Windows' New Architecture and Fabric renderer. + +```powershell +# from this directory +# 1. Generate the Fabric Windows solution +yarn windows:generate + +# 2. Start Metro (also generates storybook.requires) +yarn start + +# 3. In another terminal, build and launch the Windows app +yarn windows +``` + +Requires Visual Studio 2022 with the React Native Windows build prerequisites. The generated +solution, `ExperimentalFeatures.props`, and build outputs are git-ignored and can be regenerated +with `yarn windows:generate`. + ## Bundling (no native toolchain required) You can produce the JS bundle without Xcode. This also generates `storybook.requires` first: ```sh -yarn bundle:macos # -> writes index.macos.jsbundle +yarn bundle:macos # -> writes dist/index.macos.jsbundle +yarn bundle:windows # -> writes dist/index.windows.bundle ``` ## Agent interaction (WebSocket channel + MCP) @@ -79,7 +101,7 @@ The running app can be driven by external agents through a standalone Storybook yarn storybook-server # WebSocket: ws://127.0.0.1:7007/ MCP: http://127.0.0.1:7007/mcp ``` -Run it alongside `yarn start` + `yarn macos`. The on-device app connects to it automatically +Run it alongside `yarn start` + `yarn macos` or `yarn windows`. The on-device app connects to it automatically (`.rnstorybook/index.tsx` calls `getStorybookUI({ enableWebsockets: true, host, port })`). - **WebSocket channel** (`ws://127.0.0.1:7007/`): agents connect and emit Storybook channel events diff --git a/packages/agentic-components/storybook/package.json b/packages/agentic-components/storybook/package.json index 385a1b9fb5..b9509d7652 100644 --- a/packages/agentic-components/storybook/package.json +++ b/packages/agentic-components/storybook/package.json @@ -2,7 +2,7 @@ "name": "@fluentui-react-native/agentic-components-storybook", "version": "0.1.0", "private": true, - "description": "On-device Storybook (react-native-macos) app for @fluentui-react-native/agentic-components", + "description": "On-device Storybook app for @fluentui-react-native/agentic-components", "license": "MIT", "author": "", "repository": { @@ -13,7 +13,10 @@ "scripts": { "start": "rnx-cli start", "macos": "rnx-cli run --platform macos", + "windows": "react-native run-windows --arch x64 --sln windows/AgenticStorybook.sln", + "windows:generate": "install-windows-test-app --use-fabric", "bundle:macos": "yarn prebuild && rnx-cli bundle --dev false --platform macos", + "bundle:windows": "yarn prebuild && rnx-cli bundle --dev false --platform windows", "prebuild": "sb-rn-get-stories --config-path src", "storybook-server": "node storybook-server.cjs", "lint": "fluentui-scripts lint", @@ -35,6 +38,7 @@ "@react-native-community/cli-platform-ios": "^20.0.0", "@react-native-community/datetimepicker": "^9.1.0", "@react-native-community/slider": "^5.0.0", + "@react-native-windows/cli": "^0.81.0", "@react-native/babel-preset": "^0.81.0", "@react-native/metro-babel-transformer": "^0.81.0", "@react-native/metro-config": "^0.81.0", diff --git a/packages/agentic-components/storybook/react-native.config.js b/packages/agentic-components/storybook/react-native.config.js index 9c5355d0e5..91a925914b 100644 --- a/packages/agentic-components/storybook/react-native.config.js +++ b/packages/agentic-components/storybook/react-native.config.js @@ -5,6 +5,10 @@ const project = (() => { macos: { sourceDir: 'macos', }, + windows: { + sourceDir: 'windows', + solutionFile: 'windows/AgenticStorybook.sln', + }, }); } catch (_) { return undefined; @@ -12,5 +16,19 @@ const project = (() => { })(); module.exports = { + dependencies: { + // These optional Storybook control dependencies only provide legacy UWP projects. Linking + // them into the WinUI 3 Fabric app fails, while liteMode does not require their native views. + '@react-native-community/datetimepicker': { + platforms: { + windows: null, + }, + }, + '@react-native-community/slider': { + platforms: { + windows: null, + }, + }, + }, ...(project ? { project } : undefined), }; diff --git a/yarn.lock b/yarn.lock index 6d79b100c6..ce4662e5b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2598,6 +2598,7 @@ __metadata: "@react-native-community/cli-platform-ios": "npm:^20.0.0" "@react-native-community/datetimepicker": "npm:^9.1.0" "@react-native-community/slider": "npm:^5.0.0" + "@react-native-windows/cli": "npm:^0.81.0" "@react-native/babel-preset": "npm:^0.81.0" "@react-native/metro-babel-transformer": "npm:^0.81.0" "@react-native/metro-config": "npm:^0.81.0" From a3f27b7be2a5d5af10bb05aa594dc687c5634cd5 Mon Sep 17 00:00:00 2001 From: Jason Morse Date: Thu, 6 Aug 2026 17:49:36 -0700 Subject: [PATCH 2/2] Fix Windows Storybook runtime modes Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- .../agentic-components/storybook/README.md | 18 ++++++++++++ .../agentic-components/storybook/app.json | 3 +- .../agentic-components/storybook/package.json | 13 +++++++++ .../storybook/scripts/run-windows-offline.ps1 | 29 +++++++++++++++++++ 4 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 packages/agentic-components/storybook/scripts/run-windows-offline.ps1 diff --git a/packages/agentic-components/storybook/README.md b/packages/agentic-components/storybook/README.md index 9c99a15578..7e6b124eaf 100644 --- a/packages/agentic-components/storybook/README.md +++ b/packages/agentic-components/storybook/README.md @@ -83,6 +83,24 @@ Requires Visual Studio 2022 with the React Native Windows build prerequisites. T solution, `ExperimentalFeatures.props`, and build outputs are git-ignored and can be regenerated with `yarn windows:generate`. +The Debug app always loads from Metro; `react-native-test-app` does not automatically fall back +to an embedded bundle in Debug builds. To bundle, build, and launch a Release app that runs +without Metro: + +```powershell +yarn windows:offline +``` + +The Release package embeds `dist/index.windows.bundle`. Storybook's optional color-picker image +is intentionally not packaged because the Yarn pnpm asset path exceeds Windows' deployment path +limit; controls and stories otherwise run from the embedded bundle. The command replaces this +app's current Debug registration with its Release layout; running `yarn windows` later deploys +the Debug app again. + +Storybook's development bundle intentionally contains separate `pretty-format` and `react-is` +versions used by its internal tooling. They are excluded from the duplicate-module enforcement; +React, React Native, and application dependencies remain checked. + ## Bundling (no native toolchain required) You can produce the JS bundle without Xcode. This also generates `storybook.requires` first: diff --git a/packages/agentic-components/storybook/app.json b/packages/agentic-components/storybook/app.json index 80e55f2dcc..4d42273979 100644 --- a/packages/agentic-components/storybook/app.json +++ b/packages/agentic-components/storybook/app.json @@ -8,6 +8,7 @@ } ], "resources": { - "macos": ["dist/assets", "dist/index.macos.jsbundle"] + "macos": ["dist/assets", "dist/index.macos.jsbundle"], + "windows": ["dist/index.windows.bundle"] } } diff --git a/packages/agentic-components/storybook/package.json b/packages/agentic-components/storybook/package.json index b9509d7652..251894835e 100644 --- a/packages/agentic-components/storybook/package.json +++ b/packages/agentic-components/storybook/package.json @@ -14,6 +14,7 @@ "start": "rnx-cli start", "macos": "rnx-cli run --platform macos", "windows": "react-native run-windows --arch x64 --sln windows/AgenticStorybook.sln", + "windows:offline": "yarn bundle:windows && yarn windows:generate && yarn windows --release --no-packager --no-deploy --no-launch --msbuildprops UseBundle=false && pwsh -NoProfile -File scripts/run-windows-offline.ps1", "windows:generate": "install-windows-test-app --use-fabric", "bundle:macos": "yarn prebuild && rnx-cli bundle --dev false --platform macos", "bundle:windows": "yarn prebuild && rnx-cli bundle --dev false --platform windows", @@ -78,6 +79,18 @@ "macos", "windows" ], + "plugins": [ + [ + "@rnx-kit/metro-plugin-duplicates-checker", + { + "throwOnError": true, + "ignoredModules": [ + "pretty-format", + "react-is" + ] + } + ] + ], "platforms": { "macos": { "bundleOutput": "dist/index.macos.jsbundle", diff --git a/packages/agentic-components/storybook/scripts/run-windows-offline.ps1 b/packages/agentic-components/storybook/scripts/run-windows-offline.ps1 new file mode 100644 index 0000000000..7de46e652b --- /dev/null +++ b/packages/agentic-components/storybook/scripts/run-windows-offline.ps1 @@ -0,0 +1,29 @@ +param( + [switch]$NoLaunch +) + +$ErrorActionPreference = 'Stop' + +$packageRoot = Split-Path -Parent $PSScriptRoot +$manifestPath = Join-Path $packageRoot 'windows\ReactApp.Package\bin\x64\Release\AppxManifest.xml' + +if (-not (Test-Path -LiteralPath $manifestPath)) { + throw "Release manifest not found at '$manifestPath'. Build the Windows Release app first." +} + +[xml]$manifest = Get-Content -LiteralPath $manifestPath +$identityName = [string]$manifest.Package.Identity.Name +$appId = [string]$manifest.Package.Applications.Application.Id + +$installedPackage = Get-AppxPackage -Name $identityName +if ($installedPackage) { + Remove-AppxPackage -Package $installedPackage.PackageFullName +} + +Add-AppxPackage -Register $manifestPath + +if (-not $NoLaunch) { + $registeredPackage = Get-AppxPackage -Name $identityName + $target = "shell:AppsFolder\$($registeredPackage.PackageFamilyName)!$appId" + Start-Process explorer.exe $target +}