sh-ui-cli 0.52.0 → 0.52.2

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

@@ -1,191 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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,
-};