ignite-parse-auth-kit 1.0.0

package/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx

@@ -0,0 +1,313 @@
+import { FC, ReactElement, useCallback, useEffect, useRef, useState } from "react"
+import { Image, ImageStyle, Platform, SectionList, TextStyle, View, ViewStyle } from "react-native"
+import { Link, RouteProp, useRoute } from "@react-navigation/native"
+import { type ContentStyle } from "@shopify/flash-list"
+import { Drawer } from "react-native-drawer-layout"
+
+import { ListItem } from "@/components/ListItem"
+import { ListView, type ListViewRef } from "@/components/ListView"
+import { Screen } from "@/components/Screen"
+import { Text } from "@/components/Text"
+import { TxKeyPath, isRTL } from "@/i18n"
+import { translate } from "@/i18n/translate"
+import { DemoTabParamList, DemoTabScreenProps } from "@/navigators/DemoNavigator"
+import type { Theme, ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+import { hasValidStringProp } from "@/utils/hasValidStringProp"
+import { useSafeAreaInsetsStyle } from "@/utils/useSafeAreaInsetsStyle"
+
+import * as Demos from "./demos"
+import { DrawerIconButton } from "./DrawerIconButton"
+import SectionListWithKeyboardAwareScrollView from "./SectionListWithKeyboardAwareScrollView"
+
+const logo = require("@assets/images/logo.png")
+
+export interface Demo {
+  name: string
+  description: TxKeyPath
+  data: ({ themed, theme }: { themed: any; theme: Theme }) => ReactElement[]
+}
+
+interface DemoListItem {
+  item: { name: string; useCases: string[] }
+  sectionIndex: number
+  handleScroll?: (sectionIndex: number, itemIndex?: number) => void
+}
+
+const slugify = (str: string) =>
+  str
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/[\s_-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+
+const WebListItem: FC<DemoListItem> = ({ item, sectionIndex }) => {
+  const sectionSlug = item.name.toLowerCase()
+  const { themed } = useAppTheme()
+  return (
+    <View>
+      <Link
+        screen="DemoShowroom"
+        params={{ queryIndex: sectionSlug }}
+        style={themed($menuContainer)}
+      >
+        <Text preset="bold">{item.name}</Text>
+      </Link>
+      {item.useCases.map((u) => {
+        const itemSlug = slugify(u)
+
+        return (
+          <Link
+            key={`section${sectionIndex}-${u}`}
+            screen="DemoShowroom"
+            params={{ queryIndex: sectionSlug, itemIndex: itemSlug }}
+          >
+            <Text>{u}</Text>
+          </Link>
+        )
+      })}
+    </View>
+  )
+}
+
+const NativeListItem: FC<DemoListItem> = ({ item, sectionIndex, handleScroll }) => {
+  const { themed } = useAppTheme()
+  return (
+    <View>
+      <Text
+        onPress={() => handleScroll?.(sectionIndex)}
+        preset="bold"
+        style={themed($menuContainer)}
+      >
+        {item.name}
+      </Text>
+      {item.useCases.map((u, index) => (
+        <ListItem
+          key={`section${sectionIndex}-${u}`}
+          onPress={() => handleScroll?.(sectionIndex, index)}
+          text={u}
+          rightIcon={isRTL ? "caretLeft" : "caretRight"}
+        />
+      ))}
+    </View>
+  )
+}
+
+const ShowroomListItem = Platform.select({ web: WebListItem, default: NativeListItem })
+const isAndroid = Platform.OS === "android"
+
+export const DemoShowroomScreen: FC<DemoTabScreenProps<"DemoShowroom">> =
+  function DemoShowroomScreen(_props) {
+    const [open, setOpen] = useState(false)
+    const timeout = useRef<ReturnType<typeof setTimeout>>(null)
+    const listRef = useRef<SectionList>(null)
+    const menuRef = useRef<ListViewRef<DemoListItem["item"]>>(null)
+    const route = useRoute<RouteProp<DemoTabParamList, "DemoShowroom">>()
+    const params = route.params
+
+    const { themed, theme } = useAppTheme()
+
+    const toggleDrawer = useCallback(() => {
+      if (!open) {
+        setOpen(true)
+      } else {
+        setOpen(false)
+      }
+    }, [open])
+
+    const handleScroll = useCallback((sectionIndex: number, itemIndex = 0) => {
+      try {
+        listRef.current?.scrollToLocation({
+          animated: true,
+          itemIndex,
+          sectionIndex,
+          viewPosition: 0.25,
+        })
+      } catch (e) {
+        console.error(e)
+      }
+    }, [])
+
+    // handle Web links
+    useEffect(() => {
+      if (params !== undefined && Object.keys(params).length > 0) {
+        const demoValues = Object.values(Demos)
+        const findSectionIndex = demoValues.findIndex(
+          (x) => x.name.toLowerCase() === params.queryIndex,
+        )
+        let findItemIndex = 0
+        if (params.itemIndex) {
+          try {
+            findItemIndex = demoValues[findSectionIndex].data({ themed, theme }).findIndex((u) => {
+              if (hasValidStringProp(u.props, "name")) {
+                return (
+                  slugify(translate((u.props as { name: TxKeyPath }).name)) === params.itemIndex
+                )
+              }
+              return false
+            })
+          } catch (err) {
+            console.error(err)
+          }
+        }
+        handleScroll(findSectionIndex, findItemIndex)
+      }
+    }, [handleScroll, params, theme, themed])
+
+    const scrollToIndexFailed = (info: {
+      index: number
+      highestMeasuredFrameIndex: number
+      averageItemLength: number
+    }) => {
+      listRef.current?.getScrollResponder()?.scrollToEnd()
+      timeout.current = setTimeout(
+        () =>
+          listRef.current?.scrollToLocation({
+            animated: true,
+            itemIndex: info.index,
+            sectionIndex: 0,
+          }),
+        50,
+      )
+    }
+
+    useEffect(() => {
+      return () => {
+        if (timeout.current) {
+          clearTimeout(timeout.current)
+        }
+      }
+    }, [])
+
+    const $drawerInsets = useSafeAreaInsetsStyle(["top"])
+
+    return (
+      <Drawer
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        drawerType="back"
+        drawerPosition={isRTL ? "right" : "left"}
+        renderDrawerContent={() => (
+          <View style={themed([$drawer, $drawerInsets])}>
+            <View style={themed($logoContainer)}>
+              <Image source={logo} style={$logoImage} />
+            </View>
+            <ListView<DemoListItem["item"]>
+              ref={menuRef}
+              contentContainerStyle={themed($listContentContainer)}
+              estimatedItemSize={250}
+              data={Object.values(Demos).map((d) => ({
+                name: d.name,
+                useCases: d.data({ theme, themed }).map((u) => {
+                  if (hasValidStringProp(u.props, "name")) {
+                    return translate((u.props as { name: TxKeyPath }).name)
+                  }
+                  return ""
+                }),
+              }))}
+              keyExtractor={(item) => item.name}
+              renderItem={({ item, index: sectionIndex }) => (
+                <ShowroomListItem {...{ item, sectionIndex, handleScroll }} />
+              )}
+            />
+          </View>
+        )}
+      >
+        <Screen
+          preset="fixed"
+          safeAreaEdges={["top"]}
+          contentContainerStyle={$styles.flex1}
+          {...(isAndroid ? { KeyboardAvoidingViewProps: { behavior: undefined } } : {})}
+        >
+          <DrawerIconButton onPress={toggleDrawer} />
+
+          <SectionListWithKeyboardAwareScrollView
+            ref={listRef}
+            contentContainerStyle={themed($sectionListContentContainer)}
+            stickySectionHeadersEnabled={false}
+            sections={Object.values(Demos).map((d) => ({
+              name: d.name,
+              description: d.description,
+              data: [d.data({ theme, themed })],
+            }))}
+            renderItem={({ item, index: sectionIndex }) => (
+              <View>
+                {item.map((demo: ReactElement, demoIndex: number) => (
+                  <View key={`${sectionIndex}-${demoIndex}`}>{demo}</View>
+                ))}
+              </View>
+            )}
+            renderSectionFooter={() => <View style={themed($demoUseCasesSpacer)} />}
+            ListHeaderComponent={
+              <View style={themed($heading)}>
+                <Text preset="heading" tx="demoShowroomScreen:jumpStart" />
+              </View>
+            }
+            onScrollToIndexFailed={scrollToIndexFailed}
+            renderSectionHeader={({ section }) => {
+              return (
+                <View>
+                  <Text preset="heading" style={themed($demoItemName)}>
+                    {section.name}
+                  </Text>
+                  <Text style={themed($demoItemDescription)}>{translate(section.description)}</Text>
+                </View>
+              )
+            }}
+          />
+        </Screen>
+      </Drawer>
+    )
+  }
+
+const $drawer: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.background,
+  flex: 1,
+})
+
+const $listContentContainer: ThemedStyle<ContentStyle> = ({ spacing }) => ({
+  paddingHorizontal: spacing.lg,
+})
+
+const $sectionListContentContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingHorizontal: spacing.lg,
+})
+
+const $heading: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginBottom: spacing.xxxl,
+})
+
+const $logoImage: ImageStyle = {
+  height: 42,
+  width: 77,
+}
+
+const $logoContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  alignSelf: "flex-start",
+  justifyContent: "center",
+  height: 56,
+  paddingHorizontal: spacing.lg,
+})
+
+const $menuContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingBottom: spacing.xs,
+  paddingTop: spacing.lg,
+})
+
+const $demoItemName: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  fontSize: 24,
+  marginBottom: spacing.md,
+})
+
+const $demoItemDescription: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.xxl,
+})
+
+const $demoUseCasesSpacer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingBottom: spacing.xxl,
+})
+
+// @demo remove-file

