related-ui-components 1.9.2 → 1.9.4

package/package.json

@@ -1,126 +1,123 @@
-{
-  "name": "related-ui-components",
-  "main": "./src/index.ts",
-  "version": "1.9.2",
-  "scripts": {
-    "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "test": "jest --watchAll",
-    "lint": "expo lint",
-    "prepare": "bob build"
-  },
-  "jest": {
-    "preset": "jest-expo",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/lib/"
-    ]
-  },
-  "dependencies": {
-    "@expo/metro-runtime": "~4.0.1",
-    "@expo/vector-icons": "^14.0.2",
-    "@gorhom/bottom-sheet": "^5.1.2",
-    "@ptomasroos/react-native-multi-slider": "^2.2.2",
-    "@react-native-community/slider": "4.5.5",
-    "@react-native-picker/picker": "2.9.0",
-    "@react-navigation/native": "^7.0.14",
-    "@shopify/react-native-skia": "1.5.0",
-    "date-fns": "^4.1.0",
-    "expo": "~52.0.46",
-    "expo-barcode-generator": "^4.0.0",
-    "expo-checkbox": "^4.0.1",
-    "expo-clipboard": "~7.0.1",
-    "expo-constants": "~17.0.7",
-    "expo-font": "~13.0.4",
-    "expo-linear-gradient": "~14.0.2",
-    "expo-linking": "~7.0.5",
-    "expo-splash-screen": "~0.29.24",
-    "expo-status-bar": "~2.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.9",
-    "react-native-calendars": "^1.1310.0",
-    "react-native-gesture-handler": "~2.20.2",
-    "react-native-modal": "^14.0.0-rc.1",
-    "react-native-qrcode-svg": "^6.3.15",
-    "react-native-reanimated": "^3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
-    "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@chromatic-com/storybook": "^3.2.5",
-    "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-community/datetimepicker": "8.2.0",
-    "@react-native-community/slider": "4.5.5",
-    "@types/jest": "^29.5.12",
-    "@types/jsbarcode": "^3.11.4",
-    "@types/react": "~18.3.12",
-    "@types/react-test-renderer": "^18.3.0",
-    "@types/xmldom": "^0.1.34",
-    "babel-loader": "^8.4.1",
-    "jest": "^29.2.1",
-    "jest-expo": "~52.0.4",
-    "react-native-builder-bob": "^0.37.0",
-    "react-test-renderer": "18.3.1",
-    "storybook": "^8.6.4",
-    "typescript": "^5.3.3",
-    "vite": "^6.2.1"
-  },
-  "private": false,
-  "source": "./src/index.ts",
-  "module": "./lib/module/index.js",
-  "types": "./lib/typescript/commonjs/index.d.ts",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./lib/typescript/module/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
-    }
-  },
-  "files": [
-    "src",
-    "lib",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__"
-  ],
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "commonjs",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "esm": true
-        }
-      ]
-    ]
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ]
-}
+{
+  "name": "related-ui-components",
+  "main": "./src/index.ts",
+  "version": "1.9.4",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint",
+    "prepare": "bob build"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~4.0.1",
+    "@expo/vector-icons": "^14.0.2",
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
+    "@react-native-community/slider": "4.5.5",
+    "@react-native-picker/picker": "2.9.0",
+    "@react-navigation/native": "^7.0.14",
+    "@shopify/react-native-skia": "1.5.0",
+    "date-fns": "^4.1.0",
+    "expo": "~52.0.46",
+    "expo-checkbox": "^4.0.1",
+    "expo-constants": "~17.0.7",
+    "expo-font": "~13.0.4",
+    "expo-linear-gradient": "~14.0.2",
+    "expo-linking": "~7.0.5",
+    "expo-splash-screen": "~0.29.24",
+    "expo-status-bar": "~2.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-calendars": "^1.1310.0",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-modal": "^14.0.0-rc.1",
+    "react-native-qrcode-svg": "^6.3.15",
+    "react-native-reanimated": "^3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-svg": "15.8.0",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.5",
+    "expo-clipboard": "~7.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@chromatic-com/storybook": "^3.2.5",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/slider": "4.5.5",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
+    "babel-loader": "^8.4.1",
+    "jest": "^29.2.1",
+    "jest-expo": "~52.0.4",
+    "react-native-builder-bob": "^0.37.0",
+    "react-test-renderer": "18.3.1",
+    "storybook": "^8.6.4",
+    "typescript": "^5.3.3",
+    "vite": "^6.2.1"
+  },
+  "private": false,
+  "source": "./src/index.ts",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
+}

package/src/app.tsx

@@ -1,151 +1,127 @@
-// // App.tsx or any other screen component
-// import React, { useState } from "react";
-// import {
-//   SafeAreaView,
-//   StyleSheet,
-//   TextInput,
-//   View,
-//   Text,
-//   ScrollView,
-//   Button,
-// } from "react-native";
-// import Barcode, { BarcodeFormat } from "./components/Barcode/Barcode";
+import React, { useState } from "react";
+import { View, Button, Text } from "react-native";
+import {
+  FilterResult,
+  Filters,
+  Popup,
+  ScratchCard,
+  ScratchCardContent,
+  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";
 
-// export default function App() {
-//   const [barcodeValue, setBarcodeValue] = useState("123456789012");
-//   const [barcodeFormat, setBarcodeFormat] = useState<BarcodeFormat>(
-//     BarcodeFormat.EAN13,
-//   );
-//   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+const MyScreen = () => {
+  const [isFilterVisible, setIsFilterVisible] = useState(false);
 
-//   const handleBarcodeError = (error: Error) => {
-//     console.error("Custom Barcode Error:", error.message);
-//     setErrorMsg(`Barcode Error: ${error.message}`);
-//   };
+  const { theme } = useTheme();
 
-//   const cycleFormat = () => {
-//     const formats = Object.values(BarcodeFormat);
-//     const currentIndex = formats.indexOf(barcodeFormat);
-//     const nextIndex = (currentIndex + 1) % formats.length;
-//     setBarcodeFormat(formats[nextIndex]);
-//     // Adjust value for specific formats if needed
-//     if (formats[nextIndex] === BarcodeFormat.EAN13) setBarcodeValue("978020137962"); // Valid EAN13
-//     else if (formats[nextIndex] === BarcodeFormat.UPC) setBarcodeValue("012345678905"); // Valid UPC
-//     else if (formats[nextIndex] === BarcodeFormat.CODE39) setBarcodeValue("HELLO-WORLD");
-//     else setBarcodeValue("TEST12345");
+  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,
+    },
+  ];
 
