Skip to content

Add UnixTimestamp component#371

Merged
CarlosNZ merged 2 commits into
v2.0-devfrom
unix-timestamp-component
Jun 17, 2026
Merged

Add UnixTimestamp component#371
CarlosNZ merged 2 commits into
v2.0-devfrom
unix-timestamp-component

Conversation

@CarlosNZ

Copy link
Copy Markdown
Owner

Adds a UnixTimestamp pre-built component to @json-edit-react/components — epoch numbers (seconds or milliseconds) rendered as a readable date — implementing candidate #3 from #355. It builds directly on the swappable date-picker widget landed for DatePicker.

What it does

  • Guard / unit detection (epoch.ts) — matches numbers in a plausible epoch window (years 1990–2100). The seconds and millisecond bands don't overlap, so one magnitude check is both the guard and the 'auto' seconds-vs-ms detector. The detected/forced unit is preserved on commit; force it via componentProps.unit.
  • Editing — reuses the same swappable DatePickerWidgetProps picker as DatePicker. The definition's factory enables edit-mode rendering only when a DatePicker widget is passed via componentProps; with none, core's standard number editor handles edits (showOnEdit stays false).
  • ViewdisplayAs: 'number' (default) renders the ordinary number node plus a small badge (default UNIX, via badgeLabel) using the ErrorIndicator passOriginalNode pattern; displayAs: 'date' shows a formatted date (optional formatter). The factory drops passOriginalNode in 'date' mode.
  • The value stays a plain JSON number end-to-end — no stringifyReplacer/parseReviver plumbing.

condition vs guard

This is the first component whose guard is a pure heuristic rather than a safety contract (any number renders fine as a date), so the README documents replacing the guard as the encouraged move when you want to target timestamps exclusively by key — including real timestamps that fall outside the default 1990–2100 band (microsecond/nanosecond epochs, historical/far-future dates), which an ANDed condition would silently reject.

Demo

Adds Unix Timestamp (seconds) and Unix Timestamp (ms) under the Custom Component Library's Date & Time section (showing auto-detection), wired with ReactDatePicker for calendar editing, plus a Show Unix as raw number? toggle driving displayAs.

Notes

  • README row + dedicated subsection, and a minor changeset for @json-edit-react/components.
  • Package build, tsc --noEmit, and the demo's tsc -b --noEmit all pass.
  • Not yet eyeballed in-browser — badge styling across light/dark themes and the seconds/ms auto-detection are worth a manual pass (Firefox too, given editor/DnD interactions).
  • Carries one unrelated one-line z-index fix on the ReactDatePicker popup.

🤖 Generated with Claude Code

CarlosNZ and others added 2 commits June 17, 2026 15:00
Epoch numbers (seconds or milliseconds) rendered as a readable date,
reusing the swappable DatePicker widget for editing.

- epoch.ts: plausible-epoch band (1990-2100). isPlausibleEpoch doubles
  as the guard and the seconds-vs-ms detector (non-overlapping bands);
  epochToDate/dateToEpoch round-trip preserving the unit.
- component.tsx: edits via the injected DatePicker widget; view is
  displayAs:'number' (default — originalNode + a UNIX badge, the
  ErrorIndicator pattern) or 'date' (formatted). unit defaults to 'auto'.
- definition.ts: guard = epoch band; the factory wrapper flips
  showOnEdit:true only when a DatePicker widget is supplied (else core's
  number editor edits), and drops passOriginalNode in 'date' mode. Value
  stays a plain JSON number, so no serialization plumbing.

README documents the condition-vs-guard split — the first component whose
guard is a pure heuristic (safe to replace) rather than a safety
contract. Demo wires two fields (seconds + ms) under "Date & Time" plus a
"Show Unix as raw number?" toggle, with calendar editing.

Also includes a small z-index fix on the ReactDatePicker popup.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Double-clicking the UNIX badge enters edit mode (parity with the
  number node beside it).
- Badge background tweak.
- List "UNIX Timestamp" in the demo Custom Component Library intro.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

Bundle size impact

@json-edit-react/components

Format Base raw PR raw Δ raw Base gzip PR gzip Δ gzip
esm 11.91 KB 13.70 KB 🔺 +1.78 KB (+14.97%) 4.02 KB 4.56 KB 🔺 +552 B (+13.40%)
cjs 12.54 KB 14.33 KB 🔺 +1.79 KB (+14.26%) 3.87 KB 4.39 KB 🔺 +531 B (+13.40%)

Measured from build/index.{cjs,esm}.js. Gzip at level 9.

@CarlosNZ CarlosNZ merged commit b9fef80 into v2.0-dev Jun 17, 2026
2 checks passed
@CarlosNZ CarlosNZ deleted the unix-timestamp-component branch June 17, 2026 13:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant