ignite-parse-auth-kit 1.0.0

package/app/components/AlertTongle.tsx

@@ -0,0 +1,105 @@
+import { Alert, StyleProp, TextStyle, View, ViewStyle } from "react-native"
+import { useAppTheme } from "@/theme/context"
+import type { ThemedStyle } from "@/theme/types"
+import { Text } from "@/components/Text"
+import React, { useEffect } from "react"
+import { observer } from "mobx-react-lite"
+
+
+export interface AlertTongleProps {
+  /**
+   * An optional style override useful for padding & margin.
+   */
+  style?: StyleProp<ViewStyle>
+}
+
+type AlertItem = {
+  title: string
+  message: string
+  buttons?: Array<{
+    text: string
+    onPress?: () => void
+    style?: 'default' | 'cancel' | 'destructive'
+  }>
+}
+
+// Static queue manager
+class AlertQueueManager {
+  private static queue: AlertItem[] = []
+  private static isShowing = false
+  private static currentAlert: AlertItem | null = null
+
+  static enqueue(alert: AlertItem) {
+    if (this.isDuplicate(alert)) return
+
+    this.queue.push(alert)
+    this.showNext()
+  }
+
+  private static isDuplicate(alert: AlertItem): boolean {
+    if (this.isShowing && this.currentAlert?.title === alert.title && this.currentAlert?.message === alert.message) {
+      return true
+    }
+    if (this.queue.some(q => q.title === alert.title && q.message === alert.message)) {
+      return true
+    }
+    return false
+  }
+
+  private static showNext() {
+    if (this.isShowing || this.queue.length === 0) return
+
+    this.isShowing = true
+    const nextAlert = this.queue.shift()!
+    this.currentAlert = nextAlert
+
+    const { title, message, buttons = [{ text: "OK" }] } = nextAlert
+
+    Alert.alert(title, message, buttons.map(button => ({
+      ...button,
+      onPress: () => {
+        button.onPress?.()
+        this.isShowing = false
+        this.currentAlert = null
+        this.showNext()
+      },
+    })))
+  }
+}
+
+// Exportable function
+export const showQueuedAlert = (alert: AlertItem) => {
+  AlertQueueManager.enqueue(alert)
+}
+
+
+// COMPONENT
+export const AlertTongle = observer(function AlertTongle(props: AlertTongleProps) {
+  const { style } = props
+  const $styles = [$container, style]
+  const { themed } = useAppTheme()
+
+  useEffect(() => {
+    // Example trigger
+    showQueuedAlert({
+      title: "Initial Alert",
+      message: "This is triggered from AlertTongle component",
+    })
+  }, [])
+
+  return (
+    <View style={$styles}>
+      <Text style={themed($text)}>Hello</Text>
+    </View>
+  )
+})
+
+const $container: ViewStyle = {
+  justifyContent: "center",
+}
+
+const $text: ThemedStyle<TextStyle> = ({ colors, typography }) => ({
+  fontFamily: typography.primary.normal,
+  fontSize: 14,
+  color: colors.palette.primary500,
+})

package/app/components/AutoImage.tsx

