@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/components/ErrorBoundary/ErrorBoundary.js

@@ -1,130 +1 @@
-"use strict";
-
-import { Logger } from '@webority/mobile-core';
-import React, { useMemo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
-import { EmptyState } from "../EmptyState/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const COMPONENT_STACK_LIMIT = 500;
-const DEFAULT_TITLE = 'Something went wrong';
-const DEFAULT_MESSAGE = 'An unexpected error occurred. Please try again.';
-const hasResetKeysChanged = (prev, next) => {
-  if (prev === next) {
-    return false;
-  }
-  if (!prev || !next || prev.length !== next.length) {
-    return true;
-  }
-  return prev.some((value, index) => value !== next[index]);
-};
-const DefaultFallback = ({
-  error,
-  reset,
-  title,
-  message,
-  testID
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const showRawError = typeof __DEV__ !== 'undefined' && __DEV__;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(EmptyState, {
-      title: title ?? DEFAULT_TITLE,
-      description: message ?? DEFAULT_MESSAGE,
-      action: {
-        label: 'Try again',
-        onPress: reset,
-        testID: testID ? `${testID}-retry` : undefined
-      }
-    }), showRawError ? /*#__PURE__*/_jsx(Text, {
-      style: styles.devError,
-      testID: testID ? `${testID}-dev-error` : undefined,
-      children: error.message
-    }) : null]
-  });
-};
-const buildStyles = theme => StyleSheet.create({
-  root: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.background.primary,
-    padding: theme.spacing.lg
-  },
-  devError: {
-    marginTop: theme.spacing.md,
-    color: theme.colors.error,
-    fontSize: theme.typography.fontSize.sm,
-    textAlign: 'center'
-  }
-});
-
-/**
- * Catches render errors in its subtree and shows a themed fallback instead of
- * a white screen. Mount this once near the navigation root per the fleet
- * convention, and optionally again around any subtree that should recover
- * independently (a single failed card should not blank the whole screen).
- */
-export class ErrorBoundary extends React.Component {
-  state = {
-    error: null
-  };
-  static getDerivedStateFromError(error) {
-    return {
-      error
-    };
-  }
-  componentDidUpdate(prevProps) {
-    if (this.state.error && hasResetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) {
-      this.reset();
-    }
-  }
-  componentDidCatch(error, info) {
-    const componentStack = (info.componentStack ?? '').slice(0, COMPONENT_STACK_LIMIT);
-    Logger.recordError(error, {
-      errorType: 'RenderError',
-      componentStack
-    });
-    try {
-      this.props.onError?.(error, {
-        componentStack
-      });
-    } catch (onErrorError) {
-      Logger.error('[@webority/mobile-ui] ErrorBoundary onError threw; the boundary itself is unaffected.', onErrorError);
-    }
-  }
-  reset = () => {
-    this.setState({
-      error: null
-    });
-    this.props.onReset?.();
-  };
-  render() {
-    const {
-      error
-    } = this.state;
-    if (!error) {
-      return this.props.children;
-    }
-    const {
-      fallback,
-      title,
-      message,
-      testID
-    } = this.props;
-    if (fallback !== undefined) {
-      return typeof fallback === 'function' ? fallback(error, this.reset) : fallback;
-    }
-    return /*#__PURE__*/_jsx(DefaultFallback, {
-      error: error,
-      reset: this.reset,
-      title: title,
-      message: message,
-      testID: testID
-    });
-  }
-}
-//# sourceMappingURL=ErrorBoundary.js.map
+import{Logger as r}from"@webority/mobile-core";import e,{useMemo as t}from"react";import{StyleSheet as o,Text as s,View as n}from"react-native";import{useTheme as i}from"../../theme/index.js";import{EmptyState as a}from"../EmptyState/index.js";import{jsx as c,jsxs as p}from"react/jsx-runtime";const DefaultFallback=({error:r,reset:e,title:o,message:l,testID:m})=>{const d=i(),h=t(()=>buildStyles(d),[d]),g="undefined"!=typeof __DEV__&&__DEV__;return p(n,{style:h.root,testID:m,children:[c(a,{title:o??"Something went wrong",description:l??"An unexpected error occurred. Please try again.",action:{label:"Try again",onPress:e,testID:m?`${m}-retry`:void 0}}),g?c(s,{style:h.devError,testID:m?`${m}-dev-error`:void 0,children:r.message}):null]})},buildStyles=r=>o.create({root:{flex:1,alignItems:"center",justifyContent:"center",backgroundColor:r.colors.background.primary,padding:r.spacing.lg},devError:{marginTop:r.spacing.md,color:r.colors.error,fontSize:r.typography.fontSize.sm,textAlign:"center"}});export class ErrorBoundary extends e.Component{state={error:null};static getDerivedStateFromError(r){return{error:r}}componentDidUpdate(r){var e,t;!this.state.error||(e=r.resetKeys,t=this.props.resetKeys,e===t||e&&t&&e.length===t.length&&!e.some((r,e)=>r!==t[e]))||this.reset()}componentDidCatch(e,t){const o=(t.componentStack??"").slice(0,500);r.recordError(e,{errorType:"RenderError",componentStack:o});try{this.props.onError?.(e,{componentStack:o})}catch(e){r.error("[@webority/mobile-ui] ErrorBoundary onError threw; the boundary itself is unaffected.",e)}}reset=()=>{this.setState({error:null}),this.props.onReset?.()};render(){const{error:r}=this.state;if(!r)return this.props.children;const{fallback:e,title:t,message:o,testID:s}=this.props;return void 0!==e?"function"==typeof e?e(r,this.reset):e:c(DefaultFallback,{error:r,reset:this.reset,title:t,message:o,testID:s})}}

