@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

package/src/components/TabBar/Two.tsx

@@ -0,0 +1,151 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 AM
+ */
+import React, { useState } from 'react';
+import { View, Pressable, StyleSheet, Platform } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '@zezosoft/zezo-ott-react-native-ui-kit';
+import { Text } from '../Text';
+import type { AppTheme, ITheme } from '../../theme/themes';
+
+export type ITab = {
+  key: string;
+  name: string;
+  screenComponent: React.ComponentType<any>;
+  icon: React.ComponentType<{
+    width: number;
+    height: number;
+    color: string;
+  }>;
+};
+
+export type TabBarTwoProps = {
+  tabs: ITab[];
+  theme?: AppTheme;
+  onTabPress?: (key: string) => void;
+};
+
+const Tab = createBottomTabNavigator();
+
+// Extracted TabBarButton component
+const TabBarButton = ({
+  tab,
+  isActive,
+  appliedTheme,
+  onPress,
+  onTabPress,
+  setActiveTab
+}: {
+  tab: ITab;
+  isActive: boolean;
+  appliedTheme: ITheme;
+  onPress?: (e: any) => void;
+  onTabPress?: (key: string) => void;
+  setActiveTab: (key: string) => void;
+}) => {
+  const Icon = tab.icon;
+  const color = isActive ? appliedTheme.colors.button : appliedTheme.colors.textPrimary;
+
+  return (
+    <View style={styles.tabItem}>
+      <Pressable
+        onPress={(e) => {
+          onPress?.(e);
+          setActiveTab(tab.key);
+          onTabPress?.(tab.key);
+        }}
+        android_ripple={{
+          color: appliedTheme.dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)',
+          borderless: true,
+          radius: scale(42)
+        }}
+        style={styles.pressable}
+        accessibilityRole="button"
+        accessibilityLabel={`Tab: ${tab.name}`}
+      >
+        <Icon width={scale(24)} height={scale(24)} color={color} />
+        <Text style={[styles.label]} color={color} numberOfLines={1}>
+          {tab.name}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const [activeTab, setActiveTab] = useState(tabs[0]?.key);
+
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarShowLabel: false,
+        tabBarStyle: {
+          position: 'absolute',
+          bottom: scale(20),
+          marginHorizontal: scale(16),
+          height: scale(70),
+          borderRadius: scale(40),
+          backgroundColor: appliedTheme.colors.background + '80',
+          borderWidth: 2,
+          borderTopWidth: 2,
+          borderTopColor: appliedTheme.colors.border,
+          borderColor: appliedTheme.colors.border,
+          paddingBottom: Platform.OS === 'ios' ? scale(12) : scale(10),
+          paddingTop: Platform.OS === 'ios' ? scale(12) : scale(10),
+          shadowColor: appliedTheme.colors.shadow,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.2,
+          shadowRadius: 6,
+          elevation: 10,
+          overflow: 'hidden'
+        }
+      }}
+    >
+      {tabs.map((tab) => (
+        <Tab.Screen
+          key={tab.key}
+          name={tab.key}
+          component={tab.screenComponent}
+          options={{
+            tabBarButton: ({ onPress }) => (
+              <TabBarButton
+                tab={tab}
+                isActive={tab.key === activeTab}
+                appliedTheme={appliedTheme}
+                onPress={onPress}
+                onTabPress={onTabPress}
+                setActiveTab={setActiveTab}
+              />
+            )
+          }}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+export default TabBarTwo;
+
+const styles = StyleSheet.create({
+  tabItem: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  pressable: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: scale(10),
+    paddingVertical: scale(4),
+    borderRadius: scale(30)
+  },
+  label: {
+    marginTop: scale(4),
+    fontSize: scale(11),
+    textAlign: 'center'
+  }
+});

package/src/components/TabBar/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 AM
+ */
+
+import TabBarOne from './One';
+import TabBarTwo from './Two';
+import TabBarThree from './Three';
+
+const TabBar = {
+  One: TabBarOne,
+  Two: TabBarTwo,
+  Three: TabBarThree
+};
+
+export type { TabBarOneProps } from './One';
+export type { TabBarTwoProps } from './Two';
+export type { TabBarThreeProps } from './Three';
+
+export { TabBar };

package/src/components/Text/Text.tsx

@@ -0,0 +1,57 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 04:33 PM
+ */
+
+import React from 'react';
+import { Text as RNText, type TextProps as RNTextProps, type TextStyle } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/ThemeProvider';
+
+export interface TextProps extends RNTextProps {
+  children: React.ReactNode;
+  size?: number; // base size
+  color?: string;
+  weight?: TextStyle['fontWeight'];
+  align?: TextStyle['textAlign'];
+  fontFamily?: string;
+  numberOfLines?: number;
+  allowFontScaling?: boolean;
+}
+
+const Text: React.FC<TextProps> = ({
+  children,
+  size = 12,
+  color,
+  weight = '500',
+  align = 'left',
+  fontFamily,
+  numberOfLines,
+  allowFontScaling = false,
+  style,
+  ...rest
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <RNText
+      {...rest}
+      allowFontScaling={allowFontScaling}
+      numberOfLines={numberOfLines}
+      style={[
+        {
+          color: color ?? theme.colors.textPrimary,
+          fontSize: scale(size),
+          fontWeight: weight,
+          textAlign: align,
+          fontFamily
+        },
+        style
+      ]}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;

package/src/components/Text/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 05:02 PM
+ */
+export { default as Text } from './Text';

package/src/components/User/DeviceSessions/DeviceSessions.tsx

@@ -0,0 +1,373 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 30 Jun 2025 at 05:00 PM
+ */
+
+import React from 'react';
+import { View, StyleSheet, FlatList, TouchableOpacity, type StyleProp, type ViewStyle, Alert } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+import { useTheme } from '../../../theme';
+import AppHeader from '../../Headers/AppHeader';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import type { AppTheme } from '../../../theme/themes';
+
+type IUserLocation = {
+  country: string | null;
+  state: string | null;
+  city: string | null;
+};
+type IDeviceInfo = {
+  name: string | null;
+  browser: string | null;
+  location: IUserLocation | null;
+};
+type ISessions = {
+  id: string;
+  token: string;
+  refreshToken: string | null;
+  fingerprint: string;
+  deviceId: string | null;
+  lastActivity?: Date;
+  deviceInfo: IDeviceInfo | null;
+};
+
+type TextLabels = {
+  thisDevice?: string;
+  logOut?: string;
+  lastActivePrefix?: string;
+  noSessions?: string;
+  loadingLogoutText?: string;
+  cannotLogoutThisDeviceTitle?: string;
+  cannotLogoutThisDeviceMessage?: string;
+};
+
+type IDeviceSessionsProps = {
+  sessions: ISessions[];
+  activeSessionId?: string;
+  error?: string;
+  onLogout: ({ session }: { session: ISessions }) => void;
+  onBackPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  title?: string;
+  renderLogoutButton?: ({ session }: { session: ISessions }) => React.ReactNode;
+  renderContent?: ({ session, isActive }: { session: ISessions; isActive: boolean }) => React.ReactNode | null;
+  textLabels?: TextLabels;
+  headerStyle?: StyleProp<ViewStyle>;
+  headerTitleAlign?: 'left' | 'center';
+  headerTitleStyle?: StyleProp<any>;
+  renderHeader?: () => React.ReactNode;
+  theme?: AppTheme;
+  isLoading?: boolean;
+  isLoadingLogout?: boolean;
+};
+
+export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
+  sessions,
+  activeSessionId,
+  onLogout,
+  onBackPress = () => {},
+  title = 'Manage Devices',
+  style,
+  error,
+  renderLogoutButton,
+  renderContent,
+  textLabels,
+  headerStyle = {},
+  headerTitleAlign = 'center',
+  headerTitleStyle,
+  renderHeader,
+  theme,
+  isLoading,
+  isLoadingLogout
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const colors = appliedTheme.colors;
+
+  const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(null);
+
+  const {
+    thisDevice = 'This Device',
+    logOut = 'LOG OUT',
+    lastActivePrefix = 'Last active:',
+    noSessions = 'No active sessions found.',
+    loadingLogoutText = 'Logging out...',
+    cannotLogoutThisDeviceTitle = '⚠️ Cannot Logout',
+    cannotLogoutThisDeviceMessage = 'You cannot log out of this device.'
+  } = textLabels || {};
+
+  const renderItem = ({ item }: { item: ISessions }): React.ReactElement | null => {
+    const isActive = item?.id === activeSessionId;
+    const isLoggingOut = isLoadingLogout && logoutSessionId === item.id;
+    if (renderContent) {
+      return (
+        (renderContent({
+          session: item,
+          isActive
+        }) as React.ReactElement) ?? null
+      );
+    }
+
+    const { name = 'Device', browser, location } = item.deviceInfo || {};
+    const hasLocation = location?.city || location?.state || location?.country;
+    const handleLogoutPress = () => {
+      if (isActive) {
+        Alert.alert(cannotLogoutThisDeviceTitle, cannotLogoutThisDeviceMessage, [{ text: 'Cancel', style: 'cancel' }], {
+          cancelable: true
+        });
+        return;
+      }
+      setLogoutSessionId(item.id);
+      onLogout({ session: item });
+    };
+    return (
+      <View
+        style={[
+          styles.deviceRow,
+          {
+            backgroundColor: colors.surfaceVariant,
+            borderColor: colors.outlineVariant ?? colors.outline,
+            shadowColor: colors.shadow ?? '#000'
+          }
+        ]}
+      >
+        <View style={styles.deviceInfo}>
+          {(name || isActive) && (
+            <View style={styles.deviceRowHeader}>
+              {name && (
+                <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.deviceName, { color: colors.onSurface }]}>
+                  {name}
+                </Text>
+              )}
+              {isActive && (
+                <View style={[styles.badge, { backgroundColor: colors.button }]}>
+                  <Text numberOfLines={1} style={[styles.badgeText, { color: colors.black }]}>
+                    {thisDevice}
+                  </Text>
+                </View>
+              )}
+            </View>
+          )}
+
+          {(browser || hasLocation) && (
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
+            >
+              {browser}
+              {browser && hasLocation ? ' · ' : ''}
+              {hasLocation && [location?.city, location?.state, location?.country].filter(Boolean).join(', ')}
+            </Text>
+          )}
+
+          {item?.lastActivity && (
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
+            >
+              {lastActivePrefix} {new Date(item.lastActivity).toLocaleString()}
+            </Text>
+          )}
+        </View>
+
+        {renderLogoutButton ? (
+          renderLogoutButton({
+            session: item
+          })
+        ) : (
+          <TouchableOpacity
+            style={[styles.logoutButton, { borderColor: colors.border }]}
+            disabled={isLoggingOut}
+            activeOpacity={0.7}
+            onPress={handleLogoutPress}
+          >
+            <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.logoutText, { color: colors.primary }]}>
+              {isLoggingOut ? loadingLogoutText : logOut}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  const renderSkeleton = () => {
+    return (
+      <View style={styles.listContent}>
+        {[...Array(4)].map((_, index) => (
+          <View
+            key={index}
+            style={{
+              borderWidth: StyleSheet.hairlineWidth,
+              borderColor: colors.outlineVariant ?? colors.outline,
+              borderRadius: scale(10),
+              padding: scale(12),
+              marginBottom: verticalScale(12),
+              backgroundColor: colors.surfaceVariant
+            }}
+          >
+            <SkeletonPlaceholder
+              backgroundColor={colors.skeletonBaseColor || '#E1E9EE'}
+              highlightColor={colors.skeletonHighlightColor || '#F2F8FC'}
+              borderRadius={scale(8)}
+            >
+              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center" justifyContent="space-between">
+                <SkeletonPlaceholder.Item flex={1} paddingRight={scale(12)}>
+                  <SkeletonPlaceholder.Item
+                    width="60%"
+                    height={scale(14)}
+                    borderRadius={scale(4)}
+                    marginBottom={scale(6)}
+                  />
+                  <SkeletonPlaceholder.Item
+                    width="80%"
+                    height={scale(10)}
+                    borderRadius={scale(4)}
+                    marginBottom={scale(4)}
+                  />
+                  <SkeletonPlaceholder.Item width="50%" height={scale(10)} borderRadius={scale(4)} />
+                </SkeletonPlaceholder.Item>
+
+                <SkeletonPlaceholder.Item width={scale(80)} height={verticalScale(30)} borderRadius={scale(6)} />
+              </SkeletonPlaceholder.Item>
+            </SkeletonPlaceholder>
+          </View>
+        ))}
+      </View>
+    );
+  };
+  const sortedSessions = React.useMemo(() => {
+    if (!sessions?.length) return [];
+    return [...sessions].sort((a, b) => {
+      if (a.id === activeSessionId) return -1;
+      if (b.id === activeSessionId) return 1;
+      return 0;
+    });
+  }, [sessions, activeSessionId]);
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }, style]}>
+      {renderHeader ? (
+        renderHeader()
+      ) : (
+        <AppHeader
+          title={title}
+          onBackPress={onBackPress}
+          titleAlign={headerTitleAlign}
+          style={headerStyle}
+          titleStyle={headerTitleStyle}
+        />
+      )}
+
+      {isLoading ? (
+        renderSkeleton()
+      ) : (
+        <FlatList
+          data={sortedSessions}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+          contentContainerStyle={styles.listContent}
+          ListEmptyComponent={
+            <View style={styles.emptyWrapper}>
+              <Text
+                numberOfLines={2}
+                ellipsizeMode="tail"
+                style={[styles.emptyText, { color: colors.onSurfaceVariant }]}
+              >
+                {error || noSessions}
+              </Text>
+            </View>
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  listContent: {
+    paddingHorizontal: scale(16),
+    paddingVertical: verticalScale(12)
+  },
+  deviceRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: StyleSheet.hairlineWidth,
+    padding: scale(12),
+    borderRadius: scale(10),
+    marginBottom: verticalScale(12),
+    elevation: 2,
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 4
+  },
+  deviceInfo: {
+    flex: 1,
+    paddingRight: scale(12)
+  },
+  deviceRowHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: scale(8),
+    rowGap: verticalScale(2),
+    flexWrap: 'wrap',
+    marginBottom: scale(4)
+  },
+  deviceName: {
+    fontSize: scale(13),
+    fontWeight: '600',
+    flexShrink: 1,
+    maxWidth: '80%'
+  },
+  deviceMeta: {
+    fontSize: scale(10),
+    marginTop: scale(2),
+    flexShrink: 1
+  },
+  logoutButton: {
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(6),
+    borderRadius: scale(6),
+    minWidth: scale(80),
+    borderWidth: scale(1.5),
+    alignItems: 'center'
+  },
+  logoutText: {
+    fontSize: scale(11),
+    fontWeight: '600'
+  },
+  badge: {
+    paddingHorizontal: scale(8),
+    paddingVertical: verticalScale(2),
+    borderRadius: scale(6)
+  },
+  badgeText: {
+    fontSize: scale(10),
+    fontWeight: '500',
+    maxWidth: scale(100),
+    flexShrink: 1
+  },
+  emptyWrapper: {
+    paddingVertical: verticalScale(40),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  emptyText: {
+    fontSize: scale(12),
+    textAlign: 'center'
+  },
+  skeletonLine: {
+    borderRadius: scale(4),
+    backgroundColor: '#ccc'
+  }
+});
+
+export namespace DeviceSessions {
+  export type Props = IDeviceSessionsProps;
+  export type Data = Props['sessions'];
+  export type Item = Props['sessions'][number];
+}