Core: update packages + fixes (#1423)

* chore: improve core:
- up packages
- fix `turbo.json` config files due to package version update
- remove `React.FC` from `apps/web`
- format and fix all classNames that had double space or class duplicates

* chore: rebuild lock file

* downgrade bun version

* test bun version rollback for failure

* up bun version + some ui packages

* downgrade `execa` - vercel deploy fix #1

* revert `execa`, downgrade `storybook` - vercel deploy fix #2

* rollback `turbo` - vercel deploy fix #3

* revert `turbo` - vercel deploy fix #4

* up storybook

* rebuild lock file

* restore lock file + run `bun i`

* nvm rebuild lock file back

* rebuild lock

* rollback to stable versions

* rollback to safe lock file and run `bun i`

* rollback to safe lock file and run `bun i`

* rebuild healthy lock file + install latest packages (except `eslint@9` due to new config file structure)

Author: SutuSebastian

.changeset/sour-spiders-melt.md

@@ -0,0 +1,6 @@
+---
+"create-flowbite-react": patch
+"flowbite-react": patch
+---
+
+update packages

.github/actions/setup/action.yml

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

apps/storybook/package.json

@@ -11,26 +11,26 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "8.0.5",
-    "@storybook/addon-interactions": "8.0.5",
-    "@storybook/addon-links": "8.0.5",
-    "@storybook/addon-themes": "8.0.5",
-    "@storybook/blocks": "8.0.5",
-    "@storybook/react": "8.0.5",
-    "@storybook/react-vite": "8.0.5",
-    "@storybook/test": "8.0.5",
-    "@types/react": "18.2.73",
-    "@types/react-dom": "18.2.23",
-    "@vitejs/plugin-react": "4.2.1",
+    "@storybook/addon-essentials": "8.1.10",
+    "@storybook/addon-interactions": "8.1.10",
+    "@storybook/addon-links": "8.1.10",
+    "@storybook/addon-themes": "8.1.10",
+    "@storybook/blocks": "8.1.10",
+    "@storybook/react": "8.1.10",
+    "@storybook/react-vite": "8.1.10",
+    "@storybook/test": "8.1.10",
+    "@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",
-    "storybook": "8.0.5",
-    "tailwindcss": "3.4.3",
-    "typescript": "5.4.3",
-    "vite": "5.2.7"
+    "storybook": "8.1.10",
+    "tailwindcss": "3.4.4",
+    "typescript": "5.4.5",
+    "vite": "5.3.1"
   }
 }

apps/storybook/turbo.json

