@opndev/react-native-events 0.0.12 → 0.0.14

package/Changes

@@ -1,5 +1,16 @@
 Revision history for @opndev/opndev-react-native-events
 
+0.0.14       2026-06-26 04:53:23Z
+
+  * Add Panel instead of a Tile, Tiles are more buttony thing. Panels are
+    panels. ha.
+
+0.0.13       2026-06-26 03:59:55Z
+
+  * Update news item segment to be included as a widget.
+    This infra is highly sus for generic dynamic pages infra. I need some more
+    hours in a day to get perhaps get that to work nicely. but getting there.
+
 0.0.12       2026-06-25 23:24:45Z
 
   * Add top bar to package

package/lib/components/hero-screen-header.jsx

@@ -2,8 +2,9 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 
-import { View, Image, StyleSheet } from 'react-native';
-import { useAppScreenOffset } from '../hooks/use-app-screen-offset.js';
+import { View, Image, Pressable, StyleSheet } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { useAppScreenOffset } from '../hooks/use-app-screen-offset';
 
 const styles = StyleSheet.create({
   headerImage: { width: '100%', height: '100%' },
@@ -11,8 +12,48 @@ const styles = StyleSheet.create({
   // Matches ParallaxScrollView's own `content` style — single source of
   // truth so every Hero variant lines up on body padding/gap.
   heroContent: { padding: 32, gap: 16 },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+  },
 });
 
+/**
+ * BackButton
+ *
+ * Floating back-chevron button meant to sit over a Hero variant's
+ * header image. Router-agnostic — same pattern as onSlidePress
+ * elsewhere — the package renders the button, the app decides what
+ * tapping it does (typically router.back()).
+ *
+ * Renders nothing if `onBack` isn't provided, so adding this to a
+ * Hero variant is a no-op for screens that don't pass it.
+ *
+ * @param {object} props
+ * @param {Function} [props.onBack]
+ * @param {string} [props.iconColor] Defaults to white.
+ * @param {number} [props.iconSize] Defaults to 22.
+ * @param {object} [props.style] Positioning is the caller's responsibility (e.g. absolute top/left) — this component doesn't position itself.
+ */
+export function BackButton({ onBack, iconColor = '#fff', iconSize = 22, style }) {
+  if (!onBack) return null;
+
+  return (
+    <Pressable onPress={onBack} style={[styles.backButton, style]}>
+      <MaterialCommunityIcons name="arrow-left" size={iconSize} color={iconColor} />
+    </Pressable>
+  );
+}
+
 export function renderHeaderImage(headerImage) {
   if (!headerImage) return null;
   const fit = headerImage.fit || 'cover';

package/lib/components/hero-screen.jsx

@@ -6,6 +6,7 @@ import { View, ScrollView, StyleSheet } from 'react-native';
 import {
   renderHeaderImage,
   HeaderOverlay,
+  BackButton,
   useHeroHeaderHeight,
   heroContentStyle,
 } from './hero-screen-header';
@@ -37,7 +38,7 @@ const defaultStyle = StyleSheet.create({
  * headerBackgroundColor strip (sized to the safe-area top inset,
  * via useHeroHeaderHeight) sits above it. Body content is wrapped
  * the same way ParallaxScrollView wraps its children — padding: 32,
- * gap: 8 — so spacing matches the parallax variant exactly. The
+ * gap: 16 — so spacing matches the parallax variant exactly. The
  * spacer that reserves room for the header stays outside that
  * padded wrapper, same as Parallax keeps its header outside its
  * own padded content area.
@@ -46,6 +47,7 @@ const defaultStyle = StyleSheet.create({
  * @param {React.ReactNode} props.children
  * @param {object} [props.headerImage]
  * @param {React.ReactNode} [props.headerOverlay]
+ * @param {Function} [props.onBack] Renders a back button over the header image when provided. Omit for no back button.
  * @param {string} [props.backgroundColor]
  * @param {string} [props.headerBackgroundColor]
  * @param {number} [props.headerHeight] Visible image height (excludes the safe-area inset)
@@ -60,6 +62,7 @@ export default function HeroScreenOverlay({
   children,
   headerImage,
   headerOverlay,
+  onBack,
   backgroundColor,
   headerBackgroundColor,
   headerHeight = 220,
@@ -106,6 +109,11 @@ export default function HeroScreenOverlay({
         >
           {renderHeaderImage(headerImage)}
         </View>
+
+        <BackButton
+          onBack={onBack}
+          style={{ position: 'absolute', top: topOffset + 12, left: 12 }}
+        />
       </View>
     </View>
   );

package/lib/components/panel.jsx

@@ -0,0 +1,65 @@
+// 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, Pressable, StyleSheet } from 'react-native';
+
+const defaultStyle = StyleSheet.create({
+  surface: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  content: {
+    padding: 16,
+  },
+});
+
+/**
+ * Panel
+ *
+ * Simple rounded-corner surface that sizes to its content. Unlike
+ * Tile (built for a centered icon+label grid cell with flex: 1),
+ * Panel imposes no layout assumptions on its children at all — no
+ * forced centering, no forced flex sizing — so content-driven
+ * widgets (lists, text blocks, NewsWidget, etc.) render exactly as
+ * they would un-wrapped, just inside a rounded/backgrounded card.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {string} [props.backgroundColor]
+ * @param {Function} [props.onPress] If provided, the whole panel becomes pressable.
+ * @param {object} [props.style] Style for the outer rounded surface.
+ * @param {object} [props.contentStyle] Style for the inner content wrapper (default padding: 16).
+ *
+ * @returns {JSX.Element}
+ */
+export default function Panel({
+  children,
+  backgroundColor,
+  onPress,
+  style,
+  contentStyle,
+}) {
+  const surfaceStyle = [
+    defaultStyle.surface,
+    backgroundColor ? { backgroundColor } : null,
+    style,
+  ];
+
+  const content = (
+    <View style={[defaultStyle.content, contentStyle]}>
+      {children}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} style={surfaceStyle}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View style={surfaceStyle}>{content}</View>;
+}

package/lib/components.js

@@ -11,6 +11,7 @@ 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 { default as ScaledLogo } from './components/scaled-logo.jsx';
+export { default as Panel } from './components/panel.jsx';
 
 export { openUrl, openApp, openExternal } from './utils/launch.js';
 

package/lib/index.js

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 
-const VERSION = "0.0.12";
+const VERSION = "0.0.14";
 
 // TODO: @opndev/util?
 export { formatPrice } from './utils/format-price.js';

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

@@ -13,7 +13,6 @@ import {
   View,
 } from 'react-native';
 import Markdown from 'react-native-markdown-display';
-
 import HeroScreen from '../components/hero-screen';
 import { fetchNewsJson } from '../actions/news';
 
@@ -53,18 +52,16 @@ export default function NewsItemScreen({
   TextComponent = Text,
   MarkdownComponent = Markdown,
   defaultHeaderImage,
-
+  onBack,
   backgroundColor,
   headerBackgroundColor,
   headerHeight,
-
   containerStyle,
   headerStyle,
   contentStyle,
   summaryStyle,
   titleStyle,
   markdownStyle,
-
   loadingLabel = 'Loading...',
   errorLabel = 'Unable to load news item.',
 }) {
@@ -100,10 +97,7 @@ export default function NewsItemScreen({
     setLoading(false);
   }
 
-  if (!item) return;
-
   const headerImage = defaultHeaderImage;
-
 //  const headerImage = item?.image
 //    ? {
 //        source: { uri: item.image },
@@ -112,11 +106,47 @@ export default function NewsItemScreen({
 //      }
 //    : defaultHeaderImage;
 
+  // Loading and error states now render through the same HeroScreen
+  // shell (so chrome/background/header stay consistent) instead of
+  // bailing out to a blank screen before item is set.
+  if (loading || error || !item) {
+    return (
+      <HeroScreen
+        TextComponent={TextComponent}
+        titleStyle={titleStyle}
+        headerImage={headerImage}
+        onBack={onBack}
+        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}
+        </View>
+      </HeroScreen>
+    );
+  }
+
   return (
     <HeroScreen
       TextComponent={TextComponent}
       titleStyle={titleStyle}
       headerImage={headerImage}
+        onBack={onBack}
       headerOverlay={
         <TextComponent type="title">
           {item.title}
@@ -130,24 +160,9 @@ export default function NewsItemScreen({
       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}
+        <MarkdownComponent style={markdownStyle}>
+          {item?.content || ''}
+        </MarkdownComponent>
       </View>
     </HeroScreen>
   );

package/lib/widgets/news-widget.jsx

@@ -0,0 +1,190 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import { fetchNewsJson } from '../actions/news';
+
+const defaultStyle = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  title: {
+    fontWeight: '700',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: 'rgba(0,0,0,0.15)',
+    marginTop: 4,
+    marginBottom: 4,
+  },
+  item: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  bullet: {
+    opacity: 0.6,
+  },
+  itemText: {
+    flex: 1,
+  },
+});
+
+/**
+ * NewsWidget
+ *
+ * Compact, embeddable "latest N news items" panel — meant to sit
+ * inside another page's body (e.g. as one of HeroScreen's children
+ * sections), not to own the screen itself. Unlike NewsListScreen,
+ * it has no ScrollView and no pull-to-refresh, since both break
+ * once nested inside a parent page that's already scrollable.
+ *
+ * Refreshes itself automatically every `refreshIntervalMs` (default
+ * 15 minutes). For anything else that should trigger a refetch —
+ * most notably a push notification once that infra exists — attach
+ * a ref and call `ref.current.refresh()` from wherever that handler
+ * ends up living:
+ *
+ *   const newsRef = useRef(null);
+ *   <NewsWidget ref={newsRef} uri={...} />
+ *   // later, e.g. inside a notification handler:
+ *   newsRef.current?.refresh();
+ *
+ * @param {object} props
+ * @param {string} props.uri
+ * @param {string} [props.bearerToken]
+ * @param {number} [props.limit] Max items shown. Defaults to 4.
+ * @param {string} [props.title] Defaults to 'News'.
+ * @param {boolean} [props.showDivider] Thin line under the title, like 'News' / '-----'. Defaults to true. Ignored if title is falsy.
+ * @param {object} [props.dividerStyle]
+ * @param {React.ComponentType} [props.TextComponent] Defaults to Text.
+ * @param {Function} [props.onPressItem]
+ * @param {number} [props.refreshIntervalMs] Defaults to 15 minutes.
+ * @param {string} [props.backgroundColor]
+ * @param {object} [props.containerStyle]
+ * @param {object} [props.titleStyle]
+ * @param {object} [props.itemStyle]
+ * @param {object} [props.itemTextStyle]
+ * @param {object} [props.errorTextStyle]
+ * @param {string} [props.emptyLabel]
+ * @param {string} [props.errorLabel]
+ *
+ * @returns {JSX.Element}
+ */
+const NewsWidget = forwardRef(function NewsWidget(
+  {
+    uri,
+    bearerToken,
+    limit = 4,
+    title = 'News',
+    showDivider = true,
+    dividerStyle,
+    TextComponent = Text,
+    onPressItem,
+    refreshIntervalMs = 15 * 60 * 1000,
+
+    backgroundColor,
+    containerStyle,
+    titleStyle,
+    itemStyle,
+    itemTextStyle,
+    errorTextStyle,
+
+    emptyLabel = 'No news items.',
+    errorLabel = 'Unable to load news.',
+  },
+  ref
+) {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const intervalRef = useRef(null);
+
+  async function load() {
+    setError(null);
+
+    try {
+      const data = await fetchNewsJson({ uri, bearerToken, force: true });
+      setItems((data.items || []).slice(0, limit));
+    }
+    catch (e) {
+      setError(e.message || errorLabel);
+    }
+
+    setLoading(false);
+  }
+
+  useImperativeHandle(ref, () => ({
+    refresh: load,
+  }), [uri, bearerToken, limit]);
+
+  useEffect(() => {
+    setLoading(true);
+    load();
+
+    intervalRef.current = setInterval(load, refreshIntervalMs);
+
+    return () => clearInterval(intervalRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, bearerToken, limit, refreshIntervalMs]);
+
+  return (
+    <View
+      style={[
+        defaultStyle.container,
+        backgroundColor ? { backgroundColor } : null,
+        containerStyle,
+      ]}
+    >
+      {title ? (
+        <TextComponent style={[defaultStyle.title, titleStyle]}>
+          {title}
+        </TextComponent>
+      ) : null}
+
+      {title && showDivider ? (
+        <View style={[defaultStyle.divider, dividerStyle]} />
+      ) : null}
+
+      {loading ? <ActivityIndicator /> : null}
+
+      {!loading && error ? (
+        <TextComponent style={errorTextStyle}>{error}</TextComponent>
+      ) : null}
+
+      {!loading && !error && !items.length ? (
+        <TextComponent style={errorTextStyle}>{emptyLabel}</TextComponent>
+      ) : null}
+
+      {!loading && !error && items.map((item) => (
+        <Pressable
+          key={item.id}
+          style={[defaultStyle.item, itemStyle]}
+          onPress={() => onPressItem?.(item)}
+        >
+          <TextComponent style={defaultStyle.bullet}>{'\u2022'}</TextComponent>
+          <TextComponent style={[defaultStyle.itemText, itemTextStyle]}>
+            {item.title}
+          </TextComponent>
+        </Pressable>
+      ))}
+    </View>
+  );
+});
+
+export default NewsWidget;
+

package/lib/widgets.js

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+export { default as NewsWidget } from './widgets/news-widget.jsx';

package/package.json

@@ -13,12 +13,12 @@
     "./components": "./lib/components.js",
     "./globals": "./lib/screen-registry.js",
     "./hero-screen-registry": "./lib/hero-screen-registry.js",
-    "./hooks/use-safe-area-top-inset": "./lib/hooks/use-safe-area-top-inset.js",
     "./lite": "./lib/hero-screen-registry.js",
     "./notifications": "./lib/notifications.js",
     "./notifications-fcm": "./lib/notifications/fcm.js",
     "./screen-registry": "./lib/screen-registry.js",
-    "./screens": "./lib/screens.js"
+    "./screens": "./lib/screens.js",
+    "./widgets": "./lib/widgets.js"
   },
   "keywords": [],
   "license": "GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions",
@@ -34,5 +34,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.12"
+  "version": "0.0.14"
 }