@aglyn/shared-ui-next 1.0.0-beta.143 → 1.0.0-beta.145
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.
- package/README.md +53 -4
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,7 +1,56 @@
|
|
|
1
|
-
# shared-ui-next
|
|
1
|
+
# @aglyn/shared-ui-next
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React components and hooks that depend on Next.js: a two-column tab hub whose active tab lives in the URL, a route-based section rail, a `next/image` wrapper with a shimmer placeholder, and a page title provider. The Aglyn console and the console pages that plugins ship are built with it. It assumes the App Router (`next/navigation`).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> Beta. Published from the Aglyn monorepo under the `beta` dist-tag; APIs can change between beta releases.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
npm install @aglyn/shared-ui-next@beta
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `react`, `next`, `@mui/material` and `@mui/lab` (the tab components use `TabContext`, `TabList` and `TabPanel` from `@mui/lab`).
|
|
12
|
+
|
|
13
|
+
## What's in it
|
|
14
|
+
|
|
15
|
+
From the root entry:
|
|
16
|
+
|
|
17
|
+
- `HubTabs` — a navigation card with vertical tabs on the left and the active panel on the right, collapsing to horizontal tabs on small screens. Takes `tabs: { id, label, content }[]`, an optional `navHeader`, and `lazy` to defer mounting a panel until it is first opened. The active tab is mirrored into the `?tab=` query parameter, so a tab can be linked to and survives back and forward. Panels stay mounted once shown.
|
|
18
|
+
- `HubSections` — the same rail, choosing a section by route instead of by panel. Takes `sections: { href, label, visible?, locked? }[]` and renders `children` (the current route's page) beside the rail. Use it when each section should be its own code-split route.
|
|
19
|
+
- `useActiveSection(sections)` — the section the current pathname is inside, matched by longest `href` prefix on a path-separator boundary, or `null`. Useful for a breadcrumb that must agree with the rail.
|
|
20
|
+
- `Image` — `next/image` wrapped as an Emotion styled component, with an animated SVG shimmer as the blur placeholder. `width` and `height` default to 100; pass `disableShimmer` to turn the placeholder off.
|
|
21
|
+
- `NextPageTitleProvider`, `NextPageTitle`, `useNextPageTitle`, `useNextPageTitleContext` — compose a document title from parts and render it through `next/head`.
|
|
22
|
+
- `PageDecorated` and the `NextPageWithLayout` types — render a page inside the layout the page itself declares.
|
|
23
|
+
|
|
24
|
+
By subpath:
|
|
25
|
+
|
|
26
|
+
- `@aglyn/shared-ui-next/hooks/use-tab-param` — `useTabParam({ ids, param?, fallback?, onChange? })` returns `{ tab, onTabChange }`, the URL-backed tab state `HubTabs` is built on. `onTabChange` is a drop-in for a Material UI `TabList`'s `onChange`.
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
'use client'
|
|
32
|
+
|
|
33
|
+
import { HubTabs } from '@aglyn/shared-ui-next'
|
|
34
|
+
|
|
35
|
+
export function SettingsHub() {
|
|
36
|
+
return (
|
|
37
|
+
<HubTabs
|
|
38
|
+
navHeader="Settings"
|
|
39
|
+
tabs={[
|
|
40
|
+
{ id: 'general', label: 'General', content: <p>General settings</p> },
|
|
41
|
+
{ id: 'members', label: 'Members', content: <p>Members</p> },
|
|
42
|
+
]}
|
|
43
|
+
/>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
`/settings?tab=members` opens the second tab.
|
|
49
|
+
|
|
50
|
+
## How it fits
|
|
51
|
+
|
|
52
|
+
A `shared` UI package. It depends on `@aglyn/shared-ui-jsx`, `@aglyn/shared-ui-theme`, `@aglyn/shared-data-enums`, `@aglyn/shared-util-dom` and `@aglyn/shared-util-tools`; the feature plugins depend on it for their console pages. Shared packages are generic: they import only other shared packages and hold no plugin's domain.
|
|
53
|
+
|
|
54
|
+
## License
|
|
55
|
+
|
|
56
|
+
Apache-2.0. Source: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/next
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aglyn/shared-ui-next",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.145",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"homepage": "https://aglyn.com",
|
|
6
6
|
"repository": {
|
|
@@ -25,11 +25,11 @@
|
|
|
25
25
|
"./package.json": "./package.json"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@aglyn/shared-data-enums": "1.0.0-beta.
|
|
29
|
-
"@aglyn/shared-ui-jsx": "1.0.0-beta.
|
|
30
|
-
"@aglyn/shared-ui-theme": "1.0.0-beta.
|
|
31
|
-
"@aglyn/shared-util-dom": "1.0.0-beta.
|
|
32
|
-
"@aglyn/shared-util-tools": "1.0.0-beta.
|
|
28
|
+
"@aglyn/shared-data-enums": "1.0.0-beta.145",
|
|
29
|
+
"@aglyn/shared-ui-jsx": "1.0.0-beta.145",
|
|
30
|
+
"@aglyn/shared-ui-theme": "1.0.0-beta.145",
|
|
31
|
+
"@aglyn/shared-util-dom": "1.0.0-beta.145",
|
|
32
|
+
"@aglyn/shared-util-tools": "1.0.0-beta.145",
|
|
33
33
|
"@swc/helpers": "0.5.23"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|