@opndev/react-native-events 0.0.10

package/lib/components/tile.jsx

@@ -0,0 +1,44 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import TileBase from './tile-base';
+
+const defaultStyle = StyleSheet.create({
+  background: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});
+
+/**
+ * Plain tile with a solid background color.
+ *
+ * @param {object} props
+ * @param {object} TextComponent
+ * @param {string} [props.backgroundColor]
+ */
+export default function Tile({
+  backgroundColor,
+  TextComponent,
+  ...props
+}) {
+  const background = backgroundColor ? (
+    <View
+      style={[
+        defaultStyle.background,
+        { backgroundColor },
+      ]}
+    />
+  ) : null;
+
+  return (
+    <TileBase
+      {...props}
+      background={background}
+      TextComponent={TextComponent}
+    />
+  );
+}

package/lib/components.js

@@ -0,0 +1,15 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+export { default as ParallaxScrollView }
+  from './components/parallax-scroll-view.jsx';
+
+export { default as HeroScreen } from './components/hero-screen.jsx';
+export { default as TileBase } from './components/tile-base.jsx';
+export { default as Tile } from './components/tile.jsx';
+export { default as GradientTile } from './components/gradient-tile.jsx';
+export { default as QRCodeForm } from './components/qr-code-form.jsx';
+
+export { openUrl, openApp, openExternal } from './utils/launch.js';
+

package/lib/hero-screen-registery.js

@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React from 'react';
+
+import HeroScreen from './components/hero-screen';
+import Tile from './components/tile';
+
+export function createScreens({
+  TextComponent,
+  CategoryTextComponent,
+} = {}) {
+  return {
+    HeroScreen: (props) => (
+      <HeroScreen {...props} />
+    ),
+
+    Tile: (props) => (
+      <Tile
+        {...props}
+        TextComponent={TextComponent}
+      />
+    ),
+  };
+}

package/lib/index.js

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+const VERSION = "0.0.10";
+
+// TODO: @opndev/util?
+export { formatPrice } from './utils/format-price.js';
+export { mixHexColors, contrastColor  } from './utils/colors.js';
+export { pickDailyImage, pickRandomImage  } from './utils/header-picker.js';

package/lib/notifications/fcm.js

@@ -0,0 +1,63 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import messaging from '@react-native-firebase/messaging';
+import { Platform, Linking } from 'react-native';
+
+export async function getNotificationPermissions() {
+  const status = await messaging().requestPermission();
+
+  return status === messaging.AuthorizationStatus.AUTHORIZED ||
+    status === messaging.AuthorizationStatus.PROVISIONAL;
+}
+
+export async function hasNotificationPermissions() {
+  const status = await messaging().hasPermission();
+
+  return status === messaging.AuthorizationStatus.AUTHORIZED ||
+    status === messaging.AuthorizationStatus.PROVISIONAL;
+}
+
+export async function hasConfiguredNotificationPermission() {
+  const status = await messaging().hasPermission();
+
+  return status !== messaging.AuthorizationStatus.NOT_DETERMINED;
+}
+
+/**
+ * Return the Firebase/FCM push token.
+ *
+ * @returns {Promise<string|null>}
+ */
+export async function getPushToken() {
+  if (!(await hasNotificationPermissions())) return null;
+
+  return await messaging().getToken();
+}
+
+/**
+ * Register this device for push notifications.
+ *
+ * @param {string} token Firebase/FCM token.
+ * @returns {Promise<void>}
+ */
+export async function registerPushToken(endpoint, token, data = {}) {
+  if (!(await hasNotificationPermissions())) return;
+
+  await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      token,
+      platform: Platform.OS,
+      ...data,
+    }),
+  });
+}
+
+export async function changeNotificationSettings() {
+  return await Linking.openSettings();
+}

package/lib/notifications.js

