UI lib/inline docs (#34387)

* Update inline docs

* Minor doc fixes.

* Fix the realtime cursor positioning.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

apps/ui-library/components/block-item-code.tsx

@@ -73,7 +73,7 @@ export function BlockItemCode({ files }: BlockItemCodeProps) {
     : null
 
   return (
-    <div className="flex border rounded-lg overflow-hidden h-[652px] not-prose">
+    <div className="flex border rounded-lg overflow-hidden h-[652px] not-prose mt-4">
       {/* File browser sidebar */}
       <div className="w-64 border-r bg-muted/30 overflow-y-auto">
         <div className="border-b bg-muted/50 h-12 items-center flex px-2">

apps/ui-library/content/docs/nextjs/client.mdx

@@ -11,14 +11,19 @@ description: Supabase client for Next.js
 
 <RegistryBlock itemName="supabase-client-nextjs" />
 
+## 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).

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

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
    <h2>Confirm your signup</h2>
@@ -40,6 +37,8 @@ There few more steps to finish the installation:
    </p>
    ```
 
-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.

apps/ui-library/content/docs/nextjs/realtime-cursor.mdx

@@ -12,7 +12,7 @@ description: Real-time cursor sharing for collaborative applications
 
 <BlockItem
   name="realtime-cursor-nextjs"
-  description="Component which renders realtime cursors from other users in a room."
+  description="Renders realtime cursors from other users in a room."
 />
 
 ## Folder structure
@@ -20,3 +20,9 @@ description: Real-time cursor sharing for collaborative applications
 <RegistryBlock itemName="realtime-cursor-nextjs" />
 
 ## 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 `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.

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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"absolute transform ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"fixed ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {

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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"absolute transform ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"fixed ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {

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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"absolute transform ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"fixed ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {

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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"absolute transform ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\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    <div>\n      {Object.keys(cursors).map((id) => (\n        <Cursor\n          key={id}\n          className=\"fixed ease-linear duration-70 z-50\"\n          style={{\n            top: 0,\n            left: 0,\n            transform: `translate(${cursors[id].position.x}px, ${cursors[id].position.y}px)`,\n          }}\n          color={cursors[id].color}\n          name={cursors[id].user.name}\n        />\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {

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) => (
         <Cursor
           key={id}
-          className="absolute transform ease-linear duration-70 z-50"
+          className="fixed ease-linear duration-70 z-50"
           style={{
             top: 0,
             left: 0,