related-ui-components 3.2.8 → 3.3.0

package/package.json

@@ -1,81 +1,81 @@
-{
-  "name": "related-ui-components",
-  "version": "3.2.8",
-  "main": "./src/index.ts",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "prepare": "bob build"
-  },
-  "peerDependencies": {
-    "@expo/vector-icons": ">=14.1.0",
-    "@gorhom/bottom-sheet": ">=5.1.6",
-    "@ptomasroos/react-native-multi-slider": ">=2.2.2",
-    "@react-native-community/slider": ">=4.5.6",
-    "@react-native-picker/picker": ">=2.11.1",
-    "@shopify/react-native-skia": ">=v2.0.0-next.4",
-    "country-telephone-data": ">=0.6.3",
-    "date-fns": ">=4.1.0",
-    "expo": "53.0.20",
-    "expo-blur": ">=14.1.5",
-    "expo-checkbox": ">=4.1.4",
-    "expo-clipboard": ">=7.1.4",
-    "expo-image": ">=2.4.0",
-    "expo-linear-gradient": ">=14.1.5",
-    "expo-status-bar": ">=2.2.3",
-    "react": "19.0.0",
-    "react-native": "0.79.5",
-    "react-native-calendars": ">=1.1312.0",
-    "react-native-gesture-handler": ">=2.24.0",
-    "react-native-picker-select": ">=9.3.1",
-    "react-native-qrcode-svg": ">=6.3.15",
-    "react-native-safe-area-context": ">=5.4.0",
-    "react-native-svg": ">=15.11.2",
-    "react-native-color-matrix-image-filters": ">=7.0.2",
-    "react-native-toast-message": ">=2.3.3",
-    "react-native-reanimated": ">=3.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@types/country-telephone-data": "^0.6.3",
-    "@types/react": "~19.0.10",
-    "react-native-builder-bob": "^0.40.11",
-    "typescript": "~5.8.3"
-  },
-  "private": false,
-  "exports": {
-    ".": {
-      "source": "./src\\index.ts",
-      "types": "./lib\\typescript\\src\\index.d.ts",
-      "default": "./lib\\module\\index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "types": "./lib\\typescript\\src\\index.d.ts",
-  "files": [
-    "src",
-    "lib",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__"
-  ],
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      "typescript"
-    ]
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ]
-}
+{
+  "name": "related-ui-components",
+  "version": "3.3.0",
+  "main": "lib/module/index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "prepare": "bob build"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": ">=14.1.0",
+    "@gorhom/bottom-sheet": ">=5.1.6",
+    "@ptomasroos/react-native-multi-slider": ">=2.2.2",
+    "@react-native-community/slider": ">=4.5.6",
+    "@react-native-picker/picker": ">=2.11.1",
+    "@shopify/react-native-skia": ">=v2.0.0-next.4",
+    "country-telephone-data": ">=0.6.3",
+    "date-fns": ">=4.1.0",
+    "expo": "53.0.20",
+    "expo-blur": ">=14.1.5",
+    "expo-checkbox": ">=4.1.4",
+    "expo-clipboard": ">=7.1.4",
+    "expo-image": ">=2.4.0",
+    "expo-linear-gradient": ">=14.1.5",
+    "expo-status-bar": ">=2.2.3",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-calendars": ">=1.1312.0",
+    "react-native-gesture-handler": ">=2.24.0",
+    "react-native-picker-select": ">=9.3.1",
+    "react-native-qrcode-svg": ">=6.3.15",
+    "react-native-safe-area-context": ">=5.4.0",
+    "react-native-svg": ">=15.11.2",
+    "react-native-color-matrix-image-filters": ">=7.0.2",
+    "react-native-toast-message": ">=2.3.3",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/country-telephone-data": "^0.6.3",
+    "@types/react": "~19.0.10",
+    "react-native-builder-bob": "^0.40.11",
+    "typescript": "~5.8.3"
+  },
+  "private": false,
+  "exports": {
+    ".": {
+      "source": "./src\\index.ts",
+      "types": "./lib\\typescript\\src\\index.d.ts",
+      "default": "./lib\\module\\index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./lib\\typescript\\src\\index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
+}

package/src/components/Card/templates/SelaDealCard.tsx

@@ -15,7 +15,6 @@ import Card from "../Card";
 import { useTheme } from "../../../theme/ThemeContext"; 
 import { ThemeType } from "../../../theme";
 import { LockOverlay } from "../../LockOverlay";
-import { BlurView } from "expo-blur";
 import { ThemedText as Text } from "../../ui";
 
 interface SelaDealCardProps {
@@ -219,16 +218,6 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
                 <Text style={descriptionTextStyle}>{description}</Text>
               )}
             </View>
