@myazahq/kyc-sdk-react-native 2.0.2 → 2.1.0

package/src/components/MyazaInput.tsx

@@ -24,11 +24,20 @@ export interface MyazaInputProps {
   error?: string | null;
   helper?: string;
   keyboardType?: KeyboardTypeOptions;
-  autoCapitalize?: 'none' | 'characters';
+  autoCapitalize?: 'none' | 'characters' | 'words';
   maxLength?: number;
   editable?: boolean;
   /** Focus the field on mount (matches the Flutter SDK's id-input autofocus). */
   autoFocus?: boolean;
+  /**
+   * Rendered inside the field, before the text — a search glyph, typically.
+   * When set, the BORDER moves to a wrapping row and the TextInput itself is
+   * drawn borderless, since the icon has to sit inside the same outline.
+   */
+  prefix?: React.ReactNode;
+  /** Rendered inside the field, after the text — a unit like "%". Same
+   *  bordered-row treatment as `prefix`. */
+  suffix?: React.ReactNode;
   onFocus?: FocusHandler;
   onBlur?: BlurHandler;
 }
@@ -45,6 +54,8 @@ export function MyazaInput({
   maxLength,
   editable = true,
   autoFocus = false,
+  prefix,
+  suffix,
   onFocus,
   onBlur,
 }: MyazaInputProps): React.ReactElement {
@@ -73,31 +84,67 @@ export function MyazaInput({
           {label}
         </MyazaText>
       ) : null}
-      <TextInput
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        placeholderTextColor={colors.textMuted}
-        keyboardType={keyboardType}
-        autoCapitalize={autoCapitalize}
-        maxLength={maxLength}
-        editable={editable}
-        autoFocus={autoFocus}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        style={{
-          height: sizing.inputHeight,
-          borderWidth,
-          borderColor,
-          borderRadius: radius.sm,
-          // Keep text from shifting when the border thickens on focus: pad so
-          // (border + padding) stays constant across states (max border = 2).
-          paddingHorizontal: spacing.md + (2 - borderWidth),
-          color: colors.textDark,
-          backgroundColor: colors.background,
-          fontSize: 16,
-        }}
-      />
+      {prefix || suffix ? (
+        // Border on the ROW so the adornment sits inside the same outline as
+        // the text. Same border/padding arithmetic as below, kept in step.
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            height: sizing.inputHeight,
+            borderWidth,
+            borderColor,
+            borderRadius: radius.sm,
+            paddingHorizontal: spacing.md + (2 - borderWidth),
+            backgroundColor: colors.background,
+          }}
+        >
+          {prefix}
+          {prefix ? <View style={{ width: spacing.sm }} /> : null}
+          <TextInput
+            value={value}
+            onChangeText={onChangeText}
+            placeholder={placeholder}
+            placeholderTextColor={colors.textMuted}
+            keyboardType={keyboardType}
+            autoCapitalize={autoCapitalize}
+            maxLength={maxLength}
+            editable={editable}
+            autoFocus={autoFocus}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16 }}
+          />
+          {suffix ? <View style={{ width: spacing.sm }} /> : null}
+          {suffix}
+        </View>
+      ) : (
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor={colors.textMuted}
+          keyboardType={keyboardType}
+          autoCapitalize={autoCapitalize}
+          maxLength={maxLength}
+          editable={editable}
+          autoFocus={autoFocus}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={{
+            height: sizing.inputHeight,
+            borderWidth,
+            borderColor,
+            borderRadius: radius.sm,
+            // Keep text from shifting when the border thickens on focus: pad so
+            // (border + padding) stays constant across states (max border = 2).
+            paddingHorizontal: spacing.md + (2 - borderWidth),
+            color: colors.textDark,
+            backgroundColor: colors.background,
+            fontSize: 16,
+          }}
+        />
+      )}
       {error ? (
         <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.xs }}>
           {error}

package/src/components/MyazaSelect.tsx

