Merge pull request #16335 from gitbutlerapp/code-component

feat(ui-react): Code, for a command or name in running text

Author: PavelLaptev

packages/ui-react/src/Code.module.css

@@ -0,0 +1,10 @@
+/* As Markdown draws inline code (design/patterns/markdown.md): mono 12 on --bg-2, at
+   --radius-control. A command that wraps keeps its padding on each line. */
+.code {
+	box-decoration-break: clone;
+	padding: 1px 4px;
+	border-radius: var(--radius-control);
+	background-color: var(--bg-2);
+	font-size: 12px;
+	font-family: var(--font-family-mono);
+}

packages/ui-react/src/Code.stories.tsx

@@ -0,0 +1,40 @@
+import preview from "#storybook/preview";
+import { Code } from "./Code.tsx";
+import { EmptyState } from "./EmptyState.tsx";
+
+const meta = preview.meta({
+	title: "Content & status/Code",
+	id: "components-code",
+	component: Code,
+});
+
+export const Default = meta.story({
+	args: {
+		children: "but mesh service restart",
+	},
+});
+
+/** A command in a sentence, where it reads as part of the text. */
+export const InText = meta.story({
+	render: () => (
+		<p className="text-13" style={{ color: "var(--text-2)" }}>
+			Run <Code>but config forge auth</Code> there to connect GitHub.
+		</p>
+	),
+});
+
+/** An empty state that says how to get out of it. */
+export const InEmptyState = meta.story({
+	render: () => (
+		<EmptyState
+			illustration="cactus"
+			title="scott--mac-studio is offline"
+			description={
+				<>
+					Last seen 1d ago. Wake it up or run <Code>but mesh service restart</Code> there; then its
+					uncommitted changes can be loaded here.
+				</>
+			}
+		/>
+	),
+});

packages/ui-react/src/Code.tsx

@@ -0,0 +1,15 @@
+import styles from "./Code.module.css";
+import { classes } from "./classes.ts";
+import type { ComponentProps, FC } from "react";
+
+/**
+ * Code in running text: a command to run, a flag, a name to type. It reads as Markdown's inline
+ * code does, so a command in an empty state or a hint looks the same as one in a description.
+ * For a command the user is meant to take away, offer a copy button beside the text as well.
+ *
+ * @public
+ * @import import { Code } from "@gitbutler/ui-react/Code.tsx";
+ */
+export const Code: FC<ComponentProps<"code">> = (props) => (
+	<code {...props} className={classes(props.className, styles.code)} />
+);