Update dependencies and import dynamic method

This commit updates multiple dependencies in the pnpm-lock.yaml file and imports the dynamic method from 'next/dynamic' in the site-header-account-section.tsx file. These updates are part of routine maintenance and improvement of the codebase. The import allows for dynamic imports, which can enhance performance.
2024-04-16 20:56:18 +08:00
parent f2be1b80f4
commit cad729670f
26 changed files with 918 additions and 1788 deletions
--- a/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx
@@ -37,13 +37,15 @@ export default function DashboardDemo() {
      >
        <Card>
          <CardHeader>
-            <CardTitle>Monthly Recurring Revenue</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Monthly Recurring Revenue</span>
+              <Trend trend={'up'}>20%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{`$${mrr[1]}`}</Figure>
-              <Trend trend={'up'}>20%</Trend>
            </div>

            <Chart data={mrr[0]} />
@@ -52,13 +54,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Revenue</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Revenue</span>
+              <Trend trend={'up'}>12%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
-            <div className={'flex items-center justify-between'}>
+            <div className={'mb-4 flex items-center justify-between'}>
              <Figure>{`$${netRevenue[1]}`}</Figure>
-              <Trend trend={'up'}>12%</Trend>
            </div>

            <Chart data={netRevenue[0]} />
@@ -67,13 +71,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Fees</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Fees</span>
+              <Trend trend={'up'}>9%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{`$${fees[1]}`}</Figure>
-              <Trend trend={'up'}>9%</Trend>
            </div>

            <Chart data={fees[0]} />
@@ -82,13 +88,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>New Customers</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>New Customers</span>
+              <Trend trend={'down'}>-25%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{`${newCustomers[1]}`}</Figure>
-              <Trend trend={'down'}>-25%</Trend>
            </div>

            <Chart data={newCustomers[0]} />
@@ -97,13 +105,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Visitors</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Visitors</span>
+              <Trend trend={'down'}>-4.3%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{visitors[1]}</Figure>
-              <Trend trend={'down'}>-4.3%</Trend>
            </div>

            <Chart data={visitors[0]} />
@@ -112,13 +122,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Returning Visitors</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Returning Visitors</span>
+              <Trend trend={'stale'}>10%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{returningVisitors[1]}</Figure>
-              <Trend trend={'stale'}>10%</Trend>
            </div>

            <Chart data={returningVisitors[0]} />
@@ -127,13 +139,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Churn</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Churn</span>
+              <Trend trend={'up'}>-10%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{churn[1]}%</Figure>
-              <Trend trend={'up'}>-10%</Trend>
            </div>

            <Chart data={churn[0]} />
@@ -142,13 +156,15 @@ export default function DashboardDemo() {

        <Card>
          <CardHeader>
-            <CardTitle>Support Tickets</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Support Tickets</span>
+              <Trend trend={'up'}>-30%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{tickets[1]}</Figure>
-              <Trend trend={'up'}>-30%</Trend>
            </div>

            <Chart data={tickets[0]} />
@@ -159,13 +175,15 @@ export default function DashboardDemo() {
      <div>
        <Card>
          <CardHeader>
-            <CardTitle>Active Users</CardTitle>
+            <CardTitle className={'flex items-center justify-between'}>
+              <span>Active Users</span>
+              <Trend trend={'up'}>10%</Trend>
+            </CardTitle>
          </CardHeader>

          <CardContent>
            <div className={'flex items-center justify-between'}>
              <Figure>{activeUsers[1]}</Figure>
-              <Trend trend={'up'}>10%</Trend>
            </div>

            <Chart data={activeUsers[0]} />
@@ -217,7 +235,7 @@ function Chart(
  return (
    <div
      className={
-        'h-36 duration-200 animate-in fade-in slide-in-from-left-4 slide-in-from-top-4'
+        'h-36 py-2 duration-200 animate-in fade-in slide-in-from-left-4 slide-in-from-top-4'
      }
    >
      <ResponsiveContainer width={'100%'} height={'100%'}>
@@ -333,7 +351,11 @@ function BadgeWithTrend(props: React.PropsWithChildren<{ trend: string }>) {
 }

 function Figure(props: React.PropsWithChildren) {
-  return <div className={'text-3xl font-extrabold'}>{props.children}</div>;
+  return (
+    <div className={'font-heading text-4xl font-extrabold'}>
+      {props.children}
+    </div>
+  );
 }

 function Trend(
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -1,5 +1,6 @@
 'use client';

+import dynamic from 'next/dynamic';
 import Link from 'next/link';

 import type { User } from '@supabase/supabase-js';
@@ -10,12 +11,18 @@ import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
 import { Button } from '@kit/ui/button';
-import { ModeToggle } from '@kit/ui/mode-toggle';
 import { Trans } from '@kit/ui/trans';

 import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';

+const ModeToggle = dynamic(
+  () => import('@kit/ui/mode-toggle').then((mod) => mod.ModeToggle),
+  {
+    ssr: false,
+  },
+);
+
 const paths = {
  home: pathsConfig.app.home,
 };
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Urbanist as HeadingFont, Inter as SansFont } from 'next/font/google';
+import Head from 'next/head';
 import { cookies, headers } from 'next/headers';

 import { Toaster } from '@kit/ui/sonner';
@@ -36,7 +37,9 @@ export default async function RootLayout({

  return (
    <html lang={language} className={getClassName(theme)}>
+      <Head>
        <CsrfTokenMeta />
+      </Head>

      <body>
        <RootProviders theme={theme} lang={language}>
@@ -51,7 +54,7 @@ export default async function RootLayout({

 function getClassName(theme?: string) {
  const dark = theme === 'dark';
-  const light = theme === 'light';
+  const light = !dark;

  return cn(
    'min-h-screen bg-background antialiased',
--- a/apps/web/components/root-providers.tsx
+++ b/apps/web/components/root-providers.tsx
@@ -57,6 +57,7 @@ export function RootProviders({
                  enableSystem
                  disableTransitionOnChange
                  defaultTheme={theme}
+                  enableColorScheme={false}
                >
                  {children}
                </ThemeProvider>
--- a/apps/web/next.config.mjs
+++ b/apps/web/next.config.mjs
@@ -52,6 +52,9 @@ const config = {
      transform: 'lodash/{{member}}',
    },
  },
+  env: {
+    NEXT_PUBLIC_BUILD_ID: process.env.GIT_HASH ?? performance.now().toString(),
+  },
  /** We already do linting and typechecking as separate tasks in CI */
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -48,18 +48,18 @@
    "@kit/team-accounts": "workspace:^",
    "@kit/ui": "workspace:^",
    "@makerkit/data-loader-supabase-core": "^0.0.7",
-    "@makerkit/data-loader-supabase-nextjs": "beta",
+    "@makerkit/data-loader-supabase-nextjs": "^1.1.0",
    "@marsidev/react-turnstile": "^0.5.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@supabase/supabase-js": "^2.42.4",
-    "@tanstack/react-query": "5.29.0",
+    "@tanstack/react-query": "5.29.2",
    "@tanstack/react-query-next-experimental": "^5.29.2",
    "@tanstack/react-table": "^8.16.0",
    "date-fns": "^3.6.0",
-    "edge-csrf": "^1.0.11",
+    "edge-csrf": "1.0.12-sveltekit-1",
    "i18next": "^23.11.2",
    "i18next-resources-to-backend": "^1.2.1",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "next-sitemap": "^4.2.3",
    "next-themes": "0.3.0",
@@ -76,7 +76,7 @@
    "@kit/prettier-config": "workspace:^",
    "@kit/tailwind-config": "workspace:^",
    "@kit/tsconfig": "workspace:^",
-    "@next/bundle-analyzer": "14.2.0",
+    "@next/bundle-analyzer": "14.2.1",
    "@types/mdx": "^2.0.13",
    "@types/node": "^20.12.7",
    "@types/react": "^18.2.79",
@@ -85,8 +85,8 @@
    "dotenv-cli": "^7.4.1",
    "eslint": "^8.57.0",
    "prettier": "^3.2.5",
-    "supabase": "^1.157.2",
-    "tailwindcss": "3.4.1",
+    "supabase": "^1.159.1",
+    "tailwindcss": "3.4.3",
    "typescript": "^5.4.5"
  },
  "eslintConfig": {
--- a/package.json
+++ b/package.json
@@ -47,7 +47,9 @@
  },
  "pnpm": {
    "overrides": {
-      "next": "14.2.1"
+      "next": "14.2.1",
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
    }
  }
 }
--- a/packages/billing/core/package.json
+++ b/packages/billing/core/package.json
@@ -28,7 +28,7 @@
    "@kit/tailwind-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "zod": "^3.22.4"
  },
  "eslintConfig": {
--- a/packages/billing/gateway/package.json
+++ b/packages/billing/gateway/package.json
@@ -45,7 +45,7 @@
    "@supabase/supabase-js": "^2.42.4",
    "@types/react": "^18.2.79",
    "date-fns": "^3.6.0",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "react": "18.2.0",
    "react-hook-form": "^7.51.3",
--- a/packages/billing/stripe/package.json
+++ b/packages/billing/stripe/package.json
@@ -26,7 +26,7 @@
  "dependencies": {
    "@stripe/react-stripe-js": "^2.7.0",
    "@stripe/stripe-js": "^3.3.0",
-    "stripe": "^14.25.0"
+    "stripe": "^15.1.0"
  },
  "devDependencies": {
    "@kit/billing": "workspace:^",
--- a/packages/billing/stripe/src/services/stripe-sdk.ts
+++ b/packages/billing/stripe/src/services/stripe-sdk.ts
@@ -2,7 +2,7 @@ import 'server-only';

 import { StripeServerEnvSchema } from '../schema/stripe-server-env.schema';

-const STRIPE_API_VERSION = '2023-10-16';
+const STRIPE_API_VERSION = '2024-04-10';

 /**
 * @description returns a Stripe instance
--- a/packages/database-webhooks/package.json
+++ b/packages/database-webhooks/package.json
@@ -31,7 +31,7 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:^",
    "@supabase/supabase-js": "^2.42.4",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "zod": "^3.22.4"
  },
  "eslintConfig": {
--- a/packages/email-templates/package.json
+++ b/packages/email-templates/package.json
@@ -13,7 +13,7 @@
    ".": "./src/index.ts"
  },
  "dependencies": {
-    "@react-email/components": "0.0.15"
+    "@react-email/components": "0.0.16"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
--- a/packages/features/accounts/package.json
+++ b/packages/features/accounts/package.json
@@ -32,10 +32,10 @@
    "@kit/ui": "workspace:^",
    "@radix-ui/react-icons": "^1.3.0",
    "@supabase/supabase-js": "^2.42.4",
-    "@tanstack/react-query": "5.29.0",
+    "@tanstack/react-query": "5.29.2",
    "@types/react": "^18.2.79",
    "@types/react-dom": "^18.2.25",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "next-themes": "0.3.0",
    "react": "18.2.0",
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -98,7 +98,7 @@ export function AccountSelector({
            variant="ghost"
            role="combobox"
            aria-expanded={open}
-            className={cn('group w-full shadow', {
+            className={cn('dark:shadow-primary/10 group w-full border px-4', {
              'justify-between': !collapsed,
              'justify-center': collapsed,
            })}
--- a/packages/features/admin/package.json
+++ b/packages/features/admin/package.json
@@ -34,12 +34,12 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:^",
    "@makerkit/data-loader-supabase-core": "^0.0.7",
-    "@makerkit/data-loader-supabase-nextjs": "^1.0.0",
+    "@makerkit/data-loader-supabase-nextjs": "^1.1.0",
    "@supabase/supabase-js": "^2.42.4",
-    "@tanstack/react-query": "5.29.0",
+    "@tanstack/react-query": "5.29.2",
    "@tanstack/react-table": "^8.16.0",
    "@types/react": "^18.2.79",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "react": "18.2.0",
    "react-hook-form": "^7.51.3",
--- a/packages/features/auth/package.json
+++ b/packages/features/auth/package.json
@@ -29,9 +29,9 @@
    "@marsidev/react-turnstile": "^0.5.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@supabase/supabase-js": "^2.42.4",
-    "@tanstack/react-query": "5.29.0",
+    "@tanstack/react-query": "5.29.2",
    "@types/react": "^18.2.79",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "react-hook-form": "^7.51.3",
    "react-i18next": "^14.1.0",
--- a/packages/features/team-accounts/package.json
+++ b/packages/features/team-accounts/package.json
@@ -30,13 +30,13 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:^",
    "@supabase/supabase-js": "^2.42.4",
-    "@tanstack/react-query": "5.29.0",
+    "@tanstack/react-query": "5.29.2",
    "@tanstack/react-table": "^8.16.0",
    "@types/react": "^18.2.79",
    "@types/react-dom": "^18.2.25",
    "class-variance-authority": "^0.7.0",
    "date-fns": "^3.6.0",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -21,7 +21,7 @@
    "@kit/tailwind-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "i18next": "^23.11.2",
-    "i18next-browser-languagedetector": "7.2.0",
+    "i18next-browser-languagedetector": "7.2.1",
    "i18next-resources-to-backend": "^1.2.1",
    "react-i18next": "^14.1.0"
  },
--- a/packages/i18n/src/i18n.client.ts
+++ b/packages/i18n/src/i18n.client.ts
@@ -47,6 +47,19 @@ export function initializeI18nClient(
            return reject(err);
          }

+          console.log('i18n client initialized');
+          console.log(
+            `initialized with ${i18next.languages.join(', ')} languages`,
+            clientInstance,
+          );
+
+          console.log(
+            'resource',
+            i18next.getResource('en', 'billing', 'billingInterval.month'),
+          );
+
+          console.log(i18next.t('billing:billingInterval.month'));
+
          clientInstance = i18next;

          resolve(clientInstance);
--- a/packages/supabase/package.json
+++ b/packages/supabase/package.json
@@ -30,7 +30,7 @@
    "@supabase/gotrue-js": "2.62.2",
    "@supabase/ssr": "^0.3.0",
    "@supabase/supabase-js": "^2.42.4",
-    "@tanstack/react-query": "5.29.0",
+    "@tanstack/react-query": "5.29.2",
    "@types/react": "^18.2.79",
    "next": "14.2.1",
    "react": "18.2.0",
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,7 +29,7 @@
    "@radix-ui/react-tooltip": "1.0.7",
    "clsx": "^2.1.0",
    "cmdk": "1.0.0",
-    "input-otp": "1.2.3",
+    "input-otp": "1.2.4",
    "react-top-loading-bar": "2.3.1",
    "tailwind-merge": "^2.2.2"
  },
@@ -58,7 +58,7 @@
    "class-variance-authority": "^0.7.0",
    "date-fns": "^3.6.0",
    "eslint": "^8.57.0",
-    "lucide-react": "^0.367.0",
+    "lucide-react": "^0.368.0",
    "next": "14.2.1",
    "next-themes": "0.3.0",
    "prettier": "^3.2.5",
@@ -66,7 +66,7 @@
    "react-hook-form": "^7.51.3",
    "react-i18next": "^14.1.0",
    "sonner": "^1.4.41",
-    "tailwindcss": "3.4.1",
+    "tailwindcss": "3.4.3",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.4.5",
    "zod": "^3.22.4"
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -44,7 +44,9 @@ export function PageHeader({
  mobileNavigation?: React.ReactNode;
 }>) {
  return (
-    <div className={'flex items-start justify-between p-4'}>
+    <div
+      className={'mb-4 flex items-start justify-between border-b px-4 py-2.5'}
+    >
      <div
        className={
          'flex items-center space-x-4 lg:flex-col lg:items-start lg:space-x-0'
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -160,13 +160,13 @@ export function SidebarItem({

  const currentPath = usePathname() ?? '';
  const active = isRouteActive(path, currentPath, end ? 0 : 3);
-  const variant = active ? 'default' : 'ghost';
+  const variant = active ? 'secondary' : 'ghost';
  const size = collapsed ? 'icon' : 'default';

  return (
    <Link key={path} href={path}>
      <Button
-        className={cn('flex w-full', {
+        className={cn('flex w-full shadow-none', {
          'justify-start space-x-2': !collapsed,
        })}
        size={size}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tooling/tailwind/package.json
+++ b/tooling/tailwind/package.json
@@ -15,8 +15,8 @@
  },
  "dependencies": {
    "autoprefixer": "^10.4.19",
-    "postcss": "8.4.33",
-    "tailwindcss": "3.4.1",
+    "postcss": "8.4.38",
+    "tailwindcss": "3.4.3",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {