@himakarinv/nativex 1.0.0

package/src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,158 @@
+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';
+
+export type LoginFormProps = {
+  brandingAsideAriaLabel?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  quoteText?: string;
+  quoteAttribution?: string;
+  backButtonLabel?: string;
+  roleTitle?: string;
+  roleDescription?: string;
+  pageTitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  emailInitialValue?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  passwordInitialValue?: string;
+  forgotPasswordButtonLabel?: string;
+  submitButtonLabel?: string;
+  onBack?: () => void;
+  onForgotPassword?: () => void;
+  onSubmit?: (value: { email: string; password: string }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function LoginForm({
+  brandingAsideAriaLabel,
+  logoSrc,
+  logoAlt,
+  quoteText,
+  quoteAttribution,
+  backButtonLabel = DEFAULT_BACK_AND_SELECT_ROLE,
+  roleTitle = DEFAULT_ROLE_TITLE,
+  roleDescription = DEFAULT_ROLE_DESCRIPTION,
+  pageTitle = 'Sign in to your account',
+  emailLabel = 'Email address',
+  emailPlaceholder = 'you@example.com',
+  emailInitialValue = '',
+  passwordLabel = 'Password',
+  passwordPlaceholder = 'Enter your password',
+  passwordInitialValue = '',
+  forgotPasswordButtonLabel = 'Forgot password?',
+  submitButtonLabel = 'Sign in',
+  onBack,
+  onForgotPassword,
+  onSubmit,
+  style,
+}: LoginFormProps) {
+  const [email, setEmail] = useState(emailInitialValue);
+  const [password, setPassword] = useState(passwordInitialValue);
+  const [submitted, setSubmitted] = useState(false);
+
+  useEffect(() => {
+    setEmail(emailInitialValue);
+  }, [emailInitialValue]);
+
+  useEffect(() => {
+    setPassword(passwordInitialValue);
+  }, [passwordInitialValue]);
+
+  const emailError = submitted && !isValidEmail(email) ? 'Enter a valid email address.' : '';
+  const passwordError = submitted && !password.trim() ? 'Enter your password.' : '';
+
+  function submit() {
+    setSubmitted(true);
+    if (!isValidEmail(email) || !password.trim()) {
+      return;
+    }
+    onSubmit?.({ email: email.trim(), password });
+  }
+
+  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}>
+          {pageTitle}
+        </Text>
+        <View style={styles.fields}>
+          <InputField
+            fullWidth
+            variant={InputVariant.Email}
+            label={emailLabel}
+            placeholder={emailPlaceholder}
+            value={email}
+            error={emailError}
+            state={emailError ? InputState.Error : InputState.Default}
+            onValueChange={setEmail}
+            autoComplete="email"
+            inputType="email"
+          />
+          <View style={styles.passwordBlock}>
+            <InputField
+              fullWidth
+              fieldType="password"
+              label={passwordLabel}
+              placeholder={passwordPlaceholder}
+              value={password}
+              error={passwordError}
+              state={passwordError ? InputState.Error : InputState.Default}
+              onValueChange={setPassword}
+              autoComplete="password"
+            />
+            <View style={styles.forgotRow}>
+              <Button
+                variant={ButtonVariant.LinkDangerGray}
+                size={ButtonSize.Small}
+                label={forgotPasswordButtonLabel}
+                onPress={onForgotPassword}
+              />
+            </View>
+          </View>
+          <View style={styles.submit}>
+            <Button
+              fullWidth
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+              label={submitButtonLabel}
+              onPress={submit}
+            />
+          </View>
+        </View>
+      </View>
+    </LoginShell>
+  );
+}

package/src/components/LoginForm/index.ts

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

package/src/components/LoginShell/LoginShell.tsx

