@dbosoft/nextjs-uicore 1.5.1 → 1.6.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/CHANGELOG.md +18 -0
- package/eslint.config.mjs +3 -3
- package/package.json +11 -6
- package/src/head/index.tsx +119 -119
- package/src/subnav/helpers/useStuckRef.ts +50 -50
- package/src/subnav/index.tsx +134 -135
- package/src/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.test.js +25 -25
- package/src/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.ts +17 -17
- package/src/subnav/partials/CtaLinks/github-stars-link/index.tsx +96 -96
- package/src/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.test.js +25 -25
- package/src/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.ts +25 -25
- package/src/subnav/partials/CtaLinks/icons/github.svg +3 -3
- package/src/subnav/partials/CtaLinks/index.tsx +46 -46
- package/src/subnav/partials/MenuItemsDefault/index.tsx +52 -52
- package/src/subnav/partials/MenuItemsDefault/style.module.scss +71 -71
- package/src/subnav/partials/MenuItemsOverflow/index.tsx +51 -51
- package/src/subnav/partials/MenuItemsOverflow/style.module.scss +51 -51
- package/src/subnav/partials/TitleLink/index.tsx +25 -25
- package/src/subnav/partials/nav-item-text/index.tsx +29 -29
- package/src/subnav/partials/nav-item-text/style.module.scss +19 -19
- package/src/subnav/style.module.scss +13 -13
- package/src/tabs/Tabs.tsx +50 -50
- package/src/tabs/TabsClient.tsx +75 -75
- package/src/tabs/index.ts +3 -3
- package/src/tabs/server.ts +2 -2
- package/src/themeselector/index.tsx +139 -139
- package/src/translations.ts +25 -25
- package/tsconfig.json +7 -7
- package/.turbo/turbo-build.log +0 -4
- package/.turbo/turbo-check-types.log +0 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @dbosoft/nextjs-uicore
|
|
2
2
|
|
|
3
|
+
## 1.6.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [909ea3a]
|
|
8
|
+
- @dbosoft/react-uicore@1.4.1
|
|
9
|
+
|
|
10
|
+
## 1.6.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- 42189cd: Rework design system
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [42189cd]
|
|
19
|
+
- @dbosoft/react-uicore@1.4.0
|
|
20
|
+
|
|
3
21
|
## 1.5.1
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/eslint.config.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import react from '@dbosoft/eslint-config/react'
|
|
2
|
-
|
|
3
|
-
export default [...react]
|
|
1
|
+
import react from '@dbosoft/eslint-config/react'
|
|
2
|
+
|
|
3
|
+
export default [...react]
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dbosoft/nextjs-uicore",
|
|
3
|
-
"description": "
|
|
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
|
+
"deprecated": true,
|
|
4
5
|
"author": "dbosoft",
|
|
5
|
-
"version": "1.
|
|
6
|
+
"version": "1.6.1",
|
|
6
7
|
"sideEffects": false,
|
|
7
8
|
"license": "MIT",
|
|
8
9
|
"exports": {
|
|
@@ -22,23 +23,27 @@
|
|
|
22
23
|
"react": "^19.0.0",
|
|
23
24
|
"react-dom": "^19.0.0",
|
|
24
25
|
"typescript": "^5.8.0",
|
|
25
|
-
"@dbosoft/web-types": "1.0.0",
|
|
26
26
|
"@dbosoft/eslint-config": "2.0.0",
|
|
27
|
-
"@dbosoft/typescript-config": "1.1.0"
|
|
27
|
+
"@dbosoft/typescript-config": "1.1.0",
|
|
28
|
+
"@dbosoft/web-types": "1.0.0"
|
|
28
29
|
},
|
|
29
30
|
"publishConfig": {
|
|
30
31
|
"access": "public"
|
|
31
32
|
},
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://github.com/dbosoft/react-components.git"
|
|
36
|
+
},
|
|
32
37
|
"dependencies": {
|
|
33
38
|
"@headlessui/react": ">=2.2.0",
|
|
34
39
|
"@heroicons/react": ">=2.1.0",
|
|
35
40
|
"clsx": ">=2.1.0",
|
|
36
41
|
"next-themes": ">=0.4.3",
|
|
37
|
-
"@dbosoft/react-uicore": "1.
|
|
42
|
+
"@dbosoft/react-uicore": "1.4.1"
|
|
38
43
|
},
|
|
39
44
|
"scripts": {
|
|
40
45
|
"check-types": "tsc --noEmit",
|
|
41
|
-
"lint": "
|
|
46
|
+
"lint": "echo 'DEPRECATED: skipping lint for nextjs-uicore'",
|
|
42
47
|
"clean": "rimraf .turbo && rimraf node_modules && rimraf dist"
|
|
43
48
|
}
|
|
44
49
|
}
|
package/src/head/index.tsx
CHANGED
|
@@ -1,119 +1,119 @@
|
|
|
1
|
-
import Head from 'next/head'
|
|
2
|
-
|
|
3
|
-
export default function DBOHead(props: DBOHeadProps): React.ReactElement {
|
|
4
|
-
return (
|
|
5
|
-
<Head>
|
|
6
|
-
{whenString(props.title, <title>{props.title}</title>)}
|
|
7
|
-
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
|
8
|
-
<meta property="og:locale" content="en_US" key="og:locale" />
|
|
9
|
-
<meta property="og:type" content="website" key="og:type" />
|
|
10
|
-
<meta
|
|
11
|
-
property="article:publisher"
|
|
12
|
-
content="https://www.facebook.com/dbosoft/"
|
|
13
|
-
key="article:publisher"
|
|
14
|
-
/>
|
|
15
|
-
<meta name="twitter:site" content="@dbosoft" key="twitter:site" />
|
|
16
|
-
<meta
|
|
17
|
-
name="twitter:card"
|
|
18
|
-
content={props.twitterCard || 'summary_large_image'}
|
|
19
|
-
key="twitter:card"
|
|
20
|
-
/>
|
|
21
|
-
<meta name="theme-color" content="#000" key="themeColor" />
|
|
22
|
-
{whenString(
|
|
23
|
-
props.description,
|
|
24
|
-
<meta
|
|
25
|
-
name="description"
|
|
26
|
-
property="og:description"
|
|
27
|
-
content={props.description}
|
|
28
|
-
key="description"
|
|
29
|
-
/>
|
|
30
|
-
)}
|
|
31
|
-
{whenString(
|
|
32
|
-
props.siteName,
|
|
33
|
-
<meta
|
|
34
|
-
property="og:site_name"
|
|
35
|
-
content={props.siteName}
|
|
36
|
-
key="og:site_name"
|
|
37
|
-
/>
|
|
38
|
-
)}
|
|
39
|
-
{whenString(
|
|
40
|
-
props.pageName,
|
|
41
|
-
<meta property="og:title" content={props.pageName} key="og:title" />
|
|
42
|
-
)}
|
|
43
|
-
{whenString(
|
|
44
|
-
props.image,
|
|
45
|
-
<meta property="og:image" content={props.image} key="og:image" />
|
|
46
|
-
)}
|
|
47
|
-
{whenString(
|
|
48
|
-
props.canonicalUrl,
|
|
49
|
-
<link rel="canonical" key="canonical" href={props.canonicalUrl} />
|
|
50
|
-
)}
|
|
51
|
-
{whenArray(props.preload, ({ href, ...linkProps }: {href:string}) => (
|
|
52
|
-
<link href={href} {...linkProps} rel="preload" key={href} />
|
|
53
|
-
))}
|
|
54
|
-
{whenArray(props.icon, ({ href, ...linkProps }: {href:string}) => (
|
|
55
|
-
<link href={href} {...linkProps} rel="icon" key={href} />
|
|
56
|
-
))}
|
|
57
|
-
{whenArray(props.stylesheet, ({ href, ...linkProps }: {href:string}) => (
|
|
58
|
-
<link href={href} {...linkProps} rel="stylesheet" key={href} />
|
|
59
|
-
))}
|
|
60
|
-
{props.children}
|
|
61
|
-
</Head>
|
|
62
|
-
)
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/** Return a map of the value using the callback if it is an Array. */
|
|
66
|
-
const whenArray = (value : any, mapFn: $TSFixMe) =>
|
|
67
|
-
Array.isArray(value) ? value.map(mapFn) : null
|
|
68
|
-
|
|
69
|
-
/** Return the value if it is a String */
|
|
70
|
-
const whenString = (value : any, returnValue: any) =>
|
|
71
|
-
typeof value === 'string' ? returnValue : null
|
|
72
|
-
|
|
73
|
-
// -----
|
|
74
|
-
// Types
|
|
75
|
-
// -----
|
|
76
|
-
|
|
77
|
-
interface DBOHeadProps {
|
|
78
|
-
canonicalUrl?: string
|
|
79
|
-
children?: React.ReactNode
|
|
80
|
-
description?: string
|
|
81
|
-
icon?: {
|
|
82
|
-
[key: string]: unknown
|
|
83
|
-
href: string
|
|
84
|
-
sizes?: string
|
|
85
|
-
type?: string
|
|
86
|
-
}[]
|
|
87
|
-
image?: string
|
|
88
|
-
pageName?: string
|
|
89
|
-
preload?: {
|
|
90
|
-
[key: string]: unknown
|
|
91
|
-
as: asProp
|
|
92
|
-
href: string
|
|
93
|
-
type?: string
|
|
94
|
-
}[]
|
|
95
|
-
siteName?: string
|
|
96
|
-
stylesheet?: {
|
|
97
|
-
[key: string]: unknown
|
|
98
|
-
href: string
|
|
99
|
-
media?: string
|
|
100
|
-
}[]
|
|
101
|
-
title?: string
|
|
102
|
-
twitterCard?: TwitterCardProp
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
type TwitterCardProp = 'summary' | 'summary_large_image'
|
|
106
|
-
|
|
107
|
-
type asProp =
|
|
108
|
-
| 'audio'
|
|
109
|
-
| 'document'
|
|
110
|
-
| 'embed'
|
|
111
|
-
| 'fetch'
|
|
112
|
-
| 'font'
|
|
113
|
-
| 'image'
|
|
114
|
-
| 'object'
|
|
115
|
-
| 'script'
|
|
116
|
-
| 'style'
|
|
117
|
-
| 'track'
|
|
118
|
-
| 'video'
|
|
119
|
-
| 'worker'
|
|
1
|
+
import Head from 'next/head'
|
|
2
|
+
|
|
3
|
+
export default function DBOHead(props: DBOHeadProps): React.ReactElement {
|
|
4
|
+
return (
|
|
5
|
+
<Head>
|
|
6
|
+
{whenString(props.title, <title>{props.title}</title>)}
|
|
7
|
+
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
|
8
|
+
<meta property="og:locale" content="en_US" key="og:locale" />
|
|
9
|
+
<meta property="og:type" content="website" key="og:type" />
|
|
10
|
+
<meta
|
|
11
|
+
property="article:publisher"
|
|
12
|
+
content="https://www.facebook.com/dbosoft/"
|
|
13
|
+
key="article:publisher"
|
|
14
|
+
/>
|
|
15
|
+
<meta name="twitter:site" content="@dbosoft" key="twitter:site" />
|
|
16
|
+
<meta
|
|
17
|
+
name="twitter:card"
|
|
18
|
+
content={props.twitterCard || 'summary_large_image'}
|
|
19
|
+
key="twitter:card"
|
|
20
|
+
/>
|
|
21
|
+
<meta name="theme-color" content="#000" key="themeColor" />
|
|
22
|
+
{whenString(
|
|
23
|
+
props.description,
|
|
24
|
+
<meta
|
|
25
|
+
name="description"
|
|
26
|
+
property="og:description"
|
|
27
|
+
content={props.description}
|
|
28
|
+
key="description"
|
|
29
|
+
/>
|
|
30
|
+
)}
|
|
31
|
+
{whenString(
|
|
32
|
+
props.siteName,
|
|
33
|
+
<meta
|
|
34
|
+
property="og:site_name"
|
|
35
|
+
content={props.siteName}
|
|
36
|
+
key="og:site_name"
|
|
37
|
+
/>
|
|
38
|
+
)}
|
|
39
|
+
{whenString(
|
|
40
|
+
props.pageName,
|
|
41
|
+
<meta property="og:title" content={props.pageName} key="og:title" />
|
|
42
|
+
)}
|
|
43
|
+
{whenString(
|
|
44
|
+
props.image,
|
|
45
|
+
<meta property="og:image" content={props.image} key="og:image" />
|
|
46
|
+
)}
|
|
47
|
+
{whenString(
|
|
48
|
+
props.canonicalUrl,
|
|
49
|
+
<link rel="canonical" key="canonical" href={props.canonicalUrl} />
|
|
50
|
+
)}
|
|
51
|
+
{whenArray(props.preload, ({ href, ...linkProps }: {href:string}) => (
|
|
52
|
+
<link href={href} {...linkProps} rel="preload" key={href} />
|
|
53
|
+
))}
|
|
54
|
+
{whenArray(props.icon, ({ href, ...linkProps }: {href:string}) => (
|
|
55
|
+
<link href={href} {...linkProps} rel="icon" key={href} />
|
|
56
|
+
))}
|
|
57
|
+
{whenArray(props.stylesheet, ({ href, ...linkProps }: {href:string}) => (
|
|
58
|
+
<link href={href} {...linkProps} rel="stylesheet" key={href} />
|
|
59
|
+
))}
|
|
60
|
+
{props.children}
|
|
61
|
+
</Head>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/** Return a map of the value using the callback if it is an Array. */
|
|
66
|
+
const whenArray = (value : any, mapFn: $TSFixMe) =>
|
|
67
|
+
Array.isArray(value) ? value.map(mapFn) : null
|
|
68
|
+
|
|
69
|
+
/** Return the value if it is a String */
|
|
70
|
+
const whenString = (value : any, returnValue: any) =>
|
|
71
|
+
typeof value === 'string' ? returnValue : null
|
|
72
|
+
|
|
73
|
+
// -----
|
|
74
|
+
// Types
|
|
75
|
+
// -----
|
|
76
|
+
|
|
77
|
+
interface DBOHeadProps {
|
|
78
|
+
canonicalUrl?: string
|
|
79
|
+
children?: React.ReactNode
|
|
80
|
+
description?: string
|
|
81
|
+
icon?: {
|
|
82
|
+
[key: string]: unknown
|
|
83
|
+
href: string
|
|
84
|
+
sizes?: string
|
|
85
|
+
type?: string
|
|
86
|
+
}[]
|
|
87
|
+
image?: string
|
|
88
|
+
pageName?: string
|
|
89
|
+
preload?: {
|
|
90
|
+
[key: string]: unknown
|
|
91
|
+
as: asProp
|
|
92
|
+
href: string
|
|
93
|
+
type?: string
|
|
94
|
+
}[]
|
|
95
|
+
siteName?: string
|
|
96
|
+
stylesheet?: {
|
|
97
|
+
[key: string]: unknown
|
|
98
|
+
href: string
|
|
99
|
+
media?: string
|
|
100
|
+
}[]
|
|
101
|
+
title?: string
|
|
102
|
+
twitterCard?: TwitterCardProp
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
type TwitterCardProp = 'summary' | 'summary_large_image'
|
|
106
|
+
|
|
107
|
+
type asProp =
|
|
108
|
+
| 'audio'
|
|
109
|
+
| 'document'
|
|
110
|
+
| 'embed'
|
|
111
|
+
| 'fetch'
|
|
112
|
+
| 'font'
|
|
113
|
+
| 'image'
|
|
114
|
+
| 'object'
|
|
115
|
+
| 'script'
|
|
116
|
+
| 'style'
|
|
117
|
+
| 'track'
|
|
118
|
+
| 'video'
|
|
119
|
+
| 'worker'
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import type { DependencyList} from 'react';
|
|
4
|
-
import { useCallback, useState } from 'react'
|
|
5
|
-
|
|
6
|
-
const IntersectionObserver =
|
|
7
|
-
(typeof window !== 'undefined' && window.IntersectionObserver) || null
|
|
8
|
-
const intersectionOpts = { threshold: [1] }
|
|
9
|
-
|
|
10
|
-
/*
|
|
11
|
-
|
|
12
|
-
Stuck-ness is determined by whether a sticky target element has intersected the
|
|
13
|
-
top boundary of its viewport.
|
|
14
|
-
|
|
15
|
-
Stuck-ness is checked on intersection observation.
|
|
16
|
-
|
|
17
|
-
IntersectionObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Browser_compatibility):
|
|
18
|
-
|
|
19
|
-
- Chrome 51+
|
|
20
|
-
- Edge 15+
|
|
21
|
-
- Firefox 55+
|
|
22
|
-
- Safari 12.1+
|
|
23
|
-
|
|
24
|
-
Internet Explorer 11 gracefully skips over this functionality, as it does not
|
|
25
|
-
support `IntersectionObserver` or CSS `position: sticky`.
|
|
26
|
-
|
|
27
|
-
*/
|
|
28
|
-
|
|
29
|
-
export default function useStuckRef(deps: DependencyList) {
|
|
30
|
-
const [isStuck, setStuck] = useState(false)
|
|
31
|
-
|
|
32
|
-
const stuckRef = useCallback((target: Element | null) => {
|
|
33
|
-
if (target && IntersectionObserver) {
|
|
34
|
-
const intersectionObserver = new IntersectionObserver(([entry]) => {
|
|
35
|
-
const nowIsStuck = entry.intersectionRatio < 1
|
|
36
|
-
setStuck(nowIsStuck);
|
|
37
|
-
|
|
38
|
-
}, intersectionOpts)
|
|
39
|
-
|
|
40
|
-
intersectionObserver.observe(target)
|
|
41
|
-
|
|
42
|
-
return intersectionObserver.disconnect.bind(intersectionObserver)
|
|
43
|
-
}
|
|
44
|
-
return () => { };
|
|
45
|
-
}, deps);
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return { isStuck, stuckRef }
|
|
50
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import type { DependencyList} from 'react';
|
|
4
|
+
import { useCallback, useState } from 'react'
|
|
5
|
+
|
|
6
|
+
const IntersectionObserver =
|
|
7
|
+
(typeof window !== 'undefined' && window.IntersectionObserver) || null
|
|
8
|
+
const intersectionOpts = { threshold: [1] }
|
|
9
|
+
|
|
10
|
+
/*
|
|
11
|
+
|
|
12
|
+
Stuck-ness is determined by whether a sticky target element has intersected the
|
|
13
|
+
top boundary of its viewport.
|
|
14
|
+
|
|
15
|
+
Stuck-ness is checked on intersection observation.
|
|
16
|
+
|
|
17
|
+
IntersectionObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Browser_compatibility):
|
|
18
|
+
|
|
19
|
+
- Chrome 51+
|
|
20
|
+
- Edge 15+
|
|
21
|
+
- Firefox 55+
|
|
22
|
+
- Safari 12.1+
|
|
23
|
+
|
|
24
|
+
Internet Explorer 11 gracefully skips over this functionality, as it does not
|
|
25
|
+
support `IntersectionObserver` or CSS `position: sticky`.
|
|
26
|
+
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
export default function useStuckRef(deps: DependencyList) {
|
|
30
|
+
const [isStuck, setStuck] = useState(false)
|
|
31
|
+
|
|
32
|
+
const stuckRef = useCallback((target: Element | null) => {
|
|
33
|
+
if (target && IntersectionObserver) {
|
|
34
|
+
const intersectionObserver = new IntersectionObserver(([entry]) => {
|
|
35
|
+
const nowIsStuck = entry.intersectionRatio < 1
|
|
36
|
+
setStuck(nowIsStuck);
|
|
37
|
+
|
|
38
|
+
}, intersectionOpts)
|
|
39
|
+
|
|
40
|
+
intersectionObserver.observe(target)
|
|
41
|
+
|
|
42
|
+
return intersectionObserver.disconnect.bind(intersectionObserver)
|
|
43
|
+
}
|
|
44
|
+
return () => { };
|
|
45
|
+
}, [...deps]);
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
return { isStuck, stuckRef }
|
|
50
|
+
}
|