@storybook/react-native 7.6.11 → 8.0.0-alpha.0

package/dist/index.d.ts

@@ -1,14 +1,70 @@
-import { N as NormalizedStoriesSpecifier, S as StorybookConfig$1 } from './index.d-da6c1de4.js';
+import { S as StoryIndex, P as PreparedStory, N as NormalizedStoriesSpecifier, a as StorybookConfig$1 } from './index.d-b039fbf0.js';
+import { Theme } from '@storybook/react-native-theming';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
-import { V as View } from './View-bd441663.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoryContext } from '@storybook/csf';
+import { PreviewWithSelection } from '@storybook/preview-api';
+import { ReactRenderer } from '@storybook/react';
+import { Channel } from '@storybook/channels';
 import 'file-system-cache';
-import '@babel/core';
 import 'http';
-import 'react/jsx-runtime';
-import '@storybook/csf';
-import '@storybook/preview-web';
-import '@storybook/react';
-import '@storybook/channels';
+
+interface Storage {
+    getItem: (key: string) => Promise<string | null>;
+    setItem: (key: string, value: string) => Promise<void>;
+}
+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>;
+    storage?: Storage;
+};
+declare class View {
+    _storyIndex: StoryIndex;
+    _setStory: (story: StoryContext<ReactRenderer>) => void;
+    _forceRerender: () => void;
+    _ready: boolean;
+    _preview: PreviewWithSelection<ReactRenderer>;
+    _asyncStorageStoryId: string;
+    _webUrl: string;
+    _storage: Storage;
+    _channel: Channel;
+    _idToPrepared: Record<string, PreparedStory<ReactRenderer>>;
+    constructor(preview: PreviewWithSelection<ReactRenderer>, channel: Channel);
+    _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<{
+        storySpecifier: string;
+        viewMode: string;
+    }>;
+    _getServerChannel: (params?: Partial<Params>) => Channel;
+    createPreparedStoryMapping: () => Promise<void>;
+    getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
+}
 
 declare function start({ annotations, storyEntries, }: {
     storyEntries: Array<NormalizedStoriesSpecifier & {

package/dist/index.js

@@ -51,7 +51,7 @@ var require_dist = __commonJS({
     var src_exports2 = {};
     __export2(src_exports2, { Addon_TypesEnum: () => Addon_TypesEnum2 });
     module2.exports = __toCommonJS2(src_exports2);
-    var Addon_TypesEnum2 = ((Addon_TypesEnum22) => (Addon_TypesEnum22.TAB = "tab", Addon_TypesEnum22.PANEL = "panel", Addon_TypesEnum22.TOOL = "tool", Addon_TypesEnum22.TOOLEXTRA = "toolextra", Addon_TypesEnum22.PREVIEW = "preview", Addon_TypesEnum22.experimental_PAGE = "page", Addon_TypesEnum22.experimental_SIDEBAR_BOTTOM = "sidebar-bottom", Addon_TypesEnum22.experimental_SIDEBAR_TOP = "sidebar-top", Addon_TypesEnum22.NOTES_ELEMENT = "notes-element", Addon_TypesEnum22))(Addon_TypesEnum2 || {});
+    var Addon_TypesEnum2 = ((Addon_TypesEnum22) => (Addon_TypesEnum22.TAB = "tab", Addon_TypesEnum22.PANEL = "panel", Addon_TypesEnum22.TOOL = "tool", Addon_TypesEnum22.TOOLEXTRA = "toolextra", Addon_TypesEnum22.PREVIEW = "preview", Addon_TypesEnum22.experimental_PAGE = "page", Addon_TypesEnum22.experimental_SIDEBAR_BOTTOM = "sidebar-bottom", Addon_TypesEnum22.experimental_SIDEBAR_TOP = "sidebar-top", Addon_TypesEnum22))(Addon_TypesEnum2 || {});
   }
 });
 
@@ -69,7 +69,6 @@ var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_csf2 = require("@storybook/csf");
 var import_preview_api3 = require("@storybook/preview-api");
 var import_manager_api3 = require("@storybook/manager-api");
-var import_preview_web = require("@storybook/preview-api/dist/preview-web");
 var import_channels2 = require("@storybook/channels");
 
 // src/View.tsx
@@ -1446,7 +1445,7 @@ var Wrapper = ({ panels, addonSelected }) => {
   const addonKeys = Object.keys(panels);
   const content = addonKeys.map((id) => {
     const selected = addonSelected === id;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container2, { selected, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.ScrollView, { contentContainerStyle: { padding: theme3.panel.paddingHorizontal }, children: panels[id].render({ active: selected, key: id }) }) }, id);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container2, { selected, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.ScrollView, { contentContainerStyle: { padding: theme3.panel.paddingHorizontal }, children: panels[id].render({ active: selected }) }) }, id);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: content });
 };
