BA-2399 [RN] Comment Creation

packages/components/modules/__shared__/common/index.ts

@@ -2,3 +2,6 @@
 
 export * from './constants'
 export type * from './types'
+
+export { default as ReactionButton } from './ReactionButton'
+export type * from './ReactionButton/types'

packages/components/modules/__shared__/native/SocialInputBox/SubmitActions/index.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react'
+
+import { IconButton } from '@baseapp-frontend/design-system/components/native/buttons'
+import { SendMessageIcon as DefaultSendMessageIcon } from '@baseapp-frontend/design-system/components/native/icons'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { TouchableOpacity } from '@gorhom/bottom-sheet'
+
+import { SubmitActionsProps } from './types'
+
+const SubmitActions: FC<SubmitActionsProps> = ({
+  disabled = false,
+  handleSubmit,
+  SendMessageIcon = DefaultSendMessageIcon,
+  SendMessageIconProps = {},
+  shouldUseBottomSheetSafeComponents = false,
+}) => {
+  const theme = useTheme()
+  const content = (
+    <SendMessageIcon
+      color={disabled ? theme.colors.object.disabled : theme.colors.primary.main}
+      {...SendMessageIconProps}
+    />
+  )
+
+  if (shouldUseBottomSheetSafeComponents) {
+    return (
+      <TouchableOpacity disabled={disabled} onPress={handleSubmit} style={{ padding: 8 }}>
+        {content}
+      </TouchableOpacity>
+    )
+  }
+  return (
+    <IconButton disabled={disabled} onPress={handleSubmit}>
+      {content}
+    </IconButton>
+  )
+}
+
+export default SubmitActions

packages/components/modules/__shared__/native/SocialInputBox/SubmitActions/types.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+
+import { SvgIconProps } from '@baseapp-frontend/design-system/components/native/icons'
+
+export interface SubmitActionsProps {
+  disabled?: boolean
+  handleSubmit: VoidFunction
+  SendMessageIcon?: FC<SvgIconProps>
+  SendMessageIconProps?: SvgIconProps
+  shouldUseBottomSheetSafeComponents?: boolean
+}

packages/components/modules/__shared__/native/SocialInputBox/index.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react'
+
+import { SocialTextInput as DefaultSocialTextInput } from '@baseapp-frontend/design-system/components/native/inputs'
+
+import { TextInput as NativeTextInput } from 'react-native'
+
+import { SOCIAL_UPSERT_FORM } from '../../common'
+import DefaultSocialUpsertActions from '../SocialUpsertActions'
+import DefaultSubmitActions from './SubmitActions'
+import { SocialInputBoxProps } from './types'
+
+const SocialInput = forwardRef<NativeTextInput, SocialInputBoxProps>(
+  (
+    {
+      SocialTextInput = DefaultSocialTextInput,
+      SocialTextInputProps = {},
+      SocialUpsertActions = DefaultSocialUpsertActions,
+      SubmitActions = DefaultSubmitActions,
+      SubmitActionsProps = {},
+      form,
+      isLoading,
+      shouldUseBottomSheetSafeComponents = false,
+      submit,
+    },
+    ref,
+  ) => {
+    const submissionDisabled = isLoading || !form.formState.isValid
+
+    return (
+      <SocialTextInput
+        control={form.control}
+        name={SOCIAL_UPSERT_FORM.body}
+        ref={ref}
+        shouldUseBottomSheetSafeComponents={shouldUseBottomSheetSafeComponents}
+        {...SocialTextInputProps}
+      >
+        <SocialUpsertActions />
+        <SubmitActions
+          disabled={submissionDisabled}
+          handleSubmit={submit}
+          shouldUseBottomSheetSafeComponents={shouldUseBottomSheetSafeComponents}
+          {...SubmitActionsProps}
+        />
+      </SocialTextInput>
+    )
+  },
+)
+
+export default SocialInput

