vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: add WarnBanner Preact component, compose ApiErrorPanel from it

Browse source 
mara, on review: "i want each component to import its own css file
itself[;] if you need a bunch of extra css externally, its not a proper
component ... you may need to migrate other components that you would
want to use first".

WarnBanner is the Preact-component successor to the shadow-DOM
<hive-warn> custom element (same three-tier info/warning/error visual
language, colours copied faithfully from hive-warn.css). ApiErrorPanel
now composes it instead of owning a copy of the border/colour/pulse
rules itself — its own CSS is back down to just the layout that's
actually specific to it (heading, copy button, detail text).

Re-verified with a fresh mock-server screenshot: same rendered output as
before, now via composition instead of a duplicated banner shape.
This commit is contained in:
iris 2026-08-17 21:25:51 +02:00 • committed by mara
commit ca84079a21
5 changed files with 94 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/packages/shared/src/warn-banner/WarnBanner.css Normal file
View file

@ -0,0 +1,36 @@
/* WarnBanner.css — three levels, not an open-ended severity+modifier
combination (same rule `hive-warn.css` states, copied faithfully since
this is that component's visual language, just reached through a
class instead of a `:host([level])` attribute selector). Colours reuse
theme.css's own documented semantics: --cyan = "info accents", --amber
= "warnings", --red = "errors, fail state". */
.warn-banner {
display: block;
border: 1px solid var(--amber);
border-radius: 4px;
padding: 0.5em 0.8em;
margin-bottom: 0.6em;
color: var(--amber);
background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.warn-banner-info {
border-color: var(--cyan);
color: var(--cyan);
background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.warn-banner-error {
border-color: var(--red);
color: var(--red);
background: color-mix(in srgb, var(--red) 8%, transparent);
/* Only `error` pulses — an active incident, not a standing caveat. */
text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
animation: warn-banner-pulse 2.4s ease-in-out infinite;
}
@keyframes warn-banner-pulse {
0%, 100% { box-shadow: 0 0 12px -4px color-mix(in srgb, currentColor 55%, transparent); }
50% { box-shadow: 0 0 22px -2px color-mix(in srgb, currentColor 95%, transparent); }
}
.warn-banner strong {
color: inherit;
}

38
frontend/packages/shared/src/warn-banner/WarnBanner.tsx Normal file
View file

@ -0,0 +1,38 @@
// WarnBanner.tsx — <WarnBanner>, the Preact-component successor to the
// shadow-DOM <hive-warn> custom element (../hive-warn/hive-warn.js).
// Same three-tier visual language (mara, on `hive-warn`'s own review:
// "there should be distinction between info, warning, error — all
// warnings should be styled identically") — built as a plain Preact
// component instead so it composes cleanly wherever this package's other
// shared components do (JobqRollup, JobqGraph, ApiErrorPanel), rather
// than needing a shadow root + CSS-as-text build step that only resolves
// under one of the two consuming packages' esbuild configs. `ApiErrorPanel`
// is the first consumer — compose from this instead of duplicating the
// banner's own border/colour/pulse rules locally.
//
// `level` defaults to 'warning', matching `hive-warn.js`'s own default.
// Only `error` pulses — an active incident, not a standing caveat, same
// rule `hive-warn.css`'s own comment states.
import type { ComponentChildren } from 'preact';
import './WarnBanner.css';
export type WarnLevel = 'info' | 'warning' | 'error';
export interface WarnBannerProps {
level?: WarnLevel;
// Passed straight through to the root element's `class` list —
// for a caller-specific concern the banner itself has no opinion on
// (e.g. `ApiErrorPanel` adding a top margin for the context it usually
// sits in), not for re-styling the banner's own look.
class?: string;
children?: ComponentChildren;
}
export function WarnBanner({ level = 'warning', class: extraClass, children }: WarnBannerProps) {
const classes = ['warn-banner', `warn-banner-${level}`, extraClass].filter(Boolean).join(' ');
return (
<div class={classes} role={level === 'error' ? 'alert' : undefined}>
{children}
</div>
);
}