{
"v": 0,
"components": {
"components-clamped": {
"id": "components-clamped",
"name": "Clamped",
"path": "./ui/src/components/Clamped.stories.tsx",
"jsDocTags": {
"import": [
"import { Clamped } from \"#ui/components/Clamped.tsx\";"
]
},
"description": "Caps content at `maxHeight` with a fade and a toggle, folding only when\ncontent is actually taller than the cap (or than `foldOver`, when given).\nContent that changes size after mount (lazy images, async syntax\nhighlighting) re-measures via a ResizeObserver on the inner wrapper, and\nviewport resizes re-measure the vh-based caps.",
"reactComponentMeta": {
"displayName": "Clamped",
"exportName": "Clamped",
"filePath": "/home/runner/work/gitbutler/gitbutler/apps/lite/ui/src/components/Clamped.tsx",
"description": "Caps content at `maxHeight` with a fade and a toggle, folding only when\ncontent is actually taller than the cap (or than `foldOver`, when given).\nContent that changes size after mount (lazy images, async syntax\nhighlighting) re-measures via a ResizeObserver on the inner wrapper, and\nviewport resizes re-measure the vh-based caps.",
"jsDocTags": {
"import": [
"import { Clamped } from \"#ui/components/Clamped.tsx\";"
]
},
"props": {
"maxHeight": {
"name": "maxHeight",
"required": true,
"type": {
"name": "string"
},
"description": "A px, vh or lh length, e.g. `\"240px\"`, `\"80vh\"` or `\"3lh\"`.",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "ui/src/components/Clamped.tsx"
}
]
},
"foldOver": {
"name": "foldOver",
"required": false,
"type": {
"name": "string"
},
"description": "Fold only once the content is taller than this, so that a fold never\nhides just a line or two behind a click. Defaults to `maxHeight`.",
"defaultValue": {
"value": "maxHeight"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "ui/src/components/Clamped.tsx"
}
]
},
"skipWhenViewportFits": {
"name": "skipWhenViewportFits",
"required": false,
"type": {
"name": "boolean"
},
"description": "Don't fold when the full content already fits within the viewport.",
"defaultValue": {
"value": "false"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "ui/src/components/Clamped.tsx"
}
]
},
"variant": {
"name": "variant",
"required": false,
"type": {
"name": "enum",
"raw": "\"text\" | \"card\"",
"value": [
{
"value": "\"text\""
},
{
"value": "\"card\""
}
]
},
"description": "`text` (the default) seats a Show more link on the fade and a Show less\nlink under the unfolded content. `card` sets the folded content on a\nquiet card with a chevron at its corner; unfolded, the content lies flat\nwith the chevron at its top right, where the eye was left.",
"defaultValue": {
"value": "\"text\""
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "ui/src/components/Clamped.tsx"
}
]
},
"children": {
"name": "children",
"required": true,
"type": {
"name": "ReactNode"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "ui/src/components/Clamped.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-clamped--folded",
"name": "Folded",
"snippet": "const Folded = () =>
\n {paragraphs(12)}\n
;",
"description": "Content well over the cap folds behind Show more, with the fade."
},
{
"id": "components-clamped--short-content",
"name": "Short Content",
"snippet": "const ShortContent = () =>
\n {paragraphs(2)}\n
;",
"description": "Content shorter than the cap renders with no toggle and no fade."
},
{
"id": "components-clamped--barely-overflowing",
"name": "Barely Overflowing",
"snippet": "const BarelyOverflowing = () =>
\n {paragraphs(4)}\n
;",
"description": "Content only a hair taller than the cap still folds — expanding reveals\nalmost nothing. Exhibit A for giving the fold trigger some slack over\nthe clamp height."
},
{
"id": "components-clamped--card",
"name": "Card",
"snippet": "const Card = () => \n \n
{paragraphs(3)}
\n \n \n
{paragraphs(1)}
\n \n;",
"description": "The card variant, as the PR description uses it: four lines on a quiet\ncard with a chevron, folding only past six so a click always reveals\nmore than a line or two."
},
{
"id": "components-clamped--grows-after-mount",
"name": "Grows After Mount",
"snippet": "const GrowsAfterMount = () => ;",
"description": "Content that grows after mount (lazy images, async highlighting) still\ngets its Show more — the ResizeObserver re-measures on growth."
}
],
"import": "import { Clamped } from '#ui/components/Clamped.tsx';"
},
"components-graphsegment": {
"id": "components-graphsegment",
"name": "GraphSegment",
"path": "./ui/src/components/GraphSegment.stories.tsx",
"jsDocTags": {
"import": [
"import { GraphSegment } from \"#ui/components/GraphSegment.tsx\";"
]
},
"reactComponentMeta": {
"displayName": "GraphSegment",
"exportName": "GraphSegment",
"filePath": "/home/runner/work/gitbutler/gitbutler/apps/lite/ui/src/components/GraphSegment.tsx",
"description": "",
"jsDocTags": {
"import": [
"import { GraphSegment } from \"#ui/components/GraphSegment.tsx\";"
]
},
"props": {
"glyph": {
"name": "glyph",
"required": true,
"type": {
"name": "enum",
"raw": "\"parent\" | \"horizontal\" | \"space\" | \"forkLeft\" | \"forkRight\" | \"notch\" | \"hook\" | \"forkBoth\" | \"mergeLeft\" | \"mergeRight\" | \"mergeBoth\" | \"joinLeft\" | \"joinRight\" | \"joinBoth\" | \"commit\" | \"group\"",
"value": [
{
"value": "\"parent\""
},
{
"value": "\"horizontal\""
},
{
"value": "\"space\""
},
{
"value": "\"forkLeft\""
},
{
"value": "\"forkRight\""
},
{
"value": "\"notch\""
},
{
"value": "\"hook\""
},
{
"value": "\"forkBoth\""
},
{
"value": "\"mergeLeft\""
},
{
"value": "\"mergeRight\""
},
{
"value": "\"mergeBoth\""
},
{
"value": "\"joinLeft\""
},
{
"value": "\"joinRight\""
},
{
"value": "\"joinBoth\""
},
{
"value": "\"commit\""
},
{
"value": "\"group\""
}
]
},
"description": "",
"defaultValue": null,
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"status": {
"name": "status",
"required": true,
"type": {
"name": "enum",
"raw": "\"Diverged\" | \"Upstream\" | \"LocalOnly\" | \"LocalAndRemote\" | \"Integrated\"",
"value": [
{
"value": "\"Diverged\""
},
{
"value": "\"Upstream\""
},
{
"value": "\"LocalOnly\""
},
{
"value": "\"LocalAndRemote\""
},
{
"value": "\"Integrated\""
}
]
},
"description": "",
"defaultValue": null,
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"railEnds": {
"name": "railEnds",
"required": false,
"type": {
"name": "boolean"
},
"description": "The rail ends on this row: no tail below the icon, nothing stretched under a taller row.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"folded": {
"name": "folded",
"required": false,
"type": {
"name": "boolean"
},
"description": "What lies below the row is folded away: the trunk's tail behind the row fades out, a hint of it.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"centered": {
"name": "centered",
"required": false,
"type": {
"name": "boolean"
},
"description": "The rings sit on the row's centre line, for a single-line row of their own.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"above": {
"name": "above",
"required": false,
"type": {
"name": "enum",
"raw": "\"Diverged\" | \"Upstream\" | \"LocalOnly\" | \"LocalAndRemote\" | \"Integrated\"",
"value": [
{
"value": "\"Diverged\""
},
{
"value": "\"Upstream\""
},
{
"value": "\"LocalOnly\""
},
{
"value": "\"LocalAndRemote\""
},
{
"value": "\"Integrated\""
}
]
},
"description": "The rail above or below the icon in another status's colour; a stretch between two icons is the lower one's.",
"defaultValue": null,
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"below": {
"name": "below",
"required": false,
"type": {
"name": "enum",
"raw": "\"Diverged\" | \"Upstream\" | \"LocalOnly\" | \"LocalAndRemote\" | \"Integrated\"",
"value": [
{
"value": "\"Diverged\""
},
{
"value": "\"Upstream\""
},
{
"value": "\"LocalOnly\""
},
{
"value": "\"LocalAndRemote\""
},
{
"value": "\"Integrated\""
}
]
},
"description": "",
"defaultValue": null,
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"fromTrunk": {
"name": "fromTrunk",
"required": false,
"type": {
"name": "boolean"
},
"description": "Bend from the trunk one column left into this commit's ring.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"behind": {
"name": "behind",
"required": false,
"type": {
"name": "number"
},
"description": "How many columns of the main line run behind the row, left of the glyph.",
"defaultValue": {
"value": "0"
},
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
},
"trunk": {
"name": "trunk",
"required": false,
"type": {
"name": "boolean"
},
"description": "The glyph is the trunk's own, or a leg onto it, and goes when the trunk is hidden.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
},
"declarations": [
{
"name": "GraphSegmentProps",
"fileName": "ui/src/components/GraphSegment.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-graphsegment--default",
"name": "Default",
"snippet": "const Default = () => \n \n;"
},
{
"id": "components-graphsegment--all-glyphs",
"name": "All Glyphs",
"snippet": "const AllGlyphs = () => (\n
\n {glyphs.map((glyph) => (\n \n
\n \n
\n
{glyph}
\n
\n ))}\n \n);"
}
],
"import": "import { GraphSegment } from '#ui/components/GraphSegment.tsx';"
},
"components-markdown": {
"id": "components-markdown",
"name": "Markdown",
"path": "./ui/src/components/Markdown.stories.tsx",
"jsDocTags": {
"import": [
"import { Markdown } from \"#ui/components/Markdown.tsx\";"
]
},
"description": "Renders forge-flavored markdown with GitHub-parity restrictions:\n\n- Raw HTML renders through {@link sanitizeSchema} — GitHub's safe subset,\n so `` folds here like it does on github.com, while scripts,\n styles, event handlers, and unsafe URL schemes are stripped.\n- Markdown-authored URLs additionally pass react-markdown's default\n transform; links only open via the system browser, and the Electron\n shell blocks all in-app navigation.\n- Images inline only from GitHub-operated hosts (which don't expose\n request logs to authors, so they can't track viewers); any other host\n renders as a link and is never fetched. See {@link isGitHubHostedImage}.",
"reactComponentMeta": {
"displayName": "Markdown",
"exportName": "Markdown",
"filePath": "/home/runner/work/gitbutler/gitbutler/apps/lite/ui/src/components/Markdown.tsx",
"description": "Renders forge-flavored markdown with GitHub-parity restrictions:\n\n- Raw HTML renders through {@link sanitizeSchema} — GitHub's safe subset,\n so `` folds here like it does on github.com, while scripts,\n styles, event handlers, and unsafe URL schemes are stripped.\n- Markdown-authored URLs additionally pass react-markdown's default\n transform; links only open via the system browser, and the Electron\n shell blocks all in-app navigation.\n- Images inline only from GitHub-operated hosts (which don't expose\n request logs to authors, so they can't track viewers); any other host\n renders as a link and is never fetched. See {@link isGitHubHostedImage}.",
"jsDocTags": {
"import": [
"import { Markdown } from \"#ui/components/Markdown.tsx\";"
]
},
"props": {
"children": {
"name": "children",
"required": true,
"type": {
"name": "string"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "ui/src/components/Markdown.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-markdown--sample",
"name": "Sample",
"snippet": "const Sample = () => {`# Summary\n\nAdds a description editor to the PR create form. When the body is empty, the editor offers a one-line prompt instead of a blank field, so a short description is one click away.\n\n## What changed\n\n- The empty state is a button that opens the editor with the commit messages pasted in\n- Existing descriptions open as before\n\nRun it locally with the CLI:\n\n\\`\\`\\`sh\n$ but commit -m \"Add description editor\"\n$ but push\n\\`\\`\\`\n\n### Notes for reviewers\n\n> Reviewers asked for a shorter first paragraph, so the summary now leads with what changed.\n\n| File | Change | Status |\n| --- | --- | --- |\n| Markdown.tsx | Description editor | Done |\n| Field.tsx | Empty prompt | In review |\n\n- [ ] Update the screenshots in the PR\n- [ ] Add the DESIGN.md section\n\n\n\n---\n\n[See the design notes](https://github.com/gitbutlerapp/gitbutler/blob/master/packages/ui-react/DESIGN.md)\n\nThen run \\`but status\\` to check.`};",
"description": "The same document as the default content of \"Markdown / slot\" in ⚛️ Lite\nCore: every block the kit has a component for, in the app's rhythm.\nCompare the two when either side changes."
},
{
"id": "components-markdown--headings",
"name": "Headings",
"snippet": "const Headings = () => {`# Heading 1\n\nBody text at 13px on a 160% line.\n\n## Heading 2\n\nBody text at 13px on a 160% line.\n\n### Heading 3\n\nBody text at 13px on a 160% line.\n\n#### Heading 4\n\nLevels four to six stay at the body size and only go semibold.`};",
"description": "The three heading levels next to body text, and the levels below them that share the body size."
},
{
"id": "components-markdown--inline",
"name": "Inline",
"snippet": "const Inline = () => {`Press ⌘Enter to commit, or run \\`but commit\\` from a shell.\n\n\nWhy a fold?\n\nLong logs and stack traces go behind a fold so the description stays readable.\n\n`};",
"description": "Inline chips, a keycap, and a fold: the pieces Figma can't run inside a text line."
}
],
"import": "import { Markdown } from '#ui/components/Markdown.tsx';\nimport { QueryClientProvider } from '@tanstack/react-query';"
},
"components-avatar": {
"id": "components-avatar",
"name": "Avatar",
"path": "../../packages/ui-react/src/Avatar.stories.tsx",
"jsDocTags": {
"import": [
"import { Avatar } from \"@gitbutler/ui-react/Avatar.tsx\";"
]
},
"description": "A person's picture in a circle. Without one, or when it fails to load, the real Gravatar\nphoto for an email `seed`; failing that, the person's glitch in a colour picked from\n`seed` (a login or an email), the same one that shows while a picture loads and the one\n`ProfileImage` draws. Never a generated face, a blank or a broken image.\nDecorative by default: the name beside it is what a screen reader reads, so give `alt`\nonly where it stands alone.",
"reactComponentMeta": {
"displayName": "Avatar",
"exportName": "Avatar",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/Avatar.tsx",
"description": "A person's picture in a circle. Without one, or when it fails to load, the real Gravatar\nphoto for an email `seed`; failing that, the person's glitch in a colour picked from\n`seed` (a login or an email), the same one that shows while a picture loads and the one\n`ProfileImage` draws. Never a generated face, a blank or a broken image.\nDecorative by default: the name beside it is what a screen reader reads, so give `alt`\nonly where it stands alone.",
"jsDocTags": {
"import": [
"import { Avatar } from \"@gitbutler/ui-react/Avatar.tsx\";"
]
},
"props": {
"src": {
"name": "src",
"required": true,
"type": {
"name": "string | null | undefined"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Avatar.tsx"
}
]
},
"seed": {
"name": "seed",
"required": true,
"type": {
"name": "string"
},
"description": "Who this is, for the fallback: an email finds their Gravatar, and either picks the colour.",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Avatar.tsx"
}
]
},
"size": {
"name": "size",
"required": false,
"type": {
"name": "enum",
"raw": "14 | 16 | 18",
"value": [
{
"value": "14"
},
{
"value": "16"
},
{
"value": "18"
}
]
},
"description": "",
"defaultValue": {
"value": "16"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Avatar.tsx"
}
]
},
"alt": {
"name": "alt",
"required": false,
"type": {
"name": "string"
},
"description": "",
"defaultValue": {
"value": "\"\""
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Avatar.tsx"
}
]
},
"className": {
"name": "className",
"required": false,
"type": {
"name": "string"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Avatar.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-avatar--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "components-avatar--no-picture",
"name": "No Picture",
"snippet": "const NoPicture = (args) => (\n \n {[\n \"krlvi\",\n \"schacon\",\n \"Caleb-T-Owens\",\n \"mtsgrd\",\n \"slarse\",\n \"samhh\",\n \"estib-vega\",\n \"PavelLaptev\",\n ].map((login) => (\n
\n {sizes.map((size) => (\n \n ))}\n
\n ))}\n \n);",
"description": "No picture: the person's glitch, in a colour picked from the login, the same wherever they appear."
},
{
"id": "components-avatar--sizes",
"name": "Sizes",
"snippet": "const Sizes = (args) => (\n
\n);",
"description": "A pull request's checks as an app shows them: every CI state and the icon-only badge it\ntakes, its variant chosen by what the state asks of the reader. A run still going that already has a failure is red with\nthe spinner: the failure is the news, the spinner says more may come."
}
],
"import": "import { Badge } from '@gitbutler/ui-react/Badge.tsx';\nimport { Icon } from '@gitbutler/ui-react';"
},
"components-banner": {
"id": "components-banner",
"name": "Banner",
"path": "../../packages/ui-react/src/Banner.stories.tsx",
"jsDocTags": {
"public": [
""
],
"import": [
"import { Banner } from \"@gitbutler/ui-react/Banner.tsx\";"
]
},
"description": "A condition that holds right now, set into the layout above the thing it affects: live updates\npaused, a machine offline, a server that won't answer. It stays while the condition is true and\nleaves when it clears, so it has no close button; the caller renders it only while it applies.\n\nThe title is the one line every banner has. `children` is an optional second sentence under it.\nThe icon and the action line up with the title. The action is the fix (Retry, Reconnect, Pull):\none small ghost `Button`, which takes the banner's colour.\n\nUse a Snackbar for the outcome of something the user just did; a banner is for state.",
"reactComponentMeta": {
"displayName": "Banner",
"exportName": "Banner",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/Banner.tsx",
"description": "A condition that holds right now, set into the layout above the thing it affects: live updates\npaused, a machine offline, a server that won't answer. It stays while the condition is true and\nleaves when it clears, so it has no close button; the caller renders it only while it applies.\n\nThe title is the one line every banner has. `children` is an optional second sentence under it.\nThe icon and the action line up with the title. The action is the fix (Retry, Reconnect, Pull):\none small ghost `Button`, which takes the banner's colour.\n\nUse a Snackbar for the outcome of something the user just did; a banner is for state.",
"jsDocTags": {
"public": [
""
],
"import": [
"import { Banner } from \"@gitbutler/ui-react/Banner.tsx\";"
]
},
"props": {
"variant": {
"name": "variant",
"required": true,
"type": {
"name": "enum",
"raw": "\"pop\" | \"safe\" | \"warn\" | \"danger\" | \"gray\"",
"value": [
{
"value": "\"pop\""
},
{
"value": "\"safe\""
},
{
"value": "\"warn\""
},
{
"value": "\"danger\""
},
{
"value": "\"gray\""
}
]
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Banner.tsx"
}
]
},
"title": {
"name": "title",
"required": true,
"type": {
"name": "ReactNode"
},
"description": "One line saying the condition.",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Banner.tsx"
}
]
},
"icon": {
"name": "icon",
"required": false,
"type": {
"name": "false | IconName | undefined"
},
"description": "Overrides the variant's own glyph; `false` drops it.",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Banner.tsx"
}
]
},
"action": {
"name": "action",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "One small ghost `Button`.",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Banner.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-banner--default",
"name": "Default",
"snippet": "const Default = () => Retry\n )} />;",
"description": "The banner as the design states it: a glyph, a title, and the fix."
},
{
"id": "components-banner--all-variants",
"name": "All Variants",
"snippet": "const AllVariants = () => (\n
\n);",
"description": "Five variants, chosen by meaning. Gray carries no verdict, so its title keeps the body colour."
},
{
"id": "components-banner--live-updates-paused",
"name": "Live Updates Paused",
"snippet": "const LiveUpdatesPaused = () => (\n \n Retry\n \n }\n />\n);",
"description": "The live channel dropped and hasn't come back: the page still works, but may be stale."
},
{
"id": "components-banner--machine-offline",
"name": "Machine Offline",
"snippet": "const MachineOffline = () => (\n \n Copy command\n \n }\n >\n Last seen 3d ago. Wake it up, or run but mesh service restart there.\n \n);",
"description": "A machine stopped sending heartbeats; the description says what the user can do about it."
},
{
"id": "components-banner--unreachable",
"name": "Unreachable",
"snippet": "const Unreachable = () => (\n \n Try again\n \n }\n >\n The server answered “502 Bad Gateway”. Trying again every few seconds.\n \n);",
"description": "The server won't answer. `danger` announces itself to screen readers as an alert."
},
{
"id": "components-banner--moved-elsewhere",
"name": "Moved Elsewhere",
"snippet": "const MovedElsewhere = () => (\n \n Show\n \n }\n >\n 3 new commits since you opened it.\n \n);",
"description": "Something new happened elsewhere that the user can act on."
},
{
"id": "components-banner--without-action-or-icon",
"name": "Without Action Or Icon",
"snippet": "const WithoutActionOrIcon = () => (\n
\n \n \n
\n);",
"description": "With nothing to do about it, the banner drops the action; `icon={false}` drops the glyph."
}
],
"import": "import { Banner } from '@gitbutler/ui-react/Banner.tsx';\nimport { Button } from '@gitbutler/ui-react';\nimport { Button } from './Button.tsx';"
},
"components-button": {
"id": "components-button",
"name": "Button",
"path": "../../packages/ui-react/src/Button.stories.tsx",
"jsDocTags": {
"import": [
"import { Button } from \"@gitbutler/ui-react/Button.tsx\";"
]
},
"description": "The button: Base UI's, so `focusableWhenDisabled` and `render` work, styled by variant and size.\nAn icon goes in as a child, before or after the label; an icon-only button takes `iconOnly` and\nneeds an `aria-label`. It is `type=\"button\"` unless told otherwise, so one inside a form doesn't\nsubmit it by accident.\n\nTo make another component look like a button — a toolbar item, a number field's stepper — give it\n`getButtonClassName` instead; to make a Base UI trigger one, pass this as its `render`.",
"reactComponentMeta": {
"displayName": "Button",
"exportName": "Button",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/Button.tsx",
"description": "The button: Base UI's, so `focusableWhenDisabled` and `render` work, styled by variant and size.\nAn icon goes in as a child, before or after the label; an icon-only button takes `iconOnly` and\nneeds an `aria-label`. It is `type=\"button\"` unless told otherwise, so one inside a form doesn't\nsubmit it by accident.\n\nTo make another component look like a button — a toolbar item, a number field's stepper — give it\n`getButtonClassName` instead; to make a Base UI trigger one, pass this as its `render`.",
"jsDocTags": {
"import": [
"import { Button } from \"@gitbutler/ui-react/Button.tsx\";"
]
},
"props": {
"focusableWhenDisabled": {
"name": "focusableWhenDisabled",
"required": false,
"type": {
"name": "boolean"
},
"description": "Whether the button should be focusable when disabled.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "ButtonProps",
"fileName": "../../node_modules/.pnpm/@base-ui+react@1.6.0_@date-fns+tz@1.4.1_@types+react@19.2.14_date-fns@4.1.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/button/Button.d.mts"
},
"declarations": [
{
"name": "ButtonProps",
"fileName": "../../node_modules/.pnpm/@base-ui+react@1.6.0_@date-fns+tz@1.4.1_@types+react@19.2.14_date-fns@4.1.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/button/Button.d.mts"
}
]
},
"nativeButton": {
"name": "nativeButton",
"required": false,
"type": {
"name": "boolean"
},
"description": "Whether the component renders a native `}>(\n \n Local branches\n \n \n Remote branches\n \n Pull requests\n );",
"description": "A filter anchored under its control: each row shows or hides one kind, ticked while shown. Not a\nmenu of actions — that is a `Menu`."
},
{
"id": "components-dropdown--panel",
"name": "Panel",
"snippet": "const Panel = () => \n \n )}>(
\n Notifications\n \n A dropdown carries anchored panels as readily as it carries rows — the container does not\n care what fills it.\n \n
);",
"description": "A panel rather than rows: `children` can be anything, and the container does not change for it."
}
],
"import": "import { Button, Icon, PopupItem, PopupSection } from '@gitbutler/ui-react';\nimport { Dropdown } from '@gitbutler/ui-react/Popup.tsx';\nimport { Button } from './Button.tsx';\nimport { PopupSection, PopupItem } from './Popup.tsx';\nimport { Icon } from './Icon.tsx';"
},
"components-dropdownbutton": {
"id": "components-dropdownbutton",
"name": "DropdownButton",
"path": "../../packages/ui-react/src/DropdownButton.stories.tsx",
"jsDocTags": {
"import": [
"import { DropdownButton } from \"@gitbutler/ui-react/DropdownButton.tsx\";"
]
},
"description": "A primary action joined to a chevron that opens its menu, reading as one\ncontrol split by a seam rather than two buttons side by side.\n\nBoth halves stay focusable while disabled so keyboard users can reach them\nand find out why they're unavailable — which also keeps a disabled action\nhoverable, so `actionTooltip` needs no wrapper element to carry it.",
"reactComponentMeta": {
"displayName": "DropdownButton",
"exportName": "DropdownButton",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/DropdownButton.tsx",
"description": "A primary action joined to a chevron that opens its menu, reading as one\ncontrol split by a seam rather than two buttons side by side.\n\nBoth halves stay focusable while disabled so keyboard users can reach them\nand find out why they're unavailable — which also keeps a disabled action\nhoverable, so `actionTooltip` needs no wrapper element to carry it.",
"jsDocTags": {
"import": [
"import { DropdownButton } from \"@gitbutler/ui-react/DropdownButton.tsx\";"
]
},
"props": {
"children": {
"name": "children",
"required": true,
"type": {
"name": "ReactNode"
},
"description": "Contents of the main action button.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"menuLabel": {
"name": "menuLabel",
"required": true,
"type": {
"name": "string"
},
"description": "Accessible name for the chevron trigger, e.g. \"Commit options\".",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"onMenuTrigger": {
"name": "onMenuTrigger",
"required": true,
"type": {
"name": "(trigger: HTMLButtonElement) => void"
},
"description": "Called with the chevron trigger element, so the caller can anchor its menu\nto it — the menu itself is the caller's, since a native one and a rendered\none attach the same way.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"actionTooltip": {
"name": "actionTooltip",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "Shown on hovering the main action — typically why it is unavailable.\nOmitting it leaves the tooltip disabled rather than unmounting it, so the\nbutton keeps its tree position (and its focus) as the reason comes and goes.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"variant": {
"name": "variant",
"required": false,
"type": {
"name": "enum",
"raw": "\"pop\" | \"gray\" | \"outline\"",
"value": [
{
"value": "\"pop\""
},
{
"value": "\"gray\""
},
{
"value": "\"outline\""
}
]
},
"description": "",
"defaultValue": {
"value": "\"outline\""
},
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"onClick": {
"name": "onClick",
"required": false,
"type": {
"name": "() => void"
},
"description": "",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"disabled": {
"name": "disabled",
"required": false,
"type": {
"name": "boolean"
},
"description": "Disables the main action; the chevron trigger keeps its own flag.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"menuDisabled": {
"name": "menuDisabled",
"required": false,
"type": {
"name": "boolean"
},
"description": "",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"id": {
"name": "id",
"required": false,
"type": {
"name": "string"
},
"description": "",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
},
"className": {
"name": "className",
"required": false,
"type": {
"name": "string"
},
"description": "",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/DropdownButton.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-dropdownbutton--default",
"name": "Default",
"snippet": "const Default = () => {}}>Button;"
},
{
"id": "components-dropdownbutton--variants",
"name": "Variants",
"snippet": "const Variants = () => (\n
\n {variants.map((variant) => (\n \n ))}\n
\n);",
"description": "Pop carries the primary action; gray and outline sit lower in the hierarchy."
},
{
"id": "components-dropdownbutton--disabled",
"name": "Disabled",
"snippet": "const Disabled = () => (\n
\n \n \n \n
\n);",
"description": "The halves disable independently: an unavailable action can still offer its menu."
},
{
"id": "components-dropdownbutton--stretched",
"name": "Stretched",
"snippet": "const Stretched = () => (\n // A column flex container stretches its item across, as the sidebar does.\n (
\n {}}>\n Start commit\n \n \n
)\n);",
"description": "The action fills the space it's given and ellipsises, while the chevron keeps\nits width — as in the sidebar, where the button spans the panel."
},
{
"id": "components-dropdownbutton--disabled-with-tooltip",
"name": "Disabled With Tooltip",
"snippet": "const DisabledWithTooltip = () => (\n {}}\n >\n Merge\n \n);",
"description": "`actionTooltip` on a disabled action says why it is disabled: both halves stay\nhoverable while disabled, so the tooltip needs no wrapper element."
}
],
"import": "import { DropdownButton } from '@gitbutler/ui-react/DropdownButton.tsx';\nimport { Kbd } from '@gitbutler/ui-react';\nimport { Tooltip } from '@base-ui/react';"
},
"components-emptystate": {
"id": "components-emptystate",
"name": "EmptyState",
"path": "../../packages/ui-react/src/EmptyState.stories.tsx",
"jsDocTags": {
"import": [
"import { EmptyState } from \"@gitbutler/ui-react/EmptyState.tsx\";"
]
},
"description": "A surface at rest with nothing in it — the \"Empty state\" component in\n⚛️ Core, whose description carries the rules for what to put in it.\n\nFor a surface that is empty, not one still loading: that says so in a line\nwhere the list would be. A filter that matched nothing takes the block in a\npanel with room for it, and a line in a short strip; see\n`packages/ui-react/design/patterns/empty-states.md`.",
"reactComponentMeta": {
"displayName": "EmptyState",
"exportName": "EmptyState",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/EmptyState.tsx",
"description": "A surface at rest with nothing in it — the \"Empty state\" component in\n⚛️ Core, whose description carries the rules for what to put in it.\n\nFor a surface that is empty, not one still loading: that says so in a line\nwhere the list would be. A filter that matched nothing takes the block in a\npanel with room for it, and a line in a short strip; see\n`packages/ui-react/design/patterns/empty-states.md`.",
"jsDocTags": {
"import": [
"import { EmptyState } from \"@gitbutler/ui-react/EmptyState.tsx\";"
]
},
"props": {
"illustration": {
"name": "illustration",
"required": false,
"type": {
"name": "enum",
"raw": "\"terminal\" | \"cactus\" | \"id-card\" | \"papers\" | \"sleep\" | \"waving\"",
"value": [
{
"value": "\"terminal\""
},
{
"value": "\"cactus\""
},
{
"value": "\"id-card\""
},
{
"value": "\"papers\""
},
{
"value": "\"sleep\""
},
{
"value": "\"waving\""
}
]
},
"description": "Omit on a surface too short to hold one; the title and actions carry it.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
}
]
},
"title": {
"name": "title",
"required": false,
"type": {
"name": "string"
},
"description": "One short line naming the state. Sentence case, no full stop. Wraps\nbalanced, so write it as a sentence and let the lines fall where they may.\n\nOmit where the body line says it all — a picker that found nothing\nreports the miss in one line, and a heading over it would only repeat it.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
}
]
},
"description": {
"name": "description",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "1–2 short sentences, around 10–25 words. Say what happens next, or report\nthe live answer — a count, a name, a time — rather than restating the title.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
}
]
},
"children": {
"name": "children",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "The actions slot: at most two buttons, and never `pop`.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
}
]
},
"align": {
"name": "align",
"required": false,
"type": {
"name": "enum",
"raw": "\"center\" | \"start\"",
"value": [
{
"value": "\"center\""
},
{
"value": "\"start\""
}
]
},
"description": "`start` for an empty section in a list that reads from the left edge, as a sidebar's stack of\ncards does: flush with the rows it stands in for rather than centred in the panel.",
"defaultValue": {
"value": "\"center\""
},
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/EmptyState.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-emptystate--default",
"name": "Default",
"snippet": "const Default = () => (<>\n \n \n );"
},
{
"id": "components-emptystate--one-action",
"name": "One Action",
"snippet": "const OneAction = () => ();",
"description": "One action stays quiet: there is no second button for it to rank above."
},
{
"id": "components-emptystate--no-actions",
"name": "No Actions",
"snippet": "const NoActions = () => ;",
"description": "Nothing to do about it, so nothing to press."
},
{
"id": "components-emptystate--without-illustration",
"name": "Without Illustration",
"snippet": "const WithoutIllustration = () => ();",
"description": "Dropped where a panel is too short to hold one."
}
],
"import": "import { Button, Icon } from '@gitbutler/ui-react';\nimport { EmptyState } from '@gitbutler/ui-react/EmptyState.tsx';\nimport { Button } from './Button.tsx';\nimport { Icon } from './Icon.tsx';"
},
"components-entityavatar": {
"id": "components-entityavatar",
"name": "EntityAvatar",
"path": "../../packages/ui-react/src/EntityAvatar.stories.tsx",
"jsDocTags": {
"import": [
"import { EntityAvatar } from \"@gitbutler/ui-react/EntityAvatar.tsx\";"
]
},
"description": "What an entity — a project, a machine, a cloud session — wears in place of a photo: the\nrepository glyph in one of seven colours, an emoji, or a picture the host supplies (a machine's\nkind). An avatar is 38px wherever it stands, the avatar slot of `ViewHeader`, a page of its own\nor the picker's choice of a machine's pictures; leave `size` at `regular`. `small` is the picker's\nemoji and colours, at 28px.\n\nA picture of the thing, not a control: to let someone change it, use `EntityAvatarPicker`.",
"reactComponentMeta": {
"displayName": "EntityAvatar",
"exportName": "EntityAvatar",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/EntityAvatar.tsx",
"description": "What an entity — a project, a machine, a cloud session — wears in place of a photo: the\nrepository glyph in one of seven colours, an emoji, or a picture the host supplies (a machine's\nkind). An avatar is 38px wherever it stands, the avatar slot of `ViewHeader`, a page of its own\nor the picker's choice of a machine's pictures; leave `size` at `regular`. `small` is the picker's\nemoji and colours, at 28px.\n\nA picture of the thing, not a control: to let someone change it, use `EntityAvatarPicker`.",
"jsDocTags": {
"import": [
"import { EntityAvatar } from \"@gitbutler/ui-react/EntityAvatar.tsx\";"
]
},
"props": {
"value": {
"name": "value",
"required": true,
"type": {
"name": "EntityAvatarValue"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/EntityAvatar.tsx"
}
]
},
"size": {
"name": "size",
"required": false,
"type": {
"name": "enum",
"raw": "\"small\" | \"regular\"",
"value": [
{
"value": "\"small\""
},
{
"value": "\"regular\""
}
]
},
"description": "",
"defaultValue": {
"value": "\"regular\""
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/EntityAvatar.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-entityavatar--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "components-entityavatar--choices",
"name": "Choices",
"snippet": "const Choices = () => (\n
\n);",
"description": "The glyph in each of its colours, an emoji and a machine's picture: every avatar is 38px."
},
{
"id": "components-entityavatar--picking-for-a-project",
"name": "Picking For A Project",
"snippet": "const PickingForAProject = () => ;",
"description": "A project's avatar: a colour for the glyph, or an emoji found by name."
},
{
"id": "components-entityavatar--picking-for-a-machine",
"name": "Picking For A Machine",
"snippet": "const PickingForAMachine = () => ;",
"description": "A machine's picture: few enough kinds to show them at full size in the picker, with no search."
}
],
"import": "import { EntityAvatar } from '@gitbutler/ui-react/EntityAvatar.tsx';\nimport { EntityAvatarPicker } from '@gitbutler/ui-react';"
},
"components-errorboundary": {
"id": "components-errorboundary",
"name": "ErrorBoundary",
"path": "../../packages/ui-react/src/ErrorBoundary.stories.tsx",
"jsDocTags": {
"import": [
"import { ErrorBoundary } from \"@gitbutler/ui-react/ErrorBoundary.tsx\";"
]
},
"description": "Confines a render failure to the subtree it happened in. React boundaries\nonly see errors thrown while rendering below them: a throw in an event\nhandler, a timer, or in the parent that builds this subtree's elements\nescapes to the toast in `main.tsx` instead.",
"reactComponentMeta": {
"displayName": "ErrorBoundary",
"exportName": "ErrorBoundary",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/ErrorBoundary.tsx",
"description": "Confines a render failure to the subtree it happened in. React boundaries\nonly see errors thrown while rendering below them: a throw in an event\nhandler, a timer, or in the parent that builds this subtree's elements\nescapes to the toast in `main.tsx` instead.",
"jsDocTags": {
"import": [
"import { ErrorBoundary } from \"@gitbutler/ui-react/ErrorBoundary.tsx\";"
]
},
"props": {
"children": {
"name": "children",
"required": true,
"type": {
"name": "ReactNode"
},
"description": "",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
}
]
},
"title": {
"name": "title",
"required": true,
"type": {
"name": "string"
},
"description": "Names what couldn't be drawn, from where the boundary is mounted: \"The sidebar couldn't be\nshown\". The error itself rarely says anything a reader can act on, so it stays behind\n\"Copy error message\".",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
}
]
},
"resetKeys": {
"name": "resetKeys",
"required": false,
"type": {
"name": "readonly unknown[]"
},
"description": "Clears the error when any entry changes, so a view that fails on one\nselection recovers by moving off it rather than sitting broken until the\nwindow reloads.\n\nKey these on the very thing being rendered — the child element itself,\nnot a URL or selection that merely correlates with it. The reset is\nsingle-shot: it happens after the commit, and if the subtree throws again\nbecause it read state the key had already moved past, that key will not\nchange a second time and the pane stays broken. Where no such key exists,\npass none and leave recovery to Retry.",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
}
]
},
"onReset": {
"name": "onReset",
"required": false,
"type": {
"name": "() => void"
},
"description": "",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/ErrorBoundary.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-errorboundary--default",
"name": "Default",
"snippet": "const Default = () => (\n \n \n \n);",
"description": "What takes the place of a view that threw while rendering: what couldn't be shown, Retry, and the error to copy."
},
{
"id": "components-errorboundary--retry",
"name": "Retry",
"snippet": "const Retry = () => ;",
"description": "Retry clears the error and renders the view again."
}
],
"import": "import { ErrorBoundary } from '@gitbutler/ui-react/ErrorBoundary.tsx';"
},
"components-field": {
"id": "components-field",
"name": "FieldRootStyles",
"path": "../../packages/ui-react/src/Field.stories.tsx",
"jsDocTags": {
"public": [
""
],
"import": [
"import { FieldRootStyles } from \"@gitbutler/ui-react/Field.tsx\";"
]
},
"reactComponentMeta": {
"displayName": "FieldRootStyles",
"exportName": "FieldRootStyles",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/Field.tsx",
"description": "",
"jsDocTags": {
"public": [
""
],
"import": [
"import { FieldRootStyles } from \"@gitbutler/ui-react/Field.tsx\";"
]
},
"props": {}
},
"stories": [
{
"id": "components-field--default",
"name": "Default",
"snippet": "const Default = () => (\n } style={{ width: 320 }}>\n }>Label\n }\n className=\"text-13\"\n placeholder=\"Placeholder\"\n />\n \n);"
},
{
"id": "components-field--with-value",
"name": "With Value",
"snippet": "const WithValue = () => (\n } style={{ width: 320 }}>\n }>Branch name\n }\n className=\"text-13\"\n defaultValue=\"feat/my-feature-branch\"\n />\n \n);"
},
{
"id": "components-field--disabled",
"name": "Disabled",
"snippet": "const Disabled = () => (\n } style={{ width: 320 }}>\n }>Read-only field\n }\n className=\"text-13\"\n defaultValue=\"Cannot be edited\"\n disabled\n />\n \n);"
},
{
"id": "components-field--textarea",
"name": "Textarea",
"snippet": "const Textarea = () => (\n } style={{ width: 320 }}>\n }>Description\n }\n className=\"text-14 text-body\"\n placeholder=\"Add a description…\"\n />\n \n);"
},
{
"id": "components-field--with-leading-icon",
"name": "With Leading Icon",
"snippet": "const WithLeadingIcon = () => (\n } style={{ width: 320 }}>\n }>Search\n }\n iconPosition=\"leading\"\n className=\"text-13\"\n placeholder=\"Search…\"\n />\n \n);"
},
{
"id": "components-field--with-trailing-icon",
"name": "With Trailing Icon",
"snippet": "const WithTrailingIcon = () => (\n } style={{ width: 320 }}>\n }>Repository URL\n }\n iconPosition=\"trailing\"\n className=\"text-13\"\n placeholder=\"https://github.com/org/repo\"\n />\n \n);"
},
{
"id": "components-field--all-variants",
"name": "All Variants",
"snippet": "const AllVariants = () => (\n
\n);"
}
],
"import": "import { Field } from '@base-ui/react';\nimport {\n FieldControlStyles,\n FieldControlWithIcon,\n FieldLabelStyles,\n FieldTextareaStyles,\n Icon,\n} from '@gitbutler/ui-react';\nimport { FieldRootStyles } from '@gitbutler/ui-react/Field.tsx';"
},
"components-fileicon": {
"id": "components-fileicon",
"name": "FileIcon",
"path": "../../packages/ui-react/src/FileIcon.stories.tsx",
"jsDocTags": {
"import": [
"import { FileIcon } from \"@gitbutler/ui-react/FileIcon.tsx\";"
]
},
"description": "A file's language or type glyph, picked from its name: the longest known suffix wins\n(`vite.config.ts` before `.ts`), and anything unknown is a plain document.",
"reactComponentMeta": {
"displayName": "FileIcon",
"exportName": "FileIcon",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/FileIcon.tsx",
"description": "A file's language or type glyph, picked from its name: the longest known suffix wins\n(`vite.config.ts` before `.ts`), and anything unknown is a plain document.",
"jsDocTags": {
"import": [
"import { FileIcon } from \"@gitbutler/ui-react/FileIcon.tsx\";"
]
},
"props": {
"fileName": {
"name": "fileName",
"required": true,
"type": {
"name": "string"
},
"description": "",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/FileIcon.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileIcon.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-fileicon--default",
"name": "Default",
"snippet": "const Default = () => ;",
"description": "Type a file name; the icon follows its name or extension, and a type it doesn't know gets `document`."
},
{
"id": "components-fileicon--all-icons",
"name": "All Icons",
"snippet": "const AllIcons = () => (\n \n {[...samples]\n .sort(([a], [b]) => a.localeCompare(b))\n .map(([icon, fileName]) => (\n \n \n {icon}\n \n ))}\n \n);",
"description": "Every icon a file name can reach, under the icon's name in ⚛️ Core."
}
],
"import": "import { FileIcon } from '@gitbutler/ui-react/FileIcon.tsx';"
},
"components-filelist": {
"id": "components-filelist",
"name": "FileListItem",
"path": "../../packages/ui-react/src/FileList.stories.tsx",
"jsDocTags": {
"public": [
""
],
"import": [
"import { FileList, FileListItem } from \"@gitbutler/ui-react/FileList.tsx\";"
]
},
"description": "One changed file, or a directory of them, in a {@link FileList}: its icon, its name, and what\nhappened to it. The row is the host's to wire: `render` it as a tree item or an option, and\ngive it `onClick`, `inert` while it can't be acted on, and a `ref` and `style` when virtualised.\n\n- `directory` is the path to the file, shown faded after its name, or before it with\n `directoryPosition=\"lead\"`; leave it out where a tree already says where the file is.\n- `depth` indents the row one step per directory it sits in, each step drawing the guide that\n ties it to its directory, so a tree reads as one. A directory row sets `folded`, which gives\n it a folder and a chevron in its own step; `onToggleFolded` answers the chevron, and\n `toggleRender` wraps it, for a tooltip trigger.\n- `icon` defaults to the file's type glyph, or a folder for a directory.\n- `checkbox` shares the icon's cell and takes its place once the pointer is over it or it is\n checked, so a row stays quiet while browsing.\n- The last cell says what happened: the conflict mark if it is `conflicted`, else a tick if it\n is `reviewed`, which also fades the name (a reviewed file's news is that it is done with),\n else the letter for its `status`, else a folded directory's `count` of files.\n- `actions` take the status's place while the row is hovered, holds focus or is selected, so a\n keyboard user finds them where the pointer would; both sit centred in one fixed cell, so\n nothing moves. `marks` always show, before it.\n- `added` and `removed` give the file's line counts, after its name; either side shows only\n when it isn't zero.\n- `labelRender` and `statusRender` wrap the name and the status, for tooltip triggers.",
"reactComponentMeta": {
"displayName": "FileListItem",
"exportName": "FileListItem",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/FileList.tsx",
"description": "One changed file, or a directory of them, in a {@link FileList}: its icon, its name, and what\nhappened to it. The row is the host's to wire: `render` it as a tree item or an option, and\ngive it `onClick`, `inert` while it can't be acted on, and a `ref` and `style` when virtualised.\n\n- `directory` is the path to the file, shown faded after its name, or before it with\n `directoryPosition=\"lead\"`; leave it out where a tree already says where the file is.\n- `depth` indents the row one step per directory it sits in, each step drawing the guide that\n ties it to its directory, so a tree reads as one. A directory row sets `folded`, which gives\n it a folder and a chevron in its own step; `onToggleFolded` answers the chevron, and\n `toggleRender` wraps it, for a tooltip trigger.\n- `icon` defaults to the file's type glyph, or a folder for a directory.\n- `checkbox` shares the icon's cell and takes its place once the pointer is over it or it is\n checked, so a row stays quiet while browsing.\n- The last cell says what happened: the conflict mark if it is `conflicted`, else a tick if it\n is `reviewed`, which also fades the name (a reviewed file's news is that it is done with),\n else the letter for its `status`, else a folded directory's `count` of files.\n- `actions` take the status's place while the row is hovered, holds focus or is selected, so a\n keyboard user finds them where the pointer would; both sit centred in one fixed cell, so\n nothing moves. `marks` always show, before it.\n- `added` and `removed` give the file's line counts, after its name; either side shows only\n when it isn't zero.\n- `labelRender` and `statusRender` wrap the name and the status, for tooltip triggers.",
"jsDocTags": {
"public": [
""
],
"import": [
"import { FileList, FileListItem } from \"@gitbutler/ui-react/FileList.tsx\";"
]
},
"props": {
"name": {
"name": "name",
"required": true,
"type": {
"name": "string"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"directory": {
"name": "directory",
"required": false,
"type": {
"name": "string | null | undefined"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"directoryPosition": {
"name": "directoryPosition",
"required": false,
"type": {
"name": "enum",
"raw": "\"trail\" | \"lead\"",
"value": [
{
"value": "\"trail\""
},
{
"value": "\"lead\""
}
]
},
"description": "",
"defaultValue": {
"value": "\"trail\""
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"icon": {
"name": "icon",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"checkbox": {
"name": "checkbox",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"depth": {
"name": "depth",
"required": false,
"type": {
"name": "number"
},
"description": "",
"defaultValue": {
"value": "0"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"folded": {
"name": "folded",
"required": false,
"type": {
"name": "boolean"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"onToggleFolded": {
"name": "onToggleFolded",
"required": false,
"type": {
"name": "() => void"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"toggleRender": {
"name": "toggleRender",
"required": false,
"type": {
"name": "ReactElement>"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"status": {
"name": "status",
"required": false,
"type": {
"name": "enum",
"raw": "\"Addition\" | \"Deletion\" | \"Modification\" | \"Rename\"",
"value": [
{
"value": "\"Addition\""
},
{
"value": "\"Deletion\""
},
{
"value": "\"Modification\""
},
{
"value": "\"Rename\""
}
]
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"count": {
"name": "count",
"required": false,
"type": {
"name": "number"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"reviewed": {
"name": "reviewed",
"required": false,
"type": {
"name": "boolean"
},
"description": "",
"defaultValue": {
"value": "false"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"conflicted": {
"name": "conflicted",
"required": false,
"type": {
"name": "boolean"
},
"description": "",
"defaultValue": {
"value": "false"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"selected": {
"name": "selected",
"required": false,
"type": {
"name": "boolean"
},
"description": "",
"defaultValue": {
"value": "false"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"actions": {
"name": "actions",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"marks": {
"name": "marks",
"required": false,
"type": {
"name": "ReactNode"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"added": {
"name": "added",
"required": false,
"type": {
"name": "number"
},
"description": "",
"defaultValue": {
"value": "0"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"removed": {
"name": "removed",
"required": false,
"type": {
"name": "number"
},
"description": "",
"defaultValue": {
"value": "0"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"labelRender": {
"name": "labelRender",
"required": false,
"type": {
"name": "ReactElement>"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"statusRender": {
"name": "statusRender",
"required": false,
"type": {
"name": "ReactElement>"
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileList.tsx"
}
]
},
"render": {
"name": "render",
"required": false,
"type": {
"name": "ReactElement> | ComponentRenderFn | undefined"
},
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
"defaultValue": null,
"parent": {
"name": "UseRenderComponentProps",
"fileName": "../../node_modules/.pnpm/@base-ui+react@1.6.0_@date-fns+tz@1.4.1_@types+react@19.2.14_date-fns@4.1.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/use-render/useRender.d.mts"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../node_modules/.pnpm/@base-ui+react@1.6.0_@date-fns+tz@1.4.1_@types+react@19.2.14_date-fns@4.1.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/use-render/useRender.d.mts"
}
]
}
}
},
"stories": [
{
"id": "components-filelist--default",
"name": "Default",
"snippet": "const Default = () => \n \n;",
"description": "One file in a panel: the header names the files with their count and line totals, and the row\ngives the file's type glyph, its name with the path after it, its line counts, and the letter\nfor its change."
},
{
"id": "components-filelist--states",
"name": "States",
"snippet": "const States = () => (\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n);",
"description": "Every state a row can be in. The list holds the selection focus, so the selected row is solid;\nthe second list has lost it. A row that can't be acted on right now is `inert`."
},
{
"id": "components-filelist--tree",
"name": "Tree",
"snippet": "const Tree = function Render() {\n const [folded, setFolded] = useState>(() => new Set([\"src/styles\"]));\n const [checked, setChecked] = useState>(() => new Set([\"Button.tsx\"]));\n const toggle = (set: ReadonlySet, key: string) => {\n const next = new Set(set);\n if (!next.delete(key)) next.add(key);\n return next;\n };\n const rows = (nodes: Array, depth: number, parent: string): Array =>\n nodes.flatMap((node) => {\n const path = parent === \"\" ? node.name : `${parent}/${node.name}`;\n if (node.kind === \"file\") {\n return [\n setChecked((set) => toggle(set, node.name))}\n />\n }\n />,\n ];\n }\n const isFolded = folded.has(path);\n return [\n setFolded((set) => toggle(set, path))}\n count={isFolded ? countFiles(node) : undefined}\n />,\n ...(isFolded ? [] : rows(node.children, depth + 1, path)),\n ];\n });\n return (\n \n
\n {rows(tree, 0, \"\")}\n
\n \n );\n};",
"description": "A tree: each row steps in under its directory, with the guide that ties it there. A directory\nfolds on its chevron and says how many files it holds while folded; files under one leave out\ntheir path, since the tree says it."
},
{
"id": "components-filelist--virtualised",
"name": "Virtualised",
"snippet": "const Virtualised = function Render() {\n const scrollRef = useRef(null);\n const [selected, setSelected] = useState(0);\n const virtualizer = useVirtualizer({\n count: many.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 28,\n gap: 1,\n });\n return (\n
\n );\n};",
"description": "A long list, virtualised: the virtualizer positions each row and supplies the pixel between\nthem, since rows it places don't take the list's gap."
},
{
"id": "components-filelist--filter",
"name": "Filter",
"snippet": "const Filter = function Render() {\n const [query, setQuery] = useState(\"comp\");\n const shown = filterable.filter(\n (file) => query === null || `${file.directory}/${file.name}`.includes(query),\n );\n return (\n setQuery(\"\")}\n filter={\n query === null\n ? null\n : { value: query, onChange: setQuery, onClose: () => setQuery(null) }\n }\n actions={\n \n }\n >\n {shown.map((file) => (\n \n ))}\n \n );\n};",
"description": "The search button turns the header into the filter field in place, so narrowing the list costs\nno height; the cross or Escape brings the header back."
}
],
"import": "import { Button, Checkbox, FileList, Icon } from '@gitbutler/ui-react';\nimport { FileList as FileListItem } from '@gitbutler/ui-react/FileList.tsx';"
},
"components-filestatusbadge": {
"id": "components-filestatusbadge",
"name": "FileStatusBadge",
"path": "../../packages/ui-react/src/FileStatusBadge.stories.tsx",
"jsDocTags": {
"import": [
"import { FileStatusBadge } from \"@gitbutler/ui-react/FileStatusBadge.tsx\";"
]
},
"reactComponentMeta": {
"displayName": "FileStatusBadge",
"exportName": "FileStatusBadge",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/FileStatusBadge.tsx",
"description": "",
"jsDocTags": {
"import": [
"import { FileStatusBadge } from \"@gitbutler/ui-react/FileStatusBadge.tsx\";"
]
},
"props": {
"status": {
"name": "status",
"required": true,
"type": {
"name": "enum",
"raw": "\"Addition\" | \"Deletion\" | \"Modification\" | \"Rename\"",
"value": [
{
"value": "\"Addition\""
},
{
"value": "\"Deletion\""
},
{
"value": "\"Modification\""
},
{
"value": "\"Rename\""
}
]
},
"description": "",
"defaultValue": null,
"parent": {
"name": "Props",
"fileName": "../../packages/ui-react/src/FileStatusBadge.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/FileStatusBadge.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-filestatusbadge--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "components-filestatusbadge--all-statuses",
"name": "All Statuses",
"snippet": "const AllStatuses = (args) => (\n
\n {statuses.map((status) => (\n \n \n {status}\n
\n ))}\n \n);"
}
],
"import": "import { FileStatusBadge } from '@gitbutler/ui-react/FileStatusBadge.tsx';"
},
"components-foldericon": {
"id": "components-foldericon",
"name": "FolderIcon",
"path": "../../packages/ui-react/src/FolderIcon.stories.tsx",
"jsDocTags": {
"import": [
"import { FolderIcon } from \"@gitbutler/ui-react/FolderIcon.tsx\";"
]
},
"description": "The folder mark, wherever a folder is named: the workspace header and every\ndirectory row in the file tree. Callers size it with CSS; it keeps its\nproportions inside whatever box they give it.",
"reactComponentMeta": {
"displayName": "FolderIcon",
"exportName": "FolderIcon",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/FolderIcon.tsx",
"description": "The folder mark, wherever a folder is named: the workspace header and every\ndirectory row in the file tree. Callers size it with CSS; it keeps its\nproportions inside whatever box they give it.",
"jsDocTags": {
"import": [
"import { FolderIcon } from \"@gitbutler/ui-react/FolderIcon.tsx\";"
]
},
"props": {}
},
"stories": [
{
"id": "components-foldericon--default",
"name": "Default",
"snippet": "const Default = () => ;",
"description": "The mark at the size it was drawn, 17×14."
},
{
"id": "components-foldericon--sizes",
"name": "Sizes",
"snippet": "const Sizes = () => (\n
\n);",
"description": "A row's actions, from its ⋯ and from a right-click anywhere on it: the ⋯ is a `Menu` in the\nrow's `menu` slot, and the row itself is a `ContextMenu`'s trigger, both with the same rows.\nEach menu keeps its own state, so a right-click leaves the ⋯ unpressed."
}
],
"import": "import {\n BranchItem,\n Button,\n ContextMenu,\n Icon,\n MenuItem,\n MenuRadioGroup,\n MenuRadioItem,\n MenuSection,\n MetaCount,\n} from '@gitbutler/ui-react';\nimport { Menu } from '@gitbutler/ui-react/Menu.tsx';\nimport { Button } from './Button.tsx';\nimport { Icon } from './Icon.tsx';\nimport { MenuSection, MenuItem } from './Menu.tsx';"
},
"components-metacount": {
"id": "components-metacount",
"name": "MetaCount",
"path": "../../packages/ui-react/src/MetaCount.stories.tsx",
"jsDocTags": {
"import": [
"import { MetaCount } from \"@gitbutler/ui-react/MetaCount.tsx\";"
]
},
"description": "A glyph and a short value in a row's meta: a count, an age, a branch's name. The type sets both.\nAmber is work waiting on you (`behind`, `uncommitted`, `agent-waiting`), blue is work to send\n(`unpushed`), green is an agent at work (`agent-working`); the rest are neutral. Quietest of all\nare `empty`, a branch with no commits yet, and `head`, what a worktree with nothing to list is on\n(`empty`, `detached`); a row shows either first, ahead of its counts.\n\nThe value is the children, so a host formats it (`12`, `3d`, `retry-transfers`). The glyph says\nnothing to a screen reader: wrap the count in a `Tooltip` saying what it counts, or give it an\n`aria-label`. A long value, such as a branch's name, ends in an ellipsis once its row runs out\nof room.",
"reactComponentMeta": {
"displayName": "MetaCount",
"exportName": "MetaCount",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/MetaCount.tsx",
"description": "A glyph and a short value in a row's meta: a count, an age, a branch's name. The type sets both.\nAmber is work waiting on you (`behind`, `uncommitted`, `agent-waiting`), blue is work to send\n(`unpushed`), green is an agent at work (`agent-working`); the rest are neutral. Quietest of all\nare `empty`, a branch with no commits yet, and `head`, what a worktree with nothing to list is on\n(`empty`, `detached`); a row shows either first, ahead of its counts.\n\nThe value is the children, so a host formats it (`12`, `3d`, `retry-transfers`). The glyph says\nnothing to a screen reader: wrap the count in a `Tooltip` saying what it counts, or give it an\n`aria-label`. A long value, such as a branch's name, ends in an ellipsis once its row runs out\nof room.",
"jsDocTags": {
"import": [
"import { MetaCount } from \"@gitbutler/ui-react/MetaCount.tsx\";"
]
},
"props": {
"type": {
"name": "type",
"required": true,
"type": {
"name": "enum",
"raw": "\"head\" | \"branch\" | \"behind\" | \"unpushed\" | \"commits\" | \"empty\" | \"uncommitted\" | \"clean\" | \"age\" | \"worktrees\" | \"repos\" | \"agent-working\" | \"agent-waiting\"",
"value": [
{
"value": "\"head\""
},
{
"value": "\"branch\""
},
{
"value": "\"behind\""
},
{
"value": "\"unpushed\""
},
{
"value": "\"commits\""
},
{
"value": "\"empty\""
},
{
"value": "\"uncommitted\""
},
{
"value": "\"clean\""
},
{
"value": "\"age\""
},
{
"value": "\"worktrees\""
},
{
"value": "\"repos\""
},
{
"value": "\"agent-working\""
},
{
"value": "\"agent-waiting\""
}
]
},
"description": "",
"defaultValue": null,
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/MetaCount.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-metacount--default",
"name": "Default",
"snippet": "const Default = () => 4;",
"description": "One count: its glyph, coloured by what it counts, and its value."
},
{
"id": "components-metacount--kinds",
"name": "Kinds",
"snippet": "const Kinds = () => (\n
\n);",
"description": "Every kind of count, as rows show them, and the three states of a branch's checks."
}
],
"import": "import { CiStatus } from '@gitbutler/ui-react';\nimport { MetaCount } from '@gitbutler/ui-react/MetaCount.tsx';"
},
"components-modal": {
"id": "components-modal",
"name": "Modal",
"path": "../../packages/ui-react/src/Modal.stories.tsx",
"jsDocTags": {
"public": [
""
],
"import": [
"import { Modal } from \"@gitbutler/ui-react/Popup.tsx\";"
]
},
"description": "A popup that opens over the whole window, dimming what it covers. The backdrop is the only thing\nseparating it from a {@link Dropdown} — the container beneath is the same.\n\nThe modal owns its chrome and placement. A prompt, a confirmation or a short form is built from\n{@link ModalHeader}, {@link ModalBody} and {@link ModalFooter}, and a pane as involved as settings\nlays itself out entirely. A list to search and pick from is not a modal's: it is a `PickerDialog`,\nor Popup's combobox when it hangs off the control that opened it.",
"reactComponentMeta": {
"displayName": "Modal",
"exportName": "Modal",
"filePath": "/home/runner/work/gitbutler/gitbutler/packages/ui-react/src/Popup.tsx",
"description": "A popup that opens over the whole window, dimming what it covers. The backdrop is the only thing\nseparating it from a {@link Dropdown} — the container beneath is the same.\n\nThe modal owns its chrome and placement. A prompt, a confirmation or a short form is built from\n{@link ModalHeader}, {@link ModalBody} and {@link ModalFooter}, and a pane as involved as settings\nlays itself out entirely. A list to search and pick from is not a modal's: it is a `PickerDialog`,\nor Popup's combobox when it hangs off the control that opened it.",
"jsDocTags": {
"public": [
""
],
"import": [
"import { Modal } from \"@gitbutler/ui-react/Popup.tsx\";"
]
},
"props": {
"open": {
"name": "open",
"required": false,
"type": {
"name": "boolean"
},
"description": "Omit to leave the modal uncontrolled and drive it from `trigger` alone.",
"defaultValue": null,
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
},
"onOpenChange": {
"name": "onOpenChange",
"required": false,
"type": {
"name": "(open: boolean) => void"
},
"description": "",
"defaultValue": null,
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
},
"trigger": {
"name": "trigger",
"required": false,
"type": {
"name": "ReactElement>"
},
"description": "Rendered as the modal's trigger. Omit for a modal opened from elsewhere in the app.",
"defaultValue": null,
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
},
"alert": {
"name": "alert",
"required": false,
"type": {
"name": "boolean"
},
"description": "Takes the `alertdialog` role and refuses to close on Escape or a backdrop click: the question\nhas to be answered rather than dismissed. For credentials and destructive confirmations.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
},
"size": {
"name": "size",
"required": false,
"type": {
"name": "enum",
"raw": "\"small\" | \"large\" | \"xsmall\" | \"medium\"",
"value": [
{
"value": "\"small\""
},
{
"value": "\"large\""
},
{
"value": "\"xsmall\""
},
{
"value": "\"medium\""
}
]
},
"description": "",
"defaultValue": {
"value": "\"small\""
},
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
},
"align": {
"name": "align",
"required": false,
"type": {
"name": "enum",
"raw": "\"center\" | \"top\"",
"value": [
{
"value": "\"center\""
},
{
"value": "\"top\""
}
]
},
"description": "Where the modal sits in the window. A picker opens `top`, so its list grows downward the way a\ncommand palette does; everything else centres.",
"defaultValue": {
"value": "\"center\""
},
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
},
"recessed": {
"name": "recessed",
"required": false,
"type": {
"name": "boolean"
},
"description": "Recesses the modal's own ground so the groups inside it read as cards sitting on it, rather\nthan as sections of one sheet. For a pane holding more than one group — settings, a resolver.",
"defaultValue": {
"value": "false"
},
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
},
"initialFocus": {
"name": "initialFocus",
"required": false,
"type": {
"name": "boolean | RefObject | ((openType: InteractionType) => boolean | void | HTMLElement | null) | undefined"
},
"description": "What takes focus as the modal opens, when the first tabbable element is not the right one.",
"defaultValue": null,
"parent": {
"name": "ModalProps",
"fileName": "../../packages/ui-react/src/Popup.tsx"
},
"declarations": [
{
"name": "TypeLiteral",
"fileName": "../../packages/ui-react/src/Popup.tsx"
}
]
}
}
},
"stories": [
{
"id": "components-modal--default",
"name": "Default",
"snippet": "const Default = () => Open modal}>(<>\n \n \n \n \n \n );",
"description": "The modal and its props, to try with the controls. The stories after it are modals as the app\nwrites them — a confirmation, a form, a destructive question — opened and whole, to copy from."
},
{
"id": "components-modal--confirm",
"name": "Confirm",
"snippet": "const Confirm = function Confirm() {\n const [open, setOpen] = useState(true);\n return (\n Upload files}\n >\n \n \n \n }>screenshot.png\n }>pasted-image.png\n \n \n \n \n \n \n \n );\n};",
"description": "A confirmation: the title asks, the description says what answering does, the body shows what\nit acts on, and the footer holds Cancel and the answer. The answer is `gray` and repeats the\ntitle's verb. Escape and the backdrop cancel it."
},
{
"id": "components-modal--form",
"name": "Form",
"snippet": "const Form = function Form() {\n const [open, setOpen] = useState(true);\n return (\n Sign in to git}\n >\n {\n event.preventDefault();\n setOpen(false);\n }}\n >\n \n \n }>\n }\n type=\"password\"\n aria-label=\"Password\"\n />\n \n \n \n \n \n \n \n \n );\n};",
"description": "A short form. The `