@bridgeline-digital/hawk-app-ui 0.1.0-dev.20261020202308 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE +7 -7
  2. package/README.md +166 -166
  3. package/package.json +2 -2
package/LICENSE CHANGED
@@ -1,7 +1,7 @@
1
- Copyright (c) 2026 Bridgeline Digital, Inc. All rights reserved.
2
-
3
- This software is proprietary to Bridgeline Digital, Inc. It is published for use by Bridgeline Digital
4
- and its authorized developers with the Hawk Apps platform. No license is granted to copy, modify, distribute,
5
- sublicense or use it for any other purpose without Bridgeline Digital's prior written permission.
6
-
7
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
1
+ Copyright (c) 2026 Bridgeline Digital, Inc. All rights reserved.
2
+
3
+ This software is proprietary to Bridgeline Digital, Inc. It is published for use by Bridgeline Digital
4
+ and its authorized developers with the Hawk Apps platform. No license is granted to copy, modify, distribute,
5
+ sublicense or use it for any other purpose without Bridgeline Digital's prior written permission.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
package/README.md CHANGED
@@ -1,166 +1,166 @@
1
- # @bridgeline-digital/hawk-app-ui
2
-
3
- The Spark look for Hawk Apps, in the host's colors and mode. For Bridgeline developers. See every part live, in light
4
- and dark: the [UI kit gallery](GALLERY.md) (on the developer site).
5
-
6
- - **React + MUI apps** (the `next-mui` template): Spark's MUI theme, the provider that connects the app to its host,
7
- and the components apps keep needing: sections, KPI tiles, tables, small charts, a confirm dialog, a side drawer,
8
- toasts and formatting. Requires the Hawk Apps bridge.
9
- - **Any other app** (the `react`, `preact`, `next` and `vanilla` templates): a stylesheet and a few custom elements,
10
- no React or MUI needed. See [Without React and MUI](#without-react-and-mui).
11
-
12
- ```bash
13
- npm install @bridgeline-digital/hawk-app-ui @mui/material@^9 @emotion/react @emotion/styled # React + MUI
14
- npm install @bridgeline-digital/hawk-app-ui # any other app
15
- ```
16
-
17
- ## Use it
18
-
19
- ```tsx
20
- // app/layout.tsx (once): Montserrat, Spark's font, bundled with the app
21
- import '@bridgeline-digital/hawk-app-ui/fonts';
22
-
23
- // app/providers.tsx
24
- 'use client';
25
- import { HawkAppProvider } from '@bridgeline-digital/hawk-app-ui';
26
-
27
- export default function Providers({ children }: { children: React.ReactNode }) {
28
- return <HawkAppProvider>{children}</HawkAppProvider>;
29
- }
30
-
31
- // any page or component inside it
32
- import { useHawk } from '@bridgeline-digital/hawk-app-ui';
33
-
34
- export function Page() {
35
- const { app, context } = useHawk(); // the connected app and its context (client, engine, dates, theme)
36
- // …app.data.query(...), app.analytics.report(...)
37
- }
38
- ```
39
-
40
- - **`HawkAppProvider`** connects to the host (`createApp({ autoResize: true })`, change it with `options`), shows a
41
- spinner meanwhile and an explanation when the app is opened outside a host (`connecting` and `error` replace them),
42
- then renders its children in the theme. It follows the host when its theme changes.
43
- - **`useHawk()`** returns `{ app, context }`, always connected (the provider renders children only then).
44
- `useHawkAppState()` is the hook underneath, for an app that wants to render the states itself.
45
- - **Your own theme additions:** `<HawkAppProvider theme={{ components: { … } }}>`, merged last.
46
-
47
- ## Components
48
-
49
- ```tsx
50
- import { ConfirmDialog, DataTable, EmptyState, KpiRow, KpiTile, LoadingSection, Notice, Section, SideDrawer, useFormat, useToast } from '@bridgeline-digital/hawk-app-ui';
51
- import { BarList, ColumnChart, Sparkline, StackedColumnChart } from '@bridgeline-digital/hawk-app-ui/charts';
52
- import { DataGrid } from '@bridgeline-digital/hawk-app-ui/data-grid'; // needs @mui/x-data-grid@^9
53
-
54
- const f = useFormat(); // in the host's locale
55
- <KpiRow>
56
- <KpiTile highlight label="Revenue" value={f.money(rev)} change={rev / prevRev - 1} trend={weekly} />
57
- <KpiTile label="No-result searches" value={f.integer(zero)} change={zero / prevZero - 1} goodWhen="down" />
58
- </KpiRow>
59
- <Section title="Searches per day" subtitle="UTC days" action={<Button>Refresh</Button>}>
60
- <ColumnChart label="Searches per day" columns={days.map((d) => ({ label: f.date(d.date, { year: false }), value: d.searches }))} />
61
- </Section>
62
- <DataTable rows={terms} columns={[{ key: 'term', label: 'Term' }, { key: 'searches', label: 'Searches', align: 'right' }]}
63
- defaultSort={{ key: 'searches', direction: 'desc' }} totals={{ term: 'Total', searches: f.integer(total) }} download="terms.csv" />
64
- ```
65
-
66
- | Component | For |
67
- |---|---|
68
- | `Section` | A titled card (Spark's card header and padding), with an optional subtitle and action |
69
- | `KpiTile`, `KpiRow` | A number with its change vs. the previous period (green when good: `goodWhen`), an optional trend; tiles side by side |
70
- | `DataTable` | Up to a few hundred rows: sortable columns, totals row, sticky header (`maxHeight`), CSV download of what it shows (text that a spreadsheet would run as a formula, such as a search term starting with `=`, opens as text) |
71
- | `DataGrid` (`/data-grid`) | Thousands of rows, paging and filtering: MUI X's community grid with Spark's defaults |
72
- | `BarList`, `ColumnChart`, `StackedColumnChart`, `Sparkline` (`/charts`) | Small charts in the theme's colors, without a chart library; each has a `label` for screen readers and tooltips with the values |
73
- | `EmptyState`, `LoadingSection`, `Notice` | Nothing to show; a section still loading; a message (`onRetry` adds Try again) |
74
- | `ConfirmDialog` | Asks before an action; `destructive` makes it red; a promise from `onConfirm` keeps it open with a spinner |
75
- | `SideDrawer` | Details of one item, from the right, with a title, close button and actions |
76
- | `useToast()` | `toast(message, severity)`: the host's toast in the full app, a snackbar in a view |
77
- | `useFormat()` / `createFormat(locale)` | `integer`, `number`, `compact`, `percent`, `change` (+12.3%), `money`, `date` (a "2026-10-03" date stays that day), `dateTime`: dates from a `Date` or an ISO / Athena string; anything else shows "–" |
78
-
79
- The host shows the frame over the whole page while a dialog or drawer is open, so they're always fully visible.
80
-
81
- Every component, in light and dark, is in the [UI kit gallery](GALLERY.md) on the developer site (the gallery app,
82
- [examples/ui-kit](../../examples/ui-kit), as a preview; run it with `npm run dev` there and open it through a host to
83
- see it in a real one). `<HawkAppProvider preview={{ mode: 'dark' }}>` renders without a host, with sample context
84
- (`previewContext()`), for galleries, docs and screenshots. New apps get the kit from the CLI's `next-mui` template
85
- (`hawk-app create my-app --template next-mui`); an existing next-mui app gets it with `hawk-app upgrade`.
86
-
87
- ## The theme
88
-
89
- `createHawkTheme(context.theme, ...overrides)` (also at `@bridgeline-digital/hawk-app-ui/theme`):
90
-
91
- | Part | From |
92
- |---|---|
93
- | Typography (Montserrat, 14 px base, h1–h3, `featuredValue`), breakpoints (`sm` 640 … `2xl` 1536), spacing, card and list overrides | Spark's theme (`sparkThemeOptions`) |
94
- | Primary color and its text, backgrounds, text colors, dividers, border radius, light or dark | The host's theme tokens (`color-button-accent-background`, `color-background`, `color-background-container`, `color-text-default`, `color-text-secondary`, `color-border-default`, `border-radius`, `mode`), else Spark's |
95
- | Dialogs and snackbars in the part of the frame the user can see | The kit (`frameThemeOptions`, from the bridge's `--hawk-visible-*` variables) |
96
- | Table rows and header (borders in the divider color, a header row on the page background) | The kit (`tableThemeOptions`) |
97
-
98
- The font is always Spark's, whatever the host uses, so apps look the same in HawkSearch and Spark.
99
-
100
- <!-- Maintainers: keeping the theme in step with Spark (compare-spark) is in RELEASING.md, "Before releasing the UI kit". -->
101
-
102
- ## Without React and MUI
103
-
104
- For vanilla, Preact, React or Next apps without MUI: the same look as a stylesheet, and a few custom elements for what
105
- CSS alone can't do. No dependencies: no React, no MUI, no bridge.
106
-
107
- ```ts
108
- // With a bundler (Vite, Next): once, where the app starts (Next: the css in app/layout.tsx).
109
- import '@bridgeline-digital/hawk-app-ui/css';
110
- import '@bridgeline-digital/hawk-app-ui/elements';
111
- ```
112
-
113
- ```html
114
- <!-- Without a build step: from the CDN, at the bridge's version (the vanilla template does this). -->
115
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawk-app-ui@0.1/dist/css/hawk.css" />
116
- <script type="module" src="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawk-app-ui@0.1/dist/elements/index.js"></script>
117
- ```
118
-
119
- **The stylesheet** (`/css`, `dist/css/hawk.css`) carries Montserrat (no request to Google Fonts) and maps the host's
120
- theme tokens, which the bridge sets as `--hawk-*` variables and `<html data-hawk-theme>`, as `createHawkTheme` does:
121
- the accent, backgrounds, text, borders, radius and dark mode, else Spark's. Use its `--hawk-ui-*` variables
122
- (`--hawk-ui-accent`, `--hawk-ui-surface`, `--hawk-ui-text`, `--hawk-ui-text-secondary`, `--hawk-ui-border`,
123
- `--hawk-ui-radius`, …) for your own styles. A view's page (`<html data-hawk-view>`) stays transparent.
124
-
125
- | Class | For |
126
- |---|---|
127
- | `hawk-section` (`hawk-section-header`, `-title`, `-subtitle`) | A titled card, Spark's |
128
- | `hawk-kpi-row`, `hawk-stack`, `hawk-row`, `hawk-spacer` | Tiles side by side; a column or row of blocks |
129
- | `hawk-button` (`is-outlined`, `is-text`, `is-small`) | Buttons in the host's accent |
130
- | `hawk-field`, `hawk-input`, `hawk-select` | Form fields |
131
- | `hawk-notice` (`is-error`, `is-warning`, `is-success`) | A message |
132
- | `hawk-chip` (`is-accent`), `hawk-empty`, `hawk-spinner`, `hawk-skeleton` | Labels, nothing to show, loading |
133
- | `hawk-table` (in `hawk-table-wrap`) | A plain table (or use `<hawk-data-table>`) |
134
- | `hawk-h1`… `hawk-h3`, `hawk-value`, `hawk-muted`, `hawk-caption`, `hawk-num` | Type: headings, a headline number, secondary text |
135
-
136
- **The elements** (`/elements`) render that markup. Data goes in as properties (`el.rows = [...]`), settings as
137
- attributes. Importing defines them (in a browser; it's safe to import on a server, e.g. in Next).
138
-
139
- | Element | Use |
140
- |---|---|
141
- | `<hawk-kpi label value hint change good-when highlight loading>` | A number with its change vs. the previous period (`change` as a fraction, `none` for "No previous data"; green when good) |
142
- | `<hawk-data-table>` | `columns` (`{ key, label, align?, format?, value?, sortable?, csvLabel? }`; `format`: `integer`, `number`, `compact`, `percent`, `money`, `date`, `dateTime` or a function), `rows`, `totals`, `sort`; attributes `download="file.csv"`, `max-height`, `clickable` (`hawk-row-click` events), `empty`. Sortable headers, CSV download of the rows as sorted (formulas made text) |
143
- | `<hawk-bar-list>` | `items` (`{ label, value }`); `selectable` (`hawk-select` events), `value-format`, `color`, `label` |
144
- | `<hawk-column-chart>` | `columns` (`{ label, value, tooltip? }`); `height`, `value-format`, `color`, `label` |
145
-
146
- ```js
147
- const table = document.querySelector('hawk-data-table');
148
- table.columns = [{ key: 'keyword', label: 'Keyword' }, { key: 'search_count', label: 'Searches', format: 'integer' }];
149
- table.rows = report.data;
150
- table.setAttribute('download', 'searches.csv');
151
- ```
152
-
153
- `createFormat(locale)` (from `/elements` too) formats numbers, money and dates like `useFormat()`. In React or Preact
154
- with TypeScript, type the elements in JSX with `HawkElementTags` (the templates have `src/hawk-elements.d.ts`):
155
-
156
- ```ts
157
- import type { HawkElementTags } from '@bridgeline-digital/hawk-app-ui/elements';
158
- declare module 'react' { namespace JSX { interface IntrinsicElements extends HawkElementTags {} } } // Preact: 'preact'
159
- ```
160
-
161
- Toasts: `app.toast(message, severity)` from the bridge shows the host's own.
162
-
163
- ## Versions
164
-
165
- Released with the bridge and the CLI (one version for all three). Peer dependencies of the React + MUI part: React 19,
166
- MUI 9, Emotion 11 (optional for the stylesheet and the elements), and the bridge.
1
+ # @bridgeline-digital/hawk-app-ui
2
+
3
+ The Spark look for Hawk Apps, in the host's colors and mode. For Bridgeline developers. See every part live, in light
4
+ and dark: the [UI kit gallery](GALLERY.md) (on the developer site).
5
+
6
+ - **React + MUI apps** (the `next-mui` template): Spark's MUI theme, the provider that connects the app to its host,
7
+ and the components apps keep needing: sections, KPI tiles, tables, small charts, a confirm dialog, a side drawer,
8
+ toasts and formatting. Requires the Hawk Apps bridge.
9
+ - **Any other app** (the `react`, `preact`, `next` and `vanilla` templates): a stylesheet and a few custom elements,
10
+ no React or MUI needed. See [Without React and MUI](#without-react-and-mui).
11
+
12
+ ```bash
13
+ npm install @bridgeline-digital/hawk-app-ui @mui/material@^9 @emotion/react @emotion/styled # React + MUI
14
+ npm install @bridgeline-digital/hawk-app-ui # any other app
15
+ ```
16
+
17
+ ## Use it
18
+
19
+ ```tsx
20
+ // app/layout.tsx (once): Montserrat, Spark's font, bundled with the app
21
+ import '@bridgeline-digital/hawk-app-ui/fonts';
22
+
23
+ // app/providers.tsx
24
+ 'use client';
25
+ import { HawkAppProvider } from '@bridgeline-digital/hawk-app-ui';
26
+
27
+ export default function Providers({ children }: { children: React.ReactNode }) {
28
+ return <HawkAppProvider>{children}</HawkAppProvider>;
29
+ }
30
+
31
+ // any page or component inside it
32
+ import { useHawk } from '@bridgeline-digital/hawk-app-ui';
33
+
34
+ export function Page() {
35
+ const { app, context } = useHawk(); // the connected app and its context (client, engine, dates, theme)
36
+ // …app.data.query(...), app.analytics.report(...)
37
+ }
38
+ ```
39
+
40
+ - **`HawkAppProvider`** connects to the host (`createApp({ autoResize: true })`, change it with `options`), shows a
41
+ spinner meanwhile and an explanation when the app is opened outside a host (`connecting` and `error` replace them),
42
+ then renders its children in the theme. It follows the host when its theme changes.
43
+ - **`useHawk()`** returns `{ app, context }`, always connected (the provider renders children only then).
44
+ `useHawkAppState()` is the hook underneath, for an app that wants to render the states itself.
45
+ - **Your own theme additions:** `<HawkAppProvider theme={{ components: { … } }}>`, merged last.
46
+
47
+ ## Components
48
+
49
+ ```tsx
50
+ import { ConfirmDialog, DataTable, EmptyState, KpiRow, KpiTile, LoadingSection, Notice, Section, SideDrawer, useFormat, useToast } from '@bridgeline-digital/hawk-app-ui';
51
+ import { BarList, ColumnChart, Sparkline, StackedColumnChart } from '@bridgeline-digital/hawk-app-ui/charts';
52
+ import { DataGrid } from '@bridgeline-digital/hawk-app-ui/data-grid'; // needs @mui/x-data-grid@^9
53
+
54
+ const f = useFormat(); // in the host's locale
55
+ <KpiRow>
56
+ <KpiTile highlight label="Revenue" value={f.money(rev)} change={rev / prevRev - 1} trend={weekly} />
57
+ <KpiTile label="No-result searches" value={f.integer(zero)} change={zero / prevZero - 1} goodWhen="down" />
58
+ </KpiRow>
59
+ <Section title="Searches per day" subtitle="UTC days" action={<Button>Refresh</Button>}>
60
+ <ColumnChart label="Searches per day" columns={days.map((d) => ({ label: f.date(d.date, { year: false }), value: d.searches }))} />
61
+ </Section>
62
+ <DataTable rows={terms} columns={[{ key: 'term', label: 'Term' }, { key: 'searches', label: 'Searches', align: 'right' }]}
63
+ defaultSort={{ key: 'searches', direction: 'desc' }} totals={{ term: 'Total', searches: f.integer(total) }} download="terms.csv" />
64
+ ```
65
+
66
+ | Component | For |
67
+ |---|---|
68
+ | `Section` | A titled card (Spark's card header and padding), with an optional subtitle and action |
69
+ | `KpiTile`, `KpiRow` | A number with its change vs. the previous period (green when good: `goodWhen`), an optional trend; tiles side by side |
70
+ | `DataTable` | Up to a few hundred rows: sortable columns, totals row, sticky header (`maxHeight`), CSV download of what it shows (text that a spreadsheet would run as a formula, such as a search term starting with `=`, opens as text) |
71
+ | `DataGrid` (`/data-grid`) | Thousands of rows, paging and filtering: MUI X's community grid with Spark's defaults |
72
+ | `BarList`, `ColumnChart`, `StackedColumnChart`, `Sparkline` (`/charts`) | Small charts in the theme's colors, without a chart library; each has a `label` for screen readers and tooltips with the values |
73
+ | `EmptyState`, `LoadingSection`, `Notice` | Nothing to show; a section still loading; a message (`onRetry` adds Try again) |
74
+ | `ConfirmDialog` | Asks before an action; `destructive` makes it red; a promise from `onConfirm` keeps it open with a spinner |
75
+ | `SideDrawer` | Details of one item, from the right, with a title, close button and actions |
76
+ | `useToast()` | `toast(message, severity)`: the host's toast in the full app, a snackbar in a view |
77
+ | `useFormat()` / `createFormat(locale)` | `integer`, `number`, `compact`, `percent`, `change` (+12.3%), `money`, `date` (a "2026-10-03" date stays that day), `dateTime`: dates from a `Date` or an ISO / Athena string; anything else shows "–" |
78
+
79
+ The host shows the frame over the whole page while a dialog or drawer is open, so they're always fully visible.
80
+
81
+ Every component, in light and dark, is in the [UI kit gallery](GALLERY.md) on the developer site (the gallery app,
82
+ [examples/ui-kit](../../examples/ui-kit), as a preview; run it with `npm run dev` there and open it through a host to
83
+ see it in a real one). `<HawkAppProvider preview={{ mode: 'dark' }}>` renders without a host, with sample context
84
+ (`previewContext()`), for galleries, docs and screenshots. New apps get the kit from the CLI's `next-mui` template
85
+ (`hawk-app create my-app --template next-mui`); an existing next-mui app gets it with `hawk-app upgrade`.
86
+
87
+ ## The theme
88
+
89
+ `createHawkTheme(context.theme, ...overrides)` (also at `@bridgeline-digital/hawk-app-ui/theme`):
90
+
91
+ | Part | From |
92
+ |---|---|
93
+ | Typography (Montserrat, 14 px base, h1–h3, `featuredValue`), breakpoints (`sm` 640 … `2xl` 1536), spacing, card and list overrides | Spark's theme (`sparkThemeOptions`) |
94
+ | Primary color and its text, backgrounds, text colors, dividers, border radius, light or dark | The host's theme tokens (`color-button-accent-background`, `color-background`, `color-background-container`, `color-text-default`, `color-text-secondary`, `color-border-default`, `border-radius`, `mode`), else Spark's |
95
+ | Dialogs and snackbars in the part of the frame the user can see | The kit (`frameThemeOptions`, from the bridge's `--hawk-visible-*` variables) |
96
+ | Table rows and header (borders in the divider color, a header row on the page background) | The kit (`tableThemeOptions`) |
97
+
98
+ The font is always Spark's, whatever the host uses, so apps look the same in HawkSearch and Spark.
99
+
100
+ <!-- Maintainers: keeping the theme in step with Spark (compare-spark) is in RELEASING.md, "Before releasing the UI kit". -->
101
+
102
+ ## Without React and MUI
103
+
104
+ For vanilla, Preact, React or Next apps without MUI: the same look as a stylesheet, and a few custom elements for what
105
+ CSS alone can't do. No dependencies: no React, no MUI, no bridge.
106
+
107
+ ```ts
108
+ // With a bundler (Vite, Next): once, where the app starts (Next: the css in app/layout.tsx).
109
+ import '@bridgeline-digital/hawk-app-ui/css';
110
+ import '@bridgeline-digital/hawk-app-ui/elements';
111
+ ```
112
+
113
+ ```html
114
+ <!-- Without a build step: from the CDN, at the bridge's version (the vanilla template does this). -->
115
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawk-app-ui@0.1/dist/css/hawk.css" />
116
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@bridgeline-digital/hawk-app-ui@0.1/dist/elements/index.js"></script>
117
+ ```
118
+
119
+ **The stylesheet** (`/css`, `dist/css/hawk.css`) carries Montserrat (no request to Google Fonts) and maps the host's
120
+ theme tokens, which the bridge sets as `--hawk-*` variables and `<html data-hawk-theme>`, as `createHawkTheme` does:
121
+ the accent, backgrounds, text, borders, radius and dark mode, else Spark's. Use its `--hawk-ui-*` variables
122
+ (`--hawk-ui-accent`, `--hawk-ui-surface`, `--hawk-ui-text`, `--hawk-ui-text-secondary`, `--hawk-ui-border`,
123
+ `--hawk-ui-radius`, …) for your own styles. A view's page (`<html data-hawk-view>`) stays transparent.
124
+
125
+ | Class | For |
126
+ |---|---|
127
+ | `hawk-section` (`hawk-section-header`, `-title`, `-subtitle`) | A titled card, Spark's |
128
+ | `hawk-kpi-row`, `hawk-stack`, `hawk-row`, `hawk-spacer` | Tiles side by side; a column or row of blocks |
129
+ | `hawk-button` (`is-outlined`, `is-text`, `is-small`) | Buttons in the host's accent |
130
+ | `hawk-field`, `hawk-input`, `hawk-select` | Form fields |
131
+ | `hawk-notice` (`is-error`, `is-warning`, `is-success`) | A message |
132
+ | `hawk-chip` (`is-accent`), `hawk-empty`, `hawk-spinner`, `hawk-skeleton` | Labels, nothing to show, loading |
133
+ | `hawk-table` (in `hawk-table-wrap`) | A plain table (or use `<hawk-data-table>`) |
134
+ | `hawk-h1`… `hawk-h3`, `hawk-value`, `hawk-muted`, `hawk-caption`, `hawk-num` | Type: headings, a headline number, secondary text |
135
+
136
+ **The elements** (`/elements`) render that markup. Data goes in as properties (`el.rows = [...]`), settings as
137
+ attributes. Importing defines them (in a browser; it's safe to import on a server, e.g. in Next).
138
+
139
+ | Element | Use |
140
+ |---|---|
141
+ | `<hawk-kpi label value hint change good-when highlight loading>` | A number with its change vs. the previous period (`change` as a fraction, `none` for "No previous data"; green when good) |
142
+ | `<hawk-data-table>` | `columns` (`{ key, label, align?, format?, value?, sortable?, csvLabel? }`; `format`: `integer`, `number`, `compact`, `percent`, `money`, `date`, `dateTime` or a function), `rows`, `totals`, `sort`; attributes `download="file.csv"`, `max-height`, `clickable` (`hawk-row-click` events), `empty`. Sortable headers, CSV download of the rows as sorted (formulas made text) |
143
+ | `<hawk-bar-list>` | `items` (`{ label, value }`); `selectable` (`hawk-select` events), `value-format`, `color`, `label` |
144
+ | `<hawk-column-chart>` | `columns` (`{ label, value, tooltip? }`); `height`, `value-format`, `color`, `label` |
145
+
146
+ ```js
147
+ const table = document.querySelector('hawk-data-table');
148
+ table.columns = [{ key: 'keyword', label: 'Keyword' }, { key: 'search_count', label: 'Searches', format: 'integer' }];
149
+ table.rows = report.data;
150
+ table.setAttribute('download', 'searches.csv');
151
+ ```
152
+
153
+ `createFormat(locale)` (from `/elements` too) formats numbers, money and dates like `useFormat()`. In React or Preact
154
+ with TypeScript, type the elements in JSX with `HawkElementTags` (the templates have `src/hawk-elements.d.ts`):
155
+
156
+ ```ts
157
+ import type { HawkElementTags } from '@bridgeline-digital/hawk-app-ui/elements';
158
+ declare module 'react' { namespace JSX { interface IntrinsicElements extends HawkElementTags {} } } // Preact: 'preact'
159
+ ```
160
+
161
+ Toasts: `app.toast(message, severity)` from the bridge shows the host's own.
162
+
163
+ ## Versions
164
+
165
+ Released with the bridge and the CLI (one version for all three). Peer dependencies of the React + MUI part: React 19,
166
+ MUI 9, Emotion 11 (optional for the stylesheet and the elements), and the bridge.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bridgeline-digital/hawk-app-ui",
3
- "version": "0.1.0-dev.20261020202308",
3
+ "version": "0.1.0",
4
4
  "description": "For Bridgeline developers: the Spark look for Hawk Apps: for React + MUI, the theme (following the host's colors and mode), the app provider and shared components; for any app (vanilla, Preact, React, Next), a stylesheet and custom elements.",
5
5
  "author": "Bridgeline Digital",
6
6
  "license": "UNLICENSED",
@@ -93,7 +93,7 @@
93
93
  "@fontsource/montserrat": "^5.3.0"
94
94
  },
95
95
  "peerDependencies": {
96
- "@bridgeline-digital/hawk-app-bridge": "0.1.0-dev.20261020202308",
96
+ "@bridgeline-digital/hawk-app-bridge": ">=0.1.0 <1.0.0",
97
97
  "@emotion/react": "^11.14.0",
98
98
  "@emotion/styled": "^11.14.1",
99
99
  "@mui/material": "^9.3.1",