@stenajs-webui/panels

@stenajs-webui/panels

This package contains larger, more use‑case driven components built by composing primitives from other @stenajs-webui/* packages.

Use these panels to quickly assemble common application scaffolding and rich UI building blocks.

Components overview

• ActionMenuButton (and variants) — Buttons that open contextual action menus.
• CheckboxMenu — Menu with checkable items for multi‑select actions.
• Collapsible — Expand/collapse container with helpers for lists and grouped content.
• Drawer — Slide‑in container for side panels and temporary content.
• ErrorPanel & ErrorScreen — Display error messages and recovery actions.
• ImageCarousel — Inline image carousel with fullscreen, zoom, captions and counter.
• LoadingPanel & LoadingScreen — Loading placeholders for panels and full screen.
• NavBar — Application top navigation with buttons, search field, user menu, etc.
• Notifications — Toasts and in‑app notifications (Notification, NotificationList, UnreadDot).
• PageHeader — Page header layout and helpers (heading and rows).
• ProductCard — Rich product presentation card (uses ImageCarousel under the hood).
• ProductSummaryCard — Compact summary variant of product information.
• SelectedItemsActionsPanel — Sticky panel for bulk actions.
• SidebarMenu — Collapsible/pinnable sidebar navigation and rail menu.

Note: Not all subcomponents are listed; see Storybook for examples and usage.

ImageCarousel usage

ImageCarousel relies on yet-another-react-lightbox and some of its plugins. Required styles are now included automatically by the panels package when you use ImageCarousel or components that render it (no manual CSS imports needed).

Basic example:

<ImageCarousel images={[ { url: "https://example.com/image-900x600.jpg", alt: "Front view", width: 900, height: 600, title: "Front view", description: "Click to open fullscreen", fullscreenImage: { url: "https://example.com/image-1800x1200.jpg", width: 1800, height: 1200, }, }, ]} altLabelPrevious="Previous image" altLabelNext="Next image" altLabelClose="Close" altLabelZoomIn="Zoom in" altLabelZoomOut="Zoom out" />

Accessibility: Provide meaningful alt text and labels for all controls as shown above.

ProductCard

ProductCard uses ImageCarousel internally to display images. The required lightbox styles are bundled automatically when using the component.