@fadyshawky/react-native-magic 2.2.0 → 2.3.0

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {RTLAwareText} from './RTLAwareText';
+
+type BadgeVariant = 'primary' | 'success' | 'error' | 'neutral';
+
+interface BadgeProps {
+  label?: string;
+  count?: number;
+  variant?: BadgeVariant;
+}
+
+/**
+ * A small pill for counts or short labels. Colored variants (primary / success
+ * / error) use white text; the neutral variant uses a subtle surface with the
+ * default text color. A `count` wins over `label` and is capped at "99+".
+ */
+export function Badge({
+  label,
+  count,
+  variant = 'primary',
+}: BadgeProps): JSX.Element {
+  const {theme} = useTheme();
+
+  const backgroundColor =
+    variant === 'success'
+      ? theme.colors.success_400
+      : variant === 'error'
+      ? theme.colors.error_400
+      : variant === 'neutral'
+      ? theme.colors.grayScale_50
+      : theme.colors.PlatinateBlue_400;
+
+  const isNeutral = variant === 'neutral';
+
+  const content =
+    count != null ? (count > 99 ? '99+' : String(count)) : label;
+
+  return (
+    <View style={[styles.badge, {backgroundColor}]}>
+      <RTLAwareText
+        style={
+          isNeutral
+            ? theme.text.bodySmallBold
+            : [theme.text.bodySmallBold, styles.labelOnColor]
+        }>
+        {content}
+      </RTLAwareText>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: CommonSizes.borderRadius.full,
+    paddingHorizontal: CommonSizes.spacing.small,
+  },
+  labelOnColor: {
+    color: '#FFFFFF',
+  },
+});

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

