@pushwoosh/smart-components-kit 1.3.19 → 1.3.20

package/ProductUpdates/ProductUpdateCard.js

@@ -3,12 +3,13 @@ import { useState } from 'react';
 import { Badge, Button } from '@pushwoosh/dumb-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { Cluster, Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
-import { Paragraph, Text } from '@pushwoosh/kit-typography';
+import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import FallbackImage from './assets/fallback.svg?url';
 import { ALERT_STATUS_UNREAD } from './constants';
 import { formatUpdateDate, openActionLink } from './helpers';
 import { useLang } from './polyglot';
+import { renderContent } from './renderContent';
 import { CardImage } from './styles';
 export function ProductUpdateCard({
   update,
@@ -57,9 +58,7 @@ export function ProductUpdateCard({
           children: [_jsx(Text, {
             "$variant": "h4",
             children: update.title
-          }), update.content && _jsx(Paragraph, {
-            children: update.content
-          })]
+          }), update.content && renderContent(update.content)]
         })]
       }), (update.actionLink || update.secondaryActionLink) && _jsxs(Cluster, {
         "$gap": 8,

package/ProductUpdates/parseContent.d.ts

@@ -0,0 +1,15 @@
+export type InlineNode = {
+    readonly id: string;
+    readonly type: 'text' | 'bold';
+    readonly value: string;
+};
+export type ContentLine = {
+    readonly id: string;
+    readonly nodes: readonly InlineNode[];
+};
+export type ContentBlock = {
+    readonly id: string;
+    readonly type: 'paragraph' | 'list';
+    readonly lines: readonly ContentLine[];
+};
+export declare function parseContent(content: string): ContentBlock[];

package/ProductUpdates/parseContent.js

@@ -0,0 +1,66 @@
+const PARAGRAPH_BREAK = /\n{2,}/;
+const BULLET = /^-\s+/;
+const BOLD = /\*\*([\s\S]+?)\*\*/g;
+// Announcements carry three constructs and nothing else: an unmatched `**`, a lone `*`
+// and any HTML stay literal text, so authors cannot break the card with a typo.
+function parseInline(raw, keyPrefix) {
+  const nodes = [];
+  let cursor = 0;
+  const push = (type, value) => {
+    nodes.push({
+      id: `${keyPrefix}-n${nodes.length}`,
+      type,
+      value
+    });
+  };
+  Array.from(raw.matchAll(BOLD)).forEach(match => {
+    const start = match.index ?? 0;
+    if (start > cursor) {
+      push('text', raw.slice(cursor, start));
+    }
+    push('bold', match[1]);
+    cursor = start + match[0].length;
+  });
+  if (cursor < raw.length) {
+    push('text', raw.slice(cursor));
+  }
+  return nodes;
+}
+export function parseContent(content) {
+  const blocks = [];
+  const flush = (type, rawLines) => {
+    if (rawLines.length === 0) {
+      return;
+    }
+    const id = `b${blocks.length}`;
+    blocks.push({
+      id,
+      type,
+      lines: rawLines.map((line, index) => ({
+        id: `${id}-l${index}`,
+        nodes: parseInline(line, `${id}-l${index}`)
+      }))
+    });
+  };
+  content.split(PARAGRAPH_BREAK).forEach(rawBlock => {
+    const lines = rawBlock.split('\n').map(line => line.trim()).filter(line => line.length > 0);
+    let pendingType = null;
+    let pending = [];
+    lines.forEach(line => {
+      const isBullet = BULLET.test(line);
+      const type = isBullet ? 'list' : 'paragraph';
+      // A bullet run right after a text line is its own block: the author wrote a lead-in
+      // and a list, not one paragraph, and a blank line between them should not be required.
+      if (pendingType !== null && pendingType !== type) {
+        flush(pendingType, pending);
+        pending = [];
+      }
+      pendingType = type;
+      pending.push(isBullet ? line.replace(BULLET, '') : line);
+    });
+    if (pendingType !== null) {
+      flush(pendingType, pending);
+    }
+  });
+  return blocks;
+}

package/ProductUpdates/parseContent.test.d.ts

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

package/ProductUpdates/parseContent.test.js

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { parseContent } from './parseContent';
+// Compact projection: `**bold**` becomes [bold] so a case reads as one line.
+function sketch(blocks) {
+  return blocks.map(block => {
+    const lines = block.lines.map(line => line.nodes.map(node => node.type === 'bold' ? `[${node.value}]` : node.value).join(''));
+    return block.type === 'list' ? `ul: ${lines.join(' | ')}` : `p: ${lines.join(' / ')}`;
+  });
+}
+describe('parseContent', () => {
+  it('splits paragraphs on a blank line', () => {
+    expect(sketch(parseContent('first\n\nsecond'))).toEqual(['p: first', 'p: second']);
+  });
+  it('keeps a single newline inside one paragraph', () => {
+    expect(sketch(parseContent('first\nsecond'))).toEqual(['p: first / second']);
+  });
+  it('collects consecutive bullets into one list', () => {
+    expect(sketch(parseContent('- one\n- two\n- three'))).toEqual(['ul: one | two | three']);
+  });
+  it('reads bold inside a list item', () => {
+    expect(sketch(parseContent('- plain **loud**'))).toEqual(['ul: plain [loud]']);
+  });
+  it('separates a lead-in line from the bullets that follow it', () => {
+    expect(sketch(parseContent('what changed:\n- one\n- two\nand that is all'))).toEqual(['p: what changed:', 'ul: one | two', 'p: and that is all']);
+  });
+  it('treats three or more newlines as a single paragraph break', () => {
+    expect(sketch(parseContent('first\n\n\n\nsecond'))).toEqual(['p: first', 'p: second']);
+  });
+  it('ignores blank lines around the content', () => {
+    expect(sketch(parseContent('\n\n  text  \n\n'))).toEqual(['p: text']);
+  });
+  it('leaves a lone asterisk as text', () => {
+    expect(sketch(parseContent('2 * 3 = 6'))).toEqual(['p: 2 * 3 = 6']);
+  });
+  it('does not read `* ` as a bullet marker', () => {
+    expect(sketch(parseContent('* one\n* two'))).toEqual(['p: * one / * two']);
+  });
+  it('leaves an unclosed bold marker as text', () => {
+    expect(sketch(parseContent('**loud and then not'))).toEqual(['p: **loud and then not']);
+  });
+  it('leaves an empty bold marker as text', () => {
+    expect(sketch(parseContent('nothing **** here'))).toEqual(['p: nothing **** here']);
+  });
+  it('reads several bold runs in one line', () => {
+    expect(sketch(parseContent('**a** and **b**'))).toEqual(['p: [a] and [b]']);
+  });
+  it('leaves HTML as text', () => {
+    expect(sketch(parseContent('<b>test</b>'))).toEqual(['p: <b>test</b>']);
+  });
+  it('returns nothing for empty or blank content', () => {
+    expect(parseContent('')).toEqual([]);
+    expect(parseContent('   \n  \n')).toEqual([]);
+  });
+  it('gives every block, line and node a unique id', () => {
+    const blocks = parseContent('lead **in**\n- one **two**\n- three\n\ntail');
+    const ids = blocks.flatMap(block => [block.id, ...block.lines.flatMap(line => [line.id, ...line.nodes.map(node => node.id)])]);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});

package/ProductUpdates/renderContent.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export declare function renderContent(content: string): ReactNode;

package/ProductUpdates/renderContent.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { parseContent } from './parseContent';
+import { Bold, ContentBox, List } from './styles';
+function renderLine(line) {
+  return line.nodes.map(node => node.type === 'bold' ? _jsx(Bold, {
+    children: node.value
+  }, node.id) : node.value);
+}
+export function renderContent(content) {
+  const blocks = parseContent(content);
+  if (blocks.length === 0) {
+    return null;
+  }
+  return _jsx(ContentBox, {
+    children: blocks.map(block => block.type === 'list' ? _jsx(List, {
+      children: block.lines.map(line => _jsx("li", {
+        children: renderLine(line)
+      }, line.id))
+    }, block.id) : _jsx(Paragraph, {
+      children: block.lines.map((line, index) => _jsxs(Fragment, {
+        children: [index > 0 && _jsx("br", {}), renderLine(line)]
+      }, line.id))
+    }, block.id))
+  });
+}

package/ProductUpdates/styles.d.ts

@@ -1 +1,4 @@
 export declare const CardImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const ContentBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const Bold: import("styled-components").StyledComponent<"strong", any, {}, never>;

package/ProductUpdates/styles.js

@@ -1,8 +1,22 @@
 import styled from 'styled-components';
-import { ShapeRadius } from '@pushwoosh/kit-constants';
+import { FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
 // The only rule kit-helpers cannot express: object-fit has no prop there, and it is
 // what keeps a wrongly proportioned upload from stretching the card.
 export const CardImage = styled.img.withConfig({
   displayName: "CardImage",
   componentId: "sc-11vonu6-0"
-})(["width:256px;height:160px;object-fit:cover;border-radius:", ";display:block;"], ShapeRadius.SECTION);
+})(["width:256px;height:160px;object-fit:cover;border-radius:", ";display:block;"], ShapeRadius.SECTION);
+// Paragraph's own `& + &` rule only matches a <p> after a <p>, so the gap around a list
+// has to live on the wrapper both block kinds share.
+export const ContentBox = styled.div.withConfig({
+  displayName: "ContentBox",
+  componentId: "sc-11vonu6-1"
+})(["> * + *{margin-top:0.5em;}"]);
+export const List = styled.ul.withConfig({
+  displayName: "List",
+  componentId: "sc-11vonu6-2"
+})(["margin:0;padding-left:1.25em;list-style:disc outside;li + li{margin-top:0.25em;}"]);
+export const Bold = styled.strong.withConfig({
+  displayName: "Bold",
+  componentId: "sc-11vonu6-3"
+})(["font-weight:", ";"], FontWeight.BOLD);

package/package.json

@@ -12,10 +12,11 @@
     "dev": "`pushwoosh-engine app:command:dev`",
     "build": "pushwoosh-engine lib:build",
     "playground": "`pushwoosh-engine lib:command:playground`",
-    "check": "npm run check:lint && npm run check:types",
+    "check": "npm run check:lint && npm run check:types && npm run test",
     "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint src",
     "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint src --fix",
-    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types"
+    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types",
+    "test": "echo \"Run test\" && vitest run"
   },
   "pre-commit": "check",
   "engines": {
@@ -46,11 +47,12 @@
     "pre-commit": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^5.3.11",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.3.19"
+  "version": "1.3.20"
 }