package/lib/module/components/ErrorBoundary/index.js

@@ -1,6 +1 @@
-"use strict";
-
-export { ErrorBoundary } from "./ErrorBoundary.js";
-export { useErrorHandler } from "./useErrorHandler.js";
-export { withErrorBoundary } from "./withErrorBoundary.js";
-//# sourceMappingURL=index.js.map
+export{ErrorBoundary}from"./ErrorBoundary.js";export{useErrorHandler}from"./useErrorHandler.js";export{withErrorBoundary}from"./withErrorBoundary.js";

package/lib/module/components/ErrorBoundary/useErrorHandler.js

@@ -1,20 +1 @@
-"use strict";
-
-import { useCallback, useState } from 'react';
-
-/**
- * Returns a stable callback for surfacing an error caught outside React's
- * render/commit cycle (an async callback, a rejected promise, a native event
- * handler) to the nearest ErrorBoundary. React only catches synchronous
- * render errors on its own; re-throwing during a state update is the
- * documented way to route an async error into that same path.
- */
-export const useErrorHandler = () => {
-  const [, setState] = useState();
-  return useCallback(error => {
-    setState(() => {
-      throw error instanceof Error ? error : new Error(String(error));
-    });
-  }, []);
-};
-//# sourceMappingURL=useErrorHandler.js.map
+import{useCallback as r,useState as o}from"react";export const useErrorHandler=()=>{const[,t]=o();return r(r=>{t(()=>{throw r instanceof Error?r:new Error(String(r))})},[])};

package/lib/module/components/ErrorBoundary/withErrorBoundary.js

@@ -1,23 +1 @@
-"use strict";
-
-import React from 'react';
-import { ErrorBoundary } from "./ErrorBoundary.js";
-
-/**
- * Wraps a component in an `ErrorBoundary`. Prefer this over hand-wrapping a
- * screen at every call site when the same fallback/reset behaviour applies
- * everywhere that component is rendered.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const withErrorBoundary = (Component, boundaryProps) => {
-  const displayName = Component.displayName ?? Component.name ?? 'Component';
-  const Wrapped = props => /*#__PURE__*/_jsx(ErrorBoundary, {
-    ...boundaryProps,
-    children: /*#__PURE__*/_jsx(Component, {
-      ...props
-    })
-  });
-  Wrapped.displayName = `withErrorBoundary(${displayName})`;
-  return Wrapped;
-};
-//# sourceMappingURL=withErrorBoundary.js.map
+import r from"react";import{ErrorBoundary as o}from"./ErrorBoundary.js";import{jsx as t}from"react/jsx-runtime";export const withErrorBoundary=(r,a)=>{const m=r.displayName??r.name??"Component",Wrapped=m=>t(o,{...a,children:t(r,{...m})});return Wrapped.displayName=`withErrorBoundary(${m})`,Wrapped};

package/lib/module/components/FieldBase/Chevron.js

