@pushwoosh/dumb-components 4.5.1 → 4.7.0

package/Modal/components/ModalName/ModalName.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { Banner } from '../../../Banner';
+import { Button } from '../../../Button';
+import { FieldBox } from '../../../FieldBox';
+import { NativeInput } from '../../../native';
+import { useLang } from '../../polyglot';
+import { Modal } from '../Modal';
+import { ModalBody, ModalFooter, ModalHeader } from '../ModalContent';
+import { ModalTitle } from '../ModalTitle';
+function ModalNameDialog(props) {
+  const {
+    title,
+    description,
+    label,
+    placeholder,
+    initialName = '',
+    suggestedName,
+    initialWarning,
+    initialError,
+    maxLength,
+    submitText,
+    cancelText,
+    onSubmit,
+    onClose
+  } = props;
+  const lang = useLang();
+  const inputRef = useRef(null);
+  const [name, setName] = useState(suggestedName ?? initialName);
+  const [isEmptyError, setIsEmptyError] = useState(false);
+  const [error, setError] = useState(initialError);
+  const [warning, setWarning] = useState(initialWarning ? {
+    name: initialName.trim(),
+    content: initialWarning
+  } : undefined);
+  const [isSaving, setIsSaving] = useState(false);
+  const trimmedName = name.trim();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => inputRef.current?.select());
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  const close = () => {
+    if (!isSaving) {
+      onClose();
+    }
+  };
+  const submit = async event => {
+    event.preventDefault();
+    if (isSaving) {
+      return;
+    }
+    if (!trimmedName) {
+      setIsEmptyError(true);
+      inputRef.current?.focus();
+      return;
+    }
+    if (!warning && !error && trimmedName === initialName.trim()) {
+      onClose();
+      return;
+    }
+    setIsSaving(true);
+    setError(undefined);
+    try {
+      const result = await onSubmit(trimmedName);
+      setWarning(result?.warning ? {
+        name: trimmedName,
+        content: result.warning
+      } : undefined);
+      setError(result?.error);
+    } catch (e) {
+      setWarning(undefined);
+      setError(e?.message || lang({
+        message: 'DUMB.MODAL.UNEXPECTED_ERROR'
+      }));
+    } finally {
+      setIsSaving(false);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  };
+  return _jsx(Modal, {
+    size: "small",
+    isOpen: true,
+    onClose: close,
+    children: _jsxs("form", {
+      onSubmit: submit,
+      children: [_jsx(ModalHeader, {
+        children: _jsx(ModalTitle, {
+          children: title
+        })
+      }), _jsx(ModalBody, {
+        children: _jsxs(Vertical, {
+          "$gap": 16,
+          children: [description && _jsx(Paragraph, {
+            children: description
+          }), _jsx(FieldBox, {
+            title: label,
+            error: error,
+            children: _jsx(NativeInput, {
+              ref: inputRef,
+              type: "text",
+              value: name,
+              placeholder: placeholder,
+              maxLength: maxLength,
+              disabled: isSaving,
+              "$isErrored": isEmptyError || !!error,
+              "aria-invalid": isEmptyError || !!error,
+              onChange: event => {
+                setName(event.target.value);
+                setIsEmptyError(false);
+              }
+            })
+          }), warning && warning.name === trimmedName && _jsx(Banner, {
+            type: "warning",
+            title: warning.content
+          })]
+        })
+      }), _jsx(ModalFooter, {
+        children: _jsxs(Horizontal, {
+          "$justifyContent": "end",
+          "$gap": 8,
+          children: [_jsx(Button, {
+            color: "secondary",
+            isDisabled: isSaving,
+            onClick: close,
+            children: cancelText ?? lang({
+              message: 'DUMB.MODAL.CANCEL'
+            })
+          }), _jsx(Button, {
+            color: "primary",
+            type: "submit",
+            isLoading: isSaving,
+            children: submitText ?? lang({
+              message: 'DUMB.MODAL.SAVE'
+            })
+          })]
+        })
+      })]
+    })
+  });
+}
+/** Asks for an entity name on save, rename or with a suggestion; warnings and errors go under the field. */
+export function ModalName({
+  isOpen,
+  ...props
+}) {
+  return isOpen ? _jsx(ModalNameDialog, {
+    ...props
+  }) : null;
+}

package/Modal/components/ModalName/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalName } from './ModalName';
+export type { ModalNameProps, ModalNameResult } from './types';

