@cybertools/grommet

grommet + Next.js UI components, notifications and responsive/analytics hooks for Cyberscope apps.

API

All exports are named. Import from the root entry, or from a leaf subpath (for example @cybertools/grommet/useIsLarge) to avoid loading unrelated modules such as Next Image/Link.

| Export | Subpath | Description | | ------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------- | | Warning, Information | ./Alert | Colored alert boxes with optional icon (showIcon, contentProps). | | BoxDirection | ./BoxDirection | grommet Box that is a row on large screens and a column on small ones. | | ContactUs | ./ContactUs | Contact call-to-action block (title, subtitle, dataGa). | | ExternalLink | ./ExternalLink | grommet Anchor inside next/link, opening in a new tab. | | Image | ./Image | styled next/image with size, radius, brightness, grayscale props. | | Loader | ./Loader | Spinner with text (default "Loading..."). | | NotificationsProvider, useNotifications | ./NotificationsProvider | Notification context; actions success, generalError, error, info, warning (5000 ms). | | Notification | ./Notification | The notification layer rendered by the provider (lazy-loaded with next/dynamic). | | useResponsive, useIsLarge | ./useResponsive, ./useIsLarge | grommet ResponsiveContext size and size !== "small". | | useTrackEvents, reportEvent | ./useTrackEvents | Pushes data-ga="category::action::label::value" clicks to window.dataLayer. | | MockNextRouterProvider | ./testing (only) | Test helper providing a Next router context. |

Peer ranges

| Peer | Range | coinscope | cyberscope | | ------------------- | ---------------------- | --------- | ---------- | | next | >=13.5.0 <17 | 13.5 | 16 | | react | ^18.2.0 \|\| ^19.0.0 | 18 | 19 | | react-dom | ^18.2.0 \|\| ^19.0.0 | 18 | 19 | | styled-components | ^5.3.11 \|\| ^6.0.0 | 5 | 6 | | grommet | ^2.32.0 | 2.32 | 2.47 | | grommet-icons | ^4.11.0 | 4.11 | 4.14 |

CI runs the newest stack. Packed artifacts must still be exercised in both consumer stacks before release.

Parity caveats (ported as-is)

• ExternalLink nests grommet's Anchor (an <a>) inside next/link without legacyBehavior, so Next >= 13 renders <a> inside <a>.
• Image forwards radius/brightness/grayscale down to next/image (DOM attribute warnings).
• ContactUs hardcodes mailto:[email protected].
• MockNextRouterProvider imports the Next internal next/dist/shared/lib/router-context.shared-runtime; it may break on any Next major, which is why it lives in ./testing.
• No "use client" directives are emitted.
• Next/styled-components default imports go through an internal unwrapCjsDefault helper so the native ESM output works with CommonJS default shapes.