@@ -1,69 +1 @@
-"use strict";
-
-/**
- * Chevron — the shared dropdown indicator for the field family.
- *
- * One glyph for Select, InlineSelect, PickerTrigger and PhoneNumberInput so
- * the indicator never drifts between trigger components. It is the design
- * system's line chevron (AppIcon `chevron-down`), reached through the icon
- * registry so an app can swap it with `theme.icons.chevronDown`; it used to
- * be a filled triangle drawn with view borders. Pass `open` to get the 180°
- * rotate-on-open animation; omit it for a static chevron.
- */
-
-import React, { useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { defaultIcons } from "../AppIcon/defaultIcons.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Chevron = ({
-  color,
-  size,
-  open,
-  style
-}) => {
-  const theme = useTheme();
-  const rotate = useRef(createAnimatedValue(open ? 1 : 0)).current;
-  useEffect(() => {
-    if (open === undefined) {
-      return;
-    }
-    const anim = Animated.timing(rotate, {
-      toValue: open ? 1 : 0,
-      duration: theme.motion.duration.fast,
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [open, rotate, theme.motion.duration.fast]);
-  const glyph = (theme.icons?.chevronDown ?? defaultIcons.chevronDown)({
-    size,
-    color
-  });
-  const boxStyle = {
-    width: size,
-    height: size,
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-  if (open === undefined) {
-    return /*#__PURE__*/_jsx(View, {
-      style: [boxStyle, style],
-      children: glyph
-    });
-  }
-  const rotation = rotate.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg']
-  });
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [boxStyle, {
-      transform: [{
-        rotate: rotation
-      }]
-    }, style],
-    children: glyph
-  });
-};
-export default Chevron;
-//# sourceMappingURL=Chevron.js.map
+import t,{useEffect as e,useRef as o}from"react";import{Animated as r,View as n}from"react-native";import{createAnimatedValue as i,useTheme as s}from"../../theme/index.js";import{defaultIcons as a}from"../AppIcon/defaultIcons.js";import{jsx as c}from"react/jsx-runtime";export const Chevron=({color:t,size:m,open:u,style:p})=>{const d=s(),f=o(i(u?1:0)).current;e(()=>{if(void 0===u)return;const t=r.timing(f,{toValue:u?1:0,duration:d.motion.duration.fast,useNativeDriver:!0});return t.start(),()=>t.stop()},[u,f,d.motion.duration.fast]);const l=(d.icons?.chevronDown??a.chevronDown)({size:m,color:t}),h={width:m,height:m,alignItems:"center",justifyContent:"center"};if(void 0===u)return c(n,{style:[h,p],children:l});const v=f.interpolate({inputRange:[0,1],outputRange:["0deg","180deg"]});return c(r.View,{style:[h,{transform:[{rotate:v}]},p],children:l})};export default Chevron;

package/lib/module/components/FieldBase/ChoiceText.js

@@ -0,0 +1 @@
+import{StyleSheet as e,Text as o,View as r}from"react-native";import{fontFor as l,useTheme as i}from"../../theme/index.js";import{FieldErrorGlyph as s,hasFieldText as n}from"./FieldBase.js";import{jsx as t,jsxs as c}from"react/jsx-runtime";export const hasChoiceDetail=(e,o)=>n(e)||n(o);export const ChoiceText=({label:e,description:m,error:p,disabled:d=!1,labelLines:f,descriptionLines:x,style:y,labelStyle:h})=>{const u=i();if(!n(e)&&!n(m)&&!n(p))return null;const g=u.typography.fontSize.sm;return c(r,{style:[a.column,y],children:[n(e)?t(o,{style:[{color:d?u.colors.text.disabled:u.colors.text.primary,fontSize:u.typography.fontSize.base,...l(u,"normal")},h],numberOfLines:f,children:e}):null,n(m)?t(o,{style:{color:d?u.colors.text.disabled:u.colors.text.secondary,fontSize:g,marginTop:u.spacing.xs/2,...l(u,"normal")},numberOfLines:x,children:m}):null,n(p)?c(r,{style:[a.errorRow,{marginTop:u.spacing.xs,columnGap:u.spacing.xs}],accessibilityLiveRegion:"polite",children:[t(s,{size:g,color:u.colors.field.message}),t(o,{style:{flexShrink:1,color:u.colors.field.message,fontSize:g,...l(u,"normal")},children:p})]}):null]})};const a=e.create({column:{flexShrink:1},errorRow:{flexDirection:"row",alignItems:"center"}});