@micha.bigler/ui-core-micha 3.1.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +59 -0
- package/WORK_ORDERS.md +20 -1
- package/dist/components/charts/ChartFrame.js +18 -9
- package/docs/CHART-LAYOUT.md +9 -3
- package/package.json +1 -1
- package/scripts/chart-api-census.mjs +407 -0
- package/src/components/charts/ChartFrame.jsx +19 -10
- package/tests/ChartFrame.test.jsx +30 -7
- package/tests/chart-api-census.test.js +366 -0
- package/work-orders/UCM-CHART-14.md +198 -0
|
@@ -0,0 +1,366 @@
|
|
|
1
|
+
import { afterEach, describe, expect, it } from 'vitest';
|
|
2
|
+
import { mkdtempSync, mkdirSync, writeFileSync, rmSync } from 'node:fs';
|
|
3
|
+
import { tmpdir } from 'node:os';
|
|
4
|
+
import { join } from 'node:path';
|
|
5
|
+
import { findChartApiUsage, runCensus, TARGET_PROPS } from '../scripts/chart-api-census.mjs';
|
|
6
|
+
|
|
7
|
+
const IMPORT_LINE = "import { BarChart, LineChart, ScatterChart, TimeSeriesChart, ChartFrame } from '@micha.bigler/ui-core-micha';\n";
|
|
8
|
+
|
|
9
|
+
function propsFound(entry) {
|
|
10
|
+
return TARGET_PROPS.filter((p) => entry.props[p]);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// UCM-CHART-14: this WO exists because a grep could not see JSX structure. First-round fixtures
|
|
14
|
+
// (below) cover what broke the ad-hoc scans behind this series' wrong consumer counts (see
|
|
15
|
+
// work-orders/UCM-CHART-14.md's own table of six). A second, independent review round (both
|
|
16
|
+
// `reviewer` and `ui_reviewer`) found the FIRST version of this file could itself produce a WRONG,
|
|
17
|
+
// non-UNPARSED answer -- worse than honest UNPARSED -- and that two of these very fixtures did not
|
|
18
|
+
// actually exercise the trap their name claimed. Both are fixed; the second-round traps are in the
|
|
19
|
+
// next describe block. Each fixture asserts the EXACT props found, not just "found something".
|
|
20
|
+
describe('findChartApiUsage -- traps that broke ad-hoc grep scans (UCM-CHART-14)', () => {
|
|
21
|
+
it('trap 1: an arrow function inside a prop value does not truncate the tag at its own "=>"', () => {
|
|
22
|
+
const source = `${IMPORT_LINE}
|
|
23
|
+
function Panel() {
|
|
24
|
+
return (
|
|
25
|
+
<ScatterChart
|
|
26
|
+
getPointStyle={(point) => ({ hollow: point.isStatusQuo, color: point.isStatusQuo ? undefined : '#123' })}
|
|
27
|
+
aspect={1.8}
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
`;
|
|
32
|
+
const [entry] = findChartApiUsage(source);
|
|
33
|
+
expect(entry.component).toBe('ScatterChart');
|
|
34
|
+
expect(entry.unparsed).toBe(false);
|
|
35
|
+
expect(propsFound(entry)).toEqual(['aspect']);
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// Second-round finding: the original fixture put the comment BETWEEN two already-closed tags
|
|
39
|
+
// (JSX children), never exercising an open tag's own attribute-scan while a comment is active.
|
|
40
|
+
// This version puts both a line comment AND a block comment, each carrying an apostrophe, INSIDE
|
|
41
|
+
// the attribute list itself -- the position that actually needs string/comment tracking to be
|
|
42
|
+
// correct, since a naive apostrophe could be misread as a string-open.
|
|
43
|
+
it('trap 2: an apostrophe inside a comment WITHIN the attribute list does not desynchronise string tracking', () => {
|
|
44
|
+
const source = `${IMPORT_LINE}
|
|
45
|
+
function Panel() {
|
|
46
|
+
return (
|
|
47
|
+
<ChartFrame
|
|
48
|
+
// don't confuse this line comment's apostrophe with a string open
|
|
49
|
+
minHeight={300}
|
|
50
|
+
/* it's a block comment here too */
|
|
51
|
+
title="Body weight"
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
56
|
+
const [entry] = findChartApiUsage(source);
|
|
57
|
+
expect(entry.component).toBe('ChartFrame');
|
|
58
|
+
expect(propsFound(entry)).toEqual(['minHeight']);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
// Second-round finding: the original fixture's nested keys (`angle`/`left`/`top`) were not even
|
|
62
|
+
// in TARGET_PROPS, so a parser that falsely collected ANY nested key would still have passed.
|
|
63
|
+
// This version nests `aspect` and `height` themselves as object keys several levels deep -- the
|
|
64
|
+
// exact prop names the census is looking for -- so a depth-tracking bug that leaks nested keys
|
|
65
|
+
// up as top-level attributes is now something this test can actually catch.
|
|
66
|
+
it('trap 3: nested braces are tracked by depth -- a nested key with a TARGET PROP NAME is never mistaken for a top-level attribute', () => {
|
|
67
|
+
const source = `${IMPORT_LINE}
|
|
68
|
+
function Panel() {
|
|
69
|
+
return (
|
|
70
|
+
<BarChart
|
|
71
|
+
xAxis={[{ scaleType: 'band', tickLabelStyle: { aspect: 'not-real', height: 999 } }]}
|
|
72
|
+
margin={{ top: 8 }}
|
|
73
|
+
/>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
77
|
+
const [entry] = findChartApiUsage(source);
|
|
78
|
+
// `margin` IS a top-level attribute (found); the nested `aspect`/`height` keys -- despite being
|
|
79
|
+
// real TARGET_PROPS names -- must never surface as attributes of the tag itself.
|
|
80
|
+
expect(propsFound(entry)).toEqual(['margin']);
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
it('trap 4: a prop many lines below the component name is still attributed to the same tag', () => {
|
|
84
|
+
const source = `${IMPORT_LINE}
|
|
85
|
+
function Panel() {
|
|
86
|
+
return (
|
|
87
|
+
<ChartFrame
|
|
88
|
+
title="Body weight"
|
|
89
|
+
subtitle="Last 12 months"
|
|
90
|
+
variant="outlined"
|
|
91
|
+
titleVariant="h6"
|
|
92
|
+
exportOptions
|
|
93
|
+
meta="Updated daily"
|
|
94
|
+
aspect={1.8}
|
|
95
|
+
>
|
|
96
|
+
{children}
|
|
97
|
+
</ChartFrame>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
`;
|
|
101
|
+
const [entry] = findChartApiUsage(source);
|
|
102
|
+
expect(entry.component).toBe('ChartFrame');
|
|
103
|
+
expect(propsFound(entry)).toEqual(['aspect']);
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
// Second review round -- the four NEW traps that surfaced against the first version's three-pass
|
|
108
|
+
// design (a raw regex tag-open search with no string/comment context, and no regex-literal
|
|
109
|
+
// tracking at all). All four are wrong-answer risks, not merely UNPARSED risks -- exactly the
|
|
110
|
+
// class of bug this WO's own F1 finding is about (a false measurement nobody flagged).
|
|
111
|
+
describe('findChartApiUsage -- second-round traps: string/comment-blind matching and regex literals', () => {
|
|
112
|
+
it('does not count JSX-looking text inside a STRING literal as a real element', () => {
|
|
113
|
+
const source = `${IMPORT_LINE}
|
|
114
|
+
const example = '<BarChart aspect />';
|
|
115
|
+
function Panel() {
|
|
116
|
+
return <LineChart margin={{ top: 1 }} />;
|
|
117
|
+
}
|
|
118
|
+
`;
|
|
119
|
+
const entries = findChartApiUsage(source);
|
|
120
|
+
expect(entries).toHaveLength(1);
|
|
121
|
+
expect(entries[0].component).toBe('LineChart');
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
it('does not count JSX-looking text inside a LINE comment as a real element', () => {
|
|
125
|
+
const source = `${IMPORT_LINE}
|
|
126
|
+
// <BarChart aspect />
|
|
127
|
+
function Panel() {
|
|
128
|
+
return <LineChart margin={{ top: 1 }} />;
|
|
129
|
+
}
|
|
130
|
+
`;
|
|
131
|
+
const entries = findChartApiUsage(source);
|
|
132
|
+
expect(entries).toHaveLength(1);
|
|
133
|
+
expect(entries[0].component).toBe('LineChart');
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
it('does not count JSX-looking text inside a BLOCK comment as a real element', () => {
|
|
137
|
+
const source = `${IMPORT_LINE}
|
|
138
|
+
/* an old example: <BarChart aspect /> -- removed */
|
|
139
|
+
function Panel() {
|
|
140
|
+
return <LineChart margin={{ top: 1 }} />;
|
|
141
|
+
}
|
|
142
|
+
`;
|
|
143
|
+
const entries = findChartApiUsage(source);
|
|
144
|
+
expect(entries).toHaveLength(1);
|
|
145
|
+
expect(entries[0].component).toBe('LineChart');
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
// The concrete case found in review: a regex literal's `}`/`>` characters must not be read as
|
|
149
|
+
// real brace/tag-close tokens, or a later real prop on the same tag gets silently dropped.
|
|
150
|
+
it('a regex literal in a prop value does not corrupt brace depth or close the tag early', () => {
|
|
151
|
+
const source = `${IMPORT_LINE}
|
|
152
|
+
function Panel() {
|
|
153
|
+
return (
|
|
154
|
+
<BarChart
|
|
155
|
+
data={/[}>]/}
|
|
156
|
+
aspect={1.8}
|
|
157
|
+
/>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
`;
|
|
161
|
+
const [entry] = findChartApiUsage(source);
|
|
162
|
+
expect(entry.unparsed).toBe(false);
|
|
163
|
+
expect(propsFound(entry)).toEqual(['aspect']);
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
// A component nested INSIDE another target component's own prop expression -- the outer tag's
|
|
167
|
+
// scan must not swallow the inner one, and each must report its OWN props independently.
|
|
168
|
+
it('finds a target component nested inside another target component\'s prop expression', () => {
|
|
169
|
+
const source = `${IMPORT_LINE}
|
|
170
|
+
function Panel() {
|
|
171
|
+
return (
|
|
172
|
+
<ChartFrame minHeight={300} content={<BarChart aspect={1.8} />} />
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
`;
|
|
176
|
+
const entries = findChartApiUsage(source);
|
|
177
|
+
const frame = entries.find((e) => e.component === 'ChartFrame');
|
|
178
|
+
const bar = entries.find((e) => e.component === 'BarChart');
|
|
179
|
+
expect(entries).toHaveLength(2);
|
|
180
|
+
expect(propsFound(frame)).toEqual(['minHeight']);
|
|
181
|
+
expect(propsFound(bar)).toEqual(['aspect']);
|
|
182
|
+
});
|
|
183
|
+
|
|
184
|
+
// Regression test for a bug this WO's OWN verification run found (not review, an actual real-
|
|
185
|
+
// world run against hram): the regex-literal heuristic originally included `<`/`>` in the set of
|
|
186
|
+
// characters that can precede a regex-starting `/`. Every JSX CLOSING tag (`</Something>`) has a
|
|
187
|
+
// `/` immediately after a `<` -- so `</ChartFrame>` itself was misread as opening a regex
|
|
188
|
+
// literal, silently corrupting brace depth for the rest of the file and turning every multi-line
|
|
189
|
+
// `<ChartFrame>...</ChartFrame>` usage in the estate into a false UNPARSED. This fixture is
|
|
190
|
+
// shaped like the real file that exposed it: a target component with real JSX children,
|
|
191
|
+
// including an interleaved NON-target component's own closing tag before the target's own.
|
|
192
|
+
it('a target component with real JSX children (own closing tag, and a sibling non-target closing tag) is not corrupted by the </Tag> regex-heuristic bug', () => {
|
|
193
|
+
const source = `${IMPORT_LINE}
|
|
194
|
+
function Panel() {
|
|
195
|
+
return (
|
|
196
|
+
<ChartFrame minHeight={320} toolbar={<Toolbar><Button>Go</Button></Toolbar>}>
|
|
197
|
+
<ScatterChart aspect={1.8}>
|
|
198
|
+
<ScatterReferenceLine from={{ x: 0, y: 0 }} to={{ x: 1, y: 1 }} />
|
|
199
|
+
</ScatterChart>
|
|
200
|
+
</ChartFrame>
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
`;
|
|
204
|
+
const entries = findChartApiUsage(source);
|
|
205
|
+
const frame = entries.find((e) => e.component === 'ChartFrame');
|
|
206
|
+
const scatter = entries.find((e) => e.component === 'ScatterChart');
|
|
207
|
+
expect(frame).toBeDefined();
|
|
208
|
+
expect(frame.unparsed).toBe(false);
|
|
209
|
+
expect(propsFound(frame)).toEqual(['minHeight']);
|
|
210
|
+
expect(scatter).toBeDefined();
|
|
211
|
+
expect(scatter.unparsed).toBe(false);
|
|
212
|
+
expect(propsFound(scatter)).toEqual(['aspect']);
|
|
213
|
+
});
|
|
214
|
+
});
|
|
215
|
+
|
|
216
|
+
describe('findChartApiUsage -- import resolution and non-traps', () => {
|
|
217
|
+
it('only counts components actually imported from @micha.bigler/ui-core-micha -- a same-named local component is not a consumer', () => {
|
|
218
|
+
const source = `
|
|
219
|
+
import { BarChart } from './my-local-chart';
|
|
220
|
+
function Panel() {
|
|
221
|
+
return <BarChart aspect={1.8} />;
|
|
222
|
+
}
|
|
223
|
+
`;
|
|
224
|
+
expect(findChartApiUsage(source)).toEqual([]);
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
it('resolves an aliased import back to its canonical export name', () => {
|
|
228
|
+
const source = `
|
|
229
|
+
import { BarChart as Bar } from '@micha.bigler/ui-core-micha';
|
|
230
|
+
function Panel() {
|
|
231
|
+
return <Bar aspect={1.8} />;
|
|
232
|
+
}
|
|
233
|
+
`;
|
|
234
|
+
const [entry] = findChartApiUsage(source);
|
|
235
|
+
expect(entry.component).toBe('BarChart');
|
|
236
|
+
expect(propsFound(entry)).toEqual(['aspect']);
|
|
237
|
+
});
|
|
238
|
+
|
|
239
|
+
it('reports no elements in a file with no matching import at all (the fast path)', () => {
|
|
240
|
+
expect(findChartApiUsage('const BarChart = 1; const x = <BarChart aspect={1} />;')).toEqual([]);
|
|
241
|
+
});
|
|
242
|
+
|
|
243
|
+
it('reports a boolean-shorthand attribute (no value) the same as a valued one', () => {
|
|
244
|
+
const source = `${IMPORT_LINE}
|
|
245
|
+
const el = <ChartFrame minHeight />;
|
|
246
|
+
`;
|
|
247
|
+
const [entry] = findChartApiUsage(source);
|
|
248
|
+
expect(propsFound(entry)).toEqual(['minHeight']);
|
|
249
|
+
});
|
|
250
|
+
|
|
251
|
+
it('finds a clean element with none of the target props as an entry with an empty prop list', () => {
|
|
252
|
+
const source = `${IMPORT_LINE}
|
|
253
|
+
const el = <BarChart xAxisLabel="Month" series={[]} />;
|
|
254
|
+
`;
|
|
255
|
+
const [entry] = findChartApiUsage(source);
|
|
256
|
+
expect(entry.unparsed).toBe(false);
|
|
257
|
+
expect(propsFound(entry)).toEqual([]);
|
|
258
|
+
});
|
|
259
|
+
|
|
260
|
+
it('finds multiple distinct elements in the same file, each with its own props', () => {
|
|
261
|
+
const source = `${IMPORT_LINE}
|
|
262
|
+
const a = <BarChart aspect={1} />;
|
|
263
|
+
const b = <LineChart margin={{ top: 1 }} />;
|
|
264
|
+
`;
|
|
265
|
+
const entries = findChartApiUsage(source);
|
|
266
|
+
expect(entries).toHaveLength(2);
|
|
267
|
+
expect(entries[0].component).toBe('BarChart');
|
|
268
|
+
expect(entries[1].component).toBe('LineChart');
|
|
269
|
+
});
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
// Definition of Done: "A tag it cannot close is reported as UNPARSED, never skipped and never
|
|
273
|
+
// counted as clean" -- a census that silently drops what it cannot read is the failure it exists
|
|
274
|
+
// to prevent.
|
|
275
|
+
describe('findChartApiUsage -- UNPARSED, never silently skipped', () => {
|
|
276
|
+
it('reports a tag that never closes as UNPARSED rather than dropping it', () => {
|
|
277
|
+
const source = `${IMPORT_LINE}
|
|
278
|
+
const el = <BarChart aspect={1.8} xAxisLabel="Month unterminated
|
|
279
|
+
`; // no closing `>` or `/>` anywhere after this point
|
|
280
|
+
const entries = findChartApiUsage(source);
|
|
281
|
+
expect(entries).toHaveLength(1);
|
|
282
|
+
expect(entries[0].unparsed).toBe(true);
|
|
283
|
+
expect(entries[0].component).toBe('BarChart');
|
|
284
|
+
});
|
|
285
|
+
|
|
286
|
+
it('keeps scanning after an UNPARSED tag and still finds a later, well-formed one', () => {
|
|
287
|
+
// An unmatched `{` (not a string) leaves brace depth permanently elevated but string tracking
|
|
288
|
+
// intact -- so a LATER tag, opening at that same (now-baseline) depth, can still close
|
|
289
|
+
// correctly relative to it. `BarChart` never returns to its own start depth and is UNPARSED;
|
|
290
|
+
// `LineChart` opens and closes entirely within the leaked depth and is found correctly.
|
|
291
|
+
const source = `${IMPORT_LINE}
|
|
292
|
+
const broken = <BarChart aspect={1.8} xAxis={{ scaleType: 'band';
|
|
293
|
+
const el2 = <LineChart margin={{ top: 1 }} />;
|
|
294
|
+
`;
|
|
295
|
+
const entries = findChartApiUsage(source);
|
|
296
|
+
const bar = entries.find((e) => e.component === 'BarChart');
|
|
297
|
+
const lineChart = entries.find((e) => e.component === 'LineChart');
|
|
298
|
+
expect(bar.unparsed).toBe(true);
|
|
299
|
+
expect(lineChart).toBeDefined();
|
|
300
|
+
expect(lineChart.unparsed).toBe(false);
|
|
301
|
+
expect(propsFound(lineChart)).toEqual(['margin']);
|
|
302
|
+
});
|
|
303
|
+
|
|
304
|
+
// An UNTERMINATED STRING is a genuinely different case from an unmatched brace: nothing can
|
|
305
|
+
// recover from it without guessing where the string was meant to end, so honestly reporting
|
|
306
|
+
// "nothing found after this point" is the correct behaviour, not a bug -- the alternative (the
|
|
307
|
+
// first version of this scanner's per-tag-independent design) would have silently RESYNCHRONISED
|
|
308
|
+
// past a real syntax error, which is exactly the kind of confident-but-wrong answer this WO's
|
|
309
|
+
// second review round exists to rule out.
|
|
310
|
+
it('an unterminated string desyncs the rest of the file -- reported as UNPARSED, not silently resynchronised', () => {
|
|
311
|
+
const source = `${IMPORT_LINE}
|
|
312
|
+
const broken = <BarChart aspect={1.8} xAxisLabel="unterminated;
|
|
313
|
+
const el2 = <LineChart margin={{ top: 1 }} />;
|
|
314
|
+
`;
|
|
315
|
+
const entries = findChartApiUsage(source);
|
|
316
|
+
expect(entries).toHaveLength(1);
|
|
317
|
+
expect(entries[0].component).toBe('BarChart');
|
|
318
|
+
expect(entries[0].unparsed).toBe(true);
|
|
319
|
+
});
|
|
320
|
+
});
|
|
321
|
+
|
|
322
|
+
describe('runCensus -- filesystem walking degrades gracefully (UCM-CHART-14 Risks)', () => {
|
|
323
|
+
let workspaceRoot;
|
|
324
|
+
|
|
325
|
+
afterEach(() => {
|
|
326
|
+
if (workspaceRoot) rmSync(workspaceRoot, { recursive: true, force: true });
|
|
327
|
+
});
|
|
328
|
+
|
|
329
|
+
it('reports "not present" for a sibling with no frontend/src or src, and never throws', () => {
|
|
330
|
+
workspaceRoot = mkdtempSync(join(tmpdir(), 'ucm-census-'));
|
|
331
|
+
mkdirSync(join(workspaceRoot, 'empty-repo'));
|
|
332
|
+
|
|
333
|
+
const result = runCensus(workspaceRoot);
|
|
334
|
+
const entry = result.apps.find((a) => a.app === 'empty-repo');
|
|
335
|
+
expect(entry.present).toBe(false);
|
|
336
|
+
});
|
|
337
|
+
|
|
338
|
+
it('finds a real usage under frontend/src, and reports a clean sibling with no ucm import as present with zero entries', () => {
|
|
339
|
+
workspaceRoot = mkdtempSync(join(tmpdir(), 'ucm-census-'));
|
|
340
|
+
const appSrc = join(workspaceRoot, 'sample-app', 'frontend', 'src');
|
|
341
|
+
mkdirSync(appSrc, { recursive: true });
|
|
342
|
+
writeFileSync(
|
|
343
|
+
join(appSrc, 'Panel.jsx'),
|
|
344
|
+
`${IMPORT_LINE}\nconst el = <BarChart aspect={1.8} />;\n`,
|
|
345
|
+
);
|
|
346
|
+
mkdirSync(join(workspaceRoot, 'clean-app', 'src'), { recursive: true });
|
|
347
|
+
writeFileSync(join(workspaceRoot, 'clean-app', 'src', 'index.js'), 'export const x = 1;\n');
|
|
348
|
+
|
|
349
|
+
const result = runCensus(workspaceRoot);
|
|
350
|
+
const sample = result.apps.find((a) => a.app === 'sample-app');
|
|
351
|
+
const clean = result.apps.find((a) => a.app === 'clean-app');
|
|
352
|
+
expect(sample.present).toBe(true);
|
|
353
|
+
expect(sample.entries).toHaveLength(1);
|
|
354
|
+
expect(sample.entries[0].props.aspect).toBe(true);
|
|
355
|
+
expect(clean.present).toBe(true);
|
|
356
|
+
expect(clean.entries).toHaveLength(0);
|
|
357
|
+
});
|
|
358
|
+
|
|
359
|
+
it('excludes ui-core-micha itself from the sibling walk by default', () => {
|
|
360
|
+
workspaceRoot = mkdtempSync(join(tmpdir(), 'ucm-census-'));
|
|
361
|
+
mkdirSync(join(workspaceRoot, 'ui-core-micha', 'src'), { recursive: true });
|
|
362
|
+
|
|
363
|
+
const result = runCensus(workspaceRoot);
|
|
364
|
+
expect(result.apps.find((a) => a.app === 'ui-core-micha')).toBeUndefined();
|
|
365
|
+
});
|
|
366
|
+
});
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
# UCM-CHART-14 — The removal was right. The reason on the record is false, and the error message says the opposite of the docblock.
|
|
2
|
+
|
|
3
|
+
- **Repo:** `ui-core-micha`, branch `main`
|
|
4
|
+
- **Tier:** 3 — shared-core. Version **`3.1.1`** (patch — see "Why 3.1.1 and not 4.0.0").
|
|
5
|
+
- **Status:** planned
|
|
6
|
+
- **Workstream:** `CHART-*`
|
|
7
|
+
- **Files:** `src/components/charts/ChartFrame.jsx`, `docs/CHART-LAYOUT.md`,
|
|
8
|
+
`tests/ChartFrame.test.jsx`, `package.json`, and one new dev script + its tests.
|
|
9
|
+
|
|
10
|
+
> **`UCM-CHART-13` shipped the right change for a stated reason that is false.** The mechanics are
|
|
11
|
+
> correct and are not being reopened: `height` and `aspect` are gone, `minHeight` stays,
|
|
12
|
+
> `warnOnChartFrameHeightMismatch` is deleted, and parameterising `assertRemovedChartProp` with
|
|
13
|
+
> `removedIn` was a genuine improvement over what the WO asked for — the error now attributes the
|
|
14
|
+
> right WO instead of always blaming `UCM-CHART-12`.
|
|
15
|
+
>
|
|
16
|
+
> What is wrong is the **justification** recorded alongside it, and one user-visible consequence.
|
|
17
|
+
|
|
18
|
+
## Part A — Envelope (authoritative WHAT/WHY)
|
|
19
|
+
|
|
20
|
+
### The three findings
|
|
21
|
+
|
|
22
|
+
**F1 — the shipped consumer measurement is false.** Three places state that nothing passed `aspect`:
|
|
23
|
+
|
|
24
|
+
| where | text |
|
|
25
|
+
|---|---|
|
|
26
|
+
| `ChartFrame.jsx:29-30` (docblock) | "no consumer across the five apps passes it (measured against 3.0.1)" |
|
|
27
|
+
| `docs/CHART-LAYOUT.md` | "it is gone because no consumer across the five apps passed it (measured against 3.0.1)" |
|
|
28
|
+
| commit `676af5c` message | "aspect was applied … but unused by all five consuming apps" |
|
|
29
|
+
|
|
30
|
+
**Four `ChartFrame`s pass `aspect`**, at `origin/main` of fitness-monitor and in its working tree
|
|
31
|
+
right now:
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
fitness-monitor/frontend/src/pages/BodyHistoryPage.jsx:295 <ChartFrame minHeight aspect>
|
|
35
|
+
fitness-monitor/frontend/src/pages/BodyHistoryPage.jsx:444 <ChartFrame minHeight aspect>
|
|
36
|
+
fitness-monitor/frontend/src/pages/EnvironmentPage.jsx:245 <ChartFrame minHeight aspect>
|
|
37
|
+
fitness-monitor/frontend/src/pages/EnvironmentPage.jsx:279 <ChartFrame minHeight aspect>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Measured 2026-08-22 by parsing JSX opening tags with brace- and string-awareness, across all 13 app
|
|
41
|
+
repos plus ucm. Same scan confirms **hram is clean**: 16 `ChartFrame`s, 11 carrying `minHeight` only,
|
|
42
|
+
zero carrying `aspect` or `height` — so `HRAM-CHT-4` (landed, `4e55d1ae`) is unaffected by this WO.
|
|
43
|
+
|
|
44
|
+
**F2 — the runtime error message states the opposite of the docblock 50 lines above it.**
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
// ChartFrame.jsx:79
|
|
48
|
+
'Removed -- it was never applied to the frame. Use size on the chart inside the frame …'
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
// ChartFrame.jsx:28, the same file
|
|
53
|
+
// it WAS wired to `aspectRatio` on the box at 3.0.1, and worked.
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
**The four consumers who hit this error are the four whose cards actually change shape**, and the
|
|
57
|
+
message tells them the prop never did anything. Deleting it on that advice is a silent layout change.
|
|
58
|
+
This WO's predecessor argued that "a prop accepted and silently ignored is worse than one that
|
|
59
|
+
errors" — an error that misdescribes what it is guarding is worse than both.
|
|
60
|
+
`tests/ChartFrame.test.jsx:254` repeats the same false claim in a comment.
|
|
61
|
+
|
|
62
|
+
**F3 — `3.1.0` is a minor for removing an applied prop with four live call sites.** The removal is
|
|
63
|
+
breaking, and the minor was chosen *because* of F1. `3.1.0` is published and cannot be unpublished.
|
|
64
|
+
**The remedy is a corrected record and a truthful error message, NOT a compensating major** — see
|
|
65
|
+
below; this was argued the other way first and the operator was right.
|
|
66
|
+
|
|
67
|
+
### Goal
|
|
68
|
+
|
|
69
|
+
The record matches what was measured, the error message tells the truth to the four callers who will
|
|
70
|
+
see it — and **the consumer count stops being a claim and becomes a command.**
|
|
71
|
+
|
|
72
|
+
### The actual deliverable: a census, not three corrected sentences
|
|
73
|
+
|
|
74
|
+
`UCM-CHART-12` established the pattern — *the deliverable is the invariant, not the fix*. The
|
|
75
|
+
analogue here is blunt: **this is the sixth wrong consumer count in this series**, and every one of
|
|
76
|
+
them came from a grep.
|
|
77
|
+
|
|
78
|
+
| # | claim | reality |
|
|
79
|
+
|---|---|---|
|
|
80
|
+
| 1 | `UCM-CHART-8`: 3 `aspect` sites in fitness-monitor | 8 hits; `EnvironmentPage` never listed |
|
|
81
|
+
| 2 | "8 call sites" | 4 charts (4 frame+chart pairs) |
|
|
82
|
+
| 3 | `HRAM-CHT-4`: "18 preset files" | 14 files, 19 old-API sites |
|
|
83
|
+
| 4 | "0 consumers pass `aspect`/`height` to `ChartFrame`" | 4 pass `aspect` |
|
|
84
|
+
| 5 | "`aspect` is never applied in `ChartFrame`" | applied at `:139`; a `head`-truncated grep hid it |
|
|
85
|
+
| 6 | `UCM-CHART-13`: "no consumer across the five apps passed it" | the same 4 |
|
|
86
|
+
|
|
87
|
+
Greps cannot see JSX structure: a prop three lines below its component name, an arrow function whose
|
|
88
|
+
`=>` ends the match early, an apostrophe inside a comment, a `{a > b}` in a sibling prop. Every entry
|
|
89
|
+
above is one of those. **Ship the parser, and "measured against X" becomes reproducible output
|
|
90
|
+
instead of a sentence somebody has to trust.**
|
|
91
|
+
|
|
92
|
+
### Definition of Done
|
|
93
|
+
|
|
94
|
+
- [ ] **`scripts/chart-api-census.mjs`** — takes a workspace root, walks every sibling repo's
|
|
95
|
+
`frontend/src` (falling back to `src/`), and reports per app: every `<ChartFrame>` and every ucm
|
|
96
|
+
chart preset element, with which of `aspect` / `height` / `minHeight` / `margin` / `xAxisAngle`
|
|
97
|
+
each one carries, and file:line. Only counts components actually imported from
|
|
98
|
+
`@micha.bigler/ui-core-micha` — a local `BarChart` of the same name is not a consumer.
|
|
99
|
+
- [ ] **It parses, it does not grep.** Opening-tag scanning must track string literals, template
|
|
100
|
+
literals, `{}` depth, and `//` + `/* */` comments. **A tag it cannot close is reported as
|
|
101
|
+
`UNPARSED`, never skipped and never counted as clean** — a census that silently drops what it
|
|
102
|
+
cannot read is the failure it exists to prevent.
|
|
103
|
+
- [ ] **Its own tests, over fixtures carrying the four traps that actually broke the ad-hoc scans:**
|
|
104
|
+
an arrow function in a prop, an apostrophe inside a JSX comment, nested braces, and a prop on a
|
|
105
|
+
line far below the component name. Each fixture asserts the exact props found.
|
|
106
|
+
- [ ] **`aspect`'s error message rewritten to be true and actionable.** It must say the prop *was*
|
|
107
|
+
applied (`aspectRatio` on the card box, up to 3.0.1), that the card's height now follows its
|
|
108
|
+
content with `minHeight` as the floor, and that a caller who wants the chart taller or shorter
|
|
109
|
+
sets `size` on the chart inside. Do not describe it as never-applied anywhere.
|
|
110
|
+
- [ ] **`height`'s message left as it is** — it *was* genuinely dead, so that one is already true.
|
|
111
|
+
- [ ] **F1's text corrected in all three places** — docblock, `docs/CHART-LAYOUT.md`, and the comment
|
|
112
|
+
at `tests/ChartFrame.test.jsx:254`. Replace "no consumer passed it" with what the census
|
|
113
|
+
reports: four call sites in fitness-monitor, removed by `FM-CHART-1`. **Do not quietly delete
|
|
114
|
+
the sentence** — the point is that a measurement was wrong, and that is worth leaving legible.
|
|
115
|
+
- [ ] **Version `3.1.1`**, with a CHANGELOG entry saying plainly that **`3.1.0` removed an applied
|
|
116
|
+
prop under a minor**, that four call sites were affected, and that the dev-mode error is what
|
|
117
|
+
makes the break loud. Do not publish a compensating `4.0.0`.
|
|
118
|
+
- [ ] **Run the census and paste its output into this WO's register Notiz.** A WO about unverified
|
|
119
|
+
counts that lands with an unverified count is self-refuting.
|
|
120
|
+
|
|
121
|
+
### Why `3.1.1` and not `4.0.0`
|
|
122
|
+
|
|
123
|
+
**This WO changes no API.** Corrected prose, one error-message string, one dev script that never
|
|
124
|
+
ships. On its own diff it is a patch, and labelling it `4.0.0` would announce a breaking change it
|
|
125
|
+
does not contain.
|
|
126
|
+
|
|
127
|
+
The counter-argument, made first in this WO and **withdrawn**: no consumer has crossed `3.1.0` —
|
|
128
|
+
hram is on `3.0.1` (`HRAM-CHT-4`, landed), fitness-monitor on `2.37.0` committed / `3.0.1` in its
|
|
129
|
+
working tree, jg-ferien on `2.41.1` — so the break is still ahead of all three, and a major would put
|
|
130
|
+
the boundary where they will actually meet it.
|
|
131
|
+
|
|
132
|
+
**What settles it: the break is not silent.** `assertRemovedChartProp` throws on first render in dev
|
|
133
|
+
and names the replacement. The protection a major version buys — "read the notes before upgrading" —
|
|
134
|
+
is already delivered by a hard error at the exact call site, which is strictly better than a version
|
|
135
|
+
number nobody reads. A major would buy a second copy of a signal that already exists, at the cost of
|
|
136
|
+
a version number that lies about its own contents.
|
|
137
|
+
|
|
138
|
+
**This is conditional, and the condition is F2.** The guard is only a safety net if it tells the
|
|
139
|
+
truth. An error saying `aspect` "was never applied" invites precisely the wrong action from the four
|
|
140
|
+
callers whose cards change shape. **`3.1.1` is defensible because F2 is fixed in it — not
|
|
141
|
+
independently of that.** If F2 were deferred, this argument collapses and the major comes back.
|
|
142
|
+
|
|
143
|
+
`3.1.0` may additionally be deprecated on npm (`npm deprecate`, operator-only — a registry mutation).
|
|
144
|
+
Low value here since nobody is on it and `3.1.1` supersedes it immediately; noted as available, not
|
|
145
|
+
recommended.
|
|
146
|
+
|
|
147
|
+
### Non-goals
|
|
148
|
+
|
|
149
|
+
- **Do not reinstate `aspect`, and do not touch `minHeight`.** The removal stands; only its stated
|
|
150
|
+
reason and its error text are wrong.
|
|
151
|
+
- Do not migrate fitness-monitor's four call sites — `FM-CHART-1` owns them.
|
|
152
|
+
- Do not rewrite history, unpublish `3.1.0`, or publish a compensating `4.0.0`.
|
|
153
|
+
- Do not extend the census beyond chart props. It answers "who passes what to the chart API", not
|
|
154
|
+
"who uses ucm".
|
|
155
|
+
|
|
156
|
+
### Risks
|
|
157
|
+
|
|
158
|
+
- **The census must stay out of the published package.** It is a dev script: keep it off the
|
|
159
|
+
`exports` map and out of `files`, and confirm the existing `packageTreeShaking` test still passes —
|
|
160
|
+
that test has been flaky under concurrent load before (`UCM-CHART-12`'s note), so a failure there
|
|
161
|
+
needs re-running alone before it is believed.
|
|
162
|
+
- **The census reads sibling repos and must degrade gracefully** when a repo is absent, has no
|
|
163
|
+
frontend, or is a fresh clone — report "not present", never throw. It must never write anything.
|
|
164
|
+
- **`FM-CHART-1` is mid-flight** with fitness-monitor's pin at `3.0.1` and all four `aspect` props
|
|
165
|
+
still in place. Until it lands, the census correctly reports 4 — that is the expected output, not a
|
|
166
|
+
failure. Do not "fix" fitness-monitor from here.
|
|
167
|
+
- The corrected error message will be seen by that session. Getting F2 right is what makes its
|
|
168
|
+
remaining work safe, so **do F2 before anything else in this WO.**
|
|
169
|
+
|
|
170
|
+
### Tests to WRITE — narrow
|
|
171
|
+
|
|
172
|
+
- `ChartFrame` + `aspect`: the thrown message names `minHeight` and `size`, and **does not contain
|
|
173
|
+
"never applied"**. Assert on content, not just that it throws — `13`'s test matched
|
|
174
|
+
`/ChartFrame.*aspect.*size/s`, which the false message passes.
|
|
175
|
+
- `ChartFrame` + `height`: unchanged, still green.
|
|
176
|
+
- The census fixtures above.
|
|
177
|
+
- Nothing else. `13`'s suite stays as it is apart from the corrected comment and the tightened
|
|
178
|
+
message assertion.
|
|
179
|
+
|
|
180
|
+
No full suite.
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
## Part B — Implementation map
|
|
185
|
+
|
|
186
|
+
> **TO BE FILLED BY THE ORCHESTRATOR** on `git pull`. Must carry: `ChartFrame.jsx:22-35` (docblock)
|
|
187
|
+
> and `:72-81` (the two `assertRemovedChartProp` calls); `assertRemovedChartProp` itself at
|
|
188
|
+
> `chartDefaults.js:566`; the `docs/CHART-LAYOUT.md` "What stays unchanged" block; the test file's
|
|
189
|
+
> `describe` at `:257` and comment at `:254`; the absolute working directory; the progress contract;
|
|
190
|
+
> and the preamble. **Do not dispatch while this placeholder stands.**
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## Part C — Orchestrator-only
|
|
195
|
+
|
|
196
|
+
> **TO BE FILLED BY THE ORCHESTRATOR.** Review routing (Tier 3: `reviewer` + `ui_reviewer`
|
|
197
|
+
> concurrent), register maintenance including the pasted census output, publish verification for
|
|
198
|
+
> `3.1.1`, commit, and the execution directive with its self-address guard.
|