@opndev/react-native-events 0.0.10

package/lib/components/parallax-scroll-view.jsx

@@ -0,0 +1,144 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import { StyleSheet, View, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import Animated, {
+  interpolate,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollOffset,
+}  from 'react-native-reanimated';
+
+
+const DEFAULT_HEADER_HEIGHT = 250;
+
+const defaultStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    overflow: 'hidden',
+    zIndex: 1,
+  },
+  content: {
+    padding: 32,
+    gap: 16,
+  },
+});
+
+/**
+ * A scroll view with a parallax header image and a pluggable content wrapper.
+ *
+ * The component is intentionally theme-agnostic. Consumers are expected to pass
+ * resolved colors and, if needed, a custom content wrapper component.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ *   Content rendered below the parallax header.
+ * @param {React.ReactElement} props.headerImage
+ *   Element rendered inside the header area, usually an image.
+ * @param {string} [props.backgroundColor='#fff']
+ *   Background color for the scroll view container.
+ * @param {string} [props.headerBackgroundColor]
+ *   Background color shown behind the header image.
+ * @param {number} [props.headerHeight=250]
+ *   Height of the parallax header in device pixels.
+ * @param {React.ComponentType<{style?: any, children?: React.ReactNode}>}
+ *   [props.ContentComponent=View]
+ *   Wrapper used for the content area below the header.
+ *
+ *   This is a container injection point, not an arbitrary render callback.
+ *   The component passed here must accept:
+ *
+ *   - `style`
+ *   - `children`
+ *
+ *   Typical examples are `View`, `SafeAreaView`, or a themed wrapper such as
+ *   `ThemedView`.
+ *
+ *   Avoid passing scroll containers such as `ScrollView` unless nested scrolling
+ *   is explicitly intended.
+ * @param {import('react-native').StyleProp<import('react-native').ViewStyle>}
+ *   [props.containerStyle]
+ *   Optional style overrides for the outer scroll view container.
+ * @param {import('react-native').StyleProp<import('react-native').ViewStyle>}
+ *   [props.headerStyle]
+ *   Optional style overrides for the header container.
+ * @param {import('react-native').StyleProp<import('react-native').ViewStyle>}
+ *   [props.contentStyle]
+ *   Optional style overrides for the content wrapper.
+ * @returns {JSX.Element}
+ */
+
+export default function ParallaxScrollView({
+  children,
+  headerImage,
+  headerBackgroundColor,
+  backgroundColor = '#fff',
+  colorScheme = 'light',
+  headerHeight = DEFAULT_HEADER_HEIGHT,
+  containerStyle,
+  headerStyle,
+  contentStyle,
+  ContentComponent = View,
+}) {
+  const scrollOffset = useScrollOffset(scrollRef);
+  const scrollRef = useAnimatedRef();
+  const insets = useSafeAreaInsets();
+  const effectiveHeaderHeight = headerHeight + (insets.top / 2);
+
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [-headerHeight, 0, headerHeight],
+            [-headerHeight / 2, 0, headerHeight * 0.75]
+          ),
+        },
+        {
+          scale: interpolate(
+            scrollOffset.value,
+            [-headerHeight, 0, headerHeight],
+            [2, 1, 1]
+          ),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.ScrollView
+      ref={scrollRef}
+
+      style={[
+        defaultStyle.container,
+        { backgroundColor },
+        containerStyle,
+      ]}
+      scrollEventThrottle={16}
+    >
+      <Animated.View
+        style={[
+          defaultStyle.header,
+          {
+            height: effectiveHeaderHeight,
+            backgroundColor: headerBackgroundColor,
+          },
+          headerAnimatedStyle,
+          headerStyle,
+        ]}
+      >
+        {headerImage}
+      </Animated.View>
+
+      <ContentComponent style={[defaultStyle.content, contentStyle]}>
+        {children}
+      </ContentComponent>
+    </Animated.ScrollView>
+  );
+}

package/lib/components/qr-code-form.jsx

