@materialui-reactjs/admin 1.0.6 → 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,292 @@
+# Changelog
+
+All notable changes to this project 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).
+
+## [2.4.0] - 2026-09-27
+
+Ba lỗi chặn publish, tìm ra bằng cách **pack thật rồi cài vào một project sạch**
+và typecheck với `skipLibCheck: false`. `npm run typecheck` bên trong repo không
+bắt được loại lỗi này — nó chỉ chứng minh `.d.ts` nhất quán với source.
+
+### Fixed
+
+- **Kiểu dùng chung không lấy được từ bất kỳ entry point nào.** `MenuPermissionItem`
+  (`types/Menu`) và `TableService` (`CardTable.types`) tồn tại nhưng không được
+  re-export: consumer muốn type object `service` mà `CardTable` yêu cầu thì buộc
+  phải tự viết lại cấu trúc. Đã export từ `src/index.ts` và `meta/index.ts`;
+  đồng thời thêm `hook` + kiểu của `utils` vào entry chính.
+- **`Validator.d.ts` làm vỡ typecheck của consumer.** File này để lộ
+  `JQuery<HTMLInputElement>` và `JQuery.Promise<...>` — `@types/jquery` v4 đã bỏ
+  cả hai. Thay bằng alias nội bộ `Jq`/`JqPromise`. Lưu ý: phải ép kiểu ngay tại
+  `$.Deferred()`, nếu để suy ra thì `dts` vẫn ghi ra `JQuery.Promise`.
+- **`ModalForm.d.ts` rò rỉ kiểu của `bootstrap`**, mà `@types/bootstrap` không
+  được khai ở đâu. Consumer phải tự cài thêm chỉ để typecheck. Thay bằng
+  interface tối thiểu `ModalInstance { hide(); show() }`.
+- Thêm `*.tgz` vào `.gitignore` (artifact `npm pack` dễ bị commit nhầm).
+- Thêm override `scripts/**` cho ESLint — đó là code Node, không phải browser.
+
+### Added
+
+- **`npm run test:consumer`** — consumer smoke test: `npm pack`, cài tarball vào
+  thư mục tạm, cài peer deps, rồi `tsc --noEmit` với `skipLibCheck: false` trên
+  một file import **mọi** subpath trong `exports` cùng các kiểu dùng chung.
+  Chạy trong CI ngay sau `Build`.
+
+    Đây là gate chống lại đúng loại bug đã xảy ra ở bản này. Ba lỗi trên đều
+    lọt qua mọi gate sẵn có và chỉ lộ ra khi dùng thật; giờ nó thành check tự động
+    thay vì kiến thức miễng phí trong đầu.
+
+## [2.3.0] - 2026-09-27
+
+Test coverage cho nhóm component form, rồi mới xoá `any` — làm đúng thứ tự để
+mọi thay đổi hành vi đều có test bảo vệ.
+
+### Fixed
+
+- **`BoxAddRow` rơi vào vòng lặp render vô hạn khi không truyền `data`.**
+  Giá trị mặc định `data = []` tạo một mảng **mới ở mỗi lần render**, nên
+  `useEffect([data])` luôn thấy tham chiếu khác → gọi `setRows` → render lại →
+  lặp lại. Component này sẽ **ăn 100% CPU** ngay khi dùng mà không truyền
+  `data`. Sửa bằng hằng `EMPTY_ROWS` ở module scope.
+  _(Phát hiện khi test chạy: process Node quay 330s CPU không dừng.)_
+- **`BoxAddRow.addRow` đọc `rows` từ closure** — hai lần bấm trong cùng một batch
+  sẽ cùng thấy `rows` cũ và dòng thứ hai ghi đè dòng thứ nhất. Dùng `rowsRef`
+  để luôn đọc bản mới nhất, thay vì `setRows(prev => ...)` (bên trong updater
+  không được gọi `onChange` vì updater là hàm thuần, React có thể gọi lại).
+- `SelectAddRowBox`: `detailRow` là `null`/`undefined` thì `setDetails` nhận
+  `null` vào state mà khai báo là mảng.
+
+### Changed
+
+- Xoá `any` trong các component form đã có test: `CheckTreeBox` (thêm export
+  `TreeNode`), `AdvancedMultiSelect` (thêm `SelectValue`), `SelectAddRowBox`
+  (thêm export `DetailRow`, `rendeRowData` có chữ ký đầy đủ), `EfFile`, `DateInput`,
+  `BoxAddRow` (thêm export `Row` + helper `langValue`).
+- `hook/common.ts` thêm `FormChangeHandler` — 8 component form dùng chung kiểu
+  này thay cho `(e: any) => void`.
+
+### Tests
+
+Thêm 4 file test cho `BoxAddRow`, `AdvancedMultiSelect`, `CheckTreeBox`,
+`SelectAddRowBox`, `DateInput`, `DateTimeInput`, `EfFile`.
+MUI X DatePicker và elFinder (jQuery) được mock — chỉ test logic của component ta.
+
+### Metrics
+
+|                     |  Trước |        Sau |
+| ------------------- | -----: | ---------: |
+| Coverage statements | 60.65% | **69.16%** |
+| Coverage lines      | 63.06% | **71.49%** |
+| Coverage branch     | 54.39% | **63.04%** |
+| Test files          |     29 |     **32** |
+| `any` trong `src`   |    230 |    **200** |
+| ESLint warnings     |    348 |    **312** |
+
+Còn 2 file runtime chưa có test: `Editor.tsx` (CKEditor + elFinder) và
+`SelectAddRowBoxAdvanced.tsx`.
+
+## [2.2.0] - 2026-09-27
+
+Type-safety pass focused on the **public API**. Runtime behaviour is unchanged.
+
+### Added
+
+- **`src/hook/common.ts`** — nơi khai báo các kiểu và hàm dùng chung cho mọi
+  trang CRUD: `BasePropsType`, `FormValue`, `FormScalar`, `CrudItem`, `ItemState`,
+  `getItemId()`, `handleHookChange()`. Bốn file hook (`detail`, `fields`,
+  `import`, `update`) trước đây khai báo **bốn bản `PropsType` giống hệt** với
+  `menuData: any[]` / `user: any`, và ba bản `handleHookChange` copy-paste.
+- `getItemId()` — đọc `id` an toàn khi `item` là sentinel `false` (nhánh 404).
+  `item?.id` không dùng được vì optional chaining không xử lý `false`.
+- `ApiResponse<T>` + **function overloads** cho `callFetchApiToken`. Khi `isTry`
+  là `true` (mặc định) hàm luôn ném lỗi và **không bao giờ** trả `false`, nên
+  kiểu trả về là `ApiResponse<T>`; chỉ khi truyền `isTry: false` mới phải hẹp
+  kiểu trước khi đọc `.data`. Trước đây `any` che mất đúng yêu cầu này.
+- `DateInput`, `StatusOption`, `getStatus()` — định nghĩa cho các helper định
+  dạng ngày và bảng trạng thái.
+- `ModalFormProps` / `ModalFormBody` được export (trước: `ModalProps` nội bộ,
+  không ai dùng được).
+
+### Changed
+
+- **BREAKING (types only):** `ModalForm` đổi từ 9 prop `any` sang kiểu cụ thể
+  (`RefObject<HTMLDivElement | null>`, `FormValue`, `React.CSSProperties`...).
+  `HeaderUpdate.itemId` thành tuỳ chọn — trang "thêm mới" không có bản ghi.
+- `CusRoute.addGS` nhận `RouteElement = ReactNode | false` thay vì `any = false`.
+- `UpdateDetail.render` / `UpdateTableDetail.render`: bỏ vòng bảo vệ
+  `((id && item) || !id) && (...)` trả về `false` — nhánh đó đã bị `Error404`
+  ở trên bắt hết, và làm kiểu `render()` không còn hợp lệ.
+
+### Fixed
+
+- Gộp 3 bản trùng lặp: `handleHookChange` (3 file → 1), các hàm trạng thái
+  `getActiveStatus` / `getPublishStatus` / `getTrueFlaseStatus` (3 bản gần như
+  giống hệt → `getStatus`), và 4 hàm `formatDate*` (gom phần tách ngày vào
+  `dateParts`). `TableFormBody` nay re-export từ `ModalForm` thay vì định nghĩa
+  lại — trước đó chữ ký có thể lệch nhau.
+
+### Metrics
+
+`any` trong `src`: **289 → 230** (−20%). ESLint warnings: **420 → 348**.
+Không đổi hành vi runtime; 29/29 test file vẫn pass.
+
+Phần còn lại tập trung ở `Validator.ts` (port jQuery, bản chất động) và các
+component form (`SelectBox`, `CusForm`, `AdvancedMultiSelect`, `Editor`...).
+
+## [2.1.1] - 2026-09-27
+
+### Fixed
+
+- **`dist/assets/css/index.css` phình từ 1.25 MB lên 27.7 MB.** Bản 2.1.0 bật
+  `@import` của `fontawesome-642-pro/css/all.min.css`; file đó khai báo 9 font
+  family × (ttf + woff2) và Vite 8 (Rolldown) gom tất cả thành data URI
+  base64 — **26.46 MB nhúng trong CSS**. Mọi consumer
+  `import "@materialui-reactjs/admin/style.css"` đều phải tải toàn bộ 26 MB đó.
+
+    Plugin `copy-fontawesome` giờ gỡ các data URI đó sau khi build, thay bằng
+    `url("../../fontawesome/webfonts/<file>")` trỏ tới bản font đã được copy sẵn.
+    Ánh xạ dựa trên **nội dung** file (khớp base64) nên không phụ thuộc thứ tự hay
+    tên file; data URI nào không khớp sẽ được giữ nguyên và build in cảnh báo.
+
+    Kết quả: `index.css` **27.70 MB → 1.65 MB**, tổng `dist` **42.76 MB → 16.71 MB**.
+    Phần còn lại (63 data URI) là sprite PNG/GIF nhỏ của elFinder và
+    `material-icons.woff2` — inline là hành vi mong muốn.
+
+    Ghi chú: `build.assetsInlineLimit` **không dùng được** ở đây; option này không
+    được gọi khi Vite 8/Rolldown xử lý `url()` trong CSS (đã thử cả dạng số lẫn
+    dạng hàm). Nếu bản Vite sau này hỗ trợ, có thể bỏ bước hậu kỳ này.
+
+## [2.1.0] - 2026-09-27
+
+Type-safety pass plus a test-suite expansion. No new features; the public API
+surface is the same, but several public **types** are now stricter, which can
+surface compile errors in consumer code that was relying on `any`.
+
+### Added
+
+- **Formatting is now enforced.** `npm run verify` runs
+  `format:check → lint → typecheck → test`, and CI gained a dedicated `Format`
+  step. Prettier was previously configured but never gated — 78 source files
+  failed `prettier --check`, and 36 of 94 mixed tabs and spaces. Everything is
+  now formatted, so `format:check` is a real gate rather than decoration.
+- **New shared type modules.** `src/types/Menu.ts` (`MenuPermissionItem`) and
+  `src/components/meta/CardTable.types.ts` (`TableService`, `TableOptions`,
+  `TableColumnConfig`, `TableFilterConfig`, `TableFormBody`) replace inline
+  `any`-typed shapes.
+- Test coverage for `src/components` and the hook/util helpers that previously
+  had none: `SingleIndex`, `SingleDetail` / `SingleUpdateDetail` /
+  `SingleUpdateTableDetail`, `SingleFields` / `SingleImport`, `CusForm`,
+  `SelectBox` / `SelectMBox`, `PImage` / `EfImage` / `EfImages` / `UDragFile`,
+  `Sidebar` / `SidebarItem`, all five ECharts wrappers, `ModalForm`, `NavTabs`,
+  `TopNavbar`, `BtnGroup`, `HeaderDetail`, `Head`, `PDFEmbed`, `SortableItem`,
+  `CusRoute`, and the `detail` / `fields` / `update` hooks. Overall statement
+  coverage goes from **32% to 61%** (190 → 386 tests).
+
+### Fixed
+
+- **`handleDeleteOne` and `CardTable.handleDelete` used `GET` to delete.**
+  `GET` is defined as a safe, idempotent method, so a crawler, browser
+  prefetch, or proxy cache could trigger a destructive request. Both now send
+  `DELETE`.
+- **`CardTable.handleChange` stored a `Promise` as the table filter.**
+  `handleParamChange` is `async` but its result was not awaited, so
+  `dataTb.filter` became a `Promise` object and every subsequent request
+  (pagination, search) sent the wrong query.
+- **`SearchBox` read a literal `filter?.field` instead of `filter?.[field]`.**
+  Because the property name was a string literal, search inputs never showed
+  the value they were filtering by.
+- **`RatioKeyVal` generated radio `id`s with `Math.random() % 10`.** With only
+  ten possible values, two radios in a group could collide, so `<label
+htmlFor>` pointed at the wrong input and clicking a label selected the wrong
+  option; the id also changed on every re-render. Now uses `useId()`.
+- **Empty `FileList` produced `undefined` instead of `null`.**
+  `files ? files[0] : null` kept `undefined` for an empty (but truthy)
+  `FileList`, and `JSON.stringify` then dropped the key entirely from the
+  request payload. Now `files?.[0] ?? null` in the `detail`, `fields` and
+  `update` hooks.
+- **`SingleFields` could emit an unhandled promise rejection.** The API call
+  lives in a `setState` callback, which React does not await, so the error
+  bypassed the `try/catch` in `initDidMount` entirely. It is now caught at the
+  call site and surfaced through `showSweetAlertError`.
+
+### Changed
+
+- **BREAKING (types only):** public prop/state types no longer carry an
+  `[key: string]: any` index signature. `PropsType`, `StateType` and
+  `StateTable` in `hook/index`, `CardTableProps`, and `SearchBoxProps` are
+  declared field by field, and `SpinnerLoader`'s `loading` prop is now
+  optional. Consumer code that passed extra, undeclared props will no longer
+  compile.
+- **BREAKING (types only):** `CardTable`'s `frmBody` is now typed as a render
+  _function_ — `TableFormBody = (formData, onChange) => ReactNode` — which is
+  how `ModalForm` has always invoked it (`frmBody(formData, handleChange)`).
+  Passing a plain element crashed with "frmBody is not a function"; existing
+  tests missed it because they stubbed `ModalForm` out.
+- `checkPermission` and `menuData` are typed with `MenuPermissionItem`, which
+  `MenuItem` now extends. `MenuItem.code` accepts `number | string` because the
+  function compares with `Number()` to tolerate string codes from the API.
+
+### Removed
+
+- `src/components/meta/Pdfviewer.tsx` — 330 lines that were **entirely
+  commented out** and not referenced by any export. It was still typechecked
+  and lint-checked on every run for no benefit.
+
+## [2.0.0] - 2026-09-27
+
+### Added
+
+- **CommonJS build.** `build.lib.formats` now emits both `es` and `cjs`.
+  Every subpath export gains a `require` condition, so the package works in
+  CommonJS toolchains (Jest default resolver, webpack 4, legacy Node).
+  `main` now points to `./dist/index.cjs`.
+- `exports["./package.json"]` — lets tools such as `jest-resolver` read package
+  metadata through the exports map.
+- `LICENSE` (MIT) and this changelog are now published in the tarball.
+- ESLint (flat config) + Prettier, wired into `npm run verify`.
+- GitHub Actions CI running lint → typecheck → test → build.
+- Regression tests for `CardTable` pagination and `SingleUpdate` 403/404
+  branches (previously untested).
+
+### Fixed
+
+- **DECLARED `ckeditor5` as a dependency.** `Editor.tsx` imports
+  `ckeditor5/ckeditor5.css`, but `ckeditor5` was never declared in
+  `package.json` — it only resolved because it was hoisted from
+  `@ckeditor/ckeditor5-react` → `@ckeditor/ckeditor5-integrations-common`.
+  A transitive bump or removal upstream would have broken `Editor` builds for
+  every consumer. Now declared as an **optional** peer dependency plus a dev
+  dependency for building/testing.
+- **`CardTable` pagination no longer stalls.** `handleClickPage` set the new
+  page filter but never re-fetched, and the mount effect is guarded by
+  `didFetch.current` — so changing page left the previous rows on screen.
+  `fetchData` now accepts an explicit filter to avoid the stale-closure read of
+  `dataTb.filter`.
+- `package-lock.json` is no longer git-ignored, so builds are reproducible.
+- `src/service.ts` removed from `.gitignore` (it is source code, not a secret).
+
+### Changed
+
+- **BREAKING: CSS is no longer auto-injected into the main entry.** The main
+  entry previously imported a ~1.4 MB stylesheet (material-dashboard,
+  jquery-ui, elFinder, icon fonts), which every consumer downloaded regardless
+  of which components they used.
+
+    ```diff
+    - import "@materialui-reactjs/admin";
+    + import "@materialui-reactjs/admin";
+    + import "@materialui-reactjs/admin/style.css";
+    ```
+
+    The emitted file path (`dist/assets/css/index.css`) is unchanged, so the
+    documented `@materialui-reactjs/admin/style.css` subpath keeps working.
+
+- `engines.node` relaxed from `>=24` to `>=20.19.0` (Vite 8's actual floor), so
+  the package no longer excludes Node 20/22 LTS.
+
+## [1.0.6]
+
+- Initial public release.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 @materialui-reactjs/admin contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.