ignite-parse-auth-kit 1.0.0

package/app/components/Header.tsx

@@ -0,0 +1,332 @@
+import { ReactElement } from "react"
+import {
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewStyle,
+} from "react-native"
+
+import { isRTL } from "@/i18n"
+import { translate } from "@/i18n/translate"
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+import { ExtendedEdge, useSafeAreaInsetsStyle } from "@/utils/useSafeAreaInsetsStyle"
+
+import { IconTypes, PressableIcon } from "./Icon"
+import { Text, TextProps } from "./Text"
+
+export interface HeaderProps {
+  /**
+   * The layout of the title relative to the action components.
+   * - `center` will force the title to always be centered relative to the header. If the title or the action buttons are too long, the title will be cut off.
+   * - `flex` will attempt to center the title relative to the action buttons. If the action buttons are different widths, the title will be off-center relative to the header.
+   */
+  titleMode?: "center" | "flex"
+  /**
+   * Optional title style override.
+   */
+  titleStyle?: StyleProp<TextStyle>
+  /**
+   * Optional outer title container style override.
+   */
+  titleContainerStyle?: StyleProp<ViewStyle>
+  /**
+   * Optional inner header wrapper style override.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Optional outer header container style override.
+   */
+  containerStyle?: StyleProp<ViewStyle>
+  /**
+   * Background color
+   */
+  backgroundColor?: string
+  /**
+   * Title text to display if not using `tx` or nested components.
+   */
+  title?: TextProps["text"]
+  /**
+   * Title text which is looked up via i18n.
+   */
+  titleTx?: TextProps["tx"]
+  /**
+   * Optional options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  titleTxOptions?: TextProps["txOptions"]
+  /**
+   * Icon that should appear on the left.
+   * Can be used with `onLeftPress`.
+   */
+  leftIcon?: IconTypes
+  /**
+   * An optional tint color for the left icon
+   */
+  leftIconColor?: string
+  /**
+   * Left action text to display if not using `leftTx`.
+   * Can be used with `onLeftPress`. Overrides `leftIcon`.
+   */
+  leftText?: TextProps["text"]
+  /**
+   * Left action text text which is looked up via i18n.
+   * Can be used with `onLeftPress`. Overrides `leftIcon`.
+   */
+  leftTx?: TextProps["tx"]
+  /**
+   * Left action custom ReactElement if the built in action props don't suffice.
+   * Overrides `leftIcon`, `leftTx` and `leftText`.
+   */
+  LeftActionComponent?: ReactElement
+  /**
+   * Optional options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  leftTxOptions?: TextProps["txOptions"]
+  /**
+   * What happens when you press the left icon or text action.
+   */
+  onLeftPress?: TouchableOpacityProps["onPress"]
+  /**
+   * Icon that should appear on the right.
+   * Can be used with `onRightPress`.
+   */
+  rightIcon?: IconTypes
+  /**
+   * An optional tint color for the right icon
+   */
+  rightIconColor?: string
+  /**
+   * Right action text to display if not using `rightTx`.
+   * Can be used with `onRightPress`. Overrides `rightIcon`.
+   */
+  rightText?: TextProps["text"]
+  /**
+   * Right action text text which is looked up via i18n.
+   * Can be used with `onRightPress`. Overrides `rightIcon`.
+   */
+  rightTx?: TextProps["tx"]
+  /**
+   * Right action custom ReactElement if the built in action props don't suffice.
+   * Overrides `rightIcon`, `rightTx` and `rightText`.
+   */
+  RightActionComponent?: ReactElement
+  /**
+   * Optional options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  rightTxOptions?: TextProps["txOptions"]
+  /**
+   * What happens when you press the right icon or text action.
+   */
+  onRightPress?: TouchableOpacityProps["onPress"]
+  /**
+   * Override the default edges for the safe area.
+   */
+  safeAreaEdges?: ExtendedEdge[]
+}
+
+interface HeaderActionProps {
+  backgroundColor?: string
+  icon?: IconTypes
+  iconColor?: string
+  text?: TextProps["text"]
+  tx?: TextProps["tx"]
+  txOptions?: TextProps["txOptions"]
+  onPress?: TouchableOpacityProps["onPress"]
+  ActionComponent?: ReactElement
+}
+
+/**
+ * Header that appears on many screens. Will hold navigation buttons and screen title.
+ * The Header is meant to be used with the `screenOptions.header` option on navigators, routes, or screen components via `navigation.setOptions({ header })`.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Header/}
+ * @param {HeaderProps} props - The props for the `Header` component.
+ * @returns {JSX.Element} The rendered `Header` component.
+ */
+export function Header(props: HeaderProps) {
+  const {
+    theme: { colors },
+    themed,
+  } = useAppTheme()
+  const {
+    backgroundColor = colors.background,
+    LeftActionComponent,
+    leftIcon,
+    leftIconColor,
+    leftText,
+    leftTx,
+    leftTxOptions,
+    onLeftPress,
+    onRightPress,
+    RightActionComponent,
+    rightIcon,
+    rightIconColor,
+    rightText,
+    rightTx,
+    rightTxOptions,
+    safeAreaEdges = ["top"],
+    title,
+    titleMode = "center",
+    titleTx,
+    titleTxOptions,
+    titleContainerStyle: $titleContainerStyleOverride,
+    style: $styleOverride,
+    titleStyle: $titleStyleOverride,
+    containerStyle: $containerStyleOverride,
+  } = props
+
+  const $containerInsets = useSafeAreaInsetsStyle(safeAreaEdges)
+
+  const titleContent = titleTx ? translate(titleTx, titleTxOptions) : title
+
+  return (
+    <View style={[$container, $containerInsets, { backgroundColor }, $containerStyleOverride]}>
+      <View style={[$styles.row, $wrapper, $styleOverride]}>
+        <HeaderAction
+          tx={leftTx}
+          text={leftText}
+          icon={leftIcon}
+          iconColor={leftIconColor}
+          onPress={onLeftPress}
+          txOptions={leftTxOptions}
+          backgroundColor={backgroundColor}
+          ActionComponent={LeftActionComponent}
+        />
+
+        {!!titleContent && (
+          <View
+            style={[
+              $titleWrapperPointerEvents,
+              titleMode === "center" && themed($titleWrapperCenter),
+              titleMode === "flex" && $titleWrapperFlex,
+              $titleContainerStyleOverride,
+            ]}
+          >
+            <Text
+              weight="medium"
+              size="md"
+              text={titleContent}
+              style={[$title, $titleStyleOverride]}
+            />
+          </View>
+        )}
+
+        <HeaderAction
+          tx={rightTx}
+          text={rightText}
+          icon={rightIcon}
+          iconColor={rightIconColor}
+          onPress={onRightPress}
+          txOptions={rightTxOptions}
+          backgroundColor={backgroundColor}
+          ActionComponent={RightActionComponent}
+        />
+      </View>
+    </View>
+  )
+}
+
+/**
+ * @param {HeaderActionProps} props - The props for the `HeaderAction` component.
+ * @returns {JSX.Element} The rendered `HeaderAction` component.
+ */
+function HeaderAction(props: HeaderActionProps) {
+  const { backgroundColor, icon, text, tx, txOptions, onPress, ActionComponent, iconColor } = props
+  const { themed } = useAppTheme()
+
+  const content = tx ? translate(tx, txOptions) : text
+
+  if (ActionComponent) return ActionComponent
+
+  if (content) {
+    return (
+      <TouchableOpacity
+        style={themed([$actionTextContainer, { backgroundColor }])}
+        onPress={onPress}
+        disabled={!onPress}
+        activeOpacity={0.8}
+      >
+        <Text weight="medium" size="md" text={content} style={themed($actionText)} />
+      </TouchableOpacity>
+    )
+  }
+
+  if (icon) {
+    return (
+      <PressableIcon
+        size={24}
+        icon={icon}
+        color={iconColor}
+        onPress={onPress}
+        containerStyle={themed([$actionIconContainer, { backgroundColor }])}
+        style={isRTL ? { transform: [{ rotate: "180deg" }] } : {}}
+      />
+    )
+  }
+
+  return <View style={[$actionFillerContainer, { backgroundColor }]} />
+}
+
+const $wrapper: ViewStyle = {
+  height: 56,
+  alignItems: "center",
+  justifyContent: "space-between",
+}
+
+const $container: ViewStyle = {
+  width: "100%",
+}
+
+const $title: TextStyle = {
+  textAlign: "center",
+}
+
+const $actionTextContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flexGrow: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  paddingHorizontal: spacing.md,
+  zIndex: 2,
+})
+
+const $actionText: ThemedStyle<TextStyle> = ({ colors }) => ({
+  color: colors.tint,
+})
+
+const $actionIconContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flexGrow: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  paddingHorizontal: spacing.md,
+  zIndex: 2,
+})
+
+const $actionFillerContainer: ViewStyle = {
+  width: 16,
+}
+
+const $titleWrapperPointerEvents: ViewStyle = {
+  pointerEvents: "none",
+}
+
+const $titleWrapperCenter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  width: "100%",
+  position: "absolute",
+  paddingHorizontal: spacing.xxl,
+  zIndex: 1,
+})
+
+const $titleWrapperFlex: ViewStyle = {
+  justifyContent: "center",
+  flexGrow: 1,
+}

