@storybook/react-native 6.5.0-rc.0 → 6.5.0-rc.1

package/dist/hooks.d.ts

@@ -0,0 +1,22 @@
+import type { StoryContext } from '@storybook/csf';
+import type { ReactNativeFramework } from './types/types-6.0';
+/**
+ * Hook that returns a function to set the current story context.
+ */
+export declare function useSetStoryContext(): (args_0: StoryContext<ReactNativeFramework, import("@storybook/csf").Args> | ((prev: StoryContext<ReactNativeFramework, import("@storybook/csf").Args>) => StoryContext<ReactNativeFramework, import("@storybook/csf").Args>)) => void;
+/**
+ * Hook to read the current story context.
+ */
+export declare function useStoryContext(): StoryContext<ReactNativeFramework, import("@storybook/csf").Args>;
+/**
+ * Hook that reads the value of a specific story context parameter.
+ */
+export declare function useStoryContextParam<T = any>(name: string, defaultValue?: T): T;
+/**
+ * Hook that indicates if `storyId` is the currently selected story.
+ */
+export declare function useIsStorySelected(storyId: string): boolean;
+/**
+ * Hook that indicates if `title` is the currently selected story section.
+ */
+export declare function useIsStorySectionSelected(title: string): boolean;

package/dist/hooks.js

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+const storyContextAtom = atom(null);
+/**
+ * Hook that returns a function to set the current story context.
+ */
+export function useSetStoryContext() {
+    return useSetAtom(storyContextAtom);
+}
+/**
+ * Hook to read the current story context.
+ */
+export function useStoryContext() {
+    return useAtomValue(storyContextAtom);
+}
+/**
+ * Hook that reads the value of a specific story context parameter.
+ */
+export function useStoryContextParam(name, defaultValue) {
+    var _a;
+    const paramAtom = useMemo(() => atom(get => { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }), [name]);
+    return (_a = useAtomValue(paramAtom)) !== null && _a !== void 0 ? _a : defaultValue;
+}
+/**
+ * Hook that indicates if `storyId` is the currently selected story.
+ */
+export function useIsStorySelected(storyId) {
+    return useAtomValue(useMemo(() => atom(get => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }), [storyId]));
+}
+/**
+ * Hook that indicates if `title` is the currently selected story section.
+ */
+export function useIsStorySectionSelected(title) {
+    return useAtomValue(useMemo(() => atom(get => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
+}

package/dist/preview/View.js

@@ -7,12 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useState, useReducer } from 'react';
+import React, { useEffect, useReducer } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { toId } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { ThemeProvider } from 'emotion-theming';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { useSetStoryContext } from '../hooks';
 import OnDeviceUI from './components/OnDeviceUI';
 import { theme } from './components/Shared/theme';
 import StoryView from './components/StoryView';
@@ -88,7 +89,7 @@ export class View {
             const self = this;
             const appliedTheme = Object.assign(Object.assign({}, theme), params.theme);
             return () => {
-                const [context, setContext] = useState();
+                const setContext = useSetStoryContext();
                 const [, forceUpdate] = useReducer((x) => x + 1, 0);
                 useEffect(() => {
                     self._setStory = (newStory) => {
@@ -104,14 +105,15 @@ export class View {
                         self._preview.urlStore.selectionSpecifier = story;
                         self._preview.selectSpecifiedStory();
                     });
+                    // eslint-disable-next-line react-hooks/exhaustive-deps
                 }, []);
                 if (onDeviceUI) {
                     return (React.createElement(SafeAreaProvider, null,
                         React.createElement(ThemeProvider, { theme: appliedTheme },
-                            React.createElement(OnDeviceUI, { context: context, storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                            React.createElement(OnDeviceUI, { storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
                 }
                 else {
-                    return React.createElement(StoryView, { context: context });
+                    return React.createElement(StoryView, null);
                 }
             };
         };

package/dist/preview/components/OnDeviceUI/OnDeviceUI.d.ts

@@ -1,10 +1,7 @@
 import { StoryIndex } from '@storybook/client-api';
 import React from 'react';
-import { StoryContext } from '@storybook/csf';
-import { ReactNativeFramework } from 'src/types/types-6.0';
 export declare const IS_EXPO: boolean;
 interface OnDeviceUIProps {
-    context: StoryContext<ReactNativeFramework>;
     storyIndex: StoryIndex;
     url?: string;
     tabOpen?: number;
@@ -12,5 +9,5 @@ interface OnDeviceUIProps {
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
 }
-declare const _default: React.MemoExoticComponent<({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
 export default _default;

package/dist/preview/components/OnDeviceUI/OnDeviceUI.js

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
 import React, { useState, useRef } from 'react';
 import { Animated, Dimensions, Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
+import { useStoryContextParam } from '../../../hooks';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
@@ -25,6 +26,8 @@ const Preview = styled.View(flex, ({ disabled, theme }) => ({
     borderRightWidth: disabled ? 0 : 1,
     borderBottomWidth: disabled ? 0 : 1,
     borderColor: disabled ? 'transparent' : theme.previewBorderColor,
+    borderRadius: disabled ? 0 : 12,
+    overflow: 'hidden',
 }));
 const absolutePosition = {
     position: 'absolute',
@@ -36,19 +39,18 @@ const absolutePosition = {
 const styles = StyleSheet.create({
     expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
 });
-const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
-    var _a, _b;
+const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
     const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
     const [slideBetweenAnimation, setSlideBetweenAnimation] = useState(false);
-    const [previewDimensions, setPreviewDimensions] = useState({
+    const [previewDimensions, setPreviewDimensions] = useState(() => ({
         width: Dimensions.get('window').width,
         height: Dimensions.get('window').height,
-    });
+    }));
     const animatedValue = useRef(new Animated.Value(tabOpen));
     const wide = useWindowDimensions().width >= BREAKPOINT;
     const insets = useSafeAreaInsets();
     const [isUIVisible, setIsUIVisible] = useState(isUIHidden !== undefined ? !isUIHidden : true);
-    const handleToggleTab = (newTabOpen) => {
+    const handleToggleTab = React.useCallback((newTabOpen) => {
         if (newTabOpen === tabOpen) {
             return;
         }
@@ -64,8 +66,8 @@ const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoi
         if (newTabOpen === PREVIEW) {
             Keyboard.dismiss();
         }
-    };
-    const noSafeArea = (_b = (_a = context === null || context === void 0 ? void 0 : context.parameters) === null || _a === void 0 ? void 0 : _a.noSafeArea) !== null && _b !== void 0 ? _b : false;
+    }, [tabOpen]);
+    const noSafeArea = useStoryContextParam('noSafeArea', false);
     const previewWrapperStyles = [
         flex,
         getPreviewPosition({
@@ -88,10 +90,10 @@ const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoi
                         React.createElement(Animated.View, { style: previewStyles },
                             React.createElement(Preview, { disabled: tabOpen === PREVIEW },
                                 React.createElement(WrapperView, { style: [flex, wrapperMargin] },
-                                    React.createElement(StoryView, { context: context }))),
+                                    React.createElement(StoryView, null))),
                             tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: absolutePosition, onPress: () => handleToggleTab(PREVIEW) })) : null)),
                     React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide) },
-                        React.createElement(StoryListView, { storyIndex: storyIndex, selectedStoryContext: context })),
+                        React.createElement(StoryListView, { storyIndex: storyIndex })),
                     React.createElement(Panel, { style: [
                             getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
                             wrapperMargin,

package/dist/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js

@@ -4,10 +4,13 @@ import { View, StyleSheet } from 'react-native';
 // To avoid issues we use absolute positioned element with predefined screen size
 const AbsolutePositionedKeyboardAwareView = ({ onLayout, previewDimensions: { width, height }, children, }) => {
     const onLayoutHandler = ({ nativeEvent }) => {
-        onLayout({
-            height: nativeEvent.layout.height,
-            width: nativeEvent.layout.width,
-        });
+        const { height: layoutHeight, width: layoutWidth } = nativeEvent.layout;
+        if (layoutHeight !== height || layoutWidth !== width) {
+            onLayout({
+                height: layoutHeight,
+                width: layoutWidth,
+            });
+        }
     };
     return (React.createElement(View, { style: styles.container, onLayout: onLayoutHandler },
         React.createElement(View, { style: width === 0

package/dist/preview/components/Shared/icons.d.ts

@@ -3,3 +3,4 @@ export declare const GridIcon: () => JSX.Element;
 export declare const StoryIcon: ({ selected }: {
     selected: boolean;
 }) => JSX.Element;
+export declare const SearchIcon: () => JSX.Element;

package/dist/preview/components/Shared/icons.js

@@ -1,21 +1,34 @@
 import React from 'react';
 import { Image, StyleSheet } from 'react-native';
+const iconSources = {
+    grid: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdQTFRFAAAAIJ//Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Haf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqb9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hmz01QAAAD10Uk5TAAAEGjNefYqLXDUFAjSY0e79/9KZAghmyMkBQbz6vUIBBnD1cQcOo6Sp76qBePTHVOoC+RQTX4mCDZsBMmX5zDcAAAHcSURBVHic7ZrrcoIwEIVX8W5VpAiUaq33GyJqrfby/s9VacsCDojUJNNx9vzCTLLfZJdkHM4ChJTJSrl8oVj6s4qFckWqZiBed7V6Q24qV6op36uVVgxC042rAQh60LUIhPnY7rBCuOo8dZ9PGb3+gCXC1WA4CjPGE9YIV9NxiNHmwVCUWYAy4rIPV1PMmNnnxVCUoVf9LvOa+xp0f89HqCDzhbWMle3NsuPnWIt5MF7757zogfOxcqLOEGrtzVufm6U5Kz9iR3eHNgYObNWXc4svhQDs1C0GNTbHgZp/l6hnt5ECApqKQZu1471b93O1S1h6OQR2fsbqGcg28JeTtDIFBBwM28iCJON7lZSsVBAN3zFZCpRkkbgwDQQWWJQcvOK2LLYQCwPnoYDPS7aQJQYuwJ4/ZA8l/pASQQhCEIIQhCAEIQhBghB7nSj839xMnmtHQriJIAS5IYiQw3g7dxdBCEIQghCEIAQhyH+ECPmMLsQQKOMzY2vjgIHLYkwaIXaTEOMM+FuAIMbMhJYIW1aIwczaKj9EWuVCTH++7Quml8Qev0aMnl+qtxkfxnu4cYXLXiYhhpg2H4AP1g1L7a55ygDGrVdGZOuVKwFNZN/KSp/XtsPVpOpJ0C+2naE/XA0rpwAAAABJRU5ErkJggg==' },
+    storyWhite: { uri: 'data:image/png;base64,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' },
+    storyBlue: { uri: 'data:image/png;base64,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' },
+    search: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kd8rg1EYxz/baGLy88KFsjSuTEyJG2USamnNlOFme+2H2ubtfbe03Cq3K0rc+HXBX8Ctcq0UkZJbrokb1ut5t9Uke07PeT7ne87zdM5zwBpMKim9ZgBS6YwWmPI6F0KLTvsLVlqw00VrWNHVcb/fR1X7vMdixlu3Wav6uX+tYSWqK2CpEx5TVC0jPC3sW8+oJu8ItyuJ8IrwmXCfJhcUvjP1SIlfTY6X+NtkLRiYAGuzsDP+iyO/WEloKWF5Oa5UMquU72O+xBFNz89J7BbvRCfAFF6czDDJBMMMMirzMG489MuKKvkDxfxZ1iRXkVklh8YqcRJk6BM1K9WjEmOiR2UkyZn9/9tXPTbkKVV3eKH22TDee8C+DYW8YXwdGUbhGGxPcJmu5K8dwsiH6PmK5jqApk04v6pokV242IKORzWshYuSTdwai8HbKTSGoO0G6pdKPSvvc/IAwQ35qmvY24deOd+0/AMfDGfFB6WkFAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAqNJREFUWIXF2DmIFFEQBuBvVh3FC0EFdT3QaDORTUTFI9hQPAIRQxE0ETXwQBADD7zAaBEDTQxlIxExE4VFjTzYxQNFERUTr/VCvII3Q78Ze2Z6drvZH5ppmqq//q73XnXVlGRHFzZgJeZiDibjLd7gMa7gOr62wdsWStiEAfzNeH3HhYroXNGNu02CPsN9vMOfBjZHUc5DzBb8qAtwG7uxMMW+jB704kOd3w3MGImYg3WEQ9jehn8nrtVxPMeC4YjZ4v+3S8tIFmzD54jrnnAIMqNbWPcqwRFhU48EC/A04uzLyllSu4Fv5CCmimX4HXGvzeK0Se2eGe4yNcLpiH8QY1s5xHVmR85iYEJFSDXG5mbGXZHhnQLEVLEqinO5meGByHBPgYJKeF2J80XIWirimrGoQEFwLoq1PM2gQyhkhMr8vGBBg9H9nFaC3hYshtAVVNGZZtAhqZ5DhcupjTE+zaBDkplZhcthdnQ/kGbQIUnjTDm1Ck0QL9ODRoKeVO5LQjdYJFZXfj/hVSOjjZKj2FugmGn4WYlzq5nhJMlX/oMGxzEHHJa8+MlWxhcj46sFiFkiyc57TG/lME9tL7Q1RzFlYQNXuXdmdTweOX3C/JwEHYt4BzAuq2MZNyPnx1g6AiFlYer4FXH2tEsyEy8igl84of36tFgYkepHo2F1EwvxsI7oIVZk8J2KQ5INnHbta0bQqG+egktYV/f8lTAuDwoVfkj4HHRijVD44mw+ErLShbPR8/041UxYI7HrK6RZx+jq9RG71G7gvdrIVDOMFea1PuFPhEYiPqMfZ4S9mIaWotoddSYK81unUNHHC0f5AV5WgrTCXrXLNazlyxu5LV+eSBU1ZhQF9eObpFj2CIdh1BFn6s1oZqiKfqHtWYLz/wAUO/neFu9thgAAAABJRU5ErkJggg==' },
+};
 export const GridIcon = () => {
-    return (React.createElement(Image, { source: {
-            uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdQTFRFAAAAIJ//Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Haf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqb9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hmz01QAAAD10Uk5TAAAEGjNefYqLXDUFAjSY0e79/9KZAghmyMkBQbz6vUIBBnD1cQcOo6Sp76qBePTHVOoC+RQTX4mCDZsBMmX5zDcAAAHcSURBVHic7ZrrcoIwEIVX8W5VpAiUaq33GyJqrfby/s9VacsCDojUJNNx9vzCTLLfZJdkHM4ChJTJSrl8oVj6s4qFckWqZiBed7V6Q24qV6op36uVVgxC042rAQh60LUIhPnY7rBCuOo8dZ9PGb3+gCXC1WA4CjPGE9YIV9NxiNHmwVCUWYAy4rIPV1PMmNnnxVCUoVf9LvOa+xp0f89HqCDzhbWMle3NsuPnWIt5MF7757zogfOxcqLOEGrtzVufm6U5Kz9iR3eHNgYObNWXc4svhQDs1C0GNTbHgZp/l6hnt5ECApqKQZu1471b93O1S1h6OQR2fsbqGcg28JeTtDIFBBwM28iCJON7lZSsVBAN3zFZCpRkkbgwDQQWWJQcvOK2LLYQCwPnoYDPS7aQJQYuwJ4/ZA8l/pASQQhCEIIQhCAEIQhBghB7nSj839xMnmtHQriJIAS5IYiQw3g7dxdBCEIQghCEIAQhyH+ECPmMLsQQKOMzY2vjgIHLYkwaIXaTEOMM+FuAIMbMhJYIW1aIwczaKj9EWuVCTH++7Quml8Qev0aMnl+qtxkfxnu4cYXLXiYhhpg2H4AP1g1L7a55ygDGrVdGZOuVKwFNZN/KSp/XtsPVpOpJ0C+2naE/XA0rpwAAAABJRU5ErkJggg==',
-        }, style: styles.navigatorIcon }));
+    return (React.createElement(Image, { source: iconSources.grid, style: styles.sectionIcon }));
 };
-const whiteOutline = 'data:image/png;base64,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';
-const blueOutline = 'data:image/png;base64,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';
 export const StoryIcon = ({ selected }) => {
-    return (React.createElement(Image, { source: {
-            uri: selected ? whiteOutline : blueOutline,
-        }, style: styles.navigatorIcon }));
+    return (React.createElement(Image, { source: selected ? iconSources.storyWhite : iconSources.storyBlue, style: styles.storyIcon }));
+};
+export const SearchIcon = () => {
+    return (React.createElement(Image, { source: iconSources.search, style: styles.searchIcon }));
 };
 const styles = StyleSheet.create({
-    navigatorIcon: {
-        width: 18,
-        height: 18,
-        marginRight: 5,
+    sectionIcon: {
+        width: 10,
+        height: 10,
+        marginRight: 6,
+    },
+    storyIcon: {
+        width: 12,
+        height: 12,
+        marginRight: 6,
+    },
+    searchIcon: {
+        opacity: 0.5,
+        width: 16,
+        height: 16,
     },
 });

package/dist/preview/components/Shared/text.js

@@ -1,11 +1,17 @@
 import styled from '@emotion/native';
 export const Header = styled.Text(({ theme }) => ({
-    fontSize: 18,
+    fontSize: 16,
     color: theme.headerTextColor || 'black',
-}), ({ selected }) => (selected ? { fontWeight: 'bold' } : {}));
+    fontWeight: '500',
+}));
 export const Name = styled.Text({
     fontSize: 16,
-}, ({ selected, theme }) => selected ? { fontWeight: 'bold', color: 'white' } : { color: theme.headerTextColor || 'black' });
+}, ({ selected, theme }) => {
+    var _a, _b;
+    return selected
+        ? { fontWeight: '700', color: (_a = theme.listItemActiveTextColor) !== null && _a !== void 0 ? _a : 'white' }
+        : { color: (_b = theme.listItemTextColor) !== null && _b !== void 0 ? _b : 'black' };
+});
 export const Label = styled.Text(({ theme }) => ({
     fontSize: 18,
     color: theme.labelColor || 'black',

package/dist/preview/components/Shared/theme.d.ts

@@ -1,8 +1,10 @@
 export declare const theme: {
     backgroundColor: string;
     storyListBackgroundColor: string;
+    listItemTextColor: string;
     listItemActiveColor: string;
     listItemActiveTextColor: string;
+    sectionActiveColor: string;
     headerTextColor: string;
     labelColor: string;
     borderColor: string;

package/dist/preview/components/Shared/theme.js

@@ -1,8 +1,10 @@
 export const theme = {
     backgroundColor: 'white',
     storyListBackgroundColor: '#f6f9fc',
+    listItemTextColor: '#444444',
     listItemActiveColor: '#1ea7fd',
     listItemActiveTextColor: 'white',
+    sectionActiveColor: '#e0ebf5',
     headerTextColor: 'black',
     labelColor: 'black',
     borderColor: '#e6e6e6',

package/dist/preview/components/StoryListView/StoryListView.d.ts

@@ -1,10 +1,7 @@
-/// <reference types="react" />
 import { StoryIndex } from '@storybook/client-api';
-import { StoryContext } from '@storybook/csf';
-import { ReactNativeFramework } from 'src/types/types-6.0';
+import React from 'react';
 interface Props {
     storyIndex: StoryIndex;
-    selectedStoryContext: StoryContext<ReactNativeFramework>;
 }
-declare const StoryListView: ({ selectedStoryContext, storyIndex }: Props) => JSX.Element;
-export default StoryListView;
+declare const _default: React.MemoExoticComponent<({ storyIndex }: Props) => JSX.Element>;
+export default _default;

package/dist/preview/components/StoryListView/StoryListView.js

@@ -2,28 +2,44 @@ import styled from '@emotion/native';
 import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
 import React, { useMemo, useState } from 'react';
-import { SectionList, StyleSheet, View } from 'react-native';
+import { SectionList, StyleSheet, View, } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { GridIcon, StoryIcon } from '../Shared/icons';
+import { GridIcon, SearchIcon, StoryIcon } from '../Shared/icons';
 import { Header, Name } from '../Shared/text';
-const SearchBar = styled.TextInput({
-    borderRadius: 16,
-    borderWidth: 2,
-    fontSize: 16,
+import { useIsStorySelected, useIsStorySectionSelected } from '../../../hooks';
+const SearchInput = styled.TextInput(Object.assign({ fontSize: 16, padding: 0, paddingHorizontal: 36 }, StyleSheet.absoluteFillObject), ({ theme }) => ({
+    color: theme.buttonActiveTextColor,
+}));
+const SearchContainer = styled.View({
+    borderRadius: 100,
+    borderWidth: 1.5,
     marginVertical: 4,
     marginHorizontal: 8,
-    paddingVertical: 8,
-    paddingHorizontal: 15,
+    paddingVertical: 10,
+    paddingLeft: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
 }, ({ theme }) => ({
     borderColor: theme.borderColor,
-    color: theme.buttonActiveTextColor,
+    backgroundColor: theme.storyListBackgroundColor,
 }));
-const HeaderContainer = styled.View({
-    paddingVertical: 5,
-    paddingHorizontal: 5,
+const SearchBar = (props) => {
+    return (React.createElement(SearchContainer, null,
+        React.createElement(SearchIcon, null),
+        React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: 'none', autoComplete: 'off', autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: "#666", returnKeyType: "search" }))));
+};
+const HeaderContainer = styled.TouchableOpacity({
+    marginTop: 8,
+    marginHorizontal: 6,
+    padding: 6,
+    paddingHorizontal: 8,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
     flexDirection: 'row',
     alignItems: 'center',
-});
+}, ({ selected, theme }) => ({
+    backgroundColor: selected ? theme.sectionActiveColor : undefined,
+}));
 const StoryListContainer = styled.View(({ theme }) => (Object.assign(Object.assign({ top: 0 }, StyleSheet.absoluteFillObject), { 
     // for this to work I need to get the top margin from safeareview context
     // shadowColor: '#000',
@@ -35,18 +51,37 @@ const StoryListContainer = styled.View(({ theme }) => (Object.assign(Object.assi
     // shadowRadius: 1.41,
     // elevation: 2,
     borderRightWidth: StyleSheet.hairlineWidth, borderRightColor: theme.borderColor, backgroundColor: theme.storyListBackgroundColor })));
-const SectionHeader = React.memo(({ title, selected }) => (React.createElement(HeaderContainer, { key: title },
-    React.createElement(GridIcon, null),
-    React.createElement(Header, { selected: selected }, title))));
+const SectionHeader = React.memo(({ title, onPress }) => {
+    const selected = useIsStorySectionSelected(title);
+    return (React.createElement(HeaderContainer, { key: title, selected: selected, onPress: onPress, activeOpacity: 0.8 },
+        React.createElement(GridIcon, null),
+        React.createElement(Header, { selected: selected }, title)));
+});
 const ItemTouchable = styled.TouchableOpacity({
-    padding: 5,
-    paddingLeft: 40,
+    marginHorizontal: 6,
+    padding: 6,
+    paddingLeft: 24,
     flexDirection: 'row',
     alignItems: 'center',
-}, ({ selected, theme }) => { var _a; return (selected ? { backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd' } : {}); });
-const ListItem = React.memo(({ kind, title, selected, onPress }) => (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected },
-    React.createElement(StoryIcon, { selected: selected }),
-    React.createElement(Name, { selected: selected }, title))), (prevProps, nextProps) => prevProps.selected === nextProps.selected);
+}, ({ selected, sectionSelected, isLastItem, theme }) => {
+    var _a;
+    return {
+        backgroundColor: selected
+            ? ((_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd')
+            : sectionSelected
+                ? theme === null || theme === void 0 ? void 0 : theme.sectionActiveColor
+                : undefined,
+        borderBottomLeftRadius: isLastItem ? 6 : undefined,
+        borderBottomRightRadius: isLastItem ? 6 : undefined,
+    };
+});
+const ListItem = React.memo(({ storyId, kind, title, isLastItem, onPress }) => {
+    const selected = useIsStorySelected(storyId);
+    const sectionSelected = useIsStorySectionSelected(kind);
+    return (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected, sectionSelected: sectionSelected, isLastItem: isLastItem },
+        React.createElement(StoryIcon, { selected: selected }),
+        React.createElement(Name, { selected: selected }, title)));
+}, (prevProps, nextProps) => prevProps.storyId === nextProps.storyId);
 const getStories = (storyIndex) => {
     if (!storyIndex) {
         return [];
@@ -63,9 +98,13 @@ const getStories = (storyIndex) => {
 };
 const styles = StyleSheet.create({
     sectionList: { flex: 1 },
+    sectionListContentContainer: { paddingBottom: 6 },
 });
 const tabBarHeight = 40;
-const StoryListView = ({ selectedStoryContext, storyIndex }) => {
+function keyExtractor(item, index) {
+    return item.id + index;
+}
+const StoryListView = ({ storyIndex }) => {
     const insets = useSafeAreaInsets();
     const originalData = useMemo(() => getStories(storyIndex), [storyIndex]);
     const [data, setData] = useState(originalData);
@@ -92,14 +131,20 @@ const StoryListView = ({ selectedStoryContext, storyIndex }) => {
         const channel = addons.getChannel();
         channel.emit(Events.SET_CURRENT_STORY, { storyId });
     };
-    const safeStyle = { flex: 1, marginTop: insets.top, paddingBottom: insets.bottom + tabBarHeight };
+    const safeStyle = React.useMemo(() => {
+        return { flex: 1, marginTop: insets.top, paddingBottom: insets.bottom + tabBarHeight };
+    }, [insets]);
+    const renderItem = React.useCallback(({ item, index, section }) => {
+        return (React.createElement(ListItem, { storyId: item.id, title: item.name, kind: item.title, isLastItem: index === section.data.length - 1, onPress: () => changeStory(item.id) }));
+    }, []);
+    const renderSectionHeader = React.useCallback(({ section: { title, data } }) => (React.createElement(SectionHeader, { title: title, onPress: () => changeStory(data[0].id) })), []);
     return (React.createElement(StoryListContainer, null,
         React.createElement(View, { style: safeStyle },
-            React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", clearButtonMode: "while-editing", disableFullscreenUI: true, onChangeText: handleChangeSearchText, placeholder: "Filter", returnKeyType: "search" }),
+            React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", onChangeText: handleChangeSearchText, placeholder: "Find by name" }),
             React.createElement(SectionList
             // contentInset={{ bottom: insets.bottom, top: 0 }}
             , { 
                 // contentInset={{ bottom: insets.bottom, top: 0 }}
-                style: styles.sectionList, testID: "Storybook.ListView", renderItem: ({ item }) => (React.createElement(ListItem, { title: item.name, kind: item.title, selected: selectedStoryContext && item.id === selectedStoryContext.id, onPress: () => changeStory(item.id) })), renderSectionHeader: ({ section: { title } }) => (React.createElement(SectionHeader, { title: title, selected: selectedStoryContext && title === selectedStoryContext.title })), keyExtractor: (item, index) => item.id + index, sections: data, stickySectionHeadersEnabled: false }))));
+                style: styles.sectionList, contentContainerStyle: styles.sectionListContentContainer, testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false }))));
 };
-export default StoryListView;
+export default React.memo(StoryListView);

package/dist/preview/components/StoryView/StoryView.d.ts

@@ -1,8 +1,3 @@
-/// <reference types="react" />
-import type { StoryContext } from '@storybook/csf';
-import { ReactNativeFramework } from 'src/types/types-6.0';
-interface Props {
-    context?: StoryContext<ReactNativeFramework>;
-}
-declare const StoryView: ({ context }: Props) => JSX.Element;
-export default StoryView;
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

package/dist/preview/components/StoryView/StoryView.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
+import { useStoryContext } from '../../../hooks';
 const styles = StyleSheet.create({
     container: { flex: 1 },
     helpContainer: {
@@ -10,7 +11,8 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
     },
 });
-const StoryView = ({ context }) => {
+const StoryView = () => {
+    const context = useStoryContext();
     const id = context === null || context === void 0 ? void 0 : context.id;
     if (context && context.unboundStoryFn) {
         const { unboundStoryFn: StoryComponent } = context;
@@ -19,4 +21,4 @@ const StoryView = ({ context }) => {
     return (React.createElement(View, { style: styles.helpContainer },
         React.createElement(Text, null, "Please open navigator and select a story to preview.")));
 };
-export default StoryView;
+export default React.memo(StoryView);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.0-rc.0",
+  "version": "6.5.0-rc.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -63,6 +63,7 @@
     "commander": "^8.2.0",
     "emotion-theming": "^10.0.19",
     "glob": "^7.1.7",
+    "jotai": "^2.0.2",
     "prettier": "^2.4.1",
     "react-native-swipe-gestures": "^1.0.5",
     "util": "^0.12.4"
@@ -86,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9ce9d2794c2b7f1f3c177efb8563862255389f07"
+  "gitHead": "deada392ffc817d872b9e3fd7b00cbede4334e02"
 }

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

@@ -49,6 +49,55 @@ import \\"@storybook/addon-ondevice-actions/register\\";
   "
 `;
 
+exports[`loader writeRequires when there is a configuration object writes the story imports 1`] = `
+"
+      /* do not change this file, it is auto generated by storybook. */
+
+      import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
+
+      global.STORIES = [{\\"titlePrefix\\":\\"ComponentsPrefix\\",\\"files\\":\\"**/*.stories.tsx\\",\\"directory\\":\\"./scripts/mocks/configuration-objects/components\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/configuration-objects\\\\\\\\/components(?:\\\\\\\\/(?!\\\\\\\\.)(?:(?:(?!(?:^|\\\\\\\\/)\\\\\\\\.).)*?)\\\\\\\\/|\\\\\\\\/|$)(?!\\\\\\\\.)(?=.)[^/]*?\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+
+      import \\"@storybook/addon-ondevice-notes/register\\";
+import \\"@storybook/addon-ondevice-controls/register\\";
+import \\"@storybook/addon-ondevice-backgrounds/register\\";
+import \\"@storybook/addon-ondevice-actions/register\\";
+
+      import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\"
+
+      
+  import { decorators, parameters } from './preview';
+
+  if (decorators) {
+    if(__DEV__){
+      // stops the warning from showing on every HMR 
+      require('react-native').LogBox.ignoreLogs([
+        '\`clearDecorators\` is deprecated and will be removed in Storybook 7.0',
+      ]);
+    }
+    // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+    clearDecorators();
+    decorators.forEach((decorator) => addDecorator(decorator));
+  }
+
+  if (parameters) {
+    addParameters(parameters);
+  }
+
+
+      
+      try {
+        argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
+      } catch{}
+    
+
+      const getStories=() => {
+        return {\\"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx\\": require(\\"./components/FakeStory.stories.tsx\\")};
+      }
+
+      configure(getStories, module, false)
+  "
+`;
+
 exports[`loader writeRequires when there is a story glob and exclude paths globs writes the story imports 1`] = `
 "
       /* do not change this file, it is auto generated by storybook. */
@@ -91,7 +140,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx\\": require(\\"include-components/FakeStory.stories.tsx\\")};
+        return {\\"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx\\": require(\\"./include-components/FakeStory.stories.tsx\\")};
       }
 
       configure(getStories, module, false)

package/scripts/loader.js

@@ -72,6 +72,10 @@ function getPreviewExists({ configPath }) {
   return !!getFilePathExtension({ configPath }, 'preview');
 }
 
+function ensureRelativePathHasDot(relativePath) {
+  return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
+}
+
 function writeRequires({ configPath, absolute = false }) {
   const storybookRequiresLocation = path.resolve(cwd, configPath, 'storybook.requires.js');
 
@@ -81,13 +85,30 @@ function writeRequires({ configPath, absolute = false }) {
   const excludePaths = reactNativeOptions && reactNativeOptions.excludePaths;
   const normalizedExcludePaths = normalizeExcludePaths(excludePaths);
 
-  const storyPaths = main.stories.reduce((acc, storyGlob) => {
-    const paths = glob.sync(storyGlob, {
-      cwd: path.resolve(cwd, configPath),
-      absolute,
-      // default to always ignore (exclude) anything in node_modules
-      ignore: normalizedExcludePaths !== undefined ? normalizedExcludePaths : ['**/node_modules'],
-    });
+  const storiesSpecifiers = normalizeStories(main.stories, {
+    configDir: configPath,
+    workingDir: cwd,
+  });
+
+  const storyRequires = storiesSpecifiers.reduce((acc, specifier) => {
+    const paths = glob
+      .sync(specifier.files, {
+        cwd: path.resolve(cwd, specifier.directory),
+        absolute,
+        // default to always ignore (exclude) anything in node_modules
+        ignore: normalizedExcludePaths !== undefined ? normalizedExcludePaths : ['**/node_modules'],
+      })
+      .map((storyPath) => {
+        const pathWithDirectory = path.join(specifier.directory, storyPath);
+        const requirePath = absolute
+          ? storyPath
+          : ensureRelativePathHasDot(path.relative(configPath, pathWithDirectory));
+
+        const absolutePath = absolute ? requirePath : path.resolve(configPath, requirePath);
+        const pathRelativeToCwd = path.relative(cwd, absolutePath);
+
+        return `"./${pathRelativeToCwd}": require("${requirePath}")`;
+      });
     return [...acc, ...paths];
   }, []);
 
@@ -97,15 +118,7 @@ function writeRequires({ configPath, absolute = false }) {
 
   let previewJs = previewExists ? previewImports : '';
 
-  const storyRequires = storyPaths
-    .map((storyPath) => {
-      const storyPathToAbsolute = path.resolve(configPath, storyPath);
-      const relative = path.relative(cwd, storyPathToAbsolute);
-      return `"./${relative}": require("${storyPath}")`;
-    })
-    .join(',');
-
-  const path_obj_str = `{${storyRequires}}`;
+  const path_obj_str = `{${storyRequires.join(',')}}`;
 
   const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n');
   let enhancersImport = '';

package/scripts/loader.test.js

@@ -171,5 +171,15 @@ describe('loader', () => {
         );
       });
     });
+
+    describe('when there is a configuration object', () => {
+      it('writes the story imports', () => {
+        writeRequires({ configPath: 'scripts/mocks/configuration-objects' });
+        expect(pathMock).toEqual(
+          path.resolve(__dirname, 'mocks/configuration-objects/storybook.requires.js')
+        );
+        expect(fileContentMock).toMatchSnapshot();
+      });
+    });
   });
 });

package/scripts/mocks/configuration-objects/components/FakeComponent.tsx

@@ -0,0 +1 @@
+export const FakeComponent = () => null;

package/scripts/mocks/configuration-objects/components/FakeStory.stories.tsx

@@ -0,0 +1,9 @@
+import { FakeComponent } from './FakeComponent';
+
+export default {
+  component: FakeComponent,
+};
+
+export const Basic = {
+  args: {},
+};

package/scripts/mocks/configuration-objects/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  stories: [
+    {
+      files: '**/*.stories.tsx',
+      directory: './components',
+      titlePrefix: 'ComponentsPrefix',
+    },
+  ],
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};

package/scripts/mocks/configuration-objects/preview.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+
+export const decorators = [
+  (StoryFn) => (
+    <View style={styles.container}>
+      <StoryFn />
+    </View>
+  ),
+  withBackgrounds,
+];
+export const parameters = {
+  my_param: 'anything',
+  backgrounds: [
+    { name: 'plain', value: 'white', default: true },
+    { name: 'warm', value: 'hotpink' },
+    { name: 'cool', value: 'deepskyblue' },
+  ],
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 8, flex: 1 },
+});