related-ui-components 1.1.6

package/lib/module/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/lib/module/components/RedemptionOption/RedemptionOption.js

@@ -0,0 +1,106 @@
+"use strict";
+
+import { useTheme } from "../../theme/index.js";
+import React from "react";
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RedemptionOption = ({
+  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 = {
+    backgroundColor: backgroundColor || theme.surface,
+    borderRadius,
+    padding,
+    borderWidth: isActive ? 2 : 0,
+    borderColor: isActive ? textColor : undefined
+  };
+  if (width) dynamicContainerStyle.width = width;
+  if (height) dynamicContainerStyle.height = height;
+  const dynamicTextStyle = {
+    color: textColor,
+    fontSize: fontSize * 0.9,
+    lineHeight: fontSize * 1.1
+  };
+  return /*#__PURE__*/_jsxs(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
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.iconContainer, orientation === "horizontal" && styles.iconHorizontal, iconContainerStyle],
+      children: icon
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        minHeight: 40,
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.text, orientation === "horizontal" ? {} : styles.textVertical, dynamicTextStyle, textStyle],
+        numberOfLines: 2,
+        ellipsizeMode: "tail",
+        adjustsFontSizeToFit: orientation === "vertical",
+        minimumFontScale: 0.8,
+        children: text
+      })
+    })]
+  });
+};
+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;
+//# sourceMappingURL=RedemptionOption.js.map

package/lib/module/components/RedemptionOption/RedemptionOption.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTheme","React","TouchableOpacity","Text","View","StyleSheet","jsx","_jsx","jsxs","_jsxs","RedemptionOption","icon","text","orientation","backgroundColor","textColor","width","height","borderRadius","padding","fontSize","disabled","isActive","onPress","containerStyle","textStyle","iconContainerStyle","activeOpacityValue","theme","onSurface","dynamicContainerStyle","surface","borderWidth","borderColor","undefined","dynamicTextStyle","color","lineHeight","style","styles","container","vertical","horizontal","activeOpacity","accessibilityRole","accessibilityState","selected","children","iconContainer","iconHorizontal","minHeight","justifyContent","textVertical","numberOfLines","ellipsizeMode","adjustsFontSizeToFit","minimumFontScale","create","alignItems","flexDirection","marginBottom","marginRight","fontWeight","textAlign","opacity"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RedemptionOption/RedemptionOption.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/RedemptionOption/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as RedemptionOption } from "./RedemptionOption.js";
+export * from "./RedemptionOption.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/RedemptionOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","RedemptionOption"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RedemptionOption/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAO,uBAAoB;AAC/D,cAAc,uBAAoB","ignoreList":[]}

package/lib/module/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/lib/module/components/ScratchCard/ScratchCard.js

@@ -0,0 +1,147 @@
+"use strict";
+
+import React, { useRef, useState } from "react";
+import { Canvas, Group, Image, Mask, Path, Rect, Skia, useImage, Text, useFont } from "@shopify/react-native-skia";
+import { View, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ScratchCard = ({
+  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(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 => {
+    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 /*#__PURE__*/_jsxs(View, {
+    onLayout: e => {
+      setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
+    },
+    style: [styles.container, style, {
+      width,
+      height
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.content,
+      children: children
+    }), !isScratched && /*#__PURE__*/_jsx(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,
+      children: /*#__PURE__*/_jsx(Mask, {
+        mode: "luminance",
+        mask: /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Rect, {
+            x: 0,
+            y: 0,
+            width: 1000,
+            height: 1000,
+            color: "white"
+          }), /*#__PURE__*/_jsx(Path, {
+            path: path.current,
+            color: "black",
+            style: "stroke",
+            strokeJoin: "round",
+            strokeCap: "round",
+            strokeWidth: brushStrokeWidth
+          })]
+        }),
+        children: img ? /*#__PURE__*/_jsx(Image, {
+          image: img,
+          fit: "cover",
+          x: 0,
+          y: 0,
+          width: areaWidth,
+          height: areaHeight
+        }) : /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Rect, {
+            x: 0,
+            y: 0,
+            width: areaWidth,
+            height: areaHeight,
+            color: backgroundColor
+          }), /*#__PURE__*/_jsx(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
+          })]
+        })
+      })
+    })]
+  });
+};
+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;
+//# sourceMappingURL=ScratchCard.js.map

package/lib/module/components/ScratchCard/ScratchCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useState","Canvas","Group","Image","Mask","Path","Rect","Skia","useImage","Text","useFont","View","StyleSheet","jsx","_jsx","jsxs","_jsxs","ScratchCard","style","children","image","brushStrokeWidth","revealThreshold","width","height","backgroundColor","text","textFont","textFontColor","textFontSize","onScratched","img","font","areaWidth","areaHeight","setSize","isScratched","setScratched","_","setRefresh","path","Make","lastKnownY","checkScratchProgress","bounds","current","getBounds","scratchedArea","totalArea","handleMove","nativeEvent","locationX","locationY","lineTo","prev","onLayout","e","layout","styles","container","content","canvas","onTouchStart","moveTo","onTouchMove","onTouchEnd","mode","mask","x","y","color","strokeJoin","strokeCap","strokeWidth","fit","measureText","create","position","overflow","top","left"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ScratchCard/ScratchCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ScratchCard/ScratchCardContent.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScratchCardContent = ({
+  children,
+  style
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.card, style],
+    children: children
+  });
+};
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#ffffff",
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default ScratchCardContent;
+//# sourceMappingURL=ScratchCardContent.js.map

package/lib/module/components/ScratchCard/ScratchCardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","jsx","_jsx","ScratchCardContent","children","style","styles","card","create","backgroundColor","width","height","alignItems","justifyContent"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ScratchCard/ScratchCardContent.tsx"],"mappings":";;AAAA,SAA+BA,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOtE,MAAMC,kBAAqD,GAAGA,CAAC;EAC7DC,QAAQ;EACRC;AACF,CAAC,KAAK;EACJ,oBAAOH,IAAA,CAACH,IAAI;IAACM,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEF,KAAK,CAAE;IAAAD,QAAA,EAAEA;EAAQ,CAAO,CAAC;AAC7D,CAAC;AAED,MAAME,MAAM,GAAGN,UAAU,CAACQ,MAAM,CAAC;EAC/BD,IAAI,EAAE;IACJE,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAeV,kBAAkB","ignoreList":[]}

package/lib/module/components/ScratchCard/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export { default as ScratchCard } from "./ScratchCard.js";
+export { default as ScratchCardContent } from "./ScratchCardContent.js";
+export * from "./ScratchCard.js";
+export * from "./ScratchCardContent.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/ScratchCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","ScratchCard","ScratchCardContent"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ScratchCard/index.ts"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,WAAW,QAAO,kBAAe;AACpD,SAAQD,OAAO,IAAIE,kBAAkB,QAAO,yBAAsB;AAClE,cAAc,kBAAe;AAC7B,cAAc,yBAAsB","ignoreList":[]}