@storybook/react-native-ui 9.0.9 → 9.0.14

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { State, StoriesHash } from 'storybook/internal/manager-api';
 import { Item, ExpandAction, CombinedDataset, Selection, SBUI } from '@storybook/react-native-ui-common';
 import { API_LoadedRefData, API_IndexHash } from 'storybook/internal/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoryContext, Args } from 'storybook/internal/csf';
 import { ReactRenderer } from '@storybook/react';
 
 interface NodeProps$1 {
@@ -105,271 +106,6 @@ interface SidebarProps extends API_LoadedRefData {
 }
 declare const Sidebar: React.NamedExoticComponent<SidebarProps>;
 
-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;
-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 ControlType = 'object' | 'boolean' | 'check' | 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select' | 'number' | 'range' | 'file' | 'color' | 'date' | 'text';
-type ConditionalTest = {
-    truthy?: boolean;
-} | {
-    exists: boolean;
-} | {
-    eq: any;
-} | {
-    neq: any;
-};
-type ConditionalValue = {
-    arg: string;
-} | {
-    global: string;
-};
-type Conditional = ConditionalValue & ConditionalTest;
-interface ControlBase {
-    [key: string]: any;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controltype
-     */
-    type?: ControlType;
-    disable?: boolean;
-}
-interface Report {
-    type: string;
-    version?: number;
-    result: unknown;
-    status: 'failed' | 'passed' | 'warning';
-}
-interface ReportingAPI {
-    reports: Report[];
-    addReport: (report: Report) => void;
-}
-type Control = ControlType | false | (ControlBase & (ControlBase | {
-    type: 'color';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors
-     */
-    presetColors?: string[];
-} | {
-    type: 'file';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlaccept
-     */
-    accept?: string;
-} | {
-    type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controllabels
-     */
-    labels?: {
-        [options: string]: string;
-    };
-} | {
-    type: 'number' | 'range';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlmax
-     */
-    max?: number;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlmin
-     */
-    min?: number;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlstep
-     */
-    step?: number;
-}));
-interface InputType {
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#control
-     */
-    control?: Control;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#description
-     */
-    description?: string;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#if
-     */
-    if?: Conditional;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#mapping
-     */
-    mapping?: {
-        [key: string]: any;
-    };
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#name
-     */
-    name?: string;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#options
-     */
-    options?: readonly any[];
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#table
-     */
-    table?: {
-        [key: string]: unknown;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tablecategory
-         */
-        category?: string;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue
-         */
-        defaultValue?: {
-            summary?: string;
-            detail?: string;
-        };
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabledisable
-         */
-        disable?: boolean;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tablesubcategory
-         */
-        subcategory?: string;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabletype
-         */
-        type?: {
-            summary?: string;
-            detail?: string;
-        };
-    };
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#type
-     */
-    type?: SBType | SBScalarType['name'];
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
-     *
-     * @deprecated Use `table.defaultValue.summary` instead.
-     */
-    defaultValue?: any;
-    [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;
-}
-interface 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;
-    mount(): Promise<Canvas>;
-    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 = 'story' | 'docs';
-interface Canvas {
-}
-interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForEnhancers<TRenderer, TArgs>, Required<StoryContextUpdate<TArgs>> {
-    loaded: Record<string, any>;
-    abortSignal: AbortSignal;
-    canvasElement: TRenderer['canvasElement'];
-    hooks: unknown;
-    originalStoryFn: StoryFn<TRenderer>;
-    viewMode: ViewMode;
-    step: StepFunction<TRenderer, TArgs>;
-    context: this;
-    canvas: Canvas;
-    mount: TRenderer['mount'];
-    reporting: ReportingAPI;
-}
-/** @deprecated Use {@link StoryContext} instead. */
-interface PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContext<TRenderer, TArgs> {
-}
-type StepLabel = string;
-type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>) => Promise<void> | void;
-type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void> | void;
-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>;
-
 declare const FullUI: SBUI;
 declare const Layout: ({ storyHash, story, children, }: {
     storyHash: API_IndexHash | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "9.0.9",
+  "version": "9.0.14",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,9 +58,9 @@
     "typescript": "~5.8.3"
   },
   "dependencies": {
-    "@storybook/react": "^9.0.9",
-    "@storybook/react-native-theming": "^9.0.9",
-    "@storybook/react-native-ui-common": "^9.0.9",
+    "@storybook/react": "9.0.14",
+    "@storybook/react-native-theming": "^9.0.14",
+    "@storybook/react-native-ui-common": "^9.0.14",
     "es-toolkit": "^1.38.0",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
@@ -75,7 +75,7 @@
     "react-native-reanimated": ">=3",
     "react-native-safe-area-context": "*",
     "react-native-svg": ">=14",
-    "storybook": "^9.0.9"
+    "storybook": "9.0.14"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6c247692ee0ede93df4e7df6e27e832e3e40a45d"
+  "gitHead": "19bb44781daef1f4bd1c5782c0a00d5b7fa5b943"
 }

package/src/Explorer.stories.tsx

@@ -2,6 +2,7 @@ import { Explorer } from './Explorer';
 import { mockDataset } from './mockdata';
 import type { RefType } from '@storybook/react-native-ui-common';
 import { View } from 'react-native';
+import { decorators } from './decorators';
 
 export default {
   component: Explorer,
@@ -10,6 +11,7 @@ export default {
   decorators: [
     (storyFn: any) => <View style={{ paddingHorizontal: 20 }}>{storyFn()}</View>,
     (storyFn: any) => <View style={{ paddingHorizontal: 20 }}>{storyFn()}</View>,
+    ...decorators,
   ],
 };
 

package/src/Layout.stories.tsx

@@ -2,23 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
 import { mockDataset } from './mockdata';
 import { Text, View } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import { LayoutProvider } from '@storybook/react-native-ui-common';
+import { decorators } from './decorators';
 
 const meta = {
   component: Layout,
-  decorators: [
-    (Story) => (
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <BottomSheetModalProvider>
-          <LayoutProvider>
-            <Story />
-          </LayoutProvider>
-        </BottomSheetModalProvider>
-      </GestureHandlerRootView>
-    ),
-  ],
+  decorators,
 } satisfies Meta<typeof Layout>;
 
 export default meta;

package/src/Layout.tsx

@@ -1,5 +1,5 @@
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import type { Args, StoryContext } from '@storybook/csf';
+import type { Args, StoryContext } from 'storybook/internal/csf';
 import type { ReactRenderer } from '@storybook/react';
 import { styled, ThemeProvider, useTheme } from '@storybook/react-native-theming';
 import {

package/src/SearchResults.stories.tsx

@@ -1,9 +1,11 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { SearchResults } from './SearchResults';
+import { decorators } from './decorators';
 
 const meta = {
   component: SearchResults,
   title: 'UI/SearchResults',
+  decorators,
 } satisfies Meta<typeof SearchResults>;
 
 export default meta;

package/src/Sidebar.stories.tsx

@@ -1,10 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import type { IndexHash, State } from 'storybook/internal/manager-api';
-import { Button, LayoutProvider, type RefType } from '@storybook/react-native-ui-common';
+import { Button, type RefType } from '@storybook/react-native-ui-common';
 import { Sidebar } from './Sidebar';
 import { DEFAULT_REF_ID } from './constants';
 import { mockDataset } from './mockdata';
+import { decorators } from './decorators';
 
 const index = mockDataset.withRoot as IndexHash;
 const storyId = 'root-1-child-a2--grandchild-a1-1';
@@ -23,7 +24,7 @@ const meta = {
     status: {},
     setSelection: () => {},
   },
-  decorators: [(storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>],
+  decorators,
 } satisfies Meta<typeof Sidebar>;
 
 export default meta;

package/src/StorybookLogo.stories.tsx

@@ -2,6 +2,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { StorybookLogo } from './StorybookLogo';
 import { Theme, theme } from '@storybook/react-native-theming';
 import { Text } from 'react-native';
+import { decorators } from './decorators';
 
 const meta = {
   component: StorybookLogo,
@@ -9,6 +10,7 @@ const meta = {
   args: {
     theme: null,
   },
+  decorators,
 } satisfies Meta<typeof StorybookLogo>;
 
 export default meta;

package/src/Tree.stories.tsx

@@ -6,6 +6,7 @@ import type { Dataset } from '@storybook/react-native-ui-common';
 import { index } from './mockdata.large';
 import { DEFAULT_REF_ID } from './constants';
 import { ScrollView, Text } from 'react-native';
+import { decorators } from './decorators';
 
 const customViewports = {
   sized: {
@@ -35,6 +36,7 @@ const meta = {
         <Story />
       </ScrollView>
     ),
+    ...decorators,
   ],
 } satisfies Meta<typeof Tree>;
 

package/src/TreeNode.stories.tsx

@@ -1,12 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
 import { View } from 'react-native';
+import { decorators } from './decorators';
 
 const meta = {
   title: 'UI/Sidebar/TreeNode',
   parameters: { layout: 'fullscreen' },
   component: StoryNode,
+  decorators,
 } satisfies Meta<typeof StoryNode>;
+
 export default meta;
 
 export const Types: StoryObj<typeof meta> = {

package/src/decorators.tsx

@@ -0,0 +1,21 @@
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { LayoutProvider } from '@storybook/react-native-ui-common';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { theme, ThemeProvider } from '@storybook/react-native-theming';
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <SafeAreaProvider>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <BottomSheetModalProvider>
+            <LayoutProvider>
+              <Story />
+            </LayoutProvider>
+          </BottomSheetModalProvider>
+        </GestureHandlerRootView>
+      </SafeAreaProvider>
+    </ThemeProvider>
+  ),
+];