@@ -0,0 +1,74 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import * as Notifications from 'expo-notifications';
+import { Platform, Linking } from 'react-native';
+import Constants from 'expo-constants';
+
+/**
+ * Verify users have push notifications enabled
+ *
+ * @returns {Promise<string|null>}
+ */
+
+export async function getNotificationPermissions() {
+  const perms = await Notifications.requestPermissionsAsync();
+  return perms.granted;
+}
+
+export async function hasNotificationPermissions() {
+  const perms = await Notifications.getPermissionsAsync();
+  return perms.granted;
+}
+
+export async function hasConfiguredNotificationPermission() {
+  const perms = await Notifications.getPermissionsAsync();
+  return perms.status !== 'undetermined';
+}
+
+/**
+ * Return the Expo push token.
+ * Callers must verify via getNotificationPermissions():
+ *
+ * @returns {Promise<string|null>}
+ */
+export async function getPushToken(id = null) {
+
+  if (!(await hasNotificationPermissions())) return;
+
+  const projectId = id ?? Constants.expoConfig?.extra?.eas?.projectId ??
+    Constants.easConfig?.projectId;
+
+  if (projectId === null) return;
+
+  const token = await Notifications.getExpoPushTokenAsync({projectId});
+  return token.data;
+}
+
+/**
+ * Register this device for push notifications.
+ *
+ * @param {string} token Expo push token.
+ * @returns {Promise<void>}
+ */
+export async function registerPushToken(endpoint, token, data = {}) {
+
+  if (!(await hasNotificationPermissions())) return;
+
+  await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      token,
+      platform: Platform.OS,
+      ...data
+    }),
+  });
+}
+
+export async function changeNotificationSettings() {
+  return await Linking.openSettings();
+}

package/lib/screen-registery.js

@@ -0,0 +1,68 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React from 'react';
+
+import HeroScreen from './components/hero-screen';
+import Tile from './components/tile';
+
+import FoodMenuScreen from './screens/food-menu-screen';
+import FoodVendorScreen from './screens/food-vendor-screen';
+import NewsItemScreen from './screens/news-item-screen';
+import NewsListScreen from './screens/news-list-screen';
+import QRCodeScreen from './screens/qr-code-screen';
+
+export function createScreens({
+  TextComponent,
+  CategoryTextComponent,
+} = {}) {
+  return {
+    HeroScreen: (props) => (
+      <HeroScreen {...props} />
+    ),
+
+    FoodMenuScreen: (props) => (
+      <FoodMenuScreen
+        {...props}
+        TextComponent={TextComponent}
+        CategoryTextComponent={CategoryTextComponent}
+      />
+    ),
+
+    FoodVendorScreen: (props) => (
+      <FoodVendorScreen
+        {...props}
+        TextComponent={TextComponent}
+      />
+    ),
+
+    QRCodeScreen: (props) => (
+      <QRCodeScreen
+        {...props}
+        TextComponent={TextComponent}
+      />
+    ),
+
+    NewsListScreen: (props) => (
+      <NewsListScreen
+        {...props}
+        TextComponent={TextComponent}
+      />
+    ),
+
+    NewsItemScreen: (props) => (
+      <NewsItemScreen
+        {...props}
+        TextComponent={TextComponent}
+      />
+    ),
+
+    Tile: (props) => (
+      <Tile
+        {...props}
+        TextComponent={TextComponent}
+      />
+    ),
+  };
+}

package/lib/screens/food-menu-screen.jsx

