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

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

@@ -2,85 +2,80 @@ 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 { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SectionList, StyleSheet } from 'react-native';
 import { GridIcon, SearchIcon, StoryIcon } from '../Shared/icons';
-import { Header, Name } from '../Shared/text';
-import { useIsStorySelected, useIsStorySectionSelected } from '../../../hooks';
-const SearchInput = styled.TextInput(Object.assign({ fontSize: 16, padding: 0, paddingHorizontal: 36 }, StyleSheet.absoluteFillObject), ({ theme }) => ({
-    color: theme.buttonActiveTextColor,
+import { Box } from '../Shared/layout';
+import { useIsStorySelected, useIsStorySectionSelected, useTheme } from '../../../hooks';
+const SectionHeaderText = styled.Text(({ theme }) => ({
+    fontSize: theme.storyList.fontSize,
+    color: theme.storyList.headerTextColor,
+    fontWeight: theme.storyList.headerFontWeight,
 }));
-const SearchContainer = styled.View({
-    borderRadius: 100,
-    borderWidth: 1.5,
-    marginVertical: 4,
-    marginHorizontal: 8,
-    paddingVertical: 10,
-    paddingLeft: 12,
+const StoryNameText = styled.Text(({ selected, theme }) => ({
+    fontSize: theme.storyList.fontSize,
+    fontWeight: selected ? theme.storyList.storySelectedFontWeight : theme.storyList.storyFontWeight,
+    color: selected ? theme.storyList.storySelectedTextColor : theme.storyList.storyTextColor,
+}));
+const SEARCH_ICON_SIZE = 24;
+const SearchInput = styled.TextInput(Object.assign({ padding: 0 }, StyleSheet.absoluteFillObject), ({ theme }) => ({
+    fontSize: theme.storyList.search.fontSize,
+    paddingStart: theme.storyList.search.paddingHorizontal + SEARCH_ICON_SIZE,
+    color: theme.storyList.search.textColor,
+}));
+const SearchContainer = styled.View(({ theme }) => ({
     flexDirection: 'row',
     alignItems: 'center',
-}, ({ theme }) => ({
-    borderColor: theme.borderColor,
-    backgroundColor: theme.storyListBackgroundColor,
+    margin: theme.panel.paddingHorizontal,
+    paddingVertical: theme.storyList.search.paddingVertical,
+    paddingStart: theme.storyList.search.paddingHorizontal,
+    borderColor: theme.storyList.search.borderColor,
+    borderWidth: theme.storyList.search.borderWidth,
+    borderRadius: theme.storyList.search.borderRadius,
+    backgroundColor: theme.storyList.search.backgroundColor,
 }));
 const SearchBar = (props) => {
+    const theme = useTheme();
     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" }))));
+        React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: theme.storyList.search.placeholderTextColor, 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,
+    marginTop: theme.storyList.sectionSpacing,
+    paddingHorizontal: theme.storyList.headerPaddingHorizontal,
+    paddingVertical: theme.storyList.headerPaddingVertical,
+    backgroundColor: selected ? theme.storyList.sectionActiveBackgroundColor : undefined,
+    borderTopLeftRadius: theme.storyList.sectionBorderRadius,
+    borderTopRightRadius: theme.storyList.sectionBorderRadius,
 }));
-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',
-    // shadowOffset: {
-    //   width: 0,
-    //   height: 1,
-    // },
-    // shadowOpacity: 0.2,
-    // shadowRadius: 1.41,
-    // elevation: 2,
-    borderRightWidth: StyleSheet.hairlineWidth, borderRightColor: theme.borderColor, backgroundColor: theme.storyListBackgroundColor })));
 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)));
