Merge branch 'next' into next

storybookjs · Oct 7, 2024 · 090f9a3 · 090f9a3
2 parents 8ae721b + 46920a7
commit 090f9a3
Show file tree

Hide file tree

Showing 14 changed files with 1,517 additions and 1,765 deletions.
diff --git a/MANUAL_SETUP.md b/MANUAL_SETUP.md
@@ -1,4 +1,4 @@
-# Setup for v7 React Native Storybook
+# Setup for v8 React Native Storybook
 
 Before getting into the guide consider using a template for a simpler setup process.
 
@@ -25,13 +25,13 @@ You may wish to setup everything yourself, you can use the following guide to do
 **Expo**
 
 ```sh
-expo install @storybook/react-native @react-native-async-storage/async-storage react-dom react-native-safe-area-context
+expo install @storybook/react-native @react-native-async-storage/async-storage react-dom react-native-safe-area-context react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
 ```
 
 **React native CLI**
 
 ```sh
-yarn add -D @storybook/react-native @react-native-async-storage/async-storage react-native-safe-area-context react-dom
+yarn add -D @storybook/react-native @react-native-async-storage/async-storage react-native-safe-area-context react-dom react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
 ```
 
 **IOS**
@@ -128,35 +128,22 @@ Then set `transformer.unstable_allowRequireContext` to true
 
 ```js
 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');
 
 const defaultConfig = getDefaultConfig(__dirname);
 
-defaultConfig.transformer.unstable_allowRequireContext = true;
-
-module.exports = defaultConfig;
+module.exports = withStorybook(defaultConfig);
 ```
 
 **React native**
 
 ```js
-const { generate } = require('@storybook/react-native/scripts/generate');
+const { getDefaultConfig } = require('@react-native/metro-config');
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
 
-generate({
-  configPath: path.resolve(__dirname, './.storybook'),
-});
+const defaultConfig = getDefaultConfig(__dirname);
 
-module.exports = {
-  /* existing config */
-  transformer: {
-    unstable_allowRequireContext: true,
-  },
-};
+module.exports = withStorybook(finalConfig);
 ```
 
 **Add a stories file**

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -45,38 +45,39 @@ In this version of storybook we've reworked the UI using some community react na
 
 ### Dependencies
 
-Update all storybook dependencies to 8.3.1 or newer.
+Update all storybook dependencies to 8.3.5 or newer.
 
 For example you may end up with something like this
 
 ```json
 // package.json
 {
   "devDependencies": {
-    "@storybook/react-native": "^8.3.1",
-    "@storybook/react": "^8.3.1",
-    "@storybook/addon-ondevice-controls": "^8.3.1",
-    "@storybook/addon-ondevice-actions": "^8.3.1",
-    "@storybook/addon-ondevice-backgrounds": "^8.3.1",
-    "@storybook/addon-ondevice-notes": "^8.3.1"
+    "@storybook/react-native": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/addon-ondevice-controls": "^8.3.5",
+    "@storybook/addon-ondevice-actions": "^8.3.5",
+    "@storybook/addon-ondevice-backgrounds": "^8.3.5",
+    "@storybook/addon-ondevice-notes": "^8.3.5"
   }
 }
 ```
 
 Add the new required dependencies to your project.
 
-```json
-// package.json
-{
-  "devDependencies": {
-    "react-native-reanimated": "~3.10.1",
-    "react-native-gesture-handler": "~2.16.1",
-    "@gorhom/bottom-sheet": "^4.6.4",
-    "react-native-svg": "15.2.0"
-  }
-}
+Expo: 
+
+```sh
+npx expo install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
+```
+RN Cli:
+
+```sh
+npm install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg
 ```
 
+Make sure you use versions of those packages supported by your version of expo/react-native
+
 ### Regenerate your requires file
 
 Regenerate your `.storybook/storybook.requires.ts` file by running `yarn storybook-generate`.
@@ -99,6 +100,8 @@ module.exports = withStorybook(config, {
 });
 ```
 
