VersionHistory

Code

import { VersionHistory, type HistoryVersion } from "@fadymondy/nasaq/web";export function History({ versions }: { versions: HistoryVersion[] }) {  return <VersionHistory versions={versions} language="json" onRestore={async (v) => { await api.restore(v.id); }} />;}

Files · beta

Live examples and controls: VersionHistory in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/version-history.json

"What did this look like on Tuesday, and what changed?" Versions are listed newest first. Choosing one shows it read-only, and a Changes tab shows a line diff against the previous version (or the current one, or any other) with added and removed lines marked by a sign, not only colour, and long unchanged stretches folded. Restore asks first, explains that it saves a new version on top, and stays open to show the error if it fails. Content is text (JSON, Markdown, code), and renderPreview / renderDiff replace the built-in views for anything richer.

When to useCopy Anchor Link

• Settings, workflows, documents, templates, rules: anything saved repeatedly that people may need to roll back.

When not to useCopy Anchor Link

• A who-did-what audit trail without content: use an activity feed.
• The version list inside the workflow canvas: workflow-canvas has its own panel that previews on the canvas.

ImportCopy Anchor Link

import { VersionHistory } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { VersionHistory, type HistoryVersion } from "@fadymondy/nasaq/web";

export function History({ versions }: { versions: HistoryVersion[] }) {
  return <VersionHistory versions={versions} language="json" onRestore={async (v) => { await api.restore(v.id); }} />;
}

AnatomyCopy Anchor Link

VersionHistory            data-slot="version-history"
├─ list                   rows (data-version-row): number, Current badge, date, author, note
├─ detail                 header with Restore, then Tabs
│  ├─ Preview             CodeBlock, or renderPreview
│  └─ Changes             compare-with Select, +/- counts, data-slot="version-diff" or renderDiff
└─ AlertDialog            confirm restore

APICopy Anchor Link

HelpersCopy Anchor Link

diffLines(older, newer), diffStats, foldDiff(lines, context), sortVersions are exported and pure.

ExamplesCopy Anchor Link

A custom preview for non-text content:

<VersionHistory versions={versions} renderPreview={(v) => <PagePreview html={v.content} />} />

AccessibilityCopy Anchor Link

Versions are toggle buttons. The diff is a table whose added and removed rows are named. Counts are a polite live region. The confirmation is an alert dialog.

RTL & i18nCopy Anchor Link

• The layout mirrors; the diff and code stay left-to-right. Notes use dir="auto".
• English and Arabic strings ship; digits are Latin.

Styling & tokensCopy Anchor Link

• Diff rows use --nq-success-soft and --nq-danger-soft. Extend with className; never pass raw hex.

Do / Don'tCopy Anchor Link

• Do save a restore as a new version so history never loses anything.
• Do write notes in the author's words.
• Don't keep megabytes per version in the client; diff very large content on the server and use renderDiff.

RelatedCopy Anchor Link

• workflow-canvas
• step-editor
• code-block

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-files-version-history--docs