sh-ui-cli 0.49.0 → 0.50.0

package/data/registry/react/components/code-panel/index.vanilla-extract.tsx

@@ -0,0 +1,191 @@
+import { codeToHtml } from "shiki";
+import { CodePanelCopyButton } from "./copy";
+import { byKey, code, code__header, code__filename, codeCopyFloating, code__copy, codeCopyLabel, code__body, dark } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+export interface CodePanelProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** 하이라이팅할 코드 문자열. children을 제공하지 않을 때 필수. */
+  code?: string;
+  /**
+   * shiki가 지원하는 언어 ID (예: `"tsx"`, `"typescript"`, `"bash"`, `"json"`).
+   * 미지원 언어면 plain text로 폴백.
+   *
+   * @default "text"
+   */
+  language?: string;
+  /**
+   * 상단 헤더에 표시할 파일명. 지정하면 헤더가 그려지고 그 안에 복사 버튼이 들어가며,
+   * 미지정 시 우상단에 floating 복사 버튼만 표시된다.
+   */
+  filename?: string;
+  /**
+   * 좌측 줄 번호 표시 여부.
+   * @default true
+   */
+  showLineNumbers?: boolean;
+  /**
+   * 복사 버튼 숨기기. 코드 발췌가 클립보드 복사용이 아닐 때 사용.
+   * @default false
+   */
+  hideCopy?: boolean;
+  /**
+   * compound 모드. 직접 `CodePanelHeader`/`CodePanelFilename`/`CodePanelCopy`/`CodePanelBody`를
+   * 조합해 헤더 액션 추가나 복사 버튼 위치 변경 등을 한다. 지정 시 `code`/`language` 등은 무시.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * 코드 블록 + 복사 버튼 패널. shiki로 SSR에서 하이라이팅.
+ *
+ * 기본 사용(자식 생략) — `code` prop만 넘기면 기본 레이아웃을 렌더한다.
+ * 커스텀 구성 — `CodePanelHeader`, `CodePanelFilename`, `CodePanelCopy`,
+ * `CodePanelBody`를 직접 조합하여 헤더 액션 추가·복사 버튼 위치 변경 등이 가능하다.
+ */
+export async function CodePanel({
+  code,
+  language = "text",
+  filename,
+  showLineNumbers = true,
+  hideCopy,
+  className,
+  children,
+  ...rest
+}: CodePanelProps) {
+  const classes = cn(code, className);
+
+  if (children !== undefined) {
+    return (
+      <div className={classes} {...rest}>
+        {children}
+      </div>
+    );
+  }
+
+  if (code === undefined) {
+    throw new Error("CodePanel: `code` prop 또는 children 중 하나가 필요합니다.");
+  }
+
+  const trimmed = code.replace(/\n$/, "");
+
+  return (
+    <div className={classes} {...rest}>
+      {filename ? (
+        <CodePanelHeader>
+          <CodePanelFilename>{filename}</CodePanelFilename>
+          {!hideCopy && <CodePanelCopy code={trimmed} />}
+        </CodePanelHeader>
+      ) : (
+        !hideCopy && (
+          <div className={codeCopyFloating}>
+            <CodePanelCopy code={trimmed} />
+          </div>
+        )
+      )}
+      <CodePanelBody
+        code={trimmed}
+        language={language}
+        showLineNumbers={showLineNumbers}
+      />
+    </div>
+  );
+}
+
+/* ───────── CodePanelHeader ───────── */
+
+/** 파일명·복사 버튼 등을 담는 코드 블록 상단 바. CodePanel 자식으로 사용. */
+export function CodePanelHeader({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn(code__header, className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/* ───────── CodePanelFilename ───────── */
+
+/** CodePanelHeader 안에 표시되는 파일명 라벨. */
+export function CodePanelFilename({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span className={cn(code__filename, className)} {...props}>
+      {children}
+    </span>
+  );
+}
+
+/* ───────── CodePanelCopy ─────────
+ * 클립보드 복사 버튼. 내부적으로 client 컴포넌트를 사용한다.
+ */
+
+export interface CodePanelCopyProps {
+  /** 클립보드에 복사할 코드 문자열. 부모(주로 CodePanel)가 명시적으로 전달한다. */
+  code: string;
+}
+
+/** 클립보드 복사 버튼. 부모가 복사할 코드 문자열을 명시적으로 전달한다. */
+export function CodePanelCopy({ code }: CodePanelCopyProps) {
+  return <CodePanelCopyButton code={code} />;
+}
+
+/* ───────── CodePanelBody ─────────
+ * shiki로 코드를 하이라이팅하여 렌더하는 async 컴포넌트.
+ */
+
+export interface CodePanelBodyProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    "children" | "dangerouslySetInnerHTML"
+  > {
+  /** 하이라이팅할 코드 문자열. */
+  code: string;
+  /**
+   * shiki 언어 ID.
+   * @default "text"
+   */
+  language?: string;
+  /**
+   * 좌측 줄 번호 표시 여부.
+   * @default true
+   */
+  showLineNumbers?: boolean;
+}
+
+/**
+ * shiki로 코드를 SSR 하이라이팅하여 렌더하는 async 컴포넌트.
+ * 라이트/다크 테마는 `github-light`/`github-dark`를 사용하며, 부모 테마 클래스에 따라 자동 전환된다.
+ */
+export async function CodePanelBody({
+  code,
+  language = "text",
+  showLineNumbers = true,
+  className,
+  ...rest
+}: CodePanelBodyProps) {
+  const trimmed = code.replace(/\n$/, "");
+  const html = await codeToHtml(trimmed, {
+    lang: language,
+    themes: { light: "github-light", dark: "github-dark" },
+    defaultColor: false,
+  });
+
+  return (
+    <div
+      className={cn(code__body, className)}
+      data-line-numbers={showLineNumbers || undefined}
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...rest}
+    />
+  );
+}
+
+export { CodePanelCopyButton };

package/data/registry/react/components/code-panel/styles.css.ts

@@ -0,0 +1,151 @@
+import { style } from "@vanilla-extract/css";
+
+export const code = style({
+  position: "relative",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  background: "var(--background-subtle)",
+  overflow: "hidden",
+  fontSize: "0.8125rem",
+  lineHeight: 1.6,
+  margin: "var(--space-4) 0",
+  selectors: {
+    [`&:hover ${codeCopyFloating}`]: {
+      opacity: 1,
+    },
+    [`&:focus-within ${codeCopyFloating}`]: {
+      opacity: 1,
+    },
+  },
+  "@media": {
+    "(max-width: 640px)": {
+      fontSize: "var(--text-xs)",
+    },
+  },
+});
+
+export const code__header = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "var(--space-2)",
+  padding: "var(--space-2) var(--space-3) var(--space-2) var(--space-4)",
+  borderBottom: "1px solid var(--border)",
+  background: "var(--background-muted)",
+  fontSize: "var(--text-xs)",
+  color: "var(--foreground-muted)",
+});
+
+export const code__filename = style({
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  color: "var(--foreground)",
+});
+
+export const codeCopyFloating = style({
+  position: "absolute",
+  top: "var(--space-2)",
+  right: "var(--space-2)",
+  zIndex: 1,
+  opacity: 0,
+  transition: "opacity var(--duration-fast)",
+});
+
+export const code__copy = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  padding: "var(--space-1) var(--space-2)",
+  background: "var(--background)",
+  color: "var(--foreground-muted)",
+  border: "1px solid var(--border)",
+  borderRadius: "calc(var(--radius) - 2px)",
+  fontSize: "var(--text-xs)",
+  lineHeight: 1,
+  cursor: "pointer",
+  transition: "color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast)",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:hover": {
+      color: "var(--foreground)",
+      borderColor: "var(--border-strong)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+});
+
+export const codeCopyLabel = style({
+  fontSize: "var(--text-xs)",
+});
+
+export const code__body = style({
+  overflowX: "auto",
+  selectors: {
+    "& pre": {
+      margin: 0,
+      padding: "var(--space-3) var(--space-4)",
+      background: "transparent !important",
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      fontSize: "inherit",
+      lineHeight: "inherit",
+      border: "none",
+      borderRadius: 0,
+    },
+    "& code": {
+      background: "transparent",
+      padding: 0,
+      fontSize: "inherit",
+      display: "block",
+    },
+    "& .shiki": {
+      color: "var(--shiki-light) !important",
+      backgroundColor: "transparent !important",
+    },
+    "& .shiki span": {
+      color: "var(--shiki-light) !important",
+      backgroundColor: "transparent !important",
+    },
+    "&[data-line-numbers] pre code": {
+      counterReset: "step",
+      counterIncrement: "step 0",
+    },
+    "&[data-line-numbers] pre code .line::before": {
+      content: "counter(step)",
+      counterIncrement: "step",
+      display: "inline-block",
+      width: "1.75rem",
+      marginRight: "var(--space-4)",
+      textAlign: "right",
+      color: "var(--foreground-muted)",
+      opacity: 0.7,
+      userSelect: "none",
+    },
+  },
+});
+
+export const dark = style({
+  selectors: {
+    [`& ${code__body} .shiki`]: {
+      color: "var(--shiki-dark) !important",
+      backgroundColor: "transparent !important",
+    },
+    [`& ${code__body} .shiki span`]: {
+      color: "var(--shiki-dark) !important",
+      backgroundColor: "transparent !important",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "code": code,
+  "code__header": code__header,
+  "code__filename": code__filename,
+  "code__copy-floating": codeCopyFloating,
+  "code__copy": code__copy,
+  "code__copy-label": codeCopyLabel,
+  "code__body": code__body,
+  "dark": dark,
+};