@zezosoft/zezo-ott-react-native-ui-kit 1.3.6 → 1.3.8

package/src/components/Auth/One/QrLogin/components/qr-scanner-header.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { verticalScale } from 'react-native-size-matters';
-
-import { useTheme } from '../../../../../theme';
-
-type Props = {
-  title?: string;
-  description?: string;
-};
-
-const QrScannerHeader: React.FC<Props> = ({
-  title = 'Scan QR Code',
-  description = 'Hold steady to scan',
-}) => {
-  const { theme } = useTheme();
-  const { colors } = theme;
-
-  return (
-    <View style={styles.container}>
-      <Text
-        style={[
-          styles.title,
-          {
-            color: colors.white,
-          },
-        ]}
-      >
-        {title}
-      </Text>
-
-      <Text
-        style={[
-          styles.description,
-          {
-            color: colors.white,
-          },
-        ]}
-      >
-        {description}
-      </Text>
-    </View>
-  );
-};
-
-export default QrScannerHeader;
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    marginTop: verticalScale(10),
-  },
-
-  title: {
-    fontSize: RFValue(15),
-    fontWeight: '700',
-    marginBottom: verticalScale(6),
-  },
-
-  description: {
-    fontSize: RFValue(11),
-    opacity: 0.8,
-  },
-});

package/src/components/Auth/One/QrLogin/components/qr-scanner-intro.tsx

@@ -1,255 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, ActivityIndicator } from 'react-native';
-import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-
-import { Button } from '../../../../Button';
-import { Text } from '../../../../Text';
-import { useTheme } from '../../../../../theme';
-import { toRgba } from '../../../../../theme/utils/toRgba';
-
-type Props = {
-  title?: string;
-  description?: string;
-  scanButtonText?: string;
-  loading?: boolean;
-  onPress?: () => void;
-};
-
-const QrScannerIntro: React.FC<Props> = ({
-  title = 'Scan QR to Sign In',
-  description = 'Open your TV app, go to Settings → Scan QR and point the code at your camera',
-  scanButtonText = 'Open Scanner',
-  loading = false,
-  onPress,
-}) => {
-  const { theme } = useTheme();
-  const { colors } = theme;
-
-  return (
-    <View style={styles.container}>
-      <View
-        style={[
-          styles.iconWrapper,
-          {
-            backgroundColor: toRgba(colors.primary, 0.1),
-          },
-        ]}
-      >
-        <CameraIcon size={scale(34)} color={colors.primary} strokeWidth={2.4} />
-      </View>
-
-      <Text
-        style={[
-          styles.title,
-          {
-            color: colors.textPrimary,
-          },
-        ]}
-      >
-        {title}
-      </Text>
-
-      <Text
-        style={[
-          styles.description,
-          {
-            color: toRgba(colors.textPrimary, 0.65),
-          },
-        ]}
-      >
-        {description}
-      </Text>
-
-      <View
-        style={[
-          styles.heroCard,
-          {
-            backgroundColor: colors.surface,
-            borderColor: toRgba(colors.primary, 0.1),
-            shadowColor: colors.primary,
-          },
-        ]}
-      >
-        <View
-          style={[
-            styles.scannerBox,
-            {
-              borderColor: toRgba(colors.primary, 0.2),
-            },
-          ]}
-        >
-          <View
-            style={[
-              styles.corner,
-              styles.cornerTL,
-              { borderColor: colors.primary },
-            ]}
-          />
-          <View
-            style={[
-              styles.corner,
-              styles.cornerTR,
-              { borderColor: colors.primary },
-            ]}
-          />
-          <View
-            style={[
-              styles.corner,
-              styles.cornerBL,
-              { borderColor: colors.primary },
-            ]}
-          />
-          <View
-            style={[
-              styles.corner,
-              styles.cornerBR,
-              { borderColor: colors.primary },
-            ]}
-          />
-
-          <QrCode
-            size={moderateScale(190)}
-            color={toRgba(colors.primary, 0.85)}
-            strokeWidth={1.6}
-          />
-        </View>
-      </View>
-
-      {loading ? (
-        <ActivityIndicator color={colors.primary} style={styles.loader} />
-      ) : (
-        <Button.Primary
-          title={scanButtonText}
-          onPress={onPress}
-          disabled={loading}
-          leftIcon={
-            <CameraIcon
-              size={scale(14)}
-              color={colors.buttonText}
-              strokeWidth={2.3}
-            />
-          }
-          containerStyle={styles.button}
-          titleStyle={styles.buttonText}
-        />
-      )}
-    </View>
-  );
-};
-
-export default QrScannerIntro;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: '6%',
-    paddingBottom: '22%',
-  },
-
-  iconWrapper: {
-    width: moderateScale(72),
-    height: moderateScale(72),
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: verticalScale(16),
-  },
-
-  title: {
-    fontSize: RFValue(20),
-    lineHeight: RFValue(26),
-    fontWeight: '700',
-    letterSpacing: 0.3,
-    textAlign: 'center',
-    marginBottom: verticalScale(8),
-  },
-
-  description: {
-    fontSize: RFValue(12),
-    lineHeight: RFValue(18),
-    textAlign: 'center',
-    width: '82%',
-    marginBottom: verticalScale(24),
-  },
-
-  heroCard: {
-    width: '72%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderRadius: moderateScale(24),
-    padding: scale(16),
-    marginBottom: verticalScale(28),
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.07,
-    shadowRadius: 16,
-    elevation: 4,
-  },
-
-  scannerBox: {
-    width: '100%',
-    aspectRatio: 1,
-    borderRadius: moderateScale(18),
-    borderWidth: 1.5,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-  },
-
-  corner: {
-    position: 'absolute',
-    width: '20%',
-    aspectRatio: 1,
-  },
-
-  cornerTL: {
-    top: 0,
-    left: 0,
-    borderTopWidth: 3,
-    borderLeftWidth: 3,
-    borderTopLeftRadius: moderateScale(16),
-  },
-
-  cornerTR: {
-    top: 0,
-    right: 0,
-    borderTopWidth: 3,
-    borderRightWidth: 3,
-    borderTopRightRadius: moderateScale(16),
-  },
-
-  cornerBL: {
-    bottom: 0,
-    left: 0,
-    borderBottomWidth: 3,
-    borderLeftWidth: 3,
-    borderBottomLeftRadius: moderateScale(16),
-  },
-
-  cornerBR: {
-    bottom: 0,
-    right: 0,
-    borderBottomWidth: 3,
-    borderRightWidth: 3,
-    borderBottomRightRadius: moderateScale(16),
-  },
-
-  button: {
-    width: '55%',
-    alignSelf: 'center',
-    minHeight: verticalScale(38),
-    paddingVertical: verticalScale(8),
-  },
-
-  buttonText: {
-    fontSize: RFValue(12),
-  },
-
-  loader: {
-    marginTop: verticalScale(8),
-  },
-});

