fix: only apply story wrapper to full ui (#755)

* fix: only apply story wrapper to full ui

* fix

Author: dannyhw

examples/expo-example/.maestro/baseline/ActionExample-Actions---Another-Action.png

@@ -178,6 +178,160 @@ name: Take screenshots of all Storybook stories
     id: 'inputexample-textinput--basic'
 - takeScreenshot: '.maestro/screenshots/InputExample-TextInput---Basic'
 
+# Story LoginDocsExample-Button - Disabled
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-button--disabled'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-button--disabled'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-Button---Disabled'
+
+# Story LoginDocsExample-Button - Loading
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-button--loading'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-button--loading'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-Button---Loading'
+
+# Story LoginDocsExample-Button - Long Title
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-button--long-title'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-button--long-title'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-Button---Long-Title'
+
+# Story LoginDocsExample-Button - Primary
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-button--primary'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-button--primary'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-Button---Primary'
+
+# Story LoginDocsExample-Button - Secondary
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-button--secondary'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-button--secondary'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-Button---Secondary'
+
+# Story LoginDocsExample-Button - Secondary Disabled
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-button--secondary-disabled'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-button--secondary-disabled'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-Button---Secondary-Disabled'
+
+# Story LoginDocsExample-Button - Secondary Loading
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-button--secondary-loading'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-button--secondary-loading'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-Button---Secondary-Loading'
+
+# Story LoginDocsExample-LoginForm - Default
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-loginform--default'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-loginform--default'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-LoginForm---Default'
+
+# Story LoginDocsExample-LoginForm - Email Error Only
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-loginform--email-error-only'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-loginform--email-error-only'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-LoginForm---Email-Error-Only'
+
+# Story LoginDocsExample-LoginForm - Loading
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-loginform--loading'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-loginform--loading'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-LoginForm---Loading'
+
+# Story LoginDocsExample-LoginForm - Long Errors
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-loginform--long-errors'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-loginform--long-errors'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-LoginForm---Long-Errors'
+
+# Story LoginDocsExample-LoginForm - Password Error Only
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-loginform--password-error-only'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-loginform--password-error-only'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-LoginForm---Password-Error-Only'
+
+# Story LoginDocsExample-LoginForm - With Errors
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-loginform--with-errors'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-loginform--with-errors'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-LoginForm---With-Errors'
+
+# Story LoginDocsExample-TextInput - Default
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--default'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--default'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---Default'
+
+# Story LoginDocsExample-TextInput - Empty State
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--empty-state'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--empty-state'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---Empty-State'
+
+# Story LoginDocsExample-TextInput - Filled
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--filled'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--filled'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---Filled'
+
+# Story LoginDocsExample-TextInput - Long Error Message
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--long-error-message'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--long-error-message'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---Long-Error-Message'
+
+# Story LoginDocsExample-TextInput - Long Label
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--long-label'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--long-label'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---Long-Label'
+
+# Story LoginDocsExample-TextInput - Password
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--password'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--password'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---Password'
+
+# Story LoginDocsExample-TextInput - Playground
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--playground'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--playground'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---Playground'
+
+# Story LoginDocsExample-TextInput - With Error
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--with-error'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--with-error'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---With-Error'
+
+# Story LoginDocsExample-TextInput - With Label
+- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=logindocsexample-textinput--with-label'
+- waitForAnimationToEnd
+- assertVisible:
+    id: 'logindocsexample-textinput--with-label'
+- takeScreenshot: '.maestro/screenshots/LoginDocsExample-TextInput---With-Label'
+
 # Story NestingExample-ChatMessage - Message First
 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-chatmessage--message-first'
 - waitForAnimationToEnd

examples/expo-example/.maestro/baseline/ActionExample-Actions---Basic.png

@@ -1,8 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { theme, ThemeProvider } from '@storybook/react-native-theming';
 // import { LiteUI } from '@storybook/react-native-ui-lite';
-import { SafeAreaView, StatusBar } from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaView, StatusBar, View } from 'react-native';
+
 import { view } from './storybook.requires';
 
 const isScreenshotTesting = process.env.EXPO_PUBLIC_SCREENSHOT_TESTING === 'true';
@@ -14,44 +13,22 @@ const StorybookUIRoot = view.getStorybookUI({
     setItem: AsyncStorage.setItem,
   },
   enableWebsockets: false,
-  // onDeviceUI: !isScreenshotTesting,
   host: 'localhost',
   port: 7007,
-  // host: '192.x.x.x',
-  // port: 7007,
-
-  // initialSelection: { kind: 'TextInput', name: 'Basic' },
-  // onDeviceUI: true,
-  // host: '192.168.1.69',
-  /*   theme: {
-    brand: {
-      image: {
-        uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
-        width: 25,
-        height: 25,
-      } ,
-    },
-  }, */
 
-  onDeviceUI: true,
   // CustomUIComponent: LiteUI,
+  CustomUIComponent: isScreenshotTesting
+    ? ({ children, story }) => {
+        return (
+          <SafeAreaView style={{ flex: 1 }}>
+            <StatusBar hidden />
+            <View style={{ flex: 1 }} accessibilityLabel={story?.id} testID={story?.id} accessible>
+              {children}
+            </View>
+          </SafeAreaView>
+        );
+      }
+    : undefined,
 });
 
-const StorybookUI = () => {
-  if (isScreenshotTesting) {
-    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <StatusBar hidden={isScreenshotTesting} />
-        <SafeAreaProvider style={{ flex: 1 }}>
-          <ThemeProvider theme={theme}>
-            <StorybookUIRoot />
-          </ThemeProvider>
-        </SafeAreaProvider>
-      </SafeAreaView>
-    );
-  }
-
-  return <StorybookUIRoot />;
-};
-
-export default StorybookUI;
+export default StorybookUIRoot;

examples/expo-example/.maestro/baseline/BackgroundExample-BackgroundCsf---Basic.png

@@ -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,
   ],
 };
 

examples/expo-example/.maestro/baseline/ControlExamples-Array---Basic.png

@@ -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;

examples/expo-example/.maestro/baseline/ControlExamples-Boolean---Basic.png

@@ -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;

examples/expo-example/.maestro/baseline/ControlExamples-Boolean---On.png

@@ -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;

examples/expo-example/.maestro/baseline/ControlExamples-Color---Color-Example.png

@@ -2,13 +2,15 @@ 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,
   title: 'UI/StorybookLogo',
   args: {
     theme: null,
   },
+  decorators,
 } satisfies Meta<typeof StorybookLogo>;
 
 export default meta;

examples/expo-example/.maestro/baseline/ControlExamples-ControlExample---Example.png

@@ -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>;
 

examples/expo-example/.maestro/baseline/ControlExamples-Date---Basic.png

@@ -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> = {

examples/expo-example/.maestro/baseline/ControlExamples-Number---Basic.png

@@ -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>
+  ),
+];

examples/expo-example/.maestro/baseline/ControlExamples-Number---Range.png

@@ -380,7 +380,7 @@ export class View {
               storage={storage}
               theme={appliedTheme as Theme}
             >
-              <StoryView />
+              <StoryView useWrapper={false} />
             </CustomUIComponent>
           );
         }
@@ -395,11 +395,11 @@ export class View {
               self._channel.emit(SET_CURRENT_STORY, { storyId: newStoryId })
             }
           >
-            <StoryView />
+            <StoryView useWrapper={true} />
           </FullUI>
         );
       } else {
-        return <StoryView />;
+        return <StoryView useWrapper={false} />;
       }
     };
   };