Add new layout components

src/components/Layout/Header/index.tsx

@@ -0,0 +1,160 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {isIOS} from '#/platform/detection'
+import {useSetDrawerOpen} from '#/state/shell'
+import {
+  atoms as a,
+  useBreakpoints,
+  useGutterStyles,
+  useTheme,
+  ViewStyleProp,
+} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
+import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
+import {Text} from '#/components/Typography'
+
+const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
+const BUTTON_SIZE = 34 // small button
+
+export function Outer({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  const gutter = useGutterStyles()
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.border_b,
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        gutter,
+        a.py_sm,
+        t.atoms.border_contrast_low,
+      ]}>
+      <View style={[a.flex_1]}>{children}</View>
+    </View>
+  )
+}
+
+export function Content({children}: {children: React.ReactNode}) {
+  return (
+    <View
+      style={[
+        a.flex_1,
+        a.justify_center,
+        a.py_xs,
+        isIOS && a.align_center,
+        {
+          paddingHorizontal: BUTTON_SIZE + a.gap_sm.gap,
+          minHeight: BUTTON_SIZE,
+        },
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function Slot({
+  children,
+  style,
+}: {children?: React.ReactNode} & ViewStyleProp) {
+  return (
+    <View
+      style={[
+        a.absolute,
+        a.inset_0,
+        a.z_50,
+        {
+          width: BUTTON_SIZE,
+          right: 'auto',
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function BackButton() {
+  const {_} = useLingui()
+  const navigation = useNavigation<NavigationProp>()
+
+  const onPressBack = React.useCallback(() => {
+    if (navigation.canGoBack()) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('Home')
+    }
+  }, [navigation])
+
+  return (
+    <Slot>
+      <Button
+        label={_(msg`Go back`)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+        shape="round"
+        onPress={onPressBack}
+        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
+        <ButtonIcon icon={ArrowLeft} size="lg" />
+      </Button>
+    </Slot>
+  )
+}
+
+export function MenuButton() {
+  const {_} = useLingui()
+  const setDrawerOpen = useSetDrawerOpen()
+  const {gtMobile} = useBreakpoints()
+
+  const onPress = React.useCallback(() => {
+    setDrawerOpen(true)
+  }, [setDrawerOpen])
+
+  return gtMobile ? null : (
+    <Slot>
+      <Button
+        label={_(msg`Open drawer menu`)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+        shape="round"
+        onPress={onPress}
+        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
+        <ButtonIcon icon={Menu} size="lg" />
+      </Button>
+    </Slot>
+  )
+}
+
+export function TitleText({children}: {children: React.ReactNode}) {
+  const {gtMobile} = useBreakpoints()
+  return (
+    <Text
+      style={[
+        a.text_lg,
+        a.font_heavy,
+        a.leading_snug,
+        gtMobile && [a.text_xl],
+      ]}>
+      {children}
+    </Text>
+  )
+}
+
+export function SubtitleText({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  return (
+    <Text style={[a.text_sm, a.leading_tight, t.atoms.text_contrast_medium]}>
+      {children}
+    </Text>
+  )
+}

src/components/Layout/index.tsx

@@ -0,0 +1,183 @@
+import React, {useContext, useMemo} from 'react'
+import {StyleSheet, View, ViewProps, ViewStyle} from 'react-native'
+import {StyleProp} from 'react-native'
+import {
+  KeyboardAwareScrollView,
+  KeyboardAwareScrollViewProps,
+} from 'react-native-keyboard-controller'
+import Animated, {AnimatedScrollViewProps} from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {isWeb} from '#/platform/detection'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+
+export * as Header from '#/components/Layout/Header'
+
+// Every screen should have a Layout component wrapping it.
+// This component provides a default padding for the top of the screen.
+// This allows certain screens to avoid the top padding if they want to.
+
+const LayoutContext = React.createContext({
+  withinScreen: false,
+  topPaddingDisabled: false,
+  withinScrollView: false,
+})
+
+export type ScreenProps = React.ComponentProps<typeof View> & {
+  disableTopPadding?: boolean
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Every screen should have a Layout.Screen component wrapping it.
+ * This component provides a default padding for the top of the screen
+ * and height/minHeight
+ */
+export const Screen = React.memo(function Screen({
+  disableTopPadding = false,
+  style,
+  ...props
+}: ScreenProps) {
+  const {top} = useSafeAreaInsets()
+  const context = useMemo(
+    () => ({
+      withinScreen: true,
+      topPaddingDisabled: disableTopPadding,
+      withinScrollView: false,
+    }),
+    [disableTopPadding],
+  )
+  return (
+    <LayoutContext.Provider value={context}>
+      {isWeb && <WebCenterBorders />}
+      <View
+        style={[
+          {paddingTop: disableTopPadding ? 0 : top},
+          a.util_screen_outer,
+          style,
+        ]}
+        {...props}
+      />
+    </LayoutContext.Provider>
+  )
+})
+
+export type ContentProps = AnimatedScrollViewProps & {
+  style?: StyleProp<ViewStyle>
+  contentContainerStyle?: StyleProp<ViewStyle>
+}
+
+export const Content = React.memo(function Content({
+  children,
+  style,
+  contentContainerStyle,
+  ...props
+}: ContentProps) {
+  const context = useContext(LayoutContext)
+  const newContext = useMemo(
+    () => ({...context, withinScrollView: true}),
+    [context],
+  )
+  return (
+    <LayoutContext.Provider value={newContext}>
+      <Animated.ScrollView
+        id="content"
+        style={[styles.scrollViewCommonStyles, style]}
+        contentContainerStyle={[
+          styles.scrollViewContentContainer,
+          contentContainerStyle,
+        ]}
+        {...props}>
+        {isWeb ? (
+          // @ts-ignore web only -esb
+          <Center>{children}</Center>
+        ) : (
+          children
+        )}
+      </Animated.ScrollView>
+    </LayoutContext.Provider>
+  )
+})
+
+export type KeyboardAwareContentProps = KeyboardAwareScrollViewProps & {
+  children: React.ReactNode
+  contentContainerStyle?: StyleProp<ViewStyle>
+}
+
+export const KeyboardAwareContent = React.forwardRef(function LayoutScrollView(
+  {children, style, contentContainerStyle, ...props}: KeyboardAwareContentProps,
+  _ref: React.Ref<typeof KeyboardAwareScrollView>,
+) {
+  return (
+    <KeyboardAwareScrollView
+      style={[styles.scrollViewCommonStyles, style]}
+      contentContainerStyle={[
+        styles.scrollViewContentContainer,
+        contentContainerStyle,
+      ]}
+      keyboardShouldPersistTaps="handled"
+      {...props}>
+      {isWeb ? <Center>{children}</Center> : children}
+    </KeyboardAwareScrollView>
+  )
+})
+
+export const WebCenterBorders = React.forwardRef(function LayoutContent() {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  return gtMobile ? (
+    <View
+      style={[
+        a.fixed,
+        a.inset_0,
+        a.border_l,
+        a.border_r,
+        t.atoms.border_contrast_low,
+        web({
+          width: 602,
+          left: '50%',
+          transform: [
+            {
+              translateX: '-50%',
+            },
+            {
+              translateX: `var(--scrollbar-offset-negative)`,
+            },
+          ],
+        }),
+      ]}
+    />
+  ) : null
+})
+
+export const Center = React.forwardRef(function LayoutContent(
+  {children, style, ...props}: ViewProps,
+  ref: React.Ref<View>,
+) {
+  const {gtMobile} = useBreakpoints()
+  return (
+    <View
+      ref={ref}
+      style={[
+        a.util_screen_outer,
+        a.w_full,
+        a.mx_auto,
+        gtMobile && {
+          maxWidth: 600,
+        },
+        style,
+      ]}
+      {...props}>
+      {children}
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  scrollViewCommonStyles: {
+    width: '100%',
+  },
+  scrollViewContentContainer: {
+    paddingBottom: 100,
+  },
+})