ignite-parse-auth-kit 1.0.0

package/app/screens/DemoShowroomScreen/demos/DemoCard.tsx

@@ -0,0 +1,181 @@
+/* eslint-disable react/jsx-key, react-native/no-inline-styles */
+import { AutoImage } from "@/components/AutoImage"
+import { Button } from "@/components/Button"
+import { Card } from "@/components/Card"
+import { Icon } from "@/components/Icon"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "../DemoShowroomScreen"
+import { DemoUseCase } from "../DemoUseCase"
+
+export const DemoCard: Demo = {
+  name: "Card",
+  description: "demoCard:description",
+  data: ({ theme }) => [
+    <DemoUseCase
+      name="demoCard:useCase.presets.name"
+      description="demoCard:useCase.presets.description"
+    >
+      <Card
+        headingTx="demoCard:useCase.presets.default.heading"
+        contentTx="demoCard:useCase.presets.default.content"
+        footerTx="demoCard:useCase.presets.default.footer"
+      />
+      <DemoDivider />
+      <Card
+        headingTx="demoCard:useCase.presets.reversed.heading"
+        contentTx="demoCard:useCase.presets.reversed.content"
+        footerTx="demoCard:useCase.presets.reversed.footer"
+        preset="reversed"
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoCard:useCase.verticalAlignment.name"
+      description="demoCard:useCase.verticalAlignment.description"
+    >
+      <Card
+        headingTx="demoCard:useCase.verticalAlignment.top.heading"
+        contentTx="demoCard:useCase.verticalAlignment.top.content"
+        footerTx="demoCard:useCase.verticalAlignment.top.footer"
+        style={{ minHeight: 160 }}
+      />
+      <DemoDivider />
+      <Card
+        headingTx="demoCard:useCase.verticalAlignment.center.heading"
+        verticalAlignment="center"
+        preset="reversed"
+        contentTx="demoCard:useCase.verticalAlignment.center.content"
+        footerTx="demoCard:useCase.verticalAlignment.center.footer"
+        style={{ minHeight: 160 }}
+      />
+      <DemoDivider />
+      <Card
+        headingTx="demoCard:useCase.verticalAlignment.spaceBetween.heading"
+        verticalAlignment="space-between"
+        contentTx="demoCard:useCase.verticalAlignment.spaceBetween.content"
+        footerTx="demoCard:useCase.verticalAlignment.spaceBetween.footer"
+        style={{ minHeight: 160 }}
+      />
+      <DemoDivider />
+      <Card
+        preset="reversed"
+        headingTx="demoCard:useCase.verticalAlignment.reversed.heading"
+        verticalAlignment="force-footer-bottom"
+        contentTx="demoCard:useCase.verticalAlignment.reversed.content"
+        footerTx="demoCard:useCase.verticalAlignment.reversed.footer"
+        style={{ minHeight: 160 }}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoCard:useCase.passingContent.name"
+      description="demoCard:useCase.passingContent.description"
+    >
+      <Card
+        headingTx="demoCard:useCase.passingContent.heading"
+        contentTx="demoCard:useCase.passingContent.content"
+        footerTx="demoCard:useCase.passingContent.footer"
+      />
+      <DemoDivider />
+      <Card
+        preset="reversed"
+        headingTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        headingTxOptions={{ prop: "heading" }}
+        contentTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        contentTxOptions={{ prop: "content" }}
+        footerTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        footerTxOptions={{ prop: "footer" }}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoCard:useCase.customComponent.name"
+      description="demoCard:useCase.customComponent.description"
+    >
+      <Card
+        HeadingComponent={
+          <Button
+            preset="reversed"
+            text="HeadingComponent"
+            LeftAccessory={(props) => <Icon style={props.style} icon="ladybug" />}
+          />
+        }
+        ContentComponent={
+          <Button
+            style={{ marginVertical: theme.spacing.sm }}
+            text="ContentComponent"
+            LeftAccessory={(props) => <Icon style={props.style} icon="ladybug" />}
+          />
+        }
+        FooterComponent={
+          <Button
+            preset="reversed"
+            text="FooterComponent"
+            LeftAccessory={(props) => <Icon style={props.style} icon="ladybug" />}
+          />
+        }
+      />
+      <DemoDivider />
+      <Card
+        headingTx="demoCard:useCase.customComponent.rightComponent"
+        verticalAlignment="center"
+        RightComponent={
+          <AutoImage
+            maxWidth={80}
+            maxHeight={60}
+            style={{ alignSelf: "center" }}
+            source={{
+              uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
+            }}
+          />
+        }
+      />
+      <DemoDivider />
+      <Card
+        preset="reversed"
+        headingTx="demoCard:useCase.customComponent.leftComponent"
+        verticalAlignment="center"
+        LeftComponent={
+          <AutoImage
+            maxWidth={80}
+            maxHeight={60}
+            style={{ alignSelf: "center" }}
+            source={{
+              uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
+            }}
+          />
+        }
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoCard:useCase.style.name"
+      description="demoCard:useCase.style.description"
+    >
+      <Card
+        headingTx="demoCard:useCase.style.heading"
+        headingStyle={{ color: theme.colors.error }}
+        contentTx="demoCard:useCase.style.content"
+        contentStyle={{
+          backgroundColor: theme.colors.error,
+          color: theme.colors.palette.neutral100,
+        }}
+        footerTx="demoCard:useCase.style.footer"
+        footerStyle={{
+          textDecorationLine: "underline line-through",
+          textDecorationStyle: "dashed",
+          color: theme.colors.error,
+          textDecorationColor: theme.colors.error,
+        }}
+        style={{
+          shadowRadius: 5,
+          shadowColor: theme.colors.error,
+          shadowOpacity: 0.5,
+        }}
+      />
+    </DemoUseCase>,
+  ],
+}
+
+// @demo remove-file

