@storybook/react-native 7.6.8-alpha.0 → 7.6.10-alpha.0

package/dist/V6.d.ts

@@ -1,22 +1,28 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as Params, R as ReactNativeFramework } from './View-7a09870e.js';
-export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-7a09870e.js';
+import { P as Params } from './View-0aedc31a.js';
 import { ClientApi } from '@storybook/preview-api';
-import { b as Addon_StoryApi } from './index.d-82fc9196.js';
-export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-82fc9196.js';
+import { L as LoaderFunction, A as Addon_StoryApi } from './index.d-cff8c6fa.js';
 import { ReactNode } from 'react';
+import { ReactRenderer } from '@storybook/react';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import '@storybook/csf';
 import '@storybook/preview-web';
 import '@storybook/channels';
 
+interface RequireContext {
+    keys: () => string[];
+    (id: string): any;
+    resolve(id: string): string;
+}
+type Loadable = RequireContext | RequireContext[] | LoaderFunction;
+
 declare const configure: (loadable: any, m: {
     hot?: {
         accept?: () => void;
     };
 }) => void;
 
-type C = ClientApi<ReactNativeFramework>;
+type C = ClientApi<ReactRenderer>;
 declare const addDecorator: C['addDecorator'];
 declare const addParameters: C['addParameters'];
 declare const addArgsEnhancer: C['addArgsEnhancer'];
@@ -25,4 +31,4 @@ declare const raw: C['raw'];
 declare const storiesOf: (kind: string, m: any) => Addon_StoryApi<ReactNode>;
 declare const getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
 
-export { ReactNativeFramework, addArgTypesEnhancer, addArgsEnhancer, addDecorator, addParameters, configure, getStorybookUI, raw, storiesOf };
+export { Loadable, RequireContext, addArgTypesEnhancer, addArgsEnhancer, addDecorator, addParameters, configure, getStorybookUI, raw, storiesOf };

package/dist/V6.js

@@ -547,17 +547,16 @@ var createStore = () => {
   };
   const mountDependencies = (atom2, atomState, prevDependencies) => {
     const depSet = new Set(atomState.d.keys());
+    const maybeUnmountAtomSet = /* @__PURE__ */ new Set();
     prevDependencies == null ? void 0 : prevDependencies.forEach((_, a) => {
       if (depSet.has(a)) {
         depSet.delete(a);
         return;
       }
+      maybeUnmountAtomSet.add(a);
       const mounted = mountedMap.get(a);
       if (mounted) {
         mounted.t.delete(atom2);
-        if (canUnmountAtom(a, mounted)) {
-          unmountAtom(a);
-        }
       }
     });
     depSet.forEach((a) => {
@@ -568,6 +567,12 @@ var createStore = () => {
         mountAtom(a, atom2);
       }
     });
+    maybeUnmountAtomSet.forEach((a) => {
+      const mounted = mountedMap.get(a);
+      if (mounted && canUnmountAtom(a, mounted)) {
+        unmountAtom(a);
+      }
+    });
   };
   const flushPending = () => {
     let flushed;
@@ -667,11 +672,6 @@ if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
 }
 var 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;

package/dist/View-0aedc31a.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoryContext } from '@storybook/csf';
+import { PreviewWithSelection } from '@storybook/preview-web';
+import { Theme } from '@storybook/react-native-theming';
+import { S as StoryIndex } from './index.d-cff8c6fa.js';
+import { ReactRenderer } from '@storybook/react';
+import { Channel } from '@storybook/channels';
+
+type StoryKind = string;
+type StoryName = string;
+type InitialSelection = `${StoryKind}--${StoryName}` | {
+    /**
+     * Kind is the default export name or the storiesOf("name") name
+     */
+    kind: StoryKind;
+    /**
+     * Name is the named export or the .add("name") name
+     */
+    name: StoryName;
+};
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+type Params = {
+    onDeviceUI?: boolean;
+    enableWebsockets?: boolean;
+    query?: string;
+    host?: string;
+    port?: number;
+    secured?: boolean;
+    initialSelection?: InitialSelection;
+    shouldPersistSelection?: boolean;
+    tabOpen?: number;
+    isUIHidden?: boolean;
+    isSplitPanelVisible?: boolean;
+    shouldDisableKeyboardAvoidingView?: boolean;
+    keyboardAvoidingViewVerticalOffset?: number;
+    theme: DeepPartial<Theme>;
+};
+declare class View {
+    _storyIndex: StoryIndex;
+    _setStory: (story: StoryContext<ReactRenderer>) => void;
+    _forceRerender: () => void;
+    _ready: boolean;
+    _preview: PreviewWithSelection<ReactRenderer>;
+    _asyncStorageStoryId: string;
+    _webUrl: string;
+    _channel: Channel;
+    constructor(preview: PreviewWithSelection<ReactRenderer>, channel: Channel);
+    _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<{
+        storySpecifier: string;
+        viewMode: string;
+    }>;
+    _getServerChannel: (params?: Partial<Params>) => Channel;
+    getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
+}
+
+export { Params as P, View as V };

