@slexn/codecenter-ui 1.0.0

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & {
+    arrow?: boolean
+    class?: HTMLAttributes["class"]
+  }>(),
+  {
+    arrow: true,
+    sideOffset: 4,
+  },
+)
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "arrow", "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow
+        v-if="props.arrow"
+        class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
+      />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"

package/src/lib/code-highlight.ts

@@ -0,0 +1,220 @@
+import type { LanguageFn } from "highlight.js"
+import hljs from "highlight.js/lib/core"
+import bash from "highlight.js/lib/languages/bash"
+import css from "highlight.js/lib/languages/css"
+import diff from "highlight.js/lib/languages/diff"
+import javascript from "highlight.js/lib/languages/javascript"
+import json from "highlight.js/lib/languages/json"
+import markdown from "highlight.js/lib/languages/markdown"
+import python from "highlight.js/lib/languages/python"
+import ruby from "highlight.js/lib/languages/ruby"
+import scss from "highlight.js/lib/languages/scss"
+import shell from "highlight.js/lib/languages/shell"
+import typescript from "highlight.js/lib/languages/typescript"
+import xml from "highlight.js/lib/languages/xml"
+import yaml from "highlight.js/lib/languages/yaml"
+
+export type CodeLine = {
+  diffType?: "addition" | "deletion" | "metadata"
+  html: string
+  isEmpty: boolean
+  number: number
+}
+
+const highlighter = hljs.newInstance()
+const registeredLanguages = [
+  "bash",
+  "css",
+  "diff",
+  "javascript",
+  "json",
+  "markdown",
+  "python",
+  "ruby",
+  "scss",
+  "shell",
+  "typescript",
+  "xml",
+  "yaml",
+]
+const languageAliases: Record<string, string> = {
+  bash: "bash",
+  cjs: "javascript",
+  diff: "diff",
+  patch: "diff",
+  htm: "xml",
+  html: "xml",
+  js: "javascript",
+  jsonc: "json",
+  jsx: "javascript",
+  md: "markdown",
+  mjs: "javascript",
+  py: "python",
+  rb: "ruby",
+  sh: "bash",
+  shell: "shell",
+  ts: "typescript",
+  tsx: "typescript",
+  vue: "xml",
+  xml: "xml",
+  yml: "yaml",
+}
+
+registerLanguage("bash", bash)
+registerLanguage("css", css)
+registerLanguage("diff", diff)
+registerLanguage("javascript", javascript)
+registerLanguage("json", json)
+registerLanguage("markdown", markdown)
+registerLanguage("python", python)
+registerLanguage("ruby", ruby)
+registerLanguage("scss", scss)
+registerLanguage("shell", shell)
+registerLanguage("typescript", typescript)
+registerLanguage("xml", xml)
+registerLanguage("yaml", yaml)
+
+highlighter.registerAliases(["htm", "html", "vue"], { languageName: "xml" })
+highlighter.registerAliases(["patch"], { languageName: "diff" })
+highlighter.registerAliases(["js", "jsx", "mjs", "cjs"], { languageName: "javascript" })
+highlighter.registerAliases(["ts", "tsx"], { languageName: "typescript" })
+highlighter.registerAliases(["md"], { languageName: "markdown" })
+highlighter.registerAliases(["py"], { languageName: "python" })
+highlighter.registerAliases(["rb"], { languageName: "ruby" })
+highlighter.registerAliases(["sh"], { languageName: "bash" })
+highlighter.registerAliases(["yml"], { languageName: "yaml" })
+
+export function createCodeLines(
+  code: string,
+  language?: string,
+  highlight = true,
+): CodeLine[] {
+  const normalizedCode = normalizeCode(code)
+  const normalizedLanguage = normalizeCodeLanguage(language)
+  const sourceLines = splitTextLines(normalizedCode)
+  const highlightedLines = splitHighlightedHtmlLines(
+    highlight ? highlightCode(normalizedCode, normalizedLanguage) : escapeHtml(normalizedCode),
+  )
+
+  return sourceLines.map((line, index) => ({
+    diffType: normalizedLanguage === "diff" ? diffLineType(line) : undefined,
+    html: highlightedLines[index] ?? "",
+    isEmpty: line.length === 0,
+    number: index + 1,
+  }))
+}
+
+export function codeLineNumberWidth(lineCount: number) {
+  const digitCount = Math.max(2, String(Math.max(1, lineCount)).length)
+
+  return `calc(${digitCount}ch + 1.5rem)`
+}
+
+function registerLanguage(language: string, defineLanguage: LanguageFn) {
+  highlighter.registerLanguage(language, defineLanguage)
+}
+
+function highlightCode(code: string, language?: string) {
+  const normalizedLanguage = normalizeCodeLanguage(language)
+
+  try {
+    if (normalizedLanguage && highlighter.getLanguage(normalizedLanguage)) {
+      return highlighter.highlight(code, {
+        ignoreIllegals: true,
+        language: normalizedLanguage,
+      }).value
+    }
+
+    return highlighter.highlightAuto(code, registeredLanguages).value
+  } catch {
+    return escapeHtml(code)
+  }
+}
+
+export function normalizeCodeLanguage(language?: string) {
+  const normalized = language?.trim().toLowerCase()
+
+  if (!normalized) return undefined
+
+  return languageAliases[normalized] ?? normalized
+}
+
+function diffLineType(line: string): CodeLine["diffType"] {
+  if (line.startsWith("+") && !line.startsWith("+++")) return "addition"
+  if (line.startsWith("-") && !line.startsWith("---")) return "deletion"
+  if (
+    line.startsWith("@@") ||
+    line.startsWith("diff ") ||
+    line.startsWith("index ") ||
+    line.startsWith("---") ||
+    line.startsWith("+++")
+  ) {
+    return "metadata"
+  }
+
+  return undefined
+}
+
+export function normalizeCode(code: string) {
+  return code.replace(/\r\n?/g, "\n")
+}
+
+export function splitTextLines(text: string) {
+  return text.length > 0 ? text.split("\n") : [""]
+}
+
+function splitHighlightedHtmlLines(html: string) {
+  const lines = [""]
+  const openTags: string[] = []
+  const spanTagPattern = /<\/?span\b[^>]*>/gi
+  let index = 0
+
+  for (const match of html.matchAll(spanTagPattern)) {
+    appendHtmlText(lines, openTags, html.slice(index, match.index))
+    appendSpanTag(lines, openTags, match[0])
+    index = match.index + match[0].length
+  }
+
+  appendHtmlText(lines, openTags, html.slice(index))
+
+  return lines
+}
+
+function appendHtmlText(lines: string[], openTags: string[], text: string) {
+  const parts = text.split("\n")
+
+  for (const [index, part] of parts.entries()) {
+    if (index > 0) {
+      closeOpenTags(lines, openTags)
+      lines.push(openTags.join(""))
+    }
+
+    lines[lines.length - 1] += part
+  }
+}
+
+function appendSpanTag(lines: string[], openTags: string[], tag: string) {
+  lines[lines.length - 1] += tag
+
+  if (tag.startsWith("</")) {
+    openTags.pop()
+    return
+  }
+
+  openTags.push(tag)
+}
+
+function closeOpenTags(lines: string[], openTags: string[]) {
+  for (let index = openTags.length - 1; index >= 0; index -= 1) {
+    lines[lines.length - 1] += "</span>"
+  }
+}
+
+function escapeHtml(text: string) {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#x27;")
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}