@storybook/react-native 8.3.1-alpha.2 → 8.3.1-beta.1

package/dist/index.d.ts

@@ -36,11 +36,6 @@ type Params = {
     secured?: boolean;
     initialSelection?: InitialSelection;
     shouldPersistSelection?: boolean;
-    tabOpen?: number;
-    isUIHidden?: boolean;
-    isSplitPanelVisible?: boolean;
-    shouldDisableKeyboardAvoidingView?: boolean;
-    keyboardAvoidingViewVerticalOffset?: number;
     theme: DeepPartial<Theme>;
     storage?: Storage;
 };

package/metro/withStorybook.js

@@ -3,7 +3,7 @@ const path = require('path');
 const { generate } = require('../scripts/generate');
 const { WebSocketServer } = require('ws');
 
-module.exports = (config, { configPath, enabled, websockets }) => {
+module.exports = (config, { configPath, enabled, websockets, useJs = false }) => {
   if (!enabled) {
     return config;
   }
@@ -34,6 +34,7 @@ module.exports = (config, { configPath, enabled, websockets }) => {
 
   generate({
     configPath: configPath ?? path.resolve(process.cwd(), './.storybook'),
+    useJs,
   });
 
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.3.1-alpha.2",
+  "version": "8.3.1-beta.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -43,8 +43,8 @@
     "@storybook/csf": "^0.1.1",
     "@storybook/global": "^5.0.0",
     "@storybook/react": "^8.3.1",
-    "@storybook/react-native-theming": "^8.3.1-alpha.2",
-    "@storybook/react-native-ui": "^8.3.1-alpha.2",
+    "@storybook/react-native-theming": "^8.3.1-beta.1",
+    "@storybook/react-native-ui": "^8.3.1-beta.1",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -54,6 +54,7 @@
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-url-polyfill": "^2.0.0",
     "setimmediate": "^1.0.5",
+    "storybook": "^8.3.1",
     "type-fest": "~2.19",
     "util": "^0.12.4",
     "ws": "^8.18.0"
@@ -81,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2db7054f47b2addecdb947cba539544be40379e3"
+  "gitHead": "ec1fdf03a6769c4f476066d3fb7f7086cbf0cc4e"
 }

package/readme.md

@@ -2,17 +2,15 @@
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-This readme is for the 7.6.10 version, you can find the 6.5 docs [here](https://github.com/storybookjs/react-native/tree/v6.5-stable).
+This readme is for the 8.3.1 version, you can find the 7.6 docs [here](https://github.com/storybookjs/react-native/tree/v7.6.20-stable).
 
-If you are migrating from 6.5 to 7.6 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-65x-to-76x)
+If you are migrating from 7.6 to 8.3 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-76x-to-83x)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
-> NOTE: `@storybook/react-native` requires atleast 7.6.10, if you install other storybook core packages they should be `^7.6.10` or newer.
+> NOTE: `@storybook/react-native` requires atleast 8.3.1, if you install other storybook core packages they should be `^8.3.1` or newer.
 
-If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12) to see the open issues.
-
-![picture of storybook](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png)
+![picture of storybook](https://github.com/user-attachments/assets/3162c051-e6bf-4d39-8ae2-da060e1f8b78)
 
 _Pictured is from the template mentioned in [getting started](#getting-started)_
 
@@ -59,6 +57,8 @@ The only thing left to do is return Storybook's UI in your app entry point (such
 export { default } from './.storybook';
 ```
 
+Then wrap your metro config with the withStorybook function as seen [below](#additional-steps-update-your-metro-config)
+
 If you want to be able to swap easily between storybook and your app, have a look at this [blog post](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o)
 
 If you want to add everything yourself check out the the manual guide [here](https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md).
@@ -75,43 +75,66 @@ First create metro config file if you don't have it yet.
 npx expo customize metro.config.js
 ```
 
-Then set `transformer.unstable_allowRequireContext` to true and add the generate call here.
+Then wrap your config in the withStorybook function as seen below.
 
 ```js
 // metro.config.js
 const path = require('path');
 const { getDefaultConfig } = require('expo/metro-config');
-
-const { generate } = require('@storybook/react-native/scripts/generate');
-
-generate({
-  configPath: path.resolve(__dirname, './.storybook'),
-});
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
 
 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
-config.transformer.unstable_allowRequireContext = true;
+module.exports = withStorybook(config, {
+  // Set to false to remove storybook specific options
+  // you can also use a env variable to set this
+  enabled: true,
+  // Path to your storybook config
+  configPath: path.resolve(__dirname, './.storybook'),
 
-module.exports = config;
+  // Optional websockets configuration
+  // Starts a websocket server on the specified port and host on metro start
+  // websockets: {
+  //   port: 7007,
+  //   host: 'localhost',
+  // },
+});
 ```
 
 **React native**
 
 ```js
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
-const { generate } = require('@storybook/react-native/scripts/generate');
-
-generate({
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const defaultConfig = getDefaultConfig(__dirname);
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
+// set your own config here 👆
+
+const finalConfig = mergeConfig(defaultConfig, config);
+
+module.exports = withStorybook(finalConfig, {
+  // Set to false to remove storybook specific options
+  // you can also use a env variable to set this
+  enabled: true,
+  // Path to your storybook config
   configPath: path.resolve(__dirname, './.storybook'),
-});
 
-module.exports = {
-  /* existing config */
-  transformer: {
-    unstable_allowRequireContext: true,
-  },
-};
+  // Optional websockets configuration
+  // Starts a websocket server on the specified port and host on metro start
+  // websockets: {
+  //   port: 7007,
+  //   host: 'localhost',
+  // },
+});
 ```
 
 ## Writing stories
@@ -271,19 +294,29 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
 
 ```
 {
-    tabOpen: Number (0)
-        -- which tab should be open. -1 Sidebar, 0 Canvas, 1 Addons
-    initialSelection: string | Object (undefined)
+    initialSelection?: string | Object (undefined)
         -- initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
-    shouldDisableKeyboardAvoidingView: Boolean (false)
-        -- Disable KeyboardAvoidingView wrapping Storybook's view
-    keyboardAvoidingViewVerticalOffset: Number (0)
-        -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
-    storage: Object (undefined)
+    storage?: Object (undefined)
         -- {getItem: (key: string) => Promise<string | null>;setItem: (key: string, value: string) => Promise<void>;}
         -- Custom storage to be used instead of AsyncStorage
     shouldPersistSelection: Boolean (true)
         -- Stores last selected story in your devices storage.
+    onDeviceUI?: boolean;
+        -- show the ondevice ui
+    enableWebsockets?: boolean;
+        -- enable websockets for the storybook ui
+    query?: string;
+        -- query params for the websocket connection
+    host?: string;
+        -- host for the websocket connection
+    port?: number;
+        -- port for the websocket connection
+    secured?: boolean;
+        -- use secured websockets
+    shouldPersistSelection?: boolean;
+        -- store the last selected story in the device's storage
+    theme: Partial<Theme>;
+        -- theme for the storybook ui
 }
 ```