@opndev/react-native-events 0.0.15 → 0.0.17

package/Changes

@@ -1,5 +1,18 @@
 Revision history for @opndev/opndev-react-native-events
 
+0.0.17       2026-06-28 04:29:54Z
+
+  * Add gradient panel and proper implementation of contrast color, not just
+    "pick white or black"
+  * Fix HeroScreenFixed to be actually fixed to the content
+
+0.0.16       2026-06-27 23:25:11Z
+
+  * Add widgets for dynamic and static content:
+    news now is dynamic and some other bits are static because we don't need to
+    do call to a backend to decide what scheduling or rules there are. Offline
+    mode is cool too
+
 0.0.15       2026-06-26 22:56:26Z
 
   * Add debugRouteState() to debug export to debug route states more easily

package/README.md

@@ -5,7 +5,7 @@ SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
 SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 -->
 
-# Welcome to @opndev/opndev-react-native-events
+# Welcome to @opndev/react-native-events
 
 Reusable React Native / Expo components for event-style apps.
 
@@ -26,7 +26,7 @@ This package provides a small set of building blocks for:
 ## Installation
 
 ```bash
-npm install @opndev/opndev-react-native-events
+npm install @opndev/react-native-events
 ```
 
 Peer dependencies are expected to be installed by the consuming app.

package/lib/actions/news.js

