@himakarinv/nativex 1.0.0

package/src/components/DynamicForm/index.ts

@@ -0,0 +1,13 @@
+export {
+  DynamicForm,
+  DynamicFormFieldType,
+  DynamicFormLayout,
+} from './DynamicForm';
+export type {
+  DynamicFormFieldConfig,
+  DynamicFormFieldValidation,
+  DynamicFormProps,
+  DynamicFormSelectOption,
+  DynamicFormTypeaheadConfig,
+  DynamicFormValue,
+} from './DynamicForm';

package/src/components/ErrorPages/ErrorPages.tsx

@@ -0,0 +1,135 @@
+import { Pressable, StyleSheet, Text, useWindowDimensions, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { colors, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, dismissButtonFocus } from '../Button';
+import { IconName } from '../Icon';
+import { getIconComponent } from '../Icon/icon-registry';
+
+export const ErrorPageVariant = {
+  NotFound: 'not-found',
+  Unauthorized: 'unauthorized',
+  Forbidden: 'forbidden',
+  InternalServerError: 'internal-server-error',
+} as const;
+
+export type ErrorPageVariant = (typeof ErrorPageVariant)[keyof typeof ErrorPageVariant];
+
+export type ErrorPagesProps = {
+  variant?: ErrorPageVariant;
+  onBackToSafety?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const COPY: Record<
+  ErrorPageVariant,
+  { icon: string; alt: string; message: string; landscape: boolean }
+> = {
+  [ErrorPageVariant.NotFound]: {
+    icon: IconName.NotFound,
+    alt: 'Error 404 illustration',
+    message: "Oops! The page you're looking for doesn't exist.",
+    landscape: true,
+  },
+  [ErrorPageVariant.Unauthorized]: {
+    icon: IconName.Unauthorized,
+    alt: 'Error 401 Unauthorized illustration',
+    message: 'UNAUTHORIZED - Authentication failed',
+    landscape: false,
+  },
+  [ErrorPageVariant.Forbidden]: {
+    icon: IconName.Forbidden,
+    alt: 'Error 403 Forbidden illustration',
+    message: 'FORBIDDEN - Access denied',
+    landscape: false,
+  },
+  [ErrorPageVariant.InternalServerError]: {
+    icon: IconName.InternalServerError,
+    alt: 'Error 500 Internal Server Error illustration',
+    message: '500 - INTERNAL SERVER ERROR',
+    landscape: false,
+  },
+};
+
+export function ErrorPages({
+  variant = ErrorPageVariant.NotFound,
+  onBackToSafety,
+  style,
+}: ErrorPagesProps) {
+  const { width } = useWindowDimensions();
+  const copy = COPY[variant];
+  const Illustration = getIconComponent(copy.icon);
+  const illustrationWidth = Math.min(width - spacing.xl * 2, spacing['6xl'] * 7);
+  const illustrationHeight = copy.landscape
+    ? Math.round(illustrationWidth * (435 / 628))
+    : illustrationWidth;
+
+  return (
+    <Pressable
+      accessible={false}
+      focusable={false}
+      onPress={dismissButtonFocus}
+      style={[styles.host, style]}>
+      <View style={styles.centerStage}>
+        <View style={styles.content}>
+          <View
+            accessible
+            accessibilityRole="image"
+            accessibilityLabel={copy.alt}
+            style={[styles.illustration, { width: illustrationWidth, height: illustrationHeight }]}>
+            {Illustration ? (
+              <Illustration width={illustrationWidth} height={illustrationHeight} />
+            ) : null}
+          </View>
+          <Text style={styles.message}>{copy.message}</Text>
+          <View style={styles.cta}>
+            <Button
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Medium}
+              label="Back To Safety"
+              onPress={onBackToSafety}
+            />
+          </View>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    flex: 1,
+    width: '100%',
+    minHeight: '100%',
+    backgroundColor: colors.white,
+  },
+  centerStage: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xl,
+    paddingBottom: spacing['4xl'],
+  },
+  content: {
+    width: '100%',
+    maxWidth: spacing['6xl'] * 8,
+    alignItems: 'center',
+    gap: spacing.xl,
+  },
+  illustration: {
+    overflow: 'hidden',
+  },
+  message: {
+    width: '100%',
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.lg,
+    fontWeight: typography.fontWeight.medium,
+    textAlign: 'center',
+    color: colors.text.strong,
+  },
+  cta: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+});

package/src/components/ErrorPages/index.ts

@@ -0,0 +1,2 @@
+export { ErrorPages, ErrorPageVariant } from './ErrorPages';
+export type { ErrorPagesProps } from './ErrorPages';

package/src/components/ForgotPassword/ForgotPassword.tsx

