Merge remote-tracking branch 'origin/main' into chore/update-sb-version

.github/workflows/release.yml

@@ -5,7 +5,7 @@ on: [push]
 jobs:
   release:
     runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    if: ${{!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')}}
     steps:
       - uses: actions/checkout@v2
 

.gitignore

@@ -9,4 +9,4 @@ build-storybook.log
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions

CHANGELOG.md

@@ -1,3 +1,21 @@
+# v0.0.22 (Sun Jan 07 2024)
+
+#### 🐛 Bug Fix
+
+- Update to use updated babel preset package name in react native 73. [#78](https://github.com/storybookjs/addon-react-native-web/pull/78) ([@joarkosberg](https://github.com/joarkosberg) [@dannyhw](https://github.com/dannyhw))
+- docs: reanimated example config [#68](https://github.com/storybookjs/addon-react-native-web/pull/68) ([@dannyhw](https://github.com/dannyhw))
+
+#### ⚠️ Pushed to `main`
+
+- fix: use node 18 ([@dannyhw](https://github.com/dannyhw))
+
+#### Authors: 2
+
+- Daniel Williams ([@dannyhw](https://github.com/dannyhw))
+- Joar ([@joarkosberg](https://github.com/joarkosberg))
+
+---
+
 # v0.0.21 (Sat Jul 15 2023)
 
 #### 🐛 Bug Fix

README.md

@@ -10,6 +10,8 @@ This addon configures `@storybook/react` to display React Native (RN) projects u
     - [Aliasing react native web libraries](#aliasing-react-native-web-libraries)
     - [Adding babel plugins](#adding-babel-plugins)
   - [Configuring popular libraries](#configuring-popular-libraries)
+  - [Adding support for static assets and svgs](#adding-support-for-static-assets-and-svgs)
+  - [Node polyfills for webpack 5](#node-polyfills-for-webpack-5)
   - [Known limitations](#known-limitations)
 
 See the [FAQ](https://github.com/storybookjs/addon-react-native-web/blob/main/FAQ.md) for common questions.
@@ -230,6 +232,54 @@ module.exports = {
 
 </table>
 
+## Adding support for static assets and svgs
+
+Install `@svgr/webpack` and `url-loader`
+
+```js
+module.exports = {
+  /*existing config*/
+  // to provide a public export for assets
+  staticDirs: ['<path_to_assets>'],
+  webpackFinal: async (config) => {
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => rule.test && rule.test.test('.svg'),
+    );
+
+    if (fileLoaderRule) {
+      fileLoaderRule.exclude = /\.svg$/;
+    }
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack', 'url-loader'],
+    });
+
+    return config;
+  },
+};
+```
+
+## Node polyfills for webpack 5
+
+install `node-polyfill-webpack-plugin`
+
+```js
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+
+module.exports = {
+  /*existing config*/
+  core: {
+    builder: 'webpack5',
+  },
+  webpackFinal: async (config) => {
+    config.plugins.push(new NodePolyfillPlugin());
+
+    return config;
+  },
+};
+```
+
 ## Known limitations
 
 - Libraries that don't support react-native-web will not work

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-react-native-web",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Configure React storybook for react-native-web",
   "author": "Daniel Williams",
   "keywords": [
@@ -31,7 +31,6 @@
     "prebuild": "yarn clean",
     "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
     "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
-    "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "prestorybook": "yarn buildBabel:cjs",
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --quiet\"",
@@ -42,36 +41,33 @@
     "chromatic": "npx chromatic --project-token=c9eb9dda8699"
   },
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.20.13",
-    "@expo/html-elements": "^0.2.0",
-    "@react-native-community/eslint-config": "^3.1.0",
-    "@react-native/babel-preset": "^0.73.18",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.23.7",
+    "@expo/html-elements": "^0.5.1",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/babel-preset": "^0.73.19",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-mdx-gfm": "^7.6.7",
     "@storybook/react": "^7.6.7",
     "@storybook/react-webpack5": "^7.6.7",
-    "@types/jest": "^27.4.1",
-    "@types/react-native-vector-icons": "^6.4.12",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react-native-vector-icons": "^6.4.18",
     "auto": "^10.36.5",
-    "babel-jest": "^28.0.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
-    "babel-plugin-react-native-web": "^0.18.9",
+    "babel-plugin-react-native-web": "^0.19.10",
     "boxen": "^5.0.1",
     "chromatic": "^6.11.2",
     "concurrently": "^7.5.0",
     "dedent": "^0.7.0",
     "eslint": "^8.14.0",
     "eslint-plugin-ft-flow": "^2.0.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.6.6",
     "expo-linear-gradient": "^11.4.0",
     "jest": "^28.0.0",
     "native-base": "^3.4.19",
@@ -80,21 +76,20 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "^0.73.1",
-    "react-native-gesture-handler": "^2.8.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-reanimated": "2.14.4",
-    "react-native-safe-area-context": "^4.4.1",
-    "react-native-screens": "^3.18.2",
-    "react-native-svg": "^13.4.0",
-    "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "^0.18.9",
-    "react-test-renderer": "18.1.0",
-    "rimraf": "^3.0.2",
+    "react-native-gesture-handler": "^2.14.0",
+    "react-native-paper": "^5.11.7",
+    "react-native-reanimated": "^3.6.1",
+    "react-native-safe-area-context": "^4.8.2",
+    "react-native-screens": "^3.29.0",
+    "react-native-svg": "^14.1.0",
+    "react-native-vector-icons": "^10.0.3",
+    "react-native-web": "^0.19.10",
+    "rimraf": "^5.0.5",
     "storybook": "^7.6.7",
-    "typescript": "^4.9.5",
-    "victory": "^36.6.8",
-    "victory-native": "^36.6.8",
-    "webpack": "5",
+    "typescript": "^5.3.3",
+    "victory": "^36.7.0",
+    "victory-native": "^40.0.3",
+    "webpack": "^5.89.0",
     "zx": "^6.1.0"
   },
   "peerDependencies": {

stories/libraries/Gesture/Draggable/Draggable.stories.tsx

@@ -1,33 +1,38 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Draggable } from './Draggable';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  fill: {
+    // @ts-ignore
+    height: '50vh',
+  },
 });
 
 export default {
   title: 'libraries/Gesture Handler/Draggable',
   component: Draggable,
   render: (args) => {
     return (
-      <Draggable {...args}>
-        <Text>{args.children}</Text>
-      </Draggable>
+      <GestureHandlerRootView style={styles.fill}>
+        <View style={styles.container}>
+          <Draggable {...args}>
+            <Text>{args.children}</Text>
+          </Draggable>
+        </View>
+      </GestureHandlerRootView>
     );
   },
-  decorators: [
-    (Story) => (
-      <View style={styles.container}>
-        <Story />
-      </View>
-    ),
-  ],
-} as ComponentMeta<typeof Draggable>;
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Draggable>;
 
 export const Basic = {
   args: {