related-ui-components 1.1.6

package/src/components/Wheel/README.md

@@ -0,0 +1,141 @@
+# SpinWheel Component
+
+A customizable spinning wheel component for React Native applications that allows users to create interactive prize wheels, random selectors, or game elements.
+
+## Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { View, Alert } from 'react-native';
+import { SpinWheel } from '@your-org/component-library';
+
+const MySpinWheelExample = () => {
+  const items = [
+    { id: 1, label: '10% OFF', color: '#FF0000', value: { discount: 10 } },
+    { id: 2, label: '20% OFF', color: '#00FF00', value: { discount: 20 } },
+    { id: 3, label: '30% OFF', color: '#0000FF', value: { discount: 30 } },
+    { id: 4, label: 'FREE GIFT', color: '#FFFF00', value: { type: 'gift' } },
+    { id: 5, label: 'BETTER LUCK', color: '#FF00FF', value: null },
+  ];
+
+  const handleWin = (item) => {
+    Alert.alert('Congratulations!', `You won: ${item.label}`);
+  };
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <SpinWheel 
+        items={items}
+        size={300}
+        onSpinEnd={handleWin}
+      />
+    </View>
+  );
+};
+
+export default MySpinWheelExample;
+```
+
+## Props
+
+### Data Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `items` | `SpinWheelItem[]` | ✅ | `[]` | Array of items to display on the wheel |
+
+#### SpinWheelItem Interface
+
+```typescript
+interface SpinWheelItem {
+  id: string | number;      // Unique identifier
+  label: string;            // Text to display on the wheel
+  value?: any;              // Optional value associated with the item
+  color: string;            // Background color (HEX, RGB, or named color)
+  textColor?: string;       // Text color (defaults to wheelTextColor)
+}
+```
+
+### Dimension Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `size` | `number` | ❌ | `300` | Diameter of the wheel in pixels |
+
+### Behavior Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `spinDuration` | `number` | ❌ | `5000` | Duration of spin animation in milliseconds |
+| `enabled` | `boolean` | ❌ | `true` | Whether the wheel can be spun |
+
+### Event Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onSpinStart` | `() => void` | ❌ | - | Callback function called when spinning starts |
+| `onSpinEnd` | `(item: SpinWheelItem) => void` | ❌ | - | Callback function called when spinning ends with the winning item |
+
+### Styling Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `ViewStyle` | ❌ | - | Custom style for the container |
+| `centerStyle` | `ViewStyle` | ❌ | - | Custom style for the center of the wheel |
+| `spinButtonText` | `string` | ❌ | `"Spin"` | Text for the spin button |
+| `spinButtonStyle` | `ViewStyle` | ❌ | - | Custom style for the spin button |
+| `spinButtonTextStyle` | `TextStyle` | ❌ | - | Custom style for the spin button text |
+| `wheelTextStyle` | `TextStyle` | ❌ | - | Custom style for the text on the wheel |
+| `knobStyle` | `ViewStyle` | ❌ | - | Custom style for the pointer |
+| `actionButtonStyle` | `ViewStyle` | ❌ | - | Custom style for the action button |
+| `actionButtonTextStyle` | `TextStyle` | ❌ | - | Custom style for the action button text |
+| `wheelBorderColor` | `string` | ❌ | `"#000000"` | Color of the wheel border |
+| `wheelTextColor` | `string` | ❌ | `"#FFFFFF"` | Default color of text on the wheel |
+| `knobColor` | `string` | ❌ | `"#D81E5B"` | Color of the pointer |
+| `centerComponent` | `React.ReactNode` | ❌ | - | Custom component to render in the center |
+
+## Advanced Examples
+
+### Custom Styling
+
+```jsx
+<SpinWheel 
+  items={items}
+  size={350}
+  spinDuration={6000}
+  knobColor="#FF5722"
+  wheelTextColor="#000000"
+  containerStyle={{ backgroundColor: '#F5F5F5', padding: 20, borderRadius: 10 }}
+  centerStyle={{ backgroundColor: '#FFC107' }}
+  spinButtonText="Try Your Luck!"
+  spinButtonStyle={{ backgroundColor: '#4CAF50' }}
+  spinButtonTextStyle={{ color: 'white', fontSize: 18 }}
+  onSpinEnd={handleWin}
+/>
+```
+
+<!-- ### With Custom Center Component
+
+```jsx
+<SpinWheel 
+  items={items}
+  size={400}
+  centerComponent={
+    <Image 
+      source={require('./logo.png')} 
+      style={{ width: 60, height: 60 }}
+    />
+  }
+  onSpinEnd={handleWin}
+/>
+``` -->
+
+### Disabled State
+
+```jsx
+<SpinWheel 
+  items={items}
+  enabled={userHasCredits}
+  onSpinEnd={handleWin}
+/>
+```

