ignite-parse-auth-kit 1.0.0

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

@@ -0,0 +1,218 @@
+/* eslint-disable react/jsx-key */
+import { TextStyle, View, ViewStyle } from "react-native"
+
+import { Icon } from "@/components/Icon"
+import { ListItem } from "@/components/ListItem"
+import { ListView } from "@/components/ListView"
+import { Text } from "@/components/Text"
+import { translate } from "@/i18n/translate"
+import type { ThemedStyle } from "@/theme/types"
+import { $styles } from "@/theme/styles"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "../DemoShowroomScreen"
+import { DemoUseCase } from "../DemoUseCase"
+
+const listData =
+  `Tempor Id Ea Aliqua Pariatur Aliquip. Irure Minim Voluptate Consectetur Consequat Sint Esse Proident Irure. Nostrud Elit Veniam Nostrud Excepteur Minim Deserunt Quis Dolore Velit Nulla Irure Voluptate Tempor. Occaecat Amet Laboris Nostrud Qui Do Quis Lorem Ex Elit Fugiat Deserunt. In Pariatur Excepteur Exercitation Ex Incididunt Qui Mollit Dolor Sit Non. Culpa Officia Minim Cillum Exercitation Voluptate Proident Laboris Et Est Reprehenderit Quis Pariatur Nisi`
+    .split(".")
+    .map((item) => item.trim())
+
+const $customLeft: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+  flexGrow: 0,
+  flexBasis: 60,
+  height: "100%",
+  flexWrap: "wrap",
+  overflow: "hidden",
+})
+
+const $customTextStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
+  color: colors.error,
+})
+
+const $customTouchableStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+})
+
+const $customContainerStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  borderTopWidth: 5,
+  borderTopColor: colors.palette.neutral100,
+})
+
+const $listStyle: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
+  height: 148,
+  paddingHorizontal: spacing.xs,
+  backgroundColor: colors.palette.neutral200,
+})
+
+export const DemoListItem: Demo = {
+  name: "ListItem",
+  description: "demoListItem:description",
+  data: ({ theme, themed }) => [
+    <DemoUseCase
+      name="demoListItem:useCase.height.name"
+      description="demoListItem:useCase.height.description"
+    >
+      <ListItem topSeparator>{translate("demoListItem:useCase.height.defaultHeight")}</ListItem>
+
+      <ListItem topSeparator height={100}>
+        {translate("demoListItem:useCase.height.customHeight")}
+      </ListItem>
+
+      <ListItem topSeparator>{translate("demoListItem:useCase.height.textHeight")}</ListItem>
+
+      <ListItem topSeparator bottomSeparator TextProps={{ numberOfLines: 1 }}>
+        {translate("demoListItem:useCase.height.longText")}
+      </ListItem>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoListItem:useCase.separators.name"
+      description="demoListItem:useCase.separators.description"
+    >
+      <ListItem topSeparator>{translate("demoListItem:useCase.separators.topSeparator")}</ListItem>
+
+      <DemoDivider size={40} />
+
+      <ListItem topSeparator bottomSeparator>
+        {translate("demoListItem:useCase.separators.topAndBottomSeparator")}
+      </ListItem>
+
+      <DemoDivider size={40} />
+
+      <ListItem bottomSeparator>
+        {translate("demoListItem:useCase.separators.bottomSeparator")}
+      </ListItem>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoListItem:useCase.icons.name"
+      description="demoListItem:useCase.icons.description"
+    >
+      <ListItem topSeparator leftIcon="ladybug">
+        {translate("demoListItem:useCase.icons.leftIcon")}
+      </ListItem>
+
+      <ListItem topSeparator rightIcon="ladybug">
+        {translate("demoListItem:useCase.icons.rightIcon")}
+      </ListItem>
+
+      <ListItem topSeparator bottomSeparator rightIcon="ladybug" leftIcon="ladybug">
+        {translate("demoListItem:useCase.icons.leftRightIcons")}
+      </ListItem>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoListItem:useCase.customLeftRight.name"
+      description="demoListItem:useCase.customLeftRight.description"
+    >
+      <ListItem
+        topSeparator
+        LeftComponent={
+          <View style={themed([$styles.row, $customLeft, { marginEnd: theme.spacing.md }])}>
+            {Array.from({ length: 9 }, (x, i) => i).map((i) => (
+              <Icon key={i} icon="ladybug" color={theme.colors.palette.neutral100} size={20} />
+            ))}
+          </View>
+        }
+      >
+        {translate("demoListItem:useCase.customLeftRight.customLeft")}
+      </ListItem>
+
+      <ListItem
+        topSeparator
+        bottomSeparator
+        RightComponent={
+          <View style={themed([$styles.row, $customLeft, { marginStart: theme.spacing.md }])}>
+            {Array.from({ length: 9 }, (x, i) => i).map((i) => (
+              <Icon key={i} icon="ladybug" color={theme.colors.palette.neutral100} size={20} />
+            ))}
+          </View>
+        }
+      >
+        {translate("demoListItem:useCase.customLeftRight.customRight")}
+      </ListItem>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoListItem:useCase.passingContent.name"
+      description="demoListItem:useCase.passingContent.description"
+    >
+      <ListItem topSeparator text={translate("demoListItem:useCase.passingContent.children")} />
+      <ListItem topSeparator tx="demoShowroomScreen:demoViaTxProp" />
+      <ListItem topSeparator>{translate("demoListItem:useCase.passingContent.children")}</ListItem>
+      <ListItem topSeparator bottomSeparator>
+        <Text>
+          <Text preset="bold">
+            {translate("demoListItem:useCase.passingContent.nestedChildren1")}
+          </Text>
+          {` `}
+          <Text preset="default">
+            {translate("demoListItem:useCase.passingContent.nestedChildren2")}
+          </Text>
+        </Text>
+      </ListItem>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoListItem:useCase.listIntegration.name"
+      description="demoListItem:useCase.listIntegration.description"
+    >
+      <View style={themed($listStyle)}>
+        <ListView<string>
+          data={listData}
+          estimatedItemSize={59}
+          renderItem={({ item, index }) => (
+            <ListItem
+              text={item}
+              rightIcon="caretRight"
+              TextProps={{ numberOfLines: 1 }}
+              topSeparator={index !== 0}
+            />
+          )}
+        />
+      </View>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoListItem:useCase.styling.name"
+      description="demoListItem:useCase.styling.description"
+    >
+      <ListItem topSeparator textStyle={themed($customTextStyle)}>
+        {translate("demoListItem:useCase.styling.styledText")}
+      </ListItem>
+
+      <ListItem
+        topSeparator
+        textStyle={{ color: theme.colors.palette.neutral100 }}
+        style={themed($customTouchableStyle)}
+      >
+        {translate("demoListItem:useCase.styling.styledText")}
+      </ListItem>
+
+      <ListItem
+        topSeparator
+        textStyle={{ color: theme.colors.palette.neutral100 }}
+        style={themed($customTouchableStyle)}
+        containerStyle={themed($customContainerStyle)}
+      >
+        {translate("demoListItem:useCase.styling.styledContainer")}
+      </ListItem>
+      <ListItem
+        topSeparator
+        textStyle={{ color: theme.colors.palette.neutral100 }}
+        style={themed($customTouchableStyle)}
+        containerStyle={themed($customContainerStyle)}
+        rightIcon="ladybug"
+        leftIcon="ladybug"
+        rightIconColor={theme.colors.palette.neutral100}
+        leftIconColor={theme.colors.palette.neutral100}
+      >
+        {translate("demoListItem:useCase.styling.tintedIcons")}
+      </ListItem>
+    </DemoUseCase>,
+  ],
+}
+
+// @demo remove-file

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

