chore: up packages (#1464)

* chore: up packages
fix(ui): broken tests after upgrade
fix(docs): mdx imports

* chore: up some `storybook` namespace packages

* rebuild lock file; up `turbo`

Author: SutuSebastian

.github/actions/setup/action.yml

@@ -7,7 +7,7 @@ runs:
     - name: Setup Bun
       uses: oven-sh/setup-bun@v1
       with:
-        bun-version: 1.1.14
+        bun-version: 1.1.21
 
     - name: Setup Node
       uses: actions/setup-node@v4

apps/storybook/package.json

@@ -26,11 +26,11 @@
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.3.1",
-    "autoprefixer": "10.4.19",
-    "postcss": "8.4.38",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.41",
     "storybook": "8.1.10",
-    "tailwindcss": "3.4.4",
-    "typescript": "5.4.5",
-    "vite": "5.3.1"
+    "tailwindcss": "3.4.7",
+    "typescript": "5.5.4",
+    "vite": "5.3.5"
   }
 }

apps/web/components/mdx.tsx

@@ -1,4 +1,4 @@
-import { theme } from "flowbite-react";
+import { Alert, theme } from "flowbite-react";
 import type { MDXComponents } from "mdx/types";
 import { getMDXComponent } from "next-contentlayer2/hooks";
 import Link from "next/link";
@@ -9,6 +9,7 @@ import { IntegrationGuides } from "./quickstart/integration-guides";
 import { TextDivider } from "./text-divider";
 
 const components: MDXComponents = {
+  Alert,
   TextDivider,
   IntegrationGuides,
   a: ({ ref, href = "", ...props }) => {

apps/web/content/docs/customize/theme.mdx

@@ -3,10 +3,7 @@ title: React Theme - Flowbite
 description: Learn how you can change the Tailwind CSS classes used by the components in Flowbite React
 ---
 
-import { Alert } from "flowbite-react/components/Alert";
-import { HiInformationCircle } from "react-icons/hi";
-
-<Alert color="warning" icon={HiInformationCircle} className="mb-6">
+<Alert color="warning" className="mb-6">
   This feature is highly experimental. In the future, it could be deprecated or even suffer several changes.
 </Alert>
 

apps/web/package.json

@@ -14,23 +14,23 @@
     "typecheck": "contentlayer2 build && tsc --noEmit"
   },
   "dependencies": {
-    "contentlayer2": "0.4.6",
+    "contentlayer2": "0.5.0",
     "flowbite-react": "workspace:*",
     "react-icons": "5.2.1",
-    "tailwind-merge": "2.3.0"
+    "tailwind-merge": "2.4.0"
   },
   "devDependencies": {
-    "@docsearch/react": "3.6.0",
+    "@docsearch/react": "3.6.1",
     "@types/mdx": "2.0.13",
     "@types/prismjs": "1.26.4",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "autoprefixer": "10.4.19",
-    "eslint-config-next": "14.2.4",
+    "autoprefixer": "10.4.20",
+    "eslint-config-next": "14.2.5",
     "markdown-toc": "1.2.0",
-    "next": "14.2.4",
-    "next-contentlayer2": "0.4.6",
-    "postcss": "8.4.38",
+    "next": "14.2.5",
+    "next-contentlayer2": "0.5.0",
+    "postcss": "8.4.41",
     "prismjs": "1.29.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -39,7 +39,7 @@
     "rehype-prism-plus": "2.0.0",
     "rehype-slug": "6.0.0",
     "sharp": "0.33.4",
-    "tailwindcss": "3.4.4",
-    "typescript": "5.4.5"
+    "tailwindcss": "3.4.7",
+    "typescript": "5.5.4"
   }
 }

bun.lockb

@@ -31,20 +31,20 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.5.0",
-    "@changesets/cli": "2.27.5",
-    "@ianvs/prettier-plugin-sort-imports": "4.2.1",
-    "@types/bun": "1.1.4",
-    "@types/web": "0.0.149",
+    "@changesets/cli": "2.27.7",
+    "@ianvs/prettier-plugin-sort-imports": "4.3.1",
+    "@types/bun": "1.1.6",
+    "@types/web": "0.0.153",
     "clean-package": "2.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-tailwindcss": "3.17.3",
