mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
495c3183f8
## Summary ### Error overlay shell - Clean up nav, dialog frame, footer placement, and button styles across the overlay - Remove unused `fader` and notch components - Tighten layout spacing throughout the dialog ### Instant error guidance (fix cards) - New data-driven fix-card grid for instant errors: each card has a `group` (Stream / Cache / Block / Static / Dynamic / Client / Defer / Measure / Prerender), an icon, a color, and an optional docs link - Whole card is clickable when a docs link is present, with an always-visible external-link indicator - Centralized group metadata (label / color / icon) in `instant-guidance-data.ts` so cards stay consistent across the overlay and the docs surface - Outlined SVG icons live in a dedicated `fix-card-icons.tsx` - Snippets refined: cache cards trimmed to 3 lines, client sync-IO defer cards use block-body arrow syntax so longer expressions don't overflow ### Code frame - Restore the red bar / caret on the errored line (parser previously only matched storybook synthetic frames) - Fix caret alignment with `codeFrameColumns` output - Style inline error code snippets ### Storybook & examples - Add error examples and instant-error fixtures for development/testing - Align all 11 instant storybook fixtures with canary factory output and the matching test-app routes --------- Co-authored-by: Aurora Scharff <[email protected]> Co-authored-by: Cursor <[email protected]> Co-authored-by: Aurora Scharff <[email protected]>
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import type { Preview } from '@storybook/react'
|
|
import { withDevOverlayContexts } from './decorators/with-dev-overlay-contexts'
|
|
|
|
const portalNode = document.querySelector('nextjs-portal')!
|
|
const shadowRoot = portalNode.attachShadow({ mode: 'open' })
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
a11y: {
|
|
element: 'nextjs-portal',
|
|
config: {
|
|
standards: {
|
|
ariaAttrs: {
|
|
'aria-modal': {
|
|
global: true,
|
|
},
|
|
},
|
|
},
|
|
rules: [
|
|
{
|
|
// It's incredibly hard to find a code highlighting theme that works
|
|
// for both light and dark themes and passes WCAG color contrast.
|
|
// These kind of tests should really only fail when you regress
|
|
// on a value below threshold.
|
|
id: 'color-contrast',
|
|
selector: '.code-frame-lines',
|
|
enabled: false,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
backgrounds: {
|
|
values: [
|
|
{ name: 'backdrop', value: 'rgba(250, 250, 250, 0.80)' },
|
|
{ name: 'background-100-light', value: '#ffffff' },
|
|
{ name: 'background-200-light', value: '#fafafa' },
|
|
{ name: 'background-100-dark', value: '#0a0a0a' },
|
|
{ name: 'background-200-dark', value: '#000000' },
|
|
],
|
|
default: 'backdrop',
|
|
},
|
|
},
|
|
globals: {
|
|
a11y: {
|
|
// Optional flag to prevent the automatic check
|
|
manual: true,
|
|
},
|
|
},
|
|
decorators: [withDevOverlayContexts({ shadowRoot })],
|
|
}
|
|
|
|
export default preview
|