related-ui-components 1.9.6 → 1.9.8

package/README.md

@@ -0,0 +1,200 @@
+# 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

@@ -0,0 +1,161 @@
+"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

package/lib/commonjs/app.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_vectorIcons","_index2","_reactNativeGestureHandler","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MyScreen","isFilterVisible","setIsFilterVisible","useState","theme","useTheme","handleApplyFilters","result","console","log","rewardsData","icon","jsx","Ionicons","name","size","color","primary","activeIcon","onPrimary","title","description","isActive","status","statusBackgroundColor","statusTextColor","helper","disabled","text","background","Fragment","children","GestureHandlerRootView","Popup","visible","onClose","ScratchCard","backgroundColor","textFontColor","textFontSize","textFont","width","height","gradient","colors","start","x","y","end","onScratched","alert","jsxs","ScratchCardContent","style","Text","fontSize","fontWeight","marginTop","_default","exports"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Badges/Badge.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Badge = void 0;
+var _index = require("../../theme/index.js");
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Badge props
+
+// Simple Badge component
+const Badge = ({
+  icon,
+  isActive = false,
+  size,
+  style,
+  activeStyle,
+  inactiveStyle,
+  activeIcon,
+  label,
+  labelStyle
+}) => {
+  const {
+    theme
+  } = (0, _index.useTheme)();
+  const styles = _reactNative.StyleSheet.create({
+    badge: {
+      borderRadius: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.secondary,
+      padding: 8
+    },
+    activeBadge: {
+      backgroundColor: theme.primary
+    },
+    label: {
+      fontSize: 12,
+      color: theme.text,
+      marginTop: 4,
+      textAlign: "center",
+      fontWeight: "500"
+    }
+  });
+  const badgeStyles = [styles.badge, size ? {
+    width: size,
+    height: size
+  } : {}, style, isActive ? [styles.activeBadge, activeStyle] : inactiveStyle];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      alignItems: "center"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: badgeStyles,
+      children: isActive && activeIcon ? activeIcon : icon
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, labelStyle],
+      children: label
+    })]
+  });
+};
+exports.Badge = Badge;
+var _default = exports.default = Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/commonjs/components/Badges/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_index","require","_react","_interopRequireDefault","_reactNative","_jsxRuntime","e","__esModule","default","Badge","icon","isActive","size","style","activeStyle","inactiveStyle","activeIcon","label","labelStyle","theme","useTheme","styles","StyleSheet","create","badge","borderRadius","justifyContent","alignItems","backgroundColor","secondary","padding","activeBadge","primary","fontSize","color","text","marginTop","textAlign","fontWeight","badgeStyles","width","height","jsxs","View","children","jsx","Text","exports","_default"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Badges/Badge.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAQsB,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtB;;AAiBA;AACO,MAAMG,KAA2B,GAAGA,CAAC;EAC1CC,IAAI;EACJC,QAAQ,GAAG,KAAK;EAChBC,IAAI;EACJC,KAAK;EACLC,WAAW;EACXC,aAAa;EACbC,UAAU;EACVC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAM;IAACC;EAAK,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC;EAE1B,MAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/BC,KAAK,EAAE;MACLC,YAAY,EAAE,EAAE;MAChBC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,eAAe,EAAET,KAAK,CAACU,SAAS;MAChCC,OAAO,EAAE;IACX,CAAC;IACDC,WAAW,EAAE;MACXH,eAAe,EAAET,KAAK,CAACa;IACzB,CAAC;IACDf,KAAK,EAAE;MACHgB,QAAQ,EAAE,EAAE;MACZC,KAAK,EAAEf,KAAK,CAACgB,IAAI;MACjBC,SAAS,EAAE,CAAC;MACZC,SAAS,EAAE,QAAQ;MACnBC,UAAU,EAAE;IACd;EACJ,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAG,CAClBlB,MAAM,CAACG,KAAK,EACZZ,IAAI,GAAG;IAAE4B,KAAK,EAAE5B,IAAI;IAAE6B,MAAM,EAAE7B;EAAK,CAAC,GAAG,CAAC,CAAC,EACzCC,KAAK,EACLF,QAAQ,GAAG,CAACU,MAAM,CAACU,WAAW,EAAEjB,WAAW,CAAC,GAAGC,aAAa,CAC7D;EAED,oBACE,IAAAV,WAAA,CAAAqC,IAAA,EAACtC,YAAA,CAAAuC,IAAI;IAAC9B,KAAK,EAAE;MAAEc,UAAU,EAAE;IAAS,CAAE;IAAAiB,QAAA,gBACpC,IAAAvC,WAAA,CAAAwC,GAAA,EAACzC,YAAA,CAAAuC,IAAI;MAAC9B,KAAK,EAAE0B,WAAY;MAAAK,QAAA,EACtBjC,QAAQ,IAAIK,UAAU,GAAGA,UAAU,GAAGN;IAAI,CACvC,CAAC,EACNO,KAAK,iBAAI,IAAAZ,WAAA,CAAAwC,GAAA,EAACzC,YAAA,CAAA0C,IAAI;MAACjC,KAAK,EAAE,CAACQ,MAAM,CAACJ,KAAK,EAAEC,UAAU,CAAE;MAAA0B,QAAA,EAAE3B;IAAK,CAAO,CAAC;EAAA,CAC7D,CAAC;AAEX,CAAC;AAAC8B,OAAA,CAAAtC,KAAA,GAAAA,KAAA;AAAA,IAAAuC,QAAA,GAAAD,OAAA,CAAAvC,OAAA,GAEaC,KAAK","ignoreList":[]}