@@ -0,0 +1,139 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import { formatPrice } from '../utils/format-price';
+
+const defaultStyle = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  categoryTile: {
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 24,
+  },
+  categoryLabel: {
+    fontSize: 20,
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  itemRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 10,
+    marginBottom: 8,
+  },
+  item: {
+    flex: 1,
+    fontSize: 16,
+    marginRight: 8,
+  },
+  price: {
+    flexShrink: 0,
+    fontSize: 16,
+  },
+});
+
+const defaultColors = {
+  categoryTileBackgroundColor: '#F2F2F2',
+  categoryLabelColor: '#000000',
+  itemRowBackgroundColor: '#DDDDDD',
+  itemColor: '#000000',
+};
+
+/**
+ * FoodMenuScreen
+ *
+ * Renders a vendor menu.
+ *
+ * @param {object} props
+ * @param {object} props.menu
+ * @param {object} [props.colors]
+ * @param {React.ComponentType} [props.TextComponent]
+ * @param {React.ComponentType} [props.CategoryTextComponent]
+ *
+ * @returns {JSX.Element}
+ */
+export default function FoodMenuScreen({
+  menu,
+  colors = {},
+  TextComponent = Text,
+  CategoryTextComponent = Text,
+  currencySymbol = '$',
+}) {
+  const mergedColors = {
+    ...defaultColors,
+    ...colors,
+  };
+
+  const categories = menu || {};
+
+  return (
+    <View style={defaultStyle.container}>
+      {Object.entries(categories).map(([category, items]) => (
+        <View
+          key={category}
+          style={[
+            defaultStyle.categoryTile,
+            {
+              backgroundColor:
+                mergedColors.categoryTileBackgroundColor,
+            },
+          ]}
+        >
+          {category && category !== '_' ? (
+            <CategoryTextComponent
+              style={[
+                defaultStyle.categoryLabel,
+                { color: mergedColors.categoryLabelColor },
+              ]}
+            >
+              {category}
+            </CategoryTextComponent>
+          ) : null}
+
+          {Object.entries(items).map(([itemName, price]) => (
+            <View
+              key={itemName}
+              style={[
+                defaultStyle.itemRow,
+                {
+                  backgroundColor:
+                    mergedColors.itemRowBackgroundColor,
+                },
+              ]}
+            >
+              <TextComponent
+                style={[
+                  defaultStyle.item,
+                  { color: mergedColors.itemColor },
+                ]}
+              >
+                {itemName}
+              </TextComponent>
+
+              <TextComponent
+                style={[
+                  defaultStyle.price,
+                  { color: mergedColors.itemColor },
+                ]}
+              >
+                {currencySymbol} {formatPrice(price)}
+              </TextComponent>
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}

package/lib/screens/food-vendor-screen.jsx

@@ -0,0 +1,80 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  Text,
+} from 'react-native';
+
+import Tile from '../components/tile';
+
+const { width } = Dimensions.get('window');
+const GAP = 16;
+const TILE_WIDTH = (width - GAP * 3) / 2;
+
+const defaultStyle = StyleSheet.create({
+  grid: {
+    padding: GAP / 2,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    width: '100%',
+  },
+});
+
+/**
+ * FoodVendorScreen
+ *
+ * Renders a grid of vendor tiles.
+ *
+ * @param {object} props
+ * @param {object} props.vendors
+ * @param {function} props.onSelectVendor
+ * @param {string} [props.tileBackgroundColor]
+ * @param {string} [props.tileForegroundColor]
+ * @param {object} [props.contentStyle]
+ * @param {React.ComponentType} [props.TextComponent]
+ *
+ * @returns {JSX.Element}
+ */
+export default function FoodVendorScreen({
+  vendors,
+  onSelectVendor,
+  tileBackgroundColor,
+  tileForegroundColor,
+  contentStyle,
+  TextComponent = Text,
+}) {
+  return (
+    <View style={[defaultStyle.grid, contentStyle]}>
+      {Object.keys(vendors).map((name) => {
+        const vendor = vendors[name];
+        const metadata = vendor.metadata || {};
+
+        return (
+          <Tile
+            key={name}
+            label={name}
+            //image={metadata.img}
+            icon={metadata.ico}
+            backgroundColor={tileBackgroundColor}
+            labelStyle={{ color: tileForegroundColor }}
+            iconColor={tileForegroundColor}
+            style={{
+              width: TILE_WIDTH,
+              height: TILE_WIDTH / 2,
+              margin: GAP / 2,
+            }}
+            onPress={() => onSelectVendor(name)}
+            TextComponent={TextComponent}
+          />
+        );
+      })}
+    </View>
+  );
+}

package/lib/screens/news-item-screen.jsx

@@ -0,0 +1,154 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React, {
+  useEffect,
+  useState,
+} from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import Markdown from 'react-native-markdown-display';
+
+import HeroScreen from '../components/hero-screen';
+import { fetchNewsJson } from '../actions/news';
+
+const defaultStyle = StyleSheet.create({
+  content: {
+    padding: 16,
+    gap: 16,
+  },
+});
+
+/**
+ * NewsItemScreen
+ *
+ * Fetches and renders a single news item using HeroScreen.
+ *
+ * @param {object} props
+ * @param {string} props.uri
+ * @param {string} [props.bearerToken]
+ * @param {React.ComponentType} [props.TextComponent]
+ * @param {string} [props.backgroundColor]
+ * @param {string} [props.headerBackgroundColor]
+ * @param {number} [props.headerHeight]
+ * @param {object} [props.containerStyle]
+ * @param {object} [props.headerStyle]
+ * @param {object} [props.contentStyle]
+ * @param {object} [props.summaryStyle]
+ * @param {object} [props.titleStyle]
+ * @param {object} [props.markdownStyle]
+ * @param {string} [props.loadingLabel]
+ * @param {string} [props.errorLabel]
+ *
+ * @returns {JSX.Element}
+ */
+export default function NewsItemScreen({
+  uri,
+  bearerToken,
+  TextComponent = Text,
+  MarkdownComponent = Markdown,
+  defaultHeaderImage,
+
+  backgroundColor,
+  headerBackgroundColor,
+  headerHeight,
+
+  containerStyle,
+  headerStyle,
+  contentStyle,
+  summaryStyle,
+  titleStyle,
+  markdownStyle,
+
+  loadingLabel = 'Loading...',
+  errorLabel = 'Unable to load news item.',
+}) {
+  const [item, setItem] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    load();
+  }, [uri, bearerToken]);
+
+  /**
+   * Loads a single news item from the configured URI.
+   *
+   * @returns {Promise<void>}
+   */
+  async function load() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await fetchNewsJson({
+        uri,
+        bearerToken,
+      });
+
+      setItem(data);
+    }
+    catch (e) {
+      setError(e.message || errorLabel);
+    }
+
+    setLoading(false);
+  }
+
+  if (!item) return;
+
+  const headerImage = defaultHeaderImage;
+
+//  const headerImage = item?.image
+//    ? {
+//        source: { uri: item.image },
+//        style: defaultHeaderImage?.style,
+//        fit: defaultHeaderImage?.fit,
+//      }
+//    : defaultHeaderImage;
+
+  return (
+    <HeroScreen
+      TextComponent={TextComponent}
+      titleStyle={titleStyle}
+      headerImage={headerImage}
+      headerOverlay={
+        <TextComponent type="title">
+          {item.title}
+        </TextComponent>
+      }
+      backgroundColor={backgroundColor}
+      headerBackgroundColor={headerBackgroundColor}
+      headerHeight={headerHeight}
+      containerStyle={containerStyle}
+      headerStyle={headerStyle}
+      contentStyle={contentStyle}
+    >
+      <View style={defaultStyle.content}>
+        {loading ? (
+          <View>
+            <ActivityIndicator />
+            <TextComponent>{loadingLabel}</TextComponent>
+          </View>
+        ) : null}
+
+        {!loading && error ? (
+          <TextComponent>
+            {error}
+          </TextComponent>
+        ) : null}
+
+        {!loading && !error ? (
+          <MarkdownComponent style={markdownStyle}>
+            {item?.content || ''}
+          </MarkdownComponent>
+        ) : null}
+      </View>
+    </HeroScreen>
+  );
+}