package/app/screens/DemoShowroomScreen/demos/DemoEmptyState.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react/jsx-key, react-native/no-inline-styles */
+import { EmptyState } from "@/components/EmptyState"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "../DemoShowroomScreen"
+import { DemoUseCase } from "../DemoUseCase"
+
+export const DemoEmptyState: Demo = {
+  name: "EmptyState",
+  description: "demoEmptyState:description",
+  data: ({ theme }) => [
+    <DemoUseCase
+      name="demoEmptyState:useCase.presets.name"
+      description="demoEmptyState:useCase.presets.description"
+    >
+      <EmptyState preset="generic" />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoEmptyState:useCase.passingContent.name"
+      description="demoEmptyState:useCase.passingContent.description"
+    >
+      <EmptyState
+        imageSource={require("@assets/images/logo.png")}
+        headingTx="demoEmptyState:useCase.passingContent.customizeImageHeading"
+        contentTx="demoEmptyState:useCase.passingContent.customizeImageContent"
+      />
+
+      <DemoDivider size={30} line />
+
+      <EmptyState
+        headingTx="demoEmptyState:useCase.passingContent.viaHeadingProp"
+        contentTx="demoEmptyState:useCase.passingContent.viaContentProp"
+        buttonTx="demoEmptyState:useCase.passingContent.viaButtonProp"
+      />
+
+      <DemoDivider size={30} line />
+
+      <EmptyState
+        headingTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        headingTxOptions={{ prop: "heading" }}
+        contentTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        contentTxOptions={{ prop: "content" }}
+        buttonTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        buttonTxOptions={{ prop: "button" }}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoEmptyState:useCase.styling.name"
+      description="demoEmptyState:useCase.styling.description"
+    >
+      <EmptyState
+        preset="generic"
+        style={{ backgroundColor: theme.colors.error, paddingVertical: 20 }}
+        imageStyle={{ height: 75, tintColor: theme.colors.palette.neutral100 }}
+        ImageProps={{ resizeMode: "contain" }}
+        headingStyle={{
+          color: theme.colors.palette.neutral100,
+          textDecorationLine: "underline",
+          textDecorationColor: theme.colors.palette.neutral100,
+        }}
+        contentStyle={{
+          color: theme.colors.palette.neutral100,
+          textDecorationLine: "underline",
+          textDecorationColor: theme.colors.palette.neutral100,
+        }}
+        buttonStyle={{ alignSelf: "center", backgroundColor: theme.colors.palette.neutral100 }}
+        buttonTextStyle={{ color: theme.colors.error }}
+        ButtonProps={{
+          preset: "reversed",
+        }}
+      />
+    </DemoUseCase>,
+  ],
+}
+
+// @demo remove-file

