related-ui-components 1.1.6

package/src/components/RedemptionOption/README.md

@@ -0,0 +1,148 @@
+# RedemptionOption Component
+
+A flexible, customizable touchable option component for React Native applications with support for icons, vertical/horizontal layouts, active states, and extensive styling options.
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { RedemptionOption } from '@your-org/component-library';
+import { GiftIcon } from '@your-org/icons';
+
+const RewardsScreen = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <RedemptionOption
+        icon={<GiftIcon size={24} color="#FFFFFF" />}
+        text="Redeem Points"
+        onPress={() => console.log('Option pressed')}
+      />
+    </View>
+  );
+};
+
+export default RewardsScreen;
+```
+
+## Props
+
+The `RedemptionOption` component provides extensive customization options through its props.
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `icon` | `React.ReactNode` | ✅ | - | Icon component to display in the option |
+| `text` | `string` | ✅ | - | Text label to display with the icon |
+
+### Layout & Appearance Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `orientation` | `"vertical" \| "horizontal"` | ❌ | `"vertical"` | Determines the layout direction of icon and text |
+| `backgroundColor` | `string` | ❌ | theme.primary | Background color of the option |
+| `textColor` | `string` | ❌ | theme.secondary | Color of the text label |
+| `width` | `number \| string` | ❌ | - | Width of the option component |
+| `height` | `number \| string` | ❌ | - | Height of the option component |
+| `borderRadius` | `number` | ❌ | `8` | Corner radius of the option component |
+| `padding` | `number` | ❌ | `12` | Padding inside the option component |
+| `fontSize` | `number` | ❌ | `14` | Base font size for the text (actual size will be 90% of this value) |
+
+### State Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `disabled` | `boolean` | ❌ | `false` | Whether the option is disabled (reduces opacity and prevents interaction) |
+| `isActive` | `boolean` | ❌ | `false` | Whether the option is in active state (adds a border) |
+| `activeOpacityValue` | `number` | ❌ | `0.7` | The opacity value when the button is pressed |
+
+### Style Customization
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
+| `textStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text label |
+| `iconContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the icon |
+
+### Behavior Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onPress` | `() => void` | ❌ | - | Function to call when the option is pressed |
+
+## Examples
+
+### Vertical Layout (Default)
+
+```jsx
+<RedemptionOption
+  icon={<CoinIcon size={24} color="#FFD700" />}
+  text="Redeem Coins"
+  onPress={() => handleRedemption('coins')}
+  backgroundColor="#2C3E50"
+  textColor="#FFFFFF"
+/>
+```
+
+### Horizontal Layout
+
+```jsx
+<RedemptionOption
+  icon={<TicketIcon size={20} color="#FF5722" />}
+  text="Movie Tickets"
+  orientation="horizontal"
+  onPress={() => handleRedemption('tickets')}
+  width="100%"
+  padding={16}
+/>
+```
+
+### Active State
+
+```jsx
+<RedemptionOption
+  icon={<StarIcon size={22} color="#FFD700" />}
+  text="Premium Rewards"
+  isActive={selectedReward === 'premium'}
+  onPress={() => setSelectedReward('premium')}
+  backgroundColor="#1E88E5"
+  textColor="#FFFFFF"
+/>
+```
+
+### Disabled State
+
+```jsx
+<RedemptionOption
+  icon={<LockIcon size={20} color="#9E9E9E" />}
+  text="Locked Reward"
+  disabled={!hasEnoughPoints}
+  onPress={() => handleRedemption('locked')}
+  backgroundColor="#ECEFF1"
+  textColor="#757575"
+/>
+```
+
+### Custom Styling
+
+```jsx
+<RedemptionOption
+  icon={<GiftIcon size={28} color="#E91E63" />}
+  text="Special Offer"
+  containerStyle={{
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 5,
+  }}
+  iconContainerStyle={{
+    backgroundColor: 'rgba(233, 30, 99, 0.1)', 
+    borderRadius: 20,
+    padding: 8
+  }}
+  textStyle={{ fontWeight: 'bold', letterSpacing: 0.5 }}
+  onPress={() => handleSpecialOffer()}
+/>
+```

package/src/components/RedemptionOption/RedemptionOption.tsx

