@joinskips/brand 6.0.0-develop.124 → 6.0.0-develop.126

package/chat/attachments.d.ts

@@ -2,8 +2,10 @@ export declare const ATTACHMENT_TYPES: string[];
 export declare const MAX_ATTACHMENT_BYTES: number;
 /** A picked file's type: the picker's own, else the one its name says, else none. */
 export declare function attachmentType(name: string, given?: string | null): string;
-/** Why a picked file cannot be sent, or null when it can. */
-export declare function attachmentProblem(file: {
+/** What attachmentProblem reads of a picked file. */
+export interface FileFacts {
     type: string;
     size: number;
-}): 'type' | 'size' | null;
+}
+/** Why a picked file cannot be sent, or null when it can. */
+export declare function attachmentProblem(file: FileFacts): 'type' | 'size' | null;

package/chat/components/Bubble.d.ts

@@ -1,4 +1,5 @@
-export declare function Bubble({ mine, text }: {
+export interface BubbleProps {
     mine?: boolean;
     text: string;
-}): import("react").JSX.Element;
+}
+export declare function Bubble({ mine, text }: BubbleProps): import("react").JSX.Element;

package/chat/components/Bubble.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text, View } from 'react-native';
 import { Markdown } from "./Markdown.js";
-// The member's line in the accent and exactly as typed, Skips' on a card with its Markdown drawn, each with its
-// tail corner tighter.
 export function Bubble({ mine = false, text }) {
     if (mine) {
         return (_jsx(Text, { className: "rounded-[20px] rounded-br-[7px] bg-accent px-4 py-2.5 font-ui text-md text-accent-ink", children: text }));

package/chat/components/Conversation.js

@@ -10,7 +10,6 @@ const AVATAR_SIZE = 32;
 export const PHOTO_RETRIES = 5;
 export const PHOTO_RETRY_MS = 1_500;
 const MIN_BOTTOM_SPACE = 12;
-// React Native text inherits no font from the screen, so each line carries it.
 function Line({ className, ...props }) {
     return _jsx(Text, { className: `font-ui ${className}`, ...props });
 }
@@ -71,11 +70,14 @@ function ThreadRow({ item, words, onRetry, ...props }) {
     const sentAt = Math.max(...messages.map((m) => m.sentAt));
     return (_jsxs(View, { className: `max-w-[82%] gap-1 ${mine ? 'items-end self-end' : 'items-start self-start'}`, children: [messages.map((message, index) => (_jsxs(View, { className: "flex-row items-end gap-2", children: [mine ? null : index === messages.length - 1 ? (_jsx(SenderAvatar, { sender: sender, name: name, skipMark: props.skipMark })) : (_jsx(View, { className: "w-8" })), _jsxs(View, { className: `shrink gap-2 ${mine ? 'items-end' : 'items-start'}`, children: [message.attachments.map((attachment) => (_jsx(Attachment, { attachment: attachment, words: words, Icon: props.Icon }, attachment.url))), message.text ? _jsx(Bubble, { mine: mine, text: message.text }) : null] })] }, message.id))), _jsx(Line, { className: `px-1 text-xs text-ink-secondary ${mine ? '' : 'ml-10'}`, children: `${name} · ${words.messageTime(sentAt)}` })] }));
 }
+// A failed line is a button to send it again, and its note is announced.
+const BUTTON_ROLE = 'button';
+const ALERT_ROLE = 'alert';
 function Unsent({ message, words, onRetry, Icon, }) {
     const failed = message.delivery === 'failed';
-    return (_jsxs(Pressable, { ...(failed ? { role: 'button' } : {}), disabled: !failed, onPress: () => {
+    return (_jsxs(Pressable, { ...(failed ? { role: BUTTON_ROLE } : {}), disabled: !failed, onPress: () => {
             onRetry(message.id);
-        }, className: `max-w-[82%] items-end gap-1 self-end ${failed ? '' : 'opacity-70'}`, children: [message.file ? _jsx(PickedPreview, { picked: message.file, words: words, Icon: Icon }) : null, message.text ? _jsx(Bubble, { mine: true, text: message.text }) : null, _jsx(Line, { ...(failed ? { role: 'alert' } : {}), className: `px-1 text-xs ${failed ? 'text-error-ink' : 'text-ink-secondary'}`, children: `${words.you} · ${failed ? words.notSent : words.sending}` })] }));
+        }, className: `max-w-[82%] items-end gap-1 self-end ${failed ? '' : 'opacity-70'}`, children: [message.file ? _jsx(PickedPreview, { picked: message.file, words: words, Icon: Icon }) : null, message.text ? _jsx(Bubble, { mine: true, text: message.text }) : null, _jsx(Line, { ...(failed ? { role: ALERT_ROLE } : {}), className: `px-1 text-xs ${failed ? 'text-error-ink' : 'text-ink-secondary'}`, children: `${words.you} · ${failed ? words.notSent : words.sending}` })] }));
 }
 // Skip's mark, or a care team member's photo, or their initial when they have none or it does not load.
 function SenderAvatar({ sender, name, skipMark, }) {
@@ -87,12 +89,10 @@ function SenderAvatar({ sender, name, skipMark, }) {
                 setFailed(true);
             }, style: { width: AVATAR_SIZE, height: AVATAR_SIZE } })) : (_jsx(Line, { className: "text-sm font-semibold text-ink", children: name.trim().charAt(0).toUpperCase() })) }));
 }