@@ -0,0 +1,58 @@
+import React, {useCallback} from 'react';
+import {FlatList, StyleSheet, View} from 'react-native';
+import {CommonSizes} from '../../core/theme/commonSizes';
+
+interface CardScrollerProps<T> {
+  data: T[];
+  renderItem: (info: {item: T; index: number}) => React.ReactElement;
+  cardWidth?: number;
+}
+
+const DEFAULT_CARD_WIDTH = 260;
+const CARD_GAP = CommonSizes.spacing.medium;
+
+/**
+ * A horizontal, snap-to-card scroller. Cards are a fixed width with a uniform
+ * gap between them and inset content padding. Fast deceleration + snapping
+ * give a premium "shelf of cards" feel.
+ */
+export function CardScroller<T>({
+  data,
+  renderItem,
+  cardWidth = DEFAULT_CARD_WIDTH,
+}: CardScrollerProps<T>): JSX.Element {
+  const renderCard = useCallback(
+    ({item, index}: {item: T; index: number}) => (
+      <View style={{width: cardWidth}}>{renderItem({item, index})}</View>
+    ),
+    [renderItem, cardWidth],
+  );
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderCard}
+      keyExtractor={(_, index) => `card-${index}`}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      snapToInterval={cardWidth + CARD_GAP}
+      snapToAlignment="start"
+      decelerationRate="fast"
+      ItemSeparatorComponent={ItemSeparator}
+      contentContainerStyle={styles.content}
+    />
+  );
+}
+
+function ItemSeparator(): JSX.Element {
+  return <View style={styles.separator} />;
+}
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: CommonSizes.spacing.large,
+  },
+  separator: {
+    width: CARD_GAP,
+  },
+});

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Image,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -36,7 +35,7 @@ export const Card = ({
         {backgroundColor: theme.colors.surface},
         createThemedStyles(theme).dropShadow,
         {marginRight: marginRight},
-        {overflow: 'hidden'},
+        styles.cardOverflowHidden,
         cardStyle,
       ]}
       onPress={() => {
@@ -46,15 +45,12 @@ export const Card = ({
         {icon && icon.uri && (
           <FastImage
             source={{uri: icon.uri, cache: FastImage.cacheControl.immutable}}
-            style={{
-              width: '100%',
-              height: '100%',
-            }}
+            style={styles.fastImage}
             resizeMode={FastImage.resizeMode.contain}
           />
         )}
       </View>
-      <Text style={[theme.text.cards, {textAlign: 'center'}]}>{title}</Text>
+      <Text style={[theme.text.cards, styles.titleCentered]}>{title}</Text>
     </TouchableOpacity>
   );
 };
@@ -69,6 +65,16 @@ const styles = StyleSheet.create({
     width: scaleWidth(187),
     height: scaleHeight(280),
   },
+  cardOverflowHidden: {
+    overflow: 'hidden',
+  },
+  fastImage: {
+    width: '100%',
+    height: '100%',
+  },
+  titleCentered: {
+    textAlign: 'center',
+  },
   blurContainer: {
     flex: 1,
     padding: CommonSizes.spacing.medium,

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

@@ -0,0 +1,196 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {
+  Dimensions,
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  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';
+
+interface CarouselProps<T> {
+  data: T[];
+  renderItem: (info: {item: T; index: number}) => React.ReactElement;
+  height?: number;
+}
+
+const ARROW = 32;
+const GAP = CommonSizes.spacing.medium;
+const CONTENT_WIDTH =
+  Dimensions.get('window').width - 2 * CommonSizes.spacing.large;
+// Card width = content minus the two arrow gutters, so arrows sit BESIDE the
+// card (in the side gutters), never overlapping it.
+const ITEM_WIDTH = CONTENT_WIDTH - 2 * (ARROW + GAP);
+
+function Chevron({dir, color}: {dir: 'left' | 'right'; color: string}) {
+  const d = dir === 'left' ? 'M15 5 L8 12 L15 19' : 'M9 5 L16 12 L9 19';
+  return (
+    <Svg width={18} height={22} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={d}
+        stroke={color}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/**
+ * Horizontal paging carousel with the card flanked by prev/next arrow buttons
+ * in the side gutters (never over the card), plus pagination dots below.
+ * Active dot is wide + primary blue; the rest are small + muted.
+ */
+export function Carousel<T>({
+  data,
+  renderItem,
+  height,
+}: CarouselProps<T>): JSX.Element {
+  const {theme} = useTheme();
+  const listRef = useRef<FlatList<T>>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const lastIndex = data.length - 1;
+
+  const goTo = useCallback(
+    (index: number) => {
+      const next = Math.max(0, Math.min(index, data.length - 1));
+      listRef.current?.scrollToOffset({
+        offset: next * ITEM_WIDTH,
+        animated: true,
+      });
+      setActiveIndex(next);
+    },
+    [data.length],
+  );
+
+  const onMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      setActiveIndex(Math.round(offsetX / ITEM_WIDTH));
+    },
+    [],
+  );
+
+  const renderCarouselItem = useCallback(
+    ({item, index}: {item: T; index: number}) => (
+      <View style={[styles.itemContainer, height != null ? {height} : null]}>
+        {renderItem({item, index})}
+      </View>
+    ),
+    [renderItem, height],
+  );
+
+  const prevDisabled = activeIndex <= 0;
+  const nextDisabled = activeIndex >= lastIndex;
+  const arrowColor = theme.colors.PlatinateBlue_400;
+  const disabledColor = theme.colors.grayScale_100;
+
+  const prevArrowStyle = {
+    backgroundColor: theme.colors.grayScale_0,
+    borderColor: theme.colors.grayScale_50,
+    opacity: prevDisabled ? 0.4 : 1,
+  };
+  const nextArrowStyle = {
+    backgroundColor: theme.colors.grayScale_0,
+    borderColor: theme.colors.grayScale_50,
+    opacity: nextDisabled ? 0.4 : 1,
+  };
+
+  return (
+    <View>
+      <View style={styles.row}>
+        <Pressable
+          onPress={() => goTo(activeIndex - 1)}
+          disabled={prevDisabled}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Previous"
+          style={[styles.arrow, prevArrowStyle]}>
+          <Chevron dir="left" color={prevDisabled ? disabledColor : arrowColor} />
+        </Pressable>
+
+        <FlatList
+          ref={listRef}
+          data={data}
+          renderItem={renderCarouselItem}
+          keyExtractor={(_, index) => `carousel-${index}`}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={ITEM_WIDTH}
+          snapToAlignment="start"
+          decelerationRate="fast"
+          disableIntervalMomentum
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          style={styles.list}
+        />
+
+        <Pressable
+          onPress={() => goTo(activeIndex + 1)}
+          disabled={nextDisabled}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Next"
+          style={[styles.arrow, nextArrowStyle]}>
+          <Chevron
+            dir="right"
+            color={nextDisabled ? disabledColor : arrowColor}
+          />
+        </Pressable>
+      </View>
+
+      <View style={styles.dotsRow}>
+        {data.map((_, index) => {
+          const isActive = index === activeIndex;
+          return (
+            <View
+              key={`dot-${index}`}
+              style={[
+                styles.dot,
+                isActive ? styles.dotActive : styles.dotInactive,
+                {
+                  backgroundColor: isActive
+                    ? theme.colors.PlatinateBlue_400
+                    : theme.colors.grayScale_50,
+                },
+              ]}
+            />
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {flexDirection: 'row', alignItems: 'center'},
+  list: {width: ITEM_WIDTH, flexGrow: 0},
+  itemContainer: {width: ITEM_WIDTH},
+  arrow: {
+    width: ARROW,
+    height: ARROW,
+    borderRadius: CommonSizes.borderRadius.full,
+    borderWidth: CommonSizes.borderWidth.small,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: GAP / 2,
+  },
+  dotsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: CommonSizes.spacing.large,
+  },
+  dot: {
+    height: 6,
+    borderRadius: CommonSizes.borderRadius.full,
+    marginHorizontal: CommonSizes.spacing.small,
+  },
+  dotActive: {width: 18},
+  dotInactive: {width: 6},
+});

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import {Pressable, StyleSheet, View, 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 CheckboxProps {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+function CheckMark({color}: {color: string}): JSX.Element {
+  return (
+    <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M5 12.5L10 17.5L19 7"
+        stroke={color}
+        strokeWidth={2.6}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  const {checked, onChange, label, disabled} = props;
+  const {theme} = useTheme();
+
+  const boxStyle: ViewStyle = {
+    width: 22,
+    height: 22,
+    borderRadius: CommonSizes.borderRadius.small,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: checked ? theme.colors.PlatinateBlue_400 : 'transparent',
+    borderWidth: CommonSizes.borderWidth.medium,
+    borderColor: checked
+      ? theme.colors.PlatinateBlue_400
+      : theme.colors.grayScale_50,
+  };
+
+  const boxOpacity = {opacity: disabled ? 0.5 : 1};
+
+  return (
+    <Pressable
+      onPress={() => !disabled && onChange(!checked)}
+      disabled={disabled}
+      hitSlop={8}
+      accessibilityRole="checkbox"
+      accessibilityState={{checked, disabled}}
+      style={boxOpacity}>
+      <RTLAwareView style={styles.row}>
+        <View style={boxStyle}>
+          {checked ? <CheckMark color={'#FFFFFF'} /> : null}
+        </View>
+        {label ? (
+          <RTLAwareText
+            style={[
+              theme.text.bodyLargeRegular,
+              styles.label,
+              {color: theme.colors.grayScale_700},
+            ]}>
+            {label}
+          </RTLAwareText>
+        ) : null}
+      </RTLAwareView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  } as ViewStyle,
+  label: {
+    marginStart: CommonSizes.spacing.large,
+    flexShrink: 1,
+  },
+});

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import {Pressable, StyleSheet} from 'react-native';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {RTLAwareText} from './RTLAwareText';
+
+interface ChipProps {
+  label: string;
+  selected?: boolean;
+  onPress?: () => void;
+}
+
+/**
+ * A pill-shaped, tappable chip. Selected → solid primary blue with white
+ * label; unselected → white surface with a subtle border and default label.
+ */
+export function Chip({label, selected, onPress}: ChipProps): JSX.Element {
+  const {theme} = useTheme();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[
+        styles.chip,
+        selected
+          ? {backgroundColor: theme.colors.PlatinateBlue_400}
+          : {
+              backgroundColor: theme.colors.grayScale_0,
+              borderColor: theme.colors.grayScale_50,
+              borderWidth: CommonSizes.borderWidth.small,
+            },
+      ]}>
+      <RTLAwareText
+        style={
+          selected
+            ? [theme.text.bodyMediumBold, styles.labelSelected]
+            : theme.text.bodyMediumBold
+        }>
+        {label}
+      </RTLAwareText>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    alignSelf: 'flex-start',
+    borderRadius: CommonSizes.borderRadius.full,
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingVertical: CommonSizes.spacing.small,
+  },
+  labelSelected: {
+    color: '#FFFFFF',
+  },
+});