@@ -0,0 +1,436 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  Pressable,
+} from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+
+const defaultStyle = StyleSheet.create({
+  container: {
+    padding: 16,
+    gap: 16,
+  },
+  section: {
+    gap: 12,
+  },
+  inputWrap: {
+    gap: 6,
+  },
+  input: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+  },
+  button: {
+    padding: 14,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  wideButton: {
+    alignSelf: 'stretch',
+  },
+  card: {
+    padding: 20,
+    borderRadius: 12,
+    alignItems: 'center',
+    gap: 16,
+  },
+  qrWrap: {
+    padding: 16,
+    borderWidth: 4,
+    borderRadius: 12,
+    backgroundColor: '#FFFFFF',
+  },
+});
+
+/**
+ * QRCodeForm
+ *
+ * Reusable QR form component.
+ *
+ * @param {object} props
+ * @param {Array<object>} props.fields
+ * @param {object} props.action
+ * @param {React.ComponentType} props.TextComponent
+ * @param {string} [props.backgroundColor]
+ * @param {string} [props.inputBackgroundColor]
+ * @param {string} [props.inputBorderColor]
+ * @param {string} [props.inputTextColor]
+ * @param {string} [props.placeholderTextColor]
+ * @param {string} [props.primaryButtonBackgroundColor]
+ * @param {string} [props.secondaryButtonBackgroundColor]
+ * @param {string} [props.cardBackgroundColor]
+ * @param {string} [props.linkColor]
+ * @param {string} [props.errorBackgroundColor]
+ * @param {string} [props.errorTextColor]
+ * @param {object} [props.containerStyle]
+ * @param {object} [props.labelStyle]
+ * @param {object} [props.inputStyle]
+ * @param {object} [props.buttonStyle]
+ * @param {object} [props.buttonTextStyle]
+ * @param {object} [props.secondaryButtonStyle]
+ * @param {object} [props.secondaryButtonTextStyle]
+ * @param {object} [props.cardStyle]
+ * @param {object} [props.linkStyle]
+ * @param {object} [props.errorStyle]
+ * @param {object} [props.errorTextStyle]
+ * @param {string} [props.submitLabel]
+ * @param {string} [props.loadingLabel]
+ * @param {string} [props.refreshLabel]
+ * @param {string} [props.resetLabel]
+ * @param {string} [props.errorLabel]
+ * @param {number} [props.qrSize]
+ * @param {string} [props.qrBorderColor]
+ * @param {number} [props.qrBorderWidth]
+ * @param {Function} [props.renderAboveQRCode]
+ * @param {Function} [props.renderBelowQRCode]
+ *
+ * @returns {JSX.Element}
+ */
+export default function QRCodeForm({
+  fields,
+  action,
+  TextComponent,
+  backgroundColor,
+  inputBackgroundColor = '#FFFFFF',
+  inputBorderColor,
+  inputTextColor,
+  placeholderTextColor,
+  primaryButtonBackgroundColor,
+  secondaryButtonBackgroundColor,
+  cardBackgroundColor,
+  linkColor,
+  errorBackgroundColor,
+  errorTextColor,
+  containerStyle,
+  labelStyle,
+  inputStyle,
+  buttonStyle,
+  buttonTextStyle,
+  secondaryButtonStyle,
+  secondaryButtonTextStyle,
+  cardStyle,
+  linkStyle,
+  errorStyle,
+  errorTextStyle,
+  submitLabel = 'Generate',
+  loadingLabel = 'Loading...',
+  refreshLabel = 'Refresh',
+  resetLabel = 'Re-enter',
+  errorLabel = 'Request failed',
+  qrSize = 220,
+  qrBorderColor = '#000000',
+  qrBorderWidth = 4,
+  renderAboveQRCode,
+  renderBelowQRCode,
+}) {
+  const initialValues = useMemo(() => {
+    return fields.reduce((acc, field) => {
+      acc[field.key] = '';
+      return acc;
+    }, {});
+  }, [fields]);
+
+  const [values, setValues] = useState(initialValues);
+  const [loading, setLoading] = useState(false);
+  const [response, setResponse] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    loadValues();
+  }, []);
+
+  async function loadValues() {
+    const stored = await action.loadValues();
+
+    setValues((prev) => ({
+      ...prev,
+      ...stored,
+    }));
+  }
+
+  async function fetchQr() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const json = await action.fetchResponse(values);
+      setResponse(json);
+    }
+    catch (e) {
+      setError(e.message || errorLabel);
+    }
+
+    setLoading(false);
+  }
+
+  function reset() {
+    setResponse(null);
+    setError(null);
+  }
+
+  const responseError = getResponseError(response);
+  const visibleError = error || responseError;
+  const hasResult = Boolean(response && !responseError);
+  const token = hasResult ? action.getToken(response) : undefined;
+
+  const renderArgs = {
+    response,
+    values,
+    fields,
+    token,
+    loading,
+  };
+
+  /**
+   * @param {object|null} value
+   * @returns {string|null}
+   */
+  function getResponseError(value) {
+    if (!value) {
+      return null;
+    }
+
+    if (value.status === 'error') {
+      return value.error || value.message || errorLabel;
+    }
+
+    if (value.error) {
+      return value.error;
+    }
+
+    return null;
+  }
+
+  /**
+   * @param {object} field
+   * @returns {JSX.Element}
+   */
+  function renderField(field) {
+    return (
+      <View key={field.key} style={defaultStyle.inputWrap}>
+        <TextComponent style={labelStyle}>
+          {field.label}
+        </TextComponent>
+
+        <TextInput
+          style={[
+            defaultStyle.input,
+            {
+              backgroundColor: inputBackgroundColor,
+              borderColor: inputBorderColor,
+              color: inputTextColor,
+            },
+            inputStyle,
+          ]}
+          placeholder={field.placeholder || field.label}
+          placeholderTextColor={placeholderTextColor}
+          value={values[field.key]}
+          onChangeText={(text) => updateValue(field.key, text)}
+          autoCapitalize={
+            field.autoCapitalize ? 'characters' : 'none'
+          }
+          keyboardType={field.keyboardType || 'default'}
+        />
+      </View>
+    );
+  }
+
+  /**
+   * @param {string} key
+   * @param {string} value
+   * @returns {void}
+   */
+  function updateValue(key, value) {
+    setValues((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  }
+
+  /**
+   * @returns {JSX.Element|null}
+   */
+  function renderForm() {
+    if (response) {
+      return null;
+    }
+
+    return (
+      <View style={defaultStyle.section}>
+        {fields.map(renderField)}
+        {renderPrimaryButton()}
+      </View>
+    );
+  }
+
+  /**
+   * @returns {JSX.Element}
+   */
+  function renderPrimaryButton() {
+    return (
+      <Pressable
+        style={[
+          defaultStyle.button,
+          primaryButtonBackgroundColor
+            ? { backgroundColor: primaryButtonBackgroundColor }
+            : null,
+          buttonStyle,
+        ]}
+        onPress={fetchQr}
+      >
+        <TextComponent style={buttonTextStyle}>
+          {loading ? loadingLabel : submitLabel}
+        </TextComponent>
+      </Pressable>
+    );
+  }
+
+  /**
+   * @returns {JSX.Element|null}
+   */
+  function renderResult() {
+    if (!hasResult) {
+      return null;
+    }
+
+    return (
+      <View
+        style={[
+          defaultStyle.card,
+          cardBackgroundColor
+            ? { backgroundColor: cardBackgroundColor }
+            : null,
+          cardStyle,
+        ]}
+      >
+        {renderAboveQRCode ? renderAboveQRCode(renderArgs) : null}
+        {renderQRCode()}
+        {renderBelowQRCode ? renderBelowQRCode(renderArgs) : null}
+        {renderRefreshButton()}
+        {renderResetLink()}
+      </View>
+    );
+  }
+
+  /**
+   * @returns {JSX.Element|null}
+   */
+  function renderQRCode() {
+    if (!token) {
+      return null;
+    }
+
+    return (
+      <View
+        style={[
+          defaultStyle.qrWrap,
+          {
+            borderColor: qrBorderColor,
+            borderWidth: qrBorderWidth,
+          },
+        ]}
+      >
+        <QRCode
+          value={token}
+          size={qrSize}
+          backgroundColor="#FFFFFF"
+          color="#000000"
+        />
+      </View>
+    );
+  }
+
+  /**
+   * @returns {JSX.Element}
+   */
+  function renderRefreshButton() {
+    return (
+      <Pressable
+        style={[
+          defaultStyle.button,
+          defaultStyle.wideButton,
+          secondaryButtonBackgroundColor
+            ? { backgroundColor: secondaryButtonBackgroundColor }
+            : null,
+          secondaryButtonStyle,
+        ]}
+        onPress={fetchQr}
+      >
+        <TextComponent style={secondaryButtonTextStyle}>
+          {refreshLabel}
+        </TextComponent>
+      </Pressable>
+    );
+  }
+
+  /**
+   * @returns {JSX.Element}
+   */
+  function renderResetLink() {
+    return (
+      <Pressable onPress={reset}>
+        <TextComponent
+          style={[
+            linkColor ? { color: linkColor } : null,
+            linkStyle,
+          ]}
+        >
+          {resetLabel}
+        </TextComponent>
+      </Pressable>
+    );
+  }
+
+  /**
+   * @returns {JSX.Element|null}
+   */
+  function renderError() {
+    if (!visibleError) {
+      return null;
+    }
+
+    return (
+      <View
+        style={[
+          errorBackgroundColor
+            ? { backgroundColor: errorBackgroundColor }
+            : null,
+          errorStyle,
+        ]}
+      >
+        <TextComponent
+          style={[
+            errorTextColor ? { color: errorTextColor } : null,
+            errorTextStyle,
+          ]}
+        >
+          {visibleError}
+        </TextComponent>
+
+        {responseError ? renderResetLink() : null}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        defaultStyle.container,
+        backgroundColor ? { backgroundColor } : null,
+        containerStyle,
+      ]}
+    >
+      {renderForm()}
+      {renderResult()}
+      {renderError()}
+    </View>
+  );
+}

