Web/fixes

apps/web/app/docs/[[...slug]]/page.tsx

@@ -62,7 +62,6 @@ export default function DocPage({ params }: Props) {
           </ContentLayout>
         </main>
         <DocsPager doc={doc} />
-        <DocFooter />
         <CarbonAds />
       </div>
       <ToC doc={doc} />
@@ -150,103 +149,6 @@ function DocsPager({ doc }: { doc: Doc }) {
   );
 }
 
-function DocFooter() {
-  return (
-    <Footer className="rounded-none pt-16 shadow-none lg:px-0 dark:bg-gray-900">
-      <div className="w-full">
-        <div className="grid w-full justify-between md:grid-cols-2">
-          <div className="mb-4 max-w-sm lg:mb-0">
-            <Link href="/" className="flex items-center gap-3">
-              <Image alt="" height="32" src="/favicon.svg" width="32" className="size-8" />
-              <span className="text-xl font-semibold text-gray-900 dark:text-gray-100">Flowbite React</span>
-            </Link>
-            <p className="mb-3 mt-4 max-w-sm text-gray-600 dark:text-gray-400">
-              Flowbite is an ecosystem built on top of Tailwind CSS including a component library, block sections, a
-              Figma design system and other resources.
-            </p>
-            <p className="mb-3 mt-4 max-w-sm text-gray-600 dark:text-gray-400">
-              Code licensed{" "}
-              <a
-                href="https://github.com/themesberg/flowbite-react/blob/main/LICENSE"
-                className="text-cyan-600 hover:underline"
-              >
-                MIT
-              </a>
-              , docs{" "}
-              <a
-                href="https://creativecommons.org/licenses/by/3.0/"
-                rel="nofollow noopener noreferrer"
-                className="text-cyan-600 hover:underline"
-              >
-                CC BY 3.0
-              </a>
-            </p>
-          </div>
-          <div className="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6">
-            <div>
-              <Footer.Title
-                title="Resources"
-                className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
-              />
-              <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://github.com/themesberg/flowbite-react" className="text-base">
-                  GitHub
-                </Footer.Link>
-                <Footer.Link href="https://flowbite.com/" className="text-base">
-                  Flowbite
-                </Footer.Link>
-                <Footer.Link href="https://tailwindcss.com/" className="text-base">
-                  Tailwind CSS
-                </Footer.Link>
-                <Footer.Link href="https://flowbite.com/figma/" className="text-base">
-                  Figma
-                </Footer.Link>
-              </Footer.LinkGroup>
-            </div>
-            <div>
-              <Footer.Title
-                title="Help & Support"
-                className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
-              />
-              <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://discord.gg/4eeurUVvTy" className="text-base">
-                  Discord
-                </Footer.Link>
-                <Footer.Link href="https://github.com/themesberg/flowbite-react/discussions" className="text-base">
-                  Github Discussions
-                </Footer.Link>
-              </Footer.LinkGroup>
-            </div>
-            <div>
-              <Footer.Title
-                title="Legal"
-                className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
-              />
-              <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://flowbite.com/license/" className="text-base">
-                  License
-                </Footer.Link>
-                <Footer.Link href="https://flowbite.com/brand/" className="text-base">
-                  Brand guideline
-                </Footer.Link>
-              </Footer.LinkGroup>
-            </div>
-          </div>
-        </div>
-        <Footer.Divider />
-        <div className="w-full text-center sm:flex sm:items-center sm:justify-center">
-          <Footer.Copyright
-            by="All Rights Reserved. Flowbite™ is a registered trademark."
-            href="/"
-            year={new Date().getFullYear()}
-            className="text-base"
-          />
-        </div>
-      </div>
-    </Footer>
-  );
-}
-
 function ToC({ doc }: { doc: Doc }) {
   return (
     <div className="hidden w-64 flex-none px-8 xl:block xl:text-sm">

apps/web/app/docs/layout.tsx

@@ -9,6 +9,7 @@
 import { HiMenuAlt1, HiX } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
 import { DocSearchInput } from "~/components/docsearch-input";
+import { MainFooter } from "~/components/main-footer";
 import { NavbarIcons, NavbarLinks } from "~/components/navbar";
 import { DOCS_SIDEBAR, type DocsSidebarItem } from "~/data/docs-sidebar";
 
@@ -32,10 +33,11 @@
       <div className="relative">
         {/* <Banner /> */}
         <DocsNavbar {...state} />
         <div className="mx-auto w-full max-w-8xl lg:flex lg:px-4">
           <DocsSidebar {...state} />
           <div className="w-full min-w-0">{children}</div>
         </div>
+        <MainFooter />
       </div>
     </div>
   );
@@ -45,7 +47,7 @@
   return (
     <Navbar
       fluid
       theme={{
         root: {
           base: "sticky top-0 z-[60] mx-auto flex w-full items-center justify-between border-b border-gray-200 bg-white text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400",
           inner: {
@@ -172,7 +174,7 @@
     <Link
       href={href}
       target={isExternal ? "_blank" : undefined}
       className={twMerge(
         "flex flex-wrap items-center py-2 font-medium",
         pathname === href
           ? "text-primary-700 hover:text-primary-700 dark:text-primary-500"

apps/web/app/page.tsx

@@ -1,4 +1,3 @@
-import { Banner } from "~/components/banner";
 import {
   ComponentsSection,
   ContributorsSection,
@@ -7,11 +6,11 @@ import {
   FigmaSection,
   HeroSection,
   HomeNavbar,
-  MainFooter,
   ReactSection,
   SocialProofSection,
   TailwindSection,
 } from "~/components/homepage";
+import { MainFooter } from "~/components/main-footer";
 
 export default function HomePage() {
   return (

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

@@ -1,7 +1,7 @@
 import { Tooltip } from "flowbite-react";
 import Image from "next/image";
 import Link from "next/link";
-import { safeResJson } from "~/helpers/http";
+import { fetchSafe } from "~/helpers/http";
 
 interface Contributor {
   id: number;
@@ -12,9 +12,11 @@ interface Contributor {
 
 async function fetchContributors(): Promise<Contributor[]> {
   try {
-    const result = await fetch("https://api.github.com/repos/themesberg/flowbite-react/contributors?per_page=21");
+    const result = await fetchSafe<Contributor[]>(
+      "https://api.github.com/repos/themesberg/flowbite-react/contributors?per_page=21",
+    );
 
-    return safeResJson(result);
+    return result.filter((contributor) => contributor.login !== "github-actions[bot]");
   } catch (error) {
     return [];
   }

apps/web/components/homepage/index.ts

@@ -5,7 +5,6 @@ export { FeaturedSection } from "./featured-section";
 export { FigmaSection } from "./figma-section";
 export { HeroSection } from "./hero-section";
 export { HomeNavbar } from "./home-navbar";
-export { MainFooter } from "./main-footer";
 export { ReactSection } from "./react-section";
 export { SocialProofSection } from "./social-proof-section";
 export { TailwindSection } from "./tailwind-section";

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

@@ -1,9 +1,5 @@
 import Image from "next/image";
-import { safeResJson } from "~/helpers/http";
-
-async function fetchSafe<T>(endpoint: string): Promise<T> {
-  return safeResJson(await fetch(endpoint));
-}
+import { fetchSafe } from "~/helpers/http";
 
 async function fetchStargazers(): Promise<string> {
   try {

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

@@ -20,6 +20,8 @@ export function MainFooter() {
               Code licensed{" "}
               <a
                 href="https://github.com/themesberg/flowbite-react/blob/main/LICENSE"
+                rel="nofollow noopener noreferrer"
+                target="_blank"
                 className="text-cyan-600 hover:underline"
               >
                 MIT
@@ -28,6 +30,7 @@ export function MainFooter() {
               <a
                 href="https://creativecommons.org/licenses/by/3.0/"
                 rel="nofollow noopener noreferrer"
+                target="_blank"
                 className="text-cyan-600 hover:underline"
               >
                 CC BY 3.0
@@ -41,16 +44,26 @@ export function MainFooter() {
                 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
               />
               <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://github.com/themesberg/flowbite-react" className="text-base">
+                <Footer.Link
+                  href="https://github.com/themesberg/flowbite-react"
+                  rel="noopener"
+                  target="_blank"
+                  className="text-base"
+                >
                   GitHub
                 </Footer.Link>
-                <Footer.Link href="https://flowbite.com/" className="text-base">
+                <Footer.Link href="https://flowbite.com/" rel="noopener" target="_blank" className="text-base">
                   Flowbite
                 </Footer.Link>
-                <Footer.Link href="https://tailwindcss.com/" className="text-base">
+                <Footer.Link
+                  href="https://tailwindcss.com/"
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  className="text-base"
+                >
                   Tailwind CSS
                 </Footer.Link>
-                <Footer.Link href="https://flowbite.com/figma/" className="text-base">
+                <Footer.Link href="https://flowbite.com/figma/" rel="noopener" target="_blank" className="text-base">
                   Figma
                 </Footer.Link>
               </Footer.LinkGroup>
@@ -61,10 +74,20 @@ export function MainFooter() {
                 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
               />
               <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://discord.gg/4eeurUVvTy" className="text-base">
+                <Footer.Link
+                  href="https://discord.gg/4eeurUVvTy"
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  className="text-base"
+                >
                   Discord
                 </Footer.Link>
-                <Footer.Link href="https://github.com/themesberg/flowbite-react/discussions" className="text-base">
+                <Footer.Link
+                  href="https://github.com/themesberg/flowbite-react/discussions"
+                  rel="noopener"
+                  target="_blank"
+                  className="text-base"
+                >
                   Github Discussions
                 </Footer.Link>
               </Footer.LinkGroup>
@@ -75,10 +98,10 @@ export function MainFooter() {
                 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white"
               />
               <Footer.LinkGroup col className="text-gray-600 dark:text-gray-400">
-                <Footer.Link href="https://flowbite.com/license/" className="text-base">
+                <Footer.Link href="https://flowbite.com/license/" rel="noopener" target="_blank" className="text-base">
                   License
                 </Footer.Link>
-                <Footer.Link href="https://flowbite.com/brand/" className="text-base">
+                <Footer.Link href="https://flowbite.com/brand/" rel="noopener" target="_blank" className="text-base">
                   Brand guideline
                 </Footer.Link>
               </Footer.LinkGroup>

apps/web/helpers/http.ts

@@ -1,5 +1,9 @@
-export function safeResJson<T>(res: Response) {
-  if (res.ok) return res.json() as Promise<T>;
+export async function fetchSafe<T>(endpoint: string): Promise<T> {
+  const response = await fetch(endpoint);
 
-  throw new Error("Internal server error!");
+  if (!response.ok) {
+    throw new Error("Internal server error!");
+  }
+
+  return response.json();
 }

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

@@ -80,7 +80,7 @@ describe("Components / Datepicker", () => {
 
   it("should render 1990 - 2100 year range when selecting decade", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker value={testDate.getTime()} />);
+    render(<Datepicker defaultDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -96,7 +96,7 @@ describe("Components / Datepicker", () => {
 
   it("should allow selecting earlier decades when setting max date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker value={testDate.getTime()} maxDate={testDate} />);
+    render(<Datepicker defaultDate={testDate} maxDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -113,7 +113,7 @@ describe("Components / Datepicker", () => {
 
   it("should disallow selecting later decades when setting max date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker value={testDate.getTime()} maxDate={testDate} />);
+    render(<Datepicker defaultDate={testDate} maxDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -130,7 +130,7 @@ describe("Components / Datepicker", () => {
 
   it("should disallow selecting earlier decades when setting min date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker value={testDate.getTime()} minDate={testDate} />);
+    render(<Datepicker defaultDate={testDate} minDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -147,7 +147,7 @@ describe("Components / Datepicker", () => {
 
   it("should allow selecting later decades when setting min date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker value={testDate.getTime()} minDate={testDate} />);
+    render(<Datepicker defaultDate={testDate} minDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -167,7 +167,7 @@ describe("Components / Datepicker", () => {
     const maxDate = new Date(2030, 1, 1);
     const testDate = new Date(2024, 6, 1);
 
-    render(<Datepicker value={testDate.getTime()} minDate={minDate} maxDate={maxDate} />);
+    render(<Datepicker defaultDate={testDate} minDate={minDate} maxDate={maxDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);