feat/v8

.circleci/config.yml

@@ -4,7 +4,7 @@ aliases:
   - &defaults
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:16.20.0
+      - image: cimg/node:20.9.0
 
 jobs:
   build:

.eslintrc.js

@@ -4,5 +4,6 @@ module.exports = {
   rules: {
     'react-native/no-inline-styles': 'off',
     'react/react-in-jsx-scope': 'off',
+    curly: ['error', 'multi-line'],
   },
 };

.gitignore

@@ -29,7 +29,6 @@ htpasswd
 storybook-out
 /addons/docs/common/config-*
 built-storybooks
-examples/expo-example/.storybook/storybook.requires.js
 .yarn/*
 !.yarn/patches
 !.yarn/plugins

.vscode/settings.json

@@ -1,6 +1,3 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  }
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

.yarn/patches/jotai-npm-2.6.2-d482bf2d42.patch

@@ -0,0 +1,60 @@
+diff --git a/esm/vanilla.mjs b/esm/vanilla.mjs
+index 59d78cf8e0490d98e104e4ba2ba58afb3bf97560..5f60e0f80f67546966f76333346790802b294e29 100644
+--- a/esm/vanilla.mjs
++++ b/esm/vanilla.mjs
+@@ -578,11 +578,6 @@ if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production") {
+ }
+ const getDefaultStore = () => {
+   if (!defaultStore) {
+-    if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && globalThis.__NUMBER_OF_JOTAI_INSTANCES__ !== 1) {
+-      console.warn(
+-        "Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044"
+-      );
+-    }
+     defaultStore = createStore();
+   }
+   return defaultStore;
+diff --git a/system/vanilla.development.js b/system/vanilla.development.js
+index 5045cde2971e1372ab48b82bbd161886d13eeccd..f7f3741f9cfdd9b200d0ea304a61f0d11847d013 100644
+--- a/system/vanilla.development.js
++++ b/system/vanilla.development.js
+@@ -580,11 +580,6 @@ System.register([], (function (exports) {
+       }
+       const getDefaultStore = exports("getDefaultStore", () => {
+         if (!defaultStore) {
+-          if (globalThis.__NUMBER_OF_JOTAI_INSTANCES__ !== 1) {
+-            console.warn(
+-              "Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044"
+-            );
+-          }
+           defaultStore = createStore();
+         }
+         return defaultStore;
+diff --git a/umd/vanilla.development.js b/umd/vanilla.development.js
+index d9587e70701c3a4717c6be4951a65e40d60b90b1..f9fcbefe4d53a5910edb320643f8bfb7139081b5 100644
+--- a/umd/vanilla.development.js
++++ b/umd/vanilla.development.js
+@@ -671,9 +671,6 @@
+   }
+   var getDefaultStore = function getDefaultStore() {
+     if (!defaultStore) {
+-      if (globalThis.__NUMBER_OF_JOTAI_INSTANCES__ !== 1) {
+-        console.warn('Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044');
+-      }
+       defaultStore = createStore();
+     }
+     return defaultStore;
+diff --git a/vanilla.js b/vanilla.js
+index 946fa9155cc4120bffd0022c9e50f77011dfab02..234c958df45eaa5bf5240be5d707f6d48261ab85 100644
+--- a/vanilla.js
++++ b/vanilla.js
+@@ -672,9 +672,6 @@ if (process.env.NODE_ENV !== 'production') {
+ }
+ var getDefaultStore = function getDefaultStore() {
+   if (!defaultStore) {
+-    if (process.env.NODE_ENV !== 'production' && globalThis.__NUMBER_OF_JOTAI_INSTANCES__ !== 1) {
+-      console.warn('Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044');
+-    }
+     defaultStore = createStore();
+   }
+   return defaultStore;

MANUAL_SETUP.md

@@ -1,4 +1,4 @@
-# Setup for v6 React Native Storybook
+# Setup for v7 React Native Storybook
 
 Before getting into the guide consider using a template for a simpler setup process.
 
@@ -16,11 +16,6 @@ For react native cli you can use this [template](https://github.com/dannyhw/reac
 npx react-native init MyApp --template react-native-template-storybook
 ```
 
-You can also choose to use a bash script if you prefer, however it is more involved.
-
-- [expo setup script](https://gist.github.com/dannyhw/92b3ff0d6ccaead9df2820a507154b87)
-- [rn-cli setup script](https://gist.github.com/dannyhw/9b84973dcc6ff4fa2e86e32d571d294e)
-
 # Manual setup
 
 You may wish to setup everything yourself, you can use the following guide to do so.
@@ -30,18 +25,18 @@ You may wish to setup everything yourself, you can use the following guide to do
 **Expo**
 
 ```sh
-expo install @storybook/react-native @storybook/[email protected] @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 CLI**
 
 ```sh
-yarn add -D @storybook/react-native @storybook/[email protected] @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
 ```
 
 **IOS**
 
-If running on an IOS device make sure to run pod install first
+If running on an IOS device with rn cli make sure to run pod install first
 
 ```sh
 cd ios; pod install; cd ..;
@@ -51,118 +46,132 @@ cd ios; pod install; cd ..;
 
 ## .storybook
 
-Create a folder called `.storybook` with files: `main.js`, `preview.js`, `Storybook.tsx`
+Create a folder called `.storybook` with files: `main.js`, `preview.js`, `index.tsx`
 
 You can use this one-liner to quickly create those files:
+
 ```console
-mkdir .storybook && cd .storybook && touch main.js preview.js Storybook.tsx
+mkdir .storybook && touch .storybook/main.js .storybook/preview.js .storybook/index.tsx
 ```
 
-### main.js
+### .storybook/main.js
 
 ```js
 module.exports = {
-  stories: [
-    '../components/**/*.stories.?(ts|tsx|js|jsx)'
-  ],
+  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
   addons: [],
 };
 ```
 
-### preview.js
+### .storybook/preview.js
 
 ```js
