Merge branch 'main' into feat/document-auth

2025-11-26 06:32:08 +10:00 · 2024-03-25 23:06:46 +08:00
parent 1375946bc5 3eddfcc805
commit 94da57704d
56 changed files with 4919 additions and 1306 deletions
--- a/apps/marketing/next.config.js
+++ b/apps/marketing/next.config.js
@ -21,7 +21,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
  experimental: {
    outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
    serverActions: {
      bodySizeLimit: '50mb',
    },
--- a/apps/marketing/src/app/(marketing)/layout.tsx
+++ b/apps/marketing/src/app/(marketing)/layout.tsx
@ -38,7 +38,8 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
  return (
    <div
      className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
-        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
+        'overflow-y-auto overflow-x-hidden':
+          pathname && !['/singleplayer', '/pricing'].includes(pathname),
      })}
    >
      <div
--- a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
@ -1,11 +1,10 @@
 'use client';

-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';

 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';

 export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
  data: T;
@ -34,13 +33,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
    .reverse();

  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        <span>{extraInfo}</span>
-      </div>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+          <span>{extraInfo}</span>
+        </div>

-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
        <ResponsiveContainer width="100%" height={chartHeight}>
          <BarChart data={formattedData}>
            <XAxis dataKey="month" />
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@ -5,8 +5,6 @@ import { useEffect, useState } from 'react';

 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';

-import { cn } from '@documenso/ui/lib/utils';
-
 import { CAP_TABLE } from './data';

 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
@ -49,10 +47,12 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
    setIsSSR(false);
  }, []);
  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Cap Table</h3>
+        </div>

-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
        {!isSSR && (
          <PieChart width={400} height={400}>
            <Pie
--- a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@ -1,11 +1,10 @@
 'use client';

-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';

 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';

 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
  data: Record<string, string | number>[];
@ -18,10 +17,12 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
  }));

  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Funding Raised</h3>
+        </div>

-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
        <ResponsiveContainer width="100%" height={400}>
          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
            <XAxis dataKey="date" />
--- a/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type MonthlyCompletedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyCompletedDocumentsChart = ({
+  className,
+  data,
+}: MonthlyCompletedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Completed Documents']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
--- a/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';

 export type MonthlyNewUsersChartProps = {
  className?: string;
@ -20,12 +19,12 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
  });

  return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">New Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">New Users</h3>
+        </div>

-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
        <ResponsiveContainer width="100%" height={400}>
          <BarChart data={formattedData}>
            <XAxis dataKey="month" />
--- a/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx
@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';

 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';

 export type MonthlyTotalUsersChartProps = {
  className?: string;
@ -20,12 +19,12 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
  });

  return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Total Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Users</h3>
+        </div>

-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
        <ResponsiveContainer width="100%" height={400}>
          <BarChart data={formattedData}>
            <XAxis dataKey="month" />
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@ -2,20 +2,23 @@ import type { Metadata } from 'next';

 import { z } from 'zod';

+import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';

 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
-import { MetricCard } from '~/app/(marketing)/open/metric-card';
-import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 import { CallToAction } from '~/components/(marketing)/call-to-action';

 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { MetricCard } from './metric-card';
