@dbcdk/react-components 0.0.195 → 0.0.196

package/README.md

@@ -39,7 +39,7 @@ npm install @dbcdk/react-components
 > **Important:** The component library requires global styles to be imported once in your application.
 
 ```ts
-import '@dbcdk/react-components/styles.css'
+import '@dbcdk/react-components/themes/dbc.css'
 ```
 
 ---
@@ -55,14 +55,18 @@ paint, so the app avoids a flash of the wrong theme on first load.
 import { ReactNode } from 'react'
 
 import { ThemeScript } from '@dbcdk/react-components'
-import '@dbcdk/react-components/styles.css'
+import { TooltipProvider } from '@dbcdk/react-components/client'
 import '@dbcdk/react-components/themes/dbc.css'
 
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
   return (
-    <html lang="da">
-      <head><ThemeScript defaultTheme="dbc" /></head>
-      <body>{children}</body>
+    <html lang="da" suppressHydrationWarning>
+      <head>
+        <ThemeScript defaultTheme="dbc" />
+      </head>
+      <body>
+        <TooltipProvider>{children}</TooltipProvider>
+      </body>
     </html>
   )
 }
@@ -77,7 +81,7 @@ Example using `useTheme()` when you want to control the theme:
 ```tsx
 'use client'
 
-import { AppHeader, Button, useTheme } from '@dbcdk/react-components'
+import { AppHeader, Button, useTheme } from '@dbcdk/react-components/client'
 import { Moon, Sun } from 'lucide-react'
 
 export default function Header() {
@@ -114,13 +118,77 @@ export function ThemeBadge() {
 }
 ```
 
-`useGetActiveTheme()` is intentionally read-only and takes no options. It
-reports the current active theme state as established by `ThemeScript`,
-persisted storage, or another mounted theme control. `themeKey` is only set
-when both `theme` and `colorScheme` are resolved, and is otherwise `null`.
+`useGetActiveTheme()` is intentionally read-only. It reports the current
+active theme state as established by `ThemeScript`, persisted storage, or
+another mounted theme control. `themeKey` is only set when both `theme` and
+`colorScheme` are resolved, and is otherwise `null`. If your app passes a
+custom `storageKey`/`colorSchemeStorageKey` (see below), pass the same values
+here so it reads the right persisted state.
 
 ---
 
+### 5) Running multiple apps on the same origin
+
+`useTheme`, `useColorScheme`, `useGetActiveTheme`, `ThemeScript`,
+`ThemeButton`/`ThemeMenuSection`, and `ColorSchemeButton`/`ColorSchemeMenuSection`
+all persist to a cookie + `localStorage` under a shared default key. If two
+different apps built on this library run on the same origin (e.g. two
+products under one domain), they'll read and overwrite each other's theme
+selection by default.
+
+To keep them independent, give each app its own key via `storageKey` (product
+theme) and/or `colorSchemeStorageKey` (color scheme, `ThemeScript` only —
+elsewhere it's the `storageKey` option passed to `useColorScheme`):
+
+```tsx
+<ThemeScript
+  defaultTheme="dbc"
+  storageKey="my-app-theme"
+  colorSchemeStorageKey="my-app-color-scheme"
+/>
+```
+
+```tsx
+const { theme, switchTheme } = useTheme({ defaultTheme: 'dbc', storageKey: 'my-app-theme' })
+const { colorScheme, switchColorScheme } = useColorScheme('system', {
+  storageKey: 'my-app-color-scheme',
+})
+```
+
+Use the same keys everywhere in a given app (`ThemeScript`, the hooks, and
+any switcher components), or the values will resolve inconsistently.
+
+---
+
+## Package integration
+
+### Optional table integration
+
+`Table` and `useTableData` are available from `@dbcdk/react-components/client`
+without TanStack. Pass the same `ColumnItem<T>[]` to the table and the hook's
+`sorting.columns`; the hook uses each column's `accessor` and optional
+`sortFunction`. Use the column `id` as `sortBy`.
+
+Existing accessor-shaped columns (`accessorKey` / `accessorFn`), including typed
+TanStack columns, also work with the hook without introducing a TanStack dependency
+into core declarations. Explicit `columnComparators` override column-derived sorting.
+
+`useTableSettings`, `TableSettings`, and `TableSettingsMenuSection` are also
+available from `/client`, together with their types and
+`localStorageTableSettingsStorage`. They accept the normal Table's columns and
+honor `hidden` and `canHide`. Existing TanStack columns with `accessorKey`,
+`meta.hidden`, and `enableHiding` remain compatible.
+
+Install `@tanstack/react-table` for `TanstackTable` from `/tanstack`. Existing
+settings exports from `/tanstack` remain available as compatibility aliases.
+
+### Next.js configuration
+
+Add `transpilePackages: ['@dbcdk/react-components']` to your Next.js configuration
+so it processes the library's CSS Modules. Import interactive components and
+providers from `/client`. The packed-package integration check covers Next.js
+16.2.6 with webpack and React 19.2.4.
+
 ## Using Storybook
 
 Storybook is the primary documentation and exploration tool for this library.