package/lib/commonjs/components/Badges/README.md

@@ -0,0 +1,98 @@
+# Badge Component
+
+A customizable badge component for React Native applications that displays icons with optional labels, supporting both active and inactive states. Perfect for creating navigation tabs, feature highlights, or status indicators.
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Badge } from '@your-org/component-library';
+import { StarIcon } from 'your-icon-library';
+
+const MyBadgeExample = () => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Badge 
+        icon={<StarIcon size={24} color="#FFFFFF" />}
+        label="Favorite"
+        isActive={true}
+      />
+    </View>
+  );
+};
+
+export default MyBadgeExample;
+```
+
+## Props
+
+### Core Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `icon` | `React.ReactNode` | ✅ | - | Icon to display in the badge |
+| `activeIcon` | `React.ReactNode` | ❌ | - | Alternative icon to display when badge is active |
+| `isActive` | `boolean` | ❌ | `false` | Whether the badge is in active state |
+| `label` | `string` | ❌ | - | Text label for the badge |
+
+### Dimension Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `size` | `number` | ❌ | `60` | Size of the badge in pixels |
+
+### Styling Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `style` | `StyleProp<ViewStyle>` | ❌ | - | Custom style for the badge |
+| `activeStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is active |
+| `inactiveStyle` | `StyleProp<ViewStyle>` | ❌ | - | Additional style applied when badge is inactive |
+| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Custom style for the label text |
+
+## Advanced Examples
+
+### With Active and Inactive Icons
+
+```jsx
+<Badge 
+  icon={<StarOutlineIcon size={24} color="#FFFFFF" />}
+  activeIcon={<StarFilledIcon size={24} color="#FFFFFF" />}
+  isActive={isFavorite}
+  label="Favorite"
+  size={80}
+/>
+```
+
+### Custom Styling
+
+```jsx
+<Badge 
+  icon={<ProfileIcon size={30} color="#333333" />}
+  style={{ backgroundColor: '#F5F5F5', borderWidth: 1, borderColor: '#E0E0E0' }}
+  activeStyle={{ backgroundColor: '#4CAF50', borderColor: '#388E3C' }}
+  labelStyle={{ color: '#333333', fontSize: 14, fontWeight: 'bold' }}
+  label="Profile"
+  size={70}
+/>
+```
+
+### Without Label
+
+```jsx
+<Badge 
+  icon={<NotificationIcon size={24} color="#FFFFFF" />}
+  activeIcon={<NotificationActiveIcon size={24} color="#FFFFFF" />}
+  isActive={hasNotifications}
+  size={50}
+/>
+```
+
+
+### Theme Integration
+
+The Badge component automatically uses your application's theme through the `useTheme()` hook. Default styling includes:
+- Badge background color: Uses `theme.secondary` for inactive state
+- Active badge background color: Uses `theme.primary` for active state
+- Label text color: Uses `theme.text`