storybook-react-native-web-rsbuild 3.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rspack Contrib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# storybook-react-native-web-rsbuild
+
+Storybook for React Native Web and Rsbuild: Develop React Native components for web in isolation with Hot Reloading.
+
+## Installation
+
+```bash
+npm install storybook-react-native-web-rsbuild react-native-web
+```
+
+## Usage
+
+In your `.storybook/main.ts`:
+
+```ts
+import type { StorybookConfig } from 'storybook-react-native-web-rsbuild'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: 'storybook-react-native-web-rsbuild',
+    options: {},
+  },
+}
+
+export default config
+```
+
+## Framework Options
+
+### modulesToTranspile
+
+Many React Native packages ship untranspiled code. Use this option to add additional packages that need transpilation:
+
+```ts
+framework: {
+  name: 'storybook-react-native-web-rsbuild',
+  options: {
+    modulesToTranspile: ['react-native-reanimated', 'nativewind'],
+  },
+}
+```
+
+By default, packages starting with `react-native`, `@react-native`, `expo`, and `@expo` are already included.
+
+## Features
+
+- Full React Native Web support with Rsbuild
+- Aliases `react-native` to `react-native-web` automatically
+- Handles untranspiled React Native packages
+- Supports Flow syntax in React Native packages
+- Compatible with Expo projects
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+export * from '@storybook/react';
+export { __definePreview as definePreview } from '@storybook/react';
+import { PluginReactNativeWebOptions } from 'rsbuild-plugin-react-native-web';
+import { StorybookConfig as StorybookConfig$1, TypescriptOptions } from 'storybook/internal/types';
+import { BuilderOptions, StorybookConfigRsbuild, TypescriptOptions as TypescriptOptions$1 } from 'storybook-builder-rsbuild';
+
+type FrameworkName = 'storybook-react-native-web-rsbuild';
+type BuilderName = 'storybook-builder-rsbuild';
+type FrameworkOptions = {
+    builder?: BuilderOptions;
+    /**
+     * Additional node_modules that need to be transpiled.
+     * Many React Native packages ship untranspiled code.
+     * By default, packages starting with `react-native`, `@react-native`, `expo`, and `@expo`
+     * are already included.
+     *
+     * @example ['react-native-reanimated', 'nativewind']
+     */
+    modulesToTranspile?: string[];
+    /**
+     * Options passed to the React Native Web Rsbuild plugin.
+     */
+    pluginOptions?: PluginReactNativeWebOptions;
+};
+type StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfig$1['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+    typescript?: Partial<TypescriptOptions & TypescriptOptions$1>;
+};
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigRsbuild | keyof StorybookConfigFramework> & StorybookConfigRsbuild & StorybookConfigFramework;
+
+export type { FrameworkOptions, StorybookConfig };

package/dist/index.js

@@ -0,0 +1,6 @@
+// src/index.ts
+export * from "@storybook/react";
+import { __definePreview } from "@storybook/react";
+export {
+  __definePreview as definePreview
+};

package/dist/node/index.d.ts

@@ -0,0 +1,43 @@
+import { PluginReactNativeWebOptions } from 'rsbuild-plugin-react-native-web';
+import { StorybookConfig as StorybookConfig$1, TypescriptOptions } from 'storybook/internal/types';
+import { StorybookConfigRsbuild, BuilderOptions, TypescriptOptions as TypescriptOptions$1 } from 'storybook-builder-rsbuild';
+
+type FrameworkName = 'storybook-react-native-web-rsbuild';
+type BuilderName = 'storybook-builder-rsbuild';
+type FrameworkOptions = {
+    builder?: BuilderOptions;
+    /**
+     * Additional node_modules that need to be transpiled.
+     * Many React Native packages ship untranspiled code.
+     * By default, packages starting with `react-native`, `@react-native`, `expo`, and `@expo`
+     * are already included.
+     *
+     * @example ['react-native-reanimated', 'nativewind']
+     */
+    modulesToTranspile?: string[];
+    /**
+     * Options passed to the React Native Web Rsbuild plugin.
+     */
+    pluginOptions?: PluginReactNativeWebOptions;
+};
+type StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfig$1['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+    typescript?: Partial<TypescriptOptions & TypescriptOptions$1>;
+};
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigRsbuild | keyof StorybookConfigFramework> & StorybookConfigRsbuild & StorybookConfigFramework;
+
+declare function defineMain(config: StorybookConfig): StorybookConfig;
+
+export { defineMain };