@@ -0,0 +1,89 @@
+import { useLayoutEffect, useState } from "react"
+import { Image, ImageProps, ImageURISource, Platform, PixelRatio } from "react-native"
+
+export interface AutoImageProps extends ImageProps {
+  /**
+   * How wide should the image be?
+   */
+  maxWidth?: number
+  /**
+   * How tall should the image be?
+   */
+  maxHeight?: number
+  headers?: {
+    [key: string]: string
+  }
+}
+
+/**
+ * A hook that will return the scaled dimensions of an image based on the
+ * provided dimensions' aspect ratio. If no desired dimensions are provided,
+ * it will return the original dimensions of the remote image.
+ *
+ * How is this different from `resizeMode: 'contain'`? Firstly, you can
+ * specify only one side's size (not both). Secondly, the image will scale to fit
+ * the desired dimensions instead of just being contained within its image-container.
+ * @param {number} remoteUri - The URI of the remote image.
+ * @param {number} dimensions - The desired dimensions of the image. If not provided, the original dimensions will be returned.
+ * @returns {[number, number]} - The scaled dimensions of the image.
+ */
+export function useAutoImage(
+  remoteUri: string,
+  headers?: {
+    [key: string]: string
+  },
+  dimensions?: [maxWidth?: number, maxHeight?: number],
+): [width: number, height: number] {
+  const [[remoteWidth, remoteHeight], setRemoteImageDimensions] = useState([0, 0])
+  const remoteAspectRatio = remoteWidth / remoteHeight
+  const [maxWidth, maxHeight] = dimensions ?? []
+
+  useLayoutEffect(() => {
+    if (!remoteUri) return
+
+    if (!headers) {
+      Image.getSize(remoteUri, (w, h) => setRemoteImageDimensions([w, h]))
+    } else {
+      Image.getSizeWithHeaders(remoteUri, headers, (w, h) => setRemoteImageDimensions([w, h]))
+    }
+  }, [remoteUri, headers])
+
+  if (Number.isNaN(remoteAspectRatio)) return [0, 0]
+
+  if (maxWidth && maxHeight) {
+    const aspectRatio = Math.min(maxWidth / remoteWidth, maxHeight / remoteHeight)
+    return [
+      PixelRatio.roundToNearestPixel(remoteWidth * aspectRatio),
+      PixelRatio.roundToNearestPixel(remoteHeight * aspectRatio),
+    ]
+  } else if (maxWidth) {
+    return [maxWidth, PixelRatio.roundToNearestPixel(maxWidth / remoteAspectRatio)]
+  } else if (maxHeight) {
+    return [PixelRatio.roundToNearestPixel(maxHeight * remoteAspectRatio), maxHeight]
+  } else {
+    return [remoteWidth, remoteHeight]
+  }
+}
+
+/**
+ * An Image component that automatically sizes a remote or data-uri image.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/AutoImage/}
+ * @param {AutoImageProps} props - The props for the `AutoImage` component.
+ * @returns {JSX.Element} The rendered `AutoImage` component.
+ */
+export function AutoImage(props: AutoImageProps) {
+  const { maxWidth, maxHeight, ...ImageProps } = props
+  const source = props.source as ImageURISource
+  const headers = source?.headers
+
+  const [width, height] = useAutoImage(
+    Platform.select({
+      web: (source?.uri as string) ?? (source as string),
+      default: source?.uri as string,
+    }),
+    headers,
+    [maxWidth, maxHeight],
+  )
+
+  return <Image {...ImageProps} style={[{ width, height }, props.style]} />
+}

package/app/components/Button.tsx

