From 73e885b513ac60e4b79e5635cf67194436879160 Mon Sep 17 00:00:00 2001 From: Han Qiao Date: Fri, 28 Mar 2025 16:01:54 +0100 Subject: [PATCH 01/42] chore: document how to rollback declarative schema (#34469) * chore: document how to rollback declarative schema * Update declarative-database-schemas.mdx * Update declarative-database-schemas.mdx * chore: warn about down migration --- .../declarative-database-schemas.mdx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/apps/docs/content/guides/local-development/declarative-database-schemas.mdx b/apps/docs/content/guides/local-development/declarative-database-schemas.mdx index 021359f1b5a..663704b7b5d 100644 --- a/apps/docs/content/guides/local-development/declarative-database-schemas.mdx +++ b/apps/docs/content/guides/local-development/declarative-database-schemas.mdx @@ -236,6 +236,24 @@ supabase db dump > supabase/schemas/prod.sql From there, you can start breaking down your schema into smaller files and generate migrations. You can do this all at once, or incrementally as you make changes to your schema. +### Rolling back a schema change + +During development, you may want to rollback a migration to keep your new schema changes in a single migration file. This can be done by resetting your local database to a previous version. + +```bash Terminal +supabase db reset --version 20241005112233 +``` + +After a reset, you can [edit the schema](#updating-your-schema) and regenerate a new migration file. Note that you should not reset a version that's already deployed to production. + +If you need to rollback a migration that's already deployed, you should first revert changes to the schema files. Then you can generate a new migration file containing the down migration. This ensures your production migrations are always rolling forward. + + + +SQL statements generated in a down migration are usually destructive. You must review them carefully to avoid unintentional data loss. + + + ## Known caveats The `migra` diff tool used for generating schema diff is capable of tracking most database changes. However, there are edge cases where it can fail. From da45284386fede049b66c47cfbcee9cbf21776bd Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 28 Mar 2025 13:01:39 -0230 Subject: [PATCH 02/42] UI lib/quickstart (#34499) * Add quickstart * Make all links open in a new tab. * Update instructions * Update --------- Co-authored-by: Ivan Vasilov --- .../content/docs/getting-started/faq.mdx | 13 +++- .../docs/getting-started/quickstart.mdx | 69 +++++++++++++++++-- 2 files changed, 75 insertions(+), 7 deletions(-) diff --git a/apps/ui-library/content/docs/getting-started/faq.mdx b/apps/ui-library/content/docs/getting-started/faq.mdx index b4c7ade3b97..63872d9d727 100644 --- a/apps/ui-library/content/docs/getting-started/faq.mdx +++ b/apps/ui-library/content/docs/getting-started/faq.mdx @@ -45,8 +45,17 @@ description: Frequently asked questions Our Next.js quickstart is a great starting point for building a full app with Supabase and - Next.js. If you've already started with this template, you can use add command to add more - components to your project. + Next.js. If you've already started with this template, you can just add the components in this library to your project. + + + + + Do I need to install one of the framework quickstarts before using this library? + + + No. You don't need to start with one of our framework quickstarts. + + If you already have an existing project, you can just add the components in this library to your project. If you're starting from scratch, you should use one of the shadcn/ui setup guides for your framework of choice via the [Quickstart](/ui/docs/getting-started/quickstart) page. diff --git a/apps/ui-library/content/docs/getting-started/quickstart.mdx b/apps/ui-library/content/docs/getting-started/quickstart.mdx index 5e6472d448b..c82490b554a 100644 --- a/apps/ui-library/content/docs/getting-started/quickstart.mdx +++ b/apps/ui-library/content/docs/getting-started/quickstart.mdx @@ -1,10 +1,69 @@ --- title: Quick Start -description: Components +description: Install shadcn/ui and use the components in your project --- -## Code Block +## Set up shadcn/ui -```js -console.log('Hello World') -``` +Start by installing [shadcn/ui](https://ui.shadcn.com/) in your project. Use the appropriate setup guide linked below for your framework of choice. + +If you're already using a recent version of shadcn/ui in your existing project, you can skip this step—this library should work with your current setup. However, if you encounter issues, try deleting your existing `components.json` file and follow one of the guides to reset your setup. + +
+ + + Next.js + + +

Next.js

+ + + + + +

React Router

+ + + + + +

TanStack Start

+ + + + React SPA + + +

React SPA

+ +
+ +When you've finished setting up shadcn/ui, you can start exploring the components in the sidebar + +## Troubleshooting + +If you encounter issues, try deleting your existing `components.json` file and follow one of the guides to reset your setup. + +For issues and questions about specific frameworks, see the [FAQs](/ui/docs/getting-started/faq) From 95ade9f4ca981fd077c0f45f88dd489308c28f5c Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Fri, 28 Mar 2025 17:45:33 +0200 Subject: [PATCH 03/42] fix: Fix the folder layout for the Nextjs Auth block (#34496) * Change the destinations for next auth routes. * Change the folder definition to /auth. * Fix wrong docs. * More fixes. * Fix the redirect url to include the base path. * Minor fixes to the other auth blocks. * Fix example URLs. Remove some extra code. * Minor fixes for the avatar stack demo. * More fixes. --- apps/ui-library/__registry__/index.tsx | 4 +- apps/ui-library/app/(app)/page.tsx | 8 +- .../{ => auth}/forgot-password/page.tsx | 0 .../{ => auth}/login/page.tsx | 0 .../{ => auth}/sign-up-success/page.tsx | 0 .../{ => auth}/sign-up/page.tsx | 0 .../{ => auth}/update-password/page.tsx | 0 .../protected/SignOutButton.tsx | 22 - .../password-based-auth/protected/page.tsx | 9 +- apps/ui-library/components/block-preview.tsx | 2 +- apps/ui-library/components/colors.tsx | 155 ---- .../components/framework-selector.tsx | 4 +- apps/ui-library/components/mdx-components.tsx | 4 - .../components/side-navigation-item.tsx | 4 +- .../ui-library/components/side-navigation.tsx | 10 +- apps/ui-library/components/source-panel.tsx | 3 +- .../docs/nextjs/password-based-auth.mdx | 2 +- .../docs/react-router/password-based-auth.mdx | 6 +- apps/ui-library/package.json | 1 - .../public/r/current-user-avatar-nextjs.json | 2 +- apps/ui-library/public/r/dropzone-nextjs.json | 2 +- .../public/r/password-based-auth-nextjs.json | 47 +- .../r/realtime-avatar-stack-nextjs.json | 2 +- .../public/r/realtime-cursor-nextjs.json | 2 +- .../public/r/supabase-client-nextjs.json | 2 +- apps/ui-library/registry.json | 28 +- .../blocks/dropzone/registry-item.json | 2 +- .../app/{ => auth}/confirm/route.ts | 5 +- .../app/{ => auth}/error/page.tsx | 8 +- .../app/{ => auth}/forgot-password/page.tsx | 0 .../app/{ => auth}/login/page.tsx | 0 .../app/{ => auth}/sign-up-success/page.tsx | 2 +- .../app/{ => auth}/sign-up/page.tsx | 0 .../app/{ => auth}/update-password/page.tsx | 0 .../app/protected/page.tsx | 10 +- .../components/forgot-password-form.tsx | 4 +- .../components/login-form.tsx | 5 +- .../components/logout-button.tsx | 17 + .../components/sign-up-form.tsx | 4 +- .../components/update-password-form.tsx | 6 - .../registry-item.json | 28 +- .../components/update-password-form.tsx | 6 - .../components/sign-up-form.tsx | 3 + .../components/update-password-form.tsx | 6 - .../components/avatar-stack.tsx | 4 +- .../clients/nextjs/lib/supabase/middleware.ts | 2 +- .../examples/realtime-avatar-stack-demo.tsx | 10 +- .../supabase/templates/recovery.html | 3 +- pnpm-lock.yaml | 842 ------------------ 49 files changed, 143 insertions(+), 1143 deletions(-) rename apps/ui-library/app/example/password-based-auth/{ => auth}/forgot-password/page.tsx (100%) rename apps/ui-library/app/example/password-based-auth/{ => auth}/login/page.tsx (100%) rename apps/ui-library/app/example/password-based-auth/{ => auth}/sign-up-success/page.tsx (100%) rename apps/ui-library/app/example/password-based-auth/{ => auth}/sign-up/page.tsx (100%) rename apps/ui-library/app/example/password-based-auth/{ => auth}/update-password/page.tsx (100%) delete mode 100644 apps/ui-library/app/example/password-based-auth/protected/SignOutButton.tsx delete mode 100644 apps/ui-library/components/colors.tsx rename apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/{ => auth}/confirm/route.ts (99%) rename apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/{ => auth}/error/page.tsx (78%) rename apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/{ => auth}/forgot-password/page.tsx (100%) rename apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/{ => auth}/login/page.tsx (100%) rename apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/{ => auth}/sign-up-success/page.tsx (88%) rename apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/{ => auth}/sign-up/page.tsx (100%) rename apps/ui-library/registry/default/blocks/password-based-auth-nextjs/app/{ => auth}/update-password/page.tsx (100%) create mode 100644 apps/ui-library/registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx diff --git a/apps/ui-library/__registry__/index.tsx b/apps/ui-library/__registry__/index.tsx index 7f59bed5d7b..d094b8047a0 100644 --- a/apps/ui-library/__registry__/index.tsx +++ b/apps/ui-library/__registry__/index.tsx @@ -11,9 +11,9 @@ export const Index: Record = { name: "password-based-auth-nextjs", type: "registry:block", registryDependencies: ["button","card","input","label"], - component: React.lazy(() => import("@/registry/default/blocks/password-based-auth-nextjs/app/login/page.tsx")), + component: React.lazy(() => import("@/registry/default/blocks/password-based-auth-nextjs/app/auth/login/page.tsx")), source: "", - files: ["registry/default/blocks/password-based-auth-nextjs/app/login/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/error/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/protected/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/confirm/route.ts","registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx","registry/default/blocks/password-based-auth-nextjs/middleware.ts","registry/default/blocks/password-based-auth-nextjs/app/sign-up/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/sign-up-success/page.tsx","registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx","registry/default/blocks/password-based-auth-nextjs/app/forgot-password/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/update-password/page.tsx","registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx","registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"], + files: ["registry/default/blocks/password-based-auth-nextjs/app/auth/login/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/error/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/protected/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/confirm/route.ts","registry/default/blocks/password-based-auth-nextjs/components/login-form.tsx","registry/default/blocks/password-based-auth-nextjs/middleware.ts","registry/default/blocks/password-based-auth-nextjs/app/auth/sign-up/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/sign-up-success/page.tsx","registry/default/blocks/password-based-auth-nextjs/components/sign-up-form.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/forgot-password/page.tsx","registry/default/blocks/password-based-auth-nextjs/app/auth/update-password/page.tsx","registry/default/blocks/password-based-auth-nextjs/components/forgot-password-form.tsx","registry/default/blocks/password-based-auth-nextjs/components/update-password-form.tsx","registry/default/blocks/password-based-auth-nextjs/components/logout-button.tsx","registry/default/clients/nextjs/lib/supabase/client.ts","registry/default/clients/nextjs/lib/supabase/middleware.ts","registry/default/clients/nextjs/lib/supabase/server.ts"], category: "undefined", subcategory: "undefined", chunks: [] diff --git a/apps/ui-library/app/(app)/page.tsx b/apps/ui-library/app/(app)/page.tsx index e4d67ef7e2c..72bdc058159 100644 --- a/apps/ui-library/app/(app)/page.tsx +++ b/apps/ui-library/app/(app)/page.tsx @@ -1,7 +1,7 @@ import { BlockPreview } from '@/components/block-preview' import { ComponentPreview } from '@/components/component-preview' -import { Button } from '@/registry/default/components/ui/button' import Link from 'next/link' +import { Button_Shadcn_ } from 'ui' // Horizontal grid line component const HorizontalGridLine = () =>
@@ -43,9 +43,9 @@ export default function Home() { Supabase back-end to your front-end. Works with your favorite frameworks. Open Source. Open Code. - +
@@ -63,7 +63,7 @@ export default function Home() { className="col-start-2 col-span-10 md:col-start-3 md:col-span-8 relative" >
- +
diff --git a/apps/ui-library/app/example/password-based-auth/forgot-password/page.tsx b/apps/ui-library/app/example/password-based-auth/auth/forgot-password/page.tsx similarity index 100% rename from apps/ui-library/app/example/password-based-auth/forgot-password/page.tsx rename to apps/ui-library/app/example/password-based-auth/auth/forgot-password/page.tsx diff --git a/apps/ui-library/app/example/password-based-auth/login/page.tsx b/apps/ui-library/app/example/password-based-auth/auth/login/page.tsx similarity index 100% rename from apps/ui-library/app/example/password-based-auth/login/page.tsx rename to apps/ui-library/app/example/password-based-auth/auth/login/page.tsx diff --git a/apps/ui-library/app/example/password-based-auth/sign-up-success/page.tsx b/apps/ui-library/app/example/password-based-auth/auth/sign-up-success/page.tsx similarity index 100% rename from apps/ui-library/app/example/password-based-auth/sign-up-success/page.tsx rename to apps/ui-library/app/example/password-based-auth/auth/sign-up-success/page.tsx diff --git a/apps/ui-library/app/example/password-based-auth/sign-up/page.tsx b/apps/ui-library/app/example/password-based-auth/auth/sign-up/page.tsx similarity index 100% rename from apps/ui-library/app/example/password-based-auth/sign-up/page.tsx rename to apps/ui-library/app/example/password-based-auth/auth/sign-up/page.tsx diff --git a/apps/ui-library/app/example/password-based-auth/update-password/page.tsx b/apps/ui-library/app/example/password-based-auth/auth/update-password/page.tsx similarity index 100% rename from apps/ui-library/app/example/password-based-auth/update-password/page.tsx rename to apps/ui-library/app/example/password-based-auth/auth/update-password/page.tsx diff --git a/apps/ui-library/app/example/password-based-auth/protected/SignOutButton.tsx b/apps/ui-library/app/example/password-based-auth/protected/SignOutButton.tsx deleted file mode 100644 index 50947760f00..00000000000 --- a/apps/ui-library/app/example/password-based-auth/protected/SignOutButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -'use client' - -import { Button } from '@/registry/default/components/ui/button' -import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/client' -import { useRouter } from 'next/navigation' - -export function SignOutButton() { - const supabase = createClient() - const router = useRouter() - - return ( - - ) -} diff --git a/apps/ui-library/app/example/password-based-auth/protected/page.tsx b/apps/ui-library/app/example/password-based-auth/protected/page.tsx index f610f6151c0..204123552db 100644 --- a/apps/ui-library/app/example/password-based-auth/protected/page.tsx +++ b/apps/ui-library/app/example/password-based-auth/protected/page.tsx @@ -1,20 +1,19 @@ -import { redirect } from 'next/navigation' - +import { LogoutButton } from '@/registry/default/blocks/password-based-auth-nextjs/components/logout-button' import { createClient } from '@/registry/default/clients/nextjs/lib/supabase/server' -import { SignOutButton } from './SignOutButton' +import { redirect } from 'next/navigation' export default async function ProtectedPage() { const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { - redirect('/login') + redirect('/example/password-based-auth/auth/login') } return ( <>

Hello {data.user.email}

- + ) } diff --git a/apps/ui-library/components/block-preview.tsx b/apps/ui-library/components/block-preview.tsx index 0524448923a..77e3a9fc251 100644 --- a/apps/ui-library/components/block-preview.tsx +++ b/apps/ui-library/components/block-preview.tsx @@ -19,7 +19,7 @@ export function BlockPreview({ name, wide = false, isPair = false }: ComponentPr } >