package/app/screens/DemoShowroomScreen/DemoUseCase.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from "react"
+import { TextStyle, View, ViewStyle } from "react-native"
+
+import { Text } from "@/components/Text"
+import type { TxKeyPath } from "@/i18n"
+import { translate } from "@/i18n/translate"
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+interface DemoUseCaseProps {
+  name: TxKeyPath
+  description?: TxKeyPath
+  layout?: "column" | "row"
+  itemStyle?: ViewStyle
+  children: ReactNode
+}
+
+/**
+ * @param {DemoUseCaseProps} props - The props for the `DemoUseCase` component.
+ * @returns {JSX.Element} The rendered `DemoUseCase` component.
+ */
+export function DemoUseCase(props: DemoUseCaseProps) {
+  const { name, description, children, layout = "column", itemStyle = {} } = props
+  const { themed } = useAppTheme()
+
+  return (
+    <View>
+      <Text style={themed($name)}>{translate(name)}</Text>
+      {description && <Text style={themed($description)}>{translate(description)}</Text>}
+
+      <View style={[itemStyle, layout === "row" && $styles.row, themed($item)]}>{children}</View>
+    </View>
+  )
+}
+
+const $description: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginTop: spacing.md,
+})
+
+const $item: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
+  backgroundColor: colors.palette.neutral100,
+  borderRadius: 8,
+  padding: spacing.lg,
+  marginVertical: spacing.md,
+})
+
+const $name: ThemedStyle<TextStyle> = ({ typography }) => ({
+  fontFamily: typography.primary.bold,
+})
+
+// @demo remove-file

