@slexn/codecenter-ui 1.0.0

package/src/components/ui/git-graph/index.ts

@@ -0,0 +1,9 @@
+export { default as GitGraph } from "./GitGraph.vue"
+export type {
+  GitGraphCommit,
+  GitGraphProps,
+  GitGraphRef,
+  GitGraphRefType,
+  GitGraphSelectPayload,
+  GitGraphSize,
+} from "./GitGraph.vue"

package/src/components/ui/incident-timeline/IncidentTimeline.vue

@@ -0,0 +1,360 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import type { CSSProperties, HTMLAttributes } from "vue"
+import { CheckIcon } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+
+export type IncidentTimelineStatus =
+  | "degraded"
+  | "maintenance"
+  | "operational"
+  | "outage"
+  | "partial-outage"
+
+export type IncidentTimelineSize = "sm" | "default" | "lg"
+
+export interface IncidentTimelineItem {
+  description?: string
+  endedAt?: Date | string | null
+  id?: number | string
+  label?: string
+  startedAt?: Date | string
+  status?: IncidentTimelineStatus
+  title?: string
+}
+
+export interface IncidentTimelineSelectPayload {
+  index: number
+  item: IncidentTimelineItem
+  status: IncidentTimelineStatus
+}
+
+interface IncidentTimelineProps {
+  barCount?: number
+  class?: HTMLAttributes["class"]
+  emptyLabel?: string
+  items?: IncidentTimelineItem[]
+  label?: string
+  modelValue?: string
+  operationalLabel?: string
+  selectable?: boolean
+  showIcon?: boolean
+  showUptime?: boolean
+  size?: IncidentTimelineSize
+  status?: IncidentTimelineStatus
+  uptime?: number | string
+}
+
+interface NormalizedIncidentTimelineItem {
+  description?: string
+  id: string
+  index: number
+  item: IncidentTimelineItem
+  label: string
+  status: IncidentTimelineStatus
+}
+
+const props = withDefaults(defineProps<IncidentTimelineProps>(), {
+  barCount: 90,
+  emptyLabel: "No timeline data.",
+  label: "Pulsetic Website",
+  operationalLabel: "Operational",
+  selectable: true,
+  showIcon: true,
+  showUptime: true,
+  size: "default",
+  status: "operational",
+})
+
+const emit = defineEmits<{
+  "select": [payload: IncidentTimelineSelectPayload]
+  "update:modelValue": [value: string]
+}>()
+
+const openTooltipId = ref<string | null>(null)
+
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      bar: "h-5 rounded-[3px]",
+      gap: "gap-[clamp(1px,0.22vw,3px)]",
+      headerGap: "gap-2",
+      icon: "size-4",
+      iconGlyph: "size-2.5",
+      label: "text-xs",
+      labelWrap: "gap-1.5",
+      root: "gap-2",
+      uptime: "text-xs",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      bar: "h-9 rounded-[4px]",
+      gap: "gap-[clamp(1px,0.32vw,5px)]",
+      headerGap: "gap-4",
+      icon: "size-6",
+      iconGlyph: "size-4",
+      label: "text-base",
+      labelWrap: "gap-2.5",
+      root: "gap-3",
+      uptime: "text-sm",
+    }
+  }
+
+  return {
+    bar: "h-7 rounded-[4px]",
+    gap: "gap-[clamp(1px,0.28vw,4px)]",
+    headerGap: "gap-3",
+    icon: "size-5",
+    iconGlyph: "size-3.5",
+    label: "text-sm",
+    labelWrap: "gap-2",
+    root: "gap-2.5",
+    uptime: "text-sm",
+  }
+})
+
+const normalizedItems = computed<NormalizedIncidentTimelineItem[]>(() => {
+  const configuredItems = props.items ?? []
+
+  if (configuredItems.length) {
+    return configuredItems.map((item, index) => normalizeItem(item, index))
+  }
+
+  return Array.from({ length: normalizedBarCount.value }, (_, index) =>
+    normalizeItem({
+      id: index,
+      status: props.status,
+    }, index),
+  )
+})
+
+const normalizedBarCount = computed(() =>
+  Math.max(1, Math.min(180, Math.trunc(props.barCount))),
+)
+
+const visibleItems = computed(() => {
+  if (!normalizedItems.value.length) return []
+
+  if (normalizedItems.value.length === normalizedBarCount.value) return normalizedItems.value
+
+  if (normalizedItems.value.length > normalizedBarCount.value) {
+    return normalizedItems.value.slice(-normalizedBarCount.value)
+  }
+
+  const missingCount = normalizedBarCount.value - normalizedItems.value.length
+  const generated = Array.from({ length: missingCount }, (_, index) =>
+    normalizeItem({
+      id: `generated-${index}`,
+      status: props.status,
+    }, index),
+  )
+
+  return [...generated, ...normalizedItems.value]
+})
+
+const overallStatus = computed(() => props.status)
+
+const uptimeLabel = computed(() => {
+  if (props.uptime !== undefined) {
+    return typeof props.uptime === "number" ? `${formatPercent(props.uptime)}%` : props.uptime
+  }
+
+  if (!visibleItems.value.length) return ""
+
+  const operationalCount = visibleItems.value.filter((item) => item.status === "operational").length
+  const value = (operationalCount / visibleItems.value.length) * 100
+
+  return `${formatPercent(value)}%`
+})
+
+const gridStyle = computed<CSSProperties>(() => ({
+  gridTemplateColumns: `repeat(${visibleItems.value.length}, minmax(2px, 1fr))`,
+}))
+
+function normalizeItem(item: IncidentTimelineItem, index: number): NormalizedIncidentTimelineItem {
+  const status = item.status ?? "operational"
+  const label = item.label ?? item.title ?? `${props.operationalLabel} segment ${index + 1}`
+
+  return {
+    description: item.description,
+    id: item.id === undefined ? String(index) : String(item.id),
+    index,
+    item,
+    label,
+    status,
+  }
+}
+
+function formatPercent(value: number) {
+  return new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: value >= 99 ? 2 : 1,
+    minimumFractionDigits: value >= 99 ? 2 : 1,
+  }).format(value)
+}
+
+function statusColor(status: IncidentTimelineStatus) {
+  if (status === "outage") return "oklch(0.58 0.22 27)"
+  if (status === "partial-outage") return "oklch(0.66 0.18 60)"
+  if (status === "degraded") return "oklch(0.75 0.18 90)"
+  if (status === "maintenance") return "oklch(0.62 0.13 290)"
+
+  return "oklch(0.58 0.15 150)"
+}
+
+function itemStyle(item: NormalizedIncidentTimelineItem): CSSProperties {
+  return {
+    backgroundColor: statusColor(item.status),
+  }
+}
+
+function isSelected(item: NormalizedIncidentTimelineItem) {
+  return props.modelValue === item.id
+}
+
+function itemLabel(item: NormalizedIncidentTimelineItem) {
+  const status = item.status.replace(/-/g, " ")
+
+  return item.description ? `${item.label}: ${status}. ${item.description}` : `${item.label}: ${status}`
+}
+
+function statusLabel(status: IncidentTimelineStatus) {
+  if (status === "partial-outage") return "Partial outage"
+
+  return status.charAt(0).toUpperCase() + status.slice(1)
+}
+
+function isTooltipOpen(item: NormalizedIncidentTimelineItem) {
+  return openTooltipId.value === item.id
+}
+
+function handleTooltipOpen(item: NormalizedIncidentTimelineItem, open: boolean) {
+  if (open) {
+    openTooltipId.value = item.id
+    return
+  }
+
+  if (openTooltipId.value === item.id) {
+    openTooltipId.value = null
+  }
+}
+
+function handleSelect(item: NormalizedIncidentTimelineItem) {
+  openTooltipId.value = item.id
+
+  if (!props.selectable) return
+
+  emit("update:modelValue", item.id)
+  emit("select", {
+    index: item.index,
+    item: item.item,
+    status: item.status,
+  })
+}
+</script>
+
+<template>
+  <article
+    data-slot="incident-timeline"
+    :data-size="props.size"
+    :class="cn('flex min-w-0 flex-col bg-background text-foreground', sizeClasses.root, props.class)"
+  >
+    <header
+      data-slot="incident-timeline-header"
+      :class="cn('flex min-w-0 items-center justify-between', sizeClasses.headerGap)"
+    >
+      <div
+        data-slot="incident-timeline-label-wrap"
+        :class="cn('flex min-w-0 items-center', sizeClasses.labelWrap)"
+      >
+        <span
+          v-if="props.showIcon"
+          data-slot="incident-timeline-status-icon"
+          :class="cn('inline-flex shrink-0 items-center justify-center rounded-full text-white', sizeClasses.icon)"
+          :style="{ backgroundColor: statusColor(overallStatus) }"
+        >
+          <CheckIcon aria-hidden="true" :class="sizeClasses.iconGlyph" />
+        </span>
+
+        <h3
+          data-slot="incident-timeline-label"
+          :class="cn('min-w-0 truncate font-medium leading-none tracking-normal', sizeClasses.label)"
+        >
+          {{ props.label }}
+        </h3>
+      </div>
+
+      <p
+        v-if="props.showUptime && uptimeLabel"
+        data-slot="incident-timeline-uptime"
+        :class="cn('shrink-0 font-normal leading-none tracking-normal text-muted-foreground/45', sizeClasses.uptime)"
+      >
+        {{ uptimeLabel }}
+      </p>
+    </header>
+
+    <div
+      v-if="visibleItems.length"
+      data-slot="incident-timeline-bars"
+    >
+      <TooltipProvider>
+        <div
+          data-slot="incident-timeline-bar-grid"
+          :class="cn('grid min-w-0', sizeClasses.gap)"
+          :style="gridStyle"
+          role="list"
+          :aria-label="`${props.label} timeline`"
+        >
+          <Tooltip
+            v-for="item in visibleItems"
+            :key="item.id"
+            :open="isTooltipOpen(item)"
+            @update:open="handleTooltipOpen(item, $event)"
+          >
+            <TooltipTrigger as-child>
+              <component
+                :is="props.selectable ? 'button' : 'span'"
+                data-slot="incident-timeline-bar"
+                :type="props.selectable ? 'button' : undefined"
+                role="listitem"
+                :aria-label="itemLabel(item)"
+                :aria-selected="props.selectable ? isSelected(item) : undefined"
+                :class="
+                  cn(
+                    'block w-full border-0 p-0 outline-none transition-[opacity,transform] hover:opacity-80 focus-visible:ring-[3px] focus-visible:ring-ring/35',
+                    isSelected(item) && 'opacity-80',
+                    sizeClasses.bar,
+                  )
+                "
+                :style="itemStyle(item)"
+                @click="handleSelect(item)"
+              />
+            </TooltipTrigger>
+            <TooltipContent class="max-w-56 text-left leading-snug">
+              <span class="block font-medium">{{ item.label }}</span>
+              <span class="block text-background/75">{{ statusLabel(item.status) }}</span>
+              <span v-if="item.description" class="mt-1 block text-background/75">
+                {{ item.description }}
+              </span>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </TooltipProvider>
+    </div>
+
+    <p
+      v-else
+      data-slot="incident-timeline-empty"
+      class="text-sm text-muted-foreground"
+    >
+      {{ props.emptyLabel }}
+    </p>
+  </article>
+</template>

