@mediacubeco/expo-template-fsd 1.0.0

package/src/shared/ui/templates/screen-container/screen-container.hooks.tsx

@@ -0,0 +1,72 @@
+import { useMemo } from 'react'
+import { View } from 'react-native'
+import { KeyboardArea, RefreshControl } from '../../molecules'
+import { useScreenContainerStyles } from './screen-container.styles'
+import {
+  ScreenContainerListProps,
+  ScreenContainerScrollProps,
+  ScreenContainerSectionListProps,
+} from './screen-container.types'
+
+const useScreenContainerProps = <
+  Props extends
+    | ScreenContainerScrollProps
+    | ScreenContainerListProps<any>
+    | ScreenContainerSectionListProps<any>,
+>({
+  // omit
+  // @ts-ignore
+  style,
+  // @ts-ignore
+  contentContainerStyle,
+  // @ts-ignore
+  refreshing,
+  // internal
+  withOverflowTop = false,
+  withOverflowBottom = false,
+  // native
+  header: initHeader,
+  footer: initFooter,
+  wrapperStyle,
+  outerStyle,
+  innerStyle,
+  onRefresh,
+  ...props
+}: Props) => {
+  const { styles } = useScreenContainerStyles({
+    withOverflowTop: withOverflowTop || !!initHeader,
+    withOverflowBottom: withOverflowBottom || !!initFooter,
+  })
+
+  const header = useMemo(() => {
+    return <View style={styles.header}>{initHeader}</View>
+  }, [styles.header, initHeader])
+
+  const footer = useMemo(() => {
+    return (
+      <View style={styles.footer}>
+        {initFooter}
+        <KeyboardArea />
+      </View>
+    )
+  }, [styles.footer, initFooter])
+
+  return {
+    ...props,
+    header,
+    footer,
+    wrapperStyle: [styles.wrapper, wrapperStyle],
+    outerStyle: [styles.outer, outerStyle],
+    innerStyle: [styles.inner, innerStyle],
+    showsVerticalScrollIndicator: false,
+    showsHorizontalScrollIndicator: false,
+    keyboardDismissMode: 'interactive',
+    keyboardShouldPersistTaps: 'handled',
+    contentInsetAdjustmentBehavior: 'never',
+    refreshControl: onRefresh ? (
+      <RefreshControl withOffset={!withOverflowTop && !initHeader} onRefresh={onRefresh} />
+    ) : undefined,
+  }
+}
+
+export { useScreenContainerProps }

package/src/shared/ui/templates/screen-container/screen-container.styles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native'
+import { useSafeArea } from '../../../hooks'
+import { useThemeMode } from '../../../lib'
+import { ScreenContainerStylesConfig } from './screen-container.types'
+
+const useScreenContainerStyles = ({
+  withOverflowTop,
+  withOverflowBottom,
+}: ScreenContainerStylesConfig) => {
+  const { COLORS } = useThemeMode()
+  const { TOP, BOTTOM } = useSafeArea()
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      flex: 1,
+      paddingTop: withOverflowTop ? TOP + 16 : 0,
+      paddingBottom: withOverflowBottom ? BOTTOM + 16 : 0,
+      backgroundColor: COLORS.FILL.BASE,
+    },
+    outer: {
+      zIndex: 1,
+      flex: 1,
+    },
+    inner: {
+      flexGrow: 1,
+      paddingTop: withOverflowTop ? 8 : TOP + 16,
+      paddingBottom: withOverflowBottom ? 8 : BOTTOM + 16,
+      paddingHorizontal: 16,
+    },
+    header: {
+      zIndex: 2,
+      paddingBottom: withOverflowTop ? 8 : 0,
+      paddingHorizontal: 16,
+    },
+    footer: {
+      zIndex: 2,
+      paddingTop: withOverflowBottom ? 8 : 0,
+      paddingHorizontal: 16,
+    },
+  })
+
+  return { styles }
+}
+
+export { useScreenContainerStyles }

package/src/shared/ui/templates/screen-container/screen-container.types.tsx

@@ -0,0 +1,75 @@
+import { ReactNode, Ref } from 'react'
+import {
+  FlatList,
+  FlatListProps,
+  ListRenderItemInfo,
+  ScrollView,
+  ScrollViewProps,
+  SectionList,
+  SectionListData,
+  SectionListProps,
+  SectionListRenderItemInfo,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
+
+type ScreenContainerExcludeExtraNativeProps<
+  Props extends ScrollViewProps | FlatListProps<unknown> | SectionListProps<unknown>,
+  Prop extends string = '',
+> = Omit<
+  Props,
+  'style' | 'contentContainerStyle' | 'refreshControl' | 'refreshing' | 'onRefresh' | Prop
+>
+
+type ScreenContainerProps<Component extends ScrollView | FlatList | SectionList> = {
+  reference?: Ref<Component>
+  wrapperStyle?: StyleProp<ViewStyle>
+  outerStyle?: StyleProp<ViewStyle>
+  innerStyle?: StyleProp<ViewStyle>
+  header?: ReactNode
+  footer?: ReactNode
+  withOverflowTop?: boolean
+  withOverflowBottom?: boolean
+  onRefresh?: () => any | Promise<any>
+}
+
+type ScreenContainerScrollProps = ScreenContainerExcludeExtraNativeProps<ScrollViewProps> &
+  ScreenContainerProps<ScrollView> & {}
+
+type ScreenContainerListProps<Item = unknown> = ScreenContainerExcludeExtraNativeProps<
+  FlatListProps<Item>
+> &
+  ScreenContainerProps<FlatList<Item>> & {}
+
+type ScreenContainerSectionListProps<Item = unknown> = ScreenContainerExcludeExtraNativeProps<
+  SectionListProps<Item>
+> &
+  ScreenContainerProps<SectionList<Item>> & {}
+
+type ScreenContainerListRenderItemInfo<Item = unknown> = ListRenderItemInfo<Item>
+
+type ScreenContainerSectionListRenderItemInfo<Item = unknown> = SectionListRenderItemInfo<Item>
+
+type ScreenContainerSectionListRenderHeaderInfo<Item = unknown> = {
+  section: SectionListData<Item>
+}
+
+type ScreenContainerSectionListRenderFooterInfo<Item = unknown> = {
+  section: SectionListData<Item>
+}
+
+type ScreenContainerStylesConfig = {
+  withOverflowTop: boolean
+  withOverflowBottom: boolean
+}
+
+export type {
+  ScreenContainerScrollProps,
+  ScreenContainerListProps,
+  ScreenContainerSectionListProps,
+  ScreenContainerListRenderItemInfo,
+  ScreenContainerSectionListRenderItemInfo,
+  ScreenContainerSectionListRenderHeaderInfo,
+  ScreenContainerSectionListRenderFooterInfo,
+  ScreenContainerStylesConfig,
+}

package/src/shared/utils/generators.ts

@@ -0,0 +1,11 @@
+const generateIdFactory = () => {
+  let lastId = 0
+
+  return (prefix: string = '') => {
+    return `${prefix}${++lastId}`
+  }
+}
+
+const generateId = generateIdFactory()
+
+export { generateIdFactory, generateId }

package/src/shared/utils/index.ts

@@ -0,0 +1 @@
+export * from './generators'

package/svg.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  import type React from 'react'
+  import type { SvgProps } from 'react-native-svg'
+
+  const content: React.FC<SvgProps>
+  export default content
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "@mediacubeco/typescript-config",
+    "@mediacubeco/typescript-config-fsd",
+    "@mediacubeco/typescript-config-react",
+    "@mediacubeco/typescript-config-react-native"
+  ]
+}