@@ -0,0 +1,97 @@
+import { type ReactNode } from 'react';
+import {
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { LOGIN_HERO } from './branding-assets';
+import {
+  DEFAULT_BRANDING_ASIDE_LABEL,
+  DEFAULT_LOGO_ALT,
+  DEFAULT_QUOTE_ATTRIBUTION,
+  DEFAULT_QUOTE_TEXT,
+  isRemoteUri,
+} from './login-copy';
+import { loginPageStyles as styles } from './loginPageStyles';
+import { SoftechLogo } from './SoftechLogo';
+
+export type LoginShellProps = {
+  brandingAsideAriaLabel?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  asideHeroImageSrc?: string;
+  asideHeroImageAlt?: string;
+  quoteText?: string;
+  quoteAttribution?: string;
+  showHero?: boolean;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function LoginShell({
+  brandingAsideAriaLabel = DEFAULT_BRANDING_ASIDE_LABEL,
+  logoSrc = '',
+  logoAlt = DEFAULT_LOGO_ALT,
+  asideHeroImageSrc = '',
+  asideHeroImageAlt = '',
+  quoteText = DEFAULT_QUOTE_TEXT,
+  quoteAttribution = DEFAULT_QUOTE_ATTRIBUTION,
+  showHero = true,
+  children,
+  style,
+}: LoginShellProps) {
+  const remoteLogo = isRemoteUri(logoSrc);
+  const remoteHero = isRemoteUri(asideHeroImageSrc);
+  const showQuote = Boolean(quoteText.trim() || quoteAttribution.trim());
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.host, style]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}>
+        <View accessibilityLabel={brandingAsideAriaLabel} style={styles.branding}>
+          {remoteLogo ? (
+            <Image
+              accessibilityLabel={logoAlt}
+              resizeMode="contain"
+              source={{ uri: logoSrc.trim() }}
+              style={styles.logo}
+            />
+          ) : (
+            <SoftechLogo accessibilityLabel={logoAlt} />
+          )}
+
+          {showHero ? (
+            <View style={styles.hero}>
+              <Image
+                accessibilityLabel={asideHeroImageAlt || undefined}
+                resizeMode="contain"
+                source={remoteHero ? { uri: asideHeroImageSrc.trim() } : LOGIN_HERO}
+                style={styles.heroImage}
+              />
+            </View>
+          ) : null}
+
+          {showQuote ? (
+            <View style={styles.quoteBlock}>
+              {quoteText.trim() ? <Text style={styles.quote}>{quoteText}</Text> : null}
+              {quoteAttribution.trim() ? (
+                <Text style={styles.quoteAttribution}>{quoteAttribution}</Text>
+              ) : null}
+            </View>
+          ) : null}
+        </View>
+        <View style={styles.main}>{children}</View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

package/src/components/LoginShell/RoleCard.tsx

@@ -0,0 +1,24 @@
+import { Text, View } from 'react-native';
+
+import { spacing } from '../../theme';
+import { Icon, IconName } from '../Icon';
+import { loginPageStyles as styles } from './loginPageStyles';
+
+export type RoleCardProps = {
+  title: string;
+  description: string;
+};
+
+export function RoleCard({ title, description }: RoleCardProps) {
+  return (
+    <View style={styles.roleCard}>
+      <View accessible={false} style={styles.roleIcon}>
+        <Icon name={IconName.UserFrame} size={spacing['5xl']} decorative />
+      </View>
+      <View style={styles.roleText}>
+        <Text style={styles.roleTitle}>{title}</Text>
+        <Text style={styles.roleDesc}>{description}</Text>
+      </View>
+    </View>
+  );
+}

package/src/components/LoginShell/SoftechLogo.tsx

@@ -0,0 +1,24 @@
+import { Image, type ImageStyle, type StyleProp } from 'react-native';
+
+import { DEFAULT_LOGO_ALT } from './login-copy';
+import { SOFTECH_LOGO } from './branding-assets';
+import { loginPageStyles as styles } from './loginPageStyles';
+
+export type SoftechLogoProps = {
+  accessibilityLabel?: string;
+  style?: StyleProp<ImageStyle>;
+};
+
+export function SoftechLogo({
+  accessibilityLabel = DEFAULT_LOGO_ALT,
+  style,
+}: SoftechLogoProps) {
+  return (
+    <Image
+      accessibilityLabel={accessibilityLabel}
+      resizeMode="contain"
+      source={SOFTECH_LOGO}
+      style={[styles.logo, style]}
+    />
+  );
+}

package/src/components/LoginShell/branding-assets.ts

@@ -0,0 +1,2 @@
+export const SOFTECH_LOGO = require('../../assets/branding/softech-logo.png');
+export const LOGIN_HERO = require('../../assets/branding/logo.jpg');

package/src/components/LoginShell/index.ts

@@ -0,0 +1,20 @@
+export { LoginShell } from './LoginShell';
+export type { LoginShellProps } from './LoginShell';
+export { SoftechLogo } from './SoftechLogo';
+export type { SoftechLogoProps } from './SoftechLogo';
+export { RoleCard } from './RoleCard';
+export type { RoleCardProps } from './RoleCard';
+export { loginPageStyles } from './loginPageStyles';
+export {
+  DEFAULT_BACK_AND_SELECT_ROLE,
+  DEFAULT_BRANDING_ASIDE_LABEL,
+  DEFAULT_LOGO_ALT,
+  DEFAULT_QUOTE_ATTRIBUTION,
+  DEFAULT_QUOTE_TEXT,
+  DEFAULT_ROLE_DESCRIPTION,
+  DEFAULT_ROLE_TITLE,
+  DEFAULT_ROLES,
+  isRemoteUri,
+  isValidEmail,
+} from './login-copy';
+export type { LoginRoleOption } from './login-copy';

package/src/components/LoginShell/login-copy.ts

@@ -0,0 +1,45 @@
+export const DEFAULT_BRANDING_ASIDE_LABEL = 'Branding';
+export const DEFAULT_LOGO_ALT = 'Softech — INNOVATE. INTEGRATE. LEAD.';
+export const DEFAULT_QUOTE_TEXT =
+  'A business that runs on instinct will survive. A business that runs on ERP will scale.';
+export const DEFAULT_QUOTE_ATTRIBUTION = '— Malcolm X';
+export const DEFAULT_ROLE_TITLE = 'Super Admin';
+export const DEFAULT_ROLE_DESCRIPTION = 'Oversee operations and manage users.';
+export const DEFAULT_BACK_AND_SELECT_ROLE = 'Back and select role';
+
+export type LoginRoleOption = {
+  id: string;
+  title: string;
+  description: string;
+};
+
+export const DEFAULT_ROLES: LoginRoleOption[] = [
+  {
+    id: 'admin',
+    title: 'Super Admin',
+    description: 'Oversee operations and manage users.',
+  },
+  {
+    id: 'employee',
+    title: 'Employee',
+    description: 'Complete day-to-day tasks and update records.',
+  },
+  {
+    id: 'manager',
+    title: 'Manager',
+    description: 'Review team work and approve requests.',
+  },
+  {
+    id: 'hr',
+    title: 'HR',
+    description: 'Manage employee information and tasks.',
+  },
+];
+
+export function isRemoteUri(value?: string) {
+  return Boolean(value?.trim() && /^https?:\/\//i.test(value.trim()));
+}
+
+export function isValidEmail(value: string) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}

package/src/components/LoginShell/loginPageStyles.ts

@@ -0,0 +1,210 @@
+import { StyleSheet } from 'react-native';
+
+import { borders, colors, radius, spacing, typography } from '../../theme';
+
+export const loginPageStyles = StyleSheet.create({
+  host: {
+    flex: 1,
+    width: '100%',
+    minHeight: '100%',
+    backgroundColor: colors.white,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  branding: {
+    paddingTop: spacing.md,
+    paddingBottom: spacing.base,
+    paddingLeft: spacing.none,
+    paddingRight: spacing.base,
+    backgroundColor: colors.white,
+    borderBottomWidth: borders.width.thin,
+    borderBottomColor: colors.primary.light,
+    gap: spacing.sm,
+  },
+  logo: {
+    width: spacing['6xl'] * 5,
+    height: spacing['5xl'] + spacing.md,
+    maxWidth: '100%',
+    alignSelf: 'flex-start',
+  },
+  hero: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing.sm,
+    paddingLeft: spacing.md,
+  },
+  heroImage: {
+    width: '100%',
+    maxWidth: spacing['6xl'] * 6,
+    height: spacing['6xl'] * 3 + spacing.lg,
+  },
+  brandText: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.md,
+    fontWeight: typography.fontWeight.bold,
+    color: colors.text.strong,
+  },
+  quoteBlock: {
+    width: '100%',
+    paddingHorizontal: spacing.base,
+  },
+  quote: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontStyle: 'italic',
+    textAlign: 'center',
+    color: colors.text.muted,
+  },
+  quoteAttribution: {
+    marginTop: spacing.xs,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontStyle: 'normal',
+    fontWeight: typography.fontWeight.medium,
+    textAlign: 'center',
+    color: colors.text.strong,
+  },
+  main: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    backgroundColor: colors.primary.lightest,
+    paddingHorizontal: spacing.base,
+    paddingTop: spacing['2xl'],
+    paddingBottom: spacing['3xl'],
+  },
+  form: {
+    width: '100%',
+    maxWidth: spacing['6xl'] * 8,
+    alignSelf: 'center',
+    gap: spacing.md,
+  },
+  backWrap: {
+    alignSelf: 'flex-start',
+  },
+  roleCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    width: '100%',
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    borderWidth: borders.width.thin,
+    borderColor: colors.login.roleCardBorder,
+    borderRadius: radius.md,
+    backgroundColor: colors.primary.lightest,
+  },
+  roleIcon: {
+    width: spacing['5xl'],
+    height: spacing['5xl'],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  roleText: {
+    flex: 1,
+    minWidth: 0,
+    gap: spacing.xs,
+  },
+  roleTitle: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.semibold,
+    color: colors.text.strong,
+  },
+  roleDesc: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.text.muted,
+  },
+  pageTitle: {
+    marginTop: spacing.xs,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.xl,
+    fontWeight: typography.fontWeight.bold,
+    color: colors.text.strong,
+  },
+  pageTitleVerify: {
+    marginTop: spacing.lg,
+  },
+  fields: {
+    width: '100%',
+    gap: spacing.md,
+    marginTop: spacing.xs,
+  },
+  passwordBlock: {
+    width: '100%',
+    gap: spacing.sm,
+  },
+  forgotRow: {
+    width: '100%',
+    alignItems: 'flex-end',
+  },
+  submit: {
+    marginTop: spacing.sm,
+  },
+  inlineRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  inlineCentered: {
+    justifyContent: 'center',
+    marginTop: spacing.xs,
+  },
+  inlinePrefix: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.text.strong,
+  },
+  roleList: {
+    width: '100%',
+    gap: spacing.md,
+  },
+  roleOption: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.md,
+    borderWidth: borders.width.thin,
+    borderColor: colors.login.roleCardBorder,
+    borderRadius: radius.md,
+    backgroundColor: colors.white,
+    overflow: 'hidden',
+  },
+  roleOptionIconWrap: {
+    width: spacing['5xl'] + spacing.base,
+    height: spacing['5xl'] + spacing.base,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.sm,
+    backgroundColor: colors.primary.lightest,
+  },
+  roleOptionIconInner: {
+    width: spacing['4xl'] + spacing.sm,
+    height: spacing['4xl'] + spacing.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.full,
+    backgroundColor: colors.white,
+  },
+  roleOptionText: {
+    flex: 1,
+    minWidth: 0,
+    gap: spacing.xs,
+  },
+  roleOptionTitle: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.base,
+    fontWeight: typography.fontWeight.bold,
+    color: colors.text.strong,
+  },
+  roleOptionDesc: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.text.muted,
+  },
+});