@dbosoft/nextjs-uicore 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @dbosoft/nextjs-uicore
 
+## 1.5.0
+
+### Minor Changes
+
+- nextjs 16 / react 19 / tailwind 4 upgrade
+
+### Patch Changes
+
+- Updated dependencies
+  - @dbosoft/react-uicore@1.3.0
+
+## 1.4.0
+
+### Minor Changes
+
+- 05d3074: i18n support for DE/EN
+
+### Patch Changes
+
+- Updated dependencies [05d3074]
+  - @dbosoft/react-uicore@1.2.0
+
 ## 1.3.0
 
 ### Minor Changes

package/eslint.config.mjs

@@ -0,0 +1,3 @@
+import react from '@dbosoft/eslint-config/react'
+
+export default [...react]

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dbosoft/nextjs-uicore",
   "description": "Core UI components for Next.js",
   "author": "dbosoft",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "sideEffects": false,
   "license": "MIT",
   "exports": {
@@ -11,28 +11,30 @@
     "./tabs": "./src/tabs/index.ts",
     "./tabs/server": "./src/tabs/server.ts",
     "./subnav": "./src/subnav/index.tsx",
-    "./themeselector": "./src/themeselector/index.tsx"
+    "./themeselector": "./src/themeselector/index.tsx",
+    "./translations": "./src/translations.ts"
   },
   "devDependencies": {
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "eslint": "^8.56.0",
-    "next": "^14.0.4",
-    "react": "^18.2.0",
-    "typescript": "^5.3.3",
-    "@dbosoft/eslint-config": "1.0.0",
-    "@dbosoft/typescript-config": "1.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.8.0",
+    "@dbosoft/eslint-config": "2.0.0",
+    "@dbosoft/typescript-config": "1.1.0",
     "@dbosoft/web-types": "1.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@dbosoft/react-uicore": ">=1.1.0",
     "@headlessui/react": ">=2.2.0",
     "@heroicons/react": ">=2.1.0",
     "clsx": ">=2.1.0",
-    "next-themes": ">=0.4.3"
+    "next-themes": ">=0.4.3",
+    "@dbosoft/react-uicore": "1.3.0"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",

package/src/subnav/index.tsx

@@ -38,6 +38,14 @@ export interface ICtaItem {
   className?: string,
 }
 
+export interface SubNavLabels {
+  openMainMenu: string
+}
+
+const defaultSubNavLabels: SubNavLabels = {
+  openMainMenu: 'Open main menu',
+}
+
 interface ISubNavProps {
   titleLink?: ITitleLink,
   titleContent?: JSX.Element,
@@ -45,7 +53,8 @@ interface ISubNavProps {
   hideGithubStars: boolean
   menuItems: MenuItem[],
   menuItemsAlign: 'left' | 'right',
-  className?: string
+  className?: string,
+  labels?: Partial<SubNavLabels>
 }
 
 function Subnav({
@@ -55,8 +64,10 @@ function Subnav({
   hideGithubStars,
   menuItems,
   menuItemsAlign = `right`,
-  titleContent
+  titleContent,
+  labels: labelsProp
 }: ISubNavProps) {
+  const labels = { ...defaultSubNavLabels, ...labelsProp }
 
   const { isStuck, stuckRef } = useStuckRef([])
 
@@ -93,7 +104,7 @@ function Subnav({
                 <div className="-mr-2 flex items-center sm:hidden ">
                   {/* Mobile menu button */}
                   <DisclosureButton className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
-                    <span className="sr-only">Open main menu</span>
+                    <span className="sr-only">{labels.openMainMenu}</span>
                     {open ? (
                       <XMarkIcon aria-hidden="true" className="block h-6 w-6" />
                     ) : (

package/src/subnav/partials/CtaLinks/github-stars-link/index.tsx

@@ -9,7 +9,16 @@ import formatStarCount from './formatStarCount'
 import parseGithubUrl from './parseGithubUrl'
 import Link from 'next/link';
 
-function GithubStarsButton({ url, hideGithubStars }: { url: string, hideGithubStars: boolean }) {
+export interface GithubStarsLinkLabels {
+  github: string
+}
+
+const defaultGithubStarsLinkLabels: GithubStarsLinkLabels = {
+  github: 'Github',
+}
+
+function GithubStarsButton({ url, hideGithubStars, labels: labelsProp }: { url: string, hideGithubStars: boolean, labels?: Partial<GithubStarsLinkLabels> }) {
+  const labels = { ...defaultGithubStarsLinkLabels, ...labelsProp }
   const [starCount, setStarCount] = useState(-1)
 
   useEffect(() => {
@@ -62,7 +71,7 @@ function GithubStarsButton({ url, hideGithubStars }: { url: string, hideGithubSt
   }
 
   return (
-    <LinkButton icon={!showStarCount ? icon : undefined} label='Github' text={!showStarCount ? "Github" : ""}
+    <LinkButton icon={!showStarCount ? icon : undefined} label={labels.github} text={!showStarCount ? labels.github : ""}
       variant='neutral'
       url={url} external
       Link={Link}

package/src/themeselector/index.tsx

@@ -3,11 +3,21 @@ import { useTheme } from 'next-themes'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/react'
 import clsx from 'clsx'
 
-const themes = [
-  { name: 'Light', value: 'light', icon: LightIcon },
-  { name: 'Dark', value: 'dark', icon: DarkIcon },
-  { name: 'System', value: 'system', icon: SystemIcon },
-]
+export interface ThemeSelectorLabels {
+  light: string
+  dark: string
+  system: string
+  theme: string
+  themeAriaLabel: string
+}
+
+const defaultThemeSelectorLabels: ThemeSelectorLabels = {
+  light: 'Light',
+  dark: 'Dark',
+  system: 'System',
+  theme: 'Theme',
+  themeAriaLabel: 'Theme',
+}
 
 function LightIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
@@ -45,9 +55,19 @@ function SystemIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-export function ThemeSelector(
-  props: React.ComponentPropsWithoutRef<typeof Listbox<'div'>>,
-) {
+export function ThemeSelector({
+  labels: labelsProp,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Listbox<'div'>> & {
+  labels?: Partial<ThemeSelectorLabels>
+}) {
+  const labels = { ...defaultThemeSelectorLabels, ...labelsProp }
+  const themes = [
+    { name: labels.light, value: 'light', icon: LightIcon },
+    { name: labels.dark, value: 'dark', icon: DarkIcon },
+    { name: labels.system, value: 'system', icon: SystemIcon },
+  ]
+
   let { theme, setTheme } = useTheme()
   let [mounted, setMounted] = useState(false)
 
@@ -61,10 +81,10 @@ export function ThemeSelector(
 
   return (
     <Listbox as="div" value={theme} onChange={setTheme} {...props}>
-      <ListboxLabel className="sr-only">Theme</ListboxLabel>
+      <ListboxLabel className="sr-only">{labels.theme}</ListboxLabel>
       <ListboxButton
         className="flex h-9 w-12 mt-3 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
-        aria-label="Theme"
+        aria-label={labels.themeAriaLabel}
       >
         <LightIcon
           className={clsx(

package/src/translations.ts

@@ -0,0 +1,25 @@
+import type { ThemeSelectorLabels } from './themeselector'
+import type { SubNavLabels } from './subnav'
+import type { GithubStarsLinkLabels } from './subnav/partials/CtaLinks/github-stars-link'
+
+export const themeSelectorLabels: { de: ThemeSelectorLabels } = {
+  de: {
+    light: 'Hell',
+    dark: 'Dunkel',
+    system: 'System',
+    theme: 'Design',
+    themeAriaLabel: 'Design',
+  },
+}
+
+export const subNavLabels: { de: SubNavLabels } = {
+  de: {
+    openMainMenu: 'Hauptmenü öffnen',
+  },
+}
+
+export const githubStarsLinkLabels: { de: GithubStarsLinkLabels } = {
+  de: {
+    github: 'Github',
+  },
+}

package/.eslintrc.js

@@ -1,4 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  extends: ["@dbosoft/eslint-config/react.js"],
-};