@@ -0,0 +1,144 @@
+/* eslint-disable react/jsx-key, react-native/no-inline-styles */
+import { Text } from "@/components/Text"
+import { translate } from "@/i18n/translate"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "../DemoShowroomScreen"
+import { DemoUseCase } from "../DemoUseCase"
+
+export const DemoText: Demo = {
+  name: "Text",
+  description: "demoText:description",
+  data: ({ theme }) => [
+    <DemoUseCase
+      name="demoText:useCase.presets.name"
+      description="demoText:useCase.presets.description"
+    >
+      <Text>{translate("demoText:useCase.presets.default")}</Text>
+
+      <DemoDivider />
+
+      <Text preset="bold">{translate("demoText:useCase.presets.bold")}</Text>
+
+      <DemoDivider />
+
+      <Text preset="subheading">{translate("demoText:useCase.presets.subheading")}</Text>
+
+      <DemoDivider />
+
+      <Text preset="heading">{translate("demoText:useCase.presets.heading")}</Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.sizes.name"
+      description="demoText:useCase.sizes.description"
+    >
+      <Text size="xs">{translate("demoText:useCase.sizes.xs")}</Text>
+
+      <DemoDivider />
+
+      <Text size="sm">{translate("demoText:useCase.sizes.sm")}</Text>
+
+      <DemoDivider />
+
+      <Text size="md">{translate("demoText:useCase.sizes.md")}</Text>
+
+      <DemoDivider />
+
+      <Text size="lg">{translate("demoText:useCase.sizes.lg")}</Text>
+
+      <DemoDivider />
+
+      <Text size="xl">{translate("demoText:useCase.sizes.xl")}</Text>
+
+      <DemoDivider />
+
+      <Text size="xxl">{translate("demoText:useCase.sizes.xxl")}</Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.weights.name"
+      description="demoText:useCase.weights.description"
+    >
+      <Text weight="light">{translate("demoText:useCase.weights.light")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="normal">{translate("demoText:useCase.weights.normal")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="medium">{translate("demoText:useCase.weights.medium")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="semiBold">{translate("demoText:useCase.weights.semibold")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="bold">{translate("demoText:useCase.weights.bold")}</Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.passingContent.name"
+      description="demoText:useCase.passingContent.description"
+    >
+      <Text text={translate("demoText:useCase.passingContent.viaText")} />
+
+      <DemoDivider />
+
+      <Text>
+        <Text tx="demoText:useCase.passingContent.viaTx" />
+        <Text tx="demoShowroomScreen:lorem2Sentences" />
+      </Text>
+
+      <DemoDivider />
+
+      <Text>{translate("demoText:useCase.passingContent.children")}</Text>
+
+      <DemoDivider />
+
+      <Text>
+        <Text>{translate("demoText:useCase.passingContent.nestedChildren")}</Text>
+        <Text preset="bold">{translate("demoText:useCase.passingContent.nestedChildren2")}</Text>
+        {` `}
+        <Text preset="default">{translate("demoText:useCase.passingContent.nestedChildren3")}</Text>
+        {` `}
+        <Text preset="bold"> {translate("demoText:useCase.passingContent.nestedChildren4")}</Text>
+      </Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.styling.name"
+      description="demoText:useCase.styling.description"
+    >
+      <Text>
+        <Text style={{ color: theme.colors.error }}>
+          {translate("demoText:useCase.styling.text")}
+        </Text>
+        {` `}
+        <Text
+          style={{
+            color: theme.colors.palette.neutral100,
+            backgroundColor: theme.colors.error,
+          }}
+        >
+          {translate("demoText:useCase.styling.text2")}
+        </Text>
+        {` `}
+        <Text
+          style={{
+            textDecorationLine: "underline line-through",
+            textDecorationStyle: "dashed",
+            color: theme.colors.error,
+            textDecorationColor: theme.colors.error,
+          }}
+        >
+          {translate("demoText:useCase.styling.text3")}
+        </Text>
+      </Text>
+    </DemoUseCase>,
+  ],
+}
+
+// @demo remove-file

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

@@ -0,0 +1,233 @@
+/* eslint-disable react/jsx-key */
+import { TextStyle, ViewStyle } from "react-native"
+
+import { Icon } from "@/components/Icon"
+import { TextField } from "@/components/TextField"
+import type { ThemedStyle } from "@/theme/types"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "../DemoShowroomScreen"
+import { DemoUseCase } from "../DemoUseCase"
+
+const $customInputStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+  color: colors.palette.neutral100,
+})
+
+const $customInputWrapperStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+  borderColor: colors.palette.neutral800,
+})
+
+const $customContainerStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+})
+
+const $customLabelAndHelperStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
+  color: colors.palette.neutral100,
+})
+
+const $customInputWithAbsoluteAccessoriesStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginHorizontal: spacing.xxl,
+})
+
+const $customLeftAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+  position: "absolute",
+  left: 0,
+})
+
+const $customRightAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.error,
+  position: "absolute",
+  right: 0,
+})
+
+export const DemoTextField: Demo = {
+  name: "TextField",
+  description: "demoTextField:description",
+  data: ({ themed }) => [
+    <DemoUseCase
+      name="demoTextField:useCase.statuses.name"
+      description="demoTextField:useCase.statuses.description"
+    >
+      <TextField
+        value="Labore occaecat in id eu commodo aliquip occaecat veniam officia pariatur."
+        labelTx="demoTextField:useCase.statuses.noStatus.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.statuses.noStatus.helper"
+        helperTxOptions={{ prop: "helper" }}
+        placeholderTx="demoTextField:useCase.statuses.noStatus.placeholder"
+        placeholderTxOptions={{ prop: "placeholder" }}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        status="error"
+        value="Est Lorem duis sunt sunt duis proident minim elit dolore incididunt pariatur eiusmod anim cillum."
+        labelTx="demoTextField:useCase.statuses.error.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.statuses.error.helper"
+        helperTxOptions={{ prop: "helper" }}
+        placeholderTx="demoTextField:useCase.statuses.error.placeholder"
+        placeholderTxOptions={{ prop: "placeholder" }}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        status="disabled"
+        value="Eu ipsum mollit non minim voluptate nulla fugiat aliqua ullamco aute consectetur nulla nulla amet."
+        labelTx="demoTextField:useCase.statuses.disabled.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.statuses.disabled.helper"
+        helperTxOptions={{ prop: "helper" }}
+        placeholderTx="demoTextField:useCase.statuses.disabled.placeholder"
+        placeholderTxOptions={{ prop: "placeholder" }}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoTextField:useCase.passingContent.name"
+      description="demoTextField:useCase.passingContent.description"
+    >
+      <TextField
+        labelTx="demoTextField:useCase.passingContent.viaLabel.labelTx"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.passingContent.viaLabel.helper"
+        helperTxOptions={{ prop: "helper" }}
+        placeholderTx="demoTextField:useCase.passingContent.viaLabel.placeholder"
+        placeholderTxOptions={{ prop: "placeholder" }}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        labelTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        helperTxOptions={{ prop: "helper" }}
+        placeholderTx="demoShowroomScreen:demoViaSpecifiedTxProp"
+        placeholderTxOptions={{ prop: "placeholder" }}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        value="Reprehenderit Lorem magna non consequat ullamco cupidatat."
+        labelTx="demoTextField:useCase.passingContent.rightAccessory.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.passingContent.rightAccessory.helper"
+        helperTxOptions={{ prop: "helper" }}
+        RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        labelTx="demoTextField:useCase.passingContent.leftAccessory.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.passingContent.leftAccessory.helper"
+        helperTxOptions={{ prop: "helper" }}
+        value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam."
+        LeftAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        labelTx="demoTextField:useCase.passingContent.supportsMultiline.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.passingContent.supportsMultiline.helper"
+        helperTxOptions={{ prop: "helper" }}
+        value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam. Laborum Lorem velit velit minim irure ad in ut adipisicing consectetur."
+        multiline
+        RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
+      />
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoTextField:useCase.styling.name"
+      description="demoTextField:useCase.styling.description"
+    >
+      <TextField
+        labelTx="demoTextField:useCase.styling.styleInput.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.styling.styleInput.helper"
+        helperTxOptions={{ prop: "helper" }}
+        value="Laborum cupidatat aliquip sunt sunt voluptate sint sit proident sunt mollit exercitation ullamco ea elit."
+        style={themed($customInputStyle)}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        labelTx="demoTextField:useCase.styling.styleInputWrapper.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.styling.styleInputWrapper.helper"
+        helperTxOptions={{ prop: "helper" }}
+        value="Aute velit esse dolore pariatur exercitation irure nulla do sunt in duis mollit duis et."
+        inputWrapperStyle={themed($customInputWrapperStyle)}
+        style={themed($customInputStyle)}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        labelTx="demoTextField:useCase.styling.styleContainer.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.styling.styleContainer.helper"
+        helperTxOptions={{ prop: "helper" }}
+        value="Aliquip proident commodo adipisicing non adipisicing Lorem excepteur ullamco voluptate laborum."
+        style={themed($customInputStyle)}
+        containerStyle={themed($customContainerStyle)}
+        inputWrapperStyle={themed($customInputWrapperStyle)}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        labelTx="demoTextField:useCase.styling.styleLabel.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.styling.styleLabel.helper"
+        helperTxOptions={{ prop: "helper" }}
+        value="Ex culpa in consectetur dolor irure velit."
+        style={themed($customInputStyle)}
+        containerStyle={themed($customContainerStyle)}
+        inputWrapperStyle={themed($customInputWrapperStyle)}
+        HelperTextProps={{ style: themed($customLabelAndHelperStyle) }}
+        LabelTextProps={{ style: themed($customLabelAndHelperStyle) }}
+      />
+
+      <DemoDivider size={24} />
+
+      <TextField
+        labelTx="demoTextField:useCase.styling.styleAccessories.label"
+        labelTxOptions={{ prop: "label" }}
+        helperTx="demoTextField:useCase.styling.styleAccessories.helper"
+        helperTxOptions={{ prop: "helper" }}
+        value="Aute nisi dolore fugiat anim mollit nulla ex minim ipsum ex elit."
+        style={themed($customInputWithAbsoluteAccessoriesStyle)}
+        LeftAccessory={() => (
+          <Icon
+            icon="ladybug"
+            containerStyle={themed($customLeftAccessoryStyle)}
+            color="white"
+            size={41}
+          />
+        )}
+        RightAccessory={() => (
+          <Icon
+            icon="ladybug"
+            containerStyle={themed($customRightAccessoryStyle)}
+            color="white"
+            size={41}
+          />
+        )}
+      />
+    </DemoUseCase>,
+  ],
+}
+
+// @demo remove-file