@fadyshawky/react-native-magic 2.2.0 → 2.3.0

package/template/src/common/components/Dropdown.tsx

@@ -0,0 +1,202 @@
+import React, {useMemo, useState} from 'react';
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {RTLAwareText} from './RTLAwareText';
+import {RTLAwareView} from './RTLAwareView';
+
+interface DropdownOption {
+  label: string;
+  value: string;
+}
+
+interface DropdownProps {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  options: DropdownOption[];
+  onSelect: (value: string) => void;
+  error?: string | null;
+}
+
+function ChevronDown({color}: {color: string}): JSX.Element {
+  return (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M6 9L12 15L18 9"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+function CheckIcon({color}: {color: string}): JSX.Element {
+  return (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M5 12.5L10 17.5L19 7"
+        stroke={color}
+        strokeWidth={2.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function Dropdown(props: DropdownProps): JSX.Element {
+  const {label, value, placeholder, options, onSelect, error} = props;
+  const {theme} = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const selected = useMemo(
+    () => options.find(option => option.value === value),
+    [options, value],
+  );
+
+  const valueColorStyle = {
+    color: selected
+      ? theme.colors.grayScale_700
+      : theme.colors.grayScale_200,
+  };
+
+  const fieldStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: theme.colors.grayScale_0,
+    borderColor: error ? theme.colors.error_400 : theme.colors.grayScale_50,
+    borderWidth: CommonSizes.borderWidth.medium,
+    borderRadius: CommonSizes.borderRadius.large,
+    paddingHorizontal: CommonSizes.spacing.xLarge,
+    paddingVertical: CommonSizes.spacing.xLarge,
+  };
+
+  return (
+    <RTLAwareView style={styles.container}>
+      {label ? (
+        <RTLAwareText
+          style={[theme.text.bodyMediumBold, {color: theme.colors.grayScale_700}]}>
+          {label}
+        </RTLAwareText>
+      ) : null}
+
+      <Pressable
+        onPress={() => setOpen(true)}
+        accessibilityRole="button"
+        accessibilityLabel={label ?? placeholder ?? 'Dropdown'}>
+        <RTLAwareView style={fieldStyle}>
+          <RTLAwareText
+            style={[
+              theme.text.bodyLargeRegular,
+              styles.flex1,
+              valueColorStyle,
+            ]}>
+            {selected ? selected.label : placeholder ?? ''}
+          </RTLAwareText>
+          <ChevronDown color={theme.colors.grayScale_200} />
+        </RTLAwareView>
+      </Pressable>
+
+      {error ? (
+        <RTLAwareText
+          style={[theme.text.bodySmallRegular, {color: theme.colors.error_400}]}>
+          {error}
+        </RTLAwareText>
+      ) : null}
+
+      <Modal transparent visible={open} animationType="fade">
+        <Pressable
+          style={styles.backdrop}
+          onPress={() => setOpen(false)}
+          accessibilityRole="button"
+          accessibilityLabel="Close dropdown">
+          <Pressable
+            style={[
+              styles.card,
+              {backgroundColor: theme.colors.grayScale_0},
+            ]}
+            onPress={() => {}}>
+            <ScrollView bounces={false}>
+              {options.map(option => {
+                const isSelected = option.value === value;
+                const optionColorStyle = {
+                  color: isSelected
+                    ? theme.colors.PlatinateBlue_400
+                    : theme.colors.grayScale_700,
+                };
+                return (
+                  <Pressable
+                    key={option.value}
+                    onPress={() => {
+                      onSelect(option.value);
+                      setOpen(false);
+                    }}
+                    accessibilityRole="button"
+                    style={styles.optionRow}>
+                    <RTLAwareView style={styles.optionInner}>
+                      <RTLAwareText
+                        style={[
+                          theme.text.bodyLargeRegular,
+                          styles.flex1,
+                          optionColorStyle,
+                        ]}>
+                        {option.label}
+                      </RTLAwareText>
+                      {isSelected ? (
+                        <CheckIcon color={theme.colors.PlatinateBlue_400} />
+                      ) : null}
+                    </RTLAwareView>
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </RTLAwareView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    flexDirection: 'column',
+    gap: CommonSizes.spacing.medium,
+  } as ViewStyle,
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(6, 8, 15, 0.55)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: CommonSizes.spacing.xxLarge,
+  },
+  card: {
+    width: '100%',
+    maxHeight: '60%',
+    borderRadius: CommonSizes.borderRadius.large,
+    overflow: 'hidden',
+    paddingVertical: CommonSizes.spacing.small,
+  },
+  optionRow: {
+    paddingHorizontal: CommonSizes.spacing.xLarge,
+    paddingVertical: CommonSizes.spacing.xLarge,
+  },
+  optionInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  flex1: {
+    flex: 1,
+  },
+});

package/template/src/common/components/ErrorBoundary.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {NaturalColors, PrimaryColors} from '../../core/theme/colors';
+import {Fonts} from '../../core/theme/fonts';
+import {CommonSizes} from '../../core/theme/commonSizes';
+
+interface Props {
+  children: React.ReactNode;
+  fallback?: (reset: () => void, error: Error) => React.ReactNode;
+  onError?: (error: Error, info: React.ErrorInfo) => void;
+}
+
+interface State {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  state: State = {error: null};
+
+  static getDerivedStateFromError(error: Error): State {
+    return {error};
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    if (__DEV__) {
+      console.error('[ErrorBoundary]', error, info.componentStack);
+    }
+    this.props.onError?.(error, info);
+  }
+
+  reset = () => this.setState({error: null});
+
+  render() {
+    if (!this.state.error) return this.props.children;
+    if (this.props.fallback) {
+      return this.props.fallback(this.reset, this.state.error);
+    }
+    return (
+      <View style={styles.root}>
+        <Text style={styles.title}>Something went wrong</Text>
+        <Text style={styles.message} numberOfLines={6}>
+          {this.state.error.message}
+        </Text>
+        <TouchableOpacity style={styles.button} onPress={this.reset}>
+          <Text style={styles.buttonText}>Try again</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: NaturalColors.background_2,
+  },
+  title: {
+    fontFamily: Fonts.bold,
+    fontSize: CommonSizes.font.bodyXLarge,
+    marginBottom: 12,
+  },
+  message: {
+    fontFamily: Fonts.regular,
+    fontSize: CommonSizes.font.bodyMedium,
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  button: {
+    backgroundColor: PrimaryColors.PlatinateBlue_400,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+  },
+  buttonText: {
+    color: '#fff',
+    fontFamily: Fonts.bold,
+    fontSize: CommonSizes.font.bodyMedium,
+  },
+});

package/template/src/common/components/FlatListWrapper.tsx

@@ -1,5 +1,5 @@
-import React, {FC, useMemo} from 'react';
-import {FlatList, FlatListProps} from 'react-native';
+import React, {useMemo} from 'react';
+import {FlashList, FlashListProps} from '@shopify/flash-list';
 import {LoadState} from '../../../types';
 import {TryAgain} from './TryAgain';
 import {Separator} from './Separator';
@@ -9,12 +9,13 @@ import {localization} from '../localization/localization';
 import {defaultKeyIdExtractor} from '../helpers/defaultKeyIdExtractor';
 import {CommonStyles} from '../../core/theme/commonStyles';
 
-interface IProps extends FlatListProps<any> {
+interface IProps extends FlashListProps<any> {
   loadState: LoadState;
   tryAgain?: () => void;
   error?: string | null;
 }
 
+// Shared FlashList defaults. Tune estimatedItemSize per-screen for long/heavy lists.
 const FlatListWrapperProps = {
   keyExtractor: defaultKeyIdExtractor,
   ListEmptyComponent: (
@@ -34,7 +35,7 @@ export function FlatListWrapper({
   ...props
 }: IProps) {
   const ListEmptyComponent = useMemo(() => {
-    if (loadState == LoadState.error) {
+    if (loadState === LoadState.error) {
       return (
         <TryAgain
           onPress={tryAgain}
@@ -47,20 +48,19 @@ export function FlatListWrapper({
   }, [loadState, props.ListEmptyComponent, error, tryAgain]);
 
   const refreshing = useMemo(() => {
-    return loadState == LoadState.pullToRefresh;
+    return loadState === LoadState.pullToRefresh;
   }, [loadState]);
 
-  if (loadState == LoadState.firstLoad) {
+  if (loadState === LoadState.firstLoad) {
     return <LoadingComponent />;
   } else {
     return (
-      <FlatList
+      <FlashList
         contentContainerStyle={CommonStyles.listContentContainer}
         {...FlatListWrapperProps}
         {...props}
         refreshing={refreshing}
         ListEmptyComponent={ListEmptyComponent}
-        removeClippedSubviews={true}
       />
     );
   }

package/template/src/common/components/ListItem.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {Pressable, StyleSheet, View} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {RTLAwareText} from './RTLAwareText';
+import {RTLAwareView} from './RTLAwareView';
+
+interface ListItemProps {
+  title: string;
+  subtitle?: string;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  onPress?: () => void;
+  showChevron?: boolean;
+}
+
+/**
+ * A standard list row: an optional `left` slot, a title + optional muted
+ * subtitle, then a `right` slot or a trailing chevron. Becomes tappable when
+ * `onPress` is supplied.
+ */
+export function ListItem({
+  title,
+  subtitle,
+  left,
+  right,
+  onPress,
+  showChevron,
+}: ListItemProps): JSX.Element {
+  const {theme} = useTheme();
+
+  const trailing =
+    right != null ? (
+      right
+    ) : showChevron ? (
+      <Chevron color={theme.colors.grayScale_200} />
+    ) : null;
+
+  const content = (
+    <RTLAwareView style={styles.row}>
+      {left != null ? <View>{left}</View> : null}
+      <View style={styles.textColumn}>
+        <RTLAwareText style={theme.text.bodyLargeBold}>{title}</RTLAwareText>
+        {subtitle != null ? (
+          <RTLAwareText
+            style={[
+              theme.text.bodySmallRegular,
+              {color: theme.colors.grayScale_200},
+            ]}>
+            {subtitle}
+          </RTLAwareText>
+        ) : null}
+      </View>
+      {trailing != null ? <View>{trailing}</View> : null}
+    </RTLAwareView>
+  );
+
+  if (onPress) {
+    return <Pressable onPress={onPress}>{content}</Pressable>;
+  }
+
+  return content;
+}
+
+function Chevron({color}: {color: string}): JSX.Element {
+  return (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M9 6l6 6-6 6"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: CommonSizes.spacing.large,
+    paddingVertical: CommonSizes.spacing.large,
+  },
+  textColumn: {
+    flex: 1,
+  },
+});

package/template/src/common/components/LoadingComponent.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
-import {Image, View} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
 import {CommonStyles} from '../../core/theme/commonStyles';
 
 export const LoadingComponent = () => {
   return (
     <View style={CommonStyles.flexCenter}>
-      <Image resizeMode="cover" style={{flex: 1}} source={0} />
+      <Image resizeMode="cover" style={styles.image} source={0} />
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  image: {
+    flex: 1,
+  },
+});

package/template/src/common/components/Logo.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import Svg, {Defs, LinearGradient, Path, Rect, Stop} from 'react-native-svg';
+
+/**
+ * Fady Shawky "FS" brand mark — a bold filled F beside a clean S, in a rounded
+ * chip. Premium "Midnight" black + blue treatment. Pure geometry (filled rects
+ * for the F, one stroked path for the S), so it renders identically in
+ * react-native-svg and plain SVG and stays legible at small sizes.
+ *
+ * variants:
+ *  - 'gradient' (default): blue-black chip, blue mark — the primary logo
+ *  - 'mono':  dark chip, white mark — for dark UI
+ *  - 'light': near-white chip, ink mark — for light UI
+ *  - 'mark':  no chip, blue mark — inline / nav usage
+ */
+export type LogoVariant = 'gradient' | 'mono' | 'light' | 'mark';
+
+interface LogoProps {
+  size?: number;
+  variant?: LogoVariant;
+}
+
+const S_PATH =
+  'M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77';
+
+function chipFill(variant: LogoVariant): string | undefined {
+  switch (variant) {
+    case 'gradient':
+      return 'url(#fsChip)';
+    case 'mono':
+      return '#0D1124';
+    case 'light':
+      return '#F4F6FE';
+    case 'mark':
+      return undefined;
+  }
+}
+
+function markColor(variant: LogoVariant): string {
+  switch (variant) {
+    case 'gradient':
+      return '#6BA0FF';
+    case 'mono':
+      return '#FFFFFF';
+    case 'light':
+      return '#0A1230';
+    case 'mark':
+      return '#2F6BFF';
+  }
+}
+
+export function Logo({size = 96, variant = 'gradient'}: LogoProps) {
+  const fill = chipFill(variant);
+  const c = markColor(variant);
+  return (
+    <Svg width={size} height={size} viewBox="0 0 120 120" fill="none">
+      <Defs>
+        <LinearGradient id="fsChip" x1="0" y1="0" x2="1" y2="1">
+          <Stop offset="0" stopColor="#0A1230" />
+          <Stop offset="1" stopColor="#1B45B8" />
+        </LinearGradient>
+      </Defs>
+      {fill ? <Rect x="0" y="0" width="120" height="120" rx="30" fill={fill} /> : null}
+      <Rect x="25" y="24" width="13" height="72" rx="3" fill={c} />
+      <Rect x="25" y="24" width="33" height="13" rx="3" fill={c} />
+      <Rect x="25" y="52" width="26" height="12" rx="3" fill={c} />
+      <Path
+        d={S_PATH}
+        stroke={c}
+        strokeWidth={13}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </Svg>
+  );
+}

package/template/src/common/components/ModalDialog.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {Modal, Pressable, StyleSheet, View, ViewStyle} from 'react-native';
+import {ButtonType} from '../../../types';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {PrimaryButton} from './PrimaryButton';
+import {RTLAwareText} from './RTLAwareText';
+
+type DialogActionVariant = 'primary' | 'ghost' | 'destructive';
+
+interface DialogAction {
+  label: string;
+  onPress: () => void;
+  variant?: DialogActionVariant;
+}
+
+interface ModalDialogProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  message?: string;
+  actions?: DialogAction[];
+}
+
+function buttonTypeForVariant(variant?: DialogActionVariant): ButtonType {
+  switch (variant) {
+    case 'destructive':
+      return ButtonType.outlineNegative;
+    case 'ghost':
+      return ButtonType.borderless;
+    case 'primary':
+    default:
+      return ButtonType.solid;
+  }
+}
+
+/**
+ * A centered alert/confirm dialog built on react-native's Modal.
+ * Fades in over a dimmed midnight backdrop; tapping the backdrop closes it.
+ * Falls back to a single "OK" button when no actions are supplied.
+ */
+export function ModalDialog({
+  visible,
+  onClose,
+  title,
+  message,
+  actions,
+}: ModalDialogProps): JSX.Element {
+  const {theme} = useTheme();
+
+  const cardStyle: ViewStyle = {
+    backgroundColor: theme.colors.grayScale_0,
+    borderRadius: CommonSizes.borderRadius.large,
+    padding: CommonSizes.spacing.xLarge,
+    maxWidth: 340,
+    width: '100%',
+    alignSelf: 'center',
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={onClose}>
+      <View style={styles.container}>
+        <Pressable
+          style={styles.backdrop}
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="Close"
+        />
+        <Pressable style={cardStyle} onPress={event => event.stopPropagation()}>
+          {title ? (
+            <RTLAwareText style={[theme.text.header4, styles.title]}>
+              {title}
+            </RTLAwareText>
+          ) : null}
+          {message ? (
+            <RTLAwareText
+              style={[
+                theme.text.bodyMediumRegular,
+                styles.message,
+                {color: theme.colors.grayScale_200},
+              ]}>
+              {message}
+            </RTLAwareText>
+          ) : null}
+          <View style={styles.actions}>
+            {actions && actions.length > 0 ? (
+              actions.map((action, index) => (
+                <View
+                  key={`${action.label}-${index}`}
+                  style={
+                    index > 0 ? styles.actionSpacing : undefined
+                  }>
+                  <PrimaryButton
+                    label={action.label}
+                    type={buttonTypeForVariant(action.variant)}
+                    onPress={action.onPress}
+                  />
+                </View>
+              ))
+            ) : (
+              <PrimaryButton
+                label="OK"
+                type={ButtonType.solid}
+                onPress={onClose}
+              />
+            )}
+          </View>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.xLarge,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(6,8,15,0.6)',
+  },
+  title: {
+    marginBottom: CommonSizes.spacing.medium,
+  },
+  message: {
+    marginBottom: CommonSizes.spacing.large,
+  },
+  actions: {
+    marginTop: CommonSizes.spacing.medium,
+  },
+  actionSpacing: {
+    marginTop: CommonSizes.spacing.medium,
+  },
+});