@@ -0,0 +1,283 @@
+import React, { useState } from 'react';
+import { Modal, Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon } from './Icon';
+
+// ---------------------------------------------------------------------------
+// The select field — a collapsed value that opens a sheet of options.
+//
+// The counterpart to OptionRow, not a replacement: OptionRow lays every choice
+// out because the choices ARE the information (which ID type, which country).
+// A select is for the case where the field is a detail on a form full of other
+// fields — the proof-of-address document kind sits above an upload zone, and
+// four stacked cards there push the actual task off the screen.
+//
+// Mirrors the Flutter SDK's MyazaSelect so the two platforms present the same
+// control for the same job.
+// ---------------------------------------------------------------------------
+
+export interface MyazaSelectOption<T> {
+  value: T;
+  label: string;
+  /** Something before the label — a flag, an icon. */
+  leading?: React.ReactNode;
+  /**
+   * Secondary line under the label, shown in the SHEET only — the collapsed
+   * field stays as short as its label. Currency codes need it: "GHS" and
+   * "GMD" are one letter apart and mean different money.
+   */
+  description?: string;
+}
+
+export function MyazaSelect<T extends string | number>({
+  value,
+  options,
+  onChange,
+  hint = 'Select an option',
+  sheetTitle,
+  enabled = true,
+  height,
+  compact = false,
+  searchable = false,
+}: {
+  value: T | null | undefined;
+  options: Array<MyazaSelectOption<T>>;
+  onChange: (value: T) => void;
+  /** Shown when nothing is selected yet. */
+  hint?: string;
+  /** Sheet header; falls back to `hint`. */
+  sheetTitle?: string;
+  enabled?: boolean;
+  /**
+   * Fixes the field's height. Needed when the select sits beside another
+   * control (the questionnaire's currency next to its amount) — vertical
+   * padding alone leaves the two boxes different heights.
+   */
+  height?: number;
+  /**
+   * Shrink to the width of the value instead of filling the row — the inline
+   * variant (the questionnaire's currency beside its amount). Without it the
+   * label competes for a fixed width and a code like "NGN" gets ellipsised to
+   * "N…". Mirrors the Flutter SDK's `compact`.
+   */
+  compact?: boolean;
+  /**
+   * Pin a search field to the top of the sheet, filtering options by label —
+   * for lists too long to scroll (the every-ISO-country selects). Mirrors the
+   * Flutter SDK's `searchable`.
+   */
+  searchable?: boolean;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const { height: windowHeight } = useWindowDimensions();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const selected = options.find((o) => o.value === value) ?? null;
+  const normalized = query.trim().toLowerCase();
+  const visible =
+    searchable && normalized !== ''
+      ? options.filter((o) => o.label.toLowerCase().includes(normalized))
+      : options;
+
+  return (
+    <>
+      <Pressable
+        onPress={() => {
+          if (enabled && options.length > 0) setOpen(true);
+        }}
+        disabled={!enabled}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !enabled, expanded: open }}
+        accessibilityLabel={selected?.label ?? hint}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: spacing.md,
+          // A fixed height wins over padding when the field has to line up
+          // with a neighbouring input.
+          ...(height == null ? { paddingVertical: spacing.md } : { height }),
+          borderRadius: radius.sm,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: enabled ? colors.background : colors.backgroundSecondary,
+          opacity: enabled ? 1 : 0.6,
+          ...(compact ? { alignSelf: 'flex-start' as const } : null),
+        }}
+      >
+        {selected?.leading ? (
+          <>
+            {selected.leading}
+            <View style={{ width: spacing.sm }} />
+          </>
+        ) : null}
+        <MyazaText
+          variant="body"
+          color={selected ? undefined : colors.textMuted}
+          // Compact sizes to its content, so the value is never ellipsised.
+          style={compact ? undefined : { flex: 1 }}
+          numberOfLines={1}
+        >
+          {selected?.label ?? hint}
+        </MyazaText>
+        <View style={{ width: spacing.sm }} />
+        <Icon name="chevron-down" size={18} color={colors.textSecondary} />
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="slide"
+        onRequestClose={() => {
+          setOpen(false);
+          setQuery('');
+        }}
+      >
+        {/* Tapping the backdrop dismisses, matching the platform sheet. */}
+        <Pressable
+          onPress={() => {
+            setOpen(false);
+            setQuery('');
+          }}
+          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}
+        >
+          {/* Stops a tap inside the sheet from closing it. */}
+          <Pressable
+            onPress={() => {}}
+            style={{
+              backgroundColor: colors.background,
+              borderTopLeftRadius: radius.lg,
+              borderTopRightRadius: radius.lg,
+              paddingBottom: spacing.lg,
+              // Long option lists stay inside the sheet and scroll.
+              maxHeight: windowHeight * 0.6,
+            }}
+          >
+            <View
+              style={{
+                alignSelf: 'center',
+                width: 36,
+                height: 4,
+                borderRadius: radius.full,
+                backgroundColor: colors.border,
+                marginTop: spacing.sm,
+              }}
+            />
+            <MyazaText
+              variant="body"
+              style={{
+                fontWeight: '700',
+                paddingHorizontal: spacing.md,
+                paddingTop: spacing.md,
+                paddingBottom: spacing.sm,
+              }}
+            >
+              {sheetTitle ?? hint}
+            </MyazaText>
+
+            {searchable ? (
+              // Pinned above the list, so it stays put while results scroll.
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  marginHorizontal: spacing.md,
+                  marginBottom: spacing.sm,
+                  paddingHorizontal: spacing.sm + 4,
+                  borderWidth: 1,
+                  borderColor: colors.border,
+                  borderRadius: radius.sm,
+                  backgroundColor: colors.backgroundSecondary,
+                }}
+              >
+                <Icon name="search" size={16} color={colors.textMuted} />
+                <TextInput
+                  value={query}
+                  onChangeText={setQuery}
+                  placeholder="Search"
+                  placeholderTextColor={colors.textMuted}
+                  autoCorrect={false}
+                  autoCapitalize="none"
+                  style={{
+                    flex: 1,
+                    paddingVertical: spacing.sm + 2,
+                    paddingHorizontal: spacing.sm,
+                    color: colors.textDark,
+                    fontSize: 15,
+                  }}
+                />
+                {query !== '' ? (
+                  <Pressable onPress={() => setQuery('')} hitSlop={8} accessibilityLabel="Clear search">
+                    <Icon name="x" size={16} color={colors.textMuted} />
+                  </Pressable>
+                ) : null}
+              </View>
+            ) : null}
+
+            <ScrollView bounces={false} keyboardShouldPersistTaps="handled">
+              {visible.length === 0 ? (
+                <MyazaText
+                  variant="bodySmall"
+                  color={colors.textMuted}
+                  style={{ padding: spacing.md, textAlign: 'center' }}
+                >
+                  No matches
+                </MyazaText>
+              ) : null}
+              {visible.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  <Pressable
+                    key={String(option.value)}
+                    onPress={() => {
+                      setOpen(false);
+                      setQuery('');
+                      if (!isSelected) onChange(option.value);
+                    }}
+                    accessibilityRole="radio"
+                    accessibilityState={{ checked: isSelected }}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      paddingHorizontal: spacing.md,
+                      paddingVertical: spacing.md,
+                    }}
+                  >
+                    {option.leading ? (
+                      <>
+                        {option.leading}
+                        <View style={{ width: spacing.sm }} />
+                      </>
+                    ) : null}
+                    <View style={{ flex: 1, minWidth: 0 }}>
+                      <MyazaText
+                        variant="body"
+                        color={isSelected ? colors.primary : undefined}
+                        style={{ fontWeight: isSelected ? '600' : '400' }}
+                      >
+                        {option.label}
+                      </MyazaText>
+                      {option.description ? (
+                        <MyazaText
+                          variant="bodySmall"
+                          color={colors.textSecondary}
+                          numberOfLines={1}
+                        >
+                          {option.description}
+                        </MyazaText>
+                      ) : null}
+                    </View>
+                    {isSelected ? <Icon name="check" size={18} color={colors.primary} /> : null}
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}