@@ -0,0 +1,121 @@
+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 ForgotPasswordProps = {
+  brandingAsideAriaLabel?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  quoteText?: string;
+  quoteAttribution?: string;
+  backButtonLabel?: string;
+  roleTitle?: string;
+  roleDescription?: string;
+  pageTitle?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  emailInitialValue?: string;
+  submitButtonLabel?: string;
+  onBack?: () => void;
+  onSubmit?: (email: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function ForgotPassword({
+  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',
+  emailInitialValue = '',
+  submitButtonLabel = 'Reset Password',
+  onBack,
+  onSubmit,
+  style,
+}: ForgotPasswordProps) {
+  const [email, setEmail] = useState(emailInitialValue);
+  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.trim());
+  }
+
+  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}
+            value={email}
+            error={emailError}
+            state={emailError ? InputState.Error : InputState.Default}
+            onValueChange={setEmail}
+            autoComplete="email"
+            inputType="email"
+          />
+          <View style={styles.submit}>
+            <Button
+              fullWidth
+              variant={ButtonVariant.Secondary}
+              size={ButtonSize.Large}
+              label={submitButtonLabel}
+              onPress={submit}
+            />
+          </View>
+        </View>
+      </View>
+    </LoginShell>
+  );
+}

package/src/components/ForgotPassword/index.ts

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

package/src/components/HintError/HintError.tsx

@@ -0,0 +1,37 @@
+import { StyleSheet, Text } from 'react-native';
+
+import { colors, typography } from '../../theme';
+
+export type HintErrorProps = {
+  hint?: string;
+  error?: string;
+};
+
+export function HintError({ hint, error }: HintErrorProps) {
+  if (error) {
+    return <Text style={styles.error}>{error}</Text>;
+  }
+
+  if (hint) {
+    return <Text style={styles.hint}>{hint}</Text>;
+  }
+
+  return null;
+}
+
+const styles = StyleSheet.create({
+  hint: {
+    color: colors.input.label,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.tight,
+    marginTop: 6,
+    fontFamily: typography.fontFamily.base,
+  },
+  error: {
+    color: colors.danger.strong,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.tight,
+    marginTop: 6,
+    fontFamily: typography.fontFamily.base,
+  },
+});

package/src/components/HintError/index.ts

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

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,43 @@
+import { Platform, View } from 'react-native';
+
+import { a11yHiddenProps } from '../../utils/a11y';
+import { getIconComponent, isIconName } from './icon-registry';
+
+export type IconProps = {
+  name: string;
+  size?: number;
+  color?: string;
+  decorative?: boolean;
+  accessibilityLabel?: string;
+};
+
+export function Icon({
+  name,
+  size = 16,
+  color,
+  decorative = false,
+  accessibilityLabel,
+}: IconProps) {
+  if (!isIconName(name)) {
+    return null;
+  }
+
+  const SvgIcon = getIconComponent(name);
+  if (!SvgIcon) {
+    return null;
+  }
+
+  return (
+    <View
+      accessible={!decorative}
+      accessibilityRole={decorative ? undefined : 'image'}
+      accessibilityLabel={decorative ? undefined : accessibilityLabel ?? name}
+      {...(decorative
+        ? a11yHiddenProps(true)
+        : Platform.OS === 'web'
+          ? {}
+          : { importantForAccessibility: 'yes' as const })}>
+      <SvgIcon width={size} height={size} color={color} />
+    </View>
+  );
+}

package/src/components/Icon/icon-registry.ts

