@slexn/codecenter-ui 1.0.0

package/src/components/ui/diff/diff-parser.ts

@@ -0,0 +1,423 @@
+import {
+  codeLineNumberWidth,
+  createCodeLines,
+  normalizeCode,
+  normalizeCodeLanguage,
+  splitTextLines,
+} from "@/lib/code-highlight"
+
+export type SplitDiffKind = "addition" | "context" | "deletion" | "empty"
+
+export type SplitDiffSide = {
+  content: string
+  html: string
+  isEmpty: boolean
+  kind: SplitDiffKind
+  lineNumber?: number
+}
+
+export type SplitDiffRow = {
+  key: string
+  left: SplitDiffSide
+  right: SplitDiffSide
+}
+
+export type SplitDiffModel = {
+  language?: string
+  leftLabel: string
+  lineNumberWidth: string
+  rightLabel: string
+  rows: SplitDiffRow[]
+}
+
+type PendingSide = Omit<SplitDiffSide, "html" | "isEmpty">
+
+const hunkPattern = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/
+const languageByExtension: Record<string, string> = {
+  cjs: "javascript",
+  css: "css",
+  htm: "html",
+  html: "html",
+  js: "javascript",
+  json: "json",
+  jsonc: "json",
+  jsx: "javascript",
+  md: "markdown",
+  mjs: "javascript",
+  py: "python",
+  rb: "ruby",
+  scss: "scss",
+  sh: "bash",
+  ts: "typescript",
+  tsx: "typescript",
+  vue: "vue",
+  xml: "xml",
+  yaml: "yaml",
+  yml: "yaml",
+}
+
+export function createSplitDiffModel({
+  code,
+  highlight = true,
+  language,
+  leftCode,
+  leftLabel = "원본",
+  rightCode,
+  rightLabel = "변경본",
+}: {
+  code?: string
+  highlight?: boolean
+  language?: string
+  leftCode?: string
+  leftLabel?: string
+  rightCode?: string
+  rightLabel?: string
+}): SplitDiffModel {
+  const normalizedCode = normalizeCode(code ?? "").trim()
+  const normalizedLeftCode = normalizeCode(leftCode ?? "")
+  const normalizedRightCode = normalizeCode(rightCode ?? "")
+  const parsed = normalizedCode
+    ? parseUnifiedDiff(normalizedCode, leftLabel, rightLabel)
+    : createPairedDiff(normalizedLeftCode, normalizedRightCode, leftLabel, rightLabel)
+  const normalizedLanguage = normalizeCodeLanguage(language) ??
+    inferCodeLanguage(leftLabel, rightLabel)
+
+  return applyHighlight({
+    ...parsed,
+    language: normalizedLanguage,
+    rows: parsed.rows.length > 0 ? parsed.rows : createEmptyRows(),
+  }, highlight)
+}
+
+export function splitDiffCopyText(model: SplitDiffModel) {
+  return [
+    model.leftLabel,
+    sideText(model.rows, "left"),
+    "",
+    model.rightLabel,
+    sideText(model.rows, "right"),
+  ].join("\n")
+}
+
+function parseUnifiedDiff(
+  code: string,
+  leftLabel: string,
+  rightLabel: string,
+): Omit<SplitDiffModel, "language" | "lineNumberWidth"> {
+  const rows: SplitDiffRow[] = []
+  const lines = splitTextLines(code)
+  const pendingDeletions: PendingSide[] = []
+  let leftLineNumber = 0
+  let rightLineNumber = 0
+  let inHunk = false
+
+  for (const line of lines) {
+    if (line.startsWith("diff ") || line.startsWith("index ")) {
+      flushPendingDeletions(rows, pendingDeletions)
+      inHunk = false
+      continue
+    }
+
+    if (!inHunk && (line.startsWith("--- ") || line.startsWith("+++ "))) {
+      continue
+    }
+
+    const hunkMatch = line.match(hunkPattern)
+
+    if (hunkMatch) {
+      flushPendingDeletions(rows, pendingDeletions)
+      leftLineNumber = Number(hunkMatch[1])
+      rightLineNumber = Number(hunkMatch[2])
+      inHunk = true
+      continue
+    }
+
+    if (!inHunk || line.startsWith("\\ No newline")) {
+      continue
+    }
+
+    if (line.startsWith("-")) {
+      pendingDeletions.push({
+        content: line.slice(1),
+        kind: "deletion",
+        lineNumber: leftLineNumber,
+      })
+      leftLineNumber += 1
+      continue
+    }
+
+    if (line.startsWith("+")) {
+      const leftSide = pendingDeletions.shift()
+      rows.push(createCodeRow(
+        rows.length,
+        leftSide,
+        {
+          content: line.slice(1),
+          kind: "addition",
+          lineNumber: rightLineNumber,
+        },
+      ))
+      rightLineNumber += 1
+      continue
+    }
+
+    flushPendingDeletions(rows, pendingDeletions)
+
+    const content = line.startsWith(" ") ? line.slice(1) : line
+    rows.push(createCodeRow(
+      rows.length,
+      {
+        content,
+        kind: "context",
+        lineNumber: leftLineNumber,
+      },
+      {
+        content,
+        kind: "context",
+        lineNumber: rightLineNumber,
+      },
+    ))
+    leftLineNumber += 1
+    rightLineNumber += 1
+  }
+
+  flushPendingDeletions(rows, pendingDeletions)
+
+  return {
+    leftLabel,
+    rightLabel,
+    rows,
+  }
+}
+
+function createPairedDiff(
+  leftCode: string,
+  rightCode: string,
+  leftLabel: string,
+  rightLabel: string,
+): Omit<SplitDiffModel, "language" | "lineNumberWidth"> {
+  const operations = createLineOperations(splitTextLines(leftCode), splitTextLines(rightCode))
+  const rows: SplitDiffRow[] = []
+  const pendingDeletions: PendingSide[] = []
+
+  for (const operation of operations) {
+    if (operation.type === "deletion") {
+      pendingDeletions.push({
+        content: operation.content,
+        kind: "deletion",
+        lineNumber: operation.leftLineNumber,
+      })
+      continue
+    }
+
+    if (operation.type === "addition") {
+      const leftSide = pendingDeletions.shift()
+      rows.push(createCodeRow(
+        rows.length,
+        leftSide,
+        {
+          content: operation.content,
+          kind: "addition",
+          lineNumber: operation.rightLineNumber,
+        },
+      ))
+      continue
+    }
+
+    flushPendingDeletions(rows, pendingDeletions)
+    rows.push(createCodeRow(
+      rows.length,
+      {
+        content: operation.content,
+        kind: "context",
+        lineNumber: operation.leftLineNumber,
+      },
+      {
+        content: operation.content,
+        kind: "context",
+        lineNumber: operation.rightLineNumber,
+      },
+    ))
+  }
+
+  flushPendingDeletions(rows, pendingDeletions)
+
+  return {
+    leftLabel,
+    rightLabel,
+    rows,
+  }
+}
+
+function createLineOperations(leftLines: string[], rightLines: string[]) {
+  const distances = Array.from(
+    { length: leftLines.length + 1 },
+    () => Array<number>(rightLines.length + 1).fill(0),
+  )
+
+  for (let leftIndex = leftLines.length - 1; leftIndex >= 0; leftIndex -= 1) {
+    for (let rightIndex = rightLines.length - 1; rightIndex >= 0; rightIndex -= 1) {
+      distances[leftIndex][rightIndex] = leftLines[leftIndex] === rightLines[rightIndex]
+        ? distances[leftIndex + 1][rightIndex + 1] + 1
+        : Math.max(
+            distances[leftIndex + 1][rightIndex],
+            distances[leftIndex][rightIndex + 1],
+          )
+    }
+  }
+
+  const operations: Array<{
+    content: string
+    leftLineNumber?: number
+    rightLineNumber?: number
+    type: "addition" | "context" | "deletion"
+  }> = []
+  let leftIndex = 0
+  let rightIndex = 0
+
+  while (leftIndex < leftLines.length && rightIndex < rightLines.length) {
+    if (leftLines[leftIndex] === rightLines[rightIndex]) {
+      operations.push({
+        content: leftLines[leftIndex],
+        leftLineNumber: leftIndex + 1,
+        rightLineNumber: rightIndex + 1,
+        type: "context",
+      })
+      leftIndex += 1
+      rightIndex += 1
+      continue
+    }
+
+    if (distances[leftIndex + 1][rightIndex] >= distances[leftIndex][rightIndex + 1]) {
+      operations.push({
+        content: leftLines[leftIndex],
+        leftLineNumber: leftIndex + 1,
+        type: "deletion",
+      })
+      leftIndex += 1
+      continue
+    }
+
+    operations.push({
+      content: rightLines[rightIndex],
+      rightLineNumber: rightIndex + 1,
+      type: "addition",
+    })
+    rightIndex += 1
+  }
+
+  for (; leftIndex < leftLines.length; leftIndex += 1) {
+    operations.push({
+      content: leftLines[leftIndex],
+      leftLineNumber: leftIndex + 1,
+      type: "deletion",
+    })
+  }
+
+  for (; rightIndex < rightLines.length; rightIndex += 1) {
+    operations.push({
+      content: rightLines[rightIndex],
+      rightLineNumber: rightIndex + 1,
+      type: "addition",
+    })
+  }
+
+  return operations
+}
+
+function applyHighlight(
+  model: Omit<SplitDiffModel, "lineNumberWidth">,
+  highlight: boolean,
+): SplitDiffModel {
+  const leftCode = model.rows.map((row) => row.left.content).join("\n")
+  const rightCode = model.rows.map((row) => row.right.content).join("\n")
+  const leftLines = createCodeLines(leftCode, model.language, highlight)
+  const rightLines = createCodeLines(rightCode, model.language, highlight)
+  const maxLineNumber = model.rows.reduce((current, row) => Math.max(
+    current,
+    row.left.lineNumber ?? 0,
+    row.right.lineNumber ?? 0,
+  ), 1)
+
+  return {
+    ...model,
+    lineNumberWidth: codeLineNumberWidth(maxLineNumber),
+    rows: model.rows.map((row, index) => ({
+      ...row,
+      left: {
+        ...row.left,
+        html: leftLines[index]?.html ?? "",
+        isEmpty: row.left.content.length === 0,
+      },
+      right: {
+        ...row.right,
+        html: rightLines[index]?.html ?? "",
+        isEmpty: row.right.content.length === 0,
+      },
+    })),
+  }
+}
+
+function createCodeRow(
+  index: number,
+  left?: PendingSide,
+  right?: PendingSide,
+): SplitDiffRow {
+  return {
+    key: `code-${index}`,
+    left: createSide(left),
+    right: createSide(right),
+  }
+}
+
+function createEmptyRows() {
+  return [
+    createCodeRow(0, {
+      content: "",
+      kind: "context",
+      lineNumber: 1,
+    }, {
+      content: "",
+      kind: "context",
+      lineNumber: 1,
+    }),
+  ]
+}
+
+function createSide(side?: PendingSide): SplitDiffSide {
+  if (!side) {
+    return {
+      content: "",
+      html: "",
+      isEmpty: true,
+      kind: "empty",
+    }
+  }
+
+  return {
+    ...side,
+    html: "",
+    isEmpty: side.content.length === 0,
+  }
+}
+
+function flushPendingDeletions(rows: SplitDiffRow[], pendingDeletions: PendingSide[]) {
+  while (pendingDeletions.length > 0) {
+    rows.push(createCodeRow(rows.length, pendingDeletions.shift()))
+  }
+}
+
+function inferCodeLanguage(leftLabel: string, rightLabel: string) {
+  const extension = [rightLabel, leftLabel]
+    .map((label) => label.match(/\.([a-z0-9]+)(?:\s|$)/i)?.[1]?.toLowerCase())
+    .find(Boolean)
+
+  return extension ? languageByExtension[extension] : undefined
+}
+
+function sideText(rows: SplitDiffRow[], side: "left" | "right") {
+  return rows
+    .map((row) => row[side].kind === "empty" ? "" : row[side].content)
+    .join("\n")
+    .replace(/\n+$/g, "")
+}