@@ -0,0 +1,158 @@
+import { useTheme } from "../../theme";
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  View,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  StyleProp,
+  Dimensions,
+  DimensionValue,
+} from "react-native";
+
+interface RedemptionOptionProps {
+  // Required props
+  icon: React.ReactNode;
+  text: string;
+
+  // Customization props
+  orientation?: "vertical" | "horizontal";
+  backgroundColor?: string;
+  textColor?: string;
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number;
+  padding?: number;
+  fontSize?: number;
+  disabled?: boolean;
+  isActive?: boolean;
+  onPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  iconContainerStyle?: StyleProp<ViewStyle>;
+  activeOpacityValue?: number;
+}
+
+const RedemptionOption: React.FC<RedemptionOptionProps> = ({
+  icon,
+  text,
+  orientation = "vertical",
+  backgroundColor,
+  textColor,
+  width,
+  height,
+  borderRadius = 8,
+  padding = 12,
+  fontSize = 14,
+  disabled = false,
+  isActive = false,
+  onPress,
+  containerStyle,
+  textStyle,
+  iconContainerStyle,
+  activeOpacityValue = 0.7,
+}) => {
+  const theme = useTheme();
+
+  textColor = textColor || theme.onSurface;
+  // Dynamic styles based on props
+  let dynamicContainerStyle: ViewStyle = {
+    backgroundColor: backgroundColor || theme.surface,
+    borderRadius,
+    padding,
+    borderWidth: isActive ? 2 : 0,
+    borderColor: isActive ? textColor : undefined,
+  };
+
+  if (width) dynamicContainerStyle.width = width as DimensionValue;
+  if (height) dynamicContainerStyle.height = height as DimensionValue;
+
+  const dynamicTextStyle: TextStyle = {
+    color: textColor,
+    fontSize: fontSize * 0.9,
+    lineHeight: fontSize * 1.1,
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        orientation === "vertical" ? styles.vertical : styles.horizontal,
+        dynamicContainerStyle,
+        disabled && styles.disabled,
+        containerStyle,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={activeOpacityValue}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected: isActive }}
+    >
+      <View
+        style={[
+          styles.iconContainer,
+          orientation === "horizontal" && styles.iconHorizontal,
+          iconContainerStyle,
+        ]}
+      >
+        {icon}
+      </View>
+      <View style={{minHeight: 40, justifyContent:"center"}}>
+        <Text
+          style={[
+            styles.text,
+            orientation === "horizontal"
+              ? {}
+              : styles.textVertical,
+            dynamicTextStyle,
+            textStyle,
+          ]}
+          numberOfLines={2}
+          ellipsizeMode="tail"
+          adjustsFontSizeToFit={orientation === "vertical"}
+          minimumFontScale={0.8}
+        >
+          {text}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  vertical: {
+    flexDirection: "column",
+    justifyContent: "center",
+  },
+  horizontal: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems:"center"
+  },
+  iconContainer: {
+    marginBottom: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  iconHorizontal: {
+    marginBottom: 0,
+    marginRight: 12,
+  },
+  text: {
+    fontWeight: "500",
+  },
+  textVertical: {
+    textAlign: "center",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});
+
+export default RedemptionOption;

package/src/components/RedemptionOption/index.ts

@@ -0,0 +1,2 @@
+export { default as RedemptionOption} from "./RedemptionOption";
+export * from "./RedemptionOption";

package/src/components/ScratchCard/README.md