+import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
+import { SalaryBands } from './salary-bands';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
+import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
 import { Typefully } from './typefully';

 export const metadata: Metadata = {
@ -131,16 +134,18 @@ export default async function OpenPage() {
    { total_count: mergedPullRequests },
    STARGAZERS_DATA,
    EARLY_ADOPTERS_DATA,
+    MONTHLY_USERS,
+    MONTHLY_COMPLETED_DOCUMENTS,
  ] = await Promise.all([
    fetchGithubStats(),
    fetchOpenIssues(),
    fetchMergedPullRequests(),
    fetchStargazers(),
    fetchEarlyAdopters(),
+    getUserMonthlyGrowth(),
+    getCompletedDocumentsMonthly(),
  ]);

-  const MONTHLY_USERS = await getUserMonthlyGrowth();
-
  return (
    <div>
      <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
@ -161,7 +166,7 @@ export default async function OpenPage() {
          </p>
        </div>

-        <div className="mt-12 grid grid-cols-12 gap-8">
+        <div className="my-12 grid grid-cols-12 gap-8">
          <div className="col-span-12 grid grid-cols-4 gap-4">
            <MetricCard
              className="col-span-2 lg:col-span-1"
@ -188,11 +193,57 @@ export default async function OpenPage() {
          <TeamMembers className="col-span-12" />

          <SalaryBands className="col-span-12" />
+        </div>

+        <h2 className="px-4 text-2xl font-semibold">Finances</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
          <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />

          <CapTable className="col-span-12 lg:col-span-6" />
+        </div>

+        <h2 className="px-4 text-2xl font-semibold">Community</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="stars"
+            title="GitHub: Total Stars"
+            label="Stars"
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="mergedPRs"
+            title="GitHub: Total Merged PRs"
+            label="Merged PRs"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="forks"
+            title="GitHub: Total Forks"
+            label="Forks"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="openIssues"
+            title="GitHub: Total Open Issues"
+            label="Open Issues"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <Typefully className="col-span-12 lg:col-span-6" />
+        </div>
+
+        <h2 className="px-4 text-2xl font-semibold">Growth</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
          <BarMetric<EarlyAdoptersType>
            data={EARLY_ADOPTERS_DATA}
            metricKey="earlyAdopters"
@ -202,57 +253,29 @@ export default async function OpenPage() {
            extraInfo={<OpenPageTooltip />}
          />

-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="stars"
-            title="Github: Total Stars"
-            label="Stars"
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="mergedPRs"
-            title="Github: Total Merged PRs"
-            label="Merged PRs"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="forks"
-            title="Github: Total Forks"
-            label="Forks"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="openIssues"
-            title="Github: Total Open Issues"
-            label="Open Issues"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
          <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
          <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />

-          <Typefully className="col-span-12 lg:col-span-6" />
-
-          <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
-            <h2 className="text-2xl font-bold">Where's the rest?</h2>
-
-            <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
-              We're still working on getting all our metrics together. We'll update this page as
-              soon as we have more to share.
-            </p>
-          </div>
+          <MonthlyCompletedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
+          <TotalSignedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
        </div>
      </div>

+      <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+        <h2 className="text-2xl font-bold">Is there more?</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+          This page is evolving as we learn what makes a great signing company. We'll update it when
+          we have more to share.
+        </p>
+      </div>
+
      <CallToAction className="mt-12" utmSource="open-page" />
    </div>
  );
--- a/apps/marketing/src/app/(marketing)/open/team-members.tsx
+++ b/apps/marketing/src/app/(marketing)/open/team-members.tsx
@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';

 import { cn } from '@documenso/ui/lib/utils';
 import {
--- a/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx
@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type TotalSignedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Completed Documents</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US'),
+                'Total Completed Documents',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
--- a/apps/marketing/src/app/(marketing)/open/typefully.tsx
+++ b/apps/marketing/src/app/(marketing)/open/typefully.tsx
@ -6,18 +6,19 @@ import Link from 'next/link';

 import { FaXTwitter } from 'react-icons/fa6';

-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';

 export type TypefullyProps = HTMLAttributes<HTMLDivElement>;

 export const Typefully = ({ className, ...props }: TypefullyProps) => {
  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Twitter Stats</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Twitter Stats</h3>
+        </div>

-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border py-8 shadow-sm hover:shadow">
-        <div className="flex flex-col items-center gap-y-4 text-center">
+        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
          <FaXTwitter className="h-12 w-12" />
          <Link href="https://typefully.com/documenso/stats" target="_blank">
            <h1>Documenso on X</h1>
--- a/apps/marketing/src/components/(marketing)/callout.tsx
+++ b/apps/marketing/src/components/(marketing)/callout.tsx
@ -53,7 +53,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
      >
        <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
          <LuGithub className="mr-2 h-5 w-5" />
-          Star on Github
+          Star on GitHub
          {starCount && starCount > 0 && (
            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
              {starCount.toLocaleString('en-US')}
--- a/apps/marketing/src/components/(marketing)/hero.tsx
+++ b/apps/marketing/src/components/(marketing)/hero.tsx
@ -123,7 +123,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
          <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
            <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
              <LuGithub className="mr-2 h-5 w-5" />
-              Star on Github
+              Star on GitHub
            </Button>
          </Link>
        </motion.div>
--- a/apps/marketing/src/components/(marketing)/pricing-table.tsx
+++ b/apps/marketing/src/components/(marketing)/pricing-table.tsx
@ -23,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {

  return (
    <div className={cn('', className)} {...props}>
-      <div className="flex items-center justify-center gap-x-6">
+      <div className="bg-background sticky top-32 flex items-center justify-end gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static lg:justify-center">
        <AnimatePresence>
          <motion.button
            key="MONTHLY"
@ -40,7 +40,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
            {period === 'MONTHLY' && (
              <motion.div
                layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
              />
            )}
          </motion.button>
@ -63,7 +63,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
            {period === 'YEARLY' && (
              <motion.div
                layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
              />
            )}
          </motion.button>