-    "npm-check-updates": "16.14.20",
-    "prettier": "3.3.2",
-    "prettier-plugin-packagejson": "2.5.0",
+    "eslint-plugin-tailwindcss": "3.17.4",
+    "npm-check-updates": "17.0.3",
+    "prettier": "3.3.3",
+    "prettier-plugin-packagejson": "2.5.1",
     "prettier-plugin-tailwindcss": "0.6.5",
-    "rimraf": "5.0.7",
-    "turbo": "2.0.4"
+    "rimraf": "6.0.1",
+    "turbo": "2.0.12"
   },
-  "packageManager": "[email protected].14"
+  "packageManager": "[email protected].21"
 }

package.json

@@ -46,14 +46,14 @@
   "dependencies": {
     "@clack/prompts": "0.7.0",
     "arg": "5.0.2",
-    "execa": "9.2.0",
+    "execa": "9.3.0",
     "ora": "8.0.1",
     "picocolors": "1.0.1",
-    "rimraf": "5.0.7"
+    "rimraf": "6.0.1"
   },
   "devDependencies": {
-    "tsup": "8.1.0",
-    "typescript": "5.4.5"
+    "tsup": "8.2.4",
+    "typescript": "5.5.4"
   },
   "engines": {
     "node": ">=18.0.0"

packages/cli/package.json

@@ -21,7 +21,16 @@ module.exports = {
       parser: "@typescript-eslint/parser",
       extends: ["plugin:@typescript-eslint/recommended"],
       rules: {
-        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-unused-expressions": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          {
+            argsIgnorePattern: "^_",
+            caughtErrorsIgnorePattern: "^_",
+            destructuredArrayIgnorePattern: "^_",
+            varsIgnorePattern: "^_",
+          },
+        ],
       },
     },
   ],
@@ -42,9 +51,10 @@ module.exports = {
   ignorePatterns: ["dist"],
   rules: {
     "no-undef": "off",
-    "react/prop-types": "off",
+    "no-unused-vars": "off",
     "react/display-name": "off",
     "react/no-unescaped-entities": "off",
+    "react/prop-types": "off",
     "tailwindcss/classnames-order": "off",
     "tailwindcss/enforces-shorthand": "off",
   },

packages/ui/.eslintrc.cjs

@@ -58,34 +58,34 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@floating-ui/core": "1.6.2",
-    "@floating-ui/react": "0.26.17",
+    "@floating-ui/core": "1.6.6",
+    "@floating-ui/react": "0.26.21",
     "classnames": "2.5.1",
     "debounce": "2.1.0",
-    "flowbite": "2.3.0",
+    "flowbite": "2.5.1",
     "react-icons": "5.2.1",
-    "tailwind-merge": "2.3.0"
+    "tailwind-merge": "2.4.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.13.1",
-    "@typescript-eslint/parser": "7.13.1",
+    "@typescript-eslint/eslint-plugin": "8.0.1",
+    "@typescript-eslint/parser": "8.0.1",
     "@vitejs/plugin-react": "4.3.1",
-    "@vitest/coverage-v8": "1.6.0",
-    "eslint-plugin-react": "7.34.3",
+    "@vitest/coverage-v8": "2.0.5",
+    "eslint-plugin-react": "7.35.0",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vitest": "0.5.4",
     "fast-glob": "3.3.2",
-    "jsdom": "24.1.0",
-    "rollup": "4.18.0",
+    "jsdom": "24.1.1",
+    "rollup": "4.20.0",
     "rollup-plugin-esbuild": "6.1.1",
     "rollup-plugin-use-client": "1.4.0",
-    "typescript": "5.4.5",
-    "vitest": "1.6.0"
+    "typescript": "5.5.4",
+    "vitest": "2.0.5"
   },
   "peerDependencies": {
     "react": ">=18",

packages/ui/package.json

@@ -26,8 +26,8 @@ describe("Components / Button group", () => {
           <Button>Two</Button>
           <Button>Three</Button>
         </Button.Group>,
-      ),
-        expect(group()).toHaveAccessibleName("My group");
+      );
+      expect(group()).toHaveAccessibleName("My group");
     });
   });
 