@@ -0,0 +1,119 @@
+## ScratchCard Documentation
+
+The `ScratchCard` is an interactive component that creates a scratch-to-reveal experience commonly used for promotions, rewards, and gamification features. It leverages the Shopify React Native Skia library to provide a smooth scratching animation with customizable appearance. The component tracks scratching progress and can trigger an action when a sufficient area has been revealed.
+
+### Usage
+
+```tsx
+import ScratchCard from "@/components/ScratchCard/ScratchCard";
+import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";
+import { Image, Text, View } from "react-native";
+
+const MyComponent = () => {
+  const handleRevealed = () => {
+    // Handle card fully revealed action
+    console.log("Scratch card revealed!");
+  };
+
+  return (
+    <View style={{ width: 300, height: 200 }}>
+      <ScratchCard 
+        image={require("@/assets/images/scratch_foreground.png")}
+        onScratched={handleRevealed}
+        brushStrokeWidth={40}
+        revealThreshold={0.7}
+      >
+        <ScratchCardContent>
+          <Image 
+            source={require("@/assets/images/reward-banner.png")} 
+            style={{ width: 250, height: 150 }}
+          />
+        </ScratchCardContent>
+      </ScratchCard>
+    </View>
+  );
+};
+
+export default MyComponent;
+```
+
+### Text-Based Example
+
+```tsx
+<ScratchCard 
+  backgroundColor="#8A2BE2"
+  text="Scratch to reveal your prize!"
+  textFontColor="#FFFFFF"
+  textFontSize={18}
+  width={300}
+  height={150}
+  onScratched={() => alert("Congratulations! You won a prize!")}
+>
+  <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
+    <Text style={{ fontSize: 24, fontWeight: "bold", color: "#000" }}>
+      50% OFF COUPON
+    </Text>
+    <Text style={{ marginTop: 8, color: "#333" }}>
+      Use code: SCRATCH50
+    </Text>
+  </ScratchCardContent>
+</ScratchCard>
+```
+
+### Props
+
+#### Core Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the container |
+| `children` | `React.ReactNode` | Required | Content to reveal underneath the scratch layer |
+| `image` | `ImageRequireSource` | `null` | Image to use as the scratch layer |
+| `width` | `number` | `300` | Width of the scratch card |
+| `height` | `number` | `300` | Height of the scratch card |
+| `onScratched` | `() => void` | `undefined` | Function to call when scratch threshold is reached |
+
+#### Scratch Behavior Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `brushStrokeWidth` | `number` | `50` | Width of the scratching stroke |
+| `revealThreshold` | `number` | `0.8` | Percentage (0.0-1.0) that needs to be scratched to trigger the reveal |
+
+#### Appearance Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundColor` | `string` | `"#CCCCCC"` | Background color of the scratch layer (used if no image is provided) |
+| `text` | `string` | `""` | Optional text to display on the scratch layer |
+| `textFont` | `ImageRequireSource` | `undefined` (required if text is present) | Font for the scratch layer text |
+| `textFontColor` | `string` | `"#CCCCCC"` | Color for the scratch layer text |
+| `textFontSize` | `number` | `16` | Font size for the scratch layer text |
+
+### ScratchCardContent
+
+The `ScratchCardContent` is a companion component that provides styling for the content underneath the scratch layer.
+
+#### Usage
+
+```tsx
+import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";
+
+<ScratchCardContent style={{ backgroundColor: "#f5f5f5" }}>
+  <Text>Your revealed content here</Text>
+</ScratchCardContent>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | Required | Content to display underneath the scratch layer |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the content container |
+
+### Related Components
+
+- `ScratchCardContent`: Used for styling the revealed content
+- `Image`: Used to display images in the scratch content or as the scratch layer
+- `Text`: Used to display text in both the scratch layer and revealed content
+- `View`: The foundation component for layout structure

package/src/components/ScratchCard/ScratchCard.tsx

@@ -0,0 +1,190 @@
+import React, { useRef, useState } from "react";
+import {
+  Canvas,
+  Group,
+  Image,
+  Mask,
+  Path,
+  Rect,
+  Skia,
+  LinearGradient,
+  vec,
+  useImage,
+  Text,
+  useFont,
+} from "@shopify/react-native-skia";
+import {
+  StyleProp,
+  View,
+  ViewStyle,
+  StyleSheet,
+  ImageRequireSource,
+  NativeTouchEvent,
+} from "react-native";
+
+type ScratchCardProps = {
+  style?: StyleProp<ViewStyle>;
+  image?: ImageRequireSource;
+  children?: React.ReactNode;
+  brushStrokeWidth?: number;
+  revealThreshold?: number;
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+  text?: string;
+  textFont?: ImageRequireSource;
+  textFontSize?: number;
+  textFontColor?: string;
+  onScratched?: () => void;
+};
+
+const ScratchCard: React.FC<ScratchCardProps> = ({
+  style,
+  children,
+  image = null,
+  brushStrokeWidth = 50,
+  revealThreshold = 0.8,
+  width = 300,
+  height = 300,
+  backgroundColor = "#CCCCCC",
+  text = "",
+  textFont,
+  textFontColor = "#CCCCCC",
+  textFontSize = 16,
+  onScratched,
+}) => {
+  const img = useImage(image);
+  const font = useFont(textFont, textFontSize);
+
+  const [[areaWidth, areaHeight], setSize] = useState([0, 0]);
+  const [isScratched, setScratched] = useState(false);
+  const [_, setRefresh] = useState(0);
+
+  const path = useRef(Skia.Path.Make());
+  const lastKnownY = useRef<number | null>(null);
+
+  //Check scratch progress
+  const checkScratchProgress = () => {
+    const bounds = path.current.getBounds();
+    const scratchedArea = bounds.height * bounds.width;
+    const totalArea = areaWidth * areaHeight;
+
+    if (scratchedArea / totalArea > revealThreshold && !isScratched) {
+      setScratched(true);
+      if (onScratched) {
+        onScratched();
+      }
+    }
+  };
+
+  //Handle path movement on canvas
+  const handleMove = (nativeEvent: NativeTouchEvent) => {
+    let { locationX, locationY } = nativeEvent;
+
+    if (
+      lastKnownY.current != null &&
+      nativeEvent.locationY - lastKnownY.current > 50
+    ) {
+      return;
+    }
+
+    path.current.lineTo(locationX, locationY);
+    lastKnownY.current = locationY;
+
+    setRefresh((prev) => prev + 1);
+    checkScratchProgress();
+  };
+
+  return (
+    <View
+      onLayout={(e) => {
+        setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
+      }}
+      style={[styles.container, style, { width, height }]}
+    >
+      <View style={styles.content}>{children}</View>
+
+      {!isScratched && (
+        <Canvas
+          style={styles.canvas}
+          onTouchStart={({ nativeEvent }) => {
+            path.current.moveTo(nativeEvent.locationX, nativeEvent.locationY);
+            setRefresh((prev) => prev + 1);
+          }}
+          onTouchMove={({ nativeEvent }) => handleMove(nativeEvent)}
+          onTouchEnd={() => (lastKnownY.current = null)}
+        >
+          <Mask
+            mode="luminance"
+            mask={
+              <Group>
+                <Rect x={0} y={0} width={1000} height={1000} color="white" />
+                <Path
+                  path={path.current}
+                  color="black"
+                  style="stroke"
+                  strokeJoin="round"
+                  strokeCap="round"
+                  strokeWidth={brushStrokeWidth}
+                />
+              </Group>
+            }
+          >
+            {img ? (
+              <Image
+                image={img}
+                fit="cover"
+                x={0}
+                y={0}
+                width={areaWidth}
+                height={areaHeight}
+              />
+            ) : (
+              <Group>
+                <Rect
+                  x={0}
+                  y={0}
+                  width={areaWidth}
+                  height={areaHeight}
+                  color={backgroundColor}
+                />
+                <Text
+                  x={areaWidth / 2 - (font?.measureText(text).width || 0) / 2}
+                  y={areaHeight / 2 + (font?.measureText(text).height || 0) / 2}
+                  text={text}
+                  color={textFontColor}
+                  font={font}
+                />
+              </Group>
+            )}
+          </Mask>
+        </Canvas>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    height: "100%",
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+  },
+  canvas: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+  },
+});
+
+export default ScratchCard;

package/src/components/ScratchCard/ScratchCardContent.tsx

@@ -0,0 +1,25 @@
+import { StyleProp, ViewStyle, View, StyleSheet } from "react-native";
+
+type ScratchCardContentProps = {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const ScratchCardContent: React.FC<ScratchCardContentProps> = ({
+  children,
+  style,
+}) => {
+  return <View style={[styles.card, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#ffffff",
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export default ScratchCardContent;

package/src/components/ScratchCard/index.ts

@@ -0,0 +1,4 @@
+export {default as ScratchCard} from "./ScratchCard";
+export {default as ScratchCardContent} from "./ScratchCardContent";
+export * from "./ScratchCard";
+export * from "./ScratchCardContent";