-// Brand's attachment card, with what kind of file it is under the name.
 function FileCard({ name, detail, Icon }) {
     const secondary = useColor('ink-secondary');
     return (_jsxs(View, { className: "w-80 max-w-full flex-row items-center gap-3 rounded-control border border-line-subtle bg-surface p-3", children: [_jsx(Icon, { name: "file", color: secondary, size: 20 }), _jsxs(View, { className: "flex-1", children: [_jsx(Line, { className: "text-sm text-ink", numberOfLines: 1, children: name }), _jsx(Line, { className: "text-xs text-ink-secondary", children: detail })] })] }));
 }
-// A picked file on its way: the photo itself, or a PDF's card with its size.
 function PickedPreview({ picked, words, Icon }) {
     if (isPhoto(picked)) {
         return (_jsx(Image, { source: { uri: picked.uri }, accessibilityLabel: `${words.photo} ${picked.name}`, resizeMode: "cover", className: "h-48 w-48 rounded-control bg-muted" }));

package/chat/components/Markdown.d.ts

@@ -1,3 +1,4 @@
-export declare function Markdown({ text }: {
+export interface MarkdownProps {
     text: string;
-}): import("react").JSX.Element;
+}
+export declare function Markdown({ text }: MarkdownProps): import("react").JSX.Element;

package/chat/components/Markdown.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Linking, Text, View } from 'react-native';
 import { readMarkdown } from "../markdown.js";
-// A line from Skips as the care team wrote it: its Markdown drawn as text, with no HTML taken from it.
 function Inlines({ nodes }) {
     return nodes.map((node, i) => _jsx(InlineNode, { node: node }, `${String(i)}-${node.type}`));
 }

package/chat/components/Welcome.d.ts

@@ -20,14 +20,14 @@ export interface WelcomeWords {
     codeRanOut: string;
     typing: string;
 }
-/** The choice under Skip's welcome: log in as a member, or go on here as someone new. */
-export declare function WelcomeChoice({ words, onLogIn, onContinueHere, }: {
+export interface WelcomeChoiceProps {
     words: WelcomeWords;
     onLogIn: () => void;
     onContinueHere: () => void;
-}): import("react").JSX.Element;
-/** The answers to Skip's question, all drawn alike. One answer only: while one is on its way, none can be pressed. */
-export declare function Choices({ items, question, sending, holding, failed, words, onChoose, }: {
+}
+/** The choice under Skip's welcome: log in as a member, or go on here as someone new. */
+export declare function WelcomeChoice({ words, onLogIn, onContinueHere, }: WelcomeChoiceProps): import("react").JSX.Element;
+export interface ChoicesProps {
     items: ChoiceItem[];
     question: string;
     sending: string | null;
@@ -35,24 +35,28 @@ export declare function Choices({ items, question, sending, holding, failed, wor
     failed: boolean;
     words: WelcomeWords;
     onChoose: (answer: ChoiceItem) => void;
-}): import("react").JSX.Element;
-/** The email asked for after Continue here, and again for a visitor changing it. */
-export declare function EmailStep({ words, onSubmit, initial, }: {
+}
+/** The answers to Skip's question, all drawn alike. One answer only: while one is on its way, none can be pressed. */
+export declare function Choices({ items, question, sending, holding, failed, words, onChoose, }: ChoicesProps): import("react").JSX.Element;
+export interface EmailStepProps {
     words: WelcomeWords;
     onSubmit: (email: string) => void;
     initial?: string;
-}): import("react").JSX.Element;
-/** The name asked of a visitor the Skips App does not know, with the way back to change a mistyped email. */
-export declare function NameStep({ words, onSubmit, onChangeEmail, }: {
+}
+/** The email asked for after Continue here, and again for a visitor changing it. */
+export declare function EmailStep({ words, onSubmit, initial, }: EmailStepProps): import("react").JSX.Element;
+export interface NameStepProps {
     words: WelcomeWords;
     onSubmit: (name: string) => void;
     onChangeEmail: () => void;
-}): import("react").JSX.Element;
+}
+/** The name asked of a visitor the Skips App does not know, with the way back to change a mistyped email. */
+export declare function NameStep({ words, onSubmit, onChangeEmail, }: NameStepProps): import("react").JSX.Element;
 /**
  * The code emailed to the visitor, one digit to a box over one real field, so typing, deleting, a paste and the
  * phone's own code suggestion work as in any field. The chat mounts it afresh for each code that goes out.
  */
-export declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs, onSubmit, onResend, onChangeEmail, }: {
+export interface CodeStepProps {
     words: WelcomeWords;
     length: number;
     noMatch: boolean;
@@ -61,12 +65,14 @@ export declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs
     onSubmit: (code: string) => void;
     onResend: () => void;
     onChangeEmail: () => void;
-}): import("react").JSX.Element;
+}
+export declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs, onSubmit, onResend, onChangeEmail, }: CodeStepProps): import("react").JSX.Element;
 export declare const DOT_REST_OPACITY = 0.35;
 export declare const DOT_RISE = 3;
 export declare const DOT_STILL_OPACITY = 0.6;
 /** Skip writing a reply: three dots rising in turn in Skip's bubble beside Skip's mark, announced as a status. */
