related-ui-components 1.9.5 → 1.9.6

package/package.json

@@ -1,91 +1,52 @@
 {
   "name": "related-ui-components",
-  "main": "./src/index.ts",
-  "version": "1.9.5",
+  "version": "1.9.6",
+  "main": "./lib\\module\\index.js",
   "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",
+    "@expo/vector-icons": "^14.1.0",
+    "@gorhom/bottom-sheet": "^5.1.4",
     "@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",
+    "@react-native-community/slider": "4.5.6",
+    "@react-native-picker/picker": "2.11.0",
+    "@shopify/react-native-skia": "v2.0.0-next.4",
     "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",
+    "expo": "~53.0.9",
+    "expo-checkbox": "~4.1.4",
+    "expo-clipboard": "~7.1.4",
+    "expo-image": "~2.1.7",
+    "expo-linear-gradient": "~14.1.4",
+    "expo-status-bar": "~2.2.3",
+    "react": "19.0.0",
+    "react-native": "0.79.2",
+    "react-native-calendars": "^1.1312.0",
+    "react-native-gesture-handler": "~2.24.0",
     "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",
-    "expo-image": "~2.0.7"
+    "react-native-reanimated": "~3.17.4",
+    "react-native-svg": "15.11.2"
   },
   "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"
+    "@types/react": "~19.0.10",
+    "react-native-builder-bob": "^0.40.11",
+    "typescript": "~5.8.3"
   },
   "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"
-      }
-    }
+      "source": "./src\\index.ts",
+      "types": "./lib\\typescript\\index.d.ts",
+      "default": "./lib\\module\\index.js"
+    },
+    "./package.json": "./package.json"
   },
