@adminlte/react 0.1.0 → 0.4.0

package/CHANGELOG.md

@@ -1,11 +1,37 @@
 # Changelog
 
-All notable changes to **adminlte-react** are documented in this file.
+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).
 
-## [Unreleased]
+## [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
+
+- **AdminLTE core upgraded to 4.1.0.** The bundled stylesheet (`@adminlte/react/css`) picks up everything from core [4.0.4](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#404---2026-07-02) and [4.1.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#410---2026-07-02): ~6 KB gzip smaller (duplicate docs styles removed and the docs/FAQ styling split into core's separate `adminlte-docs.css`, which applications never needed), WCAG AA contrast fix for breadcrumb links on the content-header background, and the repaired callout link/code colors. The RTL stylesheet in the demo was refreshed to match.
+- Demo loads Bootstrap 5.3.8 from the CDN (was 5.3.7), matching the compiled core CSS.
+
+### Notes
+
+- Core 4.1.0's new JavaScript (ESM bundle, TypeScript declarations, component lifecycle, bundled ColorMode) does not affect this port: `@adminlte/react` re-implements all behavior natively in React and never loads `adminlte.js`. Do **not** load core's `adminlte.js` alongside this library — both implement the `data-lte-toggle` data API and cards would double-toggle. Theme preferences continue to interoperate with core via the shared `lte-theme` storage key.
+
+## [0.2.0] - 2026-06-10
 
 ### Added
 
@@ -40,6 +66,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- **Package renamed to `@adminlte/react`** (previously `adminlte-react`), published under the
+  `@adminlte` npm org. Update imports: `from '@adminlte/react'` and
+  `import '@adminlte/react/css'`.
 - **Build: per-file ESM output (RSC boundaries preserved).** The package is no longer a single
   bundled file stamped with a blanket `"use client"`. Each source module now compiles to its own
   `dist/` file, so the `'use client'` directive survives per component: server-component-authored
@@ -157,5 +186,7 @@ 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.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,37 +9,40 @@
 
 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.1.0 (Early Release) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
+**Status**: v0.4.0 (Early Release, AdminLTE core 4.3.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>
 
 **Available for your stack** — the same AdminLTE 4 dashboard, in the framework you know best:
 
-<p align="center">
+<!-- ADMINLTE-ECOSYSTEM:START -->
+<div align="center">
+  <a href="https://github.com/ColorlibHQ/AdminLTE"><img height="36" alt="HTML" src="https://img.shields.io/badge/HTML-0D6EFD?style=for-the-badge&logo=html5&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="React" src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="Next.js" src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Vue" src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Nuxt" src="https://img.shields.io/badge/Nuxt-00DC82?style=for-the-badge&logo=nuxt&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-angular"><img height="36" alt="Angular" src="https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-laravel"><img height="36" alt="Laravel" src="https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-symfony"><img height="36" alt="Symfony" src="https://img.shields.io/badge/Symfony-000000?style=for-the-badge&logo=symfony&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-django"><img height="36" alt="Django" src="https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-aspnet"><img height="36" alt="ASP.NET" src="https://img.shields.io/badge/ASP.NET-512BD4?style=for-the-badge&logo=dotnet&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-drupal"><img height="36" alt="Drupal" src="https://img.shields.io/badge/Drupal-0678BE?style=for-the-badge&logo=drupal&logoColor=white"></a>
+  <a href="https://docs.adminlte.io"><img height="36" alt="Docs" src="https://img.shields.io/badge/Docs-adminlte.io-0EA5E9?style=for-the-badge&logo=readthedocs&logoColor=white"></a>
+</div>
+<!-- ADMINLTE-ECOSYSTEM:END -->
+
+<p align="center">
+  <a href="https://adminlte.io/themes/next-react/"><img src=".github/preview.webp" alt="AdminLTE 4 for React — dashboard preview" width="100%"></a>
 </p>
 
-<p align="center"><sub>
-  Frameworks:
-  <a href="https://github.com/ColorlibHQ/adminlte-react">React</a> ·
-  <a href="https://github.com/ColorlibHQ/adminlte-react">Next.js</a> ·
-  <a href="https://github.com/ColorlibHQ/adminlte-vue">Vue</a> ·
-  <a href="https://github.com/ColorlibHQ/adminlte-vue">Nuxt</a> ·
-  <a href="https://github.com/ColorlibHQ/adminlte-laravel">Laravel</a> ·
-  <a href="https://github.com/ColorlibHQ/adminlte-django">Django</a>
-</sub></p>
 
 > **Documentation:** Full guides and an API reference for every component, hook, and
 > context live in the demo app under `/docs`. Run `pnpm demo` and open
@@ -60,9 +63,9 @@ A modern React/Next.js component library for building admin dashboards and web a
 ## Installation
 
 ```bash
-npm install adminlte-react
+npm install @adminlte/react
 # or
-pnpm add adminlte-react
+pnpm add @adminlte/react
 ```
 
 ### Peer Dependencies
@@ -104,7 +107,7 @@ for the full matrix.
 
 ```tsx
 // app/layout.tsx
-import 'adminlte-react/css'
+import '@adminlte/react/css'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import './globals.css'
 
@@ -135,7 +138,7 @@ export default function RootLayout({ children }) {
 
 ```tsx
 // app/(dashboard)/layout.tsx
-import { DashboardLayout } from 'adminlte-react'
+import { DashboardLayout } from '@adminlte/react'
 import { menuItems } from '@/lib/menu'
 
 export default function Layout({ children }) {
@@ -156,7 +159,7 @@ export default function Layout({ children }) {
 
 ```ts
 // lib/menu.ts
-import type { MenuNode } from 'adminlte-react'
+import type { MenuNode } from '@adminlte/react'
 
 export const menuItems: MenuNode[] = [
   {
@@ -189,7 +192,7 @@ export const menuItems: MenuNode[] = [
 
 ```tsx
 // app/(dashboard)/page.tsx
-import { AppContent, SmallBox, Card, Progress } from 'adminlte-react'
+import { AppContent, SmallBox, Card, Progress } from '@adminlte/react'
 
 export default function Dashboard() {
   return (
@@ -289,7 +292,7 @@ Standalone hooks:
 
 ```tsx
 'use client'
-import { useSidebarContext, useColorModeContext } from 'adminlte-react'
+import { useSidebarContext, useColorModeContext } from '@adminlte/react'
 
 function Toolbar() {
   const { toggle } = useSidebarContext()
@@ -320,7 +323,7 @@ All components use Bootstrap 5.3 utility classes. Customize via CSS variables or
 Full TypeScript support with exported types:
 
 ```tsx
-import type { DashboardLayoutProps, MenuNode, BootstrapTheme } from 'adminlte-react'
+import type { DashboardLayoutProps, MenuNode, BootstrapTheme } from '@adminlte/react'
 
 const props: DashboardLayoutProps = {
   menuItems: [],
@@ -374,7 +377,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>
@@ -383,7 +386,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>
@@ -394,7 +397,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>
@@ -403,7 +406,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>
@@ -414,7 +417,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>
@@ -423,7 +426,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>