@himakarinv/nativex 1.0.0

package/src/components/Verification/Verification.tsx

@@ -0,0 +1,374 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type TextInputKeyPressEventData,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, shadows, spacing, typography } from '../../theme';
+import { a11yHiddenProps } from '../../utils/a11y';
+import { HintError } from '../HintError';
+import { Label } from '../Label';
+
+export const VerificationSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type VerificationSize = (typeof VerificationSize)[keyof typeof VerificationSize];
+
+export const VerificationDigits = {
+  Four: 4,
+  Six: 6,
+} as const;
+
+export type VerificationDigits = (typeof VerificationDigits)[keyof typeof VerificationDigits];
+
+export type VerificationProps = {
+  digits?: VerificationDigits;
+  size?: VerificationSize;
+  label?: string;
+  hint?: string;
+  error?: string;
+  value?: string;
+  onValueChange?: (code: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+
+const BOX = {
+  [VerificationSize.Small]: {
+    size: spacing['5xl'],
+    fontSize: typography.fontSize.xl,
+    gap: spacing.md,
+  },
+  [VerificationSize.Medium]: {
+    size: spacing['6xl'],
+    fontSize: typography.fontSize.xl,
+    gap: spacing.md,
+  },
+  [VerificationSize.Large]: {
+    size: spacing['7xl'],
+    fontSize: typography.fontSize['2xl'],
+    gap: spacing.sm + spacing.xs,
+  },
+} as const;
+
+function emptyValues(count: number) {
+  return Array.from({ length: count }, () => '');
+}
+
+function onlyDigits(text: string) {
+  return text.replace(/\D/g, '');
+}
+
+function webBoxShadow(): ViewStyle {
+  return {
+    boxShadow: `0 ${shadows.boxLight.offsetY}px ${shadows.boxLight.radius}px ${colors.boxShadowLight}`,
+  } as ViewStyle;
+}
+
+export function Verification({
+  digits = VerificationDigits.Four,
+  size = VerificationSize.Medium,
+  label = '',
+  hint = '',
+  error = '',
+  value,
+  onValueChange,
+  style,
+}: VerificationProps) {
+  const [values, setValues] = useState(() => emptyValues(digits));
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const [caretOn, setCaretOn] = useState(true);
+  const inputRefs = useRef<Array<TextInput | null>>([]);
+  const metrics = BOX[size];
+  const showSeparator = digits === VerificationDigits.Six;
+
+  useEffect(() => {
+    if (focusedIndex === null) {
+      setCaretOn(true);
+      return;
+    }
+
+    setCaretOn(true);
+    const blink = setInterval(() => {
+      setCaretOn((visible) => !visible);
+    }, 530);
+
+    return () => clearInterval(blink);
+  }, [focusedIndex, values]);
+
+  useEffect(() => {
+    setValues(emptyValues(digits));
+  }, [digits]);
+
+  useEffect(() => {
+    if (value === undefined) {
+      return;
+    }
+
+    const next = emptyValues(digits);
+    onlyDigits(value)
+      .slice(0, digits)
+      .split('')
+      .forEach((digit, index) => {
+        next[index] = digit;
+      });
+    setValues(next);
+  }, [value, digits]);
+
+  const emit = (next: string[]) => {
+    setValues(next);
+    onValueChange?.(next.join(''));
+  };
+
+  const focusInput = (index: number) => {
+    const input = inputRefs.current[index];
+    if (!input) {
+      return;
+    }
+    input.focus();
+  };
+
+  const fillFrom = (raw: string, startIndex = 0) => {
+    const pasted = onlyDigits(raw);
+    if (!pasted) {
+      return;
+    }
+
+    const next = [...values];
+    for (let offset = 0; offset < pasted.length && startIndex + offset < digits; offset += 1) {
+      next[startIndex + offset] = pasted[offset];
+    }
+    emit(next);
+
+    const nextEmpty = next.findIndex((digit) => !digit);
+    focusInput(nextEmpty === -1 ? digits - 1 : nextEmpty);
+  };
+
+  const onDigitChange = (index: number, text: string) => {
+    const cleaned = onlyDigits(text);
+    if (cleaned.length > 1) {
+      fillFrom(cleaned, index);
+      return;
+    }
+
+    const digit = cleaned.slice(-1);
+    const next = [...values];
+    next[index] = digit;
+    emit(next);
+
+    if (digit && index < digits - 1) {
+      focusInput(index + 1);
+    }
+  };
+
+  const onKeyPress = (index: number, event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    const key = event.nativeEvent.key;
+
+    if (key === 'Backspace') {
+      if (values[index]) {
+        const next = [...values];
+        next[index] = '';
+        emit(next);
+        return;
+      }
+      if (index > 0) {
+        const next = [...values];
+        next[index - 1] = '';
+        emit(next);
+        focusInput(index - 1);
+      }
+      return;
+    }
+
+    if (key === 'ArrowLeft' && index > 0) {
+      focusInput(index - 1);
+      return;
+    }
+
+    if (key === 'ArrowRight' && index < digits - 1) {
+      focusInput(index + 1);
+    }
+  };
+
+  return (
+    <View style={[styles.host, style]}>
+      {label ? <Label embedded text={label} labelStyle={styles.label} /> : null}
+
+      <View style={[styles.row, { gap: metrics.gap }]}>
+        {Array.from({ length: digits }, (_, index) => (
+          <View key={index} style={styles.cellGroup}>
+            {showSeparator && index === 3 ? (
+              <Text
+                {...a11yHiddenProps()}
+                style={[
+                  styles.separator,
+                  {
+                    fontSize: metrics.fontSize + spacing.sm,
+                    lineHeight: metrics.size,
+                    width: spacing.base,
+                  },
+                ]}>
+                -
+              </Text>
+            ) : null}
+            <View
+              style={[
+                styles.box,
+                {
+                  width: metrics.size,
+                  height: metrics.size,
+                },
+                !isNative && webBoxShadow(),
+              ]}>
+              <View pointerEvents="none" style={styles.digitLayer}>
+                {values[index] ? (
+                  <View style={styles.digitRow}>
+                    <Text
+                      style={[
+                        styles.digit,
+                        {
+                          fontSize: metrics.fontSize,
+                          lineHeight: metrics.size - borders.width.medium,
+                        },
+                      ]}>
+                      {values[index]}
+                    </Text>
+                    {focusedIndex === index && caretOn ? (
+                      <View style={[styles.caret, { height: metrics.fontSize }]} />
+                    ) : null}
+                  </View>
+                ) : (
+                  <>
+                    <Text
+                      style={[
+                        styles.digit,
+                        styles.placeholder,
+                        {
+                          fontSize: metrics.fontSize,
+                          lineHeight: metrics.size - borders.width.medium,
+                        },
+                      ]}>
+                      0
+                    </Text>
+                    {focusedIndex === index && caretOn ? (
+                      <View style={[styles.caret, styles.caretCenter, { height: metrics.fontSize }]} />
+                    ) : null}
+                  </>
+                )}
+              </View>
+              <TextInput
+                ref={(node) => {
+                  inputRefs.current[index] = node;
+                }}
+                value={values[index]}
+                caretHidden
+                keyboardType="number-pad"
+                inputMode="numeric"
+                maxLength={1}
+                selectTextOnFocus
+                autoComplete={index === 0 ? 'one-time-code' : 'off'}
+                textContentType={index === 0 ? 'oneTimeCode' : 'none'}
+                accessibilityLabel={`Digit ${index + 1} of ${digits}`}
+                onChangeText={(text) => onDigitChange(index, text)}
+                onKeyPress={(event) => onKeyPress(index, event)}
+                onFocus={() => setFocusedIndex(index)}
+                onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
+                style={styles.hiddenInput}
+              />
+            </View>
+          </View>
+        ))}
+      </View>
+
+      <HintError hint={hint} error={error} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    alignSelf: 'center',
+    maxWidth: '100%',
+    gap: spacing.sm + spacing.xs,
+  },
+  label: {
+    color: colors.gray.darker,
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.normal,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    maxWidth: '100%',
+  },
+  cellGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  box: {
+    borderWidth: borders.width.thin,
+    borderColor: colors.gray.base,
+    borderRadius: radius.md,
+    backgroundColor: colors.white,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  digitLayer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  digitRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  digit: {
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.blackSoft,
+    letterSpacing: -0.4,
+    textAlign: 'center',
+    includeFontPadding: false,
+  },
+  placeholder: {
+    color: colors.gray.base,
+  },
+  caret: {
+    width: borders.width.thin,
+    marginLeft: spacing.xs,
+    backgroundColor: colors.blackSoft,
+    borderRadius: borders.width.thin,
+  },
+  caretCenter: {
+    position: 'absolute',
+    left: '50%',
+    marginLeft: spacing.none,
+  },
+  hiddenInput: {
+    ...StyleSheet.absoluteFillObject,
+    opacity: 0,
+    padding: spacing.none,
+  },
+  separator: {
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.gray.base,
+    textAlign: 'center',
+    letterSpacing: -0.4,
+  },
+});

package/src/components/Verification/index.ts

@@ -0,0 +1,2 @@
+export { Verification, VerificationDigits, VerificationSize } from './Verification';
+export type { VerificationProps } from './Verification';

package/src/index.ts

@@ -0,0 +1,39 @@
+export * from './theme';
+
+export * from './components/ActionsMenu';
+export * from './components/Alert';
+export * from './components/Badge';
+export * from './components/Breadcrumb';
+export * from './components/Button';
+export * from './components/Checkbox';
+export * from './components/CreatePassword';
+export * from './components/DataTable';
+export * from './components/Datepicker';
+export * from './components/Dropdown';
+export * from './components/DropdownMenu';
+export * from './components/DynamicForm';
+export * from './components/ErrorPages';
+export * from './components/ForgotPassword';
+export * from './components/HintError';
+export * from './components/Icon';
+export * from './components/InputDropdown';
+export * from './components/InputField';
+export * from './components/Label';
+export * from './components/LoginForm';
+export * from './components/LoginShell';
+export * from './components/Modals';
+export * from './components/Offcanvas';
+export * from './components/PageHeader';
+export * from './components/Pagination';
+export * from './components/ResetPassword';
+export * from './components/RoleSelection';
+export * from './components/SendOtp';
+export * from './components/Sidenavbar';
+export * from './components/StatCard';
+export * from './components/Tabs';
+export * from './components/Textarea';
+export * from './components/Timepicker';
+export * from './components/Toast';
+export * from './components/Toggle';
+export * from './components/Typeahead';
+export * from './components/Verification';

package/src/theme/borders.ts

@@ -0,0 +1,19 @@
+export const borders = {
+  width: {
+    none: 0,
+    thin: 1,
+    medium: 2,
+    thick: 4,
+  },
+  style: {
+    solid: 'solid' as const,
+    dashed: 'dashed' as const,
+    none: 'none' as const,
+  },
+  focusRing: {
+    width: 2,
+    offset: 0,
+  },
+} as const;
+
+export type Borders = typeof borders;

package/src/theme/button.ts

@@ -0,0 +1,41 @@
+export const button = {
+  height: {
+    sm: 36,
+    md: 44,
+    lg: 48,
+    xl: 56,
+  },
+  paddingY: {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10,
+  },
+  paddingX: {
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+  },
+  fontSize: {
+    sm: 14,
+    md: 15,
+    lg: 16,
+    xl: 18,
+  },
+  lineHeight: {
+    sm: 20,
+    md: 22,
+    lg: 24,
+    xl: 24,
+  },
+  icon: {
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 22,
+  },
+  minTouch: 44,
+} as const;
+
+export type Button = typeof button;