+        React.createElement(SectionHeaderText, { selected: selected }, title)));
 });
 const ItemTouchable = styled.TouchableOpacity({
-    marginHorizontal: 6,
-    padding: 6,
-    paddingLeft: 24,
     flexDirection: 'row',
     alignItems: 'center',
-}, ({ 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,
-    };
-});
+}, ({ selected, sectionSelected, isLastItem, theme }) => ({
+    padding: theme.storyList.storyPaddingHorizontal,
+    paddingStart: theme.storyList.storyIndent,
+    backgroundColor: selected
+        ? theme.storyList.storySelectedBackgroundColor
+        : sectionSelected
+            ? theme.storyList.sectionActiveBackgroundColor
+            : undefined,
+    borderBottomLeftRadius: isLastItem ? theme.storyList.sectionBorderRadius : undefined,
+    borderBottomRightRadius: isLastItem ? theme.storyList.sectionBorderRadius : 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)));
+        React.createElement(StoryNameText, { selected: selected }, title)));
 }, (prevProps, nextProps) => prevProps.storyId === nextProps.storyId);
 const getStories = (storyIndex) => {
     if (!storyIndex) {
@@ -100,14 +95,13 @@ const styles = StyleSheet.create({
     sectionList: { flex: 1 },
     sectionListContentContainer: { paddingBottom: 6 },
 });
-const tabBarHeight = 40;
 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);
+    const theme = useTheme();
     const handleChangeSearchText = (text) => {
         const query = text.trim();
         if (!query) {
@@ -131,20 +125,18 @@ const StoryListView = ({ storyIndex }) => {
         const channel = addons.getChannel();
         channel.emit(Events.SET_CURRENT_STORY, { storyId });
     };
-    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", onChangeText: handleChangeSearchText, placeholder: "Find by name" }),
-            React.createElement(SectionList
-            // contentInset={{ bottom: insets.bottom, top: 0 }}
-            , { 
-                // contentInset={{ bottom: insets.bottom, top: 0 }}
-                style: styles.sectionList, contentContainerStyle: styles.sectionListContentContainer, testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false }))));
+    return (React.createElement(Box, { flex: true },
+        React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", onChangeText: handleChangeSearchText, placeholder: "Find by name" }),
+        React.createElement(SectionList, { style: styles.sectionList, contentContainerStyle: [
+                styles.sectionListContentContainer,
+                {
+                    paddingVertical: theme.panel.paddingVertical,
+                    paddingHorizontal: theme.panel.paddingHorizontal,
+                },
+            ], testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false })));
 };
 export default React.memo(StoryListView);

