@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/commonjs/components/AsyncBlock/AsyncBlock.js

@@ -1,87 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AsyncBlock = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _index2 = require("../EmptyState/index.js");
-var _index3 = require("../Spinner/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * The loading / error / empty / content switcher every screen that fetches data
- * needs. Without it each screen re-implements the same four-way branch and they
- * disagree — one shows a spinner over stale rows, the next flashes an empty
- * state mid-fetch.
- *
- * Precedence is fixed: `loading` wins over everything, then `error`, then
- * `empty`, then `children`. A fetch that is both in flight and holding a stale
- * error shows only the loading state, which is the least surprising reading of
- * "still in flight".
- */
-const AsyncBlock = ({
-  loading = false,
-  error,
-  empty = false,
-  onRetry,
-  skeleton,
-  emptyTitle = 'Nothing here yet',
-  emptyDescription,
-  emptyIcon,
-  errorTitle = "That didn't load",
-  retryLabel = 'Try again',
-  children,
-  style,
-  testID
-}) => {
-  const theme = (0, _index.useTheme)();
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: style,
-      testID: testID,
-      children: skeleton ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          paddingVertical: theme.spacing['2xl'],
-          alignItems: 'center'
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Spinner, {})
-      })
-    });
-  }
-  if (error) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: style,
-      testID: testID,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.EmptyState, {
-        title: errorTitle,
-        description: typeof error === 'string' ? error : undefined,
-        action: onRetry ? {
-          label: retryLabel,
-          onPress: onRetry
-        } : undefined
-      }), typeof error === 'string' ? null : error]
-    });
-  }
-  if (empty) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: style,
-      testID: testID,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.EmptyState, {
-        icon: emptyIcon,
-        title: emptyTitle,
-        description: emptyDescription
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: style,
-    testID: testID,
-    children: children
-  });
-};
-exports.AsyncBlock = AsyncBlock;
-var _default = exports.default = AsyncBlock;
-//# sourceMappingURL=AsyncBlock.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.AsyncBlock=void 0;var _react=_interopRequireDefault(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../AppIcon/index.js"),_index3=require("../EmptyState/index.js"),_index4=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const OFFLINE_HINT="Check your connection, then try again.",AsyncBlock=({loading:e=!1,error:t,errorVariant:i="default",empty:n=!1,onRetry:r,skeleton:s,emptyTitle:o="Nothing here yet",emptyDescription:c,emptyIcon:l,errorTitle:a="That didn't load",offlineTitle:u="You're offline",retryLabel:x="Try again",children:d,style:_,testID:p})=>{const y=(0,_index.useTheme)();if(e)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:_,testID:p,children:s??(0,_jsxRuntime.jsx)(_reactNative.View,{style:{paddingVertical:y.spacing["2xl"],alignItems:"center"},children:(0,_jsxRuntime.jsx)(_index4.Spinner,{})})});if(t){const e="offline"===i,n="string"==typeof t?t:e?OFFLINE_HINT:void 0;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_,testID:p,children:[(0,_jsxRuntime.jsx)(_index3.EmptyState,{icon:e?(0,_jsxRuntime.jsx)(_index2.AppIcon,{name:"cloud-cross",size:"xl",color:y.colors.text.tertiary,testID:"async-block-offline-icon"}):void 0,title:e?u:a,description:n,action:r?{label:x,onPress:r}:void 0}),"string"==typeof t?null:t]})}return n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:_,testID:p,children:(0,_jsxRuntime.jsx)(_index3.EmptyState,{icon:l,title:o,description:c})}):(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:d})};exports.AsyncBlock=AsyncBlock;var _default=exports.default=AsyncBlock;

package/lib/commonjs/components/AsyncBlock/index.js

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "AsyncBlock", {
-  enumerable: true,
-  get: function () {
-    return _AsyncBlock.AsyncBlock;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _AsyncBlock.default;
-  }
-});
-var _AsyncBlock = _interopRequireWildcard(require("./AsyncBlock.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"AsyncBlock",{enumerable:!0,get:function(){return _AsyncBlock.AsyncBlock}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _AsyncBlock.default}});var _AsyncBlock=_interopRequireWildcard(require("./AsyncBlock.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var o,c,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,u)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((c=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(c.get||c.set)?o(u,r,c):u[r]=e[r]);return u})(e,r)}

package/lib/commonjs/components/AuthedImage/AuthedImage.js

