@estiva-app/ui 0.65.2 → 0.65.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.65.2",
+  "version": "0.65.3",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.65.2",
+    "packageVersion": "0.65.3",
     "exports": 140,
     "typeExports": 145,
     "files": null

package/src/RichText.stories.tsx

@@ -84,6 +84,33 @@ export const WithTheAppsOwnParts: Story = {
   },
 }
 
+/** Items indented under the one above, two levels deep, in both lists: each level is the type of the list it sits in. */
+export const IndentedItems: Story = {
+  args: {
+    blocks: [
+      {
+        type: 'bulletList',
+        children: [
+          { type: 'listItem', inline: [t('Item one')] },
+          { type: 'listItem', indent: 1, inline: [t('Item one, under it')] },
+          { type: 'listItem', indent: 2, inline: [t('A level further in')] },
+          { type: 'listItem', indent: 1, inline: [t('Back one level')] },
+          { type: 'listItem', inline: [t('Item two')] },
+        ],
+      },
+      {
+        type: 'orderedList',
+        children: [
+          { type: 'listItem', inline: [t('The first step')] },
+          { type: 'listItem', indent: 1, inline: [t('Each level counts from one')] },
+          { type: 'listItem', indent: 1, inline: [t('Then two')] },
+          { type: 'listItem', inline: [t('The second step')] },
+        ],
+      },
+    ],
+  },
+}
+
 /** A block this part has no design for, from a later version: its words are drawn, never dropped. */
 export const UnknownBlock: Story = {
   args: {

package/src/RichText.test.tsx

@@ -147,3 +147,38 @@ describe('RichText', () => {
     expect(richTextClassName('default', 'outline-none')).toContain('outline-none')
   })
 })
+
+describe('an indented list item — MAN-13', () => {
+  const item = (id: string, text: string, indent?: number): RichTextBlock => ({ type: 'listItem', id, inline: [t(text)], ...(indent ? { indent } : {}) })
+
+  it('draws an item inside the one above, in a list of the same type with no id', () => {
+    const { container } = render(
+      <RichText blocks={[{ type: 'orderedList', id: 'l1', children: [item('i1', 'intro'), item('i2', 'after', 1), item('i3', 'deeper', 2), item('i4', 'back')] }]} />,
+    )
+    const outer = container.querySelector('ol[data-block-id="l1"]')!
+    expect([...outer.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['i1', 'i4'])
+    const inner = outer.querySelector(':scope > li > ol')!
+    expect(inner.hasAttribute('data-block-id')).toBe(false)
+    expect(inner.querySelector(':scope > li')?.getAttribute('data-block-id')).toBe('i2')
+    expect(inner.querySelector(':scope > li > ol > li')?.textContent).toBe('deeper')
+  })
+
+  it('never draws an item more than one level below the one before it', () => {
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: [item('a', 'first', 2), item('b', 'next', 3)] }]} />)
+    const outer = container.querySelector('ul')!
+    expect([...outer.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['a'])
+    expect(outer.querySelector(':scope > li > ul > li')?.getAttribute('data-block-id')).toBe('b')
+  })
+
+  it('never nests deeper than 8 levels (SPEC §13.3)', () => {
+    const deep = Array.from({ length: 20 }, (_, i) => item(`d${i}`, `level ${i}`, i))
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: deep }]} />)
+    expect(container.querySelectorAll('ul').length).toBe(9)
+    expect(container.querySelector('[data-block-id="d19"]')!.parentElement).toBe(container.querySelector('[data-block-id="d8"]')!.parentElement)
+  })
+
+  it('draws an item with an indent that is not a whole number above 0 at the left', () => {
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: [item('a', 'one'), { ...item('b', 'two'), indent: -1 }, { ...item('c', 'three'), indent: Number.NaN }]}]} />)
+    expect([...container.querySelector('ul')!.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['a', 'b', 'c'])
+  })
+})

package/src/RichText.tsx

@@ -49,6 +49,8 @@ export interface RichTextBlock {
   language?: string
   /** A numbered list's first number. */
   start?: number
+  /** How far a list item is indented under the items above it. A list's items stay flat; this draws them nested. */
+  indent?: number
   attrs?: Record<string, unknown>
   inline?: readonly RichTextRun[]
   children?: readonly RichTextBlock[]
@@ -237,6 +239,31 @@ function Table({ block, draw }: { block: RichTextBlock; draw: Draw }) {
   )
 }
 
+interface NestedItem {
+  item: RichTextBlock
+  key: number
+  below: NestedItem[]
+}
+
+const MAX_DEPTH = 8
+
+/** A list's flat items, each under the last item one level up — never more than one level below the item before. */
+function nestItems(items: readonly RichTextBlock[]): NestedItem[] {
+  const top: NestedItem[] = []
+  // The last item seen at each depth.
+  const path: NestedItem[] = []
+  items.forEach((item, key) => {
+    const asked = Number.isInteger(item.indent) && item.indent! > 0 ? item.indent! : 0
+    // SPEC §13.3: never deeper than 8, so a hostile list cannot nest thousands deep.
+    const depth = Math.min(asked, path.length, MAX_DEPTH)
+    path.length = depth
+    const node: NestedItem = { item, key, below: [] }
+    ;(depth === 0 ? top : path[depth - 1].below).push(node)
+    path.push(node)
+  })
+  return top
+}
+
 function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode {
   const own = draw.renderBlock?.(block)
   if (own !== undefined) return own
@@ -251,14 +278,19 @@ function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode
       return <p data-block-id={block.id}>{runs}</p>
     case 'bulletList':
     case 'orderedList': {
-      const items = (block.children ?? []).map((item, i) => (
-        <li key={item.id ?? i} data-block-id={item.id}>
-          <Runs runs={item.inline} draw={draw} />
-        </li>
-      ))
-      return block.type === 'bulletList'
-        ? <ul data-block-id={block.id}>{items}</ul>
-        : <ol data-block-id={block.id} start={block.start}>{items}</ol>
+      const ordered = block.type === 'orderedList'
+      const items = (nodes: readonly NestedItem[]): ReactNode[] =>
+        nodes.map(({ item, key, below }) => (
+          <li key={item.id ?? key} data-block-id={item.id}>
+            <Runs runs={item.inline} draw={draw} />
+            {/* The list an indented item sits in is drawn, not stored: it has no id, and the type of the list around it. */}
+            {below.length > 0 && (ordered ? <ol>{items(below)}</ol> : <ul>{items(below)}</ul>)}
+          </li>
+        ))
+      const top = items(nestItems(block.children ?? []))
+      return ordered
+        ? <ol data-block-id={block.id} start={block.start}>{top}</ol>
+        : <ul data-block-id={block.id}>{top}</ul>
     }
     case 'blockquote':
       return <blockquote data-block-id={block.id}>{runs}</blockquote>