package/src/components/Wheel/Wheel.tsx

@@ -0,0 +1,374 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Text,
+  TouchableOpacity,
+  Easing,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import { Svg, Path, G, Text as SvgText } from "react-native-svg";
+
+export interface SpinWheelItem {
+  id: string | number;
+  label: string;
+  value?: any;
+  color: string;
+  textColor?: string;
+}
+
+//default random colors
+const colors = [
+    "#FF0000", // Red
+    "#FFA500", // Orange
+    "#FFFF00", // Yellow
+    "#008000", // Green
+    "#0000FF", // Blue
+    "#800080", // Purple
+    "#FFC0CB", // Pink
+    "#00FFFF", // Cyan
+    "#FF00FF", // Magenta
+    "#00FF00", // Lime
+    "#4B0082", // Indigo
+    "#EE82EE", // Violet
+    "#40E0D0", // Turquoise
+    "#FFD700", // Gold
+    "#C0C0C0", // Silver
+    "#FFDAB9", // Peach
+    "#E6E6FA", // Lavender
+    "#008080", // Teal
+    "#FF7F50", // Coral
+    "#DC143C", // Crimson
+    "#87CEEB", // Sky Blue
+    "#7FFF00", // Chartreuse
+    "#CCCCFF", // Periwinkle
+    "#FF6347", // Tomato
+    "#FA8072"  // Salmon
+];
+
+interface SpinWheelProps {
+  // Data
+  items: SpinWheelItem[];
+
+  // Dimensions
+  size?: number;
+
+  // Behavior
+  spinDuration?: number;
+  friction?: number;
+  enabled?: boolean;
+
+  // Events
+  onSpinStart?: () => void;
+  onSpinEnd?: (item: SpinWheelItem) => void;
+
+  // Styling
+  containerStyle?: ViewStyle;
+  centerStyle?: ViewStyle;
+  spinButtonText?: string;
+  spinButtonStyle?: ViewStyle;
+  spinButtonTextStyle?: TextStyle;
+  wheelTextStyle?: TextStyle;
+  knobStyle?: ViewStyle;
+  actionButtonStyle?: ViewStyle;
+  actionButtonTextStyle?: TextStyle;
+
+  // Custom colors
+  wheelBorderColor?: string;
+  wheelTextColor?: string;
+  knobColor?: string;
+
+  // Custom components
+  centerComponent?: React.ReactNode;
+}
+
+const SpinWheel: React.FC<SpinWheelProps> = ({
+  items,
+  size = 300,
+  spinDuration = 5000,
+  enabled = true,
+  onSpinStart,
+  onSpinEnd,
+  containerStyle,
+  centerStyle,
+  spinButtonText = "Spin",
+  wheelTextStyle,
+  knobStyle,
+  knobColor = "#D81E5B",
+  actionButtonStyle,
+  actionButtonTextStyle,
+  wheelTextColor = "#FFFFFF"
+}) => {
+  const wheelItems = items.length > 0 ? items : [];
+
+  const [spinning, setSpinning] = useState(false);
+  const [_, setWinner] = useState<SpinWheelItem | null>(null);
+  const rotateValue = useRef(new Animated.Value(0)).current;
+
+  // Track rotation manually for calculations
+  const rotationRef = useRef(0);
+
+  // Update tracked rotation when animation completes
+  useEffect(() => {
+    const listener = rotateValue.addListener(({ value }) => {
+      rotationRef.current = value;
+    });
+
+    return () => {
+      rotateValue.removeListener(listener);
+    };
+  }, [rotateValue]);
+
+  // Calculate angle for each segment
+  const anglePerItem = 360 / wheelItems.length;
+
+  // Create wheel segments
+  const generateWheelPaths = () => {
+    return wheelItems.map((item, index) => {
+      const startAngle = index * anglePerItem;
+      const endAngle = (index + 1) * anglePerItem;
+
+      // Calculate path for segment
+      const startRad = (startAngle * Math.PI) / 180;
+      const endRad = (endAngle * Math.PI) / 180;
+
+      const x1 = size / 2 + (size / 2) * Math.cos(startRad);
+      const y1 = size / 2 + (size / 2) * Math.sin(startRad);
+      const x2 = size / 2 + (size / 2) * Math.cos(endRad);
+      const y2 = size / 2 + (size / 2) * Math.sin(endRad);
+
+      const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+
+      const pathData = [
+        `M ${size / 2} ${size / 2}`,
+        `L ${x1} ${y1}`,
+        `A ${size / 2} ${size / 2} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+        "Z",
+      ].join(" ");
+
+      // Calculate coordinates for text and decoration
+      const midRad = ((startAngle + endAngle) / 2) * (Math.PI / 180);
+      const textX = size / 2 + size * 0.32 * Math.cos(midRad);
+      const textY = size / 2 + size * 0.32 * Math.sin(midRad);
+
+      const decorationX = size / 2 + size * 0.43 * Math.cos(midRad);
+      const decorationY = size / 2 + size * 0.43 * Math.sin(midRad);
+
+      return {
+        path: pathData,
+        item,
+        textX,
+        textY,
+        decorationX,
+        decorationY,
+        angle: (startAngle + endAngle) / 2,
+      };
+    });
+  };
+
+  const wheelPaths = generateWheelPaths();
+
+  // Handle spin button press
+  const handleSpin = () => {
+    if (spinning || !enabled) return;
+
+    setSpinning(true);
+    onSpinStart?.();
+
+    // Random number of spins (3-5 full rotations) plus random angle
+    const randomSpins = 3 + Math.random() * 2;
+    const randomAngle = Math.random() * 360;
+    const targetRotation = 360 * randomSpins + randomAngle;
+
+    Animated.timing(rotateValue, {
+      toValue: rotationRef.current + targetRotation / 360,
+      duration: spinDuration,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start(() => handleSpinEnd());
+  };
+
+  // Handle spin completion
+  const handleSpinEnd = () => {
+    setSpinning(false);
+
+    // Calculate winning segment based on final rotation with pointer at 270 degrees
+    const normalizedAngle = (rotationRef.current * 360) % 360;
+    // Adjust calculation to account for pointer at 270 degrees (instead of 0)
+    const winningIndex = Math.floor(
+      ((normalizedAngle - 270) % 360) / anglePerItem
+    );
+    const adjustedIndex =
+      (wheelItems.length - 1 - winningIndex) % wheelItems.length;
+    const winningItem =
+      wheelItems[
+        adjustedIndex >= 0 ? adjustedIndex : wheelItems.length + adjustedIndex
+      ];
+
+    setWinner(winningItem);
+    onSpinEnd?.(winningItem);
+  };
+
+  // Animation interpolation for rotation
+  const rotate = rotateValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"],
+  });
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={{ width: size, height: size }}>
+        {/* The wheel */}
+        <Animated.View
+          style={[
+            styles.wheelContainer,
+            {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              transform: [{ rotate }],
+            },
+          ]}
+        >
+          <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+            <G>
+              {wheelPaths.map(
+                (
+                  { path, item, textX, textY, decorationX, decorationY, angle },
+                  index
+                ) => {
+                  return (
+                    <React.Fragment key={item.id}>
+                      <Path
+                        d={path}
+                        fill={item.color == "" || null ? colors[Math.floor(Math.random() * colors.length)] : item.color}
+                        stroke="#000000"
+                        strokeWidth={1}
+                      />
+
+                      {/* Fixed text rendering */}
+                      <SvgText
+                        x={textX}
+                        y={textY}
+                        fill={item.textColor || wheelTextColor}
+                        fontSize={wheelTextStyle?.fontSize || 14}
+                        fontWeight={wheelTextStyle?.fontWeight || "bold"}
+                        textAnchor="middle"
+                        alignmentBaseline="central"
+                        transform={`rotate(${angle + 180}, ${textX}, ${textY} )`}
+                      >
+                        {item.label}
+                      </SvgText>
+                    </React.Fragment>
+                  );
+                }
+              )}
+            </G>
+          </Svg>
+        </Animated.View>
+
+        {/* The center circle */}
+        <View
+          style={[
+            styles.wheelCenter,
+            {
+              width: size / 5,
+              height: size / 5,
+              transform: [
+                { translateX: -size / 10 },
+                { translateY: -size / 10 },
+              ],
+              borderRadius: size / 5,
+            },
+            centerStyle
+          ]}
+        />
+
+        {/* The pointer is a triangle on top */}
+        <View style={styles.pointerPosition}>
+          <View style={[styles.pointer, { borderBottomColor: knobColor }, knobStyle]} />
+        </View>
+
+        {/* Action Button */}
+        <View
+          style={{
+            position: "absolute",
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            bottom: -70,
+            zIndex: 2,
+          }}
+        >
+          <TouchableOpacity
+            onPress={handleSpin}
+            disabled={spinning || !enabled}
+            style={[styles.actionButton,  actionButtonStyle]}
+          >
+            <Text
+              style={[styles.actionButtonText, actionButtonTextStyle]}
+            >
+              {spinButtonText}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 20,
+    marginBottom: 70, // Space for the button
+  },
+  wheelContainer: {
+    overflow: "hidden",
+    backgroundColor: "transparent",
+  },
+  wheelCenter: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    backgroundColor: "#000000",
+    borderWidth: 1,
+    borderColor: "#333333",
+    zIndex: 1,
+  },
+  pointerPosition: {
+    position: "absolute",
+    left: "50%",
+    transform: [{ translateX: -10 }, { rotate: "180deg" }],
+    zIndex: 2,
+  },
+  pointer: {
+    width: 0,
+    height: 0,
+    backgroundColor: "transparent",
+    borderStyle: "solid",
+    borderLeftWidth: 10,
+    borderRightWidth: 10,
+    borderBottomWidth: 15,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    borderBottomColor: "#D81E5B",
+  },
+  actionButton: {
+    paddingHorizontal: 30,
+    paddingVertical: 12,
+    borderRadius: 25,
+    shadowColor: "#000",
+    shadowRadius: 3,
+    backgroundColor: "grey"
+  },
+  actionButtonText: {
+    fontWeight: "bold",
+    fontSize: 16,
+  }
+});
+
+export default SpinWheel;

package/src/components/Wheel/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export * from "./Card"
+export * from "./ProgressBar";
+export * from  "./Badges";
+export * from "./Banner";
+export * from "./BrandIcon";
+export * from "./Filters";
+export * from "./Input";
+export * from "./LockOverlay";
+export * from "./Popup";
+export * from "./RedemptionOption";
+export * from "./ScratchCard";
+export * from "./UnlockRewards";
+export * from "./Wheel";
+export * from "./CloseIcon";

package/src/constants/BRANDS.ts

@@ -0,0 +1,64 @@
+const BRANDS = [
+    {
+      id: "1",
+      name: "Brand 1",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "2",
+      name: "Brand 2",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "3",
+      name: "Brand 3",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "4",
+      name: "Brand 4",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "5",
+      name: "Brand 5",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "6",
+      name: "Brand 6",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "7",
+      name: "Brand 7",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "8",
+      name: "Brand 8",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "9",
+      name: "Brand 9",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "10",
+      name: "Brand 10",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "11",
+      name: "Brand 11",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+    {
+      id: "12",
+      name: "Brand 12",
+      logo: require("@/assets/images/pb-logo.jpg"),
+    },
+  ];
+  
+  export default BRANDS;

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./theme"
+export * from "./components"