package/app/screens/DemoShowroomScreen/DrawerIconButton.tsx

@@ -0,0 +1,120 @@
+import { Pressable, PressableProps, ViewStyle, Platform } from "react-native"
+import { useDrawerProgress } from "react-native-drawer-layout"
+import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated"
+
+import { isRTL } from "@/i18n"
+import { useAppTheme } from "@/theme/context"
+
+interface DrawerIconButtonProps extends PressableProps {}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+/**
+ * @param {DrawerIconButtonProps} props - The props for the `DrawerIconButton` component.
+ * @returns {JSX.Element} The rendered `DrawerIconButton` component.
+ */
+export function DrawerIconButton(props: DrawerIconButtonProps) {
+  const { ...PressableProps } = props
+  const progress = useDrawerProgress()
+  const isWeb = Platform.OS === "web"
+  const {
+    theme: { colors },
+    themed,
+  } = useAppTheme()
+
+  const animatedContainerStyles = useAnimatedStyle(() => {
+    const translateX = interpolate(progress.value, [0, 1], [0, isRTL ? 60 : -60])
+
+    return {
+      transform: [{ translateX }],
+    }
+  })
+
+  const animatedTopBarStyles = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(progress.value, [0, 1], [colors.text, colors.tint])
+    const marginStart = interpolate(progress.value, [0, 1], [0, -11.5])
+    const rotate = interpolate(progress.value, [0, 1], [0, isRTL ? 45 : -45])
+    const marginBottom = interpolate(progress.value, [0, 1], [0, -2])
+    const width = interpolate(progress.value, [0, 1], [18, 12])
+    const marginHorizontal =
+      isWeb && isRTL
+        ? { marginRight: marginStart }
+        : {
+            marginLeft: marginStart,
+          }
+
+    return {
+      ...marginHorizontal,
+      backgroundColor,
+      marginBottom,
+      width,
+      transform: [{ rotate: `${rotate}deg` }],
+    }
+  })
+
+  const animatedMiddleBarStyles = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(progress.value, [0, 1], [colors.text, colors.tint])
+    const width = interpolate(progress.value, [0, 1], [18, 16])
+
+    return {
+      backgroundColor,
+      width,
+    }
+  })
+
+  const animatedBottomBarStyles = useAnimatedStyle(() => {
+    const marginTop = interpolate(progress.value, [0, 1], [4, 2])
+    const backgroundColor = interpolateColor(progress.value, [0, 1], [colors.text, colors.tint])
+    const marginStart = interpolate(progress.value, [0, 1], [0, -11.5])
+    const rotate = interpolate(progress.value, [0, 1], [0, isRTL ? -45 : 45])
+    const width = interpolate(progress.value, [0, 1], [18, 12])
+    const marginHorizontal =
+      isWeb && isRTL
+        ? { marginRight: marginStart }
+        : {
+            marginLeft: marginStart,
+          }
+
+    return {
+      ...marginHorizontal,
+      backgroundColor,
+      width,
+      marginTop,
+      transform: [{ rotate: `${rotate}deg` }],
+    }
+  })
+
+  return (
+    <AnimatedPressable {...PressableProps} style={[$container, animatedContainerStyles]}>
+      <Animated.View style={[$topBar, animatedTopBarStyles]} />
+
+      <Animated.View style={[themed($middleBar), animatedMiddleBarStyles]} />
+
+      <Animated.View style={[$bottomBar, animatedBottomBarStyles]} />
+    </AnimatedPressable>
+  )
+}
+
+const barHeight = 2
+
+const $container: ViewStyle = {
+  alignItems: "center",
+  height: 56,
+  justifyContent: "center",
+  width: 56,
+}
+
+const $topBar: ViewStyle = {
+  height: barHeight,
+}
+
+const $middleBar: ViewStyle = {
+  height: barHeight,
+  marginTop: 4,
+}
+
+const $bottomBar: ViewStyle = {
+  height: barHeight,
+}
+
+// @demo remove-file

