feat: add buttons to hide/show ui

storybookjs · Oct 25, 2024 · 37d275c · 37d275c
1 parent 1287053
commit 37d275c
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 3 deletions.
diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
@@ -4,7 +4,7 @@ import { type API_IndexHash, type Args, type StoryContext } from '@storybook/cor
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactNode, useRef, useState } from 'react';
-import { Platform, ScrollView, Text, View } from 'react-native';
+import { Platform, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { useLayout } from './LayoutProvider';
@@ -16,6 +16,8 @@ import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
 import { DarkLogo } from './icon/DarkLogo';
 import { Logo } from './icon/Logo';
 import { MenuIcon } from './icon/MenuIcon';
+import { FullscreenIcon } from './icon/FullscreenIcon';
+import { CloseFullscreenIcon } from './icon/CloseFullscreenIcon';
 
 export const Layout = ({
   storyHash,
@@ -38,6 +40,8 @@ export const Layout = ({
 
   const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useState(true);
 
+  const [uiHidden, setUiHidden] = useState(false);
+
   if (isDesktop) {
     return (
       <View
@@ -133,7 +137,29 @@ export const Layout = ({
 
   return (
     <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
-      <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
+      <View style={{ flex: 1, overflow: 'hidden' }}>
+        {children}
+
+        <TouchableOpacity
+          style={{
+            position: 'absolute',
+            bottom: uiHidden ? 56 + insets.bottom : 16,
+            right: 16,
+            backgroundColor: 'white',
+            padding: 4,
+            borderRadius: 4,
+            borderWidth: 1,
+            borderColor: theme.appBorderColor,
+          }}
+          onPress={() => setUiHidden(!uiHidden)}
+        >
+          {uiHidden ? (
+            <CloseFullscreenIcon color={theme.color.mediumdark} />
+          ) : (
+            <FullscreenIcon color={theme.color.mediumdark} />
+          )}
+        </TouchableOpacity>
+      </View>
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
@@ -161,7 +187,7 @@ export const Layout = ({
       </MobileMenuDrawer>
 
       <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} onStateChange={setMenuOpen} />
-      {(Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
+      {!uiHidden && (Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
         <Container style={{ marginBottom: insets.bottom }}>
           <Nav>
             <Button

diff --git a/packages/react-native-ui/src/icon/CloseFullscreenIcon.tsx b/packages/react-native-ui/src/icon/CloseFullscreenIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
+
+export function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
+  const theme = useTheme();
+
+  return (
+    <Svg
+      fill={color ?? theme.color.defaultText}
+      height={height}
+      viewBox="0 0 16 16"
+      width={width}
+      {...props}
+    >
+      <Path d="M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" />
+    </Svg>
+  );
+}
diff --git a/packages/react-native-ui/src/icon/FullscreenIcon.tsx b/packages/react-native-ui/src/icon/FullscreenIcon.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
+
+export function FullscreenIcon({
+  color, //= '#2E3438',
+  width = 14,
+  height = 14,
+  ...props
+}: SvgProps) {
+  const theme = useTheme();
+
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z"
+        fill={color ?? theme.color.defaultText}
+      />
+    </Svg>
+  );
+}