feat: v7 (storybookjs#502)

* make storage configurable
* fix: wrong ids created for multiple configs with titlePrefix (v7) (storybookjs#542)
* fix: race condition see storybookjs#543

including contributions from @stevoland and @patlux

Author: dannyhw

.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'],
   },
 };

.github/ISSUE_TEMPLATE.md

@@ -1,7 +1,8 @@
 If you are reporting a bug or requesting support, start here:
+
 ### Bug or support request summary
 
-_Please provide issue details here - What did you expect to happen? What happened instead?_ 
+_Please provide issue details here - What did you expect to happen? What happened instead?_
 
 ### Steps to reproduce
 
@@ -14,24 +15,25 @@ _(A screencast can be useful for visual bugs, but it is not a substitute for a t
 - @storybook/react x.x.x
 - @storybook/addon-something x.x.x
 
-### Affected platforms 
+### Affected platforms
 
 - _If UI related, please indicate browser, OS, and version_
 - _If dependency related, please include relevant version numbers_
 - _If developer tooling related, please include the platform information_
 
 ### Screenshots / Screencast / Code Snippets (Optional)
 
-```js
+```ts
 // code here
 ```
-End bug report support request - delete the rest below
 
+End bug report support request - delete the rest below
 
 If you are creating a issue to track work to be completed, start here:
+
 ### Work summary
 
-_Please provide a description of the work to be completed here - Include some context as to why something needs to be done and link any related tickets._ 
+_Please provide a description of the work to be completed here - Include some context as to why something needs to be done and link any related tickets._
 
 ### Where to start
 

.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;

CONTRIBUTING.md

@@ -241,7 +241,7 @@ The current manual release sequence is as follows:
 
 **NOTE:** The very first time you publish a scoped package (`@storybook/x`) you need to make sure that it's package.json contains the following
 
-```js
+```json
 "publishConfig": {
   "access": "public"
 }

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,138 +46,157 @@ 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.ts`, `preview.tsx`, `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.ts .storybook/preview.tsx .storybook/index.tsx
 ```
 
-### main.js
+### .storybook/main.ts
 
-```js
-module.exports = {
-  stories: [
-    '../components/**/*.stories.?(ts|tsx|js|jsx)'
-  ],
+```ts
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
   addons: [],
 };
+
+export default main;
 ```
 
-### preview.js
+### .storybook/preview.tsx
 
-```js
-export const decorators = [];
-export const parameters = {};
+```ts
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {},
+  decorators: [],
+};
+
+export default preview;
+```
+
+## package.json
+
+Add the following to the scripts in your package.json.
+
+```json
+{
+  "scripts": {
+    "storybook-generate": "sb-rn-get-stories"
+  }
+}
 ```
 
-### Storybook.tsx
+### generate storybook.requires.ts
+
+run `yarn storybook-generate`
 
-```jsx
-import { getStorybookUI } from '@storybook/react-native';
+### .storybook/index.tsx
 
-import './storybook.requires';
+```tsx
+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.
+In the `main.ts` 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';
+```tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from 'react-native';
 
-export default {
+const meta = {
   title: 'React Native Button',
   component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
   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.
 
 ## Render Storybook
 
-The only thing left to do is return Storybook's UI in your app entry point (such as `App.js`) like this:
+The only thing left to do is return Storybook's UI in your app entry point (such as `App.tsx`) like this:
 
-```jsx
-export {default} from './.storybook'
+```tsx
+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.