@@ -0,0 +1,248 @@
+import { ComponentType } from "react"
+import {
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from "react-native"
+
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+import type { ThemedStyle, ThemedStyleArray } from "@/theme/types"
+
+import { Text, TextProps } from "./Text"
+
+type Presets = "default" | "filled" | "reversed"
+
+export interface ButtonAccessoryProps {
+  style: StyleProp<any>
+  pressableState: PressableStateCallbackType
+  disabled?: boolean
+}
+
+export interface ButtonProps extends PressableProps {
+  /**
+   * Text which is looked up via i18n.
+   */
+  tx?: TextProps["tx"]
+  /**
+   * The text to display if not using `tx` or nested components.
+   */
+  text?: TextProps["text"]
+  /**
+   * Optional options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  txOptions?: TextProps["txOptions"]
+  /**
+   * An optional style override useful for padding & margin.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * An optional style override for the "pressed" state.
+   */
+  pressedStyle?: StyleProp<ViewStyle>
+  /**
+   * An optional style override for the button text.
+   */
+  textStyle?: StyleProp<TextStyle>
+  /**
+   * An optional style override for the button text when in the "pressed" state.
+   */
+  pressedTextStyle?: StyleProp<TextStyle>
+  /**
+   * An optional style override for the button text when in the "disabled" state.
+   */
+  disabledTextStyle?: StyleProp<TextStyle>
+  /**
+   * One of the different types of button presets.
+   */
+  preset?: Presets
+  /**
+   * An optional component to render on the right side of the text.
+   * Example: `RightAccessory={(props) => <View {...props} />}`
+   */
+  RightAccessory?: ComponentType<ButtonAccessoryProps>
+  /**
+   * An optional component to render on the left side of the text.
+   * Example: `LeftAccessory={(props) => <View {...props} />}`
+   */
+  LeftAccessory?: ComponentType<ButtonAccessoryProps>
+  /**
+   * Children components.
+   */
+  children?: React.ReactNode
+  /**
+   * disabled prop, accessed directly for declarative styling reasons.
+   * https://reactnative.dev/docs/pressable#disabled
+   */
+  disabled?: boolean
+  /**
+   * An optional style override for the disabled state
+   */
+  disabledStyle?: StyleProp<ViewStyle>
+}
+
+/**
+ * A component that allows users to take actions and make choices.
+ * Wraps the Text component with a Pressable component.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Button/}
+ * @param {ButtonProps} props - The props for the `Button` component.
+ * @returns {JSX.Element} The rendered `Button` component.
+ * @example
+ * <Button
+ *   tx="common:ok"
+ *   style={styles.button}
+ *   textStyle={styles.buttonText}
+ *   onPress={handleButtonPress}
+ * />
+ */
+export function Button(props: ButtonProps) {
+  const {
+    tx,
+    text,
+    txOptions,
+    style: $viewStyleOverride,
+    pressedStyle: $pressedViewStyleOverride,
+    textStyle: $textStyleOverride,
+    pressedTextStyle: $pressedTextStyleOverride,
+    disabledTextStyle: $disabledTextStyleOverride,
+    children,
+    RightAccessory,
+    LeftAccessory,
+    disabled,
+    disabledStyle: $disabledViewStyleOverride,
+    ...rest
+  } = props
+
+  const { themed } = useAppTheme()
+
+  const preset: Presets = props.preset ?? "default"
+  /**
+   * @param {PressableStateCallbackType} root0 - The root object containing the pressed state.
+   * @param {boolean} root0.pressed - The pressed state.
+   * @returns {StyleProp<ViewStyle>} The view style based on the pressed state.
+   */
+  function $viewStyle({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> {
+    return [
+      themed($viewPresets[preset]),
+      $viewStyleOverride,
+      !!pressed && themed([$pressedViewPresets[preset], $pressedViewStyleOverride]),
+      !!disabled && $disabledViewStyleOverride,
+    ]
+  }
+  /**
+   * @param {PressableStateCallbackType} root0 - The root object containing the pressed state.
+   * @param {boolean} root0.pressed - The pressed state.
+   * @returns {StyleProp<TextStyle>} The text style based on the pressed state.
+   */
+  function $textStyle({ pressed }: PressableStateCallbackType): StyleProp<TextStyle> {
+    return [
+      themed($textPresets[preset]),
+      $textStyleOverride,
+      !!pressed && themed([$pressedTextPresets[preset], $pressedTextStyleOverride]),
+      !!disabled && $disabledTextStyleOverride,
+    ]
+  }
+
+  return (
+    <Pressable
+      style={$viewStyle}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled }}
+      {...rest}
+      disabled={disabled}
+    >
+      {(state) => (
+        <>
+          {!!LeftAccessory && (
+            <LeftAccessory style={$leftAccessoryStyle} pressableState={state} disabled={disabled} />
+          )}
+
+          <Text tx={tx} text={text} txOptions={txOptions} style={$textStyle(state)}>
+            {children}
+          </Text>
+
+          {!!RightAccessory && (
+            <RightAccessory
+              style={$rightAccessoryStyle}
+              pressableState={state}
+              disabled={disabled}
+            />
+          )}
+        </>
+      )}
+    </Pressable>
+  )
+}
+
+const $baseViewStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  minHeight: 56,
+  borderRadius: 4,
+  justifyContent: "center",
+  alignItems: "center",
+  paddingVertical: spacing.sm,
+  paddingHorizontal: spacing.sm,
+  overflow: "hidden",
+})
+
+const $baseTextStyle: ThemedStyle<TextStyle> = ({ typography }) => ({
+  fontSize: 16,
+  lineHeight: 20,
+  fontFamily: typography.primary.medium,
+  textAlign: "center",
+  flexShrink: 1,
+  flexGrow: 0,
+  zIndex: 2,
+})
+
+const $rightAccessoryStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginStart: spacing.xs,
+  zIndex: 1,
+})
+const $leftAccessoryStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginEnd: spacing.xs,
+  zIndex: 1,
+})
+
+const $viewPresets: Record<Presets, ThemedStyleArray<ViewStyle>> = {
+  default: [
+    $styles.row,
+    $baseViewStyle,
+    ({ colors }) => ({
+      borderWidth: 1,
+      borderColor: colors.palette.neutral400,
+      backgroundColor: colors.palette.neutral100,
+    }),
+  ],
+  filled: [
+    $styles.row,
+    $baseViewStyle,
+    ({ colors }) => ({ backgroundColor: colors.palette.neutral300 }),
+  ],
+  reversed: [
+    $styles.row,
+    $baseViewStyle,
+    ({ colors }) => ({ backgroundColor: colors.palette.neutral800 }),
+  ],
+}
+
+const $textPresets: Record<Presets, ThemedStyleArray<TextStyle>> = {
+  default: [$baseTextStyle],
+  filled: [$baseTextStyle],
+  reversed: [$baseTextStyle, ({ colors }) => ({ color: colors.palette.neutral100 })],
+}
+
+const $pressedViewPresets: Record<Presets, ThemedStyle<ViewStyle>> = {
+  default: ({ colors }) => ({ backgroundColor: colors.palette.neutral200 }),
+  filled: ({ colors }) => ({ backgroundColor: colors.palette.neutral400 }),
+  reversed: ({ colors }) => ({ backgroundColor: colors.palette.neutral700 }),
+}
+
+const $pressedTextPresets: Record<Presets, ThemedStyle<TextStyle>> = {
+  default: () => ({ opacity: 0.9 }),
+  filled: () => ({ opacity: 0.9 }),
+  reversed: () => ({ opacity: 0.9 }),
+}