related-ui-components 1.8.5 → 1.8.7

package/lib/typescript/module/app.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-declare const MyScreen: () => React.JSX.Element;
-export default MyScreen;
+declare const MockWheelScreen: () => React.JSX.Element;
+export default MockWheelScreen;
 //# sourceMappingURL=app.d.ts.map

package/lib/typescript/module/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,QAAA,MAAM,QAAQ,yBAiGb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,eAAe,yBA6BpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/module/components/Wheel/Wheel.d.ts

@@ -9,8 +9,10 @@ export interface SpinWheelItem {
 }
 interface SpinWheelProps {
     items: SpinWheelItem[];
+    predeterminedWinner?: SpinWheelItem | string | number;
     size?: number;
     spinDuration?: number;
+    friction?: number;
     enabled?: boolean;
     onSpinStart?: () => void;
     onSpinEnd?: (item: SpinWheelItem) => void;
@@ -21,10 +23,10 @@ interface SpinWheelProps {
     knobStyle?: ViewStyle;
     actionButtonStyle?: ViewStyle;
     actionButtonTextStyle?: TextStyle;
+    wheelBorderColor?: string;
     wheelTextColor?: string;
     knobColor?: string;
     centerComponent?: React.ReactNode;
-    predeterminedWinnerId?: string | number | null;
 }
 declare const SpinWheel: React.FC<SpinWheelProps>;
 export default SpinWheel;

package/lib/typescript/module/components/Wheel/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Wheel/Wheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+BD,UAAU,cAAc;IACtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChD;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2QvC,CAAC;AA+DF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Wheel/Wheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+BD,UAAU,cAAc;IAEtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,mBAAmB,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;IAGtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAG1C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAGlC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwRvC,CAAC;AAqDF,eAAe,SAAS,CAAC"}

package/lib/typescript/module/index.d.ts

@@ -1,3 +1,4 @@
+import "react-native-reanimated";
 export * from "./theme";
 export * from "./components";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
   "main": "./src/index.ts",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

package/src/app.tsx

@@ -1,109 +1,45 @@
 import React, { useState } from "react";
 import { View, Button } from "react-native";
-import { FilterResult, Filters, Popup, UnlockRewards } from "./components";
-import BRANDS from "./constants/BRANDS";
-import { Ionicons } from "@expo/vector-icons";
-import { useTheme } from "./theme";
-import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
+import SpinWheel, { SpinWheelItem } from "./components/Wheel/Wheel";
 
-const MyScreen = () => {
-  const [isFilterVisible, setIsFilterVisible] = useState(false);
+const wheelItems: SpinWheelItem[] = [
+  { id: 1, label: "Prize 1", color: "#FF6384" },
+  { id: 2, label: "Prize 2", color: "#36A2EB" },
+  { id: 3, label: "Prize 3", color: "#FFCE56" },
+  { id: 4, label: "Prize 4", color: "#4BC0C0" },
+  { id: 5, label: "Prize 5", color: "#9966FF" },
+  { id: 6, label: "Prize 6", color: "#FF9F40" },
+];
 
-  const { theme } = useTheme();
-
-  const handleApplyFilters = (result: FilterResult) => {
-    console.log("Filters applied:", result);
-    // Process filter results...
-  };
-
-  const rewardsData = [
-    {
-      icon: (
-        <Ionicons name="briefcase-outline" size={30} color={theme.primary} />
-      ),
-      activeIcon: (
-        <Ionicons name="briefcase-outline" size={30} color={theme.onPrimary} />
-      ),
-      title: "Aqua Guardian",
-      description:
-        "Maintain water usage below the community average for a month.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: "#FFCDD2",
-      statusTextColor: "#D32F2F",
-    },
-    {
-      icon: <Ionicons name="heart-outline" size={30} color={theme.primary} />,
-      activeIcon: (
-        <Ionicons name="heart-outline" size={30} color={theme.onPrimary} />
-      ),
-      title: "Wellness Warrior",
-      description: "Complete 30 days of healthy hydration tracking.",
-      isActive: true,
-      status: "15/30",
-      statusBackgroundColor: "#C8E6C9",
-      statusTextColor: "#388E3C",
-    },
-    {
-      icon: <Ionicons name="airplane-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="airplane-outline" size={24} color={theme.primary} />
-      ),
-      title: "Eco Traveler",
-      description: "Log 5 trips where you chose sustainable travel options.",
-      isActive: false,
-      status: "2/5",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="school-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="school-outline" size={24} color={theme.primary} />
-      ),
-      title: "Knowledge Seeker",
-      description: "Complete all water conservation learning modules.",
-      isActive: false,
-      status: "3/5",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="settings-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="settings-outline" size={24} color={theme.primary} />
-      ),
-      title: "Smart Saver",
-      description: "Set up and use all water-saving features in the app.",
-      isActive: true,
-      status: "4/4",
-      statusBackgroundColor: theme.primary,
-      statusTextColor: theme.background,
-    },
-  ];
+const MockWheelScreen = () => {
+  const [winner, setWinner] = useState<SpinWheelItem | null>(null);
 
   return (
-    <>
-    <GestureHandlerRootView>
-      <RedeemedVoucherSheet
-        visible={true}
-        onClose={() => {}}
-        code="0000P78SHV50KK"
-        // amount={100}
-        expiry="22/01/2025"
-        currency="USD"
-        title="Voucher Activated!"
-        // primaryButtonColors={["red", "blue"]}
-        onMyVouchersButtonPress={() => console.log("My Vouchers pressed")}
-        onCopyCode={(code) => console.log("Copied:", code)}
-        // To use custom icons:
-        // amountIconComponent={<Image source={YourCustomAmountIcon} style={{width: 20, height: 20, marginRight: 5}} />}
-        // renderCopyIcon={() => <Text style={{fontSize: 22, color: 'blue'}}>COPY</Text>}
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <SpinWheel
+        items={wheelItems}
+        predeterminedWinner={wheelItems[2]}
+        onSpinEnd={(item) => {
+          alert(`Winner: ${item.label}`);
+          setWinner(null);
+        }}
+        size={300}
+        spinButtonText="Spin Randomly"
       />
-      </GestureHandlerRootView>
-    </>
+
+      <View style={{ flexDirection: "row", marginTop: 20 }}>
+        <Button
+          title="Spin to Prize 3"
+          onPress={() => setWinner(wheelItems[2])}
+        />
+        <View style={{ width: 20 }} />
+        <Button
+          title="Spin Random"
+          onPress={() => setWinner(null)}
+        />
+      </View>
+    </View>
   );
 };
 
-export default MyScreen;
+export default MockWheelScreen;