zeekay
48f9b8faf0
The Geist->Zen rename reached the stylesheets and stopped there. Four layers were still handing users another vendor's face. frontend/public still carried Inter.woff2/woff, the real upstream binaries signed RSMS, and fonts.scss declared three static Inter weights on top of the variable face; one variable file spans 100-900, so those three collapse into it. The Zen pair here named only Hanzo in its copyright, which OFL does not allow for a cut of Geist — @hanzo/font's identity check reads family, vendor tag and both notices out of the name table and refuses to publish a face that fails, so the bytes now come from there. common/tailwind/dist/tailwind.css is a build artifact. .gitignore names it, `insightscli doctor` deletes it, nothing imports it (the app imports the source tailwind.css), and a single upstream merge dragged it in. Its --default-font-family still said MatterSQ, two renames behind the config it is supposed to come from. Untracked rather than hand-edited. @hanzo/quill's tokens set --font-sans behind [data-quill], a later declaration than base.scss's :root, so every component inside a quill subtree resolved to the token's own Inter stack instead of the app's. The token now leads with Zen, and each package's own build regenerates its dist. The preload lookup in build.mjs matched /Inter(-hash)?\.woff2/ and throws when it resolves empty, so it had to move with the file. It was also warming the second family in --font-sans rather than the first. Two smaller ones: the region picker fetched Inter from fonts.googleapis.com on an unauthenticated page, and quill's storybook depended on @fontsource-variable/inter, which declares the family "Inter Variable" — a name no stack in this repo asks for, so it downloaded and painted nothing.
Storybook
Adding new Tailwind classes
Tailwind is compiled by @tailwindcss/postcss on the initial build. Webpack's
HMR does not re-run PostCSS when story content changes, so a newly used
Tailwind utility (e.g. bg-[rebeccapurple]) won't appear until you restart
Storybook. Classes already present in the codebase hot-reload fine.
Storybook visual regression tests
In CI we use playwright to load our storybooks scenes and take snapshots of them
If they have changed we commit those snapshots back to the PR
This lets you check if you have broken the UI unexpectedly or changed it in the way you expected
You can check test-runner.ts to see how this is done
Uses "@storybook/test-runner" see: https://storybook.js.org/docs/writing-tests/test-runner
to run locally
before you do this... 🤷
in one terminal
insightscli storybook
in another
pnpm exec playwright install
insightscli storybook:test
Viewport width variants
You can snapshot a story at multiple viewport widths
by setting viewportWidths in testOptions.
This produces one snapshot per width instead of the default single snapshot.
Available widths: narrow (568px), medium (960px), wide (1300px), superwide (1920px).
export const MyStoryViewports: Story = createInsightStory(fixture, 'edit')
MyStoryViewports.parameters = {
testOptions: {
viewportWidths: ['medium', 'wide', 'superwide'],
},
}
Each width generates a separate snapshot file suffixed with the width name,
e.g. my-story-viewports--medium--light.png.
See frontend/src/scenes/insights/stories/TrendsLine.stories.tsx for a working example.