From 6a9e1a574185a7a9015e08b2588e17168aaaf1b5 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Mon, 31 Mar 2025 21:51:19 +0800 Subject: [PATCH 1/5] chore: UI lib - update telemetry (#34569) * chore: update telemetry * Add NEXT_PUBLIC_API_URL to turbo.json. * add copy event * Update command-copy-button.tsx * Update command-copy-button.tsx * move telemetry wrapper down to child layout * update telemetry naming --------- Co-authored-by: Ivan Vasilov Co-authored-by: Pamela Chia --- apps/ui-library/.env | 3 +- apps/ui-library/app/(app)/layout.tsx | 2 + .../app/(app)/telemetry-wrapper.tsx | 16 +++++++ apps/ui-library/app/Providers.tsx | 3 +- .../components/command-copy-button.tsx | 46 +++++++++++++++++++ apps/ui-library/lib/constants.ts | 1 + apps/ui-library/lib/telemetry.ts | 19 ++++++++ packages/common/telemetry-constants.ts | 18 ++++++++ turbo.json | 1 + 9 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 apps/ui-library/app/(app)/telemetry-wrapper.tsx create mode 100644 apps/ui-library/lib/constants.ts create mode 100644 apps/ui-library/lib/telemetry.ts diff --git a/apps/ui-library/.env b/apps/ui-library/.env index 69c207b2cd1..47ab9bf34ed 100644 --- a/apps/ui-library/.env +++ b/apps/ui-library/.env @@ -1,4 +1,5 @@ # Default to local supabase for local development NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321 NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0 -NEXT_PUBLIC_BASE_PATH=/ui \ No newline at end of file +NEXT_PUBLIC_BASE_PATH=/ui +NEXT_PUBLIC_API_URL="http://localhost:8080/platform" \ No newline at end of file diff --git a/apps/ui-library/app/(app)/layout.tsx b/apps/ui-library/app/(app)/layout.tsx index 32526719839..e4706682165 100644 --- a/apps/ui-library/app/(app)/layout.tsx +++ b/apps/ui-library/app/(app)/layout.tsx @@ -1,5 +1,6 @@ import { Sidebar } from '@/components/sidebar' import { SiteFooter } from '@/components/site-footer' +import { TelemetryWrapper } from './telemetry-wrapper' interface AppLayoutProps { children: React.ReactNode @@ -24,6 +25,7 @@ export default function AppLayout({ children }: AppLayoutProps) { + ) } diff --git a/apps/ui-library/app/(app)/telemetry-wrapper.tsx b/apps/ui-library/app/(app)/telemetry-wrapper.tsx new file mode 100644 index 00000000000..5460e46156b --- /dev/null +++ b/apps/ui-library/app/(app)/telemetry-wrapper.tsx @@ -0,0 +1,16 @@ +'use client' + +import { API_URL } from '@/lib/constants' +import { IS_PLATFORM, PageTelemetry } from 'common' +import { useConsent } from 'ui-patterns/ConsentToast' + +export const TelemetryWrapper = () => { + const { hasAcceptedConsent } = useConsent() + return ( + + ) +} diff --git a/apps/ui-library/app/Providers.tsx b/apps/ui-library/app/Providers.tsx index 97e0ebdbc72..d6083701403 100644 --- a/apps/ui-library/app/Providers.tsx +++ b/apps/ui-library/app/Providers.tsx @@ -1,13 +1,14 @@ 'use client' -import { AuthProvider } from 'common' import { Provider as JotaiProvider } from 'jotai' import { ThemeProvider as NextThemesProvider } from 'next-themes' import { ThemeProviderProps } from 'next-themes/dist/types' import { FrameworkProvider } from '@/context/framework-context' import { MobileMenuProvider } from '@/context/mobile-menu-context' +import { AuthProvider } from 'common' import { TooltipProvider } from 'ui' +import { useConsent } from 'ui-patterns/ConsentToast' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return ( diff --git a/apps/ui-library/components/command-copy-button.tsx b/apps/ui-library/components/command-copy-button.tsx index d040a80a10d..a5fff1b356d 100644 --- a/apps/ui-library/components/command-copy-button.tsx +++ b/apps/ui-library/components/command-copy-button.tsx @@ -2,10 +2,13 @@ import { Check, Copy } from 'lucide-react' import { useEffect, useState } from 'react' + +import { useSendTelemetryEvent } from 'lib/telemetry' import { Button_Shadcn_ } from 'ui' export function CommandCopyButton({ command }: { command: string }) { const [copied, setCopied] = useState(false) + const sendTelemetryEvent = useSendTelemetryEvent() useEffect(() => { if (copied) { @@ -14,13 +17,56 @@ export function CommandCopyButton({ command }: { command: string }) { } }, [copied]) + const parseCommandForTelemetry = (cmd: string) => { + // Extract framework from URL (e.g., 'nextjs' from 'password-based-auth-nextjs.json') + const frameworkMatch = cmd.match(/\/ui\/r\/.*?-(\w+)\.json/) + const framework = frameworkMatch + ? (frameworkMatch[1] as 'nextjs' | 'react-router' | 'tanstack' | 'react') + : 'nextjs' + + // Extract package manager from command prefix (npx, pnpm, yarn, bun) + const packageManager = cmd.startsWith('npx') + ? ('npm' as const) + : cmd.startsWith('pnpm') + ? ('pnpm' as const) + : cmd.startsWith('yarn') + ? ('yarn' as const) + : cmd.startsWith('bun') + ? ('bun' as const) + : ('npm' as const) + + // Extract template title from URL (e.g., 'password-based-auth' from 'password-based-auth-nextjs.json') + const titleMatch = cmd.match(/\/ui\/r\/(.*?)-\w+\.json/) + const title = titleMatch ? titleMatch[1] : '' + + return { + framework, + packageManager, + title, + } + } + return ( { + // Copy command to clipboard navigator.clipboard.writeText(command) setCopied(true) + + // Parse command and send telemetry event + const { framework, packageManager, title } = parseCommandForTelemetry(command) + + sendTelemetryEvent({ + action: 'supabase_ui_command_copy_button_clicked', + properties: { + templateTitle: title, + command: command, + framework, + packageManager, + }, + }) }} > {copied ? : } diff --git a/apps/ui-library/lib/constants.ts b/apps/ui-library/lib/constants.ts new file mode 100644 index 00000000000..9b2dc13741b --- /dev/null +++ b/apps/ui-library/lib/constants.ts @@ -0,0 +1 @@ +export const API_URL = process.env.NEXT_PUBLIC_API_URL! diff --git a/apps/ui-library/lib/telemetry.ts b/apps/ui-library/lib/telemetry.ts new file mode 100644 index 00000000000..804549688cc --- /dev/null +++ b/apps/ui-library/lib/telemetry.ts @@ -0,0 +1,19 @@ +'use client' + +import { usePathname } from 'next/navigation' +import { useCallback } from 'react' + +import { sendTelemetryEvent } from 'common' +import { TelemetryEvent } from 'common/telemetry-constants' +import { API_URL } from 'lib/constants' + +export function useSendTelemetryEvent() { + const pathname = usePathname() + + return useCallback( + (event: TelemetryEvent) => { + return sendTelemetryEvent(API_URL, event, pathname) + }, + [pathname] + ) +} diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts index 6182dba9e30..83cdcdca392 100644 --- a/packages/common/telemetry-constants.ts +++ b/packages/common/telemetry-constants.ts @@ -1223,6 +1223,23 @@ export interface EdgeFunctionTestSidePanelOpenedEvent { } } +/** + * User copied the command for a Supabase UI component. + * + * @group Events + * @source supabase-ui + * @page /ui/docs/{framework}/{templateTitle} + */ +export interface SupabaseUiCommandCopyButtonClickedEvent { + action: 'supabase_ui_command_copy_button_clicked' + properties: { + templateTitle: string + command: string + framework: 'nextjs' | 'react-router' | 'tanstack' | 'react' + packageManager: 'npm' | 'pnpm' | 'yarn' | 'bun' + } +} + /** * @hidden */ @@ -1297,3 +1314,4 @@ export type TelemetryEvent = | EdgeFunctionDeployUpdatesButtonClickedEvent | EdgeFunctionTestSendButtonClickedEvent | EdgeFunctionTestSidePanelOpenedEvent + | SupabaseUiCommandCopyButtonClickedEvent diff --git a/turbo.json b/turbo.json index adcba386ab3..61988aaa14a 100644 --- a/turbo.json +++ b/turbo.json @@ -130,6 +130,7 @@ "NEXT_PUBLIC_APP_URL", "NEXT_PUBLIC_VERCEL_TARGET_ENV", "NEXT_PUBLIC_VERCEL_BRANCH_URL", + "NEXT_PUBLIC_API_URL", "NODE_ENV", "HIDE_TAILWIND_INDICATOR", // These envs are used in the packages From 8d98ecb16d2c3ce70743ddebd32c591b7b117b41 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Mon, 31 Mar 2025 16:02:17 +0200 Subject: [PATCH 2/5] fix: update clerk tpa free maus in blog post (#34579) --- apps/www/_blog/2025-03-31-clerk-tpa-pricing.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/www/_blog/2025-03-31-clerk-tpa-pricing.mdx b/apps/www/_blog/2025-03-31-clerk-tpa-pricing.mdx index 09ca2b9ebbb..20844473393 100644 --- a/apps/www/_blog/2025-03-31-clerk-tpa-pricing.mdx +++ b/apps/www/_blog/2025-03-31-clerk-tpa-pricing.mdx @@ -55,10 +55,10 @@ One more thing: today we're making Third-party Auth cheaper so that it has prici You can have up to 50,000 MAU on the Free plan, or 100,000 MAU on the Pro plan and $0.00325 per MAU above that number. -| | Free Plan | Pro Plan | -| ---------- | ---------------- | --------------------- | -| Previously | 50 MAUs included | 50,000 MAUs included | -| Now | 50 MAUs included | 100,000 MAUs included | +| | Free Plan | Pro Plan | +| ---------- | -------------------- | --------------------- | +| Previously | 50 MAUs included | 50,000 MAUs included | +| Now | 50,000 MAUs included | 100,000 MAUs included | ## Get started today From 018d5afd9e888a80194df5cfe78874e10fe9e593 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 31 Mar 2025 11:43:13 -0230 Subject: [PATCH 3/5] UI lib/mobile fixes (#34576) * Mobile fixes * Add tanstack beta warning * Fix tanstack alert for dark mode --------- Co-authored-by: Ivan Vasilov --- apps/ui-library/app/(app)/page.tsx | 4 +-- apps/ui-library/components/block-preview.tsx | 2 +- apps/ui-library/components/mdx-components.tsx | 4 ++- apps/ui-library/components/tanstack-beta.tsx | 29 +++++++++++++++++++ .../docs/getting-started/quickstart.mdx | 2 ++ .../content/docs/tanstack/client.mdx | 2 ++ .../default/examples/realtime-chat-demo.tsx | 4 +-- .../default/examples/realtime-cursor-demo.tsx | 2 +- .../ui/src/components/shadcn/ui/accordion.tsx | 4 +-- 9 files changed, 44 insertions(+), 9 deletions(-) create mode 100644 apps/ui-library/components/tanstack-beta.tsx diff --git a/apps/ui-library/app/(app)/page.tsx b/apps/ui-library/app/(app)/page.tsx index 454e8aa807c..0d898254772 100644 --- a/apps/ui-library/app/(app)/page.tsx +++ b/apps/ui-library/app/(app)/page.tsx @@ -76,7 +76,7 @@ export default function Home() {
-
+
@@ -149,7 +149,7 @@ export default function Home() {
-
+
diff --git a/apps/ui-library/components/block-preview.tsx b/apps/ui-library/components/block-preview.tsx index 77e3a9fc251..777d8c8ab8b 100644 --- a/apps/ui-library/components/block-preview.tsx +++ b/apps/ui-library/components/block-preview.tsx @@ -39,7 +39,7 @@ export function BlockPreview({ name, wide = false, isPair = false }: ComponentPr
diff --git a/apps/ui-library/components/mdx-components.tsx b/apps/ui-library/components/mdx-components.tsx index ad7369663dd..68d470a4a95 100644 --- a/apps/ui-library/components/mdx-components.tsx +++ b/apps/ui-library/components/mdx-components.tsx @@ -31,6 +31,7 @@ import { TabsList_Shadcn_ as TabsList, TabsTrigger_Shadcn_ as TabsTrigger, } from 'ui' +import TanStackBeta from '@/components/tanstack-beta' import { Admonition } from 'ui-patterns/admonition' import { BlockItem } from './block-item' import { BlockPreview } from './block-preview' @@ -248,6 +249,7 @@ const components = { {...props} /> ), + TanStackBeta, // FrameworkDocs: ({ className, ...props }: React.ComponentProps) => ( // // ), @@ -257,7 +259,7 @@ const components = { LinkedCard: ({ className, ...props }: React.ComponentProps) => ( + +
+
+ + Heads up: TanStack Start is in beta. +
+ We're excited to support TanStack Start in our UI library! But since it's still + in beta, things may change quickly — expect breaking changes and some rough edges. + We'll do our best to keep up and make integration with Supabase as smooth as + possible. If you run into issues, have a look at the TanStack docs. + + TanStack Quickstart guide + +
+ +
+ ) +} diff --git a/apps/ui-library/content/docs/getting-started/quickstart.mdx b/apps/ui-library/content/docs/getting-started/quickstart.mdx index c82490b554a..ade51c07240 100644 --- a/apps/ui-library/content/docs/getting-started/quickstart.mdx +++ b/apps/ui-library/content/docs/getting-started/quickstart.mdx @@ -60,6 +60,8 @@ If you're already using a recent version of shadcn/ui in your existing project,
+ + When you've finished setting up shadcn/ui, you can start exploring the components in the sidebar ## Troubleshooting diff --git a/apps/ui-library/content/docs/tanstack/client.mdx b/apps/ui-library/content/docs/tanstack/client.mdx index dc9477629f8..db80ba69be7 100644 --- a/apps/ui-library/content/docs/tanstack/client.mdx +++ b/apps/ui-library/content/docs/tanstack/client.mdx @@ -7,6 +7,8 @@ description: Supabase client for TanStack Start + + ## Folder structure diff --git a/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx b/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx index 6462b35da51..5339d7d9ad3 100644 --- a/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx +++ b/apps/ui-library/registry/default/examples/realtime-chat-demo.tsx @@ -58,10 +58,10 @@ const RealtimeChatDemo = () => { return (
- + setUsername(e.target.value)} /> diff --git a/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx b/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx index 0232fd53bb6..c10ce85d41f 100644 --- a/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx +++ b/apps/ui-library/registry/default/examples/realtime-cursor-demo.tsx @@ -18,7 +18,7 @@ const RealtimeCursorDemo = () => { return (
-
+
setUsername(e.target.value)} disabled />