@@ -2,99 +2,21 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 
-/**
- * News API cache time-to-live.
- */
-const TTL_MS = 15 * 60 * 1000;
-
-/**
- * In-memory cache for news API responses.
- */
-const cache = new Map();
-
-/**
- * Builds a cache key for a given URI and bearer token.
- *
- * @param {string} uri
- * @param {string} [bearerToken]
- *
- * @returns {string}
- */
-function getCacheKey(uri, bearerToken) {
-  return `${uri}::${bearerToken || ''}`;
-}
-
-/**
- * Returns true when a cache entry is still fresh.
- *
- * @param {object} entry
- *
- * @returns {boolean}
- */
-function isFresh(entry) {
-  if (!entry) {
-    return false;
-  }
-
-  return (Date.now() - entry.fetchedAt) < TTL_MS;
-}
-
-/**
- * Fetches JSON from the news API with optional bearer token support.
- *
- * Cached responses are reused for 15 minutes unless `force` is set.
- *
- * @param {object} args
- * @param {string} args.uri
- * @param {string} [args.bearerToken]
- * @param {boolean} [args.force]
- *
- * @returns {Promise<any>}
- */
-export async function fetchNewsJson({
-  uri,
-  bearerToken,
-  force = false,
-}) {
-  const key = getCacheKey(uri, bearerToken);
-  const entry = cache.get(key);
-
-  if (!force && isFresh(entry)) {
-    return entry.data;
-  }
-
-  const headers = {};
-  if (bearerToken) {
-    headers.Authorization = `Bearer ${bearerToken}`;
-  }
-
-  const res = await fetch(uri, {
-    method: 'GET',
-    headers,
-  });
-
-  const data = await res.json();
-
-  cache.set(key, {
-    data,
-    fetchedAt: Date.now(),
-  });
-
-  return data;
+// This used to be its own standalone cache implementation. The
+// logic was always fully generic underneath (just a TTL cache
+// around fetch + bearer auth) — it's been moved to
+// @opndev/react-native-events as useJsonApiData's default fetcher,
+// shared with RemoteDataWidget. This file now just re-exports under
+// the original names so NewsListScreen/NewsItemScreen don't need to
+// change, and there's only one actual cache implementation rather
+// than two that could drift apart.
+
+import { fetchJson, clearJsonCache } from '@opndev/react-native-events/widgets';
+
+export function fetchNewsJson({ uri, bearerToken, force }) {
+  return fetchJson({ uri, bearerToken, force });
 }
 
-/**
- * Clears the cached response for a specific URI.
- *
- * @param {object} args
- * @param {string} args.uri
- * @param {string} [args.bearerToken]
- *
- * @returns {void}
- */
-export function clearNewsCache({
-  uri,
-  bearerToken,
-}) {
-  cache.delete(getCacheKey(uri, bearerToken));
+export function clearNewsCache({ uri, bearerToken }) {
+  return clearJsonCache({ uri, bearerToken });
 }

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

@@ -15,11 +15,8 @@ const defaultStyle = StyleSheet.create({
   container: {
     flex: 1,
   },
-  headerWrap: {
+  header: {
     width: '100%',
-    position: 'absolute',
-    top: 0,
-    left: 0,
   },
   imageInner: {
     position: 'absolute',
@@ -31,12 +28,24 @@ const defaultStyle = StyleSheet.create({
 /**
  * HeroScreenFixed
  *
- * Header image stays pinned in place; only the content below it
- * scrolls. The image never overlaps the status bar — a solid
- * 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: 16 — so spacing matches the parallax variant exactly.
+ * Header image is a normal, in-flow element at the top of the
+ * scroll — it scrolls away together with the content below it, at
+ * the same rate, with no pinning and no animation. Same structural
+ * shape as HeroScreenParallax, just without the scroll-driven
+ * scale/translateY transform — "parallax minus the animation."
+ *
+ * "Fixed" means fixed to the content below it, not fixed to the
+ * screen — the previous version of this file pinned the header via
+ * position:absolute, which was actually the same idea as
+ * HeroScreenOverlay, not what "Fixed" was meant to mean. Rebuilt
+ * from scratch; this file had no usages anywhere yet.
+ *
+ * ContentComponent's role matches HeroScreenParallax's: it wraps
+ * the body content for layout purposes (defaults to View, NOT a
+ * scroll container) — the actual scrolling is owned by the outer
+ * ScrollView, hardcoded, not swappable. If you were expecting
+ * ContentComponent to default to ScrollView (the old behavior),
+ * that's the one real API change here.
  *
  * @param {object} props
  * @param {React.ReactNode} props.children Normal body content, and/or <CarouselScreen> elements for slides.
@@ -48,7 +57,7 @@ const defaultStyle = StyleSheet.create({
  * @param {string} [props.backgroundColor]
  * @param {string} [props.headerBackgroundColor]
  * @param {number} [props.headerHeight] Visible image height (excludes the safe-area inset)
- * @param {React.ComponentType} [props.ContentComponent]
+ * @param {React.ComponentType} [props.ContentComponent] Defaults to View — wraps body content, does NOT own scrolling.
  * @param {object} [props.containerStyle]
  * @param {object} [props.headerStyle]
  * @param {object} [props.contentStyle]
@@ -65,7 +74,7 @@ export default function HeroScreenFixed({
   backgroundColor,
   headerBackgroundColor,
   headerHeight = 220,
-  ContentComponent = ScrollView,
+  ContentComponent = View,
   containerStyle,
   headerStyle,
   contentStyle,
@@ -74,7 +83,7 @@ export default function HeroScreenFixed({
   const { slideElements, bodyChildren } = splitCarouselChildren(children);
 
   return (
-    <View
+    <ScrollView
       style={[
         defaultStyle.container,
         backgroundColor ? { backgroundColor } : null,
@@ -83,7 +92,7 @@ export default function HeroScreenFixed({
     >
       <View
         style={[
-          defaultStyle.headerWrap,
+          defaultStyle.header,
           { height: totalHeaderHeight },
           headerBackgroundColor ? { backgroundColor: headerBackgroundColor } : null,
           headerStyle,
@@ -105,15 +114,10 @@ export default function HeroScreenFixed({
         </View>
       </View>
 
-      <ContentComponent
-        style={{ flex: 1 }}
-        contentContainerStyle={{ paddingTop: totalHeaderHeight }}
-      >
-        <View style={[heroContentStyle, contentStyle]}>
-          <HeaderOverlay headerOverlay={headerOverlay} />
-          {bodyChildren}
-        </View>
+      <ContentComponent style={[heroContentStyle, contentStyle]}>
+        <HeaderOverlay headerOverlay={headerOverlay} />
+        {bodyChildren}
       </ContentComponent>
-    </View>
+    </ScrollView>
   );
 }

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

@@ -1,3 +1,7 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
 import { useState, isValidElement, Children } from 'react';
 import { View, Image, Pressable, StyleSheet } from 'react-native';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

package/lib/components/panel-gradient.jsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { contrastColor } from '../utils/colors';
+import { PanelContrastContext } from '../hooks/use-panel-contrast';
+
+// Six named directions — end is always the geometric opposite of
+// start, so only one end of each axis needs naming. Want the
+// reverse (e.g. bottom-left to top-right)? Swap the order of
+// `colors` instead of asking for a 7th/8th direction keyword.
+const DIRECTIONS = {
+  top: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } },
+  bottom: { start: { x: 0, y: 1 }, end: { x: 0, y: 0 } },
+  left: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
+  right: { start: { x: 1, y: 0 }, end: { x: 0, y: 0 } },
+  'top-left': { start: { x: 0, y: 0 }, end: { x: 1, y: 1 } },
+  'top-right': { start: { x: 1, y: 0 }, end: { x: 0, y: 1 } },
+};
+
+// Local for now, not added to lib/utils/colors.js since I haven't
+// seen that file's full current content — move it there later if
+// you want it shared. Only handles 6-digit hex (#RRGGBB); named
+// colors ('white') or rgba() strings aren't parsed.
+function hexToRgb(hex) {
+  const clean = hex.replace('#', '');
+  const value = parseInt(clean, 16);
+  return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
+}
+
+function rgbToHex({ r, g, b }) {
+  return '#' + [r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('');
+}
+
+function averageColor(colors) {
+  const rgbs = colors.map(hexToRgb);
+  const sum = rgbs.reduce((acc, c) => ({ r: acc.r + c.r, g: acc.g + c.g, b: acc.b + c.b }), { r: 0, g: 0, b: 0 });
+  const n = rgbs.length;
+  return rgbToHex({ r: sum.r / n, g: sum.g / n, b: sum.b / n });
+}
+
+const defaultStyle = StyleSheet.create({
+  shadowWrap: {
+    borderRadius: 16,
+  },
+  shadowOn: {
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+  },
+  surface: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  content: {
+    padding: 16,
+  },
+});
+
+/**
+ * GradientPanel
+ *
+ * Same shape and behavior as Panel — sizes to its content, no
+ * forced layout on children, same shadow-split structure (an outer
+ * shadow-casting view, an inner clipping view, for the same reason
+ * Panel needs it: a shadow renders outside a view's own bounds, so
+ * it can't live on the same view that clips with overflow:hidden).
+ *
+ * The only difference: a gradient background instead of a flat
+ * `backgroundColor`. Stays theme-agnostic like Panel — pass raw
+ * resolved colors (e.g. ['#FFFFFF', theme.primary]), this component
+ * doesn't reach into your theme itself.
+ *
+ * Automatically derives a contrast text color from the AVERAGE of
+ * its `colors` stops (via contrastColor — same hue/saturation,
+ * contrasting lightness, not flat black/white), made available to
+ * anything rendered inside via PanelContrastContext — same
+ * mechanism Panel uses. This is a heuristic, not exact — a fade
+ * from white to a dark color averages to something mid-tone, which
+ * may not actually read well at either literal end of the gradient.
+ * Override with `contrastTextColor` if the heuristic guesses wrong.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {string[]} [props.colors] Gradient stops, e.g. ['#FFFFFF', theme.primary]. Defaults to ['#FFFFFF', '#FFFFFF'] (solid white) if omitted.
+ * @param {'top'|'bottom'|'left'|'right'|'top-left'|'top-right'} [props.direction] Defaults to 'top'. Takes precedence over start/end if both are given.
+ * @param {{x: number, y: number}} [props.start] Raw escape hatch, ignored if `direction` is set.
+ * @param {{x: number, y: number}} [props.end] Raw escape hatch, ignored if `direction` is set.
+ * @param {number[]} [props.locations] Where each color stop lands (0-1). Optional — omit for an even spread.
+ * @param {string} [props.contrastTextColor] Overrides the automatically-derived (average-based) contrast color.
+ * @param {boolean} [props.shadow] Floating-card drop shadow. Defaults to false.
+ * @param {Function} [props.onPress] If provided, the whole panel becomes pressable.
+ * @param {object} [props.style] Style for the outer (shadow-casting) wrapper.
+ * @param {object} [props.contentStyle] Style for the inner content wrapper (default padding: 16).
+ *
+ * @returns {JSX.Element}
+ */
+export default function GradientPanel({
+  children,
+  colors = ['#FFFFFF', '#FFFFFF'],
+  direction = 'top',
+  start,
+  end,
+  locations,
+  contrastTextColor,
+  shadow = false,
+  onPress,
+  style,
+  contentStyle,
+}) {
+  const resolvedDirection = DIRECTIONS[direction] ?? {
+    start: start ?? DIRECTIONS.top.start,
+    end: end ?? DIRECTIONS.top.end,
+  };
+  const resolvedContrast = contrastTextColor ?? contrastColor(averageColor(colors));
+
+  const content = (
+    <LinearGradient
+      colors={colors}
+      start={resolvedDirection.start}
+      end={resolvedDirection.end}
+      locations={locations}
+      style={defaultStyle.surface}
+    >
+      <PanelContrastContext.Provider value={resolvedContrast}>
+        <View style={[defaultStyle.content, contentStyle]}>
+          {children}
+        </View>
+      </PanelContrastContext.Provider>
+    </LinearGradient>
+  );
+
+  const wrapperStyle = [
+    defaultStyle.shadowWrap,
+    shadow ? defaultStyle.shadowOn : null,
+    shadow ? { backgroundColor: colors[0] } : null,
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} style={wrapperStyle}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View style={wrapperStyle}>{content}</View>;
+}

package/lib/components/panel.jsx

@@ -1,9 +1,10 @@
 // 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';
+import { contrastColor } from '../utils/colors';
+import { PanelContrastContext } from '../hooks/use-panel-contrast';
 
 const defaultStyle = StyleSheet.create({
   shadowWrap: {
@@ -43,9 +44,19 @@ const defaultStyle = StyleSheet.create({
  * split means `shadow` can be toggled on/off with no other changes
  * needed, and panels that don't use it are unaffected.
  *
+ * Automatically derives a contrast text color from `backgroundColor`
+ * (via contrastColor) and makes it available to anything rendered
+ * inside, via PanelContrastContext — so e.g. DataListWidget picks up
+ * a correct default text color for whatever Panel it's sitting in,
+ * with zero per-usage color wiring. Pass `contrastTextColor`
+ * yourself to override the automatic guess; anything inside can
+ * still override further for individual pieces of text (e.g.
+ * DataListWidget's own itemTextStyle/titleStyle still win over this).
+ *
  * @param {object} props
  * @param {React.ReactNode} props.children
  * @param {string} [props.backgroundColor]
+ * @param {string} [props.contrastTextColor] Overrides the automatically-derived contrast color.
  * @param {boolean} [props.shadow] Floating-card drop shadow. Defaults to false.
  * @param {Function} [props.onPress] If provided, the whole panel becomes pressable.
  * @param {object} [props.style] Style for the outer (shadow-casting) wrapper.
@@ -56,20 +67,26 @@ const defaultStyle = StyleSheet.create({
 export default function Panel({
   children,
   backgroundColor,
+  contrastTextColor,
   shadow = false,
   onPress,
   style,
   contentStyle,
 }) {
+  const resolvedContrast = contrastTextColor
+    ?? (backgroundColor ? contrastColor(backgroundColor) : null);
+
   const surfaceStyle = [
     defaultStyle.surface,
     backgroundColor ? { backgroundColor } : null,
   ];
 
   const content = (
-    <View style={[defaultStyle.content, contentStyle]}>
-      {children}
-    </View>
+    <PanelContrastContext.Provider value={resolvedContrast}>
+      <View style={[defaultStyle.content, contentStyle]}>
+        {children}
+      </View>
+    </PanelContrastContext.Provider>
   );
 
   const inner = onPress ? (

package/lib/components/schedule.jsx

@@ -0,0 +1,97 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import { View, Text, StyleSheet } from 'react-native';
+import Panel from './panel';
+
+const defaultStyle = StyleSheet.create({
+  container: {
+    gap: 16,
+  },
+  dayHeading: {
+    fontWeight: '700',
+    marginBottom: 8,
+  },
+  event: {
+    gap: 4,
+    marginBottom: 12,
+  },
+  eventTitle: {
+    fontWeight: '700',
+  },
+});
+
+/**
+ * Schedule
+ *
+ * Renders a multi-day event schedule — one Panel per day. Panels
+ * cycle through `washColors` in order (e.g. [primarySoft,
+ * secondarySoft] gives primary/secondary/primary/secondary...), so
+ * consecutive days are visually distinct without any per-day
+ * configuration needed.
+ *
+ * @param {object} props
+ * @param {object} props.schedule Shape: { [dateKey]: Array<{ event: string, description?: string }> }
+ * @param {string[]} [props.washColors] Colors cycled through per day, in order. Omit for no alternation (every Panel uses Panel's own default).
+ * @param {(dateKey: string) => string} [props.formatDate] Defaults to showing the raw key as-is.
+ * @param {React.ComponentType} [props.TextComponent] Defaults to Text.
+ * @param {Function} [props.onPressEvent] (event, dateKey) => void
+ * @param {boolean} [props.shadow] Passed through to every Panel.
+ * @param {object} [props.containerStyle]
+ * @param {object} [props.dayHeadingStyle]
+ * @param {object} [props.eventTitleStyle]
+ * @param {object} [props.eventDescriptionStyle]
+ *
+ * @returns {JSX.Element}
+ */
+export default function Schedule({
+  schedule,
+  washColors = [],
+  formatDate = (dateKey) => dateKey,
+  TextComponent = Text,
+  onPressEvent,
+  shadow,
+  containerStyle,
+  dayHeadingStyle,
+  eventTitleStyle,
+  eventDescriptionStyle,
+}) {
+  const days = Object.keys(schedule || {});
+
+  return (
+    <View style={[defaultStyle.container, containerStyle]}>
+      {days.map((dateKey, dayIndex) => {
+        const events = schedule[dateKey] || [];
+        const backgroundColor = washColors.length
+          ? washColors[dayIndex % washColors.length]
+          : undefined;
+
+        return (
+          <Panel key={dateKey} backgroundColor={backgroundColor} shadow={shadow}>
+            <TextComponent style={[defaultStyle.dayHeading, dayHeadingStyle]}>
+              {formatDate(dateKey)}
+            </TextComponent>
+
+            {events.map((item, eventIndex) => (
+              <View key={eventIndex} style={defaultStyle.event}>
+                <TextComponent
+                  style={[defaultStyle.eventTitle, eventTitleStyle]}
+                  onPress={onPressEvent ? () => onPressEvent(item, dateKey) : undefined}
+                >
+                  {item.event}
+                </TextComponent>
+
+                {item.description ? (
+                  <TextComponent style={eventDescriptionStyle}>
+                    {item.description}
+                  </TextComponent>
+                ) : null}
+              </View>
+            ))}
+          </Panel>
+        );
+      })}
+    </View>
+  );
+}

package/lib/components.js

@@ -12,6 +12,7 @@ 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 { default as GradientPanel } from './components/panel-gradient.jsx';
 
 export { openUrl, openApp, openExternal } from './utils/launch.js';