package/dist/node/index.js

@@ -0,0 +1,19 @@
+import CJS_COMPAT_NODE_URL_cc63eba5417a6086 from 'node:url';
+import CJS_COMPAT_NODE_PATH_cc63eba5417a6086 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_cc63eba5417a6086 from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_cc63eba5417a6086.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_cc63eba5417a6086.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_cc63eba5417a6086.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+
+// src/node/index.ts
+function defineMain(config) {
+  return config;
+}
+export {
+  defineMain
+};

package/dist/preset.js

@@ -0,0 +1,60 @@
+import CJS_COMPAT_NODE_URL_cc63eba5417a6086 from 'node:url';
+import CJS_COMPAT_NODE_PATH_cc63eba5417a6086 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_cc63eba5417a6086 from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_cc63eba5417a6086.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_cc63eba5417a6086.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_cc63eba5417a6086.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+
+// src/preset.ts
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { mergeRsbuildConfig } from "@rsbuild/core";
+import { pluginReactNativeWeb } from "rsbuild-plugin-react-native-web";
+import { rsbuildFinal as reactRsbuildFinal } from "storybook-react-rsbuild/preset";
+function resolveReactNativeWeb(configDir) {
+  try {
+    let packageJsonPath = createRequire(`${configDir}/package.json`).resolve("react-native-web/package.json");
+    return dirname(packageJsonPath);
+  } catch {
+    return "react-native-web";
+  }
+}
+var rsbuildFinal = async (config, options) => {
+  let reactConfig = await reactRsbuildFinal(config, options), framework = await options.presets.apply("framework"), frameworkOptions = typeof framework == "string" ? {} : framework.options || {}, reactNativeWebPath = resolveReactNativeWeb(options.configDir);
+  return mergeRsbuildConfig(reactConfig, {
+    plugins: [
+      pluginReactNativeWeb({
+        modulesToTranspile: frameworkOptions.modulesToTranspile,
+        // Pass the resolved path to enable absolute imports in transformed code
+        reactNativeWebPath,
+        ...frameworkOptions.pluginOptions
+      })
+    ],
+    resolve: {
+      alias: {
+        // Use absolute path to ensure proper resolution in pnpm/monorepo setups
+        "react-native": reactNativeWebPath
+      }
+    }
+  });
+}, core = async (config, options) => {
+  let framework = await options.presets.apply("framework");
+  return {
+    ...config,
+    builder: {
+      name: fileURLToPath(import.meta.resolve("storybook-builder-rsbuild")),
+      options: typeof framework == "string" ? {} : framework.options.builder || {}
+    },
+    renderer: fileURLToPath(import.meta.resolve("@storybook/react/preset"))
+  };
+};
+export {
+  core,
+  rsbuildFinal
+};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "storybook-react-native-web-rsbuild",
+  "version": "3.2.0",
+  "description": "Storybook for React Native Web and Rsbuild: Develop React Native components for web in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook",
+    "rsbuild",
+    "rspack",
+    "react-native",
+    "react-native-web",
+    "expo"
+  ],
+  "homepage": "https://storybook.rsbuild.rs",
+  "bugs": {
+    "url": "https://github.com/rspack-contrib/storybook-rsbuild/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rspack-contrib/storybook-rsbuild",
+    "directory": "packages/framework-react-native-web"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./node": {
+      "types": "./dist/node/index.d.ts",
+      "default": "./dist/node/index.js"
+    },
+    "./package.json": "./package.json",
+    "./preset": "./dist/preset.js"
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "build": "pnpm run prep --production",
+    "check": "jiti ../../scripts/check/check-package.ts",
+    "prep": "jiti ../../scripts/build/build-package.ts",
+    "prepare": "pnpm run build"
+  },
+  "dependencies": {
+    "@storybook/react": "^10.1.9",
+    "rsbuild-plugin-react-native-web": "workspace:*",
+    "storybook-builder-rsbuild": "workspace:*",
+    "storybook-react-rsbuild": "workspace:*"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.6.13",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.27",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native-web": "^0.19.13",
+    "storybook": "10.1.2",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "^1.5.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-native-web": "^0.19.0 || ^0.20.0 || ^0.21.0",
+    "storybook": "^10.1.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/node/index.ts",
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  }
+}

package/preset.js

@@ -0,0 +1 @@
+export * from './dist/preset.js'