ignite-parse-auth-kit 1.0.0

package/app/components/Toggle/Switch.tsx

@@ -0,0 +1,264 @@
+import { useEffect, useMemo, useRef, useCallback } from "react"
+import { Animated, Image, ImageStyle, Platform, StyleProp, View, ViewStyle } from "react-native"
+
+import { iconRegistry } from "@/components/Icon"
+import { isRTL } from "@/i18n"
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+import { $inputOuterBase, BaseToggleInputProps, Toggle, ToggleProps } from "./Toggle"
+
+export interface SwitchToggleProps extends Omit<ToggleProps<SwitchInputProps>, "ToggleInput"> {
+  /**
+   * Switch-only prop that adds a text/icon label for on/off states.
+   */
+  accessibilityMode?: "text" | "icon"
+  /**
+   * Optional style prop that affects the knob View.
+   * Note: `width` and `height` rules should be points (numbers), not percentages.
+   */
+  inputDetailStyle?: Omit<ViewStyle, "width" | "height"> & { width?: number; height?: number }
+}
+
+interface SwitchInputProps extends BaseToggleInputProps<SwitchToggleProps> {
+  accessibilityMode?: SwitchToggleProps["accessibilityMode"]
+}
+
+/**
+ * @param {SwitchToggleProps} props - The props for the `Switch` component.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Switch}
+ * @returns {JSX.Element} The rendered `Switch` component.
+ */
+export function Switch(props: SwitchToggleProps) {
+  const { accessibilityMode, ...rest } = props
+  const switchInput = useCallback(
+    (toggleProps: SwitchInputProps) => (
+      <SwitchInput {...toggleProps} accessibilityMode={accessibilityMode} />
+    ),
+    [accessibilityMode],
+  )
+  return <Toggle accessibilityRole="switch" {...rest} ToggleInput={switchInput} />
+}
+
+function SwitchInput(props: SwitchInputProps) {
+  const {
+    on,
+    status,
+    disabled,
+    outerStyle: $outerStyleOverride,
+    innerStyle: $innerStyleOverride,
+    detailStyle: $detailStyleOverride,
+  } = props
+
+  const {
+    theme: { colors },
+    themed,
+  } = useAppTheme()
+
+  const animate = useRef(new Animated.Value(on ? 1 : 0)) // Initial value is set based on isActive
+  const opacity = useRef(new Animated.Value(0))
+
+  useEffect(() => {
+    Animated.timing(animate.current, {
+      toValue: on ? 1 : 0,
+      duration: 300,
+      useNativeDriver: true, // Enable native driver for smoother animations
+    }).start()
+  }, [on])
+
+  useEffect(() => {
+    Animated.timing(opacity.current, {
+      toValue: on ? 1 : 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start()
+  }, [on])
+
+  const knobSizeFallback = 2
+
+  const knobWidth = [$detailStyleOverride?.width, $switchDetail?.width, knobSizeFallback].find(
+    (v) => typeof v === "number",
+  )
+
+  const knobHeight = [$detailStyleOverride?.height, $switchDetail?.height, knobSizeFallback].find(
+    (v) => typeof v === "number",
+  )
+
+  const offBackgroundColor = [
+    disabled && colors.palette.neutral400,
+    status === "error" && colors.errorBackground,
+    colors.palette.neutral300,
+  ].filter(Boolean)[0]
+
+  const onBackgroundColor = [
+    disabled && colors.transparent,
+    status === "error" && colors.errorBackground,
+    colors.palette.secondary500,
+  ].filter(Boolean)[0]
+
+  const knobBackgroundColor = (function () {
+    if (on) {
+      return [
+        $detailStyleOverride?.backgroundColor,
+        status === "error" && colors.error,
+        disabled && colors.palette.neutral600,
+        colors.palette.neutral100,
+      ].filter(Boolean)[0]
+    } else {
+      return [
+        $innerStyleOverride?.backgroundColor,
+        disabled && colors.palette.neutral600,
+        status === "error" && colors.error,
+        colors.palette.neutral200,
+      ].filter(Boolean)[0]
+    }
+  })()
+
+  const rtlAdjustment = isRTL ? -1 : 1
+  const $themedSwitchInner = useMemo(() => themed([$styles.toggleInner, $switchInner]), [themed])
+
+  const offsetLeft = ($innerStyleOverride?.paddingStart ||
+    $innerStyleOverride?.paddingLeft ||
+    $themedSwitchInner?.paddingStart ||
+    $themedSwitchInner?.paddingLeft ||
+    0) as number
+
+  const offsetRight = ($innerStyleOverride?.paddingEnd ||
+    $innerStyleOverride?.paddingRight ||
+    $themedSwitchInner?.paddingEnd ||
+    $themedSwitchInner?.paddingRight ||
+    0) as number
+
+  const outputRange =
+    Platform.OS === "web"
+      ? isRTL
+        ? [+(knobWidth || 0) + offsetRight, offsetLeft]
+        : [offsetLeft, +(knobWidth || 0) + offsetRight]
+      : [rtlAdjustment * offsetLeft, rtlAdjustment * (+(knobWidth || 0) + offsetRight)]
+
+  const $animatedSwitchKnob = animate.current.interpolate({
+    inputRange: [0, 1],
+    outputRange,
+  })
+
+  return (
+    <View style={[$inputOuter, { backgroundColor: offBackgroundColor }, $outerStyleOverride]}>
+      <Animated.View
+        style={[
+          $themedSwitchInner,
+          { backgroundColor: onBackgroundColor },
+          $innerStyleOverride,
+          { opacity: opacity.current },
+        ]}
+      />
+
+      <SwitchAccessibilityLabel {...props} role="on" />
+      <SwitchAccessibilityLabel {...props} role="off" />
+
+      <Animated.View
+        style={[
+          $switchDetail,
+          $detailStyleOverride,
+          { transform: [{ translateX: $animatedSwitchKnob }] },
+          { width: knobWidth, height: knobHeight },
+          { backgroundColor: knobBackgroundColor },
+        ]}
+      />
+    </View>
+  )
+}
+
+/**
+ * @param {ToggleInputProps & { role: "on" | "off" }} props - The props for the `SwitchAccessibilityLabel` component.
+ * @returns {JSX.Element} The rendered `SwitchAccessibilityLabel` component.
+ */
+function SwitchAccessibilityLabel(props: SwitchInputProps & { role: "on" | "off" }) {
+  const { on, disabled, status, accessibilityMode, role, innerStyle, detailStyle } = props
+
+  const {
+    theme: { colors },
+  } = useAppTheme()
+
+  if (!accessibilityMode) return null
+
+  const shouldLabelBeVisible = (on && role === "on") || (!on && role === "off")
+
+  const $switchAccessibilityStyle: StyleProp<ViewStyle> = [
+    $switchAccessibility,
+    role === "off" && { end: "5%" },
+    role === "on" && { left: "5%" },
+  ]
+
+  const color = (function () {
+    if (disabled) return colors.palette.neutral600
+    if (status === "error") return colors.error
+    if (!on) return innerStyle?.backgroundColor || colors.palette.secondary500
+    return detailStyle?.backgroundColor || colors.palette.neutral100
+  })()
+
+  return (
+    <View style={$switchAccessibilityStyle}>
+      {accessibilityMode === "text" && shouldLabelBeVisible && (
+        <View
+          style={[
+            role === "on" && $switchAccessibilityLine,
+            role === "on" && { backgroundColor: color },
+            role === "off" && $switchAccessibilityCircle,
+            role === "off" && { borderColor: color },
+          ]}
+        />
+      )}
+
+      {accessibilityMode === "icon" && shouldLabelBeVisible && (
+        <Image
+          style={[$switchAccessibilityIcon, { tintColor: color }]}
+          source={role === "off" ? iconRegistry.hidden : iconRegistry.view}
+        />
+      )}
+    </View>
+  )
+}
+
+const $inputOuter: StyleProp<ViewStyle> = [
+  $inputOuterBase,
+  { height: 32, width: 56, borderRadius: 16, borderWidth: 0 },
+]
+
+const $switchInner: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  borderColor: colors.transparent,
+  position: "absolute",
+  paddingStart: 4,
+  paddingEnd: 4,
+})
+
+const $switchDetail: SwitchToggleProps["inputDetailStyle"] = {
+  borderRadius: 12,
+  position: "absolute",
+  width: 24,
+  height: 24,
+}
+
+const $switchAccessibility: ViewStyle = {
+  width: "40%",
+  justifyContent: "center",
+  alignItems: "center",
+}
+
+const $switchAccessibilityIcon: ImageStyle = {
+  width: 14,
+  height: 14,
+  resizeMode: "contain",
+}
+
+const $switchAccessibilityLine: ViewStyle = {
+  width: 2,
+  height: 12,
+}
+
+const $switchAccessibilityCircle: ViewStyle = {
+  borderWidth: 2,
+  width: 12,
+  height: 12,
+  borderRadius: 6,
+}