-export declare function SkipTyping({ label, skipMark }: {
+export interface SkipTypingProps {
     label: string;
     skipMark: ImageSourcePropType;
-}): import("react").JSX.Element;
+}
+export declare function SkipTyping({ label, skipMark }: SkipTypingProps): import("react").JSX.Element;

package/chat/components/Welcome.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { AccessibilityInfo, ActivityIndicator, Animated, Image, Pressable, Text, TextInput, View } from 'react-native';
 import { DOT_CYCLE_MS } from "../skipTyping.js";
 import { codeDigits, completesCode, EMAIL_MAX_LENGTH, givenEmail, givenName, NAME_MAX_LENGTH, RESEND_AFTER_MS, resendClock, } from "../welcome.js";
@@ -51,7 +51,6 @@ export function NameStep({ words, onSubmit, onChangeEmail, }) {
     return (_jsx(StepField, { label: words.nameLabel, error: words.nameError, submitLabel: words.nameSubmit, input: { autoComplete: 'name', maxLength: NAME_MAX_LENGTH, autoCapitalize: 'words' }, usable: givenName, onSubmit: onSubmit, aside: { label: words.changeEmail, onPress: onChangeEmail } }));
 }
 const TICK_MS = 250;
-// Send new code, held back until the wait is over, and the wait beside it.
 function NewCode({ waitMs, words, onResend }) {
     const [secondsLeft, setSecondsLeft] = useState(Math.ceil(waitMs / 1000));
     useEffect(() => {
@@ -68,10 +67,6 @@ function NewCode({ waitMs, words, onResend }) {
     }, [waitMs]);
     return (_jsxs(_Fragment, { children: [_jsx(Pill, { label: words.resend, look: "flat", disabled: secondsLeft > 0, onPress: onResend }), secondsLeft > 0 ? (_jsx(Text, { role: "timer", accessibilityLabel: words.resendWait, className: "font-ui text-sm text-ink-secondary", children: resendClock(secondsLeft) })) : null] }));
 }
-/**
- * The code emailed to the visitor, one digit to a box over one real field, so typing, deleting, a paste and the
- * phone's own code suggestion work as in any field. The chat mounts it afresh for each code that goes out.
- */
 export function CodeStep({ words, length, noMatch, ranOut, resendAfterMs = RESEND_AFTER_MS, onSubmit, onResend, onChangeEmail, }) {
     const [code, setCode] = useState('');
     const [focused, setFocused] = useState(false);
@@ -106,7 +101,9 @@ export const DOT_STILL_OPACITY = 0.6;
 function useReducedMotion() {
     const [reduced, setReduced] = useState(null);
     useEffect(() => {
-        void AccessibilityInfo.isReduceMotionEnabled().then(setReduced);
+        void (async () => {
+            setReduced(await AccessibilityInfo.isReduceMotionEnabled());
+        })();
         const change = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduced);
         return () => {
             change.remove();
@@ -114,12 +111,12 @@ function useReducedMotion() {
     }, []);
     return reduced;
 }
-/** Skip writing a reply: three dots rising in turn in Skip's bubble beside Skip's mark, announced as a status. */
 export function SkipTyping({ label, skipMark }) {
     const dotColor = useColor('ink-secondary');
     const reduced = useReducedMotion();
     const still = reduced === true;
-    const rise = useRef(DOTS.map(() => new Animated.Value(0))).current;
+    // Made once and kept, so render reads no ref.
+    const [rise] = useState(() => DOTS.map(() => new Animated.Value(0)));
     useEffect(() => {
         if (reduced !== false)
             return undefined;

package/chat/components/parts.d.ts

@@ -1,11 +1,17 @@
 import type { ComponentType } from 'react';
 /** The icons the chat draws, from the brand's interface icons, which each app already draws. */
 export type ChatIconName = 'attach' | 'arrow-right' | 'file' | 'close';
-export type ChatIcon = ComponentType<{
+export interface ChatIconProps {
     name: ChatIconName;
     color: string;
     size: number;
-}>;
+}
+export type ChatIcon = ComponentType<ChatIconProps>;
+/** The two reasons an attachment is refused, in the chat's words. */
+export interface AttachmentRefusedWords {
+    type: string;
+    size: string;
+}
 /** Every word the chat shows, which each app passes in. */
 export interface ChatWords {
     composerPlaceholder: string;
@@ -23,10 +29,7 @@ export interface ChatWords {
     feedDown: string;
     loading: string;
     loadFailed: string;
-    attachmentRefused: {
-        type: string;
-        size: string;
-    };
+    attachmentRefused: AttachmentRefusedWords;
     fileKind: (name: string) => string;
     fileSize: (bytes: number) => string;
     messageTime: (ms: number) => string;

package/chat/thread.d.ts

@@ -25,16 +25,19 @@ export declare function withReceivedAll(thread: Thread, messages: ChatMessage[])
 export declare const CLUSTER_GAP_MS = 120000;
 /** Who a run is from: the member, Skip, or a person on the care team. */
 export type RunSender = 'mine' | 'skip' | ChatAuthor;
-export type ThreadItem = {
+export interface NoticeItem {
     kind: 'notice';
     message: ThreadMessage;
-} | {
+}
+export interface UnsentItem {
     kind: 'unsent';
     message: ThreadMessage;
-} | {
+}
+export interface RunItem {
     kind: 'run';
     sender: RunSender;
     messages: ThreadMessage[];
-};
+}
+export type ThreadItem = NoticeItem | UnsentItem | RunItem;
 /** Notices and the member's unsent lines on their own, every other line in runs by sender, in order. */
 export declare function groupThread(messages: ThreadMessage[], skipUserId: number | null): ThreadItem[];

package/chat/typing.js

@@ -15,8 +15,10 @@ export function createTypingSignal(send) {
     };
     return {
         typed(text) {
-            if (!text.trim())
-                return stop();
+            if (!text.trim()) {
+                stop();
+                return;
+            }
             if (!typing)
                 send((typing = true));
             if (idle)
@@ -29,7 +31,9 @@ export function createTypingSignal(send) {
 /** Who on the care team is typing, each cleared after TYPING_CLEAR_MS without news. */
 export function createTypingWatch(onChange) {
     const timers = new Map();
-    const publish = () => onChange([...timers.keys()]);
+    const publish = () => {
+        onChange([...timers.keys()]);
+    };
     const clear = (name) => {
         const timer = timers.get(name);
         if (!timer)
@@ -40,12 +44,16 @@ export function createTypingWatch(onChange) {
     };
     return {
         update(name, typing) {
-            if (!typing)
-                return clear(name);
+            if (!typing) {
+                clear(name);
+                return;
+            }
             const timer = timers.get(name);
             if (timer)
                 clearTimeout(timer);
-            timers.set(name, setTimeout(() => clear(name), TYPING_CLEAR_MS));
+            timers.set(name, setTimeout(() => {
+                clear(name);
+            }, TYPING_CLEAR_MS));
             if (!timer)
                 publish();
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joinskips/brand",
-  "version": "6.0.0-develop.124",
+  "version": "6.0.0-develop.126",
   "description": "Skips design tokens, Onest, logos, favicons, interface icons, member pictures and app icons.",
   "license": "UNLICENSED",
   "homepage": "https://brand.joinskips.com",