Molecule.dev

← All @molecule/* packages · App templates

@molecule/app-audit-log-row-react

Feature · audit-log-row · App (browser) · v1.0.1 · Apache-2.0

Audit / error / event-log row: actor + action + object + timestamp + old/new values

npm install @molecule/app-audit-log-row-react

npm · Source on GitHub

How it works

@molecule/app-audit-log-row-react is a ready-made audit-log-row feature for the app (browser) side. It composes the core interfaces it needs, so it works with whichever providers your app has bonded.

import { AuditLogRow } from '@molecule/app-audit-log-row-react'

;<AuditLogRow
  entry={{
    id: 'evt-001',
    actor: 'alice@example.com',
    action: 'updated',
    target: 'Invoice #1042',
    timestamp: '2 min ago',
    oldValue: 'Draft',
    newValue: 'Sent',
  }}
  onClick={() => openDetail('evt-001')}
/>

Works with: @molecule/app-react, @molecule/app-ui, @molecule/app-ui-react

Reference

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Audit / activity / event-log row.

Exports <AuditLogRow> and AuditLogEntry type.

Quick Start

import { AuditLogRow } from '@molecule/app-audit-log-row-react'

;<AuditLogRow
  entry={{
    id: 'evt-001',
    actor: 'alice@example.com',
    action: 'updated',
    target: 'Invoice #1042',
    timestamp: '2 min ago',
    oldValue: 'Draft',
    newValue: 'Sent',
  }}
  onClick={() => openDetail('evt-001')}
/>

Type

feature

Installation

npm install @molecule/app-audit-log-row-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
npm install -D @types/react

API

Interfaces

AuditLogEntry

Shape of a single audit / activity log entry displayed by AuditLogRow.

interface AuditLogEntry {
  id: string
  /** Actor name or id. */
  actor: ReactNode
  /** Verb describing what happened ("updated", "deleted", "assigned"). */
  action: ReactNode
  /** Target object / record. */
  target?: ReactNode
  /** Pre-formatted display timestamp (rendered verbatim — format before passing, e.g. "2 min ago"). */
  timestamp: ReactNode
  /** Optional summary field for delta display — old + new values. */
  oldValue?: ReactNode
  newValue?: ReactNode
  /** Environment / source badge. */
  environment?: ReactNode
  /** Optional trace or correlation id. */
  traceId?: ReactNode
}

AuditLogRowProps

Props for {@link AuditLogRow}.

interface AuditLogRowProps {
  entry: AuditLogEntry
  /** Called when the row is clicked. */
  onClick?: () => void
  /** Extra classes. */
  className?: string
}

Functions

AuditLogRow(props)

One row of an audit / activity / event log. Shape: [actor] [action] [target] · [timestamp] with optional [old → new] diff line and environment/trace metadata.

function AuditLogRow({ entry, onClick, className }: AuditLogRowProps): JSX.Element
  • props — Component props (see {@link AuditLogRowProps}).

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-react ^1.0.1
  • @molecule/app-ui ^1.0.1
  • @molecule/app-ui-react ^1.0.1
  • react ^18.0.0 || ^19.0.0

Runtime Dependencies

  • @molecule/app-react
  • @molecule/app-ui
  • @molecule/app-ui-react
  • react