package/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx

@@ -0,0 +1,151 @@
+/* eslint-disable react/jsx-key, react-native/no-inline-styles */
+import { TextStyle, View, ViewStyle } from "react-native"
+
+import { Header } from "@/components/Header"
+import { Icon } from "@/components/Icon"
+import type { ThemedStyle } from "@/theme/types"
+import { $styles } from "@/theme/styles"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "../DemoShowroomScreen"
+import { DemoUseCase } from "../DemoUseCase"
+
+const $rightAlignTitle: TextStyle = {
+  textAlign: "right",
+}
+
+const $customLeftAction: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+  flexGrow: 0,
+  flexBasis: 100,
+  height: "100%",
+  flexWrap: "wrap",
+  overflow: "hidden",
+})
+
+const $customTitle: ThemedStyle<TextStyle> = ({ colors }) => ({
+  textDecorationLine: "underline line-through",
+  textDecorationStyle: "dashed",
+  color: colors.error,
+  textDecorationColor: colors.error,
+})
+
+const $customWhiteTitle: ThemedStyle<TextStyle> = ({ colors }) => ({
+  color: colors.palette.neutral100,
+})
+
+export const DemoHeader: Demo = {
+  name: "Header",
+  description: "demoHeader:description",
+  data: ({ theme, themed }) => [
+    <DemoUseCase
+      name="demoHeader:useCase.actionIcons.name"
+      description="demoHeader:useCase.actionIcons.description"
+    >
+      <Header
+        titleTx="demoHeader:useCase.actionIcons.leftIconTitle"
+        leftIcon="ladybug"
+        safeAreaEdges={[]}
+      />
+      <DemoDivider size={24} />
+      <Header
+        titleTx="demoHeader:useCase.actionIcons.rightIconTitle"
+        rightIcon="ladybug"
+        safeAreaEdges={[]}
+      />
+      <DemoDivider size={24} />
+      <Header
+        titleTx="demoHeader:useCase.actionIcons.bothIconsTitle"
+        leftIcon="ladybug"
+        rightIcon="ladybug"
+        safeAreaEdges={[]}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoHeader:useCase.actionText.name"
+      description="demoHeader:useCase.actionText.description"
+    >
+      <Header
+        titleTx="demoHeader:useCase.actionText.leftTxTitle"
+        leftTx="demoShowroomScreen:demoHeaderTxExample"
+        safeAreaEdges={[]}
+      />
+      <DemoDivider size={24} />
+      <Header
+        titleTx="demoHeader:useCase.actionText.rightTextTitle"
+        rightText="Yay"
+        safeAreaEdges={[]}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoHeader:useCase.customActionComponents.name"
+      description="demoHeader:useCase.customActionComponents.description"
+    >
+      <Header
+        titleTx="demoHeader:useCase.customActionComponents.customLeftActionTitle"
+        titleMode="flex"
+        titleStyle={$rightAlignTitle}
+        LeftActionComponent={
+          <View style={themed([$styles.row, $customLeftAction])}>
+            {Array.from({ length: 20 }, (x, i) => i).map((i) => (
+              <Icon key={i} icon="ladybug" color={theme.colors.palette.neutral100} size={20} />
+            ))}
+          </View>
+        }
+        safeAreaEdges={[]}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoHeader:useCase.titleModes.name"
+      description="demoHeader:useCase.titleModes.description"
+    >
+      <Header
+        titleTx="demoHeader:useCase.titleModes.centeredTitle"
+        leftIcon="ladybug"
+        rightText="Hooray"
+        safeAreaEdges={[]}
+      />
+      <DemoDivider size={24} />
+      <Header
+        titleTx="demoHeader:useCase.titleModes.flexTitle"
+        titleMode="flex"
+        leftIcon="ladybug"
+        rightText="Hooray"
+        safeAreaEdges={[]}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoHeader:useCase.styling.name"
+      description="demoHeader:useCase.styling.description"
+    >
+      <Header
+        titleTx="demoHeader:useCase.styling.styledTitle"
+        titleStyle={themed($customTitle)}
+        safeAreaEdges={[]}
+      />
+      <DemoDivider size={24} />
+      <Header
+        titleTx="demoHeader:useCase.styling.styledWrapperTitle"
+        titleStyle={themed($customWhiteTitle)}
+        backgroundColor={theme.colors.error}
+        style={{ height: 35 }}
+        safeAreaEdges={[]}
+      />
+      <DemoDivider size={24} />
+      <Header
+        titleTx="demoHeader:useCase.styling.tintedIconsTitle"
+        titleStyle={themed($customWhiteTitle)}
+        backgroundColor={theme.colors.error}
+        leftIcon="ladybug"
+        leftIconColor={theme.colors.palette.neutral100}
+        safeAreaEdges={[]}
+      />
+    </DemoUseCase>,
+  ],
+}
+
+// @demo remove-file

