@adminlte/react 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -5,6 +5,47 @@ All notable changes to **@adminlte/react** are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.0] - 2026-08-19
+
+### Changed
+
+- **AdminLTE core upgraded to 4.8.1** (from 4.3.1), covering core [4.4.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#440---2026-08-18), [4.4.1](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#441---2026-08-18), [4.5.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#450---2026-08-18), [4.6.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#460---2026-08-18), [4.7.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#470---2026-08-18), [4.8.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#480---2026-08-19) and [4.8.1](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#481---2026-08-19). What the bundled stylesheet (`@adminlte/react/css`) actually picks up:
+  - **The sidebar is now a flex column** (core 4.4.0, #6104). `.app-sidebar` gets `display: flex; flex-direction: column`, `.sidebar-brand` / `.sidebar-search` become `flex: 0 0 auto` and `.sidebar-wrapper` `flex: 1 1 auto; min-height: 0` — replacing the hard-coded `height: calc(100vh - (3.5rem + 1px))` that was repeated across every `sidebar-expand-*` breakpoint. The wrapper now fills whatever the sidebar leaves it instead of assuming a 3.5rem header, so a taller brand or an extra block above the menu no longer pushes the last items out of view. Verified in-browser on `/layout/fixed-sidebar`: wrapper 664 px inside a 720 px viewport, still scrolling under OverlayScrollbars.
+  - **`data-lte-print="plain"`** (core 4.7.0) — set it on `<html>` (or any container) for pages that should print as documents: no `(https://…)` suffix after external links, no outline around buttons. It works with nothing but the bundled CSS. Print also stopped drawing a black box around `.skip-link` and every `.nav-link` — the `border: 1px solid #000` rule is scoped to `.btn` again, which matters here because the sidebar prints by design.
+  - **`d-print-none` works on the shell** (core 4.6.0) — the print rules that force `display` on `.app-wrapper` and `.app-sidebar` are now `:not(.d-print-none)`, so Bootstrap's utility can hide the chrome from printed pages.
+  - **Skip-link hover contrast fix** (core 4.6.0) — `--bs-white` / `--bs-primary-emphasis` (a token Bootstrap never defines, so the background computed to transparent) swapped for `--bs-body-bg` / `--bs-primary-text-emphasis`, so the hovered skip link stays legible in both colour modes.
+  - The demo's `public/css/adminlte.rtl.css` was refreshed from core 4.8.1 to match.
+- **Palette attributes are available, opt-in.** Core's extended palettes ship as separate stylesheets that `@adminlte/react/css` deliberately does **not** bundle: `adminlte-colors.css` (4.4.0 — 14 generated colours as `--bs-*` tokens plus the `.bg-*` / `.text-bg-*` / `.text-*` / `.border-*` / `.link-*` / `.bg-gradient-*` / `.card-*` / `.callout-*` / `.direct-chat-*` families, ≈8 kB gzipped) and `adminlte-colors-v3.css` (4.5.0 — the same families for the 18 AdminLTE 3 colours at their original values, ≈9.5 kB gzipped). Install `admin-lte` and import the sheet you want next to the library CSS to get:
+  - **`data-lte-primary="teal"`** (4.6.0, with 4.8.1's pagination focus-ring fix) — promotes any palette colour to Bootstrap's `primary`, so buttons, links, pagination, form focus rings, progress bars, list groups and dropdowns follow it. Verified: `.btn-primary` goes `rgb(13, 110, 253)` → `rgb(18, 130, 125)` once the sheet is loaded, and does nothing without it.
+  - **`data-lte-contrast="aa"`** (4.8.0, v3 sheet only) — flips text to black on the eight v3 colours that miss WCAG AA (blue, cyan, fuchsia, green, lightblue, olive, pink, teal). Verified: `.text-bg-lightblue` goes white → black.
+
+### Added
+
+- Docs for both of the above: a **Core `<html>` attributes** table in the README's Styling section, and **The extended palette** / **Print** sections on the in-app `/docs/theming` page. They document core CSS you opt into yourself — no new component props or APIs.
+
+### Notes
+
+- **Core's restyled search fields don't reach this port.** 4.4.0 restyles `.navbar-search` and `.sidebar-search` into quiet pills (a new `--lte-search-field-*` variable set). `@adminlte/react` renders neither: the topbar search is a command-palette trigger button and the sidebar has no filter, so the new rules are inert here — nothing regressed, nothing gained.
+- **Core 4.4.1's ApexCharts dark-mode fix is a recipe, not shipped CSS** — it was applied to core's own demo pages. The `ApexChart` wrapper still passes `config` through verbatim and sets no Apex `theme`, so callers wanting dark tooltips pass `theme: { mode }` themselves.
+- Core's JavaScript is still irrelevant to this port — `@adminlte/react` never loads `adminlte.js` (see the 0.3.0 notes).
+- No dependency other than `admin-lte` changed; peer dependency ranges are untouched.
+- Verified: library build, type-check, lint (0 errors, 13 pre-existing warnings) and 19 unit tests; demo type-check and production build; all 67 Playwright route-smoke + a11y tests.
+
+## [0.4.0] - 2026-08-13
+
+### Changed
+
+- **AdminLTE core upgraded to 4.3.1.** The bundled stylesheet (`@adminlte/react/css`) picks up everything CSS-side from core [4.2.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#420---2026-08-06), [4.3.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#430---2026-08-10) and [4.3.1](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#431---2026-08-10): the rebuilt v3 ribbons (`.ribbon-wrapper` + `.ribbon`, with 4.3.1's corner-geometry fix), the v3 social/post widgets (`.user-block`, `.post`, `.widget-user`, `.widget-user-2`, `.description-block`), and the contrast fixes core's expanded axe gate caught. The RTL stylesheet in the demo was refreshed to match. Core's new JavaScript (SidebarSearch, the `initialize()`/`teardown()` lifecycle, server-rendered ColorMode resolution) does not affect this port — `@adminlte/react` never loads `adminlte.js` (see the 0.3.0 notes).
+- **All dependencies updated to their latest releases.** Two majors in the dev/demo toolchain: `apexcharts` 5.13 → **6.8** (the `ApexChart` wrapper needed no changes — its peer range was already `>=4.0.0` — and every chart page passes the Playwright suite against v6) and `@testing-library/jest-dom` 6 → 7; plus `jsdom` 29 → 30 and `@types/node` 25 → 26. Minors/patches: Next.js 16.3.0, React 19.2.8, ESLint 10.8.1, typescript-eslint 8.67, Vitest 4.1.10, Playwright 1.62.1, `@axe-core/playwright` 4.13, Tabulator 6.5.2, Tom Select 2.6.2, admin-lte 4.3.1.
+- **Demo CDN pins refreshed to match the installed versions:** apexcharts 6.8.0, tabulator-tables 6.5.2, tom-select 2.6.2, OverlayScrollbars 2.11 → 2.16, Source Sans 3 5.0.12 → 5.3.0. Bootstrap 5.3.8 and Bootstrap Icons 1.13.1 were already current. The copy-paste snippets on the docs Plugins page were brought up to the same versions (they had drifted as far back as apexcharts 3).
+- **Demo calendar migrated to FullCalendar 7** (from 6.1.20). v7 is a real migration, not a pin bump: the global bundle moved (`index.global.min.js` → `all/global.min.js`), CSS is no longer injected by the JS — the demo now loads `skeleton.css` plus the **classic** theme (the pre-v7 look) alongside the script — `Draggable` moved under the `FullCalendar.Interaction` namespace, and per-event `backgroundColor`/`borderColor`/`textColor` were renamed to `color`/`contrastColor`. Verified in-browser: month grid, toolbar views, per-event colors, and external drag-and-drop all work; v7's rewritten DOM (ARIA `grid`/`gridcell`, no tables) passes the a11y suite.
+
+### Notes
+
+- **TypeScript stays on 6.0.3.** TS 7.0 has shipped, but `typescript-eslint` (peer `>=4.8.4 <6.1.0`) refuses to run under it ("typescript-eslint does not support TS 7.0"), which would break the lint gate — core made the same call in its 4.2.0 release. `tsc --noEmit` itself passes on 7.0.2, so the hold can be lifted as soon as typescript-eslint supports TS 7.
+- Peer dependency ranges are unchanged — nothing consumers depend on narrowed.
+- Verified: library build, type-check, lint and 19 unit tests; demo type-check and production build; all 67 Playwright route-smoke + a11y tests.
+
 ## [0.3.0] - 2026-07-02
 
 ### Changed
@@ -171,5 +212,8 @@ Next.js App Router and React Server Components.
 - Heavy third-party libraries are never bundled eagerly — they load via dynamic
   `import()` inside the components that use them.
 
-[Unreleased]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.1.0...HEAD
+[0.5.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.4.0...v0.5.0
+[0.4.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.3.0...v0.4.0
+[0.3.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.2.0...v0.3.0
+[0.2.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/ColorlibHQ/adminlte-react/releases/tag/v0.1.0

package/README.md

@@ -9,14 +9,14 @@
 
 A modern React/Next.js component library for building admin dashboards and web applications with AdminLTE 4 styling and Bootstrap 5.3 — built for the Next.js App Router and React Server Components by [Colorlib](https://colorlib.com).
 
-**Status**: v0.3.0 (Early Release, AdminLTE core 4.1.0) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
+**Status**: v0.5.0 (Early Release, AdminLTE core 4.8.1) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
 
 <p align="center">
   <a href="https://adminlte.io/themes/next-react/">
-    <img alt="AdminLTE React dashboard — light theme" src="docs/screenshots/dashboard-light.png" width="49%">
+    <img alt="AdminLTE React dashboard — light theme" src="docs/screenshots/dashboard-light.webp" width="49%">
   </a>
   <a href="https://adminlte.io/themes/next-react/">
-    <img alt="AdminLTE React dashboard — dark theme" src="docs/screenshots/dashboard-dark.png" width="49%">
+    <img alt="AdminLTE React dashboard — dark theme" src="docs/screenshots/dashboard-dark.webp" width="49%">
   </a>
 </p>
 
@@ -40,7 +40,7 @@ A modern React/Next.js component library for building admin dashboards and web a
 <!-- ADMINLTE-ECOSYSTEM:END -->
 
 <p align="center">
-  <a href="https://adminlte.io/themes/next-react/"><img src=".github/preview.png" alt="AdminLTE 4 for React — dashboard preview" width="100%"></a>
+  <a href="https://adminlte.io/themes/next-react/"><img src=".github/preview.webp" alt="AdminLTE 4 for React — dashboard preview" width="100%"></a>
 </p>
 
 
@@ -318,6 +318,33 @@ All components use Bootstrap 5.3 utility classes. Customize via CSS variables or
 }
 ```
 
+### Core `<html>` attributes
+
+AdminLTE core 4.6–4.8 added three opt-in attributes you set on `<html>` yourself — there is no
+component prop for them, and they work with this port because they are plain CSS:
+
+| Attribute | What it does | Stylesheet |
+| --- | --- | --- |
+| `data-lte-print="plain"` | Prints the page as a document: no `(https://…)` suffix after external links, no outline around buttons. | bundled — `@adminlte/react/css` |
+| `data-lte-primary="teal"` | Promotes any palette colour to Bootstrap's `primary`, so buttons, links, pagination, form focus rings, progress bars, list groups and dropdowns follow it. | opt-in — `admin-lte/dist/css/adminlte-colors.css` (or `…-v3.css`) |
+| `data-lte-contrast="aa"` | Flips text to black on the eight AdminLTE 3 colours (blue, cyan, fuchsia, green, lightblue, olive, pink, teal) that otherwise miss WCAG AA. | opt-in — `admin-lte/dist/css/adminlte-colors-v3.css` |
+
+```tsx
+// app/layout.tsx — data-lte-print needs no extra CSS
+<html lang="en" data-lte-print="plain">
+```
+
+The extended palettes are **not** bundled with `@adminlte/react/css`; add `admin-lte` as a
+dependency and import the sheet you want next to the library CSS:
+
+```tsx
+import '@adminlte/react/css'
+import 'admin-lte/dist/css/adminlte-colors.css' // 14 extra colours + data-lte-primary
+```
+
+Bootstrap's `d-print-none` also works on `.app-wrapper` and `.app-sidebar` now, so you can hide
+the shell chrome from printed pages.
+
 ## Type Safety
 
 Full TypeScript support with exported types:
@@ -377,7 +404,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
   <tr>
     <td align="center" width="50%">
       <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
-        <img src="docs/screenshots/dashboardpack/apex.png" alt="Apex Dashboard — Next.js admin template with shadcn/ui" width="100%">
+        <img src="docs/screenshots/dashboardpack/apex.webp" alt="Apex Dashboard — Next.js admin template with shadcn/ui" width="100%">
       </a>
       <br>
       <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Apex Dashboard</strong></a>
@@ -386,7 +413,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
     </td>
     <td align="center" width="50%">
       <a href="https://dashboardpack.com/theme-details/zenith-shadcn/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
-        <img src="docs/screenshots/dashboardpack/zenith.png" alt="Zenith — minimal Next.js admin dashboard with shadcn/ui" width="100%">
+        <img src="docs/screenshots/dashboardpack/zenith.webp" alt="Zenith — minimal Next.js admin dashboard with shadcn/ui" width="100%">
       </a>
       <br>
       <a href="https://dashboardpack.com/theme-details/zenith-shadcn/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Zenith Dashboard</strong></a>
@@ -397,7 +424,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
   <tr>
     <td align="center" width="50%">
       <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
-        <img src="docs/screenshots/dashboardpack/haze.png" alt="Haze — Nuxt 4 admin dashboard with 92+ pages" width="100%">
+        <img src="docs/screenshots/dashboardpack/haze.webp" alt="Haze — Nuxt 4 admin dashboard with 92+ pages" width="100%">
       </a>
       <br>
       <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Haze</strong></a>
@@ -406,7 +433,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
     </td>
     <td align="center" width="50%">
       <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
-        <img src="docs/screenshots/dashboardpack/tailpanel.png" alt="TailPanel — React and Tailwind CSS admin panel" width="100%">
+        <img src="docs/screenshots/dashboardpack/tailpanel.webp" alt="TailPanel — React and Tailwind CSS admin panel" width="100%">
       </a>
       <br>
       <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>TailPanel</strong></a>
@@ -417,7 +444,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
   <tr>
     <td align="center" width="50%">
       <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
-        <img src="docs/screenshots/dashboardpack/admindek.png" alt="Admindek — feature-rich Bootstrap 5 dashboard" width="100%">
+        <img src="docs/screenshots/dashboardpack/admindek.webp" alt="Admindek — feature-rich Bootstrap 5 dashboard" width="100%">
       </a>
       <br>
       <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Admindek</strong></a>
@@ -426,7 +453,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
     </td>
     <td align="center" width="50%">
       <a href="https://dashboardpack.com/theme-details/svelteforge-premium/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
-        <img src="docs/screenshots/dashboardpack/svelteforge.png" alt="SvelteForge Premium — SvelteKit admin dashboard" width="100%">
+        <img src="docs/screenshots/dashboardpack/svelteforge.webp" alt="SvelteForge Premium — SvelteKit admin dashboard" width="100%">
       </a>
       <br>
       <a href="https://dashboardpack.com/theme-details/svelteforge-premium/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>SvelteForge Premium</strong></a>