@spare-technologies/spare-link 0.1.0-beta.1 → 1.0.0

package/src/ui/widgets/layout-w-header.tsx

@@ -1,89 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import type { ReactNode } from 'react';
-import { Image, Pressable, StyleSheet, View } from 'react-native';
-import { Colors } from '../theme';
-import { Assets } from '../theme/assets';
-import { CustomStepper } from './stepper';
-
-export interface LayoutWHeaderProps {
-  children: ReactNode;
-  /** Stepper progress (0 .. 2). Defaults to 0.5, matching Flutter. */
-  progress?: number;
-  /** When set, shows a leading back arrow like Flutter's AppBar. */
-  onBackPress?: () => void;
-  /** Disables the back arrow while async work is in-flight. */
-  backDisabled?: boolean;
-}
-
-/**
- * Shared flow-screen chrome. Port of Flutter `LayoutWHeader`
- * (`lib/src/ui/widgets/layout_w_header.dart`): a white page with a centered
- * Spare logo header, the Altareq white-background logo, a {@link CustomStepper}
- * progress bar, and 22px body padding wrapping the screen content.
- *
- * CBUAE-approved chrome — copy/dimensions match the Flutter SDK exactly.
- */
-export function LayoutWHeader(props: LayoutWHeaderProps): JSX.Element {
-  const showBack = props.onBackPress != null;
-  return (
-    <View style={styles.page} testID="layout-w-header">
-      <View style={styles.appBar}>
-        {showBack ? (
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel="Back"
-            testID="layout-w-header-back"
-            onPress={props.onBackPress}
-            disabled={props.backDisabled}
-            hitSlop={8}
-            style={[styles.backButton, props.backDisabled && styles.backButtonDisabled]}
-          >
-            <Ionicons name="arrow-back" size={24} color={Colors.textPrimary} />
-          </Pressable>
-        ) : null}
-        <Image
-          source={Assets.spareLogo}
-          style={styles.spareLogo}
-          resizeMode="contain"
-          accessibilityRole="image"
-          accessibilityLabel="Spare"
-        />
-      </View>
-      <Image
-        source={Assets.altareqLogoWhiteBg}
-        style={styles.altareqLogo}
-        resizeMode="contain"
-        accessibilityRole="image"
-        accessibilityLabel="Altareq"
-      />
-      <View style={styles.stepperWrap}>
-        <CustomStepper progress={props.progress ?? 0.5} />
-      </View>
-      <View style={styles.body}>{props.children}</View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  page: { flex: 1, backgroundColor: '#FFFFFF' },
-  appBar: {
-    height: 56,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 8,
-  },
-  backButton: {
-    position: 'absolute',
-    left: 8,
-    top: 8,
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  backButtonDisabled: { opacity: 0.4 },
-  spareLogo: { height: 18, width: 120 },
-  altareqLogo: { height: 45, width: '100%', alignSelf: 'center' },
-  stepperWrap: { paddingHorizontal: 22, paddingVertical: 16 },
-  body: { flex: 1, padding: 22 },
-});

package/src/ui/widgets/stepper.tsx

@@ -1,126 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native';
-import { FONT_FAMILY } from '../theme';
-
-const TOTAL_STEPS = 3;
-const STEP_LABELS = ['Consent', 'Authorize', 'Complete'] as const;
-
-export interface CustomStepperProps {
-  /**
-   * Current step index in the range `0 .. TOTAL_STEPS - 1` (0 → 2 for 3 steps).
-   * Matches Flutter's `CustomStepper.progress`.
-   */
-  progress: number;
-}
-
-/**
- * Three-step progress indicator. Port of Flutter `CustomStepper`
- * (`lib/src/ui/widgets/stepper.dart`): a grey baseline with a black fill up to
- * the current step, numbered circles, and "Consent / Authorize / Complete"
- * labels.
- */
-export function CustomStepper(props: CustomStepperProps): JSX.Element {
-  const maxProgress = TOTAL_STEPS - 1;
-  const progressPercent = Math.min(1, Math.max(0, props.progress / maxProgress));
-
-  return (
-    <View testID="custom-stepper">
-      <View style={styles.track}>
-        <View style={styles.lineArea}>
-          {/* Background baseline */}
-          <View style={styles.baseline} />
-          {/* Filled progress line — width is a percent of the inset lineArea
-              (not the padded track), so it stays aligned with the baseline and
-              never overshoots the last circle. */}
-          <View style={[styles.fill, { width: `${progressPercent * 100}%` }]} />
-          {/* Numbered circles */}
-          <View style={styles.circlesRow}>
-            {STEP_LABELS.map((label, index) => {
-              const isFilled = props.progress >= index;
-              return (
-                <View
-                  key={label}
-                  testID={`stepper-circle-${index}`}
-                  style={[styles.circle, isFilled ? styles.circleFilled : styles.circleEmpty]}
-                >
-                  <Text style={[styles.circleText, isFilled && styles.circleTextFilled]}>
-                    {index + 1}
-                  </Text>
-                </View>
-              );
-            })}
-          </View>
-        </View>
-      </View>
-      <View style={styles.labelsRow}>
-        {STEP_LABELS.map((label) => (
-          <Text key={label} style={styles.label}>
-            {label}
-          </Text>
-        ))}
-      </View>
-    </View>
-  );
-}
-
-const LINE_COLOR_BG = '#D6D6DB'; // Colors.grey.shade300
-const CIRCLE_SIZE = 32;
-
-const styles = StyleSheet.create({
-  track: {
-    height: 40,
-    justifyContent: 'center',
-    paddingHorizontal: 12,
-  },
-  // Inset content box (track width − 24). The baseline and the percent-width
-  // fill are positioned relative to this, so they share one reference span.
-  lineArea: {
-    justifyContent: 'center',
-  },
-  baseline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 18,
-    height: 4,
-    backgroundColor: LINE_COLOR_BG,
-  },
-  fill: {
-    position: 'absolute',
-    left: 0,
-    top: 18,
-    height: 4,
-    backgroundColor: '#000000',
-    borderTopRightRadius: 12,
-    borderBottomRightRadius: 12,
-  },
-  circlesRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  circle: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
-    borderRadius: CIRCLE_SIZE / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  circleFilled: { backgroundColor: '#000000' },
-  circleEmpty: { backgroundColor: LINE_COLOR_BG },
-  circleText: {
-    fontFamily: FONT_FAMILY,
-    fontWeight: '700',
-    color: '#000000',
-  },
-  circleTextFilled: { color: '#FFFFFF' },
-  labelsRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 4,
-  },
-  label: {
-    fontFamily: FONT_FAMILY,
-    fontSize: 14,
-    color: '#000000',
-  },
-});