ActivityFeed

A quiet record of who did what, grouped by day.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  ActivityFeed,  Button,  Row,  Stack} from '@kerf-js/veneer'import type { ActivityItem } from '@kerf-js/veneer'export function Project() {  const items = state(ACTIVITY)  const add = () =>    (items.value = [      {        id: `new-${items.value.length}`,        actor: 'Jun Tanaka',        verb: 'deployed',        object: 'edge-cache',        time: 'Now',        day: 'Today',      },      ...items.value,    ])  return (    <Stack gap="related">      <ActivityFeed        items={items}        live="live"        title="Project activity"      />      <Row>        <Button          emphasis="outline"          tone="neutral"          size="sm"          onClick={add}        >          Add a deploy        </Button>      </Row>    </Stack>  )}const ACTIVITY: ActivityItem[] = [  {    id: 'a1',    actor: 'Priya Raman',    verb: 'deployed',    object: 'storefront',    detail: 'to eu-west',    time: '16:42',    day: 'Today',  },  {    id: 'a2',    actor: 'Lena Fischer',    verb: 'started a build of',    object: 'search-api',    time: '16:10',    day: 'Today',  },  {    id: 'a3',    actor: 'Sam Okafor',    verb: 'rolled back',    object: 'mobile-bff',    detail: 'to d-4801',    time: '15:41',    day: 'Today',  },  {    id: 'a4',    actor: 'Tomás Oliveira',    verb: 'deployed',    object: 'checkout',    time: '14:03',    day: 'Today',  },  {    id: 'a5',    actor: 'Mara Lindqvist',    verb: 'changed the plan for',    object: 'billing',    time: '17:20',    day: 'Yesterday',  },  {    id: 'a6',    actor: 'Jun Tanaka',    verb: 'paused',    object: 'reports',    time: '11:02',    day: 'Yesterday',  },]

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ActivityFeed } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`items`	`ActivityItem[] \| { value: ActivityItem[]; } \| (() => ActivityItem[])`	—	A list, a state or a getter.
`live`	`LiveState \| { value: LiveState; } \| (() => LiveState)`	—	Shows Live while the connection is up.
`title`	`string`	`'Activity'`	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	`3`	The title's heading level: one below the heading the feed sits under.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="activity"] [data-part="eyebrow"]

eyebrow

RelatedInbox Feed