package/lib/components/tile-base.jsx

@@ -0,0 +1,123 @@
+// 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 {
+  Text,
+  View,
+  Image,
+  StyleSheet,
+  Pressable,
+} from 'react-native';
+
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+
+const defaultStyle = StyleSheet.create({
+  surface: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  wrapper: {
+    flex: 1,
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+    gap: 8,
+  },
+  label: {
+    fontSize: 18,
+    textAlign: 'center',
+  },
+  image: {
+    alignSelf: 'center',
+  },
+});
+
+/**
+ * Shared tile renderer used by Tile and GradientTile.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} [props.background]
+ * @param {string} [props.label]
+ * @param {string} [props.icon]
+ * @param {*} [props.image]
+ * @param {number} [props.iconSize=48]
+ * @param {string} [props.iconColor='#000']
+ * @param {function} [props.onPress]
+ * @param {number} [props.pressedOpacity=0.85]
+ * @param {object} [props.style]
+ * @param {object} [props.wrapperStyle]
+ * @param {object} [props.contentStyle]
+ * @param {object} [props.labelStyle]
+ * @param {object} [props.imageStyle]
+ */
+export default function TileBase({
+  background,
+  label,
+  icon,
+  image,
+  iconSize = 48,
+  iconColor = '#000',
+  onPress,
+  pressedOpacity = 0.85,
+  style,
+  wrapperStyle,
+  contentStyle,
+  labelStyle,
+  imageStyle,
+  TextComponent = Text,
+}) {
+  const renderIcon = () => {
+    if (image) {
+      return (
+        <Image
+          source={image}
+          style={[defaultStyle.image, imageStyle]}
+          resizeMode="contain"
+        />
+      );
+    }
+
+    if (icon) {
+      return (
+        <MaterialCommunityIcons
+          name={icon}
+          size={iconSize}
+          color={iconColor}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        defaultStyle.surface,
+        style,
+        { opacity: pressed ? pressedOpacity : 1 },
+      ]}
+    >
+      {background}
+
+      <View style={[defaultStyle.wrapper, wrapperStyle]}>
+        <View style={[defaultStyle.content, contentStyle]}>
+          {renderIcon()}
+
+          {label ? (
+            <TextComponent style={[defaultStyle.label, labelStyle]}>
+              {label}
+            </TextComponent>
+          ) : null}
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+