ignite-parse-auth-kit 1.0.0

package/app/components/Card.tsx

@@ -0,0 +1,314 @@
+import { ComponentType, Fragment, ReactElement } from "react"
+import {
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native"
+
+import type { ThemedStyle, ThemedStyleArray } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+import { $styles } from "@/theme/styles"
+
+import { Text, TextProps } from "./Text"
+
+type Presets = "default" | "reversed"
+
+interface CardProps extends TouchableOpacityProps {
+  /**
+   * One of the different types of text presets.
+   */
+  preset?: Presets
+  /**
+   * How the content should be aligned vertically. This is especially (but not exclusively) useful
+   * when the card is a fixed height but the content is dynamic.
+   *
+   * `top` (default) - aligns all content to the top.
+   * `center` - aligns all content to the center.
+   * `space-between` - spreads out the content evenly.
+   * `force-footer-bottom` - aligns all content to the top, but forces the footer to the bottom.
+   */
+  verticalAlignment?: "top" | "center" | "space-between" | "force-footer-bottom"
+  /**
+   * Custom component added to the left of the card body.
+   */
+  LeftComponent?: ReactElement
+  /**
+   * Custom component added to the right of the card body.
+   */
+  RightComponent?: ReactElement
+  /**
+   * The heading text to display if not using `headingTx`.
+   */
+  heading?: TextProps["text"]
+  /**
+   * Heading text which is looked up via i18n.
+   */
+  headingTx?: TextProps["tx"]
+  /**
+   * Optional heading options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  headingTxOptions?: TextProps["txOptions"]
+  /**
+   * Style overrides for heading text.
+   */
+  headingStyle?: StyleProp<TextStyle>
+  /**
+   * Pass any additional props directly to the heading Text component.
+   */
+  HeadingTextProps?: TextProps
+  /**
+   * Custom heading component.
+   * Overrides all other `heading*` props.
+   */
+  HeadingComponent?: ReactElement
+  /**
+   * The content text to display if not using `contentTx`.
+   */
+  content?: TextProps["text"]
+  /**
+   * Content text which is looked up via i18n.
+   */
+  contentTx?: TextProps["tx"]
+  /**
+   * Optional content options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  contentTxOptions?: TextProps["txOptions"]
+  /**
+   * Style overrides for content text.
+   */
+  contentStyle?: StyleProp<TextStyle>
+  /**
+   * Pass any additional props directly to the content Text component.
+   */
+  ContentTextProps?: TextProps
+  /**
+   * Custom content component.
+   * Overrides all other `content*` props.
+   */
+  ContentComponent?: ReactElement
+  /**
+   * The footer text to display if not using `footerTx`.
+   */
+  footer?: TextProps["text"]
+  /**
+   * Footer text which is looked up via i18n.
+   */
+  footerTx?: TextProps["tx"]
+  /**
+   * Optional footer options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  footerTxOptions?: TextProps["txOptions"]
+  /**
+   * Style overrides for footer text.
+   */
+  footerStyle?: StyleProp<TextStyle>
+  /**
+   * Pass any additional props directly to the footer Text component.
+   */
+  FooterTextProps?: TextProps
+  /**
+   * Custom footer component.
+   * Overrides all other `footer*` props.
+   */
+  FooterComponent?: ReactElement
+}
+
+/**
+ * Cards are useful for displaying related information in a contained way.
+ * If a ListItem displays content horizontally, a Card can be used to display content vertically.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/Card/}
+ * @param {CardProps} props - The props for the `Card` component.
+ * @returns {JSX.Element} The rendered `Card` component.
+ */
+export function Card(props: CardProps) {
+  const {
+    content,
+    contentTx,
+    contentTxOptions,
+    footer,
+    footerTx,
+    footerTxOptions,
+    heading,
+    headingTx,
+    headingTxOptions,
+    ContentComponent,
+    HeadingComponent,
+    FooterComponent,
+    LeftComponent,
+    RightComponent,
+    verticalAlignment = "top",
+    style: $containerStyleOverride,
+    contentStyle: $contentStyleOverride,
+    headingStyle: $headingStyleOverride,
+    footerStyle: $footerStyleOverride,
+    ContentTextProps,
+    HeadingTextProps,
+    FooterTextProps,
+    ...WrapperProps
+  } = props
+
+  const {
+    themed,
+    theme: { spacing },
+  } = useAppTheme()
+
+  const preset: Presets = props.preset ?? "default"
+  const isPressable = !!WrapperProps.onPress
+  const isHeadingPresent = !!(HeadingComponent || heading || headingTx)
+  const isContentPresent = !!(ContentComponent || content || contentTx)
+  const isFooterPresent = !!(FooterComponent || footer || footerTx)
+
+  const Wrapper = (isPressable ? TouchableOpacity : View) as ComponentType<
+    TouchableOpacityProps | ViewProps
+  >
+  const HeaderContentWrapper = verticalAlignment === "force-footer-bottom" ? View : Fragment
+
+  const $containerStyle: StyleProp<ViewStyle> = [
+    themed($containerPresets[preset]),
+    $containerStyleOverride,
+  ]
+  const $headingStyle = [
+    themed($headingPresets[preset]),
+    (isFooterPresent || isContentPresent) && { marginBottom: spacing.xxxs },
+    $headingStyleOverride,
+    HeadingTextProps?.style,
+  ]
+  const $contentStyle = [
+    themed($contentPresets[preset]),
+    isHeadingPresent && { marginTop: spacing.xxxs },
+    isFooterPresent && { marginBottom: spacing.xxxs },
+    $contentStyleOverride,
+    ContentTextProps?.style,
+  ]
+  const $footerStyle = [
+    themed($footerPresets[preset]),
+    (isHeadingPresent || isContentPresent) && { marginTop: spacing.xxxs },
+    $footerStyleOverride,
+    FooterTextProps?.style,
+  ]
+  const $alignmentWrapperStyle = [
+    $alignmentWrapper,
+    { justifyContent: $alignmentWrapperFlexOptions[verticalAlignment] },
+    LeftComponent && { marginStart: spacing.md },
+    RightComponent && { marginEnd: spacing.md },
+  ]
+
+  return (
+    <Wrapper
+      style={$containerStyle}
+      activeOpacity={0.8}
+      accessibilityRole={isPressable ? "button" : undefined}
+      {...WrapperProps}
+    >
+      {LeftComponent}
+
+      <View style={$alignmentWrapperStyle}>
+        <HeaderContentWrapper>
+          {HeadingComponent ||
+            (isHeadingPresent && (
+              <Text
+                weight="bold"
+                text={heading}
+                tx={headingTx}
+                txOptions={headingTxOptions}
+                {...HeadingTextProps}
+                style={$headingStyle}
+              />
+            ))}
+
+          {ContentComponent ||
+            (isContentPresent && (
+              <Text
+                weight="normal"
+                text={content}
+                tx={contentTx}
+                txOptions={contentTxOptions}
+                {...ContentTextProps}
+                style={$contentStyle}
+              />
+            ))}
+        </HeaderContentWrapper>
+
+        {FooterComponent ||
+          (isFooterPresent && (
+            <Text
+              weight="normal"
+              size="xs"
+              text={footer}
+              tx={footerTx}
+              txOptions={footerTxOptions}
+              {...FooterTextProps}
+              style={$footerStyle}
+            />
+          ))}
+      </View>
+
+      {RightComponent}
+    </Wrapper>
+  )
+}
+
+const $containerBase: ThemedStyle<ViewStyle> = (theme) => ({
+  borderRadius: theme.spacing.md,
+  padding: theme.spacing.xs,
+  borderWidth: 1,
+  shadowColor: theme.colors.palette.neutral800,
+  shadowOffset: { width: 0, height: 12 },
+  shadowOpacity: 0.08,
+  shadowRadius: 12.81,
+  elevation: 16,
+  minHeight: 96,
+})
+
+const $alignmentWrapper: ViewStyle = {
+  flex: 1,
+  alignSelf: "stretch",
+}
+
+const $alignmentWrapperFlexOptions = {
+  "top": "flex-start",
+  "center": "center",
+  "space-between": "space-between",
+  "force-footer-bottom": "space-between",
+} as const
+
+const $containerPresets: Record<Presets, ThemedStyleArray<ViewStyle>> = {
+  default: [
+    $styles.row,
+    $containerBase,
+    (theme) => ({
+      backgroundColor: theme.colors.palette.neutral100,
+      borderColor: theme.colors.palette.neutral300,
+    }),
+  ],
+  reversed: [
+    $styles.row,
+    $containerBase,
+    (theme) => ({
+      backgroundColor: theme.colors.palette.neutral800,
+      borderColor: theme.colors.palette.neutral500,
+    }),
+  ],
+}
+
+const $headingPresets: Record<Presets, ThemedStyleArray<TextStyle>> = {
+  default: [],
+  reversed: [(theme) => ({ color: theme.colors.palette.neutral100 })],
+}
+
+const $contentPresets: Record<Presets, ThemedStyleArray<TextStyle>> = {
+  default: [],
+  reversed: [(theme) => ({ color: theme.colors.palette.neutral100 })],
+}
+
+const $footerPresets: Record<Presets, ThemedStyleArray<TextStyle>> = {
+  default: [],
+  reversed: [(theme) => ({ color: theme.colors.palette.neutral100 })],
+}

package/app/components/EmptyState.tsx

@@ -0,0 +1,248 @@
+import { Image, ImageProps, ImageStyle, StyleProp, TextStyle, View, ViewStyle } from "react-native"
+
+import { translate } from "@/i18n/translate"
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+
+import { Button, ButtonProps } from "./Button"
+import { Text, TextProps } from "./Text"
+
+const sadFace = require("@assets/images/sad-face.png")
+
+interface EmptyStateProps {
+  /**
+   * An optional prop that specifies the text/image set to use for the empty state.
+   */
+  preset?: "generic"
+  /**
+   * Style override for the container.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * An Image source to be displayed above the heading.
+   */
+  imageSource?: ImageProps["source"]
+  /**
+   * Style overrides for image.
+   */
+  imageStyle?: StyleProp<ImageStyle>
+  /**
+   * Pass any additional props directly to the Image component.
+   */
+  ImageProps?: Omit<ImageProps, "source">
+  /**
+   * The heading text to display if not using `headingTx`.
+   */
+  heading?: TextProps["text"]
+  /**
+   * Heading text which is looked up via i18n.
+   */
+  headingTx?: TextProps["tx"]
+  /**
+   * Optional heading options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  headingTxOptions?: TextProps["txOptions"]
+  /**
+   * Style overrides for heading text.
+   */
+  headingStyle?: StyleProp<TextStyle>
+  /**
+   * Pass any additional props directly to the heading Text component.
+   */
+  HeadingTextProps?: TextProps
+  /**
+   * The content text to display if not using `contentTx`.
+   */
+  content?: TextProps["text"]
+  /**
+   * Content text which is looked up via i18n.
+   */
+  contentTx?: TextProps["tx"]
+  /**
+   * Optional content options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  contentTxOptions?: TextProps["txOptions"]
+  /**
+   * Style overrides for content text.
+   */
+  contentStyle?: StyleProp<TextStyle>
+  /**
+   * Pass any additional props directly to the content Text component.
+   */
+  ContentTextProps?: TextProps
+  /**
+   * The button text to display if not using `buttonTx`.
+   */
+  button?: TextProps["text"]
+  /**
+   * Button text which is looked up via i18n.
+   */
+  buttonTx?: TextProps["tx"]
+  /**
+   * Optional button options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  buttonTxOptions?: TextProps["txOptions"]
+  /**
+   * Style overrides for button.
+   */
+  buttonStyle?: ButtonProps["style"]
+  /**
+   * Style overrides for button text.
+   */
+  buttonTextStyle?: ButtonProps["textStyle"]
+  /**
+   * Called when the button is pressed.
+   */
+  buttonOnPress?: ButtonProps["onPress"]
+  /**
+   * Pass any additional props directly to the Button component.
+   */
+  ButtonProps?: ButtonProps
+}
+
+interface EmptyStatePresetItem {
+  imageSource: ImageProps["source"]
+  heading: TextProps["text"]
+  content: TextProps["text"]
+  button: TextProps["text"]
+}
+
+/**
+ * A component to use when there is no data to display. It can be utilized to direct the user what to do next.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/app/components/EmptyState/}
+ * @param {EmptyStateProps} props - The props for the `EmptyState` component.
+ * @returns {JSX.Element} The rendered `EmptyState` component.
+ */
+export function EmptyState(props: EmptyStateProps) {
+  const {
+    theme,
+    themed,
+    theme: { spacing },
+  } = useAppTheme()
+
+  const EmptyStatePresets = {
+    generic: {
+      imageSource: sadFace,
+      heading: translate("emptyStateComponent:generic.heading"),
+      content: translate("emptyStateComponent:generic.content"),
+      button: translate("emptyStateComponent:generic.button"),
+    } as EmptyStatePresetItem,
+  } as const
+
+  const preset = EmptyStatePresets[props.preset ?? "generic"]
+
+  const {
+    button = preset.button,
+    buttonTx,
+    buttonOnPress,
+    buttonTxOptions,
+    content = preset.content,
+    contentTx,
+    contentTxOptions,
+    heading = preset.heading,
+    headingTx,
+    headingTxOptions,
+    imageSource = preset.imageSource,
+    style: $containerStyleOverride,
+    buttonStyle: $buttonStyleOverride,
+    buttonTextStyle: $buttonTextStyleOverride,
+    contentStyle: $contentStyleOverride,
+    headingStyle: $headingStyleOverride,
+    imageStyle: $imageStyleOverride,
+    ButtonProps,
+    ContentTextProps,
+    HeadingTextProps,
+    ImageProps,
+  } = props
+
+  const isImagePresent = !!imageSource
+  const isHeadingPresent = !!(heading || headingTx)
+  const isContentPresent = !!(content || contentTx)
+  const isButtonPresent = !!(button || buttonTx)
+
+  const $containerStyles = [$containerStyleOverride]
+  const $imageStyles = [
+    $image,
+    (isHeadingPresent || isContentPresent || isButtonPresent) && { marginBottom: spacing.xxxs },
+    $imageStyleOverride,
+    ImageProps?.style,
+  ]
+  const $headingStyles = [
+    themed($heading),
+    isImagePresent && { marginTop: spacing.xxxs },
+    (isContentPresent || isButtonPresent) && { marginBottom: spacing.xxxs },
+    $headingStyleOverride,
+    HeadingTextProps?.style,
+  ]
+  const $contentStyles = [
+    themed($content),
+    (isImagePresent || isHeadingPresent) && { marginTop: spacing.xxxs },
+    isButtonPresent && { marginBottom: spacing.xxxs },
+    $contentStyleOverride,
+    ContentTextProps?.style,
+  ]
+  const $buttonStyles = [
+    (isImagePresent || isHeadingPresent || isContentPresent) && { marginTop: spacing.xl },
+    $buttonStyleOverride,
+    ButtonProps?.style,
+  ]
+
+  return (
+    <View style={$containerStyles}>
+      {isImagePresent && (
+        <Image
+          source={imageSource}
+          {...ImageProps}
+          style={$imageStyles}
+          tintColor={theme.colors.palette.neutral900}
+        />
+      )}
+
+      {isHeadingPresent && (
+        <Text
+          preset="subheading"
+          text={heading}
+          tx={headingTx}
+          txOptions={headingTxOptions}
+          {...HeadingTextProps}
+          style={$headingStyles}
+        />
+      )}
+
+      {isContentPresent && (
+        <Text
+          text={content}
+          tx={contentTx}
+          txOptions={contentTxOptions}
+          {...ContentTextProps}
+          style={$contentStyles}
+        />
+      )}
+
+      {isButtonPresent && (
+        <Button
+          onPress={buttonOnPress}
+          text={button}
+          tx={buttonTx}
+          txOptions={buttonTxOptions}
+          textStyle={$buttonTextStyleOverride}
+          {...ButtonProps}
+          style={$buttonStyles}
+        />
+      )}
+    </View>
+  )
+}
+
+const $image: ImageStyle = { alignSelf: "center" }
+const $heading: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  textAlign: "center",
+  paddingHorizontal: spacing.lg,
+})
+const $content: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  textAlign: "center",
+  paddingHorizontal: spacing.lg,
+})