package/app/screens/DemoShowroomScreen/SectionListWithKeyboardAwareScrollView.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, ReactElement, ReactNode, useCallback } from "react"
+import { ScrollViewProps, SectionList, SectionListProps } from "react-native"
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller"
+
+import { DEFAULT_BOTTOM_OFFSET } from "@/components/Screen"
+
+type SectionType<ItemType> = {
+  name: string
+  description: string
+  data: ItemType[]
+}
+
+type SectionListWithKeyboardAwareScrollViewProps<ItemType> = SectionListProps<ItemType> & {
+  /* Optional function to pass a custom scroll component */
+  renderScrollComponent?: (props: ScrollViewProps) => ReactNode
+  /* Optional additional offset between TextInput bottom edge and keyboard top edge. See https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view#bottomoffset */
+  bottomOffset?: number
+  /* The sections to be rendered in the list */
+  sections: SectionType<ItemType>[]
+  /* Function to render the header for each section */
+  renderSectionHeader: ({ section }: { section: SectionType<ItemType> }) => React.ReactNode
+}
+
+function SectionListWithKeyboardAwareScrollView<ItemType = any>(
+  {
+    renderScrollComponent,
+    bottomOffset = DEFAULT_BOTTOM_OFFSET,
+    contentContainerStyle,
+    ...props
+  }: SectionListWithKeyboardAwareScrollViewProps<ItemType>,
+  ref: React.Ref<SectionList<ItemType>>,
+): ReactElement {
+  const defaultRenderScrollComponent = useCallback(
+    (props: ScrollViewProps) => (
+      <KeyboardAwareScrollView
+        contentContainerStyle={contentContainerStyle}
+        bottomOffset={bottomOffset}
+        {...props}
+      />
+    ),
+    [contentContainerStyle, bottomOffset],
+  )
+
+  return (
+    <SectionList
+      {...props}
+      ref={ref}
+      renderScrollComponent={renderScrollComponent ?? defaultRenderScrollComponent}
+    />
+  )
+}
+
+export default forwardRef(SectionListWithKeyboardAwareScrollView) as <ItemType = any>(
+  props: SectionListWithKeyboardAwareScrollViewProps<ItemType> & {
+    ref?: React.Ref<SectionList<ItemType>>
+  },
+) => ReactElement
+
+// @demo remove-file