@@ -1,6 +1,6 @@
 {
   "extends": ["//"],
-  "pipeline": {
+  "tasks": {
     "build": {
       "outputs": ["storybook-static/**"]
     }

apps/web/components/banner.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
-import type { FC } from "react";
 
-export const Banner: FC = () => {
+export function Banner() {
   return (
     <div
       tabIndex={-1}
@@ -38,4 +37,4 @@ export const Banner: FC = () => {
       </div>
     </div>
   );
-};
+}

apps/web/components/carbon-ads.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import type { FC } from "react";
 import { useEffect } from "react";
 
 interface WindowWithCarbonAds extends Window {
@@ -10,7 +9,7 @@ interface WindowWithCarbonAds extends Window {
   };
 }
 
-export const CarbonAds: FC = () => {
+export function CarbonAds() {
   const pathname = usePathname();
 
   const isDevelopmentMode = process.env.NODE_ENV === "development";
@@ -38,4 +37,4 @@ export const CarbonAds: FC = () => {
       <div id="carbon-container" />
     </aside>
   );
-};
+}

apps/web/components/homepage/components-section.tsx

@@ -1,11 +1,11 @@
 import { Button } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import type { ComponentProps, FC } from "react";
+import type { ComponentProps } from "react";
 import { twMerge } from "tailwind-merge";
 import { COMPONENTS_DATA } from "~/data/components";
 
-export const ComponentsSection: FC = () => {
+export function ComponentsSection() {
   return (
     <section>
       <div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-8 sm:gap-12 lg:px-20 lg:pt-24">
@@ -34,7 +34,7 @@ export const ComponentsSection: FC = () => {
       </div>
     </section>
   );
-};
+}
 
 interface ComponentCardProps extends ComponentProps<"div"> {
   link: string;
@@ -44,7 +44,7 @@ interface ComponentCardProps extends ComponentProps<"div"> {
   classes: string;
 }
 
-const ComponentCard: FC<ComponentCardProps> = ({ link, name, image, imageDark, classes }) => {
+function ComponentCard({ link, name, image, imageDark, classes }: ComponentCardProps) {
   return (
     <Link
       href={link}
@@ -80,4 +80,4 @@ const ComponentCard: FC<ComponentCardProps> = ({ link, name, image, imageDark, c
       </div>
     </Link>
   );
-};
+}

apps/web/components/homepage/contributors-section.tsx

@@ -1,7 +1,6 @@
 import { Tooltip } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import type { FC } from "react";
 import { safeResJson } from "~/helpers/http";
 
 interface Contributor {
@@ -21,7 +20,7 @@ async function fetchContributors(): Promise<Contributor[]> {
   }
 }
 
-export const ContributorsSection: FC = async () => {
+export async function ContributorsSection() {
   const contributors = await fetchContributors();
 
   return (
@@ -98,4 +97,4 @@ export const ContributorsSection: FC = async () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/homepage/dark-mode-section/dark-mode-section.tsx

@@ -1,6 +1,5 @@
 import Image from "next/image";
 import Link from "next/link";
-import type { FC } from "react";
 import { DarkModeSwitcher } from "./dark-mode-switcher";
 
 const feature_list = [
@@ -10,7 +9,7 @@ const feature_list = [
   "High quality UI/UX design for modern applications",
 ];
 
-export const DarkModeSection: FC = () => {
+export function DarkModeSection() {
   return (
     <section className="bg-gray-50 dark:bg-gray-800">
       <div className="mx-auto w-full max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
@@ -95,4 +94,4 @@ export const DarkModeSection: FC = () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/homepage/dark-mode-section/dark-mode-switcher.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { useThemeMode } from "flowbite-react";
-import type { FC } from "react";
 
-export const DarkModeSwitcher: FC = () => {
+export function DarkModeSwitcher() {
   const { setMode } = useThemeMode();
 
   return (
@@ -81,4 +80,4 @@ export const DarkModeSwitcher: FC = () => {
       </div>
     </div>
   );
-};
+}

apps/web/components/homepage/featured-section.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
-import type { FC } from "react";
 
-export const FeaturedSection: FC = () => {
+export function FeaturedSection() {
   return (
     <section>
       <div className="mx-auto max-w-8xl px-4 py-8 lg:px-20">
@@ -143,4 +142,4 @@ export const FeaturedSection: FC = () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/homepage/figma-section.tsx

@@ -1,7 +1,6 @@
 import Image from "next/image";
-import type { FC } from "react";
 
-export const FigmaSection: FC = () => {
+export function FigmaSection() {
   return (
     <section className="bg-gray-50 dark:bg-gray-800">
       <div className="mx-auto max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
@@ -247,4 +246,4 @@ export const FigmaSection: FC = () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/homepage/hero-section/copy-package-input.tsx

@@ -1,15 +1,14 @@
 "use client";
 
 import { TextInput, Tooltip } from "flowbite-react";
-import type { FC } from "react";
 import { useState } from "react";
 import { HiClipboardCopy } from "react-icons/hi";
 
 interface Props {
   value: string;
 }
 
-export const CopyPackageInput: FC<Props> = ({ value }) => {
+export function CopyPackageInput({ value }: Props) {
   const [isJustCopied, setJustCopied] = useState(false);
 
   const copyToClipboard = () => {
@@ -43,4 +42,4 @@ export const CopyPackageInput: FC<Props> = ({ value }) => {
       />
     </Tooltip>
   );
-};
+}

apps/web/components/homepage/hero-section/hero-section.tsx

@@ -1,11 +1,10 @@
 import { Button } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import type { FC } from "react";
 import { HiOutlineArrowRight } from "react-icons/hi";
 import { CopyPackageInput } from "./copy-package-input";
 
-export const HeroSection: FC = () => {
+export function HeroSection() {
   return (
     <section className="mx-auto flex max-w-8xl flex-col overflow-hidden px-4 py-6 sm:py-8 lg:px-20 lg:pb-24 lg:pt-16">
       <div className="flex flex-col gap-20">
@@ -55,4 +54,4 @@ export const HeroSection: FC = () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/homepage/home-navbar.tsx

@@ -1,11 +1,10 @@
 import { Navbar } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import type { FC } from "react";
 import { DocSearchInput } from "../docsearch-input";
 import { NavbarIcons, NavbarLinks } from "../navbar";
 
-export const HomeNavbar: FC = () => {
+export function HomeNavbar() {
   return (
     <Navbar
       theme={{
@@ -39,4 +38,4 @@ export const HomeNavbar: FC = () => {
       </div>
     </Navbar>
   );
-};
+}

apps/web/components/homepage/main-footer.tsx

@@ -1,9 +1,8 @@
 import { Footer } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import type { FC } from "react";
 
-export const MainFooter: FC = () => {
+export function MainFooter() {
   return (
     <Footer className="rounded-none bg-gray-50 pb-8 pt-16 shadow-none">
       <div className="mx-auto w-full max-w-8xl px-4 lg:px-20">
@@ -98,4 +97,4 @@ export const MainFooter: FC = () => {
       </div>
     </Footer>
   );
-};
+}

apps/web/components/homepage/react-section.tsx

@@ -1,7 +1,6 @@
 import { Button } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import type { FC } from "react";
 import { HiOutlineArrowRight } from "react-icons/hi";
 
 const feature_list = [
@@ -13,7 +12,7 @@ const feature_list = [
   "Fully accessible UI components",
 ];
 
-export const ReactSection: FC = () => {
+export function ReactSection() {
   return (
     <section className="bg-gray-50 dark:bg-gray-800">
       <div className="mx-auto w-full max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
@@ -89,4 +88,4 @@ export const ReactSection: FC = () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/homepage/social-proof-section.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import { type FC } from "react";
 import { safeResJson } from "~/helpers/http";
 
 async function fetchSafe<T>(endpoint: string): Promise<T> {
@@ -46,7 +45,7 @@ const numberWithCommas = (x: string | number) => {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
 
-export const SocialProofSection: FC = async () => {
+export async function SocialProofSection() {
   const stargazers = numberWithCommas(await fetchStargazers());
   const npmDownloads = numberWithCommas(await fetchNpmDownloads());
   const discordMembers = numberWithCommas(await fetchDiscordMembers());
@@ -204,4 +203,4 @@ export const SocialProofSection: FC = async () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/homepage/tailwind-section.tsx

@@ -1,8 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
-import type { FC } from "react";
 
-export const TailwindSection: FC = () => {
+export function TailwindSection() {
   return (
     <section className="bg-gray-50 dark:bg-gray-800">
       <div className="mx-auto w-full max-w-8xl px-4 py-8 lg:px-20 lg:py-24">
@@ -80,4 +79,4 @@ export const TailwindSection: FC = () => {
       </div>
     </section>
   );
-};
+}

apps/web/components/mdx.tsx

@@ -1,6 +1,6 @@
 import { theme } from "flowbite-react";
 import type { MDXComponents } from "mdx/types";
-import { getMDXComponent } from "next-contentlayer/hooks";
+import { getMDXComponent } from "next-contentlayer2/hooks";
 import Link from "next/link";
 import * as examples from "~/examples";
 import { CodeDemo, type CodeData } from "./code-demo";