React Native Web: Add framework, CLI integration, sandboxes

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,

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.3',
   '@storybook/preact-vite': '8.5.0-alpha.3',
   '@storybook/preact-webpack5': '8.5.0-alpha.3',
+  '@storybook/react-native-web-vite': '8.5.0-alpha.3',
   '@storybook/react-vite': '8.5.0-alpha.3',
   '@storybook/react-webpack5': '8.5.0-alpha.3',
   '@storybook/server-webpack5': '8.5.0-alpha.3',

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/frameworks/react-native-web-vite/README.md

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

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

@@ -0,0 +1,88 @@
+{
+  "name": "@storybook/react-native-web-vite",
+  "version": "8.5.0-alpha.3",
+  "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",
+    "@rollup/pluginutils": "^5.0.2",
+    "@storybook/builder-vite": "workspace:*",
+    "@storybook/react": "workspace:*",
+    "@vitejs/plugin-react": "^4.3.2",
+    "find-up": "^5.0.0",
+    "magic-string": "^0.30.0",
+    "react-docgen": "^7.0.0",
+    "resolve": "^1.22.8",
+    "tsconfig-paths": "^4.2.0"
+  },
+  "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": "^4.0.0 || ^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 @@
+import { hasVitePlugins } from '@storybook/builder-vite';
+
+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 { plugins = [] } = config;
+
+  //  if (!(await hasVitePlugins(plugins, ['vite:react-native-web']))) {
+  plugins.push(
+    react({
+      babel: {
+        babelrc: false,
+        configFile: false,
+      },
+      jsxRuntime: 'automatic',
+      ...pluginReactOptions,
+    })
+  );
+  plugins.push(reactNativeWeb(pluginReactOptions));
+  //}
+
+  return config;
+};
+
+export const core = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/react',
+};

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

@@ -0,0 +1,68 @@
+import type {
+  CompatibleString,
+  StorybookConfig as StorybookConfigBase,
+  TypescriptOptions as TypescriptOptionsBase,
+} from 'storybook/internal/types';
+
+import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
+
+import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
+import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react';
+
+type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
+
+export type FrameworkOptions = {
+  builder?: BuilderOptions;
+  strictMode?: boolean;
+  /**
+   * Use React's legacy root API to mount components
+   *
+   * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g.
+   * concurrent features) If this flag is true, the legacy Root API is used to mount components to
+   * make it easier to migrate step by step to React 18.
+   *
+   * @default false
+   */
+  legacyRootApi?: boolean;
+
+  pluginReactOptions?: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions };
+};
+
+type StorybookConfigFramework = {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+  core?: StorybookConfigBase['core'] & {
+    builder?:
+      | BuilderName
+      | {
+          name: BuilderName;
+          options: BuilderOptions;
+        };
+  };
+};
+
+type TypescriptOptions = TypescriptOptionsBase & {
+  /**
+   * Sets the type of Docgen when working with React and TypeScript
+   *
+   * @default `'react-docgen'`
+   */
+  reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
+  /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */
+  reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0];
+};
+
+/** The interface for Storybook configuration in `main.ts` files. */
+export type StorybookConfig = Omit<
+  StorybookConfigBase,
+  keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript'
+> &
+  StorybookConfigVite &
+  StorybookConfigFramework & {
+    typescript?: Partial<TypescriptOptions>;
+  };

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"
+  }
+}

code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { View } from 'react-native';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};