package/app/components/Toggle/Toggle.tsx

@@ -0,0 +1,285 @@
+import { ComponentType, FC, useMemo } from "react"
+import {
+  GestureResponderEvent,
+  ImageStyle,
+  StyleProp,
+  SwitchProps,
+  TextInputProps,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native"
+
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+import { Text, TextProps } from "../Text"
+
+export interface ToggleProps<T> extends Omit<TouchableOpacityProps, "style"> {
+  /**
+   * A style modifier for different input states.
+   */
+  status?: "error" | "disabled"
+  /**
+   * If false, input is not editable. The default value is true.
+   */
+  editable?: TextInputProps["editable"]
+  /**
+   * The value of the field. If true the component will be turned on.
+   */
+  value?: boolean
+  /**
+   * Invoked with the new value when the value changes.
+   */
+  onValueChange?: SwitchProps["onValueChange"]
+  /**
+   * Style overrides for the container
+   */
+  containerStyle?: StyleProp<ViewStyle>
+  /**
+   * Style overrides for the input wrapper
+   */
+  inputWrapperStyle?: StyleProp<ViewStyle>
+  /**
+   * Optional input wrapper style override.
+   * This gives the inputs their size, shape, "off" background-color, and outer border.
+   */
+  inputOuterStyle?: ViewStyle
+  /**
+   * Optional input style override.
+   * This gives the inputs their inner characteristics and "on" background-color.
+   */
+  inputInnerStyle?: ViewStyle
+  /**
+   * Optional detail style override.
+   * See Checkbox, Radio, and Switch for more details
+   */
+  inputDetailStyle?: ViewStyle
+  /**
+   * The position of the label relative to the action component.
+   * Default: right
+   */
+  labelPosition?: "left" | "right"
+  /**
+   * 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"]
+  /**
+   * Style overrides for label text.
+   */
+  labelStyle?: StyleProp<TextStyle>
+  /**
+   * 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 input control for the type of toggle component
+   */
+  ToggleInput: FC<BaseToggleInputProps<T>>
+}
+
+export interface BaseToggleInputProps<T> {
+  on: boolean
+  status: ToggleProps<T>["status"]
+  disabled: boolean
+  outerStyle: ViewStyle
+  innerStyle: ViewStyle
+  detailStyle: ViewStyle | ImageStyle
+}
+
+/**
+ * Renders a boolean input.
+ * This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.
+ * @param {ToggleProps} props - The props for the `Toggle` component.
+ * @returns {JSX.Element} The rendered `Toggle` component.
+ */
+export function Toggle<T>(props: ToggleProps<T>) {
+  const {
+    editable = true,
+    status,
+    value,
+    onPress,
+    onValueChange,
+    labelPosition = "right",
+    helper,
+    helperTx,
+    helperTxOptions,
+    HelperTextProps,
+    containerStyle: $containerStyleOverride,
+    inputWrapperStyle: $inputWrapperStyleOverride,
+    ToggleInput,
+    accessibilityRole,
+    ...WrapperProps
+  } = props
+
+  const {
+    theme: { colors },
+    themed,
+  } = useAppTheme()
+
+  const disabled = editable === false || status === "disabled" || props.disabled
+
+  const Wrapper = useMemo(
+    () => (disabled ? View : TouchableOpacity) as ComponentType<TouchableOpacityProps | ViewProps>,
+    [disabled],
+  )
+
+  const $containerStyles = [$containerStyleOverride]
+  const $inputWrapperStyles = [$styles.row, $inputWrapper, $inputWrapperStyleOverride]
+  const $helperStyles = themed([
+    $helper,
+    status === "error" && { color: colors.error },
+    HelperTextProps?.style,
+  ])
+
+  /**
+   * @param {GestureResponderEvent} e - The event object.
+   */
+  function handlePress(e: GestureResponderEvent) {
+    if (disabled) return
+    onValueChange?.(!value)
+    onPress?.(e)
+  }
+
+  return (
+    <Wrapper
+      activeOpacity={1}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={{ checked: value, disabled }}
+      {...WrapperProps}
+      style={$containerStyles}
+      onPress={handlePress}
+    >
+      <View style={$inputWrapperStyles}>
+        {labelPosition === "left" && <FieldLabel<T> {...props} labelPosition={labelPosition} />}
+
+        <ToggleInput
+          on={!!value}
+          disabled={!!disabled}
+          status={status}
+          outerStyle={props.inputOuterStyle ?? {}}
+          innerStyle={props.inputInnerStyle ?? {}}
+          detailStyle={props.inputDetailStyle ?? {}}
+        />
+
+        {labelPosition === "right" && <FieldLabel<T> {...props} labelPosition={labelPosition} />}
+      </View>
+
+      {!!(helper || helperTx) && (
+        <Text
+          preset="formHelper"
+          text={helper}
+          tx={helperTx}
+          txOptions={helperTxOptions}
+          {...HelperTextProps}
+          style={$helperStyles}
+        />
+      )}
+    </Wrapper>
+  )
+}
+
+/**
+ * @param {ToggleProps} props - The props for the `FieldLabel` component.
+ * @returns {JSX.Element} The rendered `FieldLabel` component.
+ */
+function FieldLabel<T>(props: ToggleProps<T>) {
+  const {
+    status,
+    label,
+    labelTx,
+    labelTxOptions,
+    LabelTextProps,
+    labelPosition,
+    labelStyle: $labelStyleOverride,
+  } = props
+
+  const {
+    theme: { colors },
+    themed,
+  } = useAppTheme()
+
+  if (!label && !labelTx && !LabelTextProps?.children) return null
+
+  const $labelStyle = themed([
+    $label,
+    status === "error" && { color: colors.error },
+    labelPosition === "right" && $labelRight,
+    labelPosition === "left" && $labelLeft,
+    $labelStyleOverride,
+    LabelTextProps?.style,
+  ])
+
+  return (
+    <Text
+      preset="formLabel"
+      text={label}
+      tx={labelTx}
+      txOptions={labelTxOptions}
+      {...LabelTextProps}
+      style={$labelStyle}
+    />
+  )
+}
+
+const $inputWrapper: ViewStyle = {
+  alignItems: "center",
+}
+
+export const $inputOuterBase: ViewStyle = {
+  height: 24,
+  width: 24,
+  borderWidth: 2,
+  alignItems: "center",
+  overflow: "hidden",
+  flexGrow: 0,
+  flexShrink: 0,
+  justifyContent: "space-between",
+  flexDirection: "row",
+}
+
+const $helper: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginTop: spacing.xs,
+})
+
+const $label: TextStyle = {
+  flex: 1,
+}
+
+const $labelRight: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginStart: spacing.md,
+})
+
+const $labelLeft: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginEnd: spacing.md,
+})