package/dist/types/types-6.0.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps, ComponentType, JSXElementConstructor, ReactElement } from 'react';
 import type { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-export declare type StoryFnReactReturnType = ReactElement<unknown>;
+export type StoryFnReactReturnType = ReactElement<unknown>;
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-export declare type ReactNativeFramework = {
+export type ReactNativeFramework = {
     component: ComponentType<any>;
     storyResult: StoryFnReactReturnType;
 };
@@ -13,7 +13,7 @@ export declare type ReactNativeFramework = {
  * export default { ... } as ComponentMeta<typeof Button>;
  * ```
  */
-export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
+export type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
 /**
  * For the common case where a (CSFv2) story is a simple component that receives args as props:
  *
@@ -21,7 +21,7 @@ export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXEle
  * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
  * ```
  */
-export declare type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
+export type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
 /**
  * For the common case where a (CSFv3) story is a simple component that receives args as props:
  *
@@ -31,7 +31,7 @@ export declare type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSX
  * }
  * ```
  */
-export declare type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
+export type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
 /**
  * For the common case where a (CSFv2) story is a simple component that receives args as props:
  *
@@ -42,25 +42,25 @@ export declare type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JS
  * NOTE: this is an alias for `ComponentStoryFn`.
  * In Storybook v7, `ComponentStory` will alias `ComponentStoryObj`
  */
-export declare type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;
+export type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export declare type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
@@ -69,4 +69,4 @@ export declare type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramewo
  * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
  *
  */
-export declare type Story<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;

package/dist/types/types.d.ts

@@ -8,7 +8,7 @@ export interface RequireContext {
     (id: string): any;
     resolve(id: string): string;
 }
-export declare type LoaderFunction = () => void | any[];
-export declare type Loadable = RequireContext | RequireContext[] | LoaderFunction;
+export type LoaderFunction = () => void | any[];
+export type Loadable = RequireContext | RequireContext[] | LoaderFunction;
 export type { RenderContext, RenderContextWithoutStoryContext };
-export declare type RenderStoryFunction = (context: RenderContext) => void;
+export type RenderStoryFunction = (context: RenderContext) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.0-rc.1",
+  "version": "6.5.0-rc.3",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -61,6 +61,7 @@
     "@storybook/preview-web": "^6.5.14",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
+    "deepmerge": "^4.3.0",
     "emotion-theming": "^10.0.19",
     "glob": "^7.1.7",
     "jotai": "^2.0.2",
@@ -69,10 +70,9 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@types/react": "^18.0.21",
-    "@types/react-native": "^0.70.4",
-    "babel-jest": "^26.6.3",
-    "jest": "^26.6.3",
+    "@types/react": "~18.0.27",
+    "babel-jest": "^29.4.3",
+    "jest": "^29.4.3",
     "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "deada392ffc817d872b9e3fd7b00cbede4334e02"
+  "gitHead": "f2a1a9100ba5ddf37fa59b58518751a525eb4788"
 }

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

@@ -6,14 +6,14 @@ exports[`loader writeRequires when there are different file extensions writes th
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/file-extensions\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/file-extensions\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/file-extensions","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/file-extensions\\\\/FakeStory\\\\.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 "@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 { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -42,7 +42,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/file-extensions/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/file-extensions/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
@@ -55,14 +55,14 @@ exports[`loader writeRequires when there is a configuration object writes the st
 
       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)$\\"}]
+      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 "@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 { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -91,7 +91,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx\\": require(\\"./components/FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx": require("./components/FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
@@ -104,14 +104,14 @@ exports[`loader writeRequires when there is a story glob and exclude paths globs
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/exclude-config-files\\",\\"files\\":\\"**/*.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/exclude-config-files(?:\\\\\\\\/(?!\\\\\\\\.)(?:(?:(?!(?:^|\\\\\\\\/)\\\\\\\\.).)*?)\\\\\\\\/|\\\\\\\\/|$)(?!\\\\\\\\.)(?=.)[^/]*?\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/exclude-config-files","files":"**/*.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/exclude-config-files(?:\\\\/(?!\\\\.)(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/|\\\\/|$)(?!\\\\.)(?=.)[^/]*?\\\\.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 "@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 { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -140,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)
@@ -153,14 +153,14 @@ exports[`loader writeRequires when there is a story glob writes the story import
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/all-config-files\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/all-config-files\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/all-config-files","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/all-config-files\\\\/FakeStory\\\\.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 "@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 { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -189,7 +189,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/all-config-files/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/all-config-files/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
@@ -202,14 +202,14 @@ exports[`loader writeRequires when there is no preview does not add preview rela
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/no-preview\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/no-preview\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/no-preview","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/no-preview\\\\/FakeStory\\\\.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 "@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 { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
 
@@ -220,7 +220,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/no-preview/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/no-preview/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-export interface Props {
-    index: number;
-    onPress: (id: number) => void;
-    style: ViewStyle;
-}
-declare const _default: React.MemoExoticComponent<({ index, onPress, style }: Props) => JSX.Element>;
-export default _default;

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import styled from '@emotion/native';
-import Button from './Button';
-import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
-const Container = styled.View(({ theme }) => ({
-    flexDirection: 'row',
-    paddingHorizontal: 8,
-    backgroundColor: theme.backgroundColor || 'white',
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    borderColor: theme.borderColor || '#e6e6e6',
-}));
-const Bar = ({ index, onPress, style }) => (React.createElement(Container, { style: style },
-    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
-    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
-    React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS")));
-export default React.memo(Bar);

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

@@ -1,10 +0,0 @@
-import React, { ReactNode } from 'react';
-interface Props {
-    id: number | string;
-    active: boolean;
-    onPress: (id: number | string) => void;
-    testID?: string;
-    children: ReactNode;
-}
-declare const _default: React.MemoExoticComponent<({ onPress, id, active, children, testID }: Props) => JSX.Element>;
-export default _default;

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import styled from '@emotion/native';
-const ActiveBorder = styled.View(({ active, theme }) => ({
-    backgroundColor: active ? theme.borderColor || '#e6e6e6' : 'transparent',
-    height: 3,
-}));
-const ButtonText = styled.Text(({ theme, active }) => ({
-    color: active ? theme.buttonActiveTextColor || '#444444' : theme.buttonTextColor || '#999999',
-    paddingHorizontal: 8,
-    paddingVertical: 10,
-    fontSize: 11,
-}));
-const Button = ({ onPress, id, active, children, testID }) => (React.createElement(TouchableOpacity, { testID: testID, onPress: () => onPress(id), activeOpacity: 0.8 },
-    React.createElement(ButtonText, { active: active }, children),
-    React.createElement(ActiveBorder, { active: active })));
-export default React.memo(Button);

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

@@ -1,3 +0,0 @@
-export declare const Header: any;
-export declare const Name: any;
-export declare const Label: any;

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

@@ -1,18 +0,0 @@
-import styled from '@emotion/native';
-export const Header = styled.Text(({ theme }) => ({
-    fontSize: 16,
-    color: theme.headerTextColor || 'black',
-    fontWeight: '500',
-}));
-export const Name = styled.Text({
-    fontSize: 16,
-}, ({ 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',
-}));