-//   return (
-//     <SafeAreaView style={styles.container}>
-//       <ScrollView contentContainerStyle={styles.scrollContent}>
-//         <Text style={styles.title}>Custom Barcode Generator</Text>
+  return (
+    <>
+      <GestureHandlerRootView>
+        <Popup visible={true} onClose={()=>{}}>
+        <ScratchCard
+          backgroundColor="#8A2BE2"
+          text="Scratch to reveal your prize!"
+          textFontColor="#FFFFFF"
+          textFontSize={18}
+          textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
+          width={300}
+          height={150}
+          gradient={{
+            colors: ["#ff0000", "#00ff00", "#0000ff"],
+            start: { x: 0, y: 0 },
+            end: { x: 300, y: 300 },
+          }}
+          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>
+        </Popup>
+      </GestureHandlerRootView>
+    </>
+  );
+};
 
-//         <TextInput
-//           style={styles.input}
-//           placeholder="Enter barcode value"
-//           value={barcodeValue}
-//           onChangeText={setBarcodeValue}
-//           autoCapitalize="characters" // Good for some formats like CODE39
-//         />
-
-//         <View style={styles.formatSelector}>
-//           <Text>Format: {barcodeFormat}</Text>
-//           <Button title="Cycle Format" onPress={cycleFormat} />
-//         </View>
-
-//         {errorMsg && <Text style={styles.errorTextDisplay}>{errorMsg}</Text>}
-
-//         <Text style={styles.label}>Default:</Text>
-//         <Barcode
-//           value={barcodeValue}
-//           format={barcodeFormat}
-//           onError={handleBarcodeError}
-//         />
-
-//         <Text style={styles.label}>Customized (CODE128):</Text>
-//         <Barcode
-//           value="CUSTOM-CODE-128"
-//           format={BarcodeFormat.CODE128}
-//           lineColor="blue"
-//           backgroundColor="#e0e0ff"
-//           height={80}
-//           width={1.5} // Bar width
-//           fontSize={16}
-//           textMargin={5}
-//           margin={20} // Margin around the SVG
-//           onError={handleBarcodeError}
-//           style={styles.customBarcodeStyle}
-//         />
-
-//         <Text style={styles.label}>No Text Value (EAN13):</Text>
-//         <Barcode
-//           value="590123412345" // Needs valid check digit for EAN13
-//           format={BarcodeFormat.EAN13}
-//           displayValue={false}
-//           onError={handleBarcodeError}
-//         />
-
-//         <Text style={styles.label}>Invalid Value Example (for EAN13):</Text>
-//         <Barcode
-//           value="INVALID" // This will likely cause an error for EAN13
-//           format={BarcodeFormat.EAN13}
-//           onError={handleBarcodeError}
-//         />
-//          <Text style={styles.label}>Empty Value:</Text>
-//         <Barcode
-//           value=""
-//           format={BarcodeFormat.CODE128}
-//           onError={handleBarcodeError}
-//         />
-//       </ScrollView>
-//     </SafeAreaView>
-//   );
-// }
-
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//     backgroundColor: "#f0f0f0",
-//   },
-//   scrollContent: {
-//     alignItems: "center",
-//     padding: 20,
-//   },
-//   title: {
-//     fontSize: 24,
-//     fontWeight: "bold",
-//     marginBottom: 20,
-//   },
-//   input: {
-//     height: 40,
-//     borderColor: "gray",
-//     borderWidth: 1,
-//     paddingHorizontal: 10,
-//     marginBottom: 20,
-//     width: "90%",
-//     backgroundColor: "white",
-//   },
-//   label: {
-//     fontSize: 16,
-//     fontWeight: "600",
-//     marginTop: 20,
-//     marginBottom: 8,
-//   },
-//   customBarcodeStyle: {
-//     borderWidth: 1,
-//     borderColor: "purple",
-//     padding: 5, // Padding for the View container, not the barcode margin
-//   },
-//   formatSelector: {
-//     flexDirection: "row",
-//     alignItems: "center",
-//     justifyContent: "space-between",
-//     width: "90%",
-//     marginBottom: 15,
-//   },
-//   errorTextDisplay: {
-//     color: 'red',
-//     marginVertical: 10,
-//   }
-// });
+export default MyScreen;

package/src/components/Wheel/Wheel.tsx

@@ -374,6 +374,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
             style={[styles.actionButton, actionButtonStyle]}
             onPress={handleSpin}
             title={spinButtonText}
+            disabled={spinning}
             textStyle={[styles.actionButtonText, actionButtonTextStyle]}
             {...actionButtonProps}
           />