package/src/components/ui/diff/diff-tool.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "vue"
+
+export interface DiffToolProps {
+  class?: HTMLAttributes["class"]
+  closeLabel?: string
+  code?: string
+  copiedLabel?: string
+  copyLabel?: string
+  expandLabel?: string
+  highlight?: boolean
+  label?: string
+  language?: string
+  leftCode?: string
+  leftLabel?: string
+  lineNumbers?: boolean
+  maxVisibleLines?: number
+  rightCode?: string
+  rightLabel?: string
+}
+
+export type DiffToolEmits = {
+  copy: [code: string]
+}
+
+export const diffToolDefaults = {
+  closeLabel: "닫기",
+  code: "",
+  copiedLabel: "복사됨",
+  copyLabel: "diff 복사",
+  expandLabel: "크게 보기",
+  highlight: true,
+  label: "Diff",
+  leftCode: "",
+  leftLabel: "원본",
+  lineNumbers: true,
+  maxVisibleLines: 20,
+  rightCode: "",
+  rightLabel: "변경본",
+} satisfies Partial<DiffToolProps>

package/src/components/ui/diff/index.ts

@@ -0,0 +1,5 @@
+export { default as DiffTool } from "./DiffTool.vue"
+export type {
+  DiffToolEmits,
+  DiffToolProps,
+} from "./diff-tool"

package/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot
+    v-slot="slotProps"
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui"
+import { DropdownMenuGroup } from "reka-ui"
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<DropdownMenuItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>(), {
+  variant: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4', props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuLabel, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
+import {
+  DropdownMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Circle } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>