-            {price && priceContainerBlur && (
-              <BlurView
-                experimentalBlurMethod="dimezisBlurView"
-                intensity={priceContainerBlur}
-                tint="dark"
-                style={finalPriceContainerStyle}
-              >
-                <Text style={finalPriceStyle}>{price}</Text>
-              </BlurView>
-            )}
             {price && !priceContainerBlur && (
               <View
                 style={[

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { I18nManager, StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
@@ -13,6 +13,8 @@ const THUMB_SIZE = 28;
 const RAIL_HEIGHT = 6;
 const LABEL_HEIGHT = 26;
 
+type ScaleType = "linear" | "logarithmic" | "percentile";
+
 interface RangeSliderProps {
   min: number;
   max: number;
@@ -21,8 +23,60 @@ interface RangeSliderProps {
   initialMinValue: number;
   initialMaxValue: number;
   onValueChange: (values: { min: number; max: number }) => void;
+  theme?: ThemeType;
+  scale?: ScaleType;
+  /**
+   * For percentile scale: array of all values in your dataset
+   * The slider will distribute positions based on data density
+   */
+  dataPoints?: number[];
+}
+
+/**
+ * Creates percentile breakpoints from data
+ * Returns sorted unique values that represent the distribution
+ */
+function createPercentileBreakpoints(data: number[]): number[] {
+  const sorted = [...new Set(data)].sort((a, b) => a - b);
+
+  // If small dataset, use all unique values
+  if (sorted.length <= 100) {
+    return sorted;
+  }
+
+  // For larger datasets, sample at percentile intervals
+  const breakpoints: number[] = [];
+  const numBreakpoints = 100;
+
+  for (let i = 0; i <= numBreakpoints; i++) {
+    const index = Math.floor((i / numBreakpoints) * (sorted.length - 1));
+    const value = sorted[index];
+    if (breakpoints[breakpoints.length - 1] !== value) {
+      breakpoints.push(value);
+    }
+  }
+
+  return breakpoints;
+}
+
+/**
+ * Binary search to find position in breakpoints
+ */
+function findBreakpointIndex(breakpoints: number[], value: number): number {
+  "worklet";
+  let left = 0;
+  let right = breakpoints.length - 1;
 
-  theme?: ThemeType
+  while (left < right) {
+    const mid = Math.floor((left + right) / 2);
+    if (breakpoints[mid] < value) {
+      left = mid + 1;
+    } else {
+      right = mid;
+    }
+  }
+
+  return left;
 }
 
 const RangeSlider: React.FC<RangeSliderProps> = ({
@@ -33,45 +87,101 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   initialMinValue,
   initialMaxValue,
   onValueChange,
-  theme
+  theme,
+  scale = "linear",
+  dataPoints,
 }) => {
-  const { theme: defaultTheme} = useTheme();
-
+  const { theme: defaultTheme } = useTheme();
   const currTheme = theme || defaultTheme;
-
   const styles = getStyles(currTheme);
-
   const isRTL = I18nManager.isRTL;
 
-  // State for label text values, passed down to the SliderLabels component
   const [leftLabel, setLeftLabel] = useState(initialMinValue.toLocaleString());
   const [rightLabel, setRightLabel] = useState(
     initialMaxValue.toLocaleString()
   );
 
+  // Pre-compute breakpoints for percentile scale
+  const breakpoints = useMemo(() => {
+    if (scale === "percentile" && dataPoints?.length) {
+      return createPercentileBreakpoints(dataPoints);
+    }
+    return [];
+  }, [scale, dataPoints]);
+
+  const safeMin = scale === "logarithmic" ? Math.max(min, 0.001) : min;
+
   const valueToPosition = useCallback(
     (value: number) => {
       "worklet";
-      // 3. Invert position calculation for RTL
-      const percentage = (value - min) / (max - min);
-      return isRTL
-        ? (1 - percentage) * sliderWidth
-        : percentage * sliderWidth;
+      let percentage: number;
+
+      if (scale === "percentile" && breakpoints.length > 1) {
+        // Find where this value falls in the breakpoints
+        const index = findBreakpointIndex(breakpoints, value);
+
+        if (index === 0) {
+          percentage = 0;
+        } else if (index >= breakpoints.length - 1) {
+          percentage = 1;
+        } else {
+          // Interpolate between breakpoints
+          const lowerVal = breakpoints[index - 1];
+          const upperVal = breakpoints[index];
+          const lowerPct = (index - 1) / (breakpoints.length - 1);
+          const upperPct = index / (breakpoints.length - 1);
+
+          if (upperVal === lowerVal) {
+            percentage = lowerPct;
+          } else {
+            const ratio = (value - lowerVal) / (upperVal - lowerVal);
+            percentage = lowerPct + ratio * (upperPct - lowerPct);
+          }
+        }
+      } else if (scale === "logarithmic") {
+        const logMin = Math.log(safeMin);
+        const logMax = Math.log(max);
+        const logValue = Math.log(Math.max(value, safeMin));
+        percentage = (logValue - logMin) / (logMax - logMin);
+      } else {
+        percentage = (value - min) / (max - min);
+      }
+
+      return isRTL ? (1 - percentage) * sliderWidth : percentage * sliderWidth;
     },
-    [min, max, sliderWidth, isRTL]
+    [min, max, safeMin, sliderWidth, isRTL, scale, breakpoints]
   );
 
   const positionToValue = useCallback(
     (position: number) => {
       "worklet";
-      // 4. Invert value calculation for RTL
-      const percentage = position / sliderWidth;
-      const rawValue = isRTL
-        ? (1 - percentage) * (max - min) + min
-        : percentage * (max - min) + min;
+      const percentage = isRTL
+        ? 1 - position / sliderWidth
+        : position / sliderWidth;
+
+      let rawValue: number;
+
+      if (scale === "percentile" && breakpoints.length > 1) {
+        // Map percentage to breakpoint index
+        const exactIndex = percentage * (breakpoints.length - 1);
+        const lowerIndex = Math.floor(exactIndex);
+        const upperIndex = Math.min(lowerIndex + 1, breakpoints.length - 1);
+        const ratio = exactIndex - lowerIndex;
+
+        rawValue =
+          breakpoints[lowerIndex] +
+          ratio * (breakpoints[upperIndex] - breakpoints[lowerIndex]);
+      } else if (scale === "logarithmic") {
+        const logMin = Math.log(safeMin);
+        const logMax = Math.log(max);
+        rawValue = Math.exp(logMin + percentage * (logMax - logMin));
+      } else {
+        rawValue = percentage * (max - min) + min;
+      }
+
       return Math.round(rawValue / step) * step;
     },
-    [min, max, step, sliderWidth, isRTL]
+    [min, max, safeMin, step, sliderWidth, isRTL, scale, breakpoints]
   );
 
   const leftPosition = useSharedValue(valueToPosition(initialMinValue));
@@ -95,23 +205,20 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       if (activeThumb.value === null) return;
       const newPos = context.value.x + e.translationX;
 
-      // 5. Adjust clamping logic for RTL
       if (activeThumb.value === "left") {
         const lowerBound = isRTL ? rightPosition.value + THUMB_SIZE : 0;
-        const upperBound = isRTL ? sliderWidth : rightPosition.value - THUMB_SIZE;
-        const clampedPos = Math.max(
-          Math.min(newPos, upperBound),
-          lowerBound
-        );
+        const upperBound = isRTL
+          ? sliderWidth
+          : rightPosition.value - THUMB_SIZE;
+        const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
         leftPosition.value = clampedPos;
         runOnJS(setLeftLabel)(positionToValue(clampedPos).toLocaleString());
       } else {
         const lowerBound = isRTL ? 0 : leftPosition.value + THUMB_SIZE;
-        const upperBound = isRTL ? leftPosition.value - THUMB_SIZE : sliderWidth;
-        const clampedPos = Math.max(
-          Math.min(newPos, upperBound),
-          lowerBound
-        );
+        const upperBound = isRTL
+          ? leftPosition.value - THUMB_SIZE
+          : sliderWidth;
+        const clampedPos = Math.max(Math.min(newPos, upperBound), lowerBound);
         rightPosition.value = clampedPos;
         runOnJS(setRightLabel)(positionToValue(clampedPos).toLocaleString());
       }
@@ -124,9 +231,8 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       activeThumb.value = null;
     });
 
-
   const animatedLeftThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: leftPosition.value - (isRTL ? THUMB_SIZE : 0)}],
+    transform: [{ translateX: leftPosition.value - (isRTL ? THUMB_SIZE : 0) }],
   }));
 
   const animatedRightThumbStyle = useAnimatedStyle(() => ({
@@ -134,7 +240,6 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
   }));
 
   const animatedActiveRailStyle = useAnimatedStyle(() => {
-    // 6. Use Math.min and Math.max to correctly draw the active rail in both LTR and RTL
     const start = Math.min(leftPosition.value, rightPosition.value);
     const end = Math.max(leftPosition.value, rightPosition.value);
     return {
@@ -182,7 +287,7 @@ const getStyles = (theme: ThemeType) =>
       height: LABEL_HEIGHT + THUMB_SIZE,
       justifyContent: "center",
       marginTop: LABEL_HEIGHT,
-      direction: "ltr"
+      direction: "ltr",
     },
     railContainer: {
       justifyContent: "center",
@@ -215,4 +320,4 @@ const getStyles = (theme: ThemeType) =>
     },
   });
 
-export default RangeSlider;
+export default RangeSlider;