packages/components/modules/__shared__/native/SocialInputBox/types.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react'
+
+import { SocialTextInputProps } from '@baseapp-frontend/design-system/components/native/inputs'
+
+import { UseFormReturn } from 'react-hook-form'
+
+import { SocialUpsertForm } from '../../common'
+import { SubmitActionsProps } from './SubmitActions/types'
+
+export interface SocialInputBoxProps {
+  SocialTextInput?: FC<SocialTextInputProps>
+  SocialTextInputProps?: Partial<SocialTextInputProps>
+  SocialUpsertActions?: FC
+  SubmitActions?: FC<SubmitActionsProps>
+  SubmitActionsProps?: Partial<SubmitActionsProps>
+  isLoading: boolean
+  form: UseFormReturn<SocialUpsertForm, any, undefined>
+  shouldUseBottomSheetSafeComponents?: boolean
+  submit: VoidFunction
+}

packages/components/modules/__shared__/native/SocialInputDrawer/DrawerHandle/index.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { createStyles } from './styles'
+
+const DrawerHandle: FC = () => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+
+  return (
+    <View style={styles.handleContainer}>
+      <View style={styles.draggable} />
+    </View>
+  )
+}
+
+export default DrawerHandle

packages/components/modules/__shared__/native/SocialInputDrawer/DrawerHandle/styles.ts

@@ -0,0 +1,25 @@
+import { Theme, transparent } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    handleContainer: {
+      height: 26,
+      borderColor: transparent.light[20],
+      borderTopLeftRadius: 12,
+      borderTopRightRadius: 12,
+      borderTopWidth: 1,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    draggable: {
+      width: 64,
+      height: 6,
+      backgroundColor: theme.colors.object.disabled,
+      borderRadius: 12,
+    },
+  })

packages/components/modules/__shared__/native/SocialInputDrawer/index.tsx

