React Native Web: Add framework, CLI integration, sandboxes

.circleci/config.yml

@@ -980,30 +980,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 37
+          parallelism: 38
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 37
+          parallelism: 38
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 34
+          parallelism: 35
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - vitest-integration:

code/core/src/cli/detect.ts

@@ -130,6 +130,8 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
 
   // Fallback to Vite or Webpack based on project type
   switch (projectType) {
+    case ProjectType.REACT_NATIVE_WEB:
+      return CoreBuilder.Vite;
     case ProjectType.REACT_SCRIPTS:
     case ProjectType.ANGULAR:
     case ProjectType.REACT_NATIVE: // technically react native doesn't use webpack, we just want to set something

code/core/src/cli/helpers.ts

@@ -157,6 +157,7 @@ export const frameworkToDefaultBuilder: Record<
   'preact-vite': CoreBuilder.Vite,
   'preact-webpack5': CoreBuilder.Webpack5,
   qwik: CoreBuilder.Vite,
+  'react-native-web-vite': CoreBuilder.Vite,
   'react-vite': CoreBuilder.Vite,
   'react-webpack5': CoreBuilder.Webpack5,
   'server-webpack5': CoreBuilder.Webpack5,
@@ -193,6 +194,13 @@ export async function getVersionSafe(packageManager: JsPackageManager, packageNa
   return undefined;
 }
 
+export const cliStoriesTargetPath = async () => {
+  if (existsSync('./src')) {
+    return './src/stories';
+  }
+  return './stories';
+};
+
 export async function copyTemplateFiles({
   packageManager,
   renderer,
@@ -252,14 +260,7 @@ export async function copyTemplateFiles({
     throw new Error(`Unsupported renderer: ${renderer} (${baseDir})`);
   };
 
-  const targetPath = async () => {
-    if (existsSync('./src')) {
-      return './src/stories';
-    }
-    return './stories';
-  };
-
-  const destinationPath = destination ?? (await targetPath());
+  const destinationPath = destination ?? (await cliStoriesTargetPath());
   if (commonAssetsDir) {
     await cp(commonAssetsDir, destinationPath, {
       recursive: true,

code/core/src/cli/project_types.ts

@@ -47,6 +47,7 @@ export enum ProjectType {
   REACT = 'REACT',
   REACT_SCRIPTS = 'REACT_SCRIPTS',
   REACT_NATIVE = 'REACT_NATIVE',
+  REACT_NATIVE_WEB = 'REACT_NATIVE_WEB',
   REACT_PROJECT = 'REACT_PROJECT',
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',

code/core/src/common/utils/framework-to-renderer.ts

@@ -32,6 +32,7 @@ export const frameworkToRenderer: Record<
   html: 'html',
   preact: 'preact',
   'react-native': 'react-native',
+  'react-native-web-vite': 'react',
   react: 'react',
   server: 'server',
   svelte: 'svelte',

code/core/src/common/versions.ts

@@ -48,6 +48,7 @@ export default {
   '@storybook/nextjs': '8.5.0-alpha.5',
   '@storybook/preact-vite': '8.5.0-alpha.5',
   '@storybook/preact-webpack5': '8.5.0-alpha.5',
+  '@storybook/react-native-web-vite': '8.5.0-alpha.5',
   '@storybook/react-vite': '8.5.0-alpha.5',
   '@storybook/react-webpack5': '8.5.0-alpha.5',
   '@storybook/server-webpack5': '8.5.0-alpha.5',

code/core/src/types/modules/frameworks.ts

@@ -8,6 +8,7 @@ export type SupportedFrameworks =
   | 'nextjs'
   | 'preact-vite'
   | 'preact-webpack5'
+  | 'react-native-web-vite'
   | 'react-vite'
   | 'react-webpack5'
   | 'server-webpack5'

code/e2e-tests/addon-actions.spec.ts

@@ -12,6 +12,10 @@ test.describe('addon-actions', () => {
       templateName.includes('svelte') && templateName.includes('prerelease'),
       'Svelte 5 prerelase does not support automatic actions with our current example components yet'
     );
+    test.skip(
+      templateName.includes('react-native-web'),
+      'React Native uses onPress rather than onClick'
+    );
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page, expect);
     sbPage.waitUntilLoaded();

code/e2e-tests/addon-controls.spec.ts

@@ -4,9 +4,12 @@ import process from 'process';
 import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-controls', () => {
   test('should change component when changing controls', async ({ page }) => {
+    test.skip(templateName.includes('react-native-web'), 'React Native CSS behaves differently');
+
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();

code/e2e-tests/addon-docs.spec.ts

@@ -123,6 +123,7 @@ test.describe('addon-docs', () => {
       //   - template: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/addons-docs-docspage-basic--docs
       //   - real: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/example-button--docs
       'lit-vite',
+      'react-native-web',
     ];
     test.skip(
       new RegExp(`^${skipped.join('|')}`, 'i').test(`${templateName}`),

code/e2e-tests/addon-interactions.spec.ts

@@ -23,6 +23,10 @@ test.describe('addon-interactions', () => {
       /^(lit)/i.test(`${templateName}`),
       `Skipping ${templateName}, which does not support addon-interactions`
     );
+    test.skip(
+      templateName.includes('react-native-web'),
+      'React Native does not use className locators'
+    );
 
     const sbPage = new SbPage(page, expect);
 

code/frameworks/react-native-web-vite/README.md

@@ -0,0 +1,3 @@
+# Storybook for React Native Web & Vite
+
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite?renderer=react-native-web) for installation instructions, usage examples, APIs, and more.

code/frameworks/react-native-web-vite/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@storybook/react-native-web-vite",
+  "version": "8.5.0-alpha.5",
+  "description": "Develop react-native components an isolated web environment with hot reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-native-web-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/react-native-web-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/cli/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
+    "@storybook/builder-vite": "workspace:*",
+    "@storybook/react": "workspace:*",
+    "@storybook/react-vite": "workspace:*",
+    "@vitejs/plugin-react": "^4.3.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.3.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-native": ">=0.74.5",
+    "react-native-web": "^0.19.12",
+    "storybook": "workspace:^",
+    "vite": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+}

code/frameworks/react-native-web-vite/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/frameworks/react-native-web-vite/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "react-native-web-vite",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "targets": {
+    "build": {}
+  }
+}

code/frameworks/react-native-web-vite/src/index.ts

@@ -0,0 +1 @@
+export type { FrameworkOptions, StorybookConfig } from './types';

code/frameworks/react-native-web-vite/src/preset.ts

@@ -0,0 +1,91 @@
+// @ts-expect-error FIXME
+import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset';
+
+import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react';
+import type { PluginOption } from 'vite';
+
+import type { FrameworkOptions, StorybookConfig } from './types';
+
+function reactNativeWeb(
+  reactOptions: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions }
+): PluginOption {
+  return {
+    name: 'vite:react-native-web',
+    config(_userConfig, env) {
+      return {
+        define: {
+          // reanimated support
+          'global.__x': {},
+          _frameTimestamp: undefined,
+          _WORKLET: false,
+          __DEV__: `${env.mode === 'development'}`,
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || env.mode),
+        },
+        optimizeDeps: {
+          include: [],
+          esbuildOptions: {
+            jsx: 'transform',
+            resolveExtensions: [
+              '.web.js',
+              '.web.ts',
+              '.web.tsx',
+              '.js',
+              '.jsx',
+              '.json',
+              '.ts',
+              '.tsx',
+              '.mjs',
+            ],
+            loader: {
+              '.js': 'jsx',
+            },
+          },
+        },
+        resolve: {
+          extensions: [
+            '.web.js',
+            '.web.ts',
+            '.web.tsx',
+            '.js',
+            '.jsx',
+            '.json',
+            '.ts',
+            '.tsx',
+            '.mjs',
+          ],
+          alias: {
+            'react-native': 'react-native-web',
+          },
+        },
+      };
+    },
+  };
+}
+
+export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
+  const { pluginReactOptions = {} } =
+    await options.presets.apply<FrameworkOptions>('frameworkOptions');
+
+  const reactConfig = await reactViteFinal(config, options);
+  const { plugins = [] } = reactConfig;
+
+  plugins.unshift(
+    react({
+      babel: {
+        babelrc: false,
+        configFile: false,
+      },
+      jsxRuntime: 'automatic',
+      ...pluginReactOptions,
+    })
+  );
+  plugins.push(reactNativeWeb(pluginReactOptions));
+
+  return reactConfig;
+};
+
+export const core = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/react',
+};

code/frameworks/react-native-web-vite/src/types.ts

@@ -0,0 +1,24 @@
+import type { CompatibleString } from 'storybook/internal/types';
+
+import type {
+  FrameworkOptions as FrameworkOptionsBase,
+  StorybookConfig as StorybookConfigBase,
+} from '@storybook/react-vite';
+
+import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react';
+
+export type FrameworkOptions = FrameworkOptionsBase & {
+  pluginReactOptions?: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions };
+};
+
+type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
+
+/** The interface for Storybook configuration in `main.ts` files. */
+export type StorybookConfig = Omit<StorybookConfigBase, 'framework'> & {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+};

code/frameworks/react-native-web-vite/template/cli/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/extensions": "off",
+    "react/no-unknown-property": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}