Merge branch 'next' into fix-withstorybook-typing

Author: tlow92

packages/react-native-theming/package.json

@@ -21,8 +21,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "npx tsx ./scripts/gendtsdev.ts && tsup --watch",
-    "prepare": "tsup && npx tsx ./scripts/patchdts.ts"
+    "dev": "npx --yes tsx ./scripts/gendtsdev.ts && tsup --watch",
+    "prepare": "tsup && npx --yes tsx ./scripts/patchdts.ts"
   },
   "dependencies": {
     "polished": "^4.3.1"

packages/react-native-ui/src/Layout.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
 import { mockDataset } from './mockdata';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { LayoutProvider } from './LayoutProvider';
 
 const meta = {
   title: 'components/Layout',
@@ -12,7 +13,9 @@ const meta = {
     (Story) => (
       <GestureHandlerRootView style={{ flex: 1 }}>
         <BottomSheetModalProvider>
-          <Story />
+          <LayoutProvider>
+            <Story />
+          </LayoutProvider>
         </BottomSheetModalProvider>
       </GestureHandlerRootView>
     ),
@@ -31,3 +34,44 @@ export const Basic: Story = {
     storyId: 'emails-buildnotification--with-changes',
   },
 };
+
+export const OverflowSidebarExample: Story = {
+  args: {
+    children: (
+      <View
+        style={{
+          width: '100%',
+          backgroundColor: 'lightgreen',
+          alignItems: 'flex-end',
+          left: '-50%',
+        }}
+      >
+        <Text style={{ width: '50%', textAlign: 'right' }}>
+          This box should not overflow the side navigation in desktop mode
+        </Text>
+      </View>
+    ),
+    //@ts-ignore
+    storyHash: mockDataset.withRoot,
+    storyId: 'emails-buildnotification--with-changes',
+  },
+};
+
+export const OverflowAddonsExample: Story = {
+  args: {
+    children: (
+      <View
+        style={{
+          height: '100%',
+          backgroundColor: 'lightgreen',
+          bottom: '-50%',
+        }}
+      >
+        <Text style={{ height: '50%' }}>This box should not overflow the addons panel</Text>
+      </View>
+    ),
+    //@ts-ignore
+    storyHash: mockDataset.withRoot,
+    storyId: 'emails-buildnotification--with-changes',
+  },
+};

packages/react-native-ui/src/Layout.tsx

@@ -105,7 +105,7 @@ export const Layout = ({
         </View>
 
         <View style={{ flex: 1 }}>
-          <View style={{ flex: 1 }}>{children}</View>
+          <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
 
           <View
             style={{
@@ -133,7 +133,7 @@ export const Layout = ({
 
   return (
     <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
-      <View style={{ flex: 1 }}>{children}</View>
+      <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>

packages/react-native/package.json

@@ -33,7 +33,7 @@
     "template/**/*"
   ],
   "scripts": {
-    "dev": "npx tsx buildscripts/gendtsdev.ts && tsup --watch",
+    "dev": "npx --yes tsx buildscripts/gendtsdev.ts && tsup --watch",
     "prepare": "rm -rf dist/ && tsup && npm run prepare:withStorybook",
     "prepare:withStorybook": "tsup metro/withStorybook.ts --dts --outDir metro/ --clean false",
     "test": "jest",

packages/react-native/src/components/StoryView/StoryView.tsx

@@ -37,7 +37,7 @@ const StoryView = () => {
 
     return (
       <View
-        style={{ flex: 1, backgroundColor: theme.background?.content }}
+        style={{ flex: 1, backgroundColor: theme.background?.content, overflow: 'hidden' }}
         key={id}
         testID={id}
         onStartShouldSetResponder={dismissOnStartResponder}