@@ -2049,17 +2048,21 @@ var View10 = class {
     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 () => {
-      }
+    const channel = new import_channels.Channel({
+      transport: new import_channels.WebsocketTransport({
+        url,
+        onError: (e) => {
+          console.log(`WebsocketTransport error ${JSON.stringify(e)}`);
+        }
+      }),
+      async: true
     });
+    return channel;
   };
   createPreparedStoryMapping = async () => {
     await Promise.all(
       Object.keys(this._storyIndex.entries).map(async (storyId) => {
-        this._idToPrepared[storyId] = await this._preview.storyStore.loadStory({ storyId });
+        this._idToPrepared[storyId] = await this._preview.loadStory({ storyId });
       })
     );
     console.log("Storybook: Finished building story index");
@@ -2074,6 +2077,7 @@ var View10 = class {
     this._storage = storage;
     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);
@@ -2089,7 +2093,7 @@ var View10 = class {
           if (!this._ready) {
             throw new Error("Storybook is not ready yet");
           }
-          return this._preview.storyStore.getStoryContext(this._idToPrepared[id]);
+          return this._preview.getStoryContext(this._idToPrepared[id]);
         },
         getSelection: () => {
           return this._preview.currentSelection;
@@ -2269,7 +2273,7 @@ function start({
     showStoryDuringRender: () => {
     }
   };
-  const urlStore = {
+  const selectionStore = {
     selection: null,
     selectionSpecifier: null,
     setQueryParams: () => {
@@ -2278,13 +2282,6 @@ function start({
       preview.selectionStore.selection = selection;
     }
   };
-  const preview = new import_preview_web.PreviewWithSelection(urlStore, previewView);
-  const view = new View10(preview, channel);
-  if (global) {
-    global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-    global.__STORYBOOK_PREVIEW__ = preview;
-    global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-  }
   const getProjectAnnotations = async () => (0, import_preview_api3.composeConfigs)([
     {
       renderToCanvas: (context) => {
@@ -2302,11 +2299,18 @@ function start({
     },
     ...annotations
   ]);
-  preview.initialize({
-    importFn: async (importPath) => importMap[importPath],
+  const preview = new import_preview_api3.PreviewWithSelection(
+    async (importPath) => importMap[importPath],
     getProjectAnnotations,
-    getStoryIndex: () => index
-  });
+    selectionStore,
+    previewView
+  );
+  const view = new View10(preview, channel);
+  if (global) {
+    global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+    global.__STORYBOOK_PREVIEW__ = preview;
+  }
+  preview.getStoryIndexFromServer = async () => index;
   view._storyIndex = index;
   return view;
 }

package/dist/preview.d.ts

@@ -1,7 +1,6 @@
 import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, b as StoryContextForEnhancers, c as Args, d as StrictArgTypes } from './index.d-da6c1de4.js';
+import { R as Renderer, b as StoryContextForEnhancers, A as Args, c as StrictArgTypes } from './index.d-b039fbf0.js';
 import 'file-system-cache';
-import '@babel/core';
 import 'http';
 
 declare const _default: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.11",
+  "version": "8.0.0-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -51,19 +51,17 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@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/channels": "8.0.0-alpha.15",
+    "@storybook/client-logger": "8.0.0-alpha.15",
+    "@storybook/core-common": "8.0.0-alpha.15",
+    "@storybook/core-events": "8.0.0-alpha.15",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "^7.6.10",
+    "@storybook/docs-tools": "8.0.0-alpha.15",
     "@storybook/global": "^5.0.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.11",
+    "@storybook/manager-api": "8.0.0-alpha.15",
+    "@storybook/preview-api": "8.0.0-alpha.15",
+    "@storybook/react": "8.0.0-alpha.15",
+    "@storybook/react-native-theming": "^8.0.0-alpha.0",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -75,7 +73,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "^7.6.10",
+    "@storybook/types": "8.0.0-alpha.15",
     "@types/jest": "^29.4.3",
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
@@ -97,5 +95,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5aed8e2d2ddc4fe76dd5f883aeb35e3fb48cae87"
+  "gitHead": "14ffe40751c45e03046117bec794fb4e34c56418"
 }

package/readme.md

@@ -79,7 +79,7 @@ Then set `transformer.unstable_allowRequireContext` to true and add the generate
 
 ```js
 // metro.config.js
-
+const path = require('path');
 const { getDefaultConfig } = require('expo/metro-config');
 
 const { generate } = require('@storybook/react-native/scripts/generate');
@@ -88,16 +88,18 @@ generate({
   configPath: path.resolve(__dirname, './.storybook'),
 });
 
-const defaultConfig = getDefaultConfig(__dirname);
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
 
-defaultConfig.transformer.unstable_allowRequireContext = true;
+config.transformer.unstable_allowRequireContext = true;
 
-module.exports = defaultConfig;
+module.exports = config;
 ```
 
 **React native**
 
 ```js
+const path = require('path');
 const { generate } = require('@storybook/react-native/scripts/generate');
 
 generate({
@@ -277,6 +279,11 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
         -- Disable KeyboardAvoidingView wrapping Storybook's view
     keyboardAvoidingViewVerticalOffset: Number (0)
         -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
+    storage: Object (undefined)
+        -- {getItem: (key: string) => Promise<string | null>;setItem: (key: string, value: string) => Promise<void>;}
+        -- Custom storage to be used instead of AsyncStorage
+    shouldPersistSelection: Boolean (true)
+        -- Stores last selected story in your devices storage.
 }
 ```
 

package/scripts/generate.js

@@ -29,14 +29,13 @@ function generate({ configPath, absolute = false, useJs = false }) {
     workingDir: cwd,
   });
 
-  // TODO refactor contexts and normalized stories to be one thing
   const normalizedStories = storiesSpecifiers.map((specifier) => {
     // TODO why????
     const reg = globToRegexp(`./${specifier.files}`);
 
     const { path: p, recursive: r, match: m } = toRequireContext(specifier);
 
-    const pathToStory = ensureRelativePathHasDot(path.relative(configPath, p));
+    const pathToStory = ensureRelativePathHasDot(path.posix.relative(configPath, p));
     return `{
       titlePrefix: "${specifier.titlePrefix}",
       directory: "${specifier.directory}",

package/V6.js

@@ -1 +0,0 @@
-export * from './dist/V6';

package/dist/V6.d.ts

@@ -1,37 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as Params } from './View-bd441663.js';
-import { ClientApi } from '@storybook/preview-api';
-import { L as LoaderFunction, A as Addon_StoryApi } from './index.d-da6c1de4.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';
-import 'file-system-cache';
-import '@babel/core';
-import 'http';
-
-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<ReactRenderer>;
-declare const addDecorator: C['addDecorator'];
-declare const addParameters: C['addParameters'];
-declare const addArgsEnhancer: C['addArgsEnhancer'];
-declare const addArgTypesEnhancer: C['addArgTypesEnhancer'];
-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 { Loadable, RequireContext, addArgTypesEnhancer, addArgsEnhancer, addDecorator, addParameters, configure, getStorybookUI, raw, storiesOf };