package/src/components/MyazaWordmark.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+/**
+ * The Myaza wordmark — icon + "myaza", inlined from the brand SVG so the SDK
+ * ships no image asset and stays crisp at any density.
+ *
+ * The three icon paths keep their brand colours in both themes; the wordmark
+ * paths take `wordmark`, the only part that flips (brand ink on light,
+ * near-white on dark). Generated from kyc-dashboard/public/assets/images/
+ * logo-white.svg — regenerate rather than hand-editing the path data.
+ */
+export function MyazaWordmark({
+  height = 13,
+  wordmark,
+}: {
+  height?: number;
+  /** Wordmark fill — `#19156F` on light, `#F6F5FE` on dark. */
+  wordmark: string;
+}): React.ReactElement {
+  return (
+    <Svg viewBox="0 0 81 25" height={height} width={height * (81 / 25)} fill="none">
+      <Path d="M18.6008 22.9368C14.2202 24.4324 9.83824 24.4324 5.45764 22.9368C3.41995 22.2414 1.81712 20.6385 1.12163 18.6008C-0.373877 14.2202 -0.373877 9.83824 1.12163 5.45764C1.81712 3.41995 3.41995 1.81712 5.45764 1.12163C9.83824 -0.373877 14.2202 -0.373877 18.6008 1.12163C20.6385 1.81712 22.2414 3.41995 22.9368 5.45764C24.4324 9.83824 24.4324 14.2202 22.9368 18.6008C22.2414 20.6385 20.6385 22.2414 18.6008 22.9368Z" fill="#BDB6FB" />
+      <Path d="M13.0606 6.06204L18.1298 11.2775C18.6887 11.8517 18.8517 12.7033 18.5465 13.4434L16.7931 17.6874C16.5813 18.2003 15.9945 18.4443 15.4816 18.2324C15.3562 18.1808 15.2419 18.1042 15.1471 18.0066L12.1059 14.8999L8.92116 18.1056C8.5309 18.4986 7.89535 18.5014 7.50091 18.1097C7.40474 18.0136 7.32808 17.8993 7.27791 17.7725L5.50086 13.3626C5.19841 12.6113 5.37681 11.7528 5.95244 11.1841L11.1581 6.04253C11.6836 5.52265 12.531 5.52823 13.0509 6.05507C13.0537 6.05786 13.0565 6.06065 13.0579 6.06204H13.0606Z" fill="#5645F5" />
+      <Path d="M8.52707 11.2556L12.8422 15.6502L12.8199 15.6279C12.431 15.232 11.7955 15.2265 11.3996 15.6139C11.3954 15.6181 11.3913 15.6223 11.3871 15.6265L11.3634 15.6502L8.91872 18.106C8.52707 18.499 7.89151 18.5004 7.49847 18.1088C7.4023 18.0126 7.32704 17.8983 7.27547 17.7729L5.47891 13.3142C5.11653 12.4139 5.52908 11.3867 6.41412 10.988C7.14724 10.6577 7.8511 10.7469 8.52568 11.2556H8.52707Z" fill="#19156F" />
+      <Path d="M69.6211 7.02734H62.7402V9.20492H67.4864L62.7402 14.0465V16.2249H63.8347H70.5984V14.0465H65.9335L70.5984 9.20492V7.02734H69.6211Z" fill={wordmark} />
+      <Path d="M58.7524 7.02734V7.715C58.6177 7.63101 58.4786 7.5549 58.3343 7.48491C57.7288 7.1927 57.0491 7.02734 56.3308 7.02734C53.7919 7.02734 51.7324 9.08506 51.7324 11.6248C51.7324 14.1646 53.7919 16.2241 56.3308 16.2241C57.0491 16.2241 57.7288 16.0587 58.3343 15.7656C58.4777 15.6956 58.6168 15.6195 58.7524 15.5355V16.2241H60.93V7.02734H58.7524ZM56.3308 14.0185C55.0097 14.0185 53.938 12.9468 53.938 11.6257C53.938 10.3046 55.0097 9.23291 56.3308 9.23291C57.6518 9.23291 58.7244 10.3038 58.7244 11.6257C58.7244 12.9476 57.6527 14.0185 56.3308 14.0185Z" fill={wordmark} />
+      <Path d="M78.8228 7.02734V7.715C78.688 7.63101 78.5489 7.5549 78.4046 7.48491C77.7991 7.1927 77.1194 7.02734 76.4011 7.02734C73.8622 7.02734 71.8027 9.08506 71.8027 11.6248C71.8027 14.1646 73.8622 16.2241 76.4011 16.2241C77.1194 16.2241 77.7991 16.0587 78.4046 15.7656C78.548 15.6956 78.6872 15.6195 78.8228 15.5355V16.2241H81.0003V7.02734H78.8228ZM76.4011 14.0185C75.08 14.0185 74.0083 12.9468 74.0083 11.6257C74.0083 10.3046 75.08 9.23291 76.4011 9.23291C77.7222 9.23291 78.7948 10.3038 78.7948 11.6257C78.7948 12.9476 77.723 14.0185 76.4011 14.0185Z" fill={wordmark} />
+      <Path d="M48.8464 6.99219L46.4562 12.4051L44.1754 6.99219H41.5762L45.1422 15.1399L42.8946 19.7558H45.5184L51.4798 6.99219H48.8464Z" fill={wordmark} />
+      <Path d="M37.0021 6.91581C35.8727 6.91581 34.8167 7.37862 34.0564 8.18264C34.0319 8.15639 34.0065 8.13102 33.9812 8.10565C33.2139 7.33838 32.1938 6.91581 31.1089 6.91581C30.4685 6.91581 29.8474 7.06542 29.2866 7.348V6.91581H27.0469V16.5369H29.2866V11.1231C29.2866 10.1187 30.1037 9.30073 31.1089 9.30073C31.5962 9.30073 32.0538 9.49058 32.3976 9.83441C32.7415 10.1782 32.9313 10.6358 32.9313 11.1222V16.536H35.1797V11.1222C35.1797 10.1179 35.9969 9.29986 37.0021 9.29986C37.4894 9.29986 37.947 9.4897 38.2908 9.83353C38.6346 10.1774 38.8245 10.6349 38.8245 11.1214V16.5351H41.0642V10.9752C41.0642 9.8904 40.6416 8.87029 39.8743 8.1039C39.1071 7.33663 38.087 6.91406 37.0021 6.91406V6.91581Z" fill={wordmark} />
+    </Svg>
+  );
+}

