Patches/packages upgrade/fix typescript errors (#1118)

* upgrade all packages to latest * fix tests * move viewport properties inside `viewport` const, as documented in Next.js website * fix `typecheck` script * fix test TS errors * type response in `fetch` * import type * fix `FloatingLabel` types * fix `pick` function types * upgrade github actions to use node 20 (LTS) * run prettier * bump `codecov` from v2 to v3 --------- Co-authored-by: Sebastian Sutu <[email protected]>
themesberg · Nov 8, 2023 · a054853 · a054853 · vercel · Nov 8, 2023
1 parent e5636a6
commit a054853
Show file tree

Hide file tree

Showing 19 changed files with 2,859 additions and 3,260 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -16,10 +16,10 @@ jobs:
         with:
           fetch-depth: 2
 
-      - name: 💿 Setup NodeJS 16
+      - name: 💿 Setup NodeJS 20
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: ⏳ Setup Cache
         uses: actions/cache@v3
@@ -42,7 +42,7 @@ jobs:
         run: yarn test:coverage
 
       - name: 📊 Upload coverage to Codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         with:
           fail_ci_if_error: true
           files: coverage/coverage-final.json

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,5 @@
 import { Inter as InterFont } from 'next/font/google';
-import type { Metadata, NextPage } from 'next/types';
+import type { Metadata, NextPage, Viewport } from 'next/types';
 import type { FC, PropsWithChildren } from 'react';
 import { ThemeModeScript } from '~/src';
 
@@ -21,21 +21,12 @@ export const metadata: Metadata = {
     shortcut: '/favicon.ico',
     apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
   },
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
-    { media: '(prefers-color-scheme: dark)', color: '#1f2937' },
-  ],
   manifest: '/site.webmanifest',
   other: {
     charSet: 'utf-8',
     lang: 'en',
   },
   title: 'Flowbite React - UI Component Library',
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 1,
-  },
   openGraph: {
     description:
       'Flowbite React is an open-source UI component library built with React components, Tailwind CSS utility classes and based on the Flowbite design system and components.',
@@ -52,6 +43,16 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#1f2937' },
+  ],
+};
+
 const RootLayout: NextPage<PropsWithChildren> = ({ children }) => {
   return (
     <html lang="en" className={`${interFont.variable} font-sans`}>

diff --git a/components/homepage/social-proof-section.tsx b/components/homepage/social-proof-section.tsx
@@ -2,13 +2,15 @@ import Image from 'next/image';
 import { type FC } from 'react';
 import { safeResJson } from '~/src/helpers/http';
 
-async function fetchSafe(endpoint: string): Promise<any> {
+async function fetchSafe<T>(endpoint: string): Promise<T> {
   return safeResJson(await fetch(endpoint));
 }
 
 async function fetchStargazers(): Promise<string> {
   try {
-    const result = await fetchSafe('https://api.github.com/repos/themesberg/flowbite-react');
+    const result = await fetchSafe<{ stargazers_count: string }>(
+      'https://api.github.com/repos/themesberg/flowbite-react',
+    );
 
     return result.stargazers_count;
   } catch (error) {
@@ -18,7 +20,9 @@ async function fetchStargazers(): Promise<string> {
 
 async function fetchNpmDownloads(): Promise<string> {
   try {
-    const result = await fetchSafe('https://api.npmjs.org/downloads/point/2021-01-01:2100-01-01/flowbite-react');
+    const result = await fetchSafe<{ downloads: string }>(
+      'https://api.npmjs.org/downloads/point/2021-01-01:2100-01-01/flowbite-react',
+    );
 
     return result.downloads;
   } catch (error) {
@@ -28,7 +32,7 @@ async function fetchNpmDownloads(): Promise<string> {
 
 async function fetchDiscordMembers(): Promise<string> {
   try {
-    const result = await fetchSafe(
+    const result = await fetchSafe<{ approximate_presence_count: string }>(
       'https://discord.com/api/v9/invites/4eeurUVvTy?with_counts=true&with_expiration=true',
     );
 

diff --git a/components/mdx.tsx b/components/mdx.tsx
@@ -38,7 +38,7 @@ const components: MDXComponents = {
       const properties = path.split('.');
       const key = properties.shift() as keyof typeof obj;
       if (!(key in obj)) return;
-      return pick(obj[key], properties.join('.'));
+      return pick(obj[key] as T, properties.join('.'));
     }
 
     const codeData = pick(examples, name);

diff --git a/package.json b/package.json
@@ -46,105 +46,105 @@
     "test:open": "vitest --ui",
     "test:e2e": "start-test 3000 cypress:run",
     "test:e2e:open": "start-test 3000 cypress:open",
-    "typecheck": "tsc"
+    "typecheck": "tsc --noEmit"
   },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
   "dependencies": {
-    "@floating-ui/react": "^0.24.3",
+    "@floating-ui/react": "^0.26.2",
     "contentlayer": "^0.3.4",
-    "flowbite": "^1.6.6",
+    "flowbite": "^2.0.0",
     "markdown-toc": "^1.2.0",
     "next-contentlayer": "^0.3.4",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-indiana-drag-scroll": "^2.2.0",
     "react-markdown": "^9.0.0",
     "sharp": "^0.32.6",
-    "tailwind-merge": "^1.13.2"
+    "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
-    "@docsearch/react": "^3.5.1",
-    "@mapbox/rehype-prism": "^0.8.0",
-    "@storybook/addon-a11y": "^7.0.23",
-    "@storybook/addon-actions": "^7.0.23",
-    "@storybook/addon-docs": "^7.0.23",
-    "@storybook/addon-essentials": "^7.0.23",
-    "@storybook/addon-interactions": "^7.0.23",
-    "@storybook/addon-links": "^7.0.23",
-    "@storybook/addon-mdx-gfm": "^7.0.23",
+    "@docsearch/react": "^3.5.2",
+    "@mapbox/rehype-prism": "^0.9.0",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling": "^1.3.0",
-    "@storybook/addons": "^7.0.23",
-    "@storybook/api": "^7.0.23",
-    "@storybook/blocks": "^7.0.23",
-    "@storybook/builder-vite": "^7.0.23",
-    "@storybook/components": "^7.0.23",
-    "@storybook/core-events": "^7.0.23",
-    "@storybook/nextjs": "^7.0.23",
-    "@storybook/react": "^7.0.23",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.0.23",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^20.3.1",
-    "@types/prismjs": "^1.26.0",
-    "@types/react": "^18.2.13",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-syntax-highlighter": "^15.5.7",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
-    "@vitejs/plugin-react": "^4.0.1",
-    "@vitest/coverage-v8": "^0.32.2",
-    "@vitest/ui": "^0.32.2",
-    "autoprefixer": "^10.4.14",
-    "axe-core": "^4.7.2",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/api": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/builder-vite": "^7.5.3",
+    "@storybook/components": "^7.5.3",
+    "@storybook/core-events": "^7.5.3",
+    "@storybook/nextjs": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^20.9.0",
+    "@types/prismjs": "^1.26.3",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-syntax-highlighter": "^15.5.10",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/ui": "^0.34.6",
+    "autoprefixer": "^10.4.16",
+    "axe-core": "^4.8.2",
     "commitizen": "^4.3.0",
-    "cypress": "^12.15.0",
-    "cypress-axe": "^1.4.0",
+    "cypress": "^13.4.0",
+    "cypress-axe": "^1.5.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^8.43.0",
-    "eslint-config-next": "^13.5.3",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.53.0",
+    "eslint-config-next": "^14.0.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
-    "fathom-client": "^3.5.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "fathom-client": "^3.6.0",
     "jsdom": "^22.1.0",
-    "next": "^13.5.3",
-    "postcss": "^8.4.24",
-    "prettier": "^2.8.8",
-    "prettier-plugin-organize-imports": "^3.2.2",
-    "prettier-plugin-tailwindcss": "^0.3.0",
+    "next": "^14.0.1",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-tailwindcss": "^0.5.6",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rehype-autolink-headings": "^7.0.0",
-    "rehype-slug": "^5.1.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "standard-version": "^9.5.0",
-    "start-server-and-test": "^2.0.0",
-    "storybook": "^7.0.23",
-    "storybook-dark-mode": "^3.0.0",
-    "tailwindcss": "^3.3.2",
+    "start-server-and-test": "^2.0.2",
+    "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.1",
+    "tailwindcss": "^3.3.5",
     "terser-webpack-plugin": "^5.3.9",
-    "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.32.2"
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
     "tailwindcss": "^3"
   },
   "resolutions": {
-    "nwsapi": "2.2.2"
+    "nwsapi": "^2.2.4"
   },
   "private": false,
   "eslintConfig": {

diff --git a/src/components/Avatar/AvatarGroup.spec.tsx b/src/components/Avatar/AvatarGroup.spec.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { AvatarGroup } from './AvatarGroup';
 
 describe('Components / Avatar.Group', () => {

diff --git a/src/components/Avatar/AvatarGroupCounter.spec.tsx b/src/components/Avatar/AvatarGroupCounter.spec.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { AvatarGroupCounter } from './AvatarGroupCounter';
 
 describe('AvatarGroupCounter', () => {

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -32,18 +32,17 @@ interface CommonCardProps extends ComponentProps<'div'> {
   theme?: DeepPartial<FlowbiteCardTheme>;
 }
 
-export type CardProps =
-  | (
-      | { imgAlt?: string; imgSrc?: string; renderImage?: never }
-      | {
-          /** Allows to provide a custom render function for the image component. Useful in Next.JS and Gatsby. **Setting this will disable `imgSrc` and `imgAlt`**.
-           */
-          renderImage?: (theme: DeepPartial<FlowbiteCardTheme>, horizontal: boolean) => JSX.Element;
-          imgAlt?: never;
-          imgSrc?: never;
-        }
-    ) &
-      CommonCardProps;
+export type CardProps = (
+  | { imgAlt?: string; imgSrc?: string; renderImage?: never }
+  | {
+      /** Allows to provide a custom render function for the image component. Useful in Next.JS and Gatsby. **Setting this will disable `imgSrc` and `imgAlt`**.
+       */
+      renderImage?: (theme: DeepPartial<FlowbiteCardTheme>, horizontal: boolean) => JSX.Element;
+      imgAlt?: never;
+      imgSrc?: never;
+    }
+) &
+  CommonCardProps;
 
 export const Card: FC<CardProps> = (props) => {
   const { children, className, horizontal, href, theme: customTheme = {} } = props;

diff --git a/src/components/Carousel/Carousel.spec.tsx b/src/components/Carousel/Carousel.spec.tsx
@@ -1,7 +1,7 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import Image from 'next/image';
 import type { FC } from 'react';
-import { afterEach, beforeEach, describe, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { CarouselProps } from './Carousel';
 import { Carousel } from './Carousel';