@@ -61,8 +61,8 @@ describe("Components / Button group", () => {
           </Button.Group>
           <Button>Outside</Button>
         </>,
-      ),
-        await user.tab();
+      );
+      await user.tab();
 
       expect(buttons()[0]).toHaveFocus();
 

packages/ui/src/components/Button/ButtonGroup.spec.tsx

@@ -3,10 +3,11 @@ import { describe, expect, it } from "vitest";
 import { Flowbite, type CustomFlowbiteTheme } from "../Flowbite";
 import { Checkbox } from "./Checkbox";
 
-describe.concurrent("Components / Checkbox", () => {
-  describe.concurrent("A11y", () => {
+describe("Components / Checkbox", () => {
+  describe("A11y", () => {
     it('should have role="checkbox" by default', () => {
-      const checkbox = render(<Checkbox />).getByRole("checkbox");
+      render(<Checkbox />);
+      const checkbox = screen.getByRole("checkbox");
 
       expect(checkbox).toBeInTheDocument();
     });
@@ -27,9 +28,8 @@ describe.concurrent("Components / Checkbox", () => {
         </Flowbite>,
       );
 
-      expect(checkbox()).toHaveClass("bg-yellow-400 dark:bg-yellow-40");
+      const checkbox = screen.getByRole("checkbox");
+      expect(checkbox).toHaveClass("bg-yellow-400 dark:bg-yellow-40");
     });
   });
 });
-
-const checkbox = () => screen.getByRole("checkbox");

packages/ui/src/components/Checkbox/Checkbox.spec.tsx

@@ -24,7 +24,7 @@ describe("Components / Datepicker", () => {
     await userEvent.click(screen.getByRole("textbox"));
     await userEvent.click(screen.getAllByText(anotherDay)[0]);
 
-    expect((screen.getByRole("textbox") as HTMLInputElement).value?.includes(`${anotherDay}`)).toBeTruthy();
+    expect((screen.getByRole("textbox") as HTMLInputElement).value.includes(`${anotherDay}`)).toBeTruthy();
   });
 
   it("should reset to today's date when Clear button is clicked", async () => {
@@ -107,7 +107,7 @@ describe("Components / Datepicker", () => {
     await userEvent.click(titleButton);
 
     const earlierDecadeButton = screen.getByText("2010");
-    expect(earlierDecadeButton).instanceOf(HTMLButtonElement);
+    expect(earlierDecadeButton).toBeInstanceOf(HTMLButtonElement);
     expect(earlierDecadeButton).toBeEnabled();
   });
 
@@ -124,7 +124,7 @@ describe("Components / Datepicker", () => {
     await userEvent.click(titleButton);
 
     const laterDecadeButton = screen.getByText("2030");
-    expect(laterDecadeButton).instanceOf(HTMLButtonElement);
+    expect(laterDecadeButton).toBeInstanceOf(HTMLButtonElement);
     expect(laterDecadeButton).toBeDisabled();
   });
 
@@ -141,7 +141,7 @@ describe("Components / Datepicker", () => {
     await userEvent.click(titleButton);
 
     const earlierDecadeButton = screen.getByText("2010");
-    expect(earlierDecadeButton).instanceOf(HTMLButtonElement);
+    expect(earlierDecadeButton).toBeInstanceOf(HTMLButtonElement);
     expect(earlierDecadeButton).toBeDisabled();
   });
 
@@ -158,7 +158,7 @@ describe("Components / Datepicker", () => {
     await userEvent.click(titleButton);
 
     const laterDecadeButton = screen.getByText("2030");
-    expect(laterDecadeButton).instanceOf(HTMLButtonElement);
+    expect(laterDecadeButton).toBeInstanceOf(HTMLButtonElement);
     expect(laterDecadeButton).toBeEnabled();
   });
 
@@ -178,11 +178,11 @@ describe("Components / Datepicker", () => {
     await userEvent.click(titleButton);
 
     const inRange = screen.getByText("2010");
-    expect(inRange).instanceOf(HTMLButtonElement);
+    expect(inRange).toBeInstanceOf(HTMLButtonElement);
     expect(inRange).toBeEnabled();
 
     const outsideRange = screen.getByText("2000");
-    expect(outsideRange).instanceOf(HTMLButtonElement);
+    expect(outsideRange).toBeInstanceOf(HTMLButtonElement);
     expect(outsideRange).toBeDisabled();
   });