chore(button-component): update vite to v7

- `@vitejs/plugin-react` added support for `vite@v7` since `v4.5.2`.
  - required adding `react` as peer dependency of `@lib/components` to prevent
    resolve import errors of `react/jsx-runtime` on `build`
- `typescript` to `v5.5+` due to changes of `@vitejs/plugin-react` in
  `v5.0.0`
  - similar issue: vitejs/vite-plugin-react#985
  - change: vitejs/vite-plugin-react@b9efa3f#diff-d1f942b9a74f586a80bca3733150b7c692a6460e8350bc19cbbad1d53f95b356
- `sass` to `1.70.0+` due to changes in peer deps of `vite@v6.3.10`
  - pr: vitejs/vite#19979
  - `@use` rule instead of `@import`. `@import` is deprecated since `v1.80.0`

Author: Hdoc1509

TODO.md

@@ -14,14 +14,14 @@
   - `todo-app`
   - `windbnb`
 
-  `pnpm` version is set in `packageManager` or root `package.json` and
+  `pnpm` version is set in `packageManager` of root `package.json` and
   `node` version is set in root `.nvmrc`.
 
-## Vite
+- update `tsconfig.*.json` files to match [create-vite@8.2.0][create-vite@8.2.0]
+- update `eslint` to `v9` and config files to match [create-vite@8.2.0][create-vite@8.2.0]
+- update `vite` to `v7`:
+  - update `@vitejs/plugin-react` to support `vite@v7`
+  - update `astro` and related packages to support `vite@v7`
+- migrate content-only apps to `astro`. pre-render content to static HTML.
 
-### Update to `v7`
-
-### Legacy
-
-- update `@vitejs/plugin-react` to support `vite@v7`
-- update `astro` and related packages to support `vite@v7`
+[create-vite@8.2.0]: https://github.com/vitejs/vite/tree/create-vite%408.2.0/packages/create-vite/template-react-ts

legacy/button-component/lib/css/styles.scss

@@ -1,6 +1,6 @@
-@import "button.scss";
-@import "button-outline.scss";
-@import "button-text.scss";
+@use "button.scss";
+@use "button-outline.scss";
+@use "button-text.scss";
 
-@import "sizes.scss";
-@import "colors.scss";
+@use "sizes.scss";
+@use "colors.scss";

legacy/button-component/package.json

@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@hrc/type-utils": "catalog:",
-    "@vitejs/plugin-react": "catalog:",
-    "sass": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:"
+    "@vitejs/plugin-react": "catalog:vite7",
+    "sass": "catalog:vite7",
+    "typescript": "catalog:vite7",
+    "vite": "catalog:vite7"
   },
   "engines": {
     "node": ">=18",

libs/components/package.json

@@ -8,5 +8,8 @@
     "@hrc/material-icons": "catalog:",
     "@hrc/toggle-theme": "catalog:",
     "@lib/sass-utils": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "catalog:"
   }
 }