-export const decorators = [];
-export const parameters = {};
+const preview = {
+  parameters: {},
+  decorators: [],
+};
+
+export default preview;
 ```
 
-### Storybook.tsx
+## package.json
+
+Add the following to the scripts in your package.json.
 
-```jsx
-import { getStorybookUI } from '@storybook/react-native';
+```json
+{
+  "scripts": {
+    "storybook-generate": "sb-rn-get-stories"
+  }
+}
+```
+
+### generate storybook.requires.js
 
-import './storybook.requires';
+run `yarn storybook-generate`
+
+### .storybook/index.tsx
+
+```jsx
+import { view } from './storybook.requires';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-const StorybookUIRoot = getStorybookUI({});
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
 
 export default StorybookUIRoot;
 ```
 
 ## metro.config.js
 
-Update your metro config to include sbmodern in the resolverMainFields. 
+Update your metro config to enable `transformer.unstable_allowRequireContext`
 
 **Expo**
 
-First create metro config file if you don't have it yet. 
+First create metro config file if you don't have it yet.
+
 ```sh
 npx expo customize metro.config.js
 ```
 
-Then add sbmodern to the start of the `resolver.resolverMainFields` list.
+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 defaultConfig = getDefaultConfig(__dirname);
 
-defaultConfig.resolver.resolverMainFields.unshift('sbmodern');
+defaultConfig.transformer.unstable_allowRequireContext = true;
 
 module.exports = defaultConfig;
 ```
 
 **React native**
 
 ```js
+const { generate } = require('@storybook/react-native/scripts/generate');
+
+generate({
+  configPath: path.resolve(__dirname, './.storybook'),
+});
+
 module.exports = {
   /* existing config */
-  resolver: {
-    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
+  transformer: {
+    unstable_allowRequireContext: true,
   },
 };
 ```
 
-## package.json
-
-Add the following to the scripts in your package.json, we use the name `prestart` to cause the script to run before every `yarn start`.
-
-```json
-{
-  "scripts": {
-    "prestart": "sb-rn-get-stories",
-    "storybook-watcher": "sb-rn-watcher",
-  }
-}
-```
-
-
-# Adding stories
-
-To render storybook update your App.tsx file to export the UI component.
-
-```js
-import StorybookUIRoot from './.storybook/Storybook';
-export { StorybookUIRoot as default };
-```
-
 **Add a stories file**
 
 In the main.js we created the path was set as `../components/**/*.stories.?(ts|tsx|js|jsx)` which matches any .stories file inside the components folder.
 
 Create a file called `Button.stories.tsx` in the components folder.
 
 ```jsx
-import {Button} from 'react-native';
+import { Button } from 'react-native';
 
 export default {
   title: 'React Native Button',
   component: Button,
+};
+
+export const Basic = {
   args: {
     title: 'Hello world',
   },
 };
-
-export const Basic = args => <Button {...args} />;
 ```
 
 This is a simple example you can do more by adding addons and exploring more features of storybook.
@@ -172,17 +181,11 @@ This is a simple example you can do more by adding addons and exploring more fea
 The only thing left to do is return Storybook's UI in your app entry point (such as `App.js`) like this:
 
 ```jsx
-export {default} from './.storybook'
+export { default } from './.storybook';
 ```
 
 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)
 
 # Run storybook
 
-To run storybook first generate the stories list:
-
-```sh
-yarn sb-rn-get-stories
-```
-
-Then you can run `yarn ios` or `yarn android` to run the app.
+Then you can run `yarn ios` or `yarn android` to run the app like normal.