@storybook/react-native 7.6.7-alpha.1 → 7.6.9-alpha.0

package/dist/V6.d.ts

@@ -1,13 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as Params, R as ReactNativeFramework } from './View-acca1d49.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-acca1d49.js';
+import { h as Params, b as ReactNativeRenderer } from './View-63944515.js';
+export { D as Decorator, L as Loadable, e as Loader, M as Meta, g as Preview, P as PreviewError, a as RenderStoryFunction, R as RequireContext, f as StoryContext, c as StoryFn, S as StoryFnReactReturnType, d as StoryObj } from './View-63944515.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 { b as Addon_StoryApi } from './index.d-c716d0d7.js';
+export { a as ArgTypes, A as Args, P as Parameters, R as RenderContext, S as StrictArgs } from './index.d-c716d0d7.js';
 import { ReactNode } from 'react';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import '@storybook/csf';
 import '@storybook/preview-web';
+import 'type-fest';
 import '@storybook/channels';
 
 declare const configure: (loadable: any, m: {
@@ -16,7 +17,7 @@ declare const configure: (loadable: any, m: {
     };
 }) => void;
 
-type C = ClientApi<ReactNativeFramework>;
+type C = ClientApi<ReactNativeRenderer>;
 declare const addDecorator: C['addDecorator'];
 declare const addParameters: C['addParameters'];
 declare const addArgsEnhancer: C['addArgsEnhancer'];
@@ -25,4 +26,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 { ReactNativeRenderer, addArgTypesEnhancer, addArgsEnhancer, addDecorator, addParameters, configure, getStorybookUI, raw, storiesOf };

package/dist/V6.js

@@ -72,16 +72,17 @@ __export(V6_exports, {
 module.exports = __toCommonJS(V6_exports);
 
 // src/StartV6.tsx
-var import_channels = require("@storybook/channels");
-var import_core_events2 = __toESM(require("@storybook/core-events"));
+var import_channels2 = require("@storybook/channels");
+var import_core_events3 = __toESM(require("@storybook/core-events"));
 var import_global = require("@storybook/global");
 var import_manager_api3 = require("@storybook/manager-api");
-var import_preview_api = require("@storybook/preview-api");
+var import_preview_api3 = require("@storybook/preview-api");
 var import_preview_web = require("@storybook/preview-web");
 
 // src/View.tsx
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
+var import_preview_api2 = require("@storybook/preview-api");
 var import_manager_api2 = require("@storybook/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_react16 = require("react");
@@ -546,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) => {
@@ -567,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;
@@ -666,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;
@@ -988,6 +989,7 @@ var findFirstChildStory = (story) => {
 };
 
 // src/components/StoryListView/StoryListView.tsx
+var import_preview_api = require("@storybook/preview-api");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
   fontSize: theme3.storyList.fontSize,
@@ -1202,7 +1204,8 @@ var StoryListView = ({ storyIndex }) => {
     setData(filterNestedStories(originalData, query));
   };
   const changeStory = (storyId) => {
-    global.__STORYBOOK_ADDONS_CHANNEL__.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+    const channel = import_preview_api.addons.getChannel();
+    channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
   };
   const renderItem = import_react3.default.useCallback(({ item }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
@@ -1947,8 +1950,57 @@ var OnDeviceUI = ({
 var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 
 // src/View.tsx
+var import_channels = require("@storybook/channels");
+var import_core_events2 = __toESM(require("@storybook/core-events"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react_native16 = require("react-native");
+
+// src/rn-host-detect.js
+function getByRemoteConfig(hostname) {
+  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
+  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return { hostname, passed: false };
+  }
+  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+  if (constants) {
+    var serverHost = constants.ServerHost || hostname;
+    return { hostname: serverHost.split(":")[0], passed: true };
+  }
+  return { hostname, passed: false };
+}
+function getConstants(config) {
+  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
+}
+function getByRNRequirePolyfill(hostname) {
+  var NativeModules;
+  var PlatformConstants;
+  var AndroidConstants;
+  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
+  // TODO: Get NativeModules for RN >= 0.56
+  window.require.name === "metroRequire") {
+    return hostname;
+  }
+  NativeModules = window.require("NativeModules");
+  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
+    return hostname;
+  }
+  PlatformConstants = NativeModules.PlatformConstants;
+  AndroidConstants = NativeModules.AndroidConstants;
+  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+  return serverHost.split(":")[0];
+}
+function getHost(hostname) {
+  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return hostname;
+  }
+  var result = getByRemoteConfig(hostname);
+  if (result.passed) {
+    return result.hostname;
+  }
+  return getByRNRequirePolyfill(hostname);
+}
+
+// src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
 var View10 = class {
@@ -1996,25 +2048,33 @@ var View10 = class {
     }
     return { storySpecifier: "*", viewMode: "story" };
   };
-  // _getServerChannel = (params: Partial<Params> = {}) => {
-  //   const host = getHost(params.host || 'localhost');
-  //   const port = `:${params.port || 7007}`;
-  //   const query = params.query || '';
-  //   const websocketType = params.secured ? 'wss' : 'ws';
-  //   const url = `${websocketType}://${host}${port}/${query}`;
-  //   return createWebSocketChannel({
-  //     url,
-  //     async: true,
-  //     onError: async () => {},
-  //   });
-  // };
+  _getServerChannel = (params = {}) => {
+    const host = getHost(params.host || "localhost");
+    const port = `:${params.port || 7007}`;
+    const query = params.query || "";
+    const websocketType = params.secured ? "wss" : "ws";
+    const url = `${websocketType}://${host}${port}/${query}`;
+    return (0, import_channels.createWebSocketChannel)({
+      url,
+      async: true,
+      onError: async () => {
+      }
+    });
+  };
   getStorybookUI = (params = {}) => {
-    const {
-      shouldPersistSelection = true,
-      onDeviceUI = true
-      /* enableWebsockets = false  */
-    } = params;
+    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
     const initialStory = this._getInitialStory(params);
+    if (enableWebsockets) {
+      console.log("websockets enabled");
+      const channel = this._getServerChannel(params);
+      import_manager_api2.addons.setChannel(channel);
+      import_preview_api2.addons.setChannel(channel);
+      this._channel = channel;
+      this._preview.channel = channel;
+      this._preview.setupListeners();
+      channel.emit(import_core_events2.default.CHANNEL_CREATED);
+      this._preview.initializeWithStoryIndex(this._storyIndex);
+    }
     import_manager_api2.addons.loadAddons({
       store: () => ({
         fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
@@ -2143,10 +2203,10 @@ var render = (args, context) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, { ...args });
 };
 function start() {
-  const channel = new import_channels.Channel({ async: true });
+  const channel = new import_channels2.Channel({ async: true });
   import_manager_api3.addons.setChannel(channel);
-  channel.emit(import_core_events2.default.CHANNEL_CREATED);
-  const clientApi2 = import_global.global?.__STORYBOOK_CLIENT_API__ || new import_preview_api.ClientApi();
+  channel.emit(import_core_events3.default.CHANNEL_CREATED);
+  const clientApi2 = import_global.global?.__STORYBOOK_CLIENT_API__ || new import_preview_api3.ClientApi();
   const previewView = {
     prepareForStory: () => {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
@@ -2188,7 +2248,7 @@ function start() {
     import_global.global.__STORYBOOK_PREVIEW__ = preview;
     import_global.global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
   }
-  (0, import_preview_api.setGlobalRender)(render);
+  (0, import_preview_api3.setGlobalRender)(render);
   let initialized = false;
   function onStoriesChanged() {
     const storyIndex = clientApi2.getStoryIndex();
@@ -2198,7 +2258,7 @@ function start() {
   const view2 = new View10(preview, channel);
   return {
     view: view2,
-    forceReRender: () => channel.emit(import_core_events2.default.FORCE_RE_RENDER),
+    forceReRender: () => channel.emit(import_core_events3.default.FORCE_RE_RENDER),
     clientApi: clientApi2,
     preview,
     // This gets called each time the user calls configure (i.e. once per HMR)

package/dist/View-63944515.d.ts

@@ -0,0 +1,111 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Renderer, StoryContext as StoryContext$2 } from '@storybook/csf';
+import { PreviewWithSelection } from '@storybook/preview-web';
+import { Theme } from '@storybook/react-native-theming';
+import { L as LoaderFunction, R as RenderContext, A as Args, C as ComponentAnnotations, c as AnnotatedStoryFn, d as ArgsStoryFn, e as ArgsFromMeta, f as StoryAnnotations, S as StrictArgs, D as DecoratorFunction, g as StoryContext$1, h as ProjectAnnotations, i as StoryIndex } from './index.d-c716d0d7.js';
+import { ComponentType, ComponentProps } from 'react';
+import { Simplify, SetOptional } from 'type-fest';
+import { Channel } from '@storybook/channels';
+
+interface PreviewError {
+    message?: string;
+    stack?: string;
+}
+interface RequireContext {
+    keys: () => string[];
+    (id: string): any;
+    resolve(id: string): string;
+}
+type Loadable = RequireContext | RequireContext[] | LoaderFunction;
+
+type RenderStoryFunction = (context: RenderContext) => void;
+type StoryFnReactReturnType = JSX.Element;
+interface ReactNativeRenderer extends Renderer {
+    component: ComponentType<any>;
+    storyResult: StoryFnReactReturnType;
+}
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? ComponentAnnotations<ReactNativeRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactNativeRenderer, TCmpOrArgs>;
+/**
+ * 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<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? AnnotatedStoryFn<ReactNativeRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactNativeRenderer, TCmpOrArgs>;
+/**
+ * Story object that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
+    {
+        render?: ArgsStoryFn<ReactNativeRenderer, any>;
+        component?: infer Component;
+        args?: infer DefaultArgs;
+    }
+] ? Simplify<(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) & ArgsFromMeta<ReactNativeRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<ReactNativeRenderer, AddMocks<TArgs, DefaultArgs>, SetOptional<TArgs, keyof TArgs & keyof DefaultArgs>> : never : TMetaOrCmpOrArgs extends ComponentType<any> ? StoryAnnotations<ReactNativeRenderer, ComponentProps<TMetaOrCmpOrArgs>> : StoryAnnotations<ReactNativeRenderer, TMetaOrCmpOrArgs>;
+type AddMocks<TArgs, DefaultArgs> = Simplify<{
+    [T in keyof TArgs]: T extends keyof DefaultArgs ? DefaultArgs[T] extends (...args: any) => any & {
+        mock: {};
+    } ? DefaultArgs[T] : TArgs[T] : TArgs[T];
+}>;
+type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactNativeRenderer, TArgs>;
+type Loader<TArgs = StrictArgs> = LoaderFunction<ReactNativeRenderer, TArgs>;
+type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactNativeRenderer, TArgs>;
+type Preview = ProjectAnnotations<ReactNativeRenderer>;
+
+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$2<ReactNativeRenderer>) => void;
+    _forceRerender: () => void;
+    _ready: boolean;
+    _preview: PreviewWithSelection<ReactNativeRenderer>;
+    _asyncStorageStoryId: string;
+    _webUrl: string;
+    _channel: Channel;
+    constructor(preview: PreviewWithSelection<ReactNativeRenderer>, 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 { Decorator as D, Loadable as L, Meta as M, PreviewError as P, RequireContext as R, StoryFnReactReturnType as S, View as V, RenderStoryFunction as a, ReactNativeRenderer as b, StoryFn as c, StoryObj as d, Loader as e, StoryContext as f, Preview as g, Params as h };