+For a full list of options, see [the `withStorybook` documentation](./README.md#withstorybook-wrapper).
+
 ## From version 6.5.x to 7.6.x
 
 In this version of storybook we've a lot of changes to the internals of react native storybook to make it more compatible with core storybook libraries. This means compatibility with the new v7 store and the api changes that comes with that.

diff --git a/README.md b/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)

diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -28,19 +28,19 @@
     "@storybook/addon-essentials": "^8.3.1",
     "@storybook/addon-interactions": "^8.3.1",
     "@storybook/addon-links": "^8.3.1",
-    "@storybook/addon-ondevice-actions": "^8.3.1-beta.3",
-    "@storybook/addon-ondevice-backgrounds": "^8.3.1-beta.3",
-    "@storybook/addon-ondevice-controls": "^8.3.1-beta.3",
-    "@storybook/addon-ondevice-notes": "^8.3.1-beta.3",
-    "@storybook/addon-react-native-server": "0.0.6--canary.6.16aca9d.0",
+    "@storybook/addon-ondevice-actions": "^8.3.5",
+    "@storybook/addon-ondevice-backgrounds": "^8.3.5",
+    "@storybook/addon-ondevice-controls": "^8.3.5",
+    "@storybook/addon-ondevice-notes": "^8.3.5",
+    "@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.1",
     "@storybook/builder-webpack5": "^8.3.1",
     "@storybook/global": "^5.0.0",
     "@storybook/react": "^8.3.1",
-    "@storybook/react-native": "^8.3.1-beta.3",
-    "@storybook/react-native-theming": "^8.3.1-beta.3",
+    "@storybook/react-native": "^8.3.5",
+    "@storybook/react-native-theming": "^8.3.5",
     "@storybook/react-webpack5": "^8.3.1",
     "@storybook/test": "^8.3.1",
     "expo": "^51.0.34",

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "8.3.1-beta.3"
+  "version": "8.3.5"
 }
diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"

diff --git a/packages/ondevice-backgrounds/package.json b/packages/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.3.1",
-    "@storybook/react-native-theming": "^8.3.1-beta.3"
+    "@storybook/react-native-theming": "^8.3.5"
   },
   "devDependencies": {
     "typescript": "^5.3.3"

diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -32,8 +32,8 @@
   "dependencies": {
     "@storybook/addon-controls": "^8.3.1",
     "@storybook/core": "^8.3.1",
-    "@storybook/react-native-theming": "^8.3.1-beta.3",
-    "@storybook/react-native-ui": "^8.3.1-beta.3",
+    "@storybook/react-native-theming": "^8.3.5",
+    "@storybook/react-native-ui": "^8.3.5",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^14.0.0",

diff --git a/packages/ondevice-notes/package.json b/packages/ondevice-notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.3.1",
-    "@storybook/react-native-theming": "^8.3.1-beta.3",
+    "@storybook/react-native-theming": "^8.3.5",
     "react-native-markdown-display": "^7.0.2"
   },
   "devDependencies": {

diff --git a/packages/react-native-theming/package.json b/packages/react-native-theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",

diff --git a/packages/react-native-ui/package.json b/packages/react-native-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -59,7 +59,7 @@
   "dependencies": {
     "@storybook/core": "^8.3.1",
     "@storybook/react": "^8.3.1",
-    "@storybook/react-native-theming": "^8.3.1-beta.3",
+    "@storybook/react-native-theming": "^8.3.5",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",

diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.3.1-beta.3",
+  "version": "8.3.5",
   "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-beta.3",
-    "@storybook/react-native-ui": "^8.3.1-beta.3",
+    "@storybook/react-native-theming": "^8.3.5",
+    "@storybook/react-native-ui": "^8.3.5",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",

diff --git a/packages/react-native/template/cli/stories/Button/Button.stories.tsx b/packages/react-native/template/cli/stories/Button/Button.stories.tsx
@@ -13,7 +13,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+      <View style={{ padding: 16, alignItems: 'flex-start' }}>
         <Story />
       </View>
     ),