package/Modal/components/ModalName/index.js

@@ -0,0 +1 @@
+export { ModalName } from './ModalName';

package/Modal/components/ModalName/types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+/** What {@link ModalNameProps.onSubmit} reports back; nothing means the name was saved. */
+export type ModalNameResult = void | {
+    /** Keeps the dialog open with an orange banner under the field, e.g. "name already taken". */
+    warning?: string;
+    /** Keeps the dialog open with the message under the field. */
+    error?: string;
+};
+/** Props of {@link ModalName}. */
+export interface ModalNameProps {
+    /** Whether the dialog is open; every opening starts from `initialName`. */
+    isOpen: boolean;
+    /** Heading, e.g. "Save the segment". */
+    title: string;
+    /** Hint above the field. */
+    description?: ReactNode;
+    /** Caption of the field. */
+    label: string;
+    /** Example name ending with an ellipsis, e.g. "Active buyers in Germany…". */
+    placeholder?: string;
+    /** Value the field opens with, e.g. the current name when renaming; Save without changes just closes. */
+    initialName?: string;
+    /** Name proposed by the screen, e.g. the push title; the field opens with it selected and Save saves it as is. */
+    suggestedName?: string;
+    /** Banner shown on opening while the field still holds `initialName`. */
+    initialWarning?: string;
+    /** Error shown under the field on opening, e.g. the name typed in the header is too long. */
+    initialError?: string;
+    /** Field length limit. */
+    maxLength?: number;
+    /** Save button caption (defaults to localized "Save"). */
+    submitText?: string;
+    /** Cancel button caption (defaults to localized "Cancel"). */
+    cancelText?: string;
+    /** Called with the trimmed non-empty name; a throw is shown as an error. */
+    onSubmit: (name: string) => ModalNameResult | Promise<ModalNameResult>;
+    /** Called on Cancel or Escape. */
+    onClose: () => void;
+}

package/Modal/components/ModalName/types.js

@@ -0,0 +1 @@
+export {};

package/Modal/index.d.ts

@@ -1,4 +1,5 @@
 export { Modal } from './components/Modal';
 export { ModalTitle } from './components/ModalTitle';
+export { ModalName, type ModalNameProps, type ModalNameResult } from './components/ModalName';
 export { ModalConfirm, ModalConfirmProvider, useModalConfirm, } from './components/ModalConfirm';
 export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './components/ModalContent';

package/Modal/index.js

@@ -1,4 +1,5 @@
 export { Modal } from './components/Modal';
 export { ModalTitle } from './components/ModalTitle';
+export { ModalName } from './components/ModalName';
 export { ModalConfirm, ModalConfirmProvider, useModalConfirm } from './components/ModalConfirm';
 export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './components/ModalContent';

package/Modal/polyglot/messages_ar.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'تأكيد الإجراء',
   'DUMB.MODAL.CONFIRM': 'تأكيد',
   'DUMB.MODAL.CANCEL': 'إلغاء',
+  'DUMB.MODAL.SAVE': 'حفظ',
   'DUMB.MODAL.CLOSE': 'إغلاق'
 };

package/Modal/polyglot/messages_bn.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'ক্রিয়াটি নিশ্চিত করুন',
   'DUMB.MODAL.CONFIRM': 'নিশ্চিত করুন',
   'DUMB.MODAL.CANCEL': 'বাতিল করুন',
+  'DUMB.MODAL.SAVE': 'সংরক্ষণ করুন',
   'DUMB.MODAL.CLOSE': 'বন্ধ করুন'
 };

package/Modal/polyglot/messages_de.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Aktion bestätigen',
   'DUMB.MODAL.CONFIRM': 'Bestätigen',
   'DUMB.MODAL.CANCEL': 'Abbrechen',
+  'DUMB.MODAL.SAVE': 'Speichern',
   'DUMB.MODAL.CLOSE': 'Schließen'
 };

package/Modal/polyglot/messages_en.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirm action',
   'DUMB.MODAL.CONFIRM': 'Confirm',
   'DUMB.MODAL.CANCEL': 'Cancel',
+  'DUMB.MODAL.SAVE': 'Save',
   'DUMB.MODAL.CLOSE': 'Close'
 };

package/Modal/polyglot/messages_es.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmar acción',
   'DUMB.MODAL.CONFIRM': 'Confirmar',
   'DUMB.MODAL.CANCEL': 'Cancelar',
