fix: remove hydration error and unify with pro version 1.6.1

ixartz · Oct 17, 2024 · ea2d02b · ea2d02b
1 parent 7c10ab0
commit ea2d02b
Show file tree

Hide file tree

Showing 18 changed files with 38 additions and 25 deletions.
diff --git 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
diff --git a/public/assets/images/clerk-logo-white.png b/public/assets/images/clerk-logo-white.png
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -4,7 +4,6 @@ import type { Config } from 'tailwindcss';
 const config = {
   darkMode: ['class'],
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  prefix: '',
   theme: {
     extend: {
       colors: {