shkim4
6d46289fc5
Deploy Storybook / deploy (push) Successful in 1m12s
- SWHeader (760-1799px): pictures hide one at a time by measured room (치수 아이콘, 선 그림, 글꼴명, 색상 칩, 레이어 상태 아이콘), then the file name narrows 310 -> 96px, then values ellipsize; re-fit after web fonts load. 가중치/스케일 columns grow for longer values. - Gauge style B / property window range: Figma controll_bar_new 633:77827 colors, ring and shadow on the previous size (6px track, 14px thumb). - Property window: editable text values (e.g. 하이퍼링크) get the editing face like numbers. - SW Header › Logo: same cases, order and layout as SW Viewer › Logo (ID kept). - Storybook inner: 80vw from 1920px. Responsive More 1920px rows use the page's usable width (container sw-story-page) and span 1920px when there is room. - SW/Popup sidebar: Property Panel only; Custom Content / Multiple Popups tagged verification. - SW Viewer Settings Popup: 축척 지정 demo popup removed, frame 620px. - Tests: inventory / simplification sidebar expectations, Popup-only unit select check. Verified: check:ai-docs PASS, changed test syntax, headless Chrome checks of header compaction, Responsive 1920 rows (1920 hidden / 2560, 3840 shown), Popup sidebar, Settings Popup. Not verified: integrated-visual baselines (not updated), full regression, changed tests not run.
68 lines
6.6 KiB
JavaScript
68 lines
6.6 KiB
JavaScript
// 2026-10-20 SW Storybook simplification: sidebar order, hidden verification Stories, removed IDs, direct URL render of
|
||
// every SW Story and the moved Property Panel (SW/Popup, ID sw-header--property-panel-compare).
|
||
// Usage: build Storybook first, then node packages/sw/tests/storybook-simplification.browser.mjs [evidence-dir]
|
||
import { readFile, writeFile, mkdir } from 'node:fs/promises'
|
||
import path from 'node:path'
|
||
import http from 'node:http'
|
||
import { runtimeRequire } from './playwright-runtime.mjs'
|
||
const require = runtimeRequire()
|
||
const { chromium } = require('playwright')
|
||
const out = path.resolve(process.argv[2] ?? 'docs/sw/storybook-simplification-qa'); await mkdir(out, { recursive: true })
|
||
const root = path.resolve('storybook-static'), mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.png': 'image/png', '.ttf': 'font/ttf', '.woff2': 'font/woff2' }
|
||
const server = http.createServer(async (req, res) => { try { const p = new URL(req.url, 'http://localhost').pathname, file = path.resolve(root, '.' + decodeURIComponent(p === '/' ? '/index.html' : p)); res.setHeader('Content-Type', mime[path.extname(file)] ?? 'application/octet-stream'); res.end(await readFile(file)) } catch { res.writeHead(404).end() } })
|
||
await new Promise(r => server.listen(0, '127.0.0.1', r)); const base = `http://127.0.0.1:${server.address().port}`
|
||
const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
|
||
const checks = []; const check = (n, ok, d) => { checks.push({ n, ok, d }); console.log(ok ? 'PASS' : 'FAIL', n, ok ? '' : JSON.stringify(d)) }
|
||
const index = JSON.parse(await readFile(path.join(root, 'index.json'), 'utf8'))
|
||
const sw = Object.values(index.entries).filter(e => e.type === 'story' && e.title.startsWith('SW/'))
|
||
// 1. every SW story renders by direct URL without page errors
|
||
const page = await browser.newPage({ viewport: { width: 1920, height: 1000 } })
|
||
let errors = []; page.on('pageerror', e => errors.push(e.message)); page.on('console', m => { if (m.type() === 'error') errors.push(m.text()) })
|
||
const bad = []
|
||
for (const e of sw) {
|
||
errors = []
|
||
await page.goto(`${base}/iframe.html?id=${e.id}&viewMode=story`)
|
||
try { await page.locator('#storybook-root > *').first().waitFor({ timeout: 15000 }) } catch { bad.push([e.id, 'no root']) ; continue }
|
||
await page.waitForTimeout(150)
|
||
const err = await page.locator('.sb-show-errordisplay').count()
|
||
if (err || errors.length) bad.push([e.id, errors.slice(0, 2)])
|
||
}
|
||
check(`direct URL render: ${sw.length} SW Stories, no error display / page error`, bad.length === 0, bad)
|
||
// 2. removed IDs are gone
|
||
const removed = ['figma', 'capture-active', 'capture-outline', 'capture-recent', 'variants', 'recent-files'].map(id => `sw-header--home-menu-${id}`)
|
||
check('removed Home Menu IDs absent from index', removed.every(id => !index.entries[id]))
|
||
// 2026-10-20 Footer cleanup: retired Footer IDs are gone, the two main Footer Stories stay.
|
||
check('removed Footer IDs absent, full-footer / figma-variants kept', ['sw-footer--default', 'sw-footer--states'].every(id => !index.entries[id]) && ['sw-footer--full-footer', 'sw-footer--figma-variants'].every(id => index.entries[id]))
|
||
// 3. Property panel in Popup: four states
|
||
await page.goto(`${base}/iframe.html?id=sw-header--property-panel-compare&viewMode=story`)
|
||
await page.locator('[data-compare]').first().waitFor()
|
||
await page.waitForTimeout(300)
|
||
const cells = await page.locator('[data-compare]').evaluateAll(list => list.map(c => { const r = c.querySelector('.hm-sw-property').getBoundingClientRect(); return [c.dataset.compare, Math.round(r.width), Math.round(r.height)] }))
|
||
check('Popup › Property Panel: four states none/all/circle/expanded at 314 × 256/361/658/754', JSON.stringify(cells) === JSON.stringify([['none', 314, 256], ['all', 314, 361], ['circle', 314, 658], ['expanded', 314, 754]]), cells)
|
||
await page.screenshot({ path: path.join(out, 'popup-property-panel-compare.png'), fullPage: true })
|
||
// 4. manager sidebar
|
||
const m = await browser.newPage({ viewport: { width: 1600, height: 2400 } })
|
||
await m.goto(`${base}/?path=/story/sw-header--overview`)
|
||
await m.locator('[data-item-id="sw-header--overview"]').waitFor()
|
||
for (const c of ['sw-footer', 'sw-popup', 'sw-viewer', 'sw-theme']) { const b = m.locator(`[data-item-id="${c}"] > button[aria-expanded="false"]`); if (await b.count()) await b.click() }
|
||
await m.waitForTimeout(500)
|
||
const rows = await m.locator('#storybook-explorer-tree [data-item-id^="sw-"]').evaluateAll(list => list.map(e => [e.dataset.itemId, e.dataset.nodetype, e.textContent.replace('Skip to content', '').trim()]))
|
||
await writeFile(path.join(out, 'sidebar.json'), JSON.stringify(rows, null, 1))
|
||
const comps = rows.filter(r => r[1] === 'component').map(r => r[2])
|
||
// 2026-10-21 (user request): SW/Theme left the sidebar (verification tag); its Story keeps its ID and direct URL.
|
||
check('sidebar SW order Header → Footer → Popup → Viewer (Theme hidden)', JSON.stringify(comps) === JSON.stringify(['Header', 'Footer', 'Popup', 'Viewer']), comps)
|
||
const hidden = ['sw-header--window-move-motion', 'sw-header--k-guide', 'sw-footer--figma-variants', 'sw-header--detail-buttons', 'sw-header--home-menu-capture-default']
|
||
check('verification Stories not in sidebar', rows.every(r => !hidden.includes(r[0])), rows.filter(r => hidden.includes(r[0])))
|
||
const popupRows = await m.locator('#storybook-explorer-tree [data-item-id]').evaluateAll(list => list.map(e => e.dataset.itemId))
|
||
const pi = popupRows.indexOf('sw-popup')
|
||
// 2026-10-22 (user request): SW/Popup shows only Property Panel; Custom Content / Multiple Popups are verification.
|
||
check('Popup children: Property Panel only', JSON.stringify(popupRows.slice(pi + 1, pi + 2)) === JSON.stringify(['sw-header--property-panel-compare']) && !popupRows.some(id => id.startsWith('sw-popup--')), popupRows.slice(pi + 1, pi + 4))
|
||
const headerIds = rows.filter(r => r[0].startsWith('sw-header--')).map(r => r[0])
|
||
check('Property Panel listed once (under Popup only)', headerIds.filter(id => id === 'sw-header--property-panel-compare').length === 1)
|
||
await m.locator('[data-item-id="sw-header--property-panel-compare"]').click(); await m.waitForTimeout(800)
|
||
check('sidebar link opens moved Story with same ID', m.url().includes('sw-header--property-panel-compare'), m.url())
|
||
await m.screenshot({ path: path.join(out, 'sidebar.png'), clip: { x: 0, y: 0, width: 320, height: 2400 } })
|
||
await writeFile(path.join(out, 'result.json'), JSON.stringify(checks, null, 1))
|
||
console.log(checks.filter(c => c.ok).length + '/' + checks.length + ' PASS')
|
||
await browser.close(); server.close()
|