@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/LoaderOverlay/LoaderOverlay.js

@@ -1,196 +1 @@
-"use strict";
-
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, Animated, BackHandler, Easing, StyleSheet } from 'react-native';
-import { useReducedMotion } from "../../hooks/useReducedMotion.js";
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { Spinner } from "../Spinner/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_SHOW_DELAY_MS = 150;
-const DEFAULT_MIN_VISIBLE_MS = 400;
-let state = {
-  refCount: 0,
-  message: undefined
-};
-const listeners = new Set();
-const notify = () => {
-  for (const listener of listeners) {
-    listener();
-  }
-};
-const subscribe = listener => {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-};
-const getState = () => state;
-const show = message => {
-  state = {
-    refCount: state.refCount + 1,
-    message: message ?? state.message
-  };
-  notify();
-};
-const hide = () => {
-  if (state.refCount <= 0) {
-    return;
-  }
-  const refCount = state.refCount - 1;
-  state = {
-    refCount,
-    message: refCount === 0 ? undefined : state.message
-  };
-  notify();
-};
-const reset = () => {
-  if (state.refCount === 0 && state.message === undefined) {
-    return;
-  }
-  state = {
-    refCount: 0,
-    message: undefined
-  };
-  notify();
-};
-const isVisible = () => state.refCount > 0;
-const wrap = async (work, message) => {
-  show(message);
-  try {
-    return await (typeof work === 'function' ? work() : work);
-  } finally {
-    hide();
-  }
-};
-export const loader = {
-  show,
-  hide,
-  wrap,
-  isVisible,
-  reset
-};
-export const useLoader = () => loader;
-export const LoaderOverlay = ({
-  renderIndicator,
-  backdropColor,
-  showDelayMs = DEFAULT_SHOW_DELAY_MS,
-  minVisibleMs = DEFAULT_MIN_VISIBLE_MS,
-  testID
-}) => {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const [snapshot, setSnapshot] = useState(getState);
-  const [visible, setVisible] = useState(false);
-  const visibleRef = useRef(false);
-  const showTimerRef = useRef(null);
-  const hideTimerRef = useRef(null);
-  const shownAtRef = useRef(null);
-  const fade = useRef(createAnimatedValue(0)).current;
-  useEffect(() => subscribe(() => setSnapshot(getState())), []);
-  useEffect(() => {
-    visibleRef.current = visible;
-  }, [visible]);
-  const active = snapshot.refCount > 0;
-  useEffect(() => {
-    if (active) {
-      if (hideTimerRef.current !== null) {
-        clearTimeout(hideTimerRef.current);
-        hideTimerRef.current = null;
-      }
-      if (!visibleRef.current && showTimerRef.current === null) {
-        showTimerRef.current = setTimeout(() => {
-          showTimerRef.current = null;
-          shownAtRef.current = Date.now();
-          setVisible(true);
-        }, showDelayMs);
-      }
-      return;
-    }
-    if (showTimerRef.current !== null) {
-      clearTimeout(showTimerRef.current);
-      showTimerRef.current = null;
-      return;
-    }
-    if (visibleRef.current && hideTimerRef.current === null) {
-      const elapsed = shownAtRef.current !== null ? Date.now() - shownAtRef.current : minVisibleMs;
-      const remaining = Math.max(0, minVisibleMs - elapsed);
-      hideTimerRef.current = setTimeout(() => {
-        hideTimerRef.current = null;
-        shownAtRef.current = null;
-        setVisible(false);
-      }, remaining);
-    }
-  }, [active, showDelayMs, minVisibleMs]);
-  useEffect(() => () => {
-    if (showTimerRef.current !== null) {
-      clearTimeout(showTimerRef.current);
-    }
-    if (hideTimerRef.current !== null) {
-      clearTimeout(hideTimerRef.current);
-    }
-  }, []);
-  useEffect(() => {
-    if (!visible) {
-      fade.setValue(0);
-      return;
-    }
-    if (reducedMotion) {
-      fade.setValue(1);
-      return;
-    }
-    Animated.timing(fade, {
-      toValue: 1,
-      duration: theme.motion.duration.normal,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    }).start();
-  }, [visible, reducedMotion, fade, theme]);
-  useEffect(() => {
-    if (!visible) {
-      return;
-    }
-    const subscription = BackHandler.addEventListener('hardwareBackPress', () => true);
-    return () => {
-      subscription.remove();
-    };
-  }, [visible]);
-  const message = snapshot.message;
-  useEffect(() => {
-    if (visible && message) {
-      AccessibilityInfo.announceForAccessibility(message);
-    }
-  }, [visible, message]);
-  const styles = useMemo(() => buildStyles(), []);
-  if (!visible) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(Animated.View, {
-    pointerEvents: "auto",
-    testID: testID,
-    accessible: true,
-    accessibilityViewIsModal: true,
-    accessibilityLiveRegion: "polite",
-    accessibilityLabel: message ?? 'Loading',
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    style: [styles.overlay, {
-      backgroundColor: backdropColor ?? theme.colors.background.overlay,
-      opacity: fade
-    }],
-    children: renderIndicator ? renderIndicator(message) : /*#__PURE__*/_jsx(Spinner, {
-      size: "lg",
-      message: message
-    })
-  });
-};
-const buildStyles = () => StyleSheet.create({
-  overlay: {
-    ...StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1000
-  }
-});
-//# sourceMappingURL=LoaderOverlay.js.map
+import e,{useEffect as r,useMemo as t,useRef as n,useState as o}from"react";import{AccessibilityInfo as s,Animated as i,BackHandler as u,Easing as a,StyleSheet as l}from"react-native";import{useReducedMotion as c}from"../../hooks/useReducedMotion.js";import{createAnimatedValue as m,useTheme as d}from"../../theme/index.js";import{Spinner as f}from"../Spinner/index.js";import{jsx as g}from"react/jsx-runtime";let y={refCount:0,message:void 0};const v=new Set,notify=()=>{for(const e of v)e()},getState=()=>y,show=e=>{y={refCount:y.refCount+1,message:e??y.message},notify()},hide=()=>{if(y.refCount<=0)return;const e=y.refCount-1;y={refCount:e,message:0===e?void 0:y.message},notify()};export const loader={show:show,hide:hide,wrap:async(e,r)=>{show(r);try{return await("function"==typeof e?e():e)}finally{hide()}},isVisible:()=>y.refCount>0,reset:()=>{0===y.refCount&&void 0===y.message||(y={refCount:0,message:void 0},notify())}};export const useLoader=()=>loader;export const LoaderOverlay=({renderIndicator:e,backdropColor:l,showDelayMs:y=150,minVisibleMs:b=400,testID:p})=>{const C=d(),w=c(),[x,h]=o(getState),[V,j]=o(!1),D=n(!1),I=n(null),L=n(null),T=n(null),k=n(m(0)).current;r(()=>{return e=()=>h(getState()),v.add(e),()=>{v.delete(e)};var e},[]),r(()=>{D.current=V},[V]);const M=x.refCount>0;r(()=>{if(M)return null!==L.current&&(clearTimeout(L.current),L.current=null),void(D.current||null!==I.current||(I.current=setTimeout(()=>{I.current=null,T.current=Date.now(),j(!0)},y)));if(null!==I.current)return clearTimeout(I.current),void(I.current=null);if(D.current&&null===L.current){const e=null!==T.current?Date.now()-T.current:b,r=Math.max(0,b-e);L.current=setTimeout(()=>{L.current=null,T.current=null,j(!1)},r)}},[M,y,b]),r(()=>()=>{null!==I.current&&clearTimeout(I.current),null!==L.current&&clearTimeout(L.current)},[]),r(()=>{V?w?k.setValue(1):i.timing(k,{toValue:1,duration:C.motion.duration.normal,easing:a.bezier(...C.motion.easing.standard),useNativeDriver:!0}).start():k.setValue(0)},[V,w,k,C]),r(()=>{if(!V)return;const e=u.addEventListener("hardwareBackPress",()=>!0);return()=>{e.remove()}},[V]);const z=x.message;r(()=>{V&&z&&s.announceForAccessibility(z)},[V,z]);const R=t(()=>buildStyles(),[]);return V?g(i.View,{pointerEvents:"auto",testID:p,accessible:!0,accessibilityViewIsModal:!0,accessibilityLiveRegion:"polite",accessibilityLabel:z??"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},style:[R.overlay,{backgroundColor:l??C.colors.background.overlay,opacity:k}],children:e?e(z):g(f,{size:"lg",message:z})}):null};const buildStyles=()=>l.create({overlay:{...l.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3}});

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

@@ -1,4 +1 @@
-"use strict";
-
-export { LoaderOverlay, loader, useLoader } from "./LoaderOverlay.js";
-//# sourceMappingURL=index.js.map
+export{LoaderOverlay,loader,useLoader}from"./LoaderOverlay.js";

package/lib/module/components/Markdown/Markdown.js

@@ -1,270 +1 @@
-"use strict";
-
-import React, { useMemo } from 'react';
-import { Linking, Platform, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { Skeleton } from "../Skeleton/index.js";
-import { parseMarkdown } from "./parse.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const renderInline = (nodes, theme, onLinkPress, keyPrefix = 'i') => nodes.map((node, index) => {
-  const key = `${keyPrefix}-${index}`;
-  switch (node.type) {
-    case 'text':
-      return /*#__PURE__*/_jsx(Text, {
-        children: node.value
-      }, key);
-    case 'strong':
-      return /*#__PURE__*/_jsx(Text, {
-        style: {
-          fontWeight: theme.typography.fontWeight.bold
-        },
-        children: renderInline(node.children, theme, onLinkPress, key)
-      }, key);
-    case 'em':
-      return /*#__PURE__*/_jsx(Text, {
-        style: {
-          fontStyle: 'italic'
-        },
-        children: renderInline(node.children, theme, onLinkPress, key)
-      }, key);
-    case 'strike':
-      return /*#__PURE__*/_jsx(Text, {
-        style: {
-          textDecorationLine: 'line-through'
-        },
-        children: renderInline(node.children, theme, onLinkPress, key)
-      }, key);
-    case 'code':
-      return /*#__PURE__*/_jsx(Text, {
-        style: {
-          fontFamily: MONO,
-          backgroundColor: theme.colors.background.secondary,
-          color: theme.colors.text.primary
-        },
-        children: node.value
-      }, key);
-    case 'link':
-      return /*#__PURE__*/_jsx(Text, {
-        accessibilityRole: "link",
-        onPress: () => onLinkPress(node.href),
-        style: {
-          color: theme.colors.text.link,
-          textDecorationLine: 'underline'
-        },
-        children: renderInline(node.children, theme, onLinkPress, key)
-      }, key);
-    default:
-      return null;
-  }
-});
-
-/** The theme carries no monospace family, and code has to look like code. */
-const MONO = Platform.select({
-  ios: 'Menlo',
-  android: 'monospace',
-  default: 'monospace'
-});
-
-/** The theme's scale is xs/sm/base/lg/xl/2xl/3xl/4xl — no md, no xxl. */
-const HEADING_SCALE = {
-  1: '3xl',
-  2: '2xl',
-  3: 'xl',
-  4: 'lg',
-  5: 'base',
-  6: 'sm'
-};
-
-/**
- * Renders a small, deliberate subset of markdown using the theme's own type
- * scale and colours, with no dependency.
- *
- * It exists because Expo has no markdown module and the alternative on npm has
- * not shipped since 2022. What it covers is what our content contains: release
- * notes, help text and descriptions written by people. Nested lists, tables and
- * inline HTML are out of scope on purpose — see parse.ts.
- */
-export const Markdown = ({
-  children,
-  onLinkPress,
-  loading = false,
-  style,
-  textStyle,
-  testID
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => createStyles(theme), [theme]);
-  const blocks = useMemo(() => parseMarkdown(children ?? ''), [children]);
-  const handleLink = href => {
-    if (onLinkPress) {
-      onLinkPress(href);
-      return;
-    }
-    // Rejections are swallowed: a link the OS cannot open is not a crash, and
-    // there is no useful recovery from inside a text run.
-    void Linking.openURL(href).catch(() => undefined);
-  };
-  if (loading) {
-    return /*#__PURE__*/_jsx(MarkdownSkeleton, {
-      style: style,
-      testID: testID
-    });
-  }
-  if (blocks.length === 0) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: style,
-    testID: testID,
-    children: blocks.map((block, index) => /*#__PURE__*/_jsx(MarkdownBlock, {
-      block: block,
-      theme: theme,
-      styles: styles,
-      textStyle: textStyle,
-      onLinkPress: handleLink
-    }, `b-${index}`))
-  });
-};
-Markdown.displayName = 'Markdown';
-const MarkdownBlock = ({
-  block,
-  theme,
-  styles,
-  textStyle,
-  onLinkPress
-}) => {
-  switch (block.type) {
-    case 'heading':
-      return /*#__PURE__*/_jsx(Text, {
-        accessibilityRole: "header",
-        style: [styles.block, {
-          fontSize: theme.typography.fontSize[HEADING_SCALE[block.level]],
-          fontWeight: theme.typography.fontWeight.semibold,
-          color: theme.colors.text.primary
-        }, textStyle],
-        children: renderInline(block.children, theme, onLinkPress)
-      });
-    case 'paragraph':
-      return /*#__PURE__*/_jsx(Text, {
-        style: [styles.block, styles.body, textStyle],
-        children: renderInline(block.children, theme, onLinkPress)
-      });
-    case 'listItem':
-      return /*#__PURE__*/_jsxs(View, {
-        style: [styles.listRow, {
-          marginLeft: block.depth * theme.spacing.md
-        }],
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.body, styles.bullet, textStyle],
-          children: block.ordered ? `${block.index}.` : '•'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.body, styles.listText, textStyle],
-          children: renderInline(block.children, theme, onLinkPress)
-        })]
-      });
-    case 'quote':
-      return /*#__PURE__*/_jsx(View, {
-        style: styles.quote,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.body, styles.quoteText, textStyle],
-          children: renderInline(block.children, theme, onLinkPress)
-        })
-      });
-    case 'codeBlock':
-      return /*#__PURE__*/_jsx(View, {
-        style: styles.codeBlock,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.codeText,
-          children: block.value
-        })
-      });
-    case 'rule':
-      return /*#__PURE__*/_jsx(View, {
-        style: styles.rule
-      });
-    default:
-      return null;
-  }
-};
-const MarkdownSkeleton = ({
-  style,
-  testID
-}) => /*#__PURE__*/_jsxs(View, {
-  style: style,
-  testID: testID,
-  children: [/*#__PURE__*/_jsx(Skeleton, {
-    shape: "text",
-    width: "70%",
-    height: 20,
-    style: {
-      marginBottom: 8
-    }
-  }), /*#__PURE__*/_jsx(Skeleton, {
-    shape: "text",
-    width: "100%",
-    height: 14,
-    style: {
-      marginBottom: 6
-    }
-  }), /*#__PURE__*/_jsx(Skeleton, {
-    shape: "text",
-    width: "92%",
-    height: 14,
-    style: {
-      marginBottom: 6
-    }
-  }), /*#__PURE__*/_jsx(Skeleton, {
-    shape: "text",
-    width: "60%",
-    height: 14
-  })]
-});
-const createStyles = theme => StyleSheet.create({
-  block: {
-    marginBottom: theme.spacing.sm
-  },
-  body: {
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.text.primary,
-    lineHeight: theme.typography.fontSize.base * 1.5
-  },
-  listRow: {
-    flexDirection: 'row',
-    marginBottom: theme.spacing.xs
-  },
-  bullet: {
-    width: theme.spacing.lg
-  },
-  listText: {
-    flex: 1
-  },
-  quote: {
-    borderLeftWidth: 3,
-    borderLeftColor: theme.colors.border.secondary,
-    paddingLeft: theme.spacing.sm,
-    marginBottom: theme.spacing.sm
-  },
-  quoteText: {
-    color: theme.colors.text.secondary,
-    fontStyle: 'italic'
-  },
-  codeBlock: {
-    backgroundColor: theme.colors.background.secondary,
-    borderRadius: theme.radius.sm,
-    ...smoothCorners,
-    padding: theme.spacing.sm,
-    marginBottom: theme.spacing.sm
-  },
-  codeText: {
-    fontFamily: MONO,
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.text.primary
-  },
-  rule: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: theme.colors.border.primary,
-    marginVertical: theme.spacing.md
-  }
-});
-//# sourceMappingURL=Markdown.js.map
+import e,{useMemo as t}from"react";import{Linking as r,Platform as o,StyleSheet as l,Text as i,View as n}from"react-native";import{useTheme as s}from"../../theme/index.js";import{smoothCorners as c}from"../../utils/corners.js";import{Skeleton as a}from"../Skeleton/index.js";import{parseMarkdown as d}from"./parse.js";import{jsx as h,jsxs as y}from"react/jsx-runtime";const renderInline=(e,t,r,o="i")=>e.map((e,l)=>{const n=`${o}-${l}`;switch(e.type){case"text":return h(i,{children:e.value},n);case"strong":return h(i,{style:{fontWeight:t.typography.fontWeight.bold},children:renderInline(e.children,t,r,n)},n);case"em":return h(i,{style:{fontStyle:"italic"},children:renderInline(e.children,t,r,n)},n);case"strike":return h(i,{style:{textDecorationLine:"line-through"},children:renderInline(e.children,t,r,n)},n);case"code":return h(i,{style:{fontFamily:m,backgroundColor:t.colors.background.secondary,color:t.colors.text.primary},children:e.value},n);case"link":return h(i,{accessibilityRole:"link",onPress:()=>r(e.href),style:{color:t.colors.text.link,textDecorationLine:"underline"},children:renderInline(e.children,t,r,n)},n);default:return null}}),m=o.select({ios:"Menlo",android:"monospace",default:"monospace"}),p={1:"3xl",2:"2xl",3:"xl",4:"lg",5:"base",6:"sm"};export const Markdown=({children:e,onLinkPress:o,loading:l=!1,style:i,textStyle:c,testID:a})=>{const y=s(),m=t(()=>createStyles(y),[y]),p=t(()=>d(e??""),[e]),handleLink=e=>{o?o(e):r.openURL(e).catch(()=>{})};return l?h(MarkdownSkeleton,{style:i,testID:a}):0===p.length?null:h(n,{style:i,testID:a,children:p.map((e,t)=>h(MarkdownBlock,{block:e,theme:y,styles:m,textStyle:c,onLinkPress:handleLink},`b-${t}`))})};Markdown.displayName="Markdown";const MarkdownBlock=({block:e,theme:t,styles:r,textStyle:o,onLinkPress:l})=>{switch(e.type){case"heading":return h(i,{accessibilityRole:"header",style:[r.block,{fontSize:t.typography.fontSize[p[e.level]],fontWeight:t.typography.fontWeight.semibold,color:t.colors.text.primary},o],children:renderInline(e.children,t,l)});case"paragraph":return h(i,{style:[r.block,r.body,o],children:renderInline(e.children,t,l)});case"listItem":return y(n,{style:[r.listRow,{marginLeft:e.depth*t.spacing.md}],children:[h(i,{style:[r.body,r.bullet,o],children:e.ordered?`${e.index}.`:"•"}),h(i,{style:[r.body,r.listText,o],children:renderInline(e.children,t,l)})]});case"quote":return h(n,{style:r.quote,children:h(i,{style:[r.body,r.quoteText,o],children:renderInline(e.children,t,l)})});case"codeBlock":return h(n,{style:r.codeBlock,children:h(i,{style:r.codeText,children:e.value})});case"rule":return h(n,{style:r.rule});default:return null}},MarkdownSkeleton=({style:e,testID:t})=>y(n,{style:e,testID:t,children:[h(a,{shape:"text",width:"70%",height:20,style:{marginBottom:8}}),h(a,{shape:"text",width:"100%",height:14,style:{marginBottom:6}}),h(a,{shape:"text",width:"92%",height:14,style:{marginBottom:6}}),h(a,{shape:"text",width:"60%",height:14})]}),createStyles=e=>l.create({block:{marginBottom:e.spacing.sm},body:{fontSize:e.typography.fontSize.base,color:e.colors.text.primary,lineHeight:1.5*e.typography.fontSize.base},listRow:{flexDirection:"row",marginBottom:e.spacing.xs},bullet:{width:e.spacing.lg},listText:{flex:1},quote:{borderLeftWidth:3,borderLeftColor:e.colors.border.secondary,paddingLeft:e.spacing.sm,marginBottom:e.spacing.sm},quoteText:{color:e.colors.text.secondary,fontStyle:"italic"},codeBlock:{backgroundColor:e.colors.background.secondary,borderRadius:e.radius.sm,...c,padding:e.spacing.sm,marginBottom:e.spacing.sm},codeText:{fontFamily:m,fontSize:e.typography.fontSize.sm,color:e.colors.text.primary},rule:{height:l.hairlineWidth,backgroundColor:e.colors.border.primary,marginVertical:e.spacing.md}});

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

@@ -1,4 +1 @@
-"use strict";
-
-export { Markdown } from "./Markdown.js";
-//# sourceMappingURL=index.js.map
+export{Markdown}from"./Markdown.js";