From ea2d02bd52de34c6cd2390d160ffe7f14319d5c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Weng?= <ixartz@users.noreply.github.com>
Date: Thu, 17 Oct 2024 03:33:46 +0200
Subject: [PATCH] fix: remove hydration error and unify with pro version 1.6.1

---
 README.md                                   |   2 ++
 public/assets/images/clerk-logo-dark.png    | Bin 3934 -> 4107 bytes
 public/assets/images/clerk-logo-white.png   | Bin 0 -> 3690 bytes
 src/app/[locale]/(auth)/layout.tsx          |   3 +++
 src/app/[locale]/layout.tsx                 |  10 ++++++++--
 src/components/LocaleSwitcher.tsx           |   2 +-
 src/components/ui/data-table.tsx            |   2 +-
 src/features/billing/PricingCard.tsx        |   4 ++--
 src/features/billing/PricingInformation.tsx |   5 ++---
 src/features/dashboard/DashboardHeader.tsx  |   6 ++++--
 src/features/landing/CenteredFooter.tsx     |   5 ++---
 src/features/landing/CenteredMenu.tsx       |   2 +-
 src/features/landing/FeatureCard.tsx        |   2 +-
 src/locales/en.json                         |   3 ++-
 src/locales/fr.json                         |   5 +++--
 src/templates/Navbar.tsx                    |   1 +
 src/utils/AppConfig.ts                      |  10 +++++-----
 tailwind.config.ts                          |   1 -
 18 files changed, 38 insertions(+), 25 deletions(-)
 create mode 100644 public/assets/images/clerk-logo-white.png

diff --git a/README.md b/README.md
index 7464661..77c0080 100644
--- a/README.md
+++ b/README.md
@@ -230,6 +230,8 @@ You can easily configure Next.js SaaS Boilerplate by searching the entire projec
 
 You have full access to the source code for further customization. The provided code is just an example to help you start your project. The sky's the limit 🚀.
 
+In the source code, you will also find `PRO` comments that indicate the code that is only available in the PRO version. You can easily remove or replace this code with your own implementation.
+
 ### Change database schema
 
 To modify the database schema in the project, you can update the schema file located at `./src/models/Schema.ts`. This file defines the structure of your database tables using the Drizzle ORM library.
diff --git a/public/assets/images/clerk-logo-dark.png b/public/assets/images/clerk-logo-dark.png
index d2c79e21586175356727a5adbcc3a1b1993d2bf6..979c8cddcd340458474602af07da8ae53df652c2 100644
GIT binary patch
delta 3718
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

delta 3544
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
S0!XR=0000<MNUMnLSTY*3+T20

diff --git a/public/assets/images/clerk-logo-white.png b/public/assets/images/clerk-logo-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..1318bb91591c608d6944c124439b9a77f073035c
GIT binary patch
literal 3690
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
IM6N<$f<ndx2LJ#7

literal 0
HcmV?d00001

diff --git a/src/app/[locale]/(auth)/layout.tsx b/src/app/[locale]/(auth)/layout.tsx
index cd8be08..6fa5bd6 100644
--- a/src/app/[locale]/(auth)/layout.tsx
+++ b/src/app/[locale]/(auth)/layout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { enUS, frFR } from '@clerk/localizations';
 import { ClerkProvider } from '@clerk/nextjs';
 
