feat: onDisabledRemoveStorybook option (#622)

* feat: experiment with onDisabledRemoveStorybook option

* fix: readme

* v8.3.10-alpha.0

* feat: types for withstorybook

* v8.3.10-alpha.1

* fix: uninitialised force render

* v8.3.10-alpha.2

* fix: search results empty string error

* v8.3.10

README.md

@@ -139,6 +139,15 @@ module.exports = withStorybook(finalConfig, {
 });
 ```
 
+#### Reanimated setup
+
+Make sure you have `react-native-reanimated` in your project and the plugin setup in your babel config.
+
+```js
+// babel.config.js
+plugins: ['react-native-reanimated/plugin'];
+```
+
 ## Writing stories
 
 In storybook we use a syntax called CSF that looks like this:
@@ -328,6 +337,13 @@ module.exports = withStorybook(defaultConfig, {
 });
 ```
 
+#### onDisabledRemoveStorybook
+
+Type: `boolean`, default: `false`
+
+If onDisabledRemoveStorybook `true` and `enabled` is `false`, the storybook package will be removed from the build.
+This is useful if you want to remove storybook from your production build.
+
 #### useJs
 
 Type: `boolean`, default: `false`

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -28,19 +28,19 @@
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",
     "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-ondevice-actions": "^8.3.9",
-    "@storybook/addon-ondevice-backgrounds": "^8.3.9",
-    "@storybook/addon-ondevice-controls": "^8.3.9",
-    "@storybook/addon-ondevice-notes": "^8.3.9",
+    "@storybook/addon-ondevice-actions": "^8.3.10",
+    "@storybook/addon-ondevice-backgrounds": "^8.3.10",
+    "@storybook/addon-ondevice-controls": "^8.3.10",
+    "@storybook/addon-ondevice-notes": "^8.3.10",
     "@storybook/addon-react-native-server": "0.0.6",
     "@storybook/addon-react-native-web": "^0.0.22",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.3.5",
     "@storybook/builder-webpack5": "^8.3.5",
     "@storybook/global": "^5.0.0",
     "@storybook/react": "^8.3.5",
-    "@storybook/react-native": "^8.3.9",
-    "@storybook/react-native-theming": "^8.3.9",
+    "@storybook/react-native": "^8.3.10",
+    "@storybook/react-native-theming": "^8.3.10",
     "@storybook/react-webpack5": "^8.3.5",
     "@storybook/test": "^8.3.5",
     "expo": "^51.0.34",

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "8.3.9"
+  "version": "8.3.10"
 }

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.9"
+    "@storybook/react-native-theming": "^8.3.10"
   },
   "devDependencies": {
     "typescript": "^5.3.3"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -32,8 +32,8 @@
   "dependencies": {
     "@storybook/addon-controls": "^8.3.5",
     "@storybook/core": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.9",
-    "@storybook/react-native-ui": "^8.3.9",
+    "@storybook/react-native-theming": "^8.3.10",
+    "@storybook/react-native-ui": "^8.3.10",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^14.0.0",

packages/ondevice-notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.9",
+    "@storybook/react-native-theming": "^8.3.10",
     "react-native-markdown-display": "^7.0.2"
   },
   "devDependencies": {

packages/react-native-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",

packages/react-native-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -59,7 +59,7 @@
   "dependencies": {
     "@storybook/core": "^8.3.5",
     "@storybook/react": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.9",
+    "@storybook/react-native-theming": "^8.3.10",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",

packages/react-native-ui/src/SearchResults.tsx

@@ -205,20 +205,22 @@ export const SearchResults: FC<{
 
   return (
     <ResultsList>
-      {results.length > 0 && !query && (
+      {results.length > 0 && !query ? (
         <RecentlyOpenedTitle>
           <Text>Recently opened</Text>
           <IconButton onPress={handleClearLastViewed} />
         </RecentlyOpenedTitle>
-      )}
-      {results.length === 0 && query && (
+      ) : null}
+
+      {results.length === 0 && query ? (
         <View>
           <NoResults>
             <Text style={{ marginBottom: 8 }}>No components found</Text>
             <Text>Find components by name or path.</Text>
           </NoResults>
         </View>
-      )}
+      ) : null}
+
       {results.map((result, index) => {
         if (isExpandType(result)) {
           return (

packages/react-native/metro/withStorybook.d.ts

@@ -0,0 +1,72 @@
+import type { InputConfigT } from 'metro-config';
+
+/**
+ * Options for configuring WebSockets used for syncing storybook instances or sending events to storybook.
+ */
+interface WebsocketsOptions {
+  /**
+   * The port WebSocket server will listen on. Defaults to 7007.
+   */
+  port?: number;
+
+  /**
+   * The host WebSocket server will bind to. Defaults to 'localhost'.
+   */
+  host?: string;
+}
+
+/**
+ * Options for configuring Storybook with React Native.
+ */
+interface WithStorybookOptions {
+  /**
+   * The path to the Storybook config folder. Defaults to './.storybook'.
+   */
+  configPath?: string;
+
+  /**
+   * Whether Storybook is enabled. Defaults to true.
+   */
+  enabled?: boolean;
+
+  /**
+   * WebSocket configuration for syncing storybook instances or sending events to storybook.
+   */
+  websockets?: WebsocketsOptions;
+
+  /**
+   * Whether to use JavaScript files for Storybook configuration instead of TypeScript. Defaults to false.
+   */
+  useJs?: boolean;
+
+  /**
+   * If enabled is false and onDisabledRemoveStorybook is true, we will attempt to remove storybook from the js bundle.
+   */
+  onDisabledRemoveStorybook?: boolean;
+}
+
+/**
+ * Configures Metro bundler to work with Storybook in React Native.
+ * This function wraps a Metro configuration to enable Storybook usage.
+ *
+ * @param config - The Metro bundler configuration to be modified.
+ * @param options - Options to customize the Storybook configuration.
+ * @returns The modified Metro configuration.
+ *
+ * @example
+ * const { getDefaultConfig } = require('expo/metro-config');
+ * const withStorybook = require('@storybook/react-native/metro/withStorybook');
+ * const path = require('path');
+ *
+ * const projectRoot = __dirname;
+ * const config = getDefaultConfig(projectRoot);
+ *
+ * module.exports = withStorybook(config, {
+ *   enabled: true,
+ *   configPath: path.resolve(projectRoot, './.storybook'),
+ *   websockets: { port: 7007, host: 'localhost' },
+ *   useJs: false,
+ *   onDisabledRemoveStorybook: true,
+ * });
+ */
+export function withStorybook(config: InputConfigT, options?: WithStorybookOptions): InputConfigT;

packages/react-native/metro/withStorybook.js

@@ -5,9 +5,35 @@ const { WebSocketServer } = require('ws');
 
 module.exports = (
   config,
-  { configPath, enabled = true, websockets, useJs = false } = { enabled: true, useJs: false }
+  { configPath, enabled = true, websockets, useJs = false, onDisabledRemoveStorybook = false } = {
+    enabled: true,
+    useJs: false,
+    onDisabledRemoveStorybook: false,
+  }
 ) => {
   if (!enabled) {
+    if (onDisabledRemoveStorybook) {
+      return {
+        ...config,
+        resolver: {
+          ...config.resolver,
+          resolveRequest: (context, moduleName, platform) => {
+            const resolveFunction = config?.resolver?.resolveRequest
+              ? config?.resolver?.resolveRequest
+              : context.resolveRequest;
+
+            if (moduleName.startsWith('storybook') || moduleName.startsWith('@storybook')) {
+              return {
+                type: 'empty',
+              };
+            }
+
+            return resolveFunction(context, moduleName, platform);
+          },
+        },
+      };
+    }
+
     return config;
   }
 

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "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.5",
-    "@storybook/react-native-theming": "^8.3.9",
-    "@storybook/react-native-ui": "^8.3.9",
+    "@storybook/react-native-theming": "^8.3.10",
+    "@storybook/react-native-ui": "^8.3.10",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",

packages/react-native/readme.md

@@ -1,12 +1,10 @@
 # Storybook for React Native
 
 > [!IMPORTANT]  
-> This readme is in the process of being updated for v8 which is not yet released to stable, for v7 docs see the [v7.6 docs](https://github.com/storybookjs/react-native/tree/v7.6.20-stable).
+> This readme is for v8, for v7 docs see the [v7.6 docs](https://github.com/storybookjs/react-native/tree/v7.6.20-stable).
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-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 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)
@@ -330,6 +328,13 @@ module.exports = withStorybook(defaultConfig, {
 });
 ```
 
+#### onDisabledRemoveStorybook
+
+Type: `boolean`, default: `false`
+
+If onDisabledRemoveStorybook `true` and `enabled` is `false`, the storybook package will be removed from the build.
+This is useful if you want to remove storybook from your production build.
+
 #### useJs
 
 Type: `boolean`, default: `false`

packages/react-native/src/View.tsx

@@ -69,7 +69,7 @@ export type Params = {
 export class View {
   _storyIndex: StoryIndex;
   _setStory: (story: StoryContext<ReactRenderer>) => void = () => {};
-  _forceRerender: () => void;
+  _forceRerender: () => void = () => {};
   _ready: boolean = false;
   _preview: PreviewWithSelection<ReactRenderer>;
   _asyncStorageStoryId: string;