package/src/components/ui/incident-timeline/index.ts

@@ -0,0 +1,7 @@
+export { default as IncidentTimeline } from "./IncidentTimeline.vue"
+export type {
+  IncidentTimelineItem,
+  IncidentTimelineSelectPayload,
+  IncidentTimelineSize,
+  IncidentTimelineStatus,
+} from "./IncidentTimeline.vue"

package/src/components/ui/input/Input.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, useAttrs, useId } from "vue"
+import { cn } from "@/lib/utils"
+import InputControl from "./InputControl.vue"
+import type { InputModelValue, InputProps } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<InputProps>(), {
+  iconPosition: "start",
+  type: "text",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: InputModelValue]
+  input: [event: Event]
+  change: [event: Event]
+}>()
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const controlId = computed(() => props.id ?? generatedId)
+const hasMessage = computed(() => Boolean(props.message || props.error))
+const hasError = computed(() => Boolean(props.error))
+const shouldRenderField = computed(() =>
+  Boolean(
+    props.field
+      || props.fieldGroup
+      || props.label
+      || props.description
+      || hasMessage.value,
+  ),
+)
+const descriptionId = computed(() =>
+  props.description ? `${controlId.value}-description` : undefined,
+)
+const messageId = computed(() =>
+  hasMessage.value ? `${controlId.value}-message` : undefined,
+)
+const describedBy = computed(() => {
+  const value = [
+    attrs["aria-describedby"],
+    descriptionId.value,
+    messageId.value,
+  ].filter(Boolean).join(" ")
+
+  return value || undefined
+})
+const resolvedMessage = computed(() =>
+  typeof props.error === "string" ? props.error : props.message,
+)
+
+function handleUpdate(value: InputModelValue) {
+  emit("update:modelValue", value)
+}
+</script>
+
+<template>
+  <InputControl
+    v-if="!shouldRenderField"
+    v-bind="attrs"
+    :id="controlId"
+    :class="props.class"
+    :default-value="props.defaultValue"
+    :disabled="props.disabled"
+    :icon="props.icon"
+    :icon-class="props.iconClass"
+    :icon-position="props.iconPosition"
+    :input-class="props.inputClass"
+    :invalid="props.invalid || hasError"
+    :model-value="props.modelValue"
+    :placeholder="props.placeholder"
+    :readonly="props.readonly"
+    :type="props.type"
+    @change="emit('change', $event)"
+    @input="emit('input', $event)"
+    @update:model-value="handleUpdate"
+  />
+
+  <div
+    v-else
+    :data-slot="props.fieldGroup ? 'input-field-group' : 'input-field'"
+    :class="
+      cn(
+        props.fieldGroup ? 'grid gap-4' : 'grid gap-2',
+        props.groupClass,
+      )
+    "
+  >
+    <div
+      data-slot="input-field"
+      :data-disabled="props.disabled ? '' : undefined"
+      :data-invalid="hasError ? '' : undefined"
+      :class="cn('grid gap-2', props.fieldClass)"
+    >
+      <label
+        v-if="props.label"
+        data-slot="input-label"
+        :for="controlId"
+        :class="
+          cn(
+            'text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-[disabled=true]:opacity-50',
+            props.labelClass,
+          )
+        "
+      >
+        {{ props.label }}
+      </label>
+
+      <InputControl
+        v-bind="attrs"
+        :id="controlId"
+        :aria-describedby="describedBy"
+        :class="props.class"
+        :default-value="props.defaultValue"
+        :disabled="props.disabled"
+        :icon="props.icon"
+        :icon-class="props.iconClass"
+        :icon-position="props.iconPosition"
+        :input-class="props.inputClass"
+        :invalid="props.invalid || hasError"
+        :model-value="props.modelValue"
+        :placeholder="props.placeholder"
+        :readonly="props.readonly"
+        :type="props.type"
+        @change="emit('change', $event)"
+        @input="emit('input', $event)"
+        @update:model-value="handleUpdate"
+      />
+
+      <p
+        v-if="props.description"
+        :id="descriptionId"
+        data-slot="input-description"
+        :class="cn('text-xs leading-relaxed text-muted-foreground', props.descriptionClass)"
+      >
+        {{ props.description }}
+      </p>
+
+      <p
+        v-if="resolvedMessage"
+        :id="messageId"
+        data-slot="input-message"
+        :class="
+          cn(
+            'text-xs font-medium leading-relaxed',
+            hasError ? 'text-destructive' : 'text-muted-foreground',
+            props.messageClass,
+          )
+        "
+      >
+        {{ resolvedMessage }}
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/ui/input/InputControl.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import { cn } from "@/lib/utils"
+import type { InputControlProps, InputModelValue } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<InputControlProps>(), {
+  iconPosition: "start",
+  type: "text",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: InputModelValue]
+  input: [event: Event]
+  change: [event: Event]
+}>()
+
+const attrs = useAttrs()
+
+const isFileInput = computed(() => props.type === "file")
+const hasIcon = computed(() => Boolean(props.icon))
+const inputValue = computed(() => {
+  if (isFileInput.value) return undefined
+
+  return props.modelValue ?? props.defaultValue ?? ""
+})
+const valueBinding = computed(() =>
+  isFileInput.value ? {} : { value: inputValue.value },
+)
+const controlAttrs = computed(() => ({
+  ...attrs,
+  ...valueBinding.value,
+}))
+
+const inputClasses = computed(() =>
+  cn(
+    "border-input bg-background text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:mr-3 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+    isFileInput.value && "cursor-pointer",
+    hasIcon.value
+      && "border-0 bg-transparent px-0 shadow-none focus-visible:border-transparent focus-visible:ring-0",
+    props.inputClass,
+    !hasIcon.value && props.class,
+  ),
+)
+
+const wrapperClasses = computed(() =>
+  cn(
+    "border-input bg-background text-foreground focus-within:border-ring focus-within:ring-ring/50 flex h-9 w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20",
+    props.class,
+  ),
+)
+
+function getInputModelValue(target: HTMLInputElement) {
+  if (isFileInput.value) return target.files
+  if (props.type === "number") return target.value === "" ? "" : target.valueAsNumber
+
+  return target.value
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+
+  if (!isFileInput.value) {
+    emit("update:modelValue", getInputModelValue(target))
+  }
+
+  emit("input", event)
+}
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLInputElement
+
+  if (isFileInput.value) {
+    emit("update:modelValue", getInputModelValue(target))
+  }
+
+  emit("change", event)
+}
+</script>
+
+<template>
+  <div
+    v-if="hasIcon"
+    data-slot="input-wrapper"
+    :class="wrapperClasses"
+  >
+    <component
+      :is="props.icon"
+      v-if="props.iconPosition === 'start'"
+      aria-hidden="true"
+      data-slot="input-icon"
+      :class="cn('size-4 shrink-0 text-muted-foreground', props.iconClass)"
+    />
+
+    <input
+      v-bind="controlAttrs"
+      :id="props.id"
+      data-slot="input"
+      :aria-invalid="props.invalid ? true : undefined"
+      :class="inputClasses"
+      :disabled="props.disabled"
+      :placeholder="props.placeholder"
+      :readonly="props.readonly"
+      :type="props.type"
+      @change="handleChange"
+      @input="handleInput"
+    >
+
+    <component
+      :is="props.icon"
+      v-if="props.iconPosition === 'end'"
+      aria-hidden="true"
+      data-slot="input-icon"
+      :class="cn('size-4 shrink-0 text-muted-foreground', props.iconClass)"
+    />
+  </div>
+
+  <input
+    v-else
+    v-bind="controlAttrs"
+    :id="props.id"
+    data-slot="input"
+    :aria-invalid="props.invalid ? true : undefined"
+    :class="inputClasses"
+    :disabled="props.disabled"
+    :placeholder="props.placeholder"
+    :readonly="props.readonly"
+    :type="props.type"
+    @change="handleChange"
+    @input="handleInput"
+  >
+</template>

package/src/components/ui/input/InputFieldGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="input-field-group" :class="cn('grid gap-4', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+export { default as Input } from "./Input.vue"
+export { default as InputControl } from "./InputControl.vue"
+export { default as InputFieldGroup } from "./InputFieldGroup.vue"
+export type {
+  InputControlProps,
+  InputIconPosition,
+  InputModelValue,
+  InputProps,
+} from "./types"