related-ui-components 1.9.0 → 1.9.2

package/src/app.tsx

@@ -1,127 +1,151 @@
-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";
+// // 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";
 
-const MyScreen = () => {
-  const [isFilterVisible, setIsFilterVisible] = useState(false);
+// export default function App() {
+//   const [barcodeValue, setBarcodeValue] = useState("123456789012");
+//   const [barcodeFormat, setBarcodeFormat] = useState<BarcodeFormat>(
+//     BarcodeFormat.EAN13,
+//   );
+//   const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
-  const { theme } = useTheme();
+//   const handleBarcodeError = (error: Error) => {
+//     console.error("Custom Barcode Error:", error.message);
+//     setErrorMsg(`Barcode Error: ${error.message}`);
+//   };
 
-  const handleApplyFilters = (result: FilterResult) => {
-    console.log("Filters applied:", result);
-    // Process filter results...
-  };
+//   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 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 (
-    <>
-      <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>
-    </>
-  );
-};
+//   return (
+//     <SafeAreaView style={styles.container}>
+//       <ScrollView contentContainerStyle={styles.scrollContent}>
+//         <Text style={styles.title}>Custom Barcode Generator</Text>
 
-export default MyScreen;
+//         <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,
+//   }
+// });

package/src/components/Banner/Banner.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   ViewStyle,
   TextStyle,
   ImageSourcePropType,
@@ -12,6 +11,7 @@ import {
 } from "react-native";
 import { Card, CardFooter } from "../Card";
 import { useTheme, ThemeType } from "../../theme";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 export interface BannerProps {
   backgroundImage: ImageSourcePropType;

package/src/components/Wheel/Wheel.tsx

@@ -9,7 +9,7 @@ import {
   ViewStyle,
   TextStyle,
 } from "react-native";
-import { Svg, Path, G, Text as SvgText } from "react-native-svg";
+import { Svg, Path, G, Text as SvgText, Circle } from "react-native-svg";
 import { AppButtonProps, Button } from "../Button";
 
 export interface SpinWheelItem {
@@ -79,6 +79,7 @@ interface SpinWheelProps {
   >;
 
   wheelBorderColor?: string; 
+  wheelBorderWidth?: number;
   wheelTextColor?: string;
   knobColor?: string;
 
@@ -104,6 +105,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   actionButtonStyle,
   actionButtonTextStyle,
   wheelBorderColor,
+  wheelBorderWidth,
   wheelTextColor = "#FFFFFF",
   actionButtonProps,
   centerSize
@@ -281,41 +283,46 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
         >
           <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
             <G>
-              {wheelPaths.map(
-                ({ path, item, textX, textY, angle }, index) => {
-                  return (
-                    <React.Fragment key={item.id}>
-                      <Path
-                        d={path}
-                        fill={
-                          item.color == "" || item.color == null
-                            ? colors[
-                                Math.floor(Math.random() * colors.length)
-                              ]
-                            : item.color
-                        }
-                        stroke="#000000"
-                        strokeWidth={1}
-                      />
-                      <SvgText
-                        x={textX}
-                        y={textY}
-                        fill={item.textColor || wheelTextColor}
-                        fontSize={wheelTextStyle?.fontSize || 14}
-                        fontWeight={
-                          (wheelTextStyle?.fontWeight as any) || "bold"
-                        }
-                        textAnchor="middle"
-                        alignmentBaseline="central"
-                        transform={`rotate(${angle + 180}, ${textX}, ${textY} )`}
-                      >
-                        {item.label}
-                      </SvgText>
-                    </React.Fragment>
-                  );
-                }
-              )}
+              {wheelPaths.map(({ path, item, textX, textY, angle }, index) => {
+                return (
+                  <React.Fragment key={item.id}>
+                    <Path
+                      d={path}
+                      fill={
+                        item.color == "" || item.color == null
+                          ? colors[Math.floor(Math.random() * colors.length)]
+                          : item.color
+                      }
+                      // stroke="#FA8072"
+                      // strokeWidth={1}
+                    />
+                    <SvgText
+                      x={textX}
+                      y={textY}
+                      fill={item.textColor || wheelTextColor}
+                      fontSize={wheelTextStyle?.fontSize || 14}
+                      fontWeight={(wheelTextStyle?.fontWeight as any) || "bold"}
+                      textAnchor="middle"
+                      alignmentBaseline="central"
+                      transform={`rotate(${angle + 180}, ${textX}, ${textY} )`}
+                    >
+                      {item.label}
+                    </SvgText>
+                  </React.Fragment>
+                );
+              })}
             </G>
+
+            {wheelBorderWidth && (
+              <Circle
+                cx={size / 2}
+                cy={size / 2}
+                r={size / 2 - wheelBorderWidth / 2}
+                stroke={wheelBorderColor}
+                strokeWidth={wheelBorderWidth}
+                fill="none"
+              />
+            )}
           </Svg>
         </Animated.View>
 
@@ -326,7 +333,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
             {
               width: actualCenterSize,
               height: actualCenterSize,
-              borderRadius: actualCenterSize / 2, 
+              borderRadius: actualCenterSize / 2,
               transform: [
                 { translateX: -actualCenterSize / 2 },
                 { translateY: -actualCenterSize / 2 },
@@ -337,7 +344,12 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
         />
 
         {/* The pointer is a triangle on top */}
-        <View style={styles.pointerPosition}>
+        <View
+          style={[
+            styles.pointerPosition,
+            wheelBorderWidth ? { top: wheelBorderWidth } : {},
+          ]}
+        >
           <View
             style={[
               styles.pointer,