@citizenplane/pimp 16.0.3 → 16.2.0

package/src/stories/tokenUtils.ts

@@ -0,0 +1,259 @@
+import { ref } from 'vue'
+
+export type Token = { name: string; value: string }
+
+export async function copyText(text: string): Promise<boolean> {
+  if (typeof navigator === 'undefined' || typeof window === 'undefined') return false
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch {
+    // fall through to fallback
+  }
+  try {
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.setAttribute('readonly', '')
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    const ok = document.execCommand('copy')
+    document.body.removeChild(textarea)
+    return ok
+  } catch {
+    return false
+  }
+}
+
+export function useCopier() {
+  const copiedKey = ref<null | string>(null)
+  let timer: null | ReturnType<typeof setTimeout> = null
+
+  const copy = async (key: string, text: string = key) => {
+    const ok = await copyText(text)
+    if (!ok) return
+    if (timer) clearTimeout(timer)
+    copiedKey.value = key
+    timer = setTimeout(() => {
+      copiedKey.value = null
+    }, 1200)
+  }
+
+  return { copiedKey, copy }
+}
+
+type MatcherFn = (name: string) => boolean
+type Matcher = string | RegExp | MatcherFn
+
+const toMatcherFn = (m: Matcher): MatcherFn => {
+  if (typeof m === 'function') return m
+  if (m instanceof RegExp) return (name: string) => m.test(name)
+  return (name: string) => name.startsWith(m)
+}
+
+export function readTokens(include: Matcher[], exclude: Matcher[] = []): Token[] {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return []
+  const styles = getComputedStyle(document.documentElement)
+  const includeFns = include.map(toMatcherFn)
+  const excludeFns = exclude.map(toMatcherFn)
+  const out: Token[] = []
+  for (let i = 0; i < styles.length; i++) {
+    const name = styles[i]
+    if (!name.startsWith('--cp-')) continue
+    if (!includeFns.some((fn) => fn(name))) continue
+    if (excludeFns.some((fn) => fn(name))) continue
+    out.push({ name, value: styles.getPropertyValue(name).trim() })
+  }
+  return out.sort((a, b) => a.name.localeCompare(b.name))
+}
+
+export type ProbeProperty = 'letter-spacing' | 'line-height' | 'width'
+
+/**
+ * Apply a token as the given CSS property on a hidden probe element and read
+ * back the computed value. Defaults to `width`, which is the right choice for
+ * length tokens (rem/px). Use `line-height` or `letter-spacing` to resolve
+ * values that depend on the current font size.
+ */
+export function getTokenPixels(tokenName: string, property: ProbeProperty = 'width'): null | string {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return null
+  const probe = document.createElement('div')
+  probe.style.position = 'absolute'
+  probe.style.visibility = 'hidden'
+  probe.style.pointerEvents = 'none'
+  probe.style.fontSize = '16px'
+  if (property === 'width') {
+    probe.style.width = `var(${tokenName})`
+  } else if (property === 'line-height') {
+    probe.style.lineHeight = `var(${tokenName})`
+    probe.textContent = 'M'
+  } else {
+    probe.style.letterSpacing = `var(${tokenName})`
+  }
+  document.body.appendChild(probe)
+  const style = getComputedStyle(probe)
+  let computed: string
+  if (property === 'width') computed = style.width
+  else if (property === 'line-height') computed = style.lineHeight
+  else computed = style.letterSpacing
+  document.body.removeChild(probe)
+  if (!computed || computed === 'auto' || computed === 'normal') return null
+  return computed
+}
+
+const tshirtRank: Record<string, number> = {
+  none: -1,
+  '3xs': 0,
+  '2xs': 1,
+  xs: 2,
+  sm: 3,
+  'sm-md': 3.5,
+  md: 4,
+  'md-lg': 4.5,
+  lg: 5,
+  xl: 6,
+  '2xl': 7,
+  '3xl': 8,
+  '4xl': 9,
+  '5xl': 10,
+  '6xl': 11,
+  '7xl': 12,
+  '8xl': 13,
+  '9xl': 14,
+  full: 9999,
+}
+
+function extractSizeRank(name: string): null | number {
+  const parts = name.replace(/^--cp-/, '').split('-')
+  for (let i = parts.length - 1; i >= 0; i--) {
+    const one = parts[i]
+    const two = i > 0 ? `${parts[i - 1]}-${one}` : null
+    if (two && two in tshirtRank) return tshirtRank[two]
+    if (one in tshirtRank) return tshirtRank[one]
+  }
+  return null
+}
+
+function parsePxNumber(px: null | string): null | number {
+  if (!px) return null
+  const m = px.match(/^(-?\d+(?:\.\d+)?)px$/)
+  return m ? parseFloat(m[1]) : null
+}
+
+export function sortTokensBySize(tokens: Token[], direction: 'asc' | 'desc' = 'desc'): Token[] {
+  const factor = direction === 'desc' ? -1 : 1
+  return [...tokens].sort((a, b) => {
+    const rankA = extractSizeRank(a.name)
+    const rankB = extractSizeRank(b.name)
+    if (rankA !== null && rankB !== null && rankA !== rankB) {
+      return factor * (rankA - rankB)
+    }
+    if (rankA !== null && rankB === null) return -1
+    if (rankA === null && rankB !== null) return 1
+    const pxA = parsePxNumber(getTokenPixels(a.name))
+    const pxB = parsePxNumber(getTokenPixels(b.name))
+    if (pxA !== null && pxB !== null && pxA !== pxB) {
+      return factor * (pxA - pxB)
+    }
+    return a.name.localeCompare(b.name)
+  })
+}
+
+export const copyableClass = 'cp-copyable'
+
+export const copyableCopiedClass = 'cp-copyable--copied'
+
+export const tokenTableClass = 'cp-token-table'
+
+/**
+ * Split a token value into a rem part and a px part. When the raw value is
+ * expressed in rem, both columns are filled (value in rem + computed px).
+ * Otherwise the value goes into whichever column matches its unit.
+ */
+export function splitRemPx(token: Token): { px: string; rem: string } {
+  const value = token.value.trim()
+  const resolvedPx = getTokenPixels(token.name) ?? ''
+  const dash = '—'
+  const isRem = /^-?\d*\.?\d+rem$/.test(value)
+  if (isRem) {
+    return { rem: value, px: resolvedPx || dash }
+  }
+  const isPx = /^-?\d*\.?\d+px$/.test(value)
+  if (isPx) {
+    return { rem: dash, px: value }
+  }
+  return { rem: dash, px: resolvedPx || dash }
+}
+
+function ensureFoundationStyles(): void {
+  if (typeof document === 'undefined') return
+  const id = 'cp-foundation-styles'
+  if (document.getElementById(id)) return
+  const style = document.createElement('style')
+  style.id = id
+  style.textContent = `
+    .${copyableClass} {
+      cursor: pointer;
+      border-radius: 4px;
+      padding: 2px 6px;
+      margin: -2px -6px;
+      transition: background-color 0.15s ease, color 0.15s ease;
+      position: relative;
+    }
+    .${copyableClass}:hover {
+      background-color: #eef0ff;
+    }
+    .${copyableClass}:focus-visible {
+      outline: 2px solid #6366f1;
+      outline-offset: 2px;
+    }
+    .${copyableClass}.${copyableCopiedClass} {
+      background-color: #dcfce7;
+      color: #065f46;
+    }
+    .${tokenTableClass} {
+      width: 100%;
+      border-collapse: collapse;
+      text-align: left;
+    }
+    .${tokenTableClass} thead th {
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: #6b7280;
+      padding: 10px 12px;
+      border-bottom: 1px solid #e5e7eb;
+      background: #f9fafb;
+    }
+    .${tokenTableClass} tbody td {
+      padding: 10px 12px;
+      border-bottom: 1px solid #f1f2f6;
+      vertical-align: middle;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 12px;
+      color: #6b7280;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+    .${tokenTableClass} tbody td:first-child {
+      color: #111;
+    }
+    .${tokenTableClass} tbody tr:last-child td {
+      border-bottom: none;
+    }
+    .${tokenTableClass} tbody td.cp-token-table__preview {
+      width: 1%;
+      white-space: nowrap;
+    }
+  `
+  document.head.appendChild(style)
+}
+
+if (typeof document !== 'undefined') {
+  ensureFoundationStyles()
+}

package/src/types/primevue-toasteventbus.d.ts

@@ -0,0 +1,14 @@
+/**
+ * PrimeVue ships `primevue/toasteventbus` as ESM without bundled `.d.ts`.
+ * This minimal declaration satisfies `vue-tsc` for consumers (e.g. `CpToast.vue`).
+ */
+declare module 'primevue/toasteventbus' {
+  type ToastEventHandler = (payload: unknown) => void
+
+  interface ToastEventBus {
+    on(event: string, handler: ToastEventHandler): void
+  }
+
+  const ToastEventBus: ToastEventBus
+  export default ToastEventBus
+}

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "skipLibCheck": true,
     "isolatedModules": true,
     "moduleResolution": "bundler",
     "module": "esnext",

package/.lintstagedrc.json

@@ -1,4 +0,0 @@
-{
-  "*.{ts,js,vue}": "npm run lint",
-  "*": "npm run format"
-}