+  'DUMB.MODAL.SAVE': 'Guardar',
   'DUMB.MODAL.CLOSE': 'Cerrar'
 };

package/Modal/polyglot/messages_fr.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmer l’action',
   'DUMB.MODAL.CONFIRM': 'Confirmer',
   'DUMB.MODAL.CANCEL': 'Annuler',
+  'DUMB.MODAL.SAVE': 'Enregistrer',
   'DUMB.MODAL.CLOSE': 'Fermer'
 };

package/Modal/polyglot/messages_he.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'אישור פעולה',
   'DUMB.MODAL.CONFIRM': 'אישור',
   'DUMB.MODAL.CANCEL': 'ביטול',
+  'DUMB.MODAL.SAVE': 'שמירה',
   'DUMB.MODAL.CLOSE': 'סגירה'
 };

package/Modal/polyglot/messages_hi.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'कार्रवाई की पुष्टि करें',
   'DUMB.MODAL.CONFIRM': 'पुष्टि करें',
   'DUMB.MODAL.CANCEL': 'रद्द करें',
+  'DUMB.MODAL.SAVE': 'सहेजें',
   'DUMB.MODAL.CLOSE': 'बंद करें'
 };

package/Modal/polyglot/messages_ja.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': '操作の確認',
   'DUMB.MODAL.CONFIRM': '確認',
   'DUMB.MODAL.CANCEL': 'キャンセル',
+  'DUMB.MODAL.SAVE': '保存',
   'DUMB.MODAL.CLOSE': '閉じる'
 };

package/Modal/polyglot/messages_ko.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': '작업 확인',
   'DUMB.MODAL.CONFIRM': '확인',
   'DUMB.MODAL.CANCEL': '취소',
+  'DUMB.MODAL.SAVE': '저장',
   'DUMB.MODAL.CLOSE': '닫기'
 };

package/Modal/polyglot/messages_pt.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmar ação',
   'DUMB.MODAL.CONFIRM': 'Confirmar',
   'DUMB.MODAL.CANCEL': 'Cancelar',
+  'DUMB.MODAL.SAVE': 'Salvar',
   'DUMB.MODAL.CLOSE': 'Fechar'
 };

package/Modal/polyglot/messages_ru.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Подтвердите действие',
   'DUMB.MODAL.CONFIRM': 'Подтвердить',
   'DUMB.MODAL.CANCEL': 'Отмена',
+  'DUMB.MODAL.SAVE': 'Сохранить',
   'DUMB.MODAL.CLOSE': 'Закрыть'
 };

package/Modal/polyglot/messages_th.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'ยืนยันการดำเนินการ',
   'DUMB.MODAL.CONFIRM': 'ยืนยัน',
   'DUMB.MODAL.CANCEL': 'ยกเลิก',
+  'DUMB.MODAL.SAVE': 'บันทึก',
   'DUMB.MODAL.CLOSE': 'ปิด'
 };

package/Modal/polyglot/messages_zh.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': '确认操作',
   'DUMB.MODAL.CONFIRM': '确认',
   'DUMB.MODAL.CANCEL': '取消',
+  'DUMB.MODAL.SAVE': '保存',
   'DUMB.MODAL.CLOSE': '关闭'
 };

package/Modal/polyglot/types.d.ts

@@ -4,5 +4,6 @@ export type ModalMessages = {
     'DUMB.MODAL.CONFIRM_TITLE': NoParams;
     'DUMB.MODAL.CONFIRM': NoParams;
     'DUMB.MODAL.CANCEL': NoParams;
+    'DUMB.MODAL.SAVE': NoParams;
     'DUMB.MODAL.CLOSE': NoParams;
 };

package/PageHeader/components/Rename/Rename.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { RenameProps } from './types';
-/** Editable name for `PageHeader` `titleExtra`: click to edit in place, Enter or blur commits, Escape reverts. */
+/** Editable name for `PageHeader` `titleExtra`: click to edit, Enter or blur commits, Escape reverts; pairs with `ModalName`. */
 export declare function Rename(props: RenameProps): ReactElement;

package/PageHeader/components/Rename/Rename.js

@@ -6,7 +6,7 @@ import { PAGE_HEADER_RENAME_ATTRIBUTE } from '../../constants';
 const RENAME_MARK = {
   [PAGE_HEADER_RENAME_ATTRIBUTE]: true
 };