package/src/components/OptionRow.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon } from './Icon';
+
+// ---------------------------------------------------------------------------
+// The tappable choice card.
+//
+// Every step that offers a set of options renders one of these: questionnaire
+// selects, the proof-of-address document kind, the KYB registry country and
+// product, the applicant's role. They were four near-identical copies before
+// this, which is four places for the selected state to drift apart.
+//
+// A card rather than a picker wheel because the options are the information —
+// hiding them behind a tap makes the user open it to find out what is on offer.
+// ---------------------------------------------------------------------------
+
+export function OptionRow({
+  label,
+  selected,
+  multi,
+  leading,
+  trailing,
+  onPress,
+}: {
+  label: string;
+  selected: boolean;
+  /** Renders a square check instead of a radio dot. */
+  multi?: boolean;
+  /** Something before the label — a flag, an icon. Replaces the radio mark. */
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole={multi ? 'checkbox' : 'radio'}
+      accessibilityState={{ checked: selected }}
+      accessibilityLabel={label}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        // The checkbox variant matches the web SDK's multi-select card exactly
+        // (`rounded-xl border p-3`), since the same questionnaire renders on
+        // both and a differently-proportioned card reads as a different control.
+        paddingHorizontal: spacing.sm + 4,
+        paddingVertical: multi ? spacing.sm + 4 : spacing.sm + 2,
+        borderRadius: multi ? radius.sm : radius.md,
+        borderWidth: multi ? 1 : 1.5,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? `${colors.primary}0D` : 'transparent',
+        marginBottom: spacing.sm,
+      }}
+    >
+      {leading ?? <SelectionMark selected={selected} multi={multi} />}
+      <View style={{ width: multi ? 10 : spacing.sm }} />
+      <MyazaText variant="body" style={{ flex: 1 }}>
+        {label}
+      </MyazaText>
+      {trailing}
+    </Pressable>
+  );
+}
+
+function SelectionMark({
+  selected,
+  multi,
+}: {
+  selected: boolean;
+  multi?: boolean;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        width: 20,
+        height: 20,
+        // A checkbox is a rounded SQUARE (web's `rounded-md`), not a rounded
+        // rectangle — radius.sm (12) on a 20px box reads almost circular.
+        borderRadius: multi ? 6 : radius.full,
+        borderWidth: multi ? 1 : 1.5,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? colors.primary : 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {selected ? <Icon name="check" size={multi ? 14 : 13} color={colors.onPrimary} /> : null}
+    </View>
+  );
+}
+
+/** A compact pill for choices that read better inline (currencies, roles). */
+export function OptionPill({
+  label,
+  selected,
+  onPress,
+}: {
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected }}
+      style={{
+        paddingHorizontal: spacing.sm + 2,
+        paddingVertical: 8,
+        borderRadius: radius.full,
+        borderWidth: 1.5,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? `${colors.primary}14` : 'transparent',
+      }}
+    >
+      <MyazaText
+        variant="bodySmall"
+        color={selected ? colors.primary : colors.textMuted}
+        style={{ fontWeight: '600' }}
+      >
+        {label}
+      </MyazaText>
+    </Pressable>
+  );
+}