package/dist/{index.d-82fc9196.d.ts → index.d-cff8c6fa.d.ts}

@@ -88,9 +88,6 @@ interface StrictInputType extends InputType {
 interface Args {
     [name: string]: any;
 }
-type ArgTypes<TArgs = Args> = {
-    [name in keyof TArgs]: InputType;
-};
 type StrictArgTypes<TArgs = Args> = {
     [name in keyof TArgs]: StrictInputType;
 };
@@ -198,4 +195,4 @@ interface Addon_StoryApi<StoryFnReturnType = unknown> {
 }
 type Path = string;
 
-export { Args as A, NormalizedStoriesSpecifier as N, Parameters as P, Renderer as R, StoryContext as S, ArgTypes as a, Addon_StoryApi as b, StoryIndex as c, StoryContextForEnhancers as d, StrictArgTypes as e };
+export { Addon_StoryApi as A, LoaderFunction as L, NormalizedStoriesSpecifier as N, Renderer as R, StoryIndex as S, StoryContextForEnhancers as a, Args as b, StrictArgTypes as c };

package/dist/index.d.ts

@@ -1,12 +1,10 @@
-import { V as View } from './View-7a09870e.js';
-export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, R as ReactNativeFramework, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-7a09870e.js';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
-import { N as NormalizedStoriesSpecifier } from './index.d-82fc9196.js';
-export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-82fc9196.js';
+import { V as View } from './View-0aedc31a.js';
+import { N as NormalizedStoriesSpecifier } from './index.d-cff8c6fa.js';
 import 'react/jsx-runtime';
 import '@storybook/csf';
 import '@storybook/preview-web';
-import 'react';
+import '@storybook/react';
 import '@storybook/channels';
 
 declare function start({ annotations, storyEntries, }: {

package/dist/index.js

@@ -540,17 +540,16 @@ var createStore = () => {
   };
   const mountDependencies = (atom2, atomState, prevDependencies) => {
     const depSet = new Set(atomState.d.keys());
+    const maybeUnmountAtomSet = /* @__PURE__ */ new Set();
     prevDependencies == null ? void 0 : prevDependencies.forEach((_, a) => {
       if (depSet.has(a)) {
         depSet.delete(a);
         return;
       }
+      maybeUnmountAtomSet.add(a);
       const mounted = mountedMap.get(a);
       if (mounted) {
         mounted.t.delete(atom2);
-        if (canUnmountAtom(a, mounted)) {
-          unmountAtom(a);
-        }
       }
     });
     depSet.forEach((a) => {
@@ -561,6 +560,12 @@ var createStore = () => {
         mountAtom(a, atom2);
       }
     });
+    maybeUnmountAtomSet.forEach((a) => {
+      const mounted = mountedMap.get(a);
+      if (mounted && canUnmountAtom(a, mounted)) {
+        unmountAtom(a);
+      }
+    });
   };
   const flushPending = () => {
     let flushed;
@@ -660,11 +665,6 @@ if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
 }
 var 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;

package/dist/preview.d.ts

@@ -1,5 +1,5 @@
 import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, d as StoryContextForEnhancers, A as Args, e as StrictArgTypes } from './index.d-82fc9196.js';
+import { R as Renderer, a as StoryContextForEnhancers, b as Args, c as StrictArgTypes } from './index.d-cff8c6fa.js';
 
 declare const _default: {
     argTypesEnhancers: (<TRenderer extends Renderer>(context: StoryContextForEnhancers<TRenderer, Args>) => StrictArgTypes<Args>)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.8-alpha.0",
+  "version": "7.6.10-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -51,39 +51,40 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channel-websocket": "7.6.8",
-    "@storybook/channels": "7.6.8",
-    "@storybook/client-logger": "7.6.8",
-    "@storybook/core-client": "7.6.8",
-    "@storybook/core-common": "7.6.8",
-    "@storybook/core-events": "7.6.8",
+    "@storybook/channel-websocket": "^7.6.10",
+    "@storybook/channels": "^7.6.10",
+    "@storybook/client-logger": "^7.6.10",
+    "@storybook/core-client": "^7.6.10",
+    "@storybook/core-common": "^7.6.10",
+    "@storybook/core-events": "^7.6.10",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "7.6.8",
+    "@storybook/docs-tools": "^7.6.10",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.6.8",
-    "@storybook/preview-api": "7.6.8",
-    "@storybook/preview-web": "7.6.8",
-    "@storybook/react": "7.6.8",
-    "@storybook/react-native-theming": "^7.6.8-alpha.0",
+    "@storybook/manager-api": "^7.6.10",
+    "@storybook/preview-api": "^7.6.10",
+    "@storybook/preview-web": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-native-theming": "^7.6.10-alpha.0",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
     "glob": "^7.1.7",
     "prettier": "^2.4.1",
     "react-native-swipe-gestures": "^1.0.5",
+    "type-fest": "~2.19",
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "7.6.8",
+    "@storybook/types": "^7.6.10",
     "@types/jest": "^29.4.3",
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
-    "jotai": "^2.0.2",
+    "jotai": "^2.6.2",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.1",
     "tsup": "^7.2.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1",
@@ -97,5 +98,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1fd96da743fbaf0da60d5b1080892c877044d374"
+  "gitHead": "d48243ffb345570962154e0bdf610e3699202bed"
 }

package/readme.md

@@ -2,13 +2,13 @@
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-This readme is for the 6.5 version, [find the 5.3 readme here](https://github.com/storybookjs/react-native/tree/v5.3.25#readme)
+This readme is for the 7.6 version, you can find older versions by browsing the different version tags.
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
-> NOTE: `@storybook/react-native` requires atleast 6.5.14, please set other storybook packages (like @storybook/addons) to `^6.5.14` or newer
+> NOTE: `@storybook/react-native` requires atleast 7.6.9, if you install other storybook core packages they should be `^7.6.9` or newer.
 
-If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12) to see the open issues related to v6+.
+If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12) to see the open issues.
 
 ![picture of storybook](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png)
 
@@ -54,7 +54,7 @@ npx react-native init MyApp --template react-native-template-storybook
 Run init to setup your project with all the dependencies and configuration files:
 
 ```sh
-npx sb init --type react_native
+npx sb@latest init --type react_native
 ```
 
 The only thing left to do is return Storybook's UI in your app entry point (such as `App.js`) like this:
@@ -67,9 +67,9 @@ If you want to be able to swap easily between storybook and your app, have a loo
 
 If you want to add everything yourself check out the the manual guide [here](https://github.com/storybookjs/react-native/blob/next/MANUAL_SETUP.md).
 
-### Additional steps: Update your metro config
+#### Additional steps: Update your metro config
 
-We use the sbmodern resolver field in order to resolve the modern version of storybook packages. Doing this removes the polyfills that ship in commonjs modules and fixes multiple long standing issues such as the promises never resolving bug and more (caused by corejs promises polyfill).
+We require the unstable_allowRequireContext transformer option to enable dynamic story imports based on the stories glob in `main.js`. We can also call the storybook generate function from the metro config to automatically generate the `storybook.requires.js` file when metro runs.
 
 **Expo**
 
@@ -79,49 +79,59 @@ First create metro config file if you don't have it yet.
 npx expo customize metro.config.js
 ```
 
-Then add sbmodern to the start of the `resolver.resolverMainFields` list.
+Then set `transformer.unstable_allowRequireContext` to true and add the generate call here.
 
-```diff
+```js
 // metro.config.js
 
 const { getDefaultConfig } = require('expo/metro-config');
 
---module.exports = getDefaultConfig(__dirname);
-++const defaultConfig = getDefaultConfig(__dirname);
+const { generate } = require('@storybook/react-native/scripts/generate');
+
+generate({
+  configPath: path.resolve(__dirname, './.storybook'),
+});
 
-++defaultConfig.resolver.resolverMainFields.unshift('sbmodern');
+const defaultConfig = getDefaultConfig(__dirname);
 
-++module.exports = defaultConfig;
+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,
   },
 };
 ```
 
 ## Writing stories
 
-In v6 you can use the CSF syntax that looks like this:
+In storybook we use a syntax called CSF that looks like this:
 
 ```jsx
 import { MyButton } from './Button';
 
 export default {
-  title: 'components/MyButton',
   component: MyButton,
 };
 
-export const Basic = (args) => <MyButton {...args} />;
-
-Basic.args = {
-  text: 'Hello World',
-  color: 'purple',
+export const Basic = {
+  args: {
+    text: 'Hello World',
+    color: 'purple',
+  },
 };
 ```
 
@@ -167,7 +177,6 @@ For global decorators and parameters, you can add them to `preview.js` inside yo
 
 ```jsx
 // .storybook/preview.js
-
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 export const decorators = [
   withBackgrounds,

package/dist/View-7a09870e.d.ts

@@ -1,129 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Renderer, Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StoryContext } from '@storybook/csf';
-import { PreviewWithSelection } from '@storybook/preview-web';
-import { Theme } from '@storybook/react-native-theming';
-import { c as StoryIndex } from './index.d-82fc9196.js';
-import { ReactElement, ComponentType, JSXElementConstructor, ComponentProps } from 'react';
-import { Channel } from '@storybook/channels';
-
-type StoryFnReactReturnType = ReactElement<unknown>;
-
-interface ReactNativeFramework extends Renderer {
-    component: ComponentType<any>;
-    storyResult: StoryFnReactReturnType;
-}
-/**
- * For the common case where a component's stories are simple components that receives args as props:
- *
- * ```tsx
- * export default { ... } as ComponentMeta<typeof Button>;
- * ```
- */
-type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
-/**
- * For the common case where a (CSFv2) story is a simple component that receives args as props:
- *
- * ```tsx
- * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
- * ```
- */
-type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
-/**
- * For the common case where a (CSFv3) story is a simple component that receives args as props:
- *
- * ```tsx
- * const MyStory: ComponentStory<typeof Button> = {
- *   args: { buttonArg1: 'val' },
- * }
- * ```
- */
-type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
-/**
- * For the common case where a (CSFv2) story is a simple component that receives args as props:
- *
- * ```tsx
- * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
- * ```
- *
- * NOTE: this is an alias for `ComponentStoryFn`.
- * In Storybook v7, `ComponentStory` will alias `ComponentStoryObj`
- */
-type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;
-/**
- * Metadata to configure the stories for a component.
- *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
- */
-type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
-/**
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
-/**
- * Story function that represents a CSFv3 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
-/**
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- *
- * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
- *
- */
-type Story<TArgs = Args> = StoryFn<TArgs>;
-
-type StoryKind = string;
-type StoryName = string;
-type InitialSelection = `${StoryKind}--${StoryName}` | {
-    /**
-     * Kind is the default export name or the storiesOf("name") name
-     */
-    kind: StoryKind;
-    /**
-     * Name is the named export or the .add("name") name
-     */
-    name: StoryName;
-};
-type DeepPartial<T> = T extends object ? {
-    [P in keyof T]?: DeepPartial<T[P]>;
-} : T;
-type Params = {
-    onDeviceUI?: boolean;
-    enableWebsockets?: boolean;
-    query?: string;
-    host?: string;
-    port?: number;
-    secured?: boolean;
-    initialSelection?: InitialSelection;
-    shouldPersistSelection?: boolean;
-    tabOpen?: number;
-    isUIHidden?: boolean;
-    isSplitPanelVisible?: boolean;
-    shouldDisableKeyboardAvoidingView?: boolean;
-    keyboardAvoidingViewVerticalOffset?: number;
-    theme: DeepPartial<Theme>;
-};
-declare class View {
-    _storyIndex: StoryIndex;
-    _setStory: (story: StoryContext<ReactNativeFramework>) => void;
-    _forceRerender: () => void;
-    _ready: boolean;
-    _preview: PreviewWithSelection<ReactNativeFramework>;
-    _asyncStorageStoryId: string;
-    _webUrl: string;
-    _channel: Channel;
-    constructor(preview: PreviewWithSelection<ReactNativeFramework>, channel: Channel);
-    _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<{
-        storySpecifier: string;
-        viewMode: string;
-    }>;
-    _getServerChannel: (params?: Partial<Params>) => Channel;
-    getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
-}
-
-export { ComponentMeta as C, Meta as M, Params as P, ReactNativeFramework as R, StoryFnReactReturnType as S, View as V, ComponentStoryFn as a, ComponentStoryObj as b, ComponentStory as c, StoryFn as d, StoryObj as e, Story as f };