@storybook/react-native 7.6.10-alpha.1 → 7.6.10-alpha.4

package/dist/index.d.ts

@@ -1,6 +1,9 @@
+import { N as NormalizedStoriesSpecifier, S as StorybookConfig$1 } from './index.d-da6c1de4.js';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
-import { V as View } from './View-3a0f8584.js';
-import { N as NormalizedStoriesSpecifier } from './index.d-cff8c6fa.js';
+import { V as View } from './View-bd441663.js';
+import 'file-system-cache';
+import '@babel/core';
+import 'http';
 import 'react/jsx-runtime';
 import '@storybook/csf';
 import '@storybook/preview-web';
@@ -14,4 +17,9 @@ declare function start({ annotations, storyEntries, }: {
     annotations: any[];
 }): View;
 
-export { start };
+interface StorybookConfig {
+    stories: StorybookConfig$1['stories'];
+    addons: string[];
+}
+
+export { StorybookConfig, start };

package/dist/index.js

@@ -2007,6 +2007,7 @@ var View10 = class {
   _webUrl;
   _storage;
   _channel;
+  _idToPrepared = {};
   constructor(preview, channel) {
     this._preview = preview;
     this._channel = channel;
@@ -2055,6 +2056,14 @@ var View10 = class {
       }
     });
   };