@@ -26,6 +28,7 @@ export default function AuthLayout(props: {
 
   return (
     <ClerkProvider
+      // PRO: Dark mode support for Clerk
       localization={clerkLocale}
       signInUrl={signInUrl}
       signUpUrl={signUpUrl}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 833f1d5..0125301 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -45,9 +45,15 @@ export default function RootLayout(props: {
   // Using internationalization in Client Components
   const messages = useMessages();
 
+  // The `suppressHydrationWarning` in <html> is used to prevent hydration errors caused by `next-themes`.
+  // Solution provided by the package itself: https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
+
+  // The `suppressHydrationWarning` attribute in <body> is used to prevent hydration errors caused by Sentry Overlay,
+  // which dynamically adds a `style` attribute to the body tag.
   return (
-    <html lang={props.params.locale}>
-      <body className="bg-background text-foreground antialiased">
+    <html lang={props.params.locale} suppressHydrationWarning>
+      <body className="bg-background text-foreground antialiased" suppressHydrationWarning>
+        {/* PRO: Dark mode support for Shadcn UI */}
         <NextIntlClientProvider
           locale={props.params.locale}
           messages={messages}
diff --git a/src/components/LocaleSwitcher.tsx b/src/components/LocaleSwitcher.tsx
index e4856c5..c432e5c 100644
--- a/src/components/LocaleSwitcher.tsx
+++ b/src/components/LocaleSwitcher.tsx
@@ -26,7 +26,7 @@ export const LocaleSwitcher = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button className="p-2 focus-visible:ring-offset-0" variant="ghost" aria-label="lang-switcher">
+        <Button className="p-2 focus-visible:ring-offset-0" variant="ghost" size="icon" aria-label="lang-switcher">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             className="size-6 stroke-current stroke-2"
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index 8b59738..e586c83 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -63,7 +63,7 @@ export function DataTable<TData, TValue>({
                     data-state={row.getIsSelected() && 'selected'}
                   >
                     {row.getVisibleCells().map(cell => (
-                      <TableCell key={cell.id}>
+                      <TableCell key={cell.id} className="whitespace-nowrap">
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
diff --git a/src/features/billing/PricingCard.tsx b/src/features/billing/PricingCard.tsx
index ca0330f..d633859 100644
--- a/src/features/billing/PricingCard.tsx
+++ b/src/features/billing/PricingCard.tsx
@@ -1,10 +1,10 @@
 import { useTranslations } from 'next-intl';
 import React from 'react';
 
-import type { BillingInterval, PlanId } from '@/types/Subscription';
+import type { BillingInterval } from '@/types/Subscription';
 
 export const PricingCard = (props: {
-  planId: PlanId;
+  planId: string;
   price: number;
   interval: BillingInterval;
   button: React.ReactNode;
diff --git a/src/features/billing/PricingInformation.tsx b/src/features/billing/PricingInformation.tsx
index a320297..fa83531 100644
--- a/src/features/billing/PricingInformation.tsx
+++ b/src/features/billing/PricingInformation.tsx
@@ -2,17 +2,16 @@ import { useTranslations } from 'next-intl';
 
 import { PricingCard } from '@/features/billing/PricingCard';
 import { PricingFeature } from '@/features/billing/PricingFeature';
-import type { PlanId } from '@/types/Subscription';
 import { PricingPlanList } from '@/utils/AppConfig';
 
 export const PricingInformation = (props: {
-  buttonList: Record<PlanId, React.ReactNode>;
+  buttonList: Record<string, React.ReactNode>;
 }) => {
   const t = useTranslations('PricingPlan');
 
   return (
     <div className="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3">
-      {PricingPlanList.map(plan => (
+      {Object.values(PricingPlanList).map(plan => (
         <PricingCard
           key={plan.id}
           planId={plan.id}
diff --git a/src/features/dashboard/DashboardHeader.tsx b/src/features/dashboard/DashboardHeader.tsx
index 1227fb1..5fc0e55 100644
--- a/src/features/dashboard/DashboardHeader.tsx
+++ b/src/features/dashboard/DashboardHeader.tsx
@@ -54,7 +54,7 @@ export const DashboardHeader = (props: {
           skipInvitationScreen
           appearance={{
             elements: {
-              organizationSwitcherTrigger: 'max-w-52',
+              organizationSwitcherTrigger: 'max-w-28 sm:max-w-52',
             },
           }}
         />
@@ -71,7 +71,7 @@ export const DashboardHeader = (props: {
       </div>
 
       <div>
-        <ul className="flex items-center gap-x-1 [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
+        <ul className="flex items-center gap-x-1.5 [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
           <li>
             <div className="lg:hidden">
               <DropdownMenu>
@@ -89,6 +89,8 @@ export const DashboardHeader = (props: {
             </div>
           </li>
 
+          {/* PRO: Dark mode toggle button */}
+
           <li>
             <LocaleSwitcher />
           </li>
diff --git a/src/features/landing/CenteredFooter.tsx b/src/features/landing/CenteredFooter.tsx
index 84cb4fa..98030dd 100644
--- a/src/features/landing/CenteredFooter.tsx
+++ b/src/features/landing/CenteredFooter.tsx
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 
@@ -28,12 +27,12 @@ export const CenteredFooter = (props: {
           {`© Copyright ${new Date().getFullYear()} ${props.name}. `}
           {t.rich('designed_by', {
             author: () => (
-              <Link
+              <a
                 className="text-blue-500 hover:text-blue-600"
                 href="https://creativedesignsguru.com"
               >
                 Creative Designs Guru
-              </Link>
+              </a>
             ),
           })}
           {/*
diff --git a/src/features/landing/CenteredMenu.tsx b/src/features/landing/CenteredMenu.tsx
index 42d1156..80d8445 100644
--- a/src/features/landing/CenteredMenu.tsx
+++ b/src/features/landing/CenteredMenu.tsx
@@ -37,7 +37,7 @@ export const CenteredMenu = (props: {
           navClass,
         )}
       >
-        <ul className="flex flex-row items-center gap-x-4 text-lg font-medium [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
+        <ul className="flex flex-row items-center gap-x-1.5 text-lg font-medium [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
           {props.rightMenu}
         </ul>
       </div>
diff --git a/src/features/landing/FeatureCard.tsx b/src/features/landing/FeatureCard.tsx
index 24cb884..374e276 100644
--- a/src/features/landing/FeatureCard.tsx
+++ b/src/features/landing/FeatureCard.tsx
@@ -4,7 +4,7 @@ export const FeatureCard = (props: {
   children: React.ReactNode;
 }) => (
   <div className="rounded-xl border border-border bg-card p-5">
-    <div className="size-12 rounded-lg bg-gradient-to-br from-indigo-400 via-purple-400 to-pink-400 p-2 [&_svg]:stroke-primary-foreground [&_svg]:stroke-2">
+    <div className="size-12 rounded-lg bg-gradient-to-br from-indigo-400 via-purple-400 to-pink-400 p-2 [&_svg]:stroke-white [&_svg]:stroke-2">
       {props.icon}
     </div>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index c475962..d6ec997 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -142,7 +142,8 @@
     "edit": "Edit",
     "delete": "Delete",
     "title_header": "Title",
-    "message_header": "Message"
+    "message_header": "Message",
+    "created_at_header": "Created at"
   },
   "AddTodo": {
     "title_bar": "Add Todo",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 0e743a9..868a0b6 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -101,7 +101,7 @@
     "title_bar": "Tableau de bord",
     "title_bar_description": "Bienvenue sur votre tableau de bord",
     "message_state_title": "C'est parti",
-    "message_state_description": "Vous pouvez personnaliser cette page en modifiant le fichier dans <code>src/app/[locale]/(auth)/dashboard/page.tsx</code>",
+    "message_state_description": "Vous pouvez personnaliser cette page en modifiant le fichier dans <code>dashboard/page.tsx</code>",
     "message_state_button": "Besoin d'une intégration Stripe ? Découvrez Next.js Boilerplate Pro"
   },
   "UserProfile": {
@@ -142,7 +142,8 @@
     "edit": "Modifier",
     "delete": "Supprimer",
     "title_header": "Titre",
-    "message_header": "Message"
+    "message_header": "Message",
+    "created_at_header": "Créé le"
   },
   "AddTodo": {
     "title_bar": "Ajouter une todo",
diff --git a/src/templates/Navbar.tsx b/src/templates/Navbar.tsx
index 937902e..2481bba 100644
--- a/src/templates/Navbar.tsx
+++ b/src/templates/Navbar.tsx
@@ -17,6 +17,7 @@ export const Navbar = () => {
         logo={<Logo />}
         rightMenu={(
           <>
+            {/* PRO: Dark mode toggle button */}
             <li>
               <LocaleSwitcher />
             </li>
diff --git a/src/utils/AppConfig.ts b/src/utils/AppConfig.ts
index 26cd5f8..f9a6313 100644
--- a/src/utils/AppConfig.ts
+++ b/src/utils/AppConfig.ts
@@ -26,8 +26,8 @@ export const PLAN_ID = {
   ENTERPRISE: 'enterprise',
 } as const;
 
-export const PricingPlanList: Array<PricingPlan> = [
-  {
+export const PricingPlanList: Record<string, PricingPlan> = {
+  [PLAN_ID.FREE]: {
     id: PLAN_ID.FREE,
     price: 0,
     interval: BILLING_INTERVAL.MONTH,
@@ -41,7 +41,7 @@ export const PricingPlanList: Array<PricingPlan> = [
       transfer: 2,
     },
   },
-  {
+  [PLAN_ID.PREMIUM]: {
     id: PLAN_ID.PREMIUM,
     price: 79,
     interval: BILLING_INTERVAL.MONTH,
@@ -56,7 +56,7 @@ export const PricingPlanList: Array<PricingPlan> = [
       transfer: 5,
     },
   },
-  {
+  [PLAN_ID.ENTERPRISE]: {
     id: PLAN_ID.ENTERPRISE,
     price: 199,
     interval: BILLING_INTERVAL.MONTH,
@@ -71,4 +71,4 @@ export const PricingPlanList: Array<PricingPlan> = [
       transfer: 100,
     },
   },
-];
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 33c1ec6..52ba125 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,6 @@ import type { Config } from 'tailwindcss';
 const config = {
   darkMode: ['class'],
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  prefix: '',
   theme: {
     extend: {
       colors: {