ignite-parse-auth-kit 1.0.0

package/app/components/TextField.tsx

@@ -0,0 +1,292 @@
+import { ComponentType, forwardRef, Ref, useImperativeHandle, useRef } from "react"
+import {
+  ImageStyle,
+  StyleProp,
+  // eslint-disable-next-line no-restricted-imports
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native"
+
+import { isRTL } from "@/i18n"
+import { translate } from "@/i18n/translate"
+import type { ThemedStyle, ThemedStyleArray } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+import { Text, TextProps } from "./Text"
+
+export interface TextFieldAccessoryProps {
+  style: StyleProp<ViewStyle | TextStyle | ImageStyle>
+  status: TextFieldProps["status"]
+  multiline: boolean
+  editable: boolean
+}
+
+export interface TextFieldProps extends Omit<TextInputProps, "ref"> {
+  /**
+   * A style modifier for different input states.
+   */
+  status?: "error" | "disabled"
+  /**
+   * The label text to display if not using `labelTx`.
+   */
+  label?: TextProps["text"]
+  /**
+   * Label text which is looked up via i18n.
+   */
+  labelTx?: TextProps["tx"]
+  /**
+   * Optional label options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  labelTxOptions?: TextProps["txOptions"]
+  /**
+   * Pass any additional props directly to the label Text component.
+   */
+  LabelTextProps?: TextProps
+  /**
+   * The helper text to display if not using `helperTx`.
+   */
+  helper?: TextProps["text"]
+  /**
+   * Helper text which is looked up via i18n.
+   */
+  helperTx?: TextProps["tx"]
+  /**
+   * Optional helper options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  helperTxOptions?: TextProps["txOptions"]
+  /**
+   * Pass any additional props directly to the helper Text component.
+   */
+  HelperTextProps?: TextProps
+  /**
+   * The placeholder text to display if not using `placeholderTx`.
+   */
+  placeholder?: TextProps["text"]
+  /**
+   * Placeholder text which is looked up via i18n.
+   */
+  placeholderTx?: TextProps["tx"]
+  /**
+   * Optional placeholder options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  placeholderTxOptions?: TextProps["txOptions"]
+  /**
+   * Optional input style override.
+   */
+  style?: StyleProp<TextStyle>
+  /**
+   * Style overrides for the container
+   */
+  containerStyle?: StyleProp<ViewStyle>
+  /**
+   * Style overrides for the input wrapper
+   */
+  inputWrapperStyle?: StyleProp<ViewStyle>
+  /**
+   * An optional component to render on the right side of the input.
+   * Example: `RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} color={props.editable ? colors.textDim : colors.text} />}`
+   * Note: It is a good idea to memoize this.
+   */
+  RightAccessory?: ComponentType<TextFieldAccessoryProps>
+  /**
+   * An optional component to render on the left side of the input.
+   * Example: `LeftAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} color={props.editable ? colors.textDim : colors.text} />}`
+   * Note: It is a good idea to memoize this.
+   */
+  LeftAccessory?: ComponentType<TextFieldAccessoryProps>
+}
+
+/**
+ * A component that allows for the entering and editing of text.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/TextField/}
+ * @param {TextFieldProps} props - The props for the `TextField` component.
+ * @returns {JSX.Element} The rendered `TextField` component.
+ */
+export const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextInput>) {
+  const {
+    labelTx,
+    label,
+    labelTxOptions,
+    placeholderTx,
+    placeholder,
+    placeholderTxOptions,
+    helper,
+    helperTx,
+    helperTxOptions,
+    status,
+    RightAccessory,
+    LeftAccessory,
+    HelperTextProps,
+    LabelTextProps,
+    style: $inputStyleOverride,
+    containerStyle: $containerStyleOverride,
+    inputWrapperStyle: $inputWrapperStyleOverride,
+    ...TextInputProps
+  } = props
+  const input = useRef<TextInput>(null)
+
+  const {
+    themed,
+    theme: { colors },
+  } = useAppTheme()
+
+  const disabled = TextInputProps.editable === false || status === "disabled"
+
+  const placeholderContent = placeholderTx
+    ? translate(placeholderTx, placeholderTxOptions)
+    : placeholder
+
+  const $containerStyles = [$containerStyleOverride]
+
+  const $labelStyles = [$labelStyle, LabelTextProps?.style]
+
+  const $inputWrapperStyles = [
+    $styles.row,
+    $inputWrapperStyle,
+    status === "error" && { borderColor: colors.error },
+    TextInputProps.multiline && { minHeight: 112 },
+    LeftAccessory && { paddingStart: 0 },
+    RightAccessory && { paddingEnd: 0 },
+    $inputWrapperStyleOverride,
+  ]
+
+  const $inputStyles: ThemedStyleArray<TextStyle> = [
+    $inputStyle,
+    disabled && { color: colors.textDim },
+    isRTL && { textAlign: "right" as TextStyle["textAlign"] },
+    TextInputProps.multiline && { height: "auto" },
+    $inputStyleOverride,
+  ]
+
+  const $helperStyles = [
+    $helperStyle,
+    status === "error" && { color: colors.error },
+    HelperTextProps?.style,
+  ]
+
+  /**
+   *
+   */
+  function focusInput() {
+    if (disabled) return
+
+    input.current?.focus()
+  }
+
+  useImperativeHandle(ref, () => input.current as TextInput)
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      style={$containerStyles}
+      onPress={focusInput}
+      accessibilityState={{ disabled }}
+    >
+      {!!(label || labelTx) && (
+        <Text
+          preset="formLabel"
+          text={label}
+          tx={labelTx}
+          txOptions={labelTxOptions}
+          {...LabelTextProps}
+          style={themed($labelStyles)}
+        />
+      )}
+
+      <View style={themed($inputWrapperStyles)}>
+        {!!LeftAccessory && (
+          <LeftAccessory
+            style={themed($leftAccessoryStyle)}
+            status={status}
+            editable={!disabled}
+            multiline={TextInputProps.multiline ?? false}
+          />
+        )}
+
+        <TextInput
+          ref={input}
+          underlineColorAndroid={colors.transparent}
+          textAlignVertical="top"
+          placeholder={placeholderContent}
+          placeholderTextColor={colors.textDim}
+          {...TextInputProps}
+          editable={!disabled}
+          style={themed($inputStyles)}
+        />
+
+        {!!RightAccessory && (
+          <RightAccessory
+            style={themed($rightAccessoryStyle)}
+            status={status}
+            editable={!disabled}
+            multiline={TextInputProps.multiline ?? false}
+          />
+        )}
+      </View>
+
+      {!!(helper || helperTx) && (
+        <Text
+          preset="formHelper"
+          text={helper}
+          tx={helperTx}
+          txOptions={helperTxOptions}
+          {...HelperTextProps}
+          style={themed($helperStyles)}
+        />
+      )}
+    </TouchableOpacity>
+  )
+})
+
+const $labelStyle: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.xs,
+})
+
+const $inputWrapperStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  alignItems: "flex-start",
+  borderWidth: 1,
+  borderRadius: 4,
+  backgroundColor: colors.palette.neutral200,
+  borderColor: colors.palette.neutral400,
+  overflow: "hidden",
+})
+
+const $inputStyle: ThemedStyle<TextStyle> = ({ colors, typography, spacing }) => ({
+  flex: 1,
+  alignSelf: "stretch",
+  fontFamily: typography.primary.normal,
+  color: colors.text,
+  fontSize: 16,
+  height: 24,
+  // https://github.com/facebook/react-native/issues/21720#issuecomment-532642093
+  paddingVertical: 0,
+  paddingHorizontal: 0,
+  marginVertical: spacing.xs,
+  marginHorizontal: spacing.sm,
+})
+
+const $helperStyle: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginTop: spacing.xs,
+})
+
+const $rightAccessoryStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginEnd: spacing.xs,
+  height: 40,
+  justifyContent: "center",
+  alignItems: "center",
+})
+
+const $leftAccessoryStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginStart: spacing.xs,
+  height: 40,
+  justifyContent: "center",
+  alignItems: "center",
+})

package/app/components/Toggle/Checkbox.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useCallback } from "react"
+import { Image, ImageStyle, Animated, StyleProp, View, ViewStyle } from "react-native"
+
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+import { iconRegistry, IconTypes } from "../Icon"
+import { $inputOuterBase, BaseToggleInputProps, ToggleProps, Toggle } from "./Toggle"
+
+export interface CheckboxToggleProps extends Omit<ToggleProps<CheckboxInputProps>, "ToggleInput"> {
+  /**
+   * Optional style prop that affects the Image component.
+   */
+  inputDetailStyle?: ImageStyle
+  /**
+   * Checkbox-only prop that changes the icon used for the "on" state.
+   */
+  icon?: IconTypes
+}
+
+interface CheckboxInputProps extends BaseToggleInputProps<CheckboxToggleProps> {
+  icon?: CheckboxToggleProps["icon"]
+}
+/**
+ * @param {CheckboxToggleProps} props - The props for the `Checkbox` component.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Checkbox}
+ * @returns {JSX.Element} The rendered `Checkbox` component.
+ */
+export function Checkbox(props: CheckboxToggleProps) {
+  const { icon, ...rest } = props
+  const checkboxInput = useCallback(
+    (toggleProps: CheckboxInputProps) => <CheckboxInput {...toggleProps} icon={icon} />,
+    [icon],
+  )
+  return <Toggle accessibilityRole="checkbox" {...rest} ToggleInput={checkboxInput} />
+}
+
+function CheckboxInput(props: CheckboxInputProps) {
+  const {
+    on,
+    status,
+    disabled,
+    icon = "check",
+    outerStyle: $outerStyleOverride,
+    innerStyle: $innerStyleOverride,
+    detailStyle: $detailStyleOverride,
+  } = props
+
+  const {
+    theme: { colors },
+  } = useAppTheme()
+
+  const opacity = useRef(new Animated.Value(0))
+
+  useEffect(() => {
+    Animated.timing(opacity.current, {
+      toValue: on ? 1 : 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start()
+  }, [on])
+
+  const offBackgroundColor = [
+    disabled && colors.palette.neutral400,
+    status === "error" && colors.errorBackground,
+    colors.palette.neutral200,
+  ].filter(Boolean)[0]
+
+  const outerBorderColor = [
+    disabled && colors.palette.neutral400,
+    status === "error" && colors.error,
+    !on && colors.palette.neutral800,
+    colors.palette.secondary500,
+  ].filter(Boolean)[0]
+
+  const onBackgroundColor = [
+    disabled && colors.transparent,
+    status === "error" && colors.errorBackground,
+    colors.palette.secondary500,
+  ].filter(Boolean)[0]
+
+  const iconTintColor = [
+    disabled && colors.palette.neutral600,
+    status === "error" && colors.error,
+    colors.palette.accent100,
+  ].filter(Boolean)[0]
+
+  return (
+    <View
+      style={[
+        $inputOuter,
+        { backgroundColor: offBackgroundColor, borderColor: outerBorderColor },
+        $outerStyleOverride,
+      ]}
+    >
+      <Animated.View
+        style={[
+          $styles.toggleInner,
+          { backgroundColor: onBackgroundColor },
+          $innerStyleOverride,
+          { opacity: opacity.current },
+        ]}
+      >
+        <Image
+          source={icon ? iconRegistry[icon] : iconRegistry.check}
+          style={[
+            $checkboxDetail,
+            !!iconTintColor && { tintColor: iconTintColor },
+            $detailStyleOverride as ImageStyle,
+          ]}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+const $checkboxDetail: ImageStyle = {
+  width: 20,
+  height: 20,
+  resizeMode: "contain",
+}
+
+const $inputOuter: StyleProp<ViewStyle> = [$inputOuterBase, { borderRadius: 4 }]

package/app/components/Toggle/Radio.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useRef } from "react"
+import { StyleProp, View, ViewStyle, Animated } from "react-native"
+
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+import { $inputOuterBase, BaseToggleInputProps, ToggleProps, Toggle } from "./Toggle"
+
+export interface RadioToggleProps extends Omit<ToggleProps<RadioInputProps>, "ToggleInput"> {
+  /**
+   * Optional style prop that affects the dot View.
+   */
+  inputDetailStyle?: ViewStyle
+}
+
+interface RadioInputProps extends BaseToggleInputProps<RadioToggleProps> {}
+
+/**
+ * @param {RadioToggleProps} props - The props for the `Radio` component.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Radio}
+ * @returns {JSX.Element} The rendered `Radio` component.
+ */
+export function Radio(props: RadioToggleProps) {
+  return <Toggle accessibilityRole="radio" {...props} ToggleInput={RadioInput} />
+}
+
+function RadioInput(props: RadioInputProps) {
+  const {
+    on,
+    status,
+    disabled,
+    outerStyle: $outerStyleOverride,
+    innerStyle: $innerStyleOverride,
+    detailStyle: $detailStyleOverride,
+  } = props
+
+  const {
+    theme: { colors },
+  } = useAppTheme()
+
+  const opacity = useRef(new Animated.Value(0))
+
+  useEffect(() => {
+    Animated.timing(opacity.current, {
+      toValue: on ? 1 : 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start()
+  }, [on])
+
+  const offBackgroundColor = [
+    disabled && colors.palette.neutral400,
+    status === "error" && colors.errorBackground,
+    colors.palette.neutral200,
+  ].filter(Boolean)[0]
+
+  const outerBorderColor = [
+    disabled && colors.palette.neutral400,
+    status === "error" && colors.error,
+    !on && colors.palette.neutral800,
+    colors.palette.secondary500,
+  ].filter(Boolean)[0]
+
+  const onBackgroundColor = [
+    disabled && colors.transparent,
+    status === "error" && colors.errorBackground,
+    colors.palette.neutral100,
+  ].filter(Boolean)[0]
+
+  const dotBackgroundColor = [
+    disabled && colors.palette.neutral600,
+    status === "error" && colors.error,
+    colors.palette.secondary500,
+  ].filter(Boolean)[0]
+
+  return (
+    <View
+      style={[
+        $inputOuter,
+        { backgroundColor: offBackgroundColor, borderColor: outerBorderColor },
+        $outerStyleOverride,
+      ]}
+    >
+      <Animated.View
+        style={[
+          $styles.toggleInner,
+          { backgroundColor: onBackgroundColor },
+          $innerStyleOverride,
+          { opacity: opacity.current },
+        ]}
+      >
+        <View
+          style={[$radioDetail, { backgroundColor: dotBackgroundColor }, $detailStyleOverride]}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+const $radioDetail: ViewStyle = {
+  width: 12,
+  height: 12,
+  borderRadius: 6,
+}
+
+const $inputOuter: StyleProp<ViewStyle> = [$inputOuterBase, { borderRadius: 12 }]