@things-factory/shell 10.1.4 → 10.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "10.1.4",
+  "version": "10.1.7",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -126,5 +126,5 @@
     "pg": "^8.7.3",
     "sqlite3": "^5.0.8"
   },
-  "gitHead": "c653a2967daa76b3828f1eb7f4eb18934263d4b8"
+  "gitHead": "9a036f83f5751f9e4af9180e9a0018f716a4ba27"
 }

package/tests/category-palette-single-source.test.ts

@@ -0,0 +1,98 @@
+/**
+ * 분류색 팔레트(`--ui-category-*`)를 **정의하는 자리가 하나인지** 센다.
+ *
+ * ── 왜 주석으로는 못 막나 ───────────────────────────────────────────────────
+ * `category-color.css` 는 「도메인이 바꾸지 않는다」고 적어 두었지만, 테마는 **같은 이름이면 파일
+ * 단위로 대체되는** 구조다(builder 의 ThemeOverridePlugin). 앱이 자기 `category-color.css` 를 두면
+ * 팔레트가 통째로 갈리고, 그것 말고도 자기 CSS 어디서든 `--ui-category-3: ...` 한 줄이면 덮인다.
+ * 둘째 길은 파일을 옮겨도 안 막힌다.
+ *
+ * 그래서 세는 쪽으로 막는다 — 정의가 하나인지를.
+ *
+ * 분류색은 **부호**라서 이것이 지켜져야 한다. 「1번 = 휴무」를 한 번 배운 사람은 그것을 들고 다니고,
+ * 도메인마다 다르면 같은 것을 배운 사람이 다른 공장에서 잘못 읽는다. 오독은 오류보다 나쁘다 — 화면이
+ * 멀쩡해 보이기 때문이다.
+ *
+ * ── 덮어야 할 일이 생기면 ───────────────────────────────────────────────────
+ * 이 시험을 지우지 말고 **가운데(이 파일이 가리키는 그 CSS)를 고친다.** 「이 도메인 바탕에서 3번이
+ * 안 보인다」는 도메인이 덮을 일이 아니라 팔레트의 결함이다. 막기만 하고 길이 없으면 급한 사람이
+ * 우회한다.
+ *
+ * ── 몇 개를 봤는지도 주장한다 ───────────────────────────────────────────────
+ * 「아무것도 못 찾아서 초록」이 이 종류 시험의 대표적인 실패다. 경로가 바뀌거나 glob 이 빗나가면
+ * 검사 대상이 0이 되고, 0을 다 통과한 것으로 읽힌다. 그래서 훑은 CSS 파일 수의 하한을 함께 건다.
+ */
+
+import { readFileSync, readdirSync, statSync } from 'fs'
+import path from 'path'
+
+/** 저장소 안의 모든 CSS 를 훑는다. 여기가 팔레트를 덮을 수 있는 자리 전부다. */
+const REPO_ROOT = path.resolve(__dirname, '../../..')
+
+/** 실제로 훑는 자리. 산출물과 설치본은 소스의 사본이라 세면 같은 정의를 두 번 센다. */
+const SKIP = new Set(['node_modules', 'dist', 'dist-client', 'dist-server', 'dist-shared', '.git', 'coverage'])
+
+/** `--ui-category-3: #...` 처럼 값을 주는 줄. `var(--ui-category-3)` 로 읽기만 하는 줄은 아니다. */
+const DEFINES = /--ui-category-\d+\s*:/
+
+function cssFilesUnder(dir: string, found: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (SKIP.has(entry) || entry.startsWith('.')) continue
+
+    const full = path.join(dir, entry)
+    let stat
+    try {
+      stat = statSync(full)
+    } catch {
+      continue // broken symlink
+    }
+
+    if (stat.isDirectory()) cssFilesUnder(full, found)
+    else if (entry.endsWith('.css')) found.push(full)
+  }
+  return found
+}
+
+describe('the categorical palette has one definition site', () => {
+  const files = cssFilesUnder(REPO_ROOT)
+  const definers = files.filter(file => DEFINES.test(readFileSync(file, 'utf-8')))
+
+  it('scanned enough css to make the answer mean something', () => {
+    /*
+     * Without this, a moved path or a wrong glob scans nothing, finds no overrides, and reports
+     * green. 47 css files were in scope when this was written; the floor sits under that so
+     * deleting a stylesheet does not fail the build, but gutting the scan does.
+     */
+    expect(files.length).toBeGreaterThanOrEqual(40)
+  })
+
+  it('is defined in exactly one file', () => {
+    expect(definers.map(f => path.relative(REPO_ROOT, f))).toEqual([
+      'packages/shell/client/themes/category-color.css'
+    ])
+  })
+
+  it('defines all six slots there, and only six', () => {
+    const css = readFileSync(definers[0], 'utf-8')
+    const slots = new Set([...css.matchAll(/--ui-category-(\d+)\s*:/g)].map(m => m[1]))
+
+    expect([...slots].sort()).toEqual(['1', '2', '3', '4', '5', '6'])
+  })
+
+  it('keeps red for status, so a kind and an error never share a colour', () => {
+    /*
+     * Slot 1 was #c0392b, which measured dE00 2.5 against the error red the plant calendar
+     * actually renders - the same collapse this palette exists to fix. A screen showing both
+     * then has red meaning two things, and "red is bad" stops holding on that screen alone.
+     *
+     * A rule saying "do not use slot 1 where status colours appear" would have to be kept on
+     * every screen, with no signal when it is not. Giving up one colour is cheaper.
+     */
+    const css = readFileSync(definers[0], 'utf-8')
+    const declared = [...css.matchAll(/--ui-category-\d+\s*:\s*(#[0-9a-fA-F]{6})/g)].map(m => m[1].toLowerCase())
+
+    expect(declared.length).toBeGreaterThan(0)
+    expect(declared).not.toContain('#c0392b')
+    expect(declared).not.toContain('#ff9080')
+  })
+})