@himakarinv/nativex 1.0.0

package/src/components/ResetPassword/ResetPassword.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { IconName } from '../Icon';
+import { InputField, InputState } from '../InputField';
+import { LoginShell } from '../LoginShell/LoginShell';
+import { RoleCard } from '../LoginShell/RoleCard';
+import {
+  DEFAULT_BACK_AND_SELECT_ROLE,
+  DEFAULT_ROLE_DESCRIPTION,
+  DEFAULT_ROLE_TITLE,
+} from '../LoginShell/login-copy';
+import { loginPageStyles as styles } from '../LoginShell/loginPageStyles';
+
+export type ResetPasswordProps = {
+  brandingAsideAriaLabel?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  quoteText?: string;
+  quoteAttribution?: string;
+  backButtonLabel?: string;
+  roleTitle?: string;
+  roleDescription?: string;
+  pageTitle?: string;
+  currentPasswordLabel?: string;
+  currentPasswordPlaceholder?: string;
+  currentPasswordHint?: string;
+  newPasswordLabel?: string;
+  newPasswordPlaceholder?: string;
+  newPasswordHint?: string;
+  confirmPasswordLabel?: string;
+  confirmPasswordPlaceholder?: string;
+  confirmPasswordHint?: string;
+  submitButtonLabel?: string;
+  minLengthPasswordError?: string;
+  passwordMismatchError?: string;
+  onBack?: () => void;
+  onSubmit?: (value: {
+    currentPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+  }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function ResetPassword({
+  brandingAsideAriaLabel,
+  logoSrc,
+  logoAlt,
+  quoteText,
+  quoteAttribution,
+  backButtonLabel = DEFAULT_BACK_AND_SELECT_ROLE,
+  roleTitle = DEFAULT_ROLE_TITLE,
+  roleDescription = DEFAULT_ROLE_DESCRIPTION,
+  pageTitle = 'Reset Password',
+  currentPasswordLabel = 'Current Password',
+  currentPasswordPlaceholder = 'Enter your current password',
+  currentPasswordHint = '',
+  newPasswordLabel = 'New Password',
+  newPasswordPlaceholder = 'Enter your new password',
+  newPasswordHint = '',
+  confirmPasswordLabel = 'Confirm Password',
+  confirmPasswordPlaceholder = 'Confirm your new password',
+  confirmPasswordHint = '',
+  submitButtonLabel = 'Reset Password',
+  minLengthPasswordError = 'Use at least 8 characters.',
+  passwordMismatchError = 'Passwords do not match.',
+  onBack,
+  onSubmit,
+  style,
+}: ResetPasswordProps) {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const newPasswordError =
+    submitted && newPassword.length < 8 ? minLengthPasswordError : '';
+  const confirmError =
+    submitted && confirmPassword && confirmPassword !== newPassword
+      ? passwordMismatchError
+      : submitted && !confirmPassword.trim()
+        ? passwordMismatchError
+        : '';
+
+  function submit() {
+    setSubmitted(true);
+    if (
+      !currentPassword.trim() ||
+      newPassword.length < 8 ||
+      !confirmPassword.trim() ||
+      confirmPassword !== newPassword
+    ) {
+      return;
+    }
+    onSubmit?.({ currentPassword, newPassword, confirmPassword });
+  }
+
+  return (
+    <LoginShell
+      brandingAsideAriaLabel={brandingAsideAriaLabel}
+      logoSrc={logoSrc}
+      logoAlt={logoAlt}
+      quoteText={quoteText}
+      quoteAttribution={quoteAttribution}
+      style={style}>
+      <View style={styles.form}>
+        <View style={styles.backWrap}>
+          <Button
+            variant={ButtonVariant.LinkGray}
+            size={ButtonSize.Small}
+            iconPosition={IconPosition.Before}
+            iconName={IconName.ChevronLeft}
+            iconDecorative
+            label={backButtonLabel}
+            onPress={onBack}
+          />
+        </View>
+        <RoleCard title={roleTitle} description={roleDescription} />
+        <Text accessibilityRole="header" style={[styles.pageTitle, styles.pageTitleVerify]}>
+          {pageTitle}
+        </Text>
+        <View style={styles.fields}>
+          <InputField
+            fullWidth
+            fieldType="password"
+            label={currentPasswordLabel}
+            placeholder={currentPasswordPlaceholder}
+            hint={currentPasswordHint}
+            value={currentPassword}
+            onValueChange={setCurrentPassword}
+            autoComplete="password"
+          />
+          <InputField
+            fullWidth
+            fieldType="password"
+            label={newPasswordLabel}
+            placeholder={newPasswordPlaceholder}
+            hint={newPasswordError ? '' : newPasswordHint}
+            value={newPassword}
+            error={newPasswordError}
+            state={newPasswordError ? InputState.Error : InputState.Default}
+            onValueChange={setNewPassword}
+            autoComplete="password"
+          />
+          <InputField
+            fullWidth
+            fieldType="password"
+            label={confirmPasswordLabel}
+            placeholder={confirmPasswordPlaceholder}
+            hint={confirmError ? '' : confirmPasswordHint}
+            value={confirmPassword}
+            error={confirmError}
+            state={confirmError ? InputState.Error : InputState.Default}
+            onValueChange={setConfirmPassword}
+            autoComplete="password"
+          />
+          <View style={styles.submit}>
+            <Button
+              fullWidth
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+              label={submitButtonLabel}
+              onPress={submit}
+            />
+          </View>
+        </View>
+      </View>
+    </LoginShell>
+  );
+}

package/src/components/ResetPassword/index.ts

@@ -0,0 +1,2 @@
+export { ResetPassword } from './ResetPassword';
+export type { ResetPasswordProps } from './ResetPassword';

package/src/components/RoleSelection/RoleSelection.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+import { Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { colors, spacing } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { Icon, IconName } from '../Icon';
+import { LoginShell } from '../LoginShell/LoginShell';
+import { DEFAULT_ROLES, type LoginRoleOption } from '../LoginShell/login-copy';
+import { loginPageStyles as styles } from '../LoginShell/loginPageStyles';
+
+export type RoleSelectionProps = {
+  brandingAsideAriaLabel?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  quoteText?: string;
+  quoteAttribution?: string;
+  backButtonLabel?: string;
+  roleGroupAriaLabel?: string;
+  roles?: LoginRoleOption[];
+  selectedRoleId?: string;
+  onBack?: () => void;
+  onRoleSelected?: (id: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function RoleSelection({
+  brandingAsideAriaLabel,
+  logoSrc,
+  logoAlt,
+  quoteText,
+  quoteAttribution,
+  backButtonLabel = '',
+  roleGroupAriaLabel = 'Select your role',
+  roles = DEFAULT_ROLES,
+  selectedRoleId,
+  onBack,
+  onRoleSelected,
+  style,
+}: RoleSelectionProps) {
+  const [selectedId, setSelectedId] = useState(selectedRoleId ?? '');
+
+  useEffect(() => {
+    if (selectedRoleId !== undefined) {
+      setSelectedId(selectedRoleId);
+    }
+  }, [selectedRoleId]);
+
+  function selectRole(id: string) {
+    setSelectedId(id);
+    onRoleSelected?.(id);
+  }
+
+  return (
+    <LoginShell
+      brandingAsideAriaLabel={brandingAsideAriaLabel}
+      logoSrc={logoSrc}
+      logoAlt={logoAlt}
+      quoteText={quoteText}
+      quoteAttribution={quoteAttribution}
+      style={style}>
+      <View style={styles.form}>
+        {backButtonLabel.trim() ? (
+          <View style={styles.backWrap}>
+            <Button
+              variant={ButtonVariant.LinkGray}
+              size={ButtonSize.Small}
+              iconPosition={IconPosition.Before}
+              iconName={IconName.ChevronLeft}
+              iconDecorative
+              label={backButtonLabel}
+              onPress={onBack}
+            />
+          </View>
+        ) : null}
+
+        <View accessibilityLabel={roleGroupAriaLabel} style={styles.roleList}>
+          {roles.map((role) => {
+            const selected = selectedId === role.id;
+            return (
+              <Pressable
+                key={role.id}
+                accessibilityRole="button"
+                accessibilityState={{ selected }}
+                accessibilityLabel={`${role.title}. ${role.description}`}
+                onPress={() => selectRole(role.id)}
+                style={styles.roleOption}>
+                <View style={styles.roleOptionIconWrap}>
+                  <View style={styles.roleOptionIconInner}>
+                    <Icon name={IconName.UserFrame} size={spacing['2xl']} decorative />
+                  </View>
+                </View>
+                <View style={styles.roleOptionText}>
+                  <Text style={styles.roleOptionTitle}>{role.title}</Text>
+                  <Text style={styles.roleOptionDesc}>{role.description}</Text>
+                </View>
+                {selected ? (
+                  <Icon
+                    name={IconName.Checkmark}
+                    size={spacing.lg}
+                    color={colors.login.roleCardBorder}
+                    decorative
+                  />
+                ) : null}
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </LoginShell>
+  );
+}

package/src/components/RoleSelection/index.ts

@@ -0,0 +1,2 @@
+export { RoleSelection } from './RoleSelection';
+export type { RoleSelectionProps } from './RoleSelection';

package/src/components/SendOtp/SendOtp.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useState } from 'react';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { IconName } from '../Icon';
+import { InputField, InputState, InputVariant } from '../InputField';
+import { LoginShell } from '../LoginShell/LoginShell';
+import { RoleCard } from '../LoginShell/RoleCard';
+import {
+  DEFAULT_BACK_AND_SELECT_ROLE,
+  DEFAULT_ROLE_DESCRIPTION,
+  DEFAULT_ROLE_TITLE,
+  isValidEmail,
+} from '../LoginShell/login-copy';
+import { loginPageStyles as styles } from '../LoginShell/loginPageStyles';
+import { Verification, VerificationDigits, VerificationSize } from '../Verification';
+
+export type SendOtpProps = {
+  brandingAsideAriaLabel?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  quoteText?: string;
+  quoteAttribution?: string;
+  backButtonLabel?: string;
+  roleTitle?: string;
+  roleDescription?: string;
+  pageTitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  emailHint?: string;
+  emailInitialValue?: string;
+  otpVerificationLabel?: string;
+  resendPrefixText?: string;
+  resendButtonLabel?: string;
+  submitButtonLabel?: string;
+  onBack?: () => void;
+  onResendOtp?: () => void;
+  onSubmit?: (value: { email: string; code: string }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function SendOtp({
+  brandingAsideAriaLabel,
+  logoSrc,
+  logoAlt,
+  quoteText,
+  quoteAttribution,
+  backButtonLabel = DEFAULT_BACK_AND_SELECT_ROLE,
+  roleTitle = DEFAULT_ROLE_TITLE,
+  roleDescription = DEFAULT_ROLE_DESCRIPTION,
+  pageTitle = 'Verify your Email',
+  emailLabel = 'What is your e-mail?',
+  emailPlaceholder = 'Alex.johnson@gmail.com',
+  emailHint = '',
+  emailInitialValue = '',
+  otpVerificationLabel = 'Enter the verification code',
+  resendPrefixText = "Didn't get a Code?",
+  resendButtonLabel = 'Click to resend',
+  submitButtonLabel = 'Confirm & Reset Password',
+  onBack,
+  onResendOtp,
+  onSubmit,
+  style,
+}: SendOtpProps) {
+  const [email, setEmail] = useState(emailInitialValue);
+  const [code, setCode] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  useEffect(() => {
+    setEmail(emailInitialValue);
+  }, [emailInitialValue]);
+
+  const emailError = submitted && !isValidEmail(email) ? 'Enter a valid email address.' : '';
+
+  function submit() {
+    setSubmitted(true);
+    if (!isValidEmail(email)) {
+      return;
+    }
+    onSubmit?.({ email: email.trim(), code });
+  }
+
+  return (
+    <LoginShell
+      brandingAsideAriaLabel={brandingAsideAriaLabel}
+      logoSrc={logoSrc}
+      logoAlt={logoAlt}
+      quoteText={quoteText}
+      quoteAttribution={quoteAttribution}
+      style={style}>
+      <View style={styles.form}>
+        <View style={styles.backWrap}>
+          <Button
+            variant={ButtonVariant.LinkGray}
+            size={ButtonSize.Small}
+            iconPosition={IconPosition.Before}
+            iconName={IconName.ChevronLeft}
+            iconDecorative
+            label={backButtonLabel}
+            onPress={onBack}
+          />
+        </View>
+        <RoleCard title={roleTitle} description={roleDescription} />
+        <Text accessibilityRole="header" style={[styles.pageTitle, styles.pageTitleVerify]}>
+          {pageTitle}
+        </Text>
+        <View style={styles.fields}>
+          <InputField
+            fullWidth
+            variant={InputVariant.Email}
+            label={emailLabel}
+            placeholder={emailPlaceholder}
+            hint={emailError ? '' : emailHint}
+            value={email}
+            error={emailError}
+            state={emailError ? InputState.Error : InputState.Default}
+            onValueChange={setEmail}
+            autoComplete="email"
+            inputType="email"
+          />
+          <Verification
+            digits={VerificationDigits.Four}
+            size={VerificationSize.Medium}
+            label={otpVerificationLabel}
+            onValueChange={setCode}
+          />
+          <View style={styles.inlineRow}>
+            <Text style={styles.inlinePrefix}>{resendPrefixText}</Text>
+            <Button
+              variant={ButtonVariant.LinkPrimary}
+              size={ButtonSize.Small}
+              label={resendButtonLabel}
+              onPress={onResendOtp}
+            />
+          </View>
+          <View style={styles.submit}>
+            <Button
+              fullWidth
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+              label={submitButtonLabel}
+              onPress={submit}
+            />
+          </View>
+        </View>
+      </View>
+    </LoginShell>
+  );
+}

package/src/components/SendOtp/index.ts

@@ -0,0 +1,2 @@
+export { SendOtp } from './SendOtp';
+export type { SendOtpProps } from './SendOtp';