+  "types": "./lib\\typescript\\index.d.ts",
   "files": [
     "src",
     "lib",
@@ -97,24 +58,13 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      [
-        "commonjs",
-        {
-          "esm": true
-        }
-      ],
       [
         "module",
         {
           "esm": true
         }
       ],
-      [
-        "typescript",
-        {
-          "esm": true
-        }
-      ]
+      "typescript"
     ]
   },
   "eslintIgnore": [

package/src/app.tsx

@@ -99,7 +99,7 @@ const MyScreen = () => {
           text="Scratch to reveal your prize!"
           textFontColor="#FFFFFF"
           textFontSize={18}
-          textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
+          // textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
           width={300}
           height={150}
           gradient={{

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -1,4 +1,4 @@
-import { ThemeType, useTheme } from "@/theme"; // Adjust path if needed
+import { ThemeType, useTheme } from "../../theme"; // Adjust path if needed
 import React, { useCallback, useMemo, useState, useEffect } from "react";
 import {
   View,
@@ -313,7 +313,6 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
                 onDayPress={handleDayPress}
                 markedDates={markedDates}
                 markingType={"period"}
-                theme={calendarTheme}
                 firstDay={1}
                 monthFormat={"MMM yyyy"}
               />

package/src/components/Popup/README.md

@@ -13,7 +13,7 @@ The `Popup` is a versatile modal component designed for displaying important inf
 
 ```tsx
 import Popup from "@/components/Popup";
-import { useTheme } from "@/theme";
+import { useTheme } from "../../theme";
 
 const MyComponent = () => {
   const [isVisible, setIsVisible] = useState(false);

package/src/components/Suggestions/SuggestionList.tsx

@@ -10,7 +10,7 @@ import {
   TextStyle,
   ListRenderItemInfo, // Import this type
 } from "react-native";
-import { ThemeType, useTheme } from "@/theme"; // Adjust import path
+import { ThemeType, useTheme } from "../../theme"; // Adjust import path
 
 interface SuggestionListProps<T> {
   data: T[];

package/src/components/TravelBooking/CarRentalForm.tsx

@@ -1,4 +1,4 @@
-import { ThemeType, useTheme } from "@/theme";
+import { ThemeType, useTheme } from "../../theme";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import {
   View,

package/src/components/TravelBooking/FlightForm.tsx

@@ -1,4 +1,4 @@
-import { ThemeType, useTheme } from "@/theme";
+import { ThemeType, useTheme } from "../../theme";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import {
   View,

package/src/components/TravelBooking/FlightSummary.tsx

@@ -1,4 +1,4 @@
-import { ThemeType, useTheme } from "@/theme";
+import { ThemeType, useTheme } from "../../theme";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   StyleProp,

package/src/components/TravelBooking/HotelForm.tsx

@@ -1,4 +1,4 @@
-import { ThemeType, useTheme } from "@/theme";
+import { ThemeType, useTheme } from "../../theme";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import {
   View,

package/src/components/TravelBooking/HotelSummary.tsx

@@ -1,4 +1,4 @@
-import { ThemeType, useTheme } from "@/theme";
+import { ThemeType, useTheme } from "../../theme";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   StyleProp,

package/src/components/TravelBooking/README.md

@@ -9,7 +9,7 @@ The `TravelBooking` component is a comprehensive travel booking solution that pr
 
 ```tsx
 import { TravelBooking } from "@/components/TravelBooking";
-import { useTheme } from "@/theme";
+import { useTheme } from "../../theme";
 
 const MyBookingScreen = () => {
   const { theme } = useTheme();
@@ -257,7 +257,7 @@ interface RoomState {
 
 ```tsx
 import { TravelBooking } from "@/components/TravelBooking";
-import { useTheme } from "@/theme";
+import { useTheme } from "../../theme";
 import { Ionicons } from "@expo/vector-icons";
 import { useState } from "react";
 
@@ -361,7 +361,7 @@ The SummaryBar component allows users to view and modify their selections withou
 
 ```tsx
 import { SummaryBar } from "@/components/TravelBooking";
-import { useTheme } from "@/theme";
+import { useTheme } from "../../theme";
 
 const SummaryBarExample = () => {
   const { theme } = useTheme();

package/src/components/TravelBooking/SummaryBar.tsx

@@ -23,7 +23,7 @@ import HotelSummary, {
   HotelSummaryProps as HotelChildProps,
   HotelSummaryProps,
 } from "./HotelSummary";
-import { ThemeType, useTheme } from "@/theme";
+import { ThemeType, useTheme } from "../../theme";
 import { Ionicons } from "@expo/vector-icons";
 
 if (

package/src/components/TravelBooking/TabSelector.tsx

@@ -1,4 +1,4 @@
-import { ThemeType, useTheme } from "@/theme"; // Adjust import path
+import { ThemeType, useTheme } from "../../theme"; // Adjust import path
 import React, { useCallback, useMemo, useState } from "react";
 import {
   View,

package/src/components/TravelBooking/TravelBooking.tsx

@@ -8,7 +8,7 @@ import CarRentalForm, {
   CarRentalFormProps,
   mockCarSuggestions,
 } from "./CarRentalForm"; // Adjust import path
-import { ThemeType, useTheme } from "@/theme"; // Adjust import path
+import { ThemeType, useTheme } from "../../theme"; // Adjust import path
 import SummaryBar, {
   SelectionCallbackDataType,
   SummaryBarProps,

package/src/components/UnlockRewards/README.md

@@ -11,7 +11,7 @@ The `UnlockRewards` is a comprehensive component designed for displaying user re
 
 ```tsx
 import UnlockRewards from "@/components/UnlockRewards/UnlockRewards";
-import { useTheme } from "@/theme";
+import { useTheme } from "../../theme";
 import { Ionicons } from "@expo/vector-icons";
 
 const MyComponent = () => {

package/README.md

@@ -1,200 +0,0 @@
-# Related RN Component Library
-
-## Introduction
-
-Internal React Native component library designed to streamline development across all company mobile applications. This library implements our design system with ready-to-use, customizable components that maintain consistency while accelerating development.
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Components](#components)
-- [Theming](#theming)
-
-## Installation
-
-### Prerequisites
-
-- React Native ≥ 0.66.0
-- React ≥ 17.0.2
-- Node.js ≥ 14.0.0
-
-### Setup
-
-```bash
-# Using yarn
-yarn add @related/ui-components
-
-# Using npm
-npm install @related/ui-components
-```
-## Components
-
-Our component library includes a comprehensive set of pre-built UI components designed for React Native applications. Each component is fully documented with examples, props, and customization options.
-
-| Component | Description |
-|-----------|-------------|
-| [Badges](./src/components/Badges/README.md) | Reward badges |
-| [Banner](./src/components/Banner/README.md) | Advertisement banner with multiple themes |
-| [BrandIcon](./src/components/BrandIcon/README.md) | Display brand-specific icons with consistent styling. |
-| [Card](./src/components/Card/templates/README.md) | Container component for grouping related content with multiple themes. |
-| [CloseIcon](./src/components/CloseIcon/README.md) | Standard close button for modals, popups, and other dismissible elements. |
-| [Filters](./src/components/Filters/README.md) | Interactive filtering components for data lists and collections. |
-| [Input](./src/components/Input/README.md) | Text input components with validation and styling options. |
-| [LockOverlay](./src/components/LockOverlay/README.md) | Overlay component to indicate locked content or functionality. |
-| [Popup](./src/components/Popup/README.md) | Modal dialog components for alerts, confirmations, and user interactions. |
-| [ProgressBar](./src/components/ProgressBar/README.md) | Visual indicators for progress tracking. |
-| [RedemptionOption](./src/components/RedemptionOption/README.md) | Components for displaying and selecting redemption options. |
-| [ScratchCard](./src/components/ScratchCard/README.md) | Interactive scratch card component for revealing hidden content. |
-| [UnlockRewards](./src/components/UnlockRewards/README.md) | Components for displaying and interacting with reward unlocking functionality. |
-| [Wheel](./src/components/Wheel/README.md) | Spin the wheel component |
-
-## Theming
-
-Our component library supports a flexible theming system through the `ThemeProvider`. The system automatically detects and applies the user's system color preference (light or dark mode) while allowing for custom theme overrides.
-
-### Theme Structure
-
-Themes are defined using the `ThemeType` interface which includes colors for:
-
-- Core UI elements (background, surface, primary, secondary, etc.)
-- Text and icons
-- Borders and dividers
-- UI states
-- Form-specific elements
-
-### Using the Theme Provider
-
-Wrap your application with the `ThemeProvider` component:
-
-```tsx
-import { ThemeProvider } from '@related/ui-components';
-
-export default function App() {
-  return (
-    <ThemeProvider>
-      {/* Your application */}
-    </ThemeProvider>
-  );
-}
-```
-
-### Customizing Themes
-
-You can customize the light and dark themes by providing `customLightTheme` and/or `customDarkTheme` props:
-
-```tsx
-import { ThemeProvider, ThemeType } from '@related/ui-components';
-
-// Create custom theme overrides
-const customLightTheme: Partial<ThemeType> = {
-  primary: '#0066CC',
-  secondary: '#FF6B00',
-  // Override any other properties as needed
-};
-
-const customDarkTheme: Partial<ThemeType> = {
-  primary: '#4D94FF',
-  secondary: '#FF9E4D',
-  // Override any other properties as needed
-};
-
-export default function App() {
-  return (
-    <ThemeProvider 
-      customLightTheme={customLightTheme}
-      customDarkTheme={customDarkTheme}
-    >
-      {/* Your application */}
-    </ThemeProvider>
-  );
-}
-```
-
-### Accessing Theme in Components
-
-Use the `useTheme` hook to access the current theme within your components:
-
-```tsx
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { useTheme } from '@related/ui-components';
-
-const MyComponent = () => {
-  const theme = useTheme();
-  
-  return (
-    <View style={[styles.container, { backgroundColor: theme.background }]}>
-      <Text style={{ color: theme.text }}>
-        Themed Component
-      </Text>
-      <View style={[styles.card, { 
-        backgroundColor: theme.surface,
-        borderColor: theme.border 
-      }]}>
-        <Text style={{ color: theme.text }}>
-          This card uses theme colors
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-  card: {
-    borderWidth: 1,
-    borderRadius: 8,
-    padding: 16,
-    marginTop: 8,
-  },
-});
-
-export default MyComponent;
-```
-
-### System Theme Detection
-
-The `ThemeProvider` automatically detects the user's system color scheme preference using React Native's `useColorScheme` hook and applies the appropriate theme. No additional configuration is required for this behavior.
-
-### Available Theme Properties
-
-The full list of available theme properties can be found in the `ThemeType` interface:
-
-```ts
-interface ThemeType {
-  // Core
-  background: string;    // Main screen background
-  surface: string;       // Background for components like cards, dialogs, sheets
-  primary: string;       // Main accent color for interactive elements
-  secondary: string;     // Secondary accent color
-  error: string;         // Error states, destructive actions
-  success: string;       // Success states
-  warning: string;       // Warning states
-  info: string;          // Informational states
-
-  // Text & Icons
-  text: string;          // Default text color
-  onPrimary: string;     // Text/icon color on primary background
-  onSecondary: string;   // Text/icon color on secondary background
-  onError: string;       // Text/icon color on error background
-  onBackground: string;  // Text/icon color explicitly for background
-  onSurface: string;     // Text/icon color explicitly for surface
-
-  // Borders & Dividers
-  border: string;        // Borders for inputs, cards, etc.
-  divider: string;       // Separators, lines
-
-  // UI States
-  disabled: string;      // Disabled state elements
-
-  // Form Specific
-  inputBackground: string;    // Background of text inputs
-  inputText: string;          // Color of text entered into inputs
-  labelText: string;          // Color of labels for inputs
-  placeholderText: string;    // Color of placeholder text in inputs
-  helper: string;             // Helper text below inputs
-}
-```

package/lib/commonjs/app.js

@@ -1,161 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("./components/index.js");
-var _vectorIcons = require("@expo/vector-icons");
-var _index2 = require("./theme/index.js");
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const MyScreen = () => {
-  const [isFilterVisible, setIsFilterVisible] = (0, _react.useState)(false);
-  const {
-    theme
-  } = (0, _index2.useTheme)();
-  const handleApplyFilters = result => {
-    console.log("Filters applied:", result);
-    // Process filter results...
-  };
-  const rewardsData = [{
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: "briefcase-outline",
-      size: 30,
-      color: theme.primary
-    }),
-    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: "heart-outline",
-      size: 30,
-      color: theme.primary
-    }),
-    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: "airplane-outline",
-      size: 24,
-      color: theme.helper
-    }),
-    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: "school-outline",
-      size: 24,
-      color: theme.helper
-    }),
-    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-      name: "settings-outline",
-      size: 24,
-      color: theme.helper
-    }),
-    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Popup, {
-        visible: true,
-        onClose: () => {},
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.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!"),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.ScratchCardContent, {
-            style: {
-              backgroundColor: "#FFD700"
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: {
-                fontSize: 24,
-                fontWeight: "bold",
-                color: "#000"
-              },
-              children: "50% OFF COUPON"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: {
-                marginTop: 8,
-                color: "#333"
-              },
-              children: "Use code: SCRATCH50"
-            })]
-          })
-        })
-      })
-    })
-  });
-};
-var _default = exports.default = MyScreen;
-//# sourceMappingURL=app.js.map