package/app/components/Icon.tsx

@@ -0,0 +1,140 @@
+import {
+  Image,
+  ImageStyle,
+  StyleProp,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native"
+
+import { useAppTheme } from "@/theme/context"
+
+export type IconTypes = keyof typeof iconRegistry
+
+type BaseIconProps = {
+  /**
+   * The name of the icon
+   */
+  icon: IconTypes
+
+  /**
+   * An optional tint color for the icon
+   */
+  color?: string
+
+  /**
+   * An optional size for the icon. If not provided, the icon will be sized to the icon's resolution.
+   */
+  size?: number
+
+  /**
+   * Style overrides for the icon image
+   */
+  style?: StyleProp<ImageStyle>
+
+  /**
+   * Style overrides for the icon container
+   */
+  containerStyle?: StyleProp<ViewStyle>
+}
+
+type PressableIconProps = Omit<TouchableOpacityProps, "style"> & BaseIconProps
+type IconProps = Omit<ViewProps, "style"> & BaseIconProps
+
+/**
+ * A component to render a registered icon.
+ * It is wrapped in a <TouchableOpacity />
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Icon/}
+ * @param {PressableIconProps} props - The props for the `PressableIcon` component.
+ * @returns {JSX.Element} The rendered `PressableIcon` component.
+ */
+export function PressableIcon(props: PressableIconProps) {
+  const {
+    icon,
+    color,
+    size,
+    style: $imageStyleOverride,
+    containerStyle: $containerStyleOverride,
+    ...pressableProps
+  } = props
+
+  const { theme } = useAppTheme()
+
+  const $imageStyle: StyleProp<ImageStyle> = [
+    $imageStyleBase,
+    { tintColor: color ?? theme.colors.text },
+    size !== undefined && { width: size, height: size },
+    $imageStyleOverride,
+  ]
+
+  return (
+    <TouchableOpacity {...pressableProps} style={$containerStyleOverride}>
+      <Image style={$imageStyle} source={iconRegistry[icon]} />
+    </TouchableOpacity>
+  )
+}
+
+/**
+ * A component to render a registered icon.
+ * It is wrapped in a <View />, use `PressableIcon` if you want to react to input
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Icon/}
+ * @param {IconProps} props - The props for the `Icon` component.
+ * @returns {JSX.Element} The rendered `Icon` component.
+ */
+export function Icon(props: IconProps) {
+  const {
+    icon,
+    color,
+    size,
+    style: $imageStyleOverride,
+    containerStyle: $containerStyleOverride,
+    ...viewProps
+  } = props
+
+  const { theme } = useAppTheme()
+
+  const $imageStyle: StyleProp<ImageStyle> = [
+    $imageStyleBase,
+    { tintColor: color ?? theme.colors.text },
+    size !== undefined && { width: size, height: size },
+    $imageStyleOverride,
+  ]
+
+  return (
+    <View {...viewProps} style={$containerStyleOverride}>
+      <Image style={$imageStyle} source={iconRegistry[icon]} />
+    </View>
+  )
+}
+
+export const iconRegistry = {
+  back: require("@assets/icons/back.png"),
+  bell: require("@assets/icons/bell.png"),
+  caretLeft: require("@assets/icons/caretLeft.png"),
+  caretRight: require("@assets/icons/caretRight.png"),
+  check: require("@assets/icons/check.png"),
+  clap: require("@assets/icons/demo/clap.png"), // @demo remove-current-line
+  community: require("@assets/icons/demo/community.png"), // @demo remove-current-line
+  components: require("@assets/icons/demo/components.png"), // @demo remove-current-line
+  debug: require("@assets/icons/demo/debug.png"), // @demo remove-current-line
+  github: require("@assets/icons/demo/github.png"), // @demo remove-current-line
+  heart: require("@assets/icons/demo/heart.png"), // @demo remove-current-line
+  hidden: require("@assets/icons/hidden.png"),
+  ladybug: require("@assets/icons/ladybug.png"),
+  lock: require("@assets/icons/lock.png"),
+  menu: require("@assets/icons/menu.png"),
+  more: require("@assets/icons/more.png"),
+  pin: require("@assets/icons/demo/pin.png"), // @demo remove-current-line
+  podcast: require("@assets/icons/demo/podcast.png"), // @demo remove-current-line
+  settings: require("@assets/icons/settings.png"),
+  slack: require("@assets/icons/demo/slack.png"), // @demo remove-current-line
+  view: require("@assets/icons/view.png"),
+  x: require("@assets/icons/x.png"),
+  google: require("@assets/icons/google.png"), // @demo remove-current-line
+}
+
+const $imageStyleBase: ImageStyle = {
+  resizeMode: "contain",
+}

package/app/components/ListItem.tsx

@@ -0,0 +1,243 @@
+import { forwardRef, ReactElement, ComponentType } from "react"
+import {
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewStyle,
+} from "react-native"
+
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+import { Icon, IconTypes } from "./Icon"
+import { Text, TextProps } from "./Text"
+
+export interface ListItemProps extends TouchableOpacityProps {
+  /**
+   * How tall the list item should be.
+   * Default: 56
+   */
+  height?: number
+  /**
+   * Whether to show the top separator.
+   * Default: false
+   */
+  topSeparator?: boolean
+  /**
+   * Whether to show the bottom separator.
+   * Default: false
+   */
+  bottomSeparator?: boolean
+  /**
+   * Text to display if not using `tx` or nested components.
+   */
+  text?: TextProps["text"]
+  /**
+   * Text which is looked up via i18n.
+   */
+  tx?: TextProps["tx"]
+  /**
+   * Children components.
+   */
+  children?: TextProps["children"]
+  /**
+   * Optional options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  txOptions?: TextProps["txOptions"]
+  /**
+   * Optional text style override.
+   */
+  textStyle?: StyleProp<TextStyle>
+  /**
+   * Pass any additional props directly to the Text component.
+   */
+  TextProps?: TextProps
+  /**
+   * Optional View container style override.
+   */
+  containerStyle?: StyleProp<ViewStyle>
+  /**
+   * Optional TouchableOpacity style override.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Icon that should appear on the left.
+   */
+  leftIcon?: IconTypes
+  /**
+   * An optional tint color for the left icon
+   */
+  leftIconColor?: string
+  /**
+   * Icon that should appear on the right.
+   */
+  rightIcon?: IconTypes
+  /**
+   * An optional tint color for the right icon
+   */
+  rightIconColor?: string
+  /**
+   * Right action custom ReactElement.
+   * Overrides `rightIcon`.
+   */
+  RightComponent?: ReactElement
+  /**
+   * Left action custom ReactElement.
+   * Overrides `leftIcon`.
+   */
+  LeftComponent?: ReactElement
+}
+
+interface ListItemActionProps {
+  icon?: IconTypes
+  iconColor?: string
+  Component?: ReactElement
+  size: number
+  side: "left" | "right"
+}
+
+/**
+ * A styled row component that can be used in FlatList, SectionList, or by itself.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/ListItem/}
+ * @param {ListItemProps} props - The props for the `ListItem` component.
+ * @returns {JSX.Element} The rendered `ListItem` component.
+ */
+export const ListItem = forwardRef<View, ListItemProps>(function ListItem(
+  props: ListItemProps,
+  ref,
+) {
+  const {
+    bottomSeparator,
+    children,
+    height = 56,
+    LeftComponent,
+    leftIcon,
+    leftIconColor,
+    RightComponent,
+    rightIcon,
+    rightIconColor,
+    style,
+    text,
+    TextProps,
+    topSeparator,
+    tx,
+    txOptions,
+    textStyle: $textStyleOverride,
+    containerStyle: $containerStyleOverride,
+    ...TouchableOpacityProps
+  } = props
+  const { themed } = useAppTheme()
+
+  const isTouchable =
+    TouchableOpacityProps.onPress !== undefined ||
+    TouchableOpacityProps.onPressIn !== undefined ||
+    TouchableOpacityProps.onPressOut !== undefined ||
+    TouchableOpacityProps.onLongPress !== undefined
+
+  const $textStyles = [$textStyle, $textStyleOverride, TextProps?.style]
+
+  const $containerStyles = [
+    topSeparator && $separatorTop,
+    bottomSeparator && $separatorBottom,
+    $containerStyleOverride,
+  ]
+
+  const $touchableStyles = [$styles.row, $touchableStyle, { minHeight: height }, style]
+
+  const Wrapper: ComponentType<TouchableOpacityProps> = isTouchable ? TouchableOpacity : View
+
+  return (
+    <View ref={ref} style={themed($containerStyles)}>
+      <Wrapper {...TouchableOpacityProps} style={$touchableStyles}>
+        <ListItemAction
+          side="left"
+          size={height}
+          icon={leftIcon}
+          iconColor={leftIconColor}
+          Component={LeftComponent}
+        />
+
+        <Text {...TextProps} tx={tx} text={text} txOptions={txOptions} style={themed($textStyles)}>
+          {children}
+        </Text>
+
+        <ListItemAction
+          side="right"
+          size={height}
+          icon={rightIcon}
+          iconColor={rightIconColor}
+          Component={RightComponent}
+        />
+      </Wrapper>
+    </View>
+  )
+})
+
+/**
+ * @param {ListItemActionProps} props - The props for the `ListItemAction` component.
+ * @returns {JSX.Element | null} The rendered `ListItemAction` component.
+ */
+function ListItemAction(props: ListItemActionProps) {
+  const { icon, Component, iconColor, size, side } = props
+  const { themed } = useAppTheme()
+
+  const $iconContainerStyles = [$iconContainer]
+
+  if (Component) return Component
+
+  if (icon !== undefined) {
+    return (
+      <Icon
+        size={24}
+        icon={icon}
+        color={iconColor}
+        containerStyle={themed([
+          $iconContainerStyles,
+          side === "left" && $iconContainerLeft,
+          side === "right" && $iconContainerRight,
+          { height: size },
+        ])}
+      />
+    )
+  }
+
+  return null
+}
+
+const $separatorTop: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  borderTopWidth: 1,
+  borderTopColor: colors.separator,
+})
+
+const $separatorBottom: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  borderBottomWidth: 1,
+  borderBottomColor: colors.separator,
+})
+
+const $textStyle: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  paddingVertical: spacing.xs,
+  alignSelf: "center",
+  flexGrow: 1,
+  flexShrink: 1,
+})
+
+const $touchableStyle: ViewStyle = {
+  alignItems: "flex-start",
+}
+
+const $iconContainer: ViewStyle = {
+  justifyContent: "center",
+  alignItems: "center",
+  flexGrow: 0,
+}
+const $iconContainerLeft: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginEnd: spacing.md,
+})
+
+const $iconContainerRight: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginStart: spacing.md,
+})