package/app/components/index copy.ts

@@ -0,0 +1,15 @@
+export * from "./AutoImage"
+export * from "./Button"
+export * from "./Card"
+export * from "./Header"
+export * from "./Icon"
+export * from "./ListItem"
+export * from "./ListView"
+export * from "./Screen"
+export * from "./Text"
+export * from "./TextField"
+export * from "./Toggle"
+export * from "./EmptyState"
+export * from "./Calendar"
+export * from "./TaskModal"
+export * from "./AlertTongle"

package/app/components/index.ts

@@ -0,0 +1,18 @@
+export * from "./Button"
+export * from "./Icon"
+export * from "./Screen"
+export * from "./Text"
+export * from "./AutoImage"
+export * from "./Button"
+export * from "./Card"
+export * from "./Header"
+export * from "./Icon"
+export * from "./ListItem"
+export * from "./ListView"
+export * from "./Screen"
+export * from "./Text"
+export * from "./TextField"
+
+export * from "./EmptyState"
+
+export * from "./AlertTongle"

package/app/config/config.base.ts

@@ -0,0 +1,26 @@
+export interface ConfigBaseProps {
+  persistNavigation: "always" | "dev" | "prod" | "never"
+  catchErrors: "always" | "dev" | "prod" | "never"
+  exitRoutes: string[]
+}
+
+export type PersistNavigationConfig = ConfigBaseProps["persistNavigation"]
+
+const BaseConfig: ConfigBaseProps = {
+  // This feature is particularly useful in development mode, but
+  // can be used in production as well if you prefer.
+  persistNavigation: "dev",
+
+  /**
+   * Only enable if we're catching errors in the right environment
+   */
+  catchErrors: "always",
+
+  /**
+   * This is a list of all the route names that will exit the app if the back button
+   * is pressed while in that screen. Only affects Android.
+   */
+  exitRoutes: ["Welcome"],
+}
+
+export default BaseConfig