+  createPreparedStoryMapping = async () => {
+    await Promise.all(
+      Object.keys(this._storyIndex.entries).map(async (storyId) => {
+        this._idToPrepared[storyId] = await this._preview.storyStore.loadStory({ storyId });
+      })
+    );
+    console.log("Storybook: Finished building story index");
+  };
   getStorybookUI = (params = {}) => {
     const {
       shouldPersistSelection = true,
@@ -2065,7 +2074,6 @@ 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);
@@ -2077,13 +2085,15 @@ var View10 = class {
     }
     import_manager_api2.addons.loadAddons({
       store: () => ({
-        fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
+        fromId: (id) => {
+          if (!this._ready) {
+            throw new Error("Storybook is not ready yet");
+          }
+          return this._preview.storyStore.getStoryContext(this._idToPrepared[id]);
+        },
         getSelection: () => {
           return this._preview.currentSelection;
         },
-        // @ts-ignore :) FIXME
-        // _channel: this._preview.channel,
-        // global.__STORYBOOK_ADDONS_CHANNEL__,
         _channel: this._channel
       })
     });
@@ -2096,11 +2106,16 @@ var View10 = class {
       const setContext = useSetStoryContext();
       const colorScheme = (0, import_react_native16.useColorScheme)();
       const [, forceUpdate] = (0, import_react16.useReducer)((x) => x + 1, 0);
+      const [ready, setReady] = (0, import_react16.useState)(false);
       const appliedTheme = (0, import_react16.useMemo)(
         () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming12.darkTheme : import_react_native_theming12.theme, params.theme ?? {}),
         [colorScheme]
       );
       (0, import_react16.useEffect)(() => {
+        this.createPreparedStoryMapping().then(() => {
+          this._ready = true;
+          setReady(true);
+        }).catch((e) => console.error(e));
         self._setStory = (newStory) => {
           setContext(newStory);
           if (shouldPersistSelection && !storage) {
@@ -2125,6 +2140,19 @@ var View10 = class {
           self._preview.selectSpecifiedStory();
         });
       }, []);
+      if (!ready) {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_native16.View,
+          {
+            style: {
+              ...import_react_native16.StyleSheet.absoluteFillObject,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native16.ActivityIndicator, { animating: true, size: "large" })
+          }
+        );
+      }
       if (onDeviceUI) {
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_theming12.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           OnDeviceUI_default,
@@ -2152,8 +2180,8 @@ function prepareStories({
     entries: {}
   };
   let importMap = {};
-  const makeTitle = (fileName, userTitle) => {
-    const title = (0, import_preview_api3.userOrAutoTitle)(fileName, storyEntries, userTitle);
+  const makeTitle = (fileName, specifier, userTitle) => {
+    const title = (0, import_preview_api3.userOrAutoTitleFromSpecifier)(fileName, specifier, userTitle);
     if (title) {
       return title.replace("./", "");
     } else {
@@ -2168,7 +2196,8 @@ function prepareStories({
       throw new Error("Could not generate title");
     }
   };
-  storyEntries.forEach(({ req, directory: root }) => {
+  storyEntries.forEach((specifier) => {
+    const { req, directory: root } = specifier;
     req.keys().forEach((filename) => {
       try {
         const fileExports = req(filename);
@@ -2182,7 +2211,7 @@ function prepareStories({
           if (!exportValue)
             return;
           const name = (0, import_csf2.storyNameFromExport)(key);
-          const title = makeTitle(filename, meta.title);
+          const title = makeTitle(filename, specifier, meta.title);
           if (title) {
             const id = (0, import_csf2.toId)(title, name);
             index.entries[id] = {

package/dist/preview.d.ts

@@ -1,5 +1,8 @@
 import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, a as StoryContextForEnhancers, b as Args, c as StrictArgTypes } from './index.d-cff8c6fa.js';
+import { R as Renderer, b as StoryContextForEnhancers, c as Args, d as StrictArgTypes } from './index.d-da6c1de4.js';
+import 'file-system-cache';
+import '@babel/core';
+import 'http';
 
 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.10-alpha.1",
+  "version": "7.6.10-alpha.4",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -51,7 +51,6 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channel-websocket": "^7.6.10",
     "@storybook/channels": "^7.6.10",
     "@storybook/client-logger": "^7.6.10",
     "@storybook/core-client": "^7.6.10",
@@ -64,7 +63,7 @@
     "@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.1",
+    "@storybook/react-native-theming": "^7.6.10-alpha.4",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -98,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8b2e96767cc361ae5382c5ba0ba9d6ea6112634f"
+  "gitHead": "43c2b5b932a0361178b010f90533069f14007677"
 }

package/scripts/__snapshots__/loader.test.js.snap

@@ -4,7 +4,7 @@ exports[`loader writeRequires when there are different file extensions writes th
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/file-extensions","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/file-extensions\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 
@@ -48,7 +48,7 @@ exports[`loader writeRequires when there is a configuration object writes the st
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"ComponentsPrefix","files":"**/*.stories.tsx","directory":"./scripts/mocks/configuration-objects/components","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/configuration-objects\\\\/components(?:\\\\/(?!\\\\.)(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/|\\\\/|$)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$"}]
 
@@ -92,7 +92,7 @@ exports[`loader writeRequires when there is a story glob and exclude paths globs
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/exclude-config-files","files":"**/*.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/exclude-config-files(?:\\\\/(?!\\\\.)(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/|\\\\/|$)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$"}]
 
@@ -136,7 +136,7 @@ exports[`loader writeRequires when there is a story glob writes the story import
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/all-config-files","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/all-config-files\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 
@@ -180,7 +180,7 @@ exports[`loader writeRequires when there is no preview does not add preview rela
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/no-preview","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/no-preview\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 

package/scripts/common.js

@@ -1,4 +1,4 @@
-const { globToRegexp } = require('@storybook/core-common');
+const { globToRegexp, serverRequire } = require('@storybook/core-common');
 const path = require('path');
 const fs = require('fs');
 
@@ -21,7 +21,7 @@ const toRequireContext = (specifier) => {
 function requireUncached(module) {
   delete require.cache[require.resolve(module)];
 
-  return require(module);
+  return serverRequire(module);
 }
 
 const supportedExtensions = ['js', 'jsx', 'ts', 'tsx', 'cjs', 'mjs'];

package/scripts/loader.js

@@ -153,7 +153,7 @@ function writeRequires({ configPath, absolute = false, v6RequireContext = false
   const fileContent = `
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       ${globalStories}
 

package/template/cli/index.ts

@@ -1,8 +1,6 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { view } from './storybook.requires';
 
-import './storybook.requires';
-
 const StorybookUIRoot = view.getStorybookUI({
   storage: {
     getItem: AsyncStorage.getItem,

package/template/cli/{main.js → main.ts}

@@ -1,4 +1,8 @@
-module.exports = {
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
   stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
   addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
 };
+
+export default main;

package/dist/index.d-cff8c6fa.d.ts

@@ -1,198 +0,0 @@
-declare global {
-	interface SymbolConstructor {
-		readonly observable: symbol;
-	}
-}
-
-interface SBBaseType {
-    required?: boolean;
-    raw?: string;
-}
-type SBScalarType = SBBaseType & {
-    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
-};
-type SBArrayType = SBBaseType & {
-    name: 'array';
-    value: SBType;
-};
-type SBObjectType = SBBaseType & {
-    name: 'object';
-    value: Record<string, SBType>;
-};
-type SBEnumType = SBBaseType & {
-    name: 'enum';
-    value: (string | number)[];
-};
-type SBIntersectionType = SBBaseType & {
-    name: 'intersection';
-    value: SBType[];
-};
-type SBUnionType = SBBaseType & {
-    name: 'union';
-    value: SBType[];
-};
-type SBOtherType = SBBaseType & {
-    name: 'other';
-    value: string;
-};
-type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
-
-type StoryId = string;
-type ComponentId = string;
-type ComponentTitle = string;
-type StoryName = string;
-/** @deprecated */
-type StoryKind = ComponentTitle;
-type Tag = string;
-interface StoryIdentifier {
-    componentId: ComponentId;
-    title: ComponentTitle;
-    /** @deprecated */
-    kind: ComponentTitle;
-    id: StoryId;
-    name: StoryName;
-    /** @deprecated */
-    story: StoryName;
-    tags: Tag[];
-}
-interface Parameters {
-    [name: string]: any;
-}
-type ConditionalTest = {
-    truthy?: boolean;
-} | {
-    exists: boolean;
-} | {
-    eq: any;
-} | {
-    neq: any;
-};
-type ConditionalValue = {
-    arg: string;
-} | {
-    global: string;
-};
-type Conditional = ConditionalValue & ConditionalTest;
-interface InputType {
-    name?: string;
-    description?: string;
-    defaultValue?: any;
-    type?: SBType | SBScalarType['name'];
-    if?: Conditional;
-    [key: string]: any;
-}
-interface StrictInputType extends InputType {
-    name: string;
-    type?: SBType;
-}
-interface Args {
-    [name: string]: any;
-}
-type StrictArgTypes<TArgs = Args> = {
-    [name in keyof TArgs]: StrictInputType;
-};
-interface Globals {
-    [name: string]: any;
-}
-type Renderer = {
-    /** What is the type of the `component` annotation in this renderer? */
-    component: unknown;
-    /** What does the story function return in this renderer? */
-    storyResult: unknown;
-    /** What type of element does this renderer render to? */
-    canvasElement: unknown;
-    T?: unknown;
-};
-interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryIdentifier {
-    component?: (TRenderer & {
-        T: any;
-    })['component'];
-    subcomponents?: Record<string, (TRenderer & {
-        T: any;
-    })['component']>;
-    parameters: Parameters;
-    initialArgs: TArgs;
-    argTypes: StrictArgTypes<TArgs>;
-}
-interface StoryContextUpdate<TArgs = Args> {
-    args?: TArgs;
-    globals?: Globals;
-    [key: string]: any;
-}
-type ViewMode$1 = 'story' | 'docs';
-interface StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForEnhancers<TRenderer, TArgs>, Required<StoryContextUpdate<TArgs>> {
-    hooks: unknown;
-    viewMode: ViewMode$1;
-    originalStoryFn: StoryFn<TRenderer>;
-}
-type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any> | void> | Record<string, any> | void;
-interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForLoaders<TRenderer, TArgs> {
-    loaded: Record<string, any>;
-    abortSignal: AbortSignal;
-    canvasElement: TRenderer['canvasElement'];
-}
-type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TRenderer['storyResult'];
-type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
-type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
-    T: TArgs;
-})['storyResult'];
-type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
-type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
-interface StoriesSpecifier {
-    /**
-     * When auto-titling, what to prefix all generated titles with (default: '')
-     */
-    titlePrefix?: string;
-    /**
-     * Where to start looking for story files
-     */
-    directory: string;
-    /**
-     * What does the filename of a story file look like?
-     * (a glob, relative to directory, no leading `./`)
-     * If unset, we use `** / *.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))` (no spaces)
-     */
-    files?: string;
-}
-type NormalizedStoriesSpecifier = Required<StoriesSpecifier> & {
-    importPathMatcher: RegExp;
-};
-interface BaseIndexEntry {
-    id: StoryId;
-    name: StoryName;
-    title: ComponentTitle;
-    tags?: Tag[];
-    importPath: Path;
-}
-type StoryIndexEntry = BaseIndexEntry & {
-    type: 'story';
-};
-type DocsIndexEntry = BaseIndexEntry & {
-    storiesImports: Path[];
-    type: 'docs';
-};
-type IndexEntry = StoryIndexEntry | DocsIndexEntry;
-interface StoryIndex {
-    v: number;
-    entries: Record<StoryId, IndexEntry>;
-}
-type Addon_ReturnTypeFramework<ReturnType> = {
-    component: any;
-    storyResult: ReturnType;
-    canvasElement: any;
-};
-type Addon_StoryFn<ReturnType = unknown> = StoryFn<Addon_ReturnTypeFramework<ReturnType>>;
-type Addon_DecoratorFunction<StoryFnReturnType = unknown> = DecoratorFunction<Addon_ReturnTypeFramework<StoryFnReturnType>>;
-type Addon_LoaderFunction = LoaderFunction<Addon_ReturnTypeFramework<unknown>>;
-type Addon_ClientApiReturnFn<StoryFnReturnType = unknown> = (...args: any[]) => Addon_StoryApi<StoryFnReturnType>;
-interface Addon_StoryApi<StoryFnReturnType = unknown> {
-    kind: StoryKind;
-    add: (storyName: StoryName, storyFn: Addon_StoryFn<StoryFnReturnType>, parameters?: Parameters) => Addon_StoryApi<StoryFnReturnType>;
-    addDecorator: (decorator: Addon_DecoratorFunction<StoryFnReturnType>) => Addon_StoryApi<StoryFnReturnType>;
-    addLoader: (decorator: Addon_LoaderFunction) => Addon_StoryApi<StoryFnReturnType>;
-    addParameters: (parameters: Parameters) => Addon_StoryApi<StoryFnReturnType>;
-    [k: string]: string | Addon_ClientApiReturnFn<StoryFnReturnType>;
-}
-type Path = string;
-
-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 };