Code
The parts of a code workspace: changed files, the commit box with its reasons, the commit graph and refs, the pull request of a branch, the status under an editor, search results across files, and a page preview with its address bar and device sizes. Rows sit in List and TreeView from the data group, so arrow keys, typeahead and selection come from React Aria.
9 pages, 11 exports
- GitFileRow
- CommitBox
- ReasonList
- GitGraph
- RefBadge
- PullRequestCard
- EditorStatusBar
- SearchFileRow
- SearchHitRow
- BrowserBar
- DeviceFrame
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { GitFileRow, CommitBox, ReasonList, GitGraph, … } from '@skribly/ui/code'Pages in this groupLink to the section Pages in this group
- GitFileRowOne changed file with its kind as a letter, the name before the folder and actions for staging or discarding. Pick it for working tree and staged changes; put the rows in a List.GitFileRow
- CommitBoxThe top of a changes panel: branch, push and pull with counts, the message and the commit button, with room for suggestion tools and a ReasonList that explains a suggested message. Try committing a short message to see the inline error.CommitBox, ReasonList
- GitGraphThe commit history with branch lines drawn in SVG, refs as badges, authors, dates and short hashes. Pick it for a history view where people pick a commit to inspect.GitGraph, RefBadge
- GitGraph statesAn empty history, the history while it loads and a failure that blocks it, shown in place of the rows.GitGraph
- PullRequestCardThe pull request of the current branch, or the next step towards one: install the tool, sign in, then create. Each state has its own icon, a colour and a word. Walk through the steps in the demo.PullRequestCard
- EditorStatusBarThe bar under a code editor: caret position as a "go to line" button, selection, unsaved state, language, encoding and line endings.EditorStatusBar
- Search in filesResults of a search across files, grouped by file with a count, each hit with its line number and the match marked. Put them in a TreeView; Expand all and Collapse all control expandedKeys.SearchFileRow, SearchHitRow
- BrowserBar and DeviceFrameA page preview: back, forward, reload or stop, the address and the preview size, over a frame that simulates a screen width. Pick it for previewing a site while working on it; the frame holds an iframe in an app.BrowserBar, DeviceFrame
- RefBadgeA branch, remote branch, tag or the current HEAD, on its own, such as in a header or a release list.RefBadge