package/app/config/config.dev.ts

@@ -0,0 +1,10 @@
+/**
+ * These are configuration settings for the dev environment.
+ *
+ * Do not include API secrets in this file or anywhere in your JS.
+ *
+ * https://reactnative.dev/docs/security#storing-sensitive-info
+ */
+export default {
+  API_URL: "https://api.rss2json.com/v1/",
+}

package/app/config/config.prod.ts

@@ -0,0 +1,10 @@
+/**
+ * These are configuration settings for the production environment.
+ *
+ * Do not include API secrets in this file or anywhere in your JS.
+ *
+ * https://reactnative.dev/docs/security#storing-sensitive-info
+ */
+export default {
+  API_URL: "https://api.rss2json.com/v1/",
+}

package/app/config/index.ts

@@ -0,0 +1,28 @@
+/**
+ * This file imports configuration objects from either the config.dev.js file
+ * or the config.prod.js file depending on whether we are in __DEV__ or not.
+ *
+ * Note that we do not gitignore these files. Unlike on web servers, just because
+ * these are not checked into your repo doesn't mean that they are secure.
+ * In fact, you're shipping a JavaScript bundle with every
+ * config variable in plain text. Anyone who downloads your app can easily
+ * extract them.
+ *
+ * If you doubt this, just bundle your app, and then go look at the bundle and
+ * search it for one of your config variable values. You'll find it there.
+ *
+ * Read more here: https://reactnative.dev/docs/security#storing-sensitive-info
+ */
+import BaseConfig from "./config.base"
+import DevConfig from "./config.dev"
+import ProdConfig from "./config.prod"
+
+let ExtraConfig = ProdConfig
+
+if (__DEV__) {
+  ExtraConfig = DevConfig
+}
+
+const Config = { ...BaseConfig, ...ExtraConfig }
+
+export default Config

package/app/context/AuthContext.tsx

@@ -0,0 +1,14 @@
+/**
+ * AuthContext - Legacy re-export
+ * This file maintains backward compatibility by re-exporting from the new modular structure.
+ * All authentication logic has been refactored into dedicated modules in the ./auth folder:
+ * - types.ts: Type definitions
+ * - validation.ts: Validation utilities
+ * - services.ts: Parse API calls and auth operations
+ * - reducer.ts: State management reducer
+ * - AuthProvider.tsx: Provider component
+ * - hooks.ts: Custom hooks
+ * - index.ts: Main export point
+ */
+
+export * from "./auth";