From d46aeeb1f2840b499607e977950260a11c201285 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Tue, 25 Mar 2025 10:17:56 -0230 Subject: [PATCH] UI lib/inline docs (#34387) * Update inline docs * Minor doc fixes. * Fix the realtime cursor positioning. --------- Co-authored-by: Ivan Vasilov --- apps/ui-library/components/block-item-code.tsx | 2 +- apps/ui-library/content/docs/nextjs/client.mdx | 9 +++++++-- apps/ui-library/content/docs/nextjs/dropzone.mdx | 10 +++------- .../content/docs/nextjs/password-based-auth.mdx | 15 +++++++-------- .../content/docs/nextjs/realtime-cursor.mdx | 8 +++++++- .../public/r/realtime-cursor-nextjs.json | 2 +- .../public/r/realtime-cursor-react-router.json | 2 +- .../public/r/realtime-cursor-react.json | 2 +- .../public/r/realtime-cursor-tanstack.json | 2 +- .../components/realtime-cursors.tsx | 2 +- 10 files changed, 30 insertions(+), 24 deletions(-) diff --git a/apps/ui-library/components/block-item-code.tsx b/apps/ui-library/components/block-item-code.tsx index 3d0ba4f0823..af6960be537 100644 --- a/apps/ui-library/components/block-item-code.tsx +++ b/apps/ui-library/components/block-item-code.tsx @@ -73,7 +73,7 @@ export function BlockItemCode({ files }: BlockItemCodeProps) { : null return ( -
+
{/* File browser sidebar */}
diff --git a/apps/ui-library/content/docs/nextjs/client.mdx b/apps/ui-library/content/docs/nextjs/client.mdx index 48d55d8c801..cb5b0cd8e67 100644 --- a/apps/ui-library/content/docs/nextjs/client.mdx +++ b/apps/ui-library/content/docs/nextjs/client.mdx @@ -11,14 +11,19 @@ description: Supabase client for Next.js +## Usage + This block installs a Supabase client to be used by Next.js. It's meant to be used with app router and it's fully SSR compatible. If you started a project through `npx create-next-app -e with-supabase` command, this block is already included in your project. -You need to add an .env file to your project: +To get started, you need to add an `.env` file to your project with the following entries: + +```env NEXT_PUBLIC_SUPABASE_URL= NEXT_PUBLIC_SUPABASE_ANON_KEY= +``` If you're using a local instance of supabase, you can find these values by running `supabase start` or `supabase status` (if already running). -If you're using supabase.com project, you can find them on this page https://supabase.com/dashboard/project/_/settings/api or in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks. +If you're using supabase.com project, you can find them in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api). diff --git a/apps/ui-library/content/docs/nextjs/dropzone.mdx b/apps/ui-library/content/docs/nextjs/dropzone.mdx index c8a9c7b8479..44e009a2f5f 100644 --- a/apps/ui-library/content/docs/nextjs/dropzone.mdx +++ b/apps/ui-library/content/docs/nextjs/dropzone.mdx @@ -27,18 +27,14 @@ The File Upload component is designed to allow users to upload files with specif 1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files. +1. **Multiple Files**. Allow users to upload multiple files at once. + 1. **MIME Type Restriction**. Only allow specific MIME types. 1. **Invalid File Handling**. Allow users to remove invalid files from the list. Display a tooltip with error information for invalid files. 1. **Image Previews**. Display previews for image files. -1. **Error Handling**. Show error messages if the upload fails due to network or server errors. - -1. **Success Handling**. Display a success message and clear the file list upon successful upload. +1. **Success and Error Handling**. Show error messages if the upload fails due to network or server errors, show a success message and clear the file list upon successful upload. 1. **Configurable Limits**. Allow configuration of file size limits and the maximum number of files. - -## Usage - -## Examples diff --git a/apps/ui-library/content/docs/nextjs/password-based-auth.mdx b/apps/ui-library/content/docs/nextjs/password-based-auth.mdx index 092f84e6434..4268e622cc2 100644 --- a/apps/ui-library/content/docs/nextjs/password-based-auth.mdx +++ b/apps/ui-library/content/docs/nextjs/password-based-auth.mdx @@ -20,13 +20,10 @@ This block includes the [Supabase client](/ui/docs/nextjs/client). When installi After installing the block in your Next.js project, you'll have all needed pages and components to build a password-based authentication flow. -There few more steps to finish the installation: +To finish the installation: -1. Set the `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` environment variables in your `.env` file in your project. -1. Add an [email template for sign-up](https://supabase.com/dashboard/project/uznvnxvfhkixgqetwekc/auth/templates) to the Supabase project. For detailed instructions on how to configure your email - templates, including the use of variables like `{{ .SiteURL }}`,`{{ .TokenHash }}`, and `{{ .RedirectTo }}`, refer to our [Email Templates guide](/docs/email-templates). - - Your signup email template should contain the following HTML: +1. Set the `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` environment variables in your `.env` file in your project. Find them in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks. +1. Add an [email template for sign-up](https://supabase.com/dashboard/project/_/auth/templates) to the Supabase project. Your signup email template should contain at least the following HTML: ```html

Confirm your signup

@@ -40,6 +37,8 @@ There few more steps to finish the installation:

``` -1. Set the site URL in the [Supabase dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration). -1. Set the forgot-password route in `forgot-password-form.tsx` component. The route needs to be configured as a redirect URL in the [Supabase dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration). + For detailed instructions on how to configure your email templates, including the use of variables like `{{ .SiteURL }}`,`{{ .TokenHash }}`, and `{{ .RedirectTo }}`, refer to our [Email Templates guide](/docs/email-templates). + +1. Set the site URL in the [Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration). +1. Set the `forgot-password` route in `forgot-password-form.tsx` component. The same route also needs to be configured as a redirect URL in the [Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration). It should look something like this: `http://example.com/auth/forgot-password`. 1. Update the redirect paths in the `login-form.tsx` and `update-password-form.tsx` components to point to the logged-in routes in your app. diff --git a/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx b/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx index eefb0b57f15..71a06756f55 100644 --- a/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx +++ b/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx @@ -12,7 +12,7 @@ description: Real-time cursor sharing for collaborative applications ## Folder structure @@ -20,3 +20,9 @@ description: Real-time cursor sharing for collaborative applications ## Introduction + +The Realtime Cursor component is designed to allow users to share their cursor positions with other users in a room. It can be used to build real-time collaborative applications. + +## Usage + +The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `` component to your page and it will render realtime cursors from other users in the room. diff --git a/apps/ui-library/public/r/realtime-cursor-nextjs.json b/apps/ui-library/public/r/realtime-cursor-nextjs.json index 779bf350660..0922f7689ec 100644 --- a/apps/ui-library/public/r/realtime-cursor-nextjs.json +++ b/apps/ui-library/public/r/realtime-cursor-nextjs.json @@ -17,7 +17,7 @@ }, { "path": "registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx", - "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", + "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/ui-library/public/r/realtime-cursor-react-router.json b/apps/ui-library/public/r/realtime-cursor-react-router.json index 86222b8e45e..db72aa9261a 100644 --- a/apps/ui-library/public/r/realtime-cursor-react-router.json +++ b/apps/ui-library/public/r/realtime-cursor-react-router.json @@ -17,7 +17,7 @@ }, { "path": "registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx", - "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", + "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/ui-library/public/r/realtime-cursor-react.json b/apps/ui-library/public/r/realtime-cursor-react.json index 548fce3bb73..e0a0327a068 100644 --- a/apps/ui-library/public/r/realtime-cursor-react.json +++ b/apps/ui-library/public/r/realtime-cursor-react.json @@ -17,7 +17,7 @@ }, { "path": "registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx", - "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", + "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/ui-library/public/r/realtime-cursor-tanstack.json b/apps/ui-library/public/r/realtime-cursor-tanstack.json index aeef652a424..3417beca751 100644 --- a/apps/ui-library/public/r/realtime-cursor-tanstack.json +++ b/apps/ui-library/public/r/realtime-cursor-tanstack.json @@ -18,7 +18,7 @@ }, { "path": "registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx", - "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", + "content": "'use client'\n\nimport { Cursor } from '@/registry/default/blocks/realtime-cursor/components/cursor'\nimport { useRealtimeCursors } from '@/registry/default/blocks/realtime-cursor/hooks/use-realtime-cursors'\n\nexport const RealtimeCursors = ({ roomName, username }: { roomName: string; username: string }) => {\n const { cursors } = useRealtimeCursors({ roomName, username })\n\n return (\n
\n {Object.keys(cursors).map((id) => (\n \n ))}\n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/ui-library/registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx b/apps/ui-library/registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx index a0db3751b45..70e5b576bce 100644 --- a/apps/ui-library/registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx +++ b/apps/ui-library/registry/default/blocks/realtime-cursor/components/realtime-cursors.tsx @@ -11,7 +11,7 @@ export const RealtimeCursors = ({ roomName, username }: { roomName: string; user {Object.keys(cursors).map((id) => (