refactor: JDS Code 컴포넌트 vanilla-extract 마이그레이션 (#438)

* rename: Code.types.ts → code.types.ts 파일명 변경

* refactor: Code 컴포넌트 VE 마이그레이션

* docs: Code 스토리 description 문구 수정

* refactor: code.css.ts의 vars import를 상대 경로로 변경

* refactor: code recipe의 defaultVariants 제거

* style: code.css.ts import 순서 정리

* refactor: Code 컴포넌트에 ref 전달 지원

* refactor: Code import 정리

Author: areumH

packages/jds/src/components/Code/Code.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Code> = {
     docs: {
       description: {
         component:
-          "인라인 코드는 문장 흐름 안에서 특정 키워드, 값, 명령어, 짧은 코드 조각을 시각적으로 구분하기 위한 텍스트 컴포넌트입니다. 주요 내용의 이해를 보조하는 용도로, 문장을 끊지 않고 맥락 속에서 코드를 인지할 수 있도록 합니다.",
+          "코드는 문장 흐름 안에서 키워드, 값, 명령어, 짧은 코드 조각을 시각적으로 구분하는 텍스트 컴포넌트입니다. 본문을 끊지 않고도 코드 요소를 맥락 속에서 인지하게 합니다. 설명 문맥을 유지하면서 특정 표현을 정확히 지목할 때 사용합니다.",
       },
     },
   },

packages/jds/src/components/Code/Code.styles.ts

@@ -1,12 +1,17 @@
-import { StyledCode } from "./Code.styles";
-import type { CodeProps } from "./Code.types";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
 
-export const Code = ({ children, size = "md", className, ...restProps }: CodeProps) => {
-  return (
-    <StyledCode $size={size} className={className} {...restProps}>
-      {children}
-    </StyledCode>
-  );
-};
+import * as styles from "./code.css";
+import type { CodeProps } from "./code.types";
+
+export const Code = forwardRef<HTMLElement, CodeProps>(
+  ({ children, size = "md", className, ...restProps }, ref) => {
+    return (
+      <code ref={ref} className={clsx(styles.code({ size }), className)} {...restProps}>
+        {children}
+      </code>
+    );
+  },
+);
 
 Code.displayName = "Code";

packages/jds/src/components/Code/Code.tsx

@@ -0,0 +1,27 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+import type { CodeSize } from "./code.types";
+import { vars } from "tokens";
+
+export const codeTypographyClassName: Record<CodeSize, string> = {
+  lg: "semantic-textStyle-syntax-lg",
+  md: "semantic-textStyle-syntax-md",
+  sm: "semantic-textStyle-syntax-sm",
+  xs: "semantic-textStyle-syntax-xs",
+};
+
+export const code = recipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: `${vars.scheme.semantic.spacing["0"]} ${vars.scheme.semantic.spacing["6"]}`,
+    borderRadius: vars.scheme.semantic.radius["4"],
+    background: vars.color.semantic.fill.subtlest,
+    border: `1px solid ${vars.color.semantic.stroke.alpha.assistive}`,
+    color: vars.color.semantic.object.bold,
+    cursor: "text",
+  },
+  variants: {
+    size: codeTypographyClassName,
+  },
+});

packages/jds/src/components/Code/Code.types.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type CodeSize = "lg" | "md" | "sm" | "xs";
+
+export interface CodeProps extends ComponentPropsWithoutRef<"code"> {
+  children: ReactNode;
+  size?: CodeSize;
+}

packages/jds/src/components/Code/code.css.ts

@@ -1,2 +1,2 @@
 export * from "./Code";
-export * from "./Code.types";
+export * from "./code.types";