@@ -0,0 +1,125 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+
+import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'
+import {
+  Dimensions,
+  Keyboard,
+  KeyboardEvent,
+  TextInput as NativeTextInput,
+  Platform,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import DefaultSocialInputBox from '../SocialInputBox'
+import DefaultDrawerHandle from './DrawerHandle'
+import { createStyles } from './styles'
+import { SocialInputDrawerProps } from './types'
+
+const SocialInputDrawer = forwardRef<NativeTextInput, SocialInputDrawerProps>(
+  (
+    {
+      DrawerHandle = DefaultDrawerHandle,
+      SocialInputBox = DefaultSocialInputBox,
+      SocialInputBoxProps = {},
+      form,
+      isLoading,
+      showHandle,
+      style = {},
+      submit,
+    },
+    ref,
+  ) => {
+    const bottomSheetRef = useRef<BottomSheet>(null)
+    const [keyboardHeight, setKeyboardHeight] = useState(0)
+    const insets = useSafeAreaInsets()
+
+    useEffect(() => {
+      // on android the keyboard is handled automatically by BottomSheet
+      if (Platform.OS === 'android') return () => {}
+
+      const onKeyboardShow = (e: KeyboardEvent) => {
+        const screenHeight = Dimensions.get('screen').height
+        const safeHeight = screenHeight - insets.bottom
+        const newKeyboardHeight = safeHeight - e.endCoordinates.screenY
+        setKeyboardHeight(newKeyboardHeight)
+      }
+
+      const onKeyboardHide = () => {
+        setKeyboardHeight(0)
+      }
+
+      const showListener = Keyboard.addListener('keyboardWillShow', onKeyboardShow)
+      const hideListener = Keyboard.addListener('keyboardWillHide', onKeyboardHide)
+
+      return () => {
+        showListener.remove()
+        hideListener.remove()
+      }
+    }, [insets])
+
+    const handleSheetChange = useCallback(
+      (index: number) => {
+        if (index !== 1) {
+          bottomSheetRef.current?.snapToIndex(1)
+          if (index === 0) {
+            if (ref && 'current' in ref) ref.current?.blur()
+          } else if (index === 2) {
+            if (ref && 'current' in ref) ref.current?.focus()
+          }
+        }
+      },
+      [ref, bottomSheetRef],
+    )
+
+    const handleAnimate = useCallback(
+      (from: number, to: number) => {
+        if (to !== 1) {
+          bottomSheetRef.current?.snapToIndex(1)
+        }
+        if (to === 0) {
+          if (ref && 'current' in ref) ref.current?.blur()
+        } else if (to === 2) {
+          if (ref && 'current' in ref) ref.current?.focus()
+        }
+      },
+      [ref, bottomSheetRef],
+    )
+
+    const styles = createStyles()
+
+    return (
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={1}
+        snapPoints={[80 + keyboardHeight, 200 + keyboardHeight]}
+        onChange={handleSheetChange}
+        onAnimate={handleAnimate}
+        enableContentPanningGesture={false}
+        keyboardBehavior="interactive"
+        handleComponent={showHandle ? DrawerHandle : null}
+        backgroundStyle={styles.background}
+      >
+        <BottomSheetView style={[styles.bottomSheetContainer, style]}>
+          <SocialInputBox
+            form={form}
+            isLoading={isLoading}
+            ref={ref}
+            shouldUseBottomSheetSafeComponents
+            submit={submit}
+            {...SocialInputBoxProps}
+          />
+          {
+            // The next view extends the bottom sheet by the height of the keyboard
+            // so that the SocialInputBox is not hidden by the keyboard
+            // On android this works automatically (keyboardHeight = 0 in this case)
+          }
+          <View style={{ height: keyboardHeight }} />
+        </BottomSheetView>
+      </BottomSheet>
+    )
+  },
+)
+
+export default SocialInputDrawer

packages/components/modules/__shared__/native/SocialInputDrawer/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native'
+
+export const createStyles = () =>
+  StyleSheet.create({
+    bottomSheetContainer: {
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+    },
+    background: {
+      borderRadius: 0,
+    },
+  })

packages/components/modules/__shared__/native/SocialInputDrawer/types.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+import { UseFormReturn } from 'react-hook-form'
+import { StyleProp, ViewStyle } from 'react-native'
+
+import { SocialUpsertForm } from '../../common'
+import type { SocialInputBoxProps } from '../SocialInputBox/types'
+
+export interface SocialInputDrawerProps {
+  DrawerHandle?: FC
+  SocialInputBox?: FC<SocialInputBoxProps>
+  SocialInputBoxProps?: Partial<SocialInputBoxProps>
+  form: UseFormReturn<SocialUpsertForm, any, undefined>
+  isLoading: boolean
+  showHandle: boolean
+  style?: StyleProp<ViewStyle>
+  submit: VoidFunction
+}

packages/components/modules/__shared__/native/SocialUpsertActions/index.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react'
+
+import { IconButton } from '@baseapp-frontend/design-system/components/native/buttons'
+import { EmojiIcon } from '@baseapp-frontend/design-system/components/native/icons'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+const SocialUpsertActions: FC = () => {
+  const theme = useTheme()
+
+  return (
+    <IconButton>
+      <EmojiIcon color={theme.colors.object.low} />
+    </IconButton>
+  )
+}
+
+export default SocialUpsertActions

packages/components/modules/__shared__/native/Timestamp/index.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+
+import { Text } from '@baseapp-frontend/design-system/components/native/typographies'
+import { DATE_FORMAT, formatDate } from '@baseapp-frontend/utils'
+
+import { DateTime } from 'luxon'
+
+import { TimestampProps } from './types'
+
+const Timestamp: FC<TimestampProps> = ({ date }) => {
+  const dateTime = DateTime.fromISO(date)
+  const now = DateTime.now()
+  const diffDays = now.startOf('day').diff(dateTime.startOf('day'), 'days').days
+
+  let text
+  if (diffDays === 0) text = 'Today'
+  else if (diffDays === 1) text = 'Yesterday'
+  else if (diffDays <= 7) text = `${diffDays} days ago`
+  else text = formatDate(dateTime, { toFormat: DATE_FORMAT[2] })
+
+  return (
+    <Text variant="caption" color="low">
+      {text}
+    </Text>
+  )
+}
+
+export default Timestamp

packages/components/modules/__shared__/native/Timestamp/types.ts

@@ -0,0 +1,3 @@
+export interface TimestampProps {
+  date: string
+}

packages/components/modules/__shared__/native/index.ts

@@ -0,0 +1,8 @@
+export { default as SocialInputBox } from './SocialInputBox'
+export type * from './SocialInputBox/types'
+
+export { default as SocialInputDrawer } from './SocialInputDrawer'
+export type * from './SocialInputDrawer/types'
+
+export { default as Timestamp } from './Timestamp'
+export type * from './Timestamp/types'