package/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable react/jsx-key */
+import { ImageStyle, TextStyle, View, ViewStyle } from "react-native"
+
+import { Icon, iconRegistry, type IconTypes } from "@/components/Icon"
+import { Text } from "@/components/Text"
+import type { ThemedStyle } from "@/theme/types"
+import { $styles } from "@/theme/styles"
+
+import { Demo } from "../DemoShowroomScreen"
+import { DemoUseCase } from "../DemoUseCase"
+
+const $demoIconContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  padding: spacing.xs,
+})
+
+const $iconTile: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  width: "33.333%",
+  alignItems: "center",
+  paddingVertical: spacing.xs,
+})
+
+const $iconTileLabel: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
+  marginTop: spacing.xxs,
+  color: colors.textDim,
+})
+
+const $customIconContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
+  padding: spacing.md,
+  backgroundColor: colors.palette.angry500,
+})
+
+const $customIcon: ThemedStyle<ImageStyle> = ({ colors }) => ({
+  tintColor: colors.palette.neutral100,
+})
+
+export const DemoIcon: Demo = {
+  name: "Icon",
+  description: "demoIcon:description",
+  data: ({ theme, themed }) => [
+    <DemoUseCase
+      name="demoIcon:useCase.icons.name"
+      description="demoIcon:useCase.icons.description"
+      layout="row"
+      itemStyle={$styles.flexWrap}
+    >
+      {Object.keys(iconRegistry).map((icon) => (
+        <View key={icon} style={themed($iconTile)}>
+          <Icon icon={icon as IconTypes} color={theme.colors.tint} size={35} />
+
+          <Text size="xs" style={themed($iconTileLabel)}>
+            {icon}
+          </Text>
+        </View>
+      ))}
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoIcon:useCase.size.name"
+      description="demoIcon:useCase.size.description"
+      layout="row"
+    >
+      <Icon icon="ladybug" containerStyle={themed($demoIconContainer)} />
+      <Icon icon="ladybug" size={35} containerStyle={themed($demoIconContainer)} />
+      <Icon icon="ladybug" size={50} containerStyle={themed($demoIconContainer)} />
+      <Icon icon="ladybug" size={75} containerStyle={themed($demoIconContainer)} />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoIcon:useCase.color.name"
+      description="demoIcon:useCase.color.description"
+      layout="row"
+    >
+      <Icon
+        icon="ladybug"
+        color={theme.colors.palette.accent500}
+        containerStyle={themed($demoIconContainer)}
+      />
+      <Icon
+        icon="ladybug"
+        color={theme.colors.palette.primary500}
+        containerStyle={themed($demoIconContainer)}
+      />
+      <Icon
+        icon="ladybug"
+        color={theme.colors.palette.secondary500}
+        containerStyle={themed($demoIconContainer)}
+      />
+      <Icon
+        icon="ladybug"
+        color={theme.colors.palette.neutral700}
+        containerStyle={themed($demoIconContainer)}
+      />
+      <Icon
+        icon="ladybug"
+        color={theme.colors.palette.angry500}
+        containerStyle={themed($demoIconContainer)}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoIcon:useCase.styling.name"
+      description="demoIcon:useCase.styling.description"
+      layout="row"
+    >
+      <Icon
+        icon="ladybug"
+        style={themed($customIcon)}
+        size={40}
+        containerStyle={themed($customIconContainer)}
+      />
+    </DemoUseCase>,
+  ],
+}
+
+// @demo remove-file