-/** Editable name for `PageHeader` `titleExtra`: click to edit in place, Enter or blur commits, Escape reverts. */
+/** Editable name for `PageHeader` `titleExtra`: click to edit, Enter or blur commits, Escape reverts; pairs with `ModalName`. */
 export function Rename(props) {
   const {
     value,

package/WhatsAppPreview/components/WhatsAppMessageContent/WhatsAppMessageContent.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MessageText } from './styles';
+import { WhatsAppFormattedText } from '../../../shared/whatsAppMarkup';
 import { drawableAttachments } from '../../helpers';
 import { WhatsAppAttachment } from '../WhatsAppAttachment';
-import { WhatsAppFormattedText } from '../WhatsAppFormattedText';
 /** Card body: attachments on top, message text underneath. */
 export function WhatsAppMessageContent(props) {
   const {

package/WhatsAppPreview/helpers.d.ts

@@ -1,7 +1,4 @@
-import type { WhatsAppTextNode } from './components/WhatsAppFormattedText/types';
 import type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage } from './types';
-/** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
-export declare function parseWhatsAppMarkup(text: string): WhatsAppTextNode[];
 /** File type shown on a document card: the name extension, or the MIME subtype when the name carries none. */
 export declare function getAttachmentExtension(attachment: WhatsAppAttachment): string;
 /** Picks how the attachment is drawn: explicit `kind` first, then the MIME type, then the extension. */

package/WhatsAppPreview/helpers.js

@@ -1,60 +1,4 @@
 import { WHATSAPP_ATTACHMENT_EXTENSIONS } from './constants';
-const MARKERS = [{
-  style: 'mono',
-  marker: '```'
-}, {
-  style: 'mono',
-  marker: '`'
-}, {
-  style: 'bold',
-  marker: '*'
-}, {
-  style: 'italic',
-  marker: '_'
-}, {
-  style: 'strike',
-  marker: '~'
-}];
-function findMarkerAt(text, index) {
-  return MARKERS.find(({
-    marker
-  }) => text.startsWith(marker, index)) || null;
-}
-/** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
-export function parseWhatsAppMarkup(text) {
-  const nodes = [];
-  let plain = '';
-  let index = 0;
-  const flush = () => {
-    if (plain) {
-      nodes.push({
-        text: plain
-      });
-      plain = '';
-    }
-  };
-  while (index < text.length) {
-    const found = findMarkerAt(text, index);
-    const openEnd = found ? index + found.marker.length : index;
-    const closeStart = found ? text.indexOf(found.marker, openEnd) : -1;
-    if (!found || closeStart <= openEnd) {
-      plain += text[index];
-      index += 1;
-      continue;
-    }
-    const inner = text.slice(openEnd, closeStart);
-    flush();
-    nodes.push({
-      style: found.style,
-      children: found.style === 'mono' ? [{
-        text: inner
-      }] : parseWhatsAppMarkup(inner)
-    });
-    index = closeStart + found.marker.length;
-  }
-  flush();
-  return nodes;
-}
 /** File type shown on a document card: the name extension, or the MIME subtype when the name carries none. */
 export function getAttachmentExtension(attachment) {
   const {

package/index.d.ts

@@ -13,7 +13,7 @@ export { GetStartedPage, type GetStartedPageCheckListView, type GetStartedPagePr
 export { EditableField } from './EditableField';
 export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';
-export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './Modal';
+export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalName, type ModalNameProps, type ModalNameResult, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './Modal';
 export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
@@ -37,6 +37,8 @@ export { PushStoriesPreview, hasStoryButton, normalizeStoryDuration, PUSH_STORIE
 export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES, type InboxLayoutType, type InboxPreviewPlatform, type InboxPreviewContent, type InboxPreviewProps, type InboxPreviewSlide, } from './InboxPreview';
 export { WhatsAppPreview } from './WhatsAppPreview';
 export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppPreviewProps, } from './WhatsAppPreview';
+export { ChatPreview } from './ChatPreview';
+export type { ChatButton, ChatButtonKind, ChatCard, ChatChannel, ChatCompatibility, ChatContent, ChatContentType, ChatHeader, ChatList, ChatListItem, ChatMedia, ChatMediaKind, ChatPreviewProps, ChatRcsLayout, } from './ChatPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable, Rename, } from './PageHeader';
 export { Steps, useSteps } from './Steps';

package/index.js

@@ -13,7 +13,7 @@ export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';
-export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './Modal';
+export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalName, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './Modal';
 export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
@@ -36,6 +36,7 @@ export { PushPreview } from './PushPreview';
 export { PushStoriesPreview, hasStoryButton, normalizeStoryDuration, PUSH_STORIES_ASPECT_RATIO, PUSH_STORIES_DEFAULT_DURATION, PUSH_STORIES_MAX_DURATION } from './PushStoriesPreview';
 export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES } from './InboxPreview';
 export { WhatsAppPreview } from './WhatsAppPreview';
+export { ChatPreview } from './ChatPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable, Rename } from './PageHeader';
 export { Steps, useSteps } from './Steps';

package/native/Input.js

@@ -6,4 +6,6 @@ export const NativeInput = styled.input.withConfig({
   componentId: "sc-oqkcxd-0"
 })(["height:", ";padding:0 calc(12px - 1px);border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";color:", ";-webkit-text-fill-color:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}&::placeholder{color:", ";-webkit-text-fill-color:", ";}"], UnitSize.FIELD_HEIGHT, ({
   $isErrored
-}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM, Color.PHANTOM);
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM, Color.PHANTOM);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.5.1",
+  "version": "4.7.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/{WhatsAppPreview/components/WhatsAppFormattedText → shared/whatsAppMarkup}/WhatsAppFormattedText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text } from '@pushwoosh/kit-typography';
-import { DynamicContentText } from '../../../shared/dynamicContent';
-import { parseWhatsAppMarkup } from '../../helpers';
+import { parseWhatsAppMarkup } from './parse';
+import { DynamicContentText } from '../dynamicContent';
 const TAGS = {
   bold: 'b',
   italic: 'i',

package/shared/whatsAppMarkup/index.d.ts

@@ -0,0 +1,3 @@
+export { WhatsAppFormattedText } from './WhatsAppFormattedText';
+export { parseWhatsAppMarkup } from './parse';
+export type { WhatsAppFormattedTextProps, WhatsAppTextNode, WhatsAppTextStyle } from './types';

package/{WhatsAppPreview/components/WhatsAppFormattedText/index.d.ts → shared/whatsAppMarkup/index.js}

@@ -1 +1,2 @@
 export { WhatsAppFormattedText } from './WhatsAppFormattedText';
+export { parseWhatsAppMarkup } from './parse';

package/shared/whatsAppMarkup/parse.d.ts

@@ -0,0 +1,3 @@
+import type { WhatsAppTextNode } from './types';
+/** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
+export declare function parseWhatsAppMarkup(text: string): WhatsAppTextNode[];

package/shared/whatsAppMarkup/parse.js

@@ -0,0 +1,56 @@
+const MARKERS = [{
+  style: 'mono',
+  marker: '```'
+}, {
+  style: 'mono',
+  marker: '`'
+}, {
+  style: 'bold',
+  marker: '*'
+}, {
+  style: 'italic',
+  marker: '_'
+}, {
+  style: 'strike',
+  marker: '~'
+}];
+function findMarkerAt(text, index) {
+  return MARKERS.find(({
+    marker
+  }) => text.startsWith(marker, index)) || null;
+}
+/** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
+export function parseWhatsAppMarkup(text) {
+  const nodes = [];
+  let plain = '';
+  let index = 0;
+  const flush = () => {
+    if (plain) {
+      nodes.push({
+        text: plain
+      });
+      plain = '';
+    }
+  };
+  while (index < text.length) {
+    const found = findMarkerAt(text, index);
+    const openEnd = found ? index + found.marker.length : index;
+    const closeStart = found ? text.indexOf(found.marker, openEnd) : -1;
+    if (!found || closeStart <= openEnd) {
+      plain += text[index];
+      index += 1;
+      continue;
+    }
+    const inner = text.slice(openEnd, closeStart);
+    flush();
+    nodes.push({
+      style: found.style,
+      children: found.style === 'mono' ? [{
+        text: inner
+      }] : parseWhatsAppMarkup(inner)
+    });
+    index = closeStart + found.marker.length;
+  }
+  flush();
+  return nodes;
+}

package/shared/whatsAppMarkup/types.js

@@ -0,0 +1 @@
+export {};

package/WhatsAppPreview/components/WhatsAppFormattedText/index.js

@@ -1 +0,0 @@
-export { WhatsAppFormattedText } from './WhatsAppFormattedText';