@dbosoft/nextjs-uicore 1.7.0 → 1.7.1
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/.turbo/turbo-check-types.log +1 -1
- package/.turbo/turbo-lint.log +1 -1
- package/CHANGELOG.md +100 -5
- package/package.json +5 -5
- package/src/tabs/TabsClient.tsx +75 -75
package/.turbo/turbo-lint.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @dbosoft/nextjs-uicore@1.6.
|
|
2
|
+
> @dbosoft/nextjs-uicore@1.6.2 lint F:\source\repos\dbosoft\web\react-components\packages\nextjs-uicore
|
|
3
3
|
> echo 'DEPRECATED: skipping lint for nextjs-uicore'
|
|
4
4
|
|
|
5
5
|
'DEPRECATED: skipping lint for nextjs-uicore'
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,116 @@
|
|
|
1
1
|
# @dbosoft/nextjs-uicore
|
|
2
2
|
|
|
3
|
+
## 1.7.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Republish all packages from current main with tutorial system, tabs fixes, and surface system changes.
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @dbosoft/react-uicore@1.5.1
|
|
10
|
+
|
|
3
11
|
## 1.7.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
6
14
|
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
|
|
15
|
+
- e22306c: Surface system, config-driven types, and pluggable auth.
|
|
16
|
+
|
|
17
|
+
**Surface system**
|
|
18
|
+
- 5 surface classes: `surface-base`, `surface-alt`, `surface-recede`, `surface-wash`, `surface-bold`
|
|
19
|
+
- Flat nesting — no `child-*` indirection needed
|
|
20
|
+
- Text tokens: `text-on-primary`, `text-on-secondary`, `text-on-muted`, `text-on-brand`, `text-on-link`
|
|
21
|
+
- Dark mode uses dark blue surfaces (hue 215°) with wide lightness steps
|
|
22
|
+
- WCAG AAA validated: 10 surfaces, ~50 foreground pairings, 0 FAIL
|
|
23
|
+
- **Breaking:** Removed `child-container`, `child-zone-light`, `child-zone-dark`, `child-emphasis`, `border-child`, `bg-child-*`
|
|
24
|
+
- **Breaking:** Renamed `surface-page` → `surface-base`, `surface-page-alt` → `surface-alt`, `surface-page-recede` → `surface-recede`, `surface-brand-wash` → `surface-wash`, `surface-brand-bold` → `surface-bold`
|
|
25
|
+
|
|
26
|
+
**Tabs**
|
|
27
|
+
- Dual-mode routing (path or query parameter) with configurable param name
|
|
28
|
+
- Client-only tab switching via pushState, zero re-render tab changes
|
|
29
|
+
|
|
30
|
+
**Config-driven type system**
|
|
31
|
+
- `createSiteConfig()` infers all types from config objects — no manual type declarations
|
|
32
|
+
- **Breaking:** `createLink()` removed — use `createSiteConfig()` instead
|
|
33
|
+
- **Breaking:** `useSiteConfig()` removed — pass config as props
|
|
34
|
+
- **Breaking:** `BreadcrumbSchemaClient` / `BreadcrumbSchemaLazy` exports removed
|
|
35
|
+
- **Breaking:** `GetStartedConfig` type removed
|
|
36
|
+
|
|
37
|
+
**Pluggable auth**
|
|
38
|
+
- `authSlot` prop on `HeadNav` — consumer passes their own auth UI component
|
|
39
|
+
- Framework no longer imports `next-auth` — zero auth library dependency
|
|
40
|
+
- **Breaking:** `config.auth` removed — use `HeadNav authSlot` prop + consumer-side SessionProvider
|
|
41
|
+
- **Breaking:** `AuthAdapter`, `AuthSession`, `AuthConfig` types removed
|
|
42
|
+
|
|
43
|
+
**@dbosoft/nextjs-auth (new package)**
|
|
44
|
+
- OIDC authentication with PKCE, iron-session encrypted cookies, per-scope token caching, i18n support
|
|
45
|
+
|
|
46
|
+
### Patch Changes
|
|
47
|
+
|
|
48
|
+
- Updated dependencies [e22306c]
|
|
49
|
+
- @dbosoft/react-uicore@1.5.0
|
|
50
|
+
|
|
51
|
+
## 1.7.0-pre.4
|
|
52
|
+
|
|
53
|
+
### Patch Changes
|
|
54
|
+
|
|
55
|
+
- Align pre-release versions.
|
|
56
|
+
- Updated dependencies
|
|
57
|
+
- @dbosoft/react-uicore@1.5.0-pre.4
|
|
58
|
+
|
|
59
|
+
## 1.7.0-pre.3
|
|
60
|
+
|
|
61
|
+
### Patch Changes
|
|
62
|
+
|
|
63
|
+
- Tabs: client-only tab switching via pushState, prevent Link server navigation for zero re-render tab changes.
|
|
64
|
+
- Updated dependencies
|
|
65
|
+
- @dbosoft/react-uicore@1.5.0-pre.3
|
|
66
|
+
|
|
67
|
+
## 1.7.0-pre.2
|
|
68
|
+
|
|
69
|
+
### Patch Changes
|
|
70
|
+
|
|
71
|
+
- f5e91c0: Tabs: add dual-mode routing (path or query parameter) with configurable param name for multiple tab groups on the same page.
|
|
72
|
+
- Updated dependencies [f5e91c0]
|
|
73
|
+
- @dbosoft/react-uicore@1.5.0-pre.2
|
|
74
|
+
|
|
75
|
+
## 1.7.0-pre.1
|
|
76
|
+
|
|
77
|
+
### Minor Changes
|
|
78
|
+
|
|
79
|
+
- 164d932: Surface system: WCAG-validated surface composition with flat nesting.
|
|
80
|
+
- 5 surface classes: `surface-base`, `surface-alt`, `surface-recede`, `surface-wash`, `surface-bold`
|
|
81
|
+
- Surfaces nest freely — no `child-*` indirection needed
|
|
82
|
+
- Tailwind utilities: `text-on-primary`, `text-on-secondary`, `text-on-muted`, `text-on-brand`, `text-on-link`, `decoration-on-link`, `bg-on-brand-emph`
|
|
10
83
|
- Text token migration: `text-content-primary` → `text-on-primary`, `text-content-secondary` → `text-on-secondary`, `text-content-muted` → `text-on-muted`, `text-link` → `text-on-link`
|
|
11
84
|
- Dark mode uses dark blue surfaces (hue 215°) with wide lightness steps
|
|
12
|
-
-
|
|
85
|
+
- 10 surfaces (5 light + 5 dark), ~50 foreground pairings, 0 FAIL
|
|
13
86
|
- `bg-surface-*` tokens remain valid for interactive states, overlays, dropdowns
|
|
87
|
+
- **Breaking:** Removed `child-container`, `child-zone-light`, `child-zone-dark`, `child-emphasis`, `border-child`, `bg-child-*`
|
|
88
|
+
- **Breaking:** Renamed `surface-page` → `surface-base`, `surface-page-alt` → `surface-alt`, `surface-page-recede` → `surface-recede`, `surface-brand-wash` → `surface-wash`, `surface-brand-bold` → `surface-bold`
|
|
14
89
|
|
|
15
90
|
### Patch Changes
|
|
16
91
|
|
|
17
92
|
- Updated dependencies [164d932]
|
|
18
|
-
- @dbosoft/react-uicore@1.5.0
|
|
93
|
+
- @dbosoft/react-uicore@1.5.0-pre.1
|
|
94
|
+
|
|
95
|
+
## 1.7.0-pre.0
|
|
96
|
+
|
|
97
|
+
### Minor Changes
|
|
98
|
+
|
|
99
|
+
- 164d932: Surface system: WCAG-validated surface composition with flat nesting.
|
|
100
|
+
- 5 surface classes: `surface-base`, `surface-alt`, `surface-recede`, `surface-wash`, `surface-bold`
|
|
101
|
+
- Surfaces nest freely — no `child-*` indirection needed
|
|
102
|
+
- Tailwind utilities: `text-on-primary`, `text-on-secondary`, `text-on-muted`, `text-on-brand`, `text-on-link`, `decoration-on-link`, `bg-on-brand-emph`
|
|
103
|
+
- Text token migration: `text-content-primary` → `text-on-primary`, `text-content-secondary` → `text-on-secondary`, `text-content-muted` → `text-on-muted`, `text-link` → `text-on-link`
|
|
104
|
+
- Dark mode uses dark blue surfaces (hue 215°) with wide lightness steps
|
|
105
|
+
- 10 surfaces (5 light + 5 dark), ~50 foreground pairings, 0 FAIL
|
|
106
|
+
- `bg-surface-*` tokens remain valid for interactive states, overlays, dropdowns
|
|
107
|
+
- **Breaking:** Removed `child-container`, `child-zone-light`, `child-zone-dark`, `child-emphasis`, `border-child`, `bg-child-*`
|
|
108
|
+
- **Breaking:** Renamed `surface-page` → `surface-base`, `surface-page-alt` → `surface-alt`, `surface-page-recede` → `surface-recede`, `surface-brand-wash` → `surface-wash`, `surface-brand-bold` → `surface-bold`
|
|
109
|
+
|
|
110
|
+
### Patch Changes
|
|
111
|
+
|
|
112
|
+
- Updated dependencies [164d932]
|
|
113
|
+
- @dbosoft/react-uicore@1.5.0-pre.0
|
|
19
114
|
|
|
20
115
|
## 1.6.2
|
|
21
116
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "DEPRECATED: Use @dbosoft/react-uicore/tabs for pure React tabs and @dbosoft/nextjs-site-core/ui/tabs for Next.js integration. All other components (head, subnav, themeselector) are replaced by @dbosoft/nextjs-site-core.",
|
|
4
4
|
"deprecated": true,
|
|
5
5
|
"author": "dbosoft",
|
|
6
|
-
"version": "1.7.
|
|
6
|
+
"version": "1.7.1",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"exports": {
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"react": "^19.0.0",
|
|
24
24
|
"react-dom": "^19.0.0",
|
|
25
25
|
"typescript": "^5.8.0",
|
|
26
|
-
"@dbosoft/typescript-config": "1.1.
|
|
27
|
-
"@dbosoft/eslint-config": "2.0.
|
|
28
|
-
"@dbosoft/web-types": "1.0.
|
|
26
|
+
"@dbosoft/typescript-config": "1.1.1",
|
|
27
|
+
"@dbosoft/eslint-config": "2.0.1",
|
|
28
|
+
"@dbosoft/web-types": "1.0.1"
|
|
29
29
|
},
|
|
30
30
|
"publishConfig": {
|
|
31
31
|
"access": "public"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@heroicons/react": ">=2.1.0",
|
|
40
40
|
"clsx": ">=2.1.0",
|
|
41
41
|
"next-themes": ">=0.4.3",
|
|
42
|
-
"@dbosoft/react-uicore": "1.5.
|
|
42
|
+
"@dbosoft/react-uicore": "1.5.1"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"check-types": "tsc --noEmit",
|
package/src/tabs/TabsClient.tsx
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
4
|
-
import { FC, ReactNode, forwardRef, useState } from "react";
|
|
5
|
-
import { TabGroup } from "@headlessui/react"
|
|
6
|
-
import Link from "next/link";
|
|
7
|
-
import clsx from "clsx";
|
|
8
|
-
|
|
9
|
-
export type TabConfig = {
|
|
10
|
-
name: string,
|
|
11
|
-
displayName: string
|
|
12
|
-
className?: string
|
|
13
|
-
content: ReactNode
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const createNavUrl = (index: number, tabs: string[], pathname: string, searchParams: URLSearchParams) => {
|
|
17
|
-
const lastSegment = pathname.split(`/`).pop();
|
|
18
|
-
let newPath = pathname;
|
|
19
|
-
|
|
20
|
-
if (lastSegment && tabs.includes(lastSegment)) {
|
|
21
|
-
newPath = pathname.substring(0, pathname.lastIndexOf(`/`));
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const newTab = index > 0 ? tabs[index] : ``;
|
|
25
|
-
newPath = newPath + `/` + newTab;
|
|
26
|
-
|
|
27
|
-
const query = searchParams.toString();
|
|
28
|
-
|
|
29
|
-
if (query)
|
|
30
|
-
return (newPath + `?` + query);
|
|
31
|
-
else
|
|
32
|
-
return newPath;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export const TabLink = forwardRef<HTMLAnchorElement, React.PropsWithChildren<{
|
|
36
|
-
index: number, tabs: string[], className: string
|
|
37
|
-
}>>((props, ref) => {
|
|
38
|
-
|
|
39
|
-
const pathname = usePathname()
|
|
40
|
-
const searchParams = useSearchParams()
|
|
41
|
-
|
|
42
|
-
return <Link prefetch={false} role="tab" {...props} className={clsx(`data-[selected]:border-secondary data-[selected]:text-link-light dark:data-[selected]:text-sky-300`,
|
|
43
|
-
`border-transparent text-on-secondary hover:border-secondary hover:text-sky-600 dark:hover:text-sky-200 `,
|
|
44
|
-
`whitespace-nowrap border-b-2 mx-3 px-2 py-2 text-base font-semibold`)} ref={ref} href={createNavUrl(props.index, props.tabs, pathname, searchParams)}
|
|
45
|
-
>
|
|
46
|
-
{props.children}
|
|
47
|
-
</Link >
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
TabLink.displayName = `TabLink`;
|
|
51
|
-
|
|
52
|
-
const TabsClient: FC<{
|
|
53
|
-
children: ReactNode,
|
|
54
|
-
initialTab: number,
|
|
55
|
-
tabs: string[]
|
|
56
|
-
}> = ({
|
|
57
|
-
children,
|
|
58
|
-
tabs,
|
|
59
|
-
initialTab
|
|
60
|
-
}) => {
|
|
61
|
-
const router = useRouter();
|
|
62
|
-
const pathname = usePathname();
|
|
63
|
-
const searchParams = useSearchParams();
|
|
64
|
-
const [selectedTab, setSelectedTab] = useState(initialTab);
|
|
65
|
-
|
|
66
|
-
return <TabGroup className="text-on-primary" manual selectedIndex={selectedTab}
|
|
67
|
-
defaultIndex={initialTab} onChange={(index) => {
|
|
68
|
-
router.push(createNavUrl(index, tabs, pathname, searchParams));
|
|
69
|
-
setSelectedTab(index);
|
|
70
|
-
}}>
|
|
71
|
-
{children}
|
|
72
|
-
</TabGroup>
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
export default TabsClient
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
4
|
+
import { FC, ReactNode, forwardRef, useState } from "react";
|
|
5
|
+
import { TabGroup } from "@headlessui/react"
|
|
6
|
+
import Link from "next/link";
|
|
7
|
+
import clsx from "clsx";
|
|
8
|
+
|
|
9
|
+
export type TabConfig = {
|
|
10
|
+
name: string,
|
|
11
|
+
displayName: string
|
|
12
|
+
className?: string
|
|
13
|
+
content: ReactNode
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const createNavUrl = (index: number, tabs: string[], pathname: string, searchParams: URLSearchParams) => {
|
|
17
|
+
const lastSegment = pathname.split(`/`).pop();
|
|
18
|
+
let newPath = pathname;
|
|
19
|
+
|
|
20
|
+
if (lastSegment && tabs.includes(lastSegment)) {
|
|
21
|
+
newPath = pathname.substring(0, pathname.lastIndexOf(`/`));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const newTab = index > 0 ? tabs[index] : ``;
|
|
25
|
+
newPath = newPath + `/` + newTab;
|
|
26
|
+
|
|
27
|
+
const query = searchParams.toString();
|
|
28
|
+
|
|
29
|
+
if (query)
|
|
30
|
+
return (newPath + `?` + query);
|
|
31
|
+
else
|
|
32
|
+
return newPath;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export const TabLink = forwardRef<HTMLAnchorElement, React.PropsWithChildren<{
|
|
36
|
+
index: number, tabs: string[], className: string
|
|
37
|
+
}>>((props, ref) => {
|
|
38
|
+
|
|
39
|
+
const pathname = usePathname()
|
|
40
|
+
const searchParams = useSearchParams()
|
|
41
|
+
|
|
42
|
+
return <Link prefetch={false} role="tab" {...props} className={clsx(`data-[selected]:border-secondary data-[selected]:text-link-light dark:data-[selected]:text-sky-300`,
|
|
43
|
+
`border-transparent text-on-secondary hover:border-secondary hover:text-sky-600 dark:hover:text-sky-200 `,
|
|
44
|
+
`whitespace-nowrap border-b-2 mx-3 px-2 py-2 text-base font-semibold`)} ref={ref} href={createNavUrl(props.index, props.tabs, pathname, searchParams)}
|
|
45
|
+
>
|
|
46
|
+
{props.children}
|
|
47
|
+
</Link >
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
TabLink.displayName = `TabLink`;
|
|
51
|
+
|
|
52
|
+
const TabsClient: FC<{
|
|
53
|
+
children: ReactNode,
|
|
54
|
+
initialTab: number,
|
|
55
|
+
tabs: string[]
|
|
56
|
+
}> = ({
|
|
57
|
+
children,
|
|
58
|
+
tabs,
|
|
59
|
+
initialTab
|
|
60
|
+
}) => {
|
|
61
|
+
const router = useRouter();
|
|
62
|
+
const pathname = usePathname();
|
|
63
|
+
const searchParams = useSearchParams();
|
|
64
|
+
const [selectedTab, setSelectedTab] = useState(initialTab);
|
|
65
|
+
|
|
66
|
+
return <TabGroup className="text-on-primary" manual selectedIndex={selectedTab}
|
|
67
|
+
defaultIndex={initialTab} onChange={(index) => {
|
|
68
|
+
router.push(createNavUrl(index, tabs, pathname, searchParams));
|
|
69
|
+
setSelectedTab(index);
|
|
70
|
+
}}>
|
|
71
|
+
{children}
|
|
72
|
+
</TabGroup>
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export default TabsClient
|