@@ -0,0 +1,227 @@
+import type { ComponentType } from 'react';
+import type { SvgProps } from 'react-native-svg';
+
+import Alert from '../../assets/icons/alert.svg';
+import Calendar from '../../assets/icons/calendar.svg';
+import ArrowRight from '../../assets/icons/arrow-right.svg';
+import LeftArrow from '../../assets/icons/left-arrow.svg';
+import RightArrow from '../../assets/icons/right-arrow.svg';
+import Card from '../../assets/icons/card.svg';
+import Chat from '../../assets/icons/chat.svg';
+import CalendarEvent from '../../assets/icons/calendar-event.svg';
+import ErrorIcon from '../../assets/icons/error.svg';
+import DropdownArrow from '../../assets/icons/dropdown-arrow.svg';
+import DropdownAvatar from '../../assets/icons/dropdown-avatar.svg';
+import AvatarMale from '../../assets/icons/avatar-male.svg';
+import AvatarFemale from '../../assets/icons/avatar-female.svg';
+import Email from '../../assets/icons/email.svg';
+import Eye from '../../assets/icons/eye.svg';
+import Info from '../../assets/icons/info.svg';
+import EyeOff from '../../assets/icons/eye-off.svg';
+import Help from '../../assets/icons/help.svg';
+import VerticalLine from '../../assets/icons/vertical-line.svg';
+import User from '../../assets/icons/user.svg';
+import UserFrame from '../../assets/icons/User-Frame.svg';
+import Dot from '../../assets/icons/dot.svg';
+import Search from '../../assets/icons/search.svg';
+import ChevronDown from '../../assets/icons/chevron-down.svg';
+import ChevronLeft from '../../assets/icons/chevron-left.svg';
+import ChevronRight from '../../assets/icons/chevron-right.svg';
+import CaretRight from '../../assets/icons/caret-right.svg';
+import Slash from '../../assets/icons/slash.svg';
+import CircleRadio from '../../assets/icons/circle-radio.svg';
+import CircleRadioActive from '../../assets/icons/circle-radio-active.svg';
+import Check from '../../assets/icons/check.svg';
+import Checkmark from '../../assets/icons/checkmark.svg';
+import CheckboxMinus from '../../assets/icons/checkbox-minus.svg';
+import RadioDot from '../../assets/icons/radio-dot.svg';
+import Layers from '../../assets/icons/2-layers.svg';
+import Code from '../../assets/icons/code.svg';
+import Country from '../../assets/icons/country.svg';
+import Close from '../../assets/icons/close.svg';
+import HelpCircle from '../../assets/icons/help-circle.svg';
+import HashtagIcon from '../../assets/icons/hashtag-icon.svg';
+import Home from '../../assets/icons/home.svg';
+import HomeSmile from '../../assets/icons/home-smile.svg';
+import LogOut from '../../assets/icons/log-out.svg';
+import LogOutNav from '../../assets/icons/Log-out-nav.svg';
+import Pencil from '../../assets/icons/pencil.svg';
+import Plus from '../../assets/icons/plus.svg';
+import Settings from '../../assets/icons/settings.svg';
+import Slack from '../../assets/icons/slack.svg';
+import Success from '../../assets/icons/success.svg';
+import Trash from '../../assets/icons/trash.svg';
+import Download from '../../assets/icons/download.svg';
+import UserPlus from '../../assets/icons/user-plus.svg';
+import Users from '../../assets/icons/users.svg';
+import Warning from '../../assets/icons/warning.svg';
+import Zap from '../../assets/icons/zap.svg';
+import VerticalThreeDots from '../../assets/icons/vertical-three-dots-icon.svg';
+import VerticalDotsActive from '../../assets/icons/vertical-dots-true-icon.svg';
+import NotFound from '../../assets/icons/Not-Found.svg';
+import Unauthorized from '../../assets/icons/Unauthorized.svg';
+import Forbidden from '../../assets/icons/Forbidden.svg';
+import InternalServerError from '../../assets/icons/Internal-server-error.svg';
+import Bell from '../../assets/icons/bell.svg';
+import NotificationBox from '../../assets/icons/notification-box.svg';
+import Clock from '../../assets/icons/clock.svg';
+import TrendUp from '../../assets/icons/trend-up-01.svg';
+import TrendDown from '../../assets/icons/trend-down-01.svg';
+
+export enum IconName {
+  Alert = 'alert',
+  Calendar = 'calendar',
+  ArrowRight = 'arrow-right',
+  LeftArrow = 'left-arrow',
+  RightArrow = 'right-arrow',
+  Card = 'card',
+  Chat = 'chat',
+  CalendarEvent = 'calendar-event',
+  Error = 'error',
+  DropdownArrow = 'dropdown-arrow',
+  DropdownAvatar = 'dropdown-avatar',
+  AvatarMale = 'avatar-male',
+  AvatarFemale = 'avatar-female',
+  Email = 'email',
+  Eye = 'eye',
+  Info = 'info',
+  EyeOff = 'eye-off',
+  Help = 'help',
+  VerticalLine = 'vertical-line',
+  User = 'user',
+  UserFrame = 'User-Frame',
+  Dot = 'dot',
+  Search = 'search',
+  ChevronDown = 'chevron-down',
+  ChevronLeft = 'chevron-left',
+  ChevronRight = 'chevron-right',
+  CaretRight = 'caret-right',
+  Slash = 'slash',
+  CircleRadio = 'circle-radio',
+  CircleRadioActive = 'circle-radio-active',
+  Check = 'check',
+  Checkmark = 'checkmark',
+  CheckboxMinus = 'checkbox-minus',
+  RadioDot = 'radio-dot',
+  Layers = '2-layers',
+  Code = 'code',
+  Country = 'country',
+  Close = 'close',
+  HelpCircle = 'help-circle',
+  HashtagIcon = 'hashtag-icon',
+  Home = 'home',
+  HomeSmile = 'home-smile',
+  LogOut = 'log-out',
+  LogOutNav = 'Log-out-nav',
+  Pencil = 'pencil',
+  Plus = 'plus',
+  Settings = 'settings',
+  Slack = 'slack',
+  Success = 'success',
+  Trash = 'trash',
+  Download = 'download',
+  UserPlus = 'user-plus',
+  Users = 'users',
+  Warning = 'warning',
+  Zap = 'zap',
+  VerticalThreeDots = 'vertical-three-dots-icon',
+  VerticalDotsActive = 'vertical-dots-true-icon',
+  NotFound = 'Not-Found',
+  Unauthorized = 'Unauthorized',
+  Forbidden = 'Forbidden',
+  InternalServerError = 'Internal-server-error',
+  Bell = 'bell',
+  NotificationBox = 'notification-box',
+  Clock = 'clock',
+  TrendUp = 'trend-up-01',
+  TrendDown = 'trend-down-01',
+}
+
+export const ICON_NAMES = Object.values(IconName);
+
+export function isIconName(name: string): name is IconName {
+  return (ICON_NAMES as string[]).includes(name);
+}
+
+/** Same contract as Angular `getIconPath`: name → `assets/icons/{name}.svg`. */
+export function getIconPath(name: string): string {
+  return isIconName(name) ? `assets/icons/${name}.svg` : '';
+}
+
+type IconSvg = ComponentType<SvgProps>;
+
+const ICON_MODULES: Record<IconName, IconSvg> = {
+  [IconName.Alert]: Alert,
+  [IconName.Calendar]: Calendar,
+  [IconName.ArrowRight]: ArrowRight,
+  [IconName.LeftArrow]: LeftArrow,
+  [IconName.RightArrow]: RightArrow,
+  [IconName.Card]: Card,
+  [IconName.Chat]: Chat,
+  [IconName.CalendarEvent]: CalendarEvent,
+  [IconName.Error]: ErrorIcon,
+  [IconName.DropdownArrow]: DropdownArrow,
+  [IconName.DropdownAvatar]: DropdownAvatar,
+  [IconName.AvatarMale]: AvatarMale,
+  [IconName.AvatarFemale]: AvatarFemale,
+  [IconName.Email]: Email,
+  [IconName.Eye]: Eye,
+  [IconName.Info]: Info,
+  [IconName.EyeOff]: EyeOff,
+  [IconName.Help]: Help,
+  [IconName.VerticalLine]: VerticalLine,
+  [IconName.User]: User,
+  [IconName.UserFrame]: UserFrame,
+  [IconName.Dot]: Dot,
+  [IconName.Search]: Search,
+  [IconName.ChevronDown]: ChevronDown,
+  [IconName.ChevronLeft]: ChevronLeft,
+  [IconName.ChevronRight]: ChevronRight,
+  [IconName.CaretRight]: CaretRight,
+  [IconName.Slash]: Slash,
+  [IconName.CircleRadio]: CircleRadio,
+  [IconName.CircleRadioActive]: CircleRadioActive,
+  [IconName.Check]: Check,
+  [IconName.Checkmark]: Checkmark,
+  [IconName.CheckboxMinus]: CheckboxMinus,
+  [IconName.RadioDot]: RadioDot,
+  [IconName.Layers]: Layers,
+  [IconName.Code]: Code,
+  [IconName.Country]: Country,
+  [IconName.Close]: Close,
+  [IconName.HelpCircle]: HelpCircle,
+  [IconName.HashtagIcon]: HashtagIcon,
+  [IconName.Home]: Home,
+  [IconName.HomeSmile]: HomeSmile,
+  [IconName.LogOut]: LogOut,
+  [IconName.LogOutNav]: LogOutNav,
+  [IconName.Pencil]: Pencil,
+  [IconName.Plus]: Plus,
+  [IconName.Settings]: Settings,
+  [IconName.Slack]: Slack,
+  [IconName.Success]: Success,
+  [IconName.Trash]: Trash,
+  [IconName.Download]: Download,
+  [IconName.UserPlus]: UserPlus,
+  [IconName.Users]: Users,
+  [IconName.Warning]: Warning,
+  [IconName.Zap]: Zap,
+  [IconName.VerticalThreeDots]: VerticalThreeDots,
+  [IconName.VerticalDotsActive]: VerticalDotsActive,
+  [IconName.NotFound]: NotFound,
+  [IconName.Unauthorized]: Unauthorized,
+  [IconName.Forbidden]: Forbidden,
+  [IconName.InternalServerError]: InternalServerError,
+  [IconName.Bell]: Bell,
+  [IconName.NotificationBox]: NotificationBox,
+  [IconName.Clock]: Clock,
+  [IconName.TrendUp]: TrendUp,
+  [IconName.TrendDown]: TrendDown,
+};
+
+export function getIconComponent(name: string): IconSvg | undefined {
+  if (!isIconName(name)) {
+    return undefined;
+  }
+  return ICON_MODULES[name];
+}

package/src/components/Icon/index.ts

@@ -0,0 +1,3 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+export { IconName, ICON_NAMES, isIconName, getIconPath } from './icon-registry';