package/src/components/Auth/One/QrLogin/components/qr-scanner-overlay.tsx

@@ -1,291 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  ActivityIndicator,
-  Text,
-  useWindowDimensions,
-} from 'react-native';
-import type { LayoutChangeEvent } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
-import {
-  Canvas,
-  Path,
-  Skia,
-  rect,
-  rrect,
-  FillType,
-  RoundedRect,
-} from '@shopify/react-native-skia';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { CheckCircle2, AlertTriangle } from 'lucide-react-native';
-
-import { useTheme } from '../../../../../theme';
-import { toRgba } from '../../../../../theme/utils/toRgba';
-
-const SCANNER_SIZE = moderateScale(260);
-const BORDER_RADIUS = moderateScale(28);
-const BORDER_WIDTH = moderateScale(3);
-
-type Props = {
-  header?: React.ReactNode;
-  scanner?: React.ReactNode;
-  footer?: React.ReactNode;
-  isProcessing?: boolean;
-  opacity?: number;
-  containerHeight?: number;
-  status?: 'idle' | 'loading' | 'success' | 'error';
-  statusMessage?: string;
-};
-
-const QrScannerOverlay: React.FC<Props> = ({
-  header,
-  scanner,
-  footer,
-  isProcessing = false,
-  opacity = 0.82,
-  containerHeight,
-  status = 'idle',
-  statusMessage,
-}) => {
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-  const [layout, setLayout] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const { theme } = useTheme();
-  const { colors } = theme;
-
-  const mountOpacity = useSharedValue(0);
-
-  React.useEffect(() => {
-    mountOpacity.value = withTiming(1, {
-      duration: 250,
-      easing: Easing.out(Easing.ease),
-    });
-  }, [mountOpacity]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: mountOpacity.value,
-    flex: 1,
-  }));
-
-  const onLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width: w, height: h } = event.nativeEvent.layout;
-    setLayout({ width: w, height: h });
-  }, []);
-
-  const width = layout?.width ?? windowWidth;
-  const height =
-    layout?.height ??
-    (containerHeight && containerHeight > 0 ? containerHeight : windowHeight);
-
-  const overlayColor = toRgba(
-    colors.background,
-    isProcessing ? Math.min(opacity + 0.1, 0.95) : opacity
-  );
-
-  const scannerX = (width - SCANNER_SIZE) / 2;
-  const scannerY = (height - SCANNER_SIZE) / 2;
-
-  const overlayPath = React.useMemo(() => {
-    const path = Skia.Path.Make();
-    path.addRect(rect(0, 0, width, height));
-    path.addRRect(
-      rrect(
-        rect(scannerX, scannerY, SCANNER_SIZE, SCANNER_SIZE),
-        BORDER_RADIUS,
-        BORDER_RADIUS
-      )
-    );
-    path.setFillType(FillType.EvenOdd);
-    return path;
-  }, [width, height, scannerX, scannerY]);
-
-  const loadingPillStyle = useMemo(
-    () => [
-      styles.processingRow,
-      {
-        backgroundColor: toRgba(colors.surface, 0.92),
-        borderColor: toRgba(colors.primary, 0.15),
-      },
-    ],
-    [colors.surface, colors.primary]
-  );
-
-  const loadingTextStyle = useMemo(
-    () => [styles.processingText, { color: colors.textPrimary }],
-    [colors.textPrimary]
-  );
-
-  const successPillStyle = useMemo(
-    () => [
-      styles.processingRow,
-      {
-        backgroundColor: toRgba(colors.alert.success, 0.95),
-        borderColor: toRgba(colors.alert.success, 0.2),
-      },
-    ],
-    [colors.alert.success]
-  );
-
-  const errorPillStyle = useMemo(
-    () => [
-      styles.processingRow,
-      {
-        backgroundColor: toRgba(colors.alert.error, 0.95),
-        borderColor: toRgba(colors.alert.error, 0.2),
-      },
-    ],
-    [colors.alert.error]
-  );
-
-  const scannerPositionStyle = useMemo(
-    () => [
-      styles.scannerContainer,
-      {
-        top: scannerY,
-        left: scannerX,
-      },
-    ],
-    [scannerY, scannerX]
-  );
-
-  const renderStatusPill = () => {
-    if (status === 'loading' || isProcessing) {
-      return (
-        <View style={loadingPillStyle}>
-          <ActivityIndicator size="small" color={colors.primary} />
-          <Text style={loadingTextStyle}>{statusMessage || 'Signing in…'}</Text>
-        </View>
-      );
-    }
-
-    if (status === 'success') {
-      return (
-        <View style={successPillStyle}>
-          <CheckCircle2 size={scale(14)} color="#FFFFFF" strokeWidth={2.5} />
-          <Text style={[styles.processingText, styles.textWhite]}>
-            {statusMessage || 'Login success!'}
-          </Text>
-        </View>
-      );
-    }
-
-    if (status === 'error') {
-      return (
-        <View style={errorPillStyle}>
-          <AlertTriangle size={scale(14)} color="#FFFFFF" strokeWidth={2.5} />
-          <Text style={[styles.processingText, styles.textWhite]}>
-            {statusMessage || 'Failed to verify.'}
-          </Text>
-        </View>
-      );
-    }
-
-    return footer;
-  };
-
-  return (
-    <Animated.View
-      style={[styles.container, animatedStyle]}
-      onLayout={onLayout}
-    >
-      <Canvas style={StyleSheet.absoluteFill}>
-        <Path path={overlayPath} color={overlayColor} />
-        <RoundedRect
-          x={scannerX}
-          y={scannerY}
-          width={SCANNER_SIZE}
-          height={SCANNER_SIZE}
-          r={BORDER_RADIUS}
-          color={
-            isProcessing
-              ? toRgba(colors.primary, 0.5)
-              : toRgba(colors.primary, 0.22)
-          }
-          style="stroke"
-          strokeWidth={BORDER_WIDTH}
-        />
-      </Canvas>
-
-      <View style={styles.topContainer}>{header}</View>
-
-      <View pointerEvents="box-none" style={scannerPositionStyle}>
-        {scanner}
-      </View>
-
-      <View style={styles.bottomContainer}>{renderStatusPill()}</View>
-    </Animated.View>
-  );
-};
-
-export default React.memo(QrScannerOverlay);
-
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFill,
-  },
-
-  topContainer: {
-    position: 'absolute',
-    top: verticalScale(20),
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    paddingHorizontal: scale(24),
-    zIndex: 10,
-  },
-
-  scannerContainer: {
-    position: 'absolute',
-    width: SCANNER_SIZE,
-    height: SCANNER_SIZE,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-    zIndex: 20,
-  },
-
-  bottomContainer: {
-    position: 'absolute',
-    bottom: verticalScale(40),
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    paddingHorizontal: scale(24),
-    zIndex: 10,
-  },
-
-  processingRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(6),
-    paddingVertical: verticalScale(5),
-    paddingHorizontal: scale(10),
-    borderRadius: moderateScale(99),
-    borderWidth: 1,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-
-  processingText: {
-    fontSize: RFValue(11),
-    fontWeight: '600',
-    opacity: 0.95,
-  },
-
-  textWhite: {
-    color: '#FFFFFF',
-  },
-});