@@ -1,230 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AuthedImage = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _index2 = require("../Spinner/index.js");
-var _authedImageCache = require("./authedImageCache.js");
-var _jsxRuntime = require("react/jsx-runtime");
-const toError = value => value instanceof Error ? value : new Error(String(value));
-const AuthedImage = props => {
-  const {
-    uri,
-    headers,
-    client,
-    authenticated = true,
-    ttlMs = _authedImageCache.DEFAULT_TTL_MS,
-    placeholder,
-    fallback,
-    onLoadStart,
-    onLoadEnd,
-    onError,
-    cacheKey,
-    testID,
-    accessibilityLabel,
-    style,
-    ...imageProps
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const [state, setState] = (0, _react.useState)({
-    status: 'loading'
-  });
-
-  // Callbacks live behind refs so a caller passing inline arrows does not
-  // restart the fetch on every render.
-  const callbacks = (0, _react.useRef)({
-    onLoadStart,
-    onLoadEnd,
-    onError
-  });
-  callbacks.current = {
-    onLoadStart,
-    onLoadEnd,
-    onError
-  };
-
-  // Compared by value: a headers object literal is a new identity every render.
-  const headersKey = JSON.stringify(headers ?? {});
-  (0, _react.useEffect)(() => {
-    let cancelled = false;
-    let acquired = null;
-    const finish = next => {
-      if (cancelled) {
-        return;
-      }
-      setState(next);
-      callbacks.current.onLoadEnd?.();
-    };
-    const run = async () => {
-      if (!uri) {
-        const error = new Error('[@webority/mobile-ui] AuthedImage was given an empty `uri`. Pass the ' + 'image URL, or render nothing while the URL is still unknown.');
-        if (!cancelled) {
-          setState({
-            status: 'error'
-          });
-          callbacks.current.onError?.(error);
-        }
-        return;
-      }
-      setState({
-        status: 'loading'
-      });
-      callbacks.current.onLoadStart?.();
-      const key = (0, _authedImageCache.deriveCacheKey)(uri, cacheKey);
-      const cached = await (0, _authedImageCache.readEntry)(key);
-      if (cancelled) {
-        return;
-      }
-      if (cached && (0, _authedImageCache.isFresh)(cached.meta, ttlMs)) {
-        void (0, _authedImageCache.touchEntry)(key);
-        finish({
-          status: 'ready',
-          fileUri: cached.fileUri
-        });
-        return;
-      }
-      const entry = (0, _authedImageCache.acquireFetch)(key, {
-        uri,
-        headers: JSON.parse(headersKey),
-        authenticated,
-        client
-      });
-      acquired = {
-        key,
-        entry
-      };
-      try {
-        const result = await entry.promise;
-        finish({
-          status: 'ready',
-          fileUri: result.fileUri
-        });
-      } catch (error) {
-        if (cancelled) {
-          return;
-        }
-        // A stale image beats an empty box: the entry is only expired, and the
-        // refetch that would have replaced it failed.
-        if (cached) {
-          finish({
-            status: 'ready',
-            fileUri: cached.fileUri
-          });
-          return;
-        }
-        setState({
-          status: 'error'
-        });
-        callbacks.current.onError?.(toError(error));
-        callbacks.current.onLoadEnd?.();
-      }
-    };
-    void run();
-    return () => {
-      cancelled = true;
-      if (acquired) {
-        (0, _authedImageCache.releaseFetch)(acquired.key, acquired.entry);
-      }
-    };
-  }, [uri, cacheKey, ttlMs, authenticated, client, headersKey]);
-
-  // The base `testID` sits on the root in EVERY state, with the state-specific
-  // suffixes nested inside it. A consumer that can only find the component while
-  // it happens to be loaded cannot wait for it to load.
-  if (state.status === 'loading') {
-    if (placeholder !== undefined) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: style,
-        testID: testID,
-        children: placeholder
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.placeholder, style],
-      testID: testID,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.stateFill,
-        testID: testID ? `${testID}-placeholder` : undefined,
-        pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Spinner, {
-          size: "sm",
-          accessibilityLabel: accessibilityLabel ?? 'Loading image'
-        })
-      })
-    });
-  }
-  if (state.status === 'error') {
-    if (fallback !== undefined) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: style,
-        testID: testID,
-        children: fallback
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.fallback, style],
-      testID: testID,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        accessible: true,
-        accessibilityRole: "image",
-        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, image unavailable` : 'Image unavailable',
-        testID: testID ? `${testID}-fallback` : undefined,
-        style: styles.stateFill,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.fallbackText,
-          children: "!"
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-    ...imageProps,
-    accessible: true,
-    accessibilityRole: "image",
-    accessibilityLabel: accessibilityLabel,
-    testID: testID,
-    style: style,
-    source: {
-      uri: state.fileUri
-    }
-  });
-};
-exports.AuthedImage = AuthedImage;
-AuthedImage.displayName = 'AuthedImage';
-const buildStyles = theme => _reactNative.StyleSheet.create({
-  placeholder: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.background.secondary,
-    borderRadius: theme.radius.md,
-    ..._corners.smoothCorners
-  },
-  fallback: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.background.secondary,
-    borderRadius: theme.radius.md,
-    ..._corners.smoothCorners,
-    borderWidth: theme.colors.border.width,
-    borderColor: theme.colors.border.secondary,
-    padding: theme.spacing.sm
-  },
-  stateFill: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center'
-  },
-  fallbackText: {
-    color: theme.colors.text.tertiary,
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold
-  }
-});
-var _default = exports.default = AuthedImage;
-//# sourceMappingURL=AuthedImage.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.AuthedImage=void 0;var _expoImage=require("expo-image"),_react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_index2=require("../Spinner/index.js"),_authedImageCache=require("./authedImageCache.js"),_jsxRuntime=require("react/jsx-runtime");const CONTENT_FIT={cover:"cover",contain:"contain",stretch:"fill",center:"scale-down",repeat:"cover"},toError=e=>e instanceof Error?e:new Error(String(e)),AuthedImage=e=>{const{uri:t,headers:r,client:a,authenticated:i=!0,ttlMs:s=_authedImageCache.DEFAULT_TTL_MS,placeholder:n,fallback:o,onLoadStart:c,onLoadEnd:l,onError:d,cacheKey:u,testID:h,accessibilityLabel:m,style:g,resizeMode:y,fadeDuration:_,contentFit:f,transition:x,cachePolicy:b="memory",...I}=e,v=(0,_index.useTheme)(),j=(0,_react.useMemo)(()=>buildStyles(v),[v]),[p,E]=(0,_react.useState)({status:"loading"}),C=(0,_react.useRef)({onLoadStart:c,onLoadEnd:l,onError:d});C.current={onLoadStart:c,onLoadEnd:l,onError:d};const L=JSON.stringify(r??{});return(0,_react.useEffect)(()=>{let e=!1,r=null;const finish=t=>{e||(E(t),C.current.onLoadEnd?.())};return(async()=>{if(!t){const t=new Error("[@webority/mobile-ui] AuthedImage was given an empty `uri`. Pass the image URL, or render nothing while the URL is still unknown.");return void(e||(E({status:"error"}),C.current.onError?.(t)))}E({status:"loading"}),C.current.onLoadStart?.();const n=(0,_authedImageCache.deriveCacheKey)(t,u),o=await(0,_authedImageCache.readEntry)(n);if(e)return;if(o&&(0,_authedImageCache.isFresh)(o.meta,s))return(0,_authedImageCache.touchEntry)(n),void finish({status:"ready",fileUri:o.fileUri});const c=(0,_authedImageCache.acquireFetch)(n,{uri:t,headers:JSON.parse(L),authenticated:i,client:a});r={key:n,entry:c};try{const e=await c.promise;finish({status:"ready",fileUri:e.fileUri})}catch(t){if(e)return;if(o&&!(0,_authedImageCache.isPermanentRefusal)(t))return void finish({status:"ready",fileUri:o.fileUri});if(o&&(await(0,_authedImageCache.removeEntry)(n),e))return;E({status:"error"}),C.current.onError?.(toError(t)),C.current.onLoadEnd?.()}})(),()=>{e=!0,r&&(0,_authedImageCache.releaseFetch)(r.key,r.entry)}},[t,u,s,i,a,L]),"loading"===p.status?void 0!==n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:g,testID:h,children:n}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.placeholder,g],testID:h,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:j.stateFill,testID:h?`${h}-placeholder`:void 0,pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_index2.Spinner,{size:"sm",accessibilityLabel:m??"Loading image"})})}):"error"===p.status?void 0!==o?(0,_jsxRuntime.jsx)(_reactNative.View,{style:g,testID:h,children:o}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[j.fallback,g],testID:h,children:(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:!0,accessibilityRole:"image",accessibilityLabel:m?`${m}, image unavailable`:"Image unavailable",testID:h?`${h}-fallback`:void 0,style:j.stateFill,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:j.fallbackText,children:"!"})})}):(0,_jsxRuntime.jsx)(_expoImage.Image,{...I,accessible:!0,accessibilityRole:"image",accessibilityLabel:m,testID:h,style:g,contentFit:f??(y?CONTENT_FIT[y]:void 0),transition:x??_,cachePolicy:b,source:{uri:p.fileUri}})};exports.AuthedImage=AuthedImage,AuthedImage.displayName="AuthedImage";const buildStyles=e=>_reactNative.StyleSheet.create({placeholder:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.secondary,borderRadius:e.radius.md,..._corners.smoothCorners},fallback:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.secondary,borderRadius:e.radius.md,..._corners.smoothCorners,borderWidth:e.colors.border.width,borderColor:e.colors.border.secondary,padding:e.spacing.sm},stateFill:{alignItems:"center",flex:1,justifyContent:"center"},fallbackText:{color:e.colors.text.tertiary,fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.bold}});var _default=exports.default=AuthedImage;