@kenlo/kdls-design-system 2.6.0 → 2.7.0

package/kdls-manifest.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "name": "@kenlo/kdls-design-system",
-    "version": "2.6.0"
+    "version": "2.7.0"
   },
   "install": {
     "add": "npm install @kenlo/kdls-design-system",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenlo/kdls-design-system",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "private": false,
   "type": "module",
   "description": "KDLS Design System — componentes React + TypeScript",
@@ -19,9 +19,13 @@
     "./dist/index.css": "./dist/index.css",
     "./manifest.json": "./kdls-manifest.json"
   },
+  "bin": {
+    "kdls-guard": "scripts/kdls-guard.mjs"
+  },
   "files": [
     "dist",
     "kdls-manifest.json",
+    "scripts/kdls-guard.mjs",
     "foundations/tokens.css",
     "foundations/Scrollbar/Scrollbar.css",
     "foundations/styles.css",

package/scripts/kdls-guard.mjs

@@ -0,0 +1,174 @@
+#!/usr/bin/env node
+// kdls-guard — counts hand-built UI in an app that the KDLS design system already provides.
+//
+//   npx -y -p @kenlo/kdls-design-system@<version> kdls-guard app                 # report only
+//   ... kdls-guard --write-baseline kdls-guard.baseline.json app                  # record today's counts
+//   ... kdls-guard --baseline kdls-guard.baseline.json app                        # CI: exit 1 above a ceiling
+//
+// The checks are the "Validação no CI/CD" table of ADR-PROD-004 plus two patterns the first
+// real consumer showed that table misses (numeric fontSize/borderRadius in inline style
+// objects, Tailwind pixel sizes). Consumers run it with allow_failure and a baseline equal to
+// today's count, so it only complains when a change ADDS hand-built UI. A line containing
+// `kdls-guard-ignore` is skipped: use it for a documented exception.
+//
+// ponytail: regexes over comment-stripped lines, not a CSS/TSX parser. A `//` or `/*` inside a
+// string can be miscounted; the baseline absorbs that noise. Move to a parser only if a count
+// is ever disputed.
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const HEX = '#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\\b'
+const STYLE_EXT = new Set(['.css', '.scss'])
+const CODE_EXT = new Set(['.tsx', '.jsx', '.ts', '.js', '.mjs'])
+const JSX_EXT = new Set(['.tsx', '.jsx'])
+const SKIP_DIRS = new Set(['node_modules', '.next', 'dist', 'build', 'out', 'coverage', '.git'])
+
+export const CHECKS = [
+  { id: 'css-hex', label: 'cor hex escrita no CSS', on: 'style', re: new RegExp(HEX, 'g'), declarationsOnly: true },
+  { id: 'css-font-size-px', label: 'font-size em px no CSS', on: 'style', re: /font-size\s*:\s*\d[\d.]*px/g },
+  { id: 'css-border-radius-px', label: 'border-radius em px no CSS', on: 'style', re: /border-radius\s*:\s*\d[\d.]*px/g },
+  { id: 'code-hex', label: 'cor hex escrita no codigo', on: 'code', re: new RegExp(`(?<=['"\`\\[(,])${HEX}`, 'g') },
+  { id: 'inline-style', label: 'style={{ }} inline', on: 'jsx', re: /style=\{\{/g },
+  {
+    id: 'inline-size-number',
+    label: 'fontSize/borderRadius numerico inline',
+    on: 'code',
+    re: /\b(?:fontSize|borderRadius)\s*:\s*(?:\d|['"`]\d[\d.]*(?:px)?['"`])/g,
+  },
+  {
+    id: 'tailwind-px',
+    label: 'tamanho em px do Tailwind (text-[Npx], rounded-[Npx])',
+    on: 'code',
+    re: /\b(?:text|rounded(?:-[a-z]{1,2})?)-\[\d[\d.]*px\]/g,
+  },
+]
+
+const byName = (a, b) => (a < b ? -1 : a > b ? 1 : 0)
+
+function* walk(dir) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true }).sort((a, b) => byName(a.name, b.name))) {
+    const full = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name)) yield* walk(full)
+    } else if (entry.isFile()) {
+      yield full
+    }
+  }
+}
+
+// Blank out comments but keep every newline, so line N of the clean text is line N of the file.
+function stripComments(text, isStyle) {
+  const noBlocks = text.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ''))
+  return isStyle ? noBlocks : noBlocks.replace(/(^|\s)\/\/.*$/gm, '$1')
+}
+
+export function scan(dirs, root = process.cwd()) {
+  const counts = Object.fromEntries(CHECKS.map((c) => [c.id, 0]))
+  const files = Object.fromEntries(CHECKS.map((c) => [c.id, {}]))
+  for (const dir of dirs) {
+    for (const file of walk(path.resolve(root, dir))) {
+      const ext = path.extname(file)
+      const kind = { style: STYLE_EXT.has(ext), code: CODE_EXT.has(ext), jsx: JSX_EXT.has(ext) }
+      if (!kind.style && !kind.code) continue
+      const original = fs.readFileSync(file, 'utf8').split('\n')
+      const clean = stripComments(original.join('\n'), kind.style).split('\n')
+      const rel = path.relative(root, file).split(path.sep).join('/')
+      original.forEach((raw, i) => {
+        if (raw.includes('kdls-guard-ignore')) return
+        for (const check of CHECKS) {
+          if (!kind[check.on]) continue
+          let text = clean[i] ?? ''
+          if (check.declarationsOnly) {
+            // Only values count: `#faded {` is a selector, `color: #fade` is a colour.
+            if (text.includes('{')) text = text.slice(text.lastIndexOf('{') + 1)
+            if (!text.includes(':')) continue
+          }
+          const n = (text.match(check.re) || []).length
+          if (n) {
+            counts[check.id] += n
+            files[check.id][rel] = (files[check.id][rel] || 0) + n
+          }
+        }
+      })
+    }
+  }
+  return { counts, files }
+}
+
+function report({ counts, files }, ceilings) {
+  const lines = ['kdls-guard — interface feita a mao que o kit visual KDLS ja oferece (ADR-PROD-004)']
+  for (const check of CHECKS) {
+    const ceiling = ceilings ? ` teto ${ceilings[check.id] ?? 0}` : ''
+    lines.push(`  ${check.id.padEnd(22)} ${String(counts[check.id]).padStart(6)}${ceiling}  — ${check.label}`)
+    const top = Object.entries(files[check.id])
+      .sort((a, b) => b[1] - a[1] || byName(a[0], b[0]))
+      .slice(0, 5)
+    for (const [file, n] of top) lines.push(`      ${String(n).padStart(6)}  ${file}`)
+  }
+  return lines.join('\n')
+}
+
+export function main(args, root = process.cwd()) {
+  let baseline = null
+  let writeBaseline = null
+  const dirs = []
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--baseline') baseline = args[++i]
+    else if (args[i] === '--write-baseline') writeBaseline = args[++i]
+    else dirs.push(args[i])
+  }
+  if (dirs.length === 0) dirs.push(...['app', 'src'].filter((d) => fs.existsSync(path.resolve(root, d))))
+  const missing = dirs.filter((d) => !fs.existsSync(path.resolve(root, d)))
+  if (dirs.length === 0 || missing.length) {
+    console.error(`kdls-guard: nenhuma pasta para ler${missing.length ? ` (nao existe: ${missing.join(', ')})` : ''}`)
+    return 2
+  }
+
+  const result = scan(dirs, root)
+  if (writeBaseline) {
+    const body = {
+      _leia: 'Tetos do kdls-guard (ADR-PROD-004), gravados com a contagem do dia. So podem descer.',
+      ceilings: result.counts,
+    }
+    fs.writeFileSync(path.resolve(root, writeBaseline), `${JSON.stringify(body, null, 2)}\n`)
+    console.log(report(result, null))
+    console.log(`\nTetos gravados em ${writeBaseline}.`)
+    return 0
+  }
+
+  let ceilings = null
+  if (baseline) {
+    const file = path.resolve(root, baseline)
+    if (!fs.existsSync(file)) {
+      console.error(`kdls-guard: arquivo de tetos nao existe: ${baseline}`)
+      return 2
+    }
+    ceilings = JSON.parse(fs.readFileSync(file, 'utf8')).ceilings || {}
+  }
+  console.log(report(result, ceilings))
+  if (!ceilings) {
+    console.log('\nSem --baseline: so relatorio.')
+    return 0
+  }
+  const above = CHECKS.filter((c) => result.counts[c.id] > (ceilings[c.id] ?? 0)).map((c) => c.id)
+  const below = CHECKS.filter((c) => result.counts[c.id] < (ceilings[c.id] ?? 0)).map((c) => c.id)
+  if (above.length) {
+    console.log(
+      `\nACIMA DO TETO: ${above.join(', ')}. Use a peca ou o token do kit (o Kenlo Brain responde qual: ` +
+        'kdls_componente), ou marque uma excecao documentada com kdls-guard-ignore.',
+    )
+    return 1
+  }
+  console.log(`\nNada acima do teto.${below.length ? ` Abaixo do teto em ${below.join(', ')}: baixe o teto para travar o ganho.` : ''}`)
+  return 0
+}
+
+const invokedDirectly = (() => {
+  try {
+    return fs.realpathSync(process.argv[1]) === fs.realpathSync(fileURLToPath(import.meta.url))
+  } catch {
+    return false
+  }
+})()
+if (invokedDirectly) process.exit(main(process.argv.slice(2)))