);
}
@@ -255,7 +262,7 @@ export class ZenRouter<
#_register(
pattern: P,
- bodyDecoder: Decoder | null,
+ bodySchema: StandardSchemaV1 | null,
handler: RouteHandler
// authFn?: OpaqueAuthFn
): void {
@@ -265,7 +272,7 @@ export class ZenRouter<
pattern,
matcher,
/* authFn ?? */ this.#_defaultAuthFn,
- bodyDecoder,
+ bodySchema,
wrap(handler),
]);
}
@@ -343,7 +350,7 @@ export class ZenRouter<
// Match routes in the given order
let pathDidMatch = false;
for (const tup of this.#_routes) {
- const [pattern, matcher, authorize, bodyDecoder, handler] = tup;
+ const [pattern, matcher, authorize, bodySchema, handler] = tup;
const match = matcher.matchURL(url);
if (match === null) {
@@ -362,7 +369,7 @@ export class ZenRouter<
// Add route pattern as span attribute
// This is done early so the route is recorded even for auth/validation errors
- const span = trace.getSpan(context.active());
+ const span = this.#_otel?.getActiveSpan();
span?.setAttribute("zen.route", pattern);
const base = {
@@ -382,8 +389,11 @@ export class ZenRouter<
try {
p = mapv(match, decodeURIComponent);
p = mapv(p, (value, key) => {
- const decoder = this.#_paramDecoders[key];
- return decoder === undefined ? value : decoder.verify(value);
+ const schema = this.#_paramDecoders[key];
+ if (!schema) return value;
+ const result = validateSync(schema, value);
+ if (result.issues) throw result.issues;
+ return result.value;
});
} catch (err) {
// A malformed URI that cannot be decoded properly or a param that
@@ -396,14 +406,14 @@ export class ZenRouter<
span?.setAttribute(`zen.param.${key}`, String(value));
}
- const decodeResult = bodyDecoder
+ const bodyResult = bodySchema
? // TODO: This can throw if the body does not contain a valid JSON
// request. If so, we should return a 400.
- bodyDecoder.decode(await tryReadBodyAsJson(req))
+ validateSync(bodySchema, await tryReadBodyAsJson(req))
: null;
- if (decodeResult && !decodeResult.ok) {
- const errmsg = formatShort(decodeResult.error);
+ if (bodyResult?.issues) {
+ const errmsg = bodyResult.issues.map(formatIssue).join("\n");
throw new ValidationError(errmsg);
}
@@ -414,10 +424,10 @@ export class ZenRouter<
p,
q: Object.fromEntries(url.searchParams),
get body() {
- if (decodeResult === null) {
- raise("Cannot access body: this endpoint did not define a body decoder"); // prettier-ignore
+ if (bodyResult === null) {
+ raise("Cannot access body: this endpoint did not define a body schema"); // prettier-ignore
}
- return decodeResult.value;
+ return bodyResult.value;
},
};
@@ -484,6 +494,40 @@ export class ZenRouter<
}
}
+function formatIssue(issue: StandardSchemaV1.Issue): string {
+ if (!issue.path?.length) return issue.message;
+ const keys = issue.path.map((p) => (typeof p === "object" ? p.key : p));
+ let prefix: string;
+ if (keys.length === 1) {
+ prefix =
+ typeof keys[0] === "number"
+ ? `Value at index ${keys[0]}`
+ : `Value at key '${String(keys[0])}'`;
+ } else {
+ prefix = `Value at keypath '${keys.join(".")}'`;
+ }
+ return `${prefix}: ${issue.message}`;
+}
+
+function isPromiseLike(value: any): value is Promise {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+ return typeof value?.then === "function";
+}
+
+/**
+ * Synchronously validates a value against a Standard Schema. Throws if the
+ * schema returns a Promise (async validation is not supported).
+ */
+function validateSync(
+ schema: StandardSchemaV1,
+ value: unknown
+): StandardSchemaV1.Result {
+ const result = schema["~standard"].validate(value);
+ if (isPromiseLike(result))
+ throw new Error("Async validation is not supported");
+ return result;
+}
+
/**
* Helper to handle any endpoint handlers returning a JSON object, and turning
* that into a 200 response if so.
diff --git a/packages/liveblocks-zenrouter/src/index.ts b/packages/liveblocks-zenrouter/src/index.ts
index 8a4971e648f..600ea93986b 100644
--- a/packages/liveblocks-zenrouter/src/index.ts
+++ b/packages/liveblocks-zenrouter/src/index.ts
@@ -1,3 +1,5 @@
+export * from "~/lib/otel.js";
+
// Simple response generators: json(), empty(), abort(), etc.
export * from "~/responses/index.js";
diff --git a/packages/liveblocks-zenrouter/src/lib/matchers.ts b/packages/liveblocks-zenrouter/src/lib/matchers.ts
index fc6b727d97f..fcb18927ce3 100644
--- a/packages/liveblocks-zenrouter/src/lib/matchers.ts
+++ b/packages/liveblocks-zenrouter/src/lib/matchers.ts
@@ -1,5 +1,4 @@
import type { Resolve } from "@liveblocks/core";
-import type { Decoder } from "decoders";
import type {
ComposeLeft,
Objects,
@@ -9,6 +8,7 @@ import type {
Unions,
} from "hotscript";
+import type { StandardSchemaV1 } from "./standard-schema.js";
import { raise } from "./utils.js";
const cleanSegmentRe = /^[\w-]+$/;
@@ -80,9 +80,9 @@ type ExtractParamsBasic = Pipe<
* For:
*
* {
- * a: Decoder,
- * b: Decoder<'hi'>,
- * c: Decoder,
+ * a: StandardSchemaV1,
+ * b: StandardSchemaV1,
+ * c: StandardSchemaV1,
* }
*
* Will return:
@@ -94,8 +94,10 @@ type ExtractParamsBasic = Pipe<
* }
*
*/
-export type MapDecoderTypes = {
- [K in keyof T]: T[K] extends Decoder ? V : never;
+export type MapSchemaOutput = {
+ [K in keyof T]: T[K] extends StandardSchemaV1
+ ? StandardSchemaV1.InferOutput
+ : never;
};
// export type WithDefaults = Pipe<>;
diff --git a/packages/liveblocks-zenrouter/src/lib/otel.ts b/packages/liveblocks-zenrouter/src/lib/otel.ts
new file mode 100644
index 00000000000..565add5775b
--- /dev/null
+++ b/packages/liveblocks-zenrouter/src/lib/otel.ts
@@ -0,0 +1,7 @@
+export interface OtelSpan {
+ setAttribute(key: string, value: string): void;
+}
+
+export interface OtelConfig {
+ getActiveSpan: () => OtelSpan | undefined;
+}
diff --git a/packages/liveblocks-zenrouter/src/lib/standard-schema.d.ts b/packages/liveblocks-zenrouter/src/lib/standard-schema.d.ts
new file mode 100644
index 00000000000..eba310cfcf1
--- /dev/null
+++ b/packages/liveblocks-zenrouter/src/lib/standard-schema.d.ts
@@ -0,0 +1,175 @@
+// #########################
+// ### Standard Typed ###
+// #########################
+
+/** The Standard Typed interface. This is a base type extended by other specs. */
+export interface StandardTypedV1;
+}
+
+export declare namespace StandardTypedV1 {
+ /** The Standard Typed properties interface. */
+ export interface Props | undefined;
+ }
+
+ /** The Standard Typed types interface. */
+ export interface Types = NonNullable<
+ Schema["~standard"]["types"]
+ >["input"];
+
+ /** Infers the output type of a Standard Typed. */
+ export type InferOutput = NonNullable<
+ Schema["~standard"]["types"]
+ >["output"];
+}
+
+// ##########################
+// ### Standard Schema ###
+// ##########################
+
+/** The Standard Schema interface. */
+export interface StandardSchemaV1;
+}
+
+export declare namespace StandardSchemaV1 {
+ /** The Standard Schema properties interface. */
+ export interface Props {
+ /** Validates unknown input values. */
+ readonly validate: (
+ value: unknown,
+ options?: StandardSchemaV1.Options | undefined
+ ) => Result | Promise>;
+ }
+
+ /** The result interface of the validate function. */
+ export type Result = SuccessResult | FailureResult;
+
+ /** The result interface if validation succeeds. */
+ export interface SuccessResult {
+ /** The typed output value. */
+ readonly value: Output;
+ /** A falsy value for `issues` indicates success. */
+ readonly issues?: undefined;
+ }
+
+ export interface Options {
+ /** Explicit support for additional vendor-specific parameters, if needed. */
+ readonly libraryOptions?: Record | undefined;
+ }
+
+ /** The result interface if validation fails. */
+ export interface FailureResult {
+ /** The issues of failed validation. */
+ readonly issues: ReadonlyArray;
+ }
+
+ /** The issue interface of the failure output. */
+ export interface Issue {
+ /** The error message of the issue. */
+ readonly message: string;
+ /** The path of the issue, if any. */
+ readonly path?: ReadonlyArray | undefined;
+ }
+
+ /** The path segment interface of the issue. */
+ export interface PathSegment {
+ /** The key representing a path segment. */
+ readonly key: PropertyKey;
+ }
+
+ /** The Standard types interface. */
+ export interface Types {}
+
+ /** Infers the input type of a Standard. */
+ export type InferInput =
+ StandardTypedV1.InferInput;
+
+ /** Infers the output type of a Standard. */
+ export type InferOutput =
+ StandardTypedV1.InferOutput;
+}
+
+// ###############################
+// ### Standard JSON Schema ###
+// ###############################
+
+/** The Standard JSON Schema interface. */
+export interface StandardJSONSchemaV1;
+}
+
+export declare namespace StandardJSONSchemaV1 {
+ /** The Standard JSON Schema properties interface. */
+ export interface Props {
+ /** Methods for generating the input/output JSON Schema. */
+ readonly jsonSchema: StandardJSONSchemaV1.Converter;
+ }
+
+ /** The Standard JSON Schema converter interface. */
+ export interface Converter {
+ /** Converts the input type to JSON Schema. May throw if conversion is not supported. */
+ readonly input: (
+ options: StandardJSONSchemaV1.Options
+ ) => Record;
+ /** Converts the output type to JSON Schema. May throw if conversion is not supported. */
+ readonly output: (
+ options: StandardJSONSchemaV1.Options
+ ) => Record;
+ }
+
+ /**
+ * The target version of the generated JSON Schema.
+ *
+ * It is *strongly recommended* that implementers support `"draft-2020-12"` and `"draft-07"`, as they are both in wide use. All other targets can be implemented on a best-effort basis. Libraries should throw if they don't support a specified target.
+ *
+ * The `"openapi-3.0"` target is intended as a standardized specifier for OpenAPI 3.0 which is a superset of JSON Schema `"draft-04"`.
+ */
+ export type Target =
+ | "draft-2020-12"
+ | "draft-07"
+ | "openapi-3.0"
+ // Accepts any string for future targets while preserving autocomplete
+ | ({} & string);
+
+ /** The options for the input/output methods. */
+ export interface Options {
+ /** Specifies the target version of the generated JSON Schema. Support for all versions is on a best-effort basis. If a given version is not supported, the library should throw. */
+ readonly target: Target;
+
+ /** Explicit support for additional vendor-specific parameters, if needed. */
+ readonly libraryOptions?: Record | undefined;
+ }
+
+ /** The Standard types interface. */
+ export interface Types {}
+
+ /** Infers the input type of a Standard. */
+ export type InferInput =
+ StandardTypedV1.InferInput;
+
+ /** Infers the output type of a Standard. */
+ export type InferOutput =
+ StandardTypedV1.InferOutput;
+}
diff --git a/packages/liveblocks-zenrouter/src/responses/index.ts b/packages/liveblocks-zenrouter/src/responses/index.ts
index 57ef8eac7fb..713230fea2c 100644
--- a/packages/liveblocks-zenrouter/src/responses/index.ts
+++ b/packages/liveblocks-zenrouter/src/responses/index.ts
@@ -1,4 +1,4 @@
-import type { JSONObject, JSONValue } from "decoders";
+import type { Json, JsonObject } from "@liveblocks/core";
import type { HeadersInit } from "./compat.js";
import { HttpError, ValidationError } from "./HttpError.js";
@@ -20,6 +20,7 @@ const KB = 1024;
* But not supported yet in:
* - Bun - see https://github.com/oven-sh/bun/issues/3700
*/
+/* istanbul ignore next -- @preserve polyfill only used in environments without ReadableStream.from (e.g. Bun) */
function ReadableStream_from_shim(iterable: Iterable): ReadableStream {
const iterator = iterable[Symbol.iterator]();
return new ReadableStream({
@@ -38,6 +39,7 @@ function ReadableStream_from_shim(iterable: Iterable): ReadableStream {
}
/* eslint-disable */
+/* istanbul ignore next -- @preserve only one branch reachable per environment */
const ReadableStream_from =
typeof (ReadableStream as any).from === "function"
? ((ReadableStream as any).from.bind(ReadableStream) as (
@@ -77,7 +79,7 @@ export function empty(): Response {
* Return a JSON response.
*/
export function json(
- value: JSONObject,
+ value: JsonObject,
status = 200,
headers?: HeadersInit
): Response {
@@ -165,7 +167,7 @@ export function textStream(
* that yields JSON values. Each value will be serialized as a single line.
*/
export function ndjsonStream(
- iterable: Iterable,
+ iterable: Iterable,
headers?: HeadersInit
): Response {
const lines = imap(iterable, (value) => `${JSON.stringify(value)}\n`);
@@ -180,7 +182,7 @@ export function ndjsonStream(
* values. The output will be a valid JSON array: [value1,value2,...]\n
*/
export function jsonArrayStream(
- iterable: Iterable,
+ iterable: Iterable,
headers?: HeadersInit
): Response {
function* chunks() {
diff --git a/packages/liveblocks-zenrouter/test/ErrorHandler.test.ts b/packages/liveblocks-zenrouter/test/ErrorHandler.test.ts
index a8fa1f39331..156f3234c1a 100644
--- a/packages/liveblocks-zenrouter/test/ErrorHandler.test.ts
+++ b/packages/liveblocks-zenrouter/test/ErrorHandler.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, test, vi } from "vitest";
import type { ErrorContext } from "~/ErrorHandler.js";
import { ErrorHandler } from "~/ErrorHandler.js";
-import { HttpError } from "~/index.js";
+import { abort, HttpError } from "~/index.js";
import {
captureConsole,
@@ -139,6 +139,23 @@ describe("ErrorHandler", () => {
);
});
+ test("handles generic abort with status code unsupported by HttpError", async () => {
+ const eh = new ErrorHandler();
+
+ // abort(500) creates a generic abort Response. When the handler tries to
+ // convert it to an HttpError, the constructor throws because 5xx is not
+ // allowed. The catch fallback returns a generic error response.
+ let abortResponse: Response;
+ try {
+ abort(500);
+ } catch (e) {
+ abortResponse = e as Response;
+ }
+
+ const res = await eh.handle(abortResponse!, unused);
+ await expectResponse(res, { error: "Unknown" }, 500);
+ });
+
test("handles bugs in error handler itself", async () => {
const konsole = captureConsole();
diff --git a/packages/liveblocks-zenrouter/test/Router.test.ts b/packages/liveblocks-zenrouter/test/Router.test.ts
index d887238860a..01d0ce05dc9 100644
--- a/packages/liveblocks-zenrouter/test/Router.test.ts
+++ b/packages/liveblocks-zenrouter/test/Router.test.ts
@@ -423,7 +423,7 @@ describe("Router body validation", () => {
expect(konsole.error).toHaveBeenCalledWith(
expect.stringMatching(
- /^Uncaught error: Error: Cannot access body: this endpoint did not define a body decoder/
+ /^Uncaught error: Error: Cannot access body: this endpoint did not define a body schema/
)
);
});
diff --git a/packages/liveblocks-zenrouter/test/Router.zod.test.ts b/packages/liveblocks-zenrouter/test/Router.zod.test.ts
new file mode 100644
index 00000000000..8f98b6befa3
--- /dev/null
+++ b/packages/liveblocks-zenrouter/test/Router.zod.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, test } from "vitest";
+import { z } from "zod";
+
+import { json, ZenRouter } from "~/index.js";
+import { expectResponse } from "~test/utils.js";
+
+const IGNORE_AUTH_FOR_THIS_TEST = () => Promise.resolve(true);
+
+describe("Param decoders (zod)", () => {
+ // Zod equivalent of decoders' `numeric`: coerce a string input to a number
+ const zodNumeric = z.coerce.number();
+
+ const r = new ZenRouter({
+ authorize: IGNORE_AUTH_FOR_THIS_TEST,
+ params: {
+ x: zodNumeric,
+ y: zodNumeric,
+ },
+ });
+
+ r.route("GET /add//", ({ p }) => json({ result: p.x + p.y, p }));
+ r.route("GET /echo/", ({ p }) => json({ name: p.name }));
+
+ test("placeholders are automatically decoded + validated", async () => {
+ const req = new Request("http://example.org/add/1337/42");
+ expect(await (await r.fetch(req)).json()).toEqual({
+ result: 1379,
+ p: { x: 1337, y: 42 },
+ });
+ });
+
+ test("placeholders that cannot be decoded/transformed will throw a 400 error", async () => {
+ const req = new Request("http://example.org/add/1/one");
+ const resp = await r.fetch(req);
+ await expectResponse(resp, { error: "Bad Request" }, 400);
+ });
+
+ test("untyped placeholders still work as strings", async () => {
+ const req = new Request("http://example.org/echo/hello");
+ expect(await (await r.fetch(req)).json()).toEqual({ name: "hello" });
+ });
+});
+
+describe("Router body validation (zod)", () => {
+ const r = new ZenRouter({ authorize: IGNORE_AUTH_FOR_THIS_TEST });
+
+ r.route(
+ "POST /add",
+ z.object({ x: z.number(), y: z.number() }),
+ ({ body }) => ({ result: body.x + body.y })
+ );
+
+ r.route(
+ "POST /empty",
+ z.object({ a: z.number() }).optional(),
+ () => ({ ok: true })
+ );
+
+ test("accepts correct body", async () => {
+ const req = new Request("http://example.org/add", {
+ method: "POST",
+ body: '{"x":41,"y":1}',
+ });
+ await expectResponse(await r.fetch(req), { result: 42 });
+ });
+
+ test("rejects invalid body with actual error message", async () => {
+ const req = new Request("http://example.org/add", {
+ method: "POST",
+ body: '{"x":41,"y":"not a number"}',
+ });
+ await expectResponse(
+ await r.fetch(req),
+ {
+ error: "Unprocessable Entity",
+ reason:
+ "Value at key 'y': Invalid input: expected number, received string",
+ },
+ 422
+ );
+ });
+
+ test("rejects body with missing fields", async () => {
+ const req = new Request("http://example.org/add", {
+ method: "POST",
+ body: '{"x":41}',
+ });
+ await expectResponse(
+ await r.fetch(req),
+ {
+ error: "Unprocessable Entity",
+ reason:
+ "Value at key 'y': Invalid input: expected number, received undefined",
+ },
+ 422
+ );
+ });
+
+ test("broken JSON bodies lead to 400", async () => {
+ const req = new Request("http://example.org/add", {
+ method: "POST",
+ body: "I'm no JSON",
+ });
+ await expectResponse(await r.fetch(req), { error: "Bad Request" }, 400);
+ });
+
+ test("can accept empty bodies", async () => {
+ {
+ const req = new Request("http://example.org/empty", {
+ method: "POST",
+ body: "nah-ah", // Invalid body
+ });
+ await expectResponse(await r.fetch(req), { error: "Bad Request" }, 400);
+ }
+
+ {
+ const req = new Request("http://example.org/empty", {
+ method: "POST",
+ body: '{"a": 123}', // Valid body
+ });
+ await expectResponse(await r.fetch(req), { ok: true });
+ }
+
+ {
+ const req = new Request("http://example.org/empty", {
+ method: "POST",
+ // No body here
+ });
+ await expectResponse(await r.fetch(req), { ok: true });
+ }
+ });
+});
diff --git a/packages/liveblocks-zenrouter/test/streams.test.ts b/packages/liveblocks-zenrouter/test/streams.test.ts
index 4d9ef7de63a..32fdcca8f46 100644
--- a/packages/liveblocks-zenrouter/test/streams.test.ts
+++ b/packages/liveblocks-zenrouter/test/streams.test.ts
@@ -1,6 +1,7 @@
import { describe, expect, test } from "vitest";
import {
+ html,
jsonArrayStream,
ndjsonStream,
textStream,
@@ -18,6 +19,27 @@ async function readStream(response: Response): Promise {
return result;
}
+describe("html", () => {
+ test("returns html response with correct content-type", async () => {
+ const response = html("Hello ");
+ expect(response.status).toBe(200);
+ expect(response.headers.get("Content-Type")).toBe(
+ "text/html; charset=utf-8"
+ );
+ expect(await response.text()).toBe("Hello ");
+ });
+
+ test("accepts custom status and headers", async () => {
+ const response = html("Not Found
", 404, { "X-Custom": "value" });
+ expect(response.status).toBe(404);
+ expect(response.headers.get("Content-Type")).toBe(
+ "text/html; charset=utf-8"
+ );
+ expect(response.headers.get("X-Custom")).toBe("value");
+ expect(await response.text()).toBe("Not Found
");
+ });
+});
+
describe("textStream", () => {
test("streams from iterable", async () => {
function* chunks() {
@@ -36,6 +58,17 @@ describe("textStream", () => {
expect(response.headers.get("X-Custom")).toBe("value");
});
+ test("flushes buffer when it exceeds bufSize", async () => {
+ // With bufSize=5, "hello" (5 chars) triggers a flush, then " world" (6 chars) triggers another
+ function* chunks() {
+ yield "hello";
+ yield " world";
+ }
+
+ const response = textStream(chunks(), undefined, { bufSize: 5 });
+ expect(await response.text()).toBe("hello world");
+ });
+
test("handles empty iterable", async () => {
const response = textStream([]);
expect(await readStream(response)).toBe("");
diff --git a/starter-kits/nextjs-starter-kit/app/Providers.tsx b/starter-kits/nextjs-starter-kit/app/Providers.tsx
index a226973dc9f..6f2d9e811a4 100644
--- a/starter-kits/nextjs-starter-kit/app/Providers.tsx
+++ b/starter-kits/nextjs-starter-kit/app/Providers.tsx
@@ -6,18 +6,14 @@ import { TooltipProvider } from "@radix-ui/react-tooltip";
import Router from "next/router";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
-import { ReactNode, useEffect } from "react";
+import { ReactNode } from "react";
import { DOCUMENT_URL } from "@/constants";
import {
authorizeLiveblocks,
getLiveUsers,
getSpecificDocuments,
} from "@/lib/actions";
-import { syncLiveblocksGroups } from "@/lib/actions/syncLiveblocksGroups";
-import { getGroups, getUsers } from "@/lib/database";
-
-const SYNC_LIVEBLOCKS_GROUPS_KEY = "sync-liveblocks-groups";
-const SYNC_LIVEBLOCKS_GROUPS_VALUE = "1";
+import { getUsers } from "@/lib/database";
export function Providers({
children,
@@ -26,30 +22,6 @@ export function Providers({
children: ReactNode;
session: Session | null;
}) {
- // Sync the starter kit's groups with Liveblocks once per
- // session and only during development
- useEffect(() => {
- if (process.env.NODE_ENV !== "development") {
- return;
- }
-
- if (
- sessionStorage.getItem(SYNC_LIVEBLOCKS_GROUPS_KEY) ===
- SYNC_LIVEBLOCKS_GROUPS_VALUE
- ) {
- return;
- }
-
- sessionStorage.setItem(
- SYNC_LIVEBLOCKS_GROUPS_KEY,
- SYNC_LIVEBLOCKS_GROUPS_VALUE
- );
-
- syncLiveblocksGroups().catch(() => {
- sessionStorage.removeItem(SYNC_LIVEBLOCKS_GROUPS_KEY);
- });
- }, []);
-
return (
{
- const { data, error } = await authorizeLiveblocks();
+ authEndpoint={async (roomId) => {
+ const { data, error } = await authorizeLiveblocks(roomId);
if (error) {
Router.push({
@@ -82,30 +54,23 @@ export function Providers({
}}
// Resolve group IDs into name/avatar/etc for Comments
resolveGroupsInfo={async ({ groupIds }) => {
- const groups = await getGroups({ groupIds });
- return groups.map((group) => group ?? undefined);
- }}
- // Resolve a room ID into room information for Notifications
- resolveRoomsInfo={async ({ roomIds }) => {
- const documents = await getSpecificDocuments({
- documentIds: roomIds,
- });
- return documents.map((document) => ({
- name: document ? document.name : undefined,
- url: document
- ? DOCUMENT_URL(document.type, document.id)
- : undefined,
+ // Not expected in current app, only @here an @everyone added
+ if (!groupIds.includes("everyone") || !groupIds.includes("here")) {
+ return [];
+ }
+
+ return groupIds.map((groupId) => ({
+ id: groupId,
+ name: groupId.charAt(0).toUpperCase() + groupId.slice(1),
}));
}}
// Resolve what mentions are suggested for Comments/Text Editor
resolveMentionSuggestions={async ({ text, roomId }) => {
- const [allUsers, liveUsers, matchingGroups, matchingUsers] =
- await Promise.all([
- getUsers(), // All users
- getLiveUsers({ documentIds: [roomId] }), // All users currently online in the document
- getGroups({ search: text }), // Groups that match the search term
- getUsers({ search: text }), // Users that match the search term
- ]);
+ const [allUsers, liveUsers, matchingUsers] = await Promise.all([
+ getUsers(), // All users
+ getLiveUsers({ documentIds: [roomId] }), // All users currently online in the document
+ getUsers({ search: text }), // Users that match the search term
+ ]);
const globalSuggestions: MentionData[] = [];
@@ -131,14 +96,6 @@ export function Providers({
});
}
- // Create group suggestions, e.g. `@engineering`
- const groupSuggestions: MentionData[] = matchingGroups
- .filter((group) => group !== null)
- .map((group) => ({
- kind: "group",
- id: group.id,
- }));
-
// Create user suggestions, e.g. `anjali.wanda@example.com`
const userSuggestions: MentionData[] = matchingUsers
.filter((user) => user !== null)
@@ -148,11 +105,19 @@ export function Providers({
}));
// Return combined suggestions
- return [
- ...globalSuggestions,
- ...groupSuggestions,
- ...userSuggestions,
- ];
+ return [...globalSuggestions, ...userSuggestions];
+ }}
+ // Resolve a room ID into room information for Notifications
+ resolveRoomsInfo={async ({ roomIds }) => {
+ const documents = await getSpecificDocuments({
+ documentIds: roomIds,
+ });
+ return documents.map((document) => ({
+ name: document ? document.name : undefined,
+ url: document
+ ? DOCUMENT_URL(document.type, document.id)
+ : undefined,
+ }));
}}
>
{children}
diff --git a/starter-kits/nextjs-starter-kit/app/canvas/[id]/CanvasDocumentView.tsx b/starter-kits/nextjs-starter-kit/app/canvas/[id]/CanvasDocumentView.tsx
index a8d991b87dc..564687e0eee 100644
--- a/starter-kits/nextjs-starter-kit/app/canvas/[id]/CanvasDocumentView.tsx
+++ b/starter-kits/nextjs-starter-kit/app/canvas/[id]/CanvasDocumentView.tsx
@@ -3,7 +3,7 @@
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { Canvas } from "@/components/Canvas";
-import { DocumentHeader, DocumentHeaderSkeleton } from "@/components/Document";
+import { Header, HeaderSkeleton } from "@/components/Header";
import { DocumentLayout, DocumentProviders } from "@/layouts/Document";
import { ErrorLayout } from "@/layouts/Error";
import { Document, ErrorData } from "@/types";
@@ -29,14 +29,12 @@ export function CanvasDocumentView({ initialDocument, initialError }: Props) {
}
if (!initialDocument) {
- return
-
diff --git a/starter-kits/nextjs-starter-kit/app/dashboard/drafts/page.tsx b/starter-kits/nextjs-starter-kit/app/dashboard/drafts/page.tsx
deleted file mode 100644
index ebea7fd409f..00000000000
--- a/starter-kits/nextjs-starter-kit/app/dashboard/drafts/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DocumentsLayout } from "@/layouts/Documents";
-
-export default async function DashboardDraftsPage() {
- return {children} ;
+ return {children} ;
}
diff --git a/starter-kits/nextjs-starter-kit/app/dashboard/organization/page.tsx b/starter-kits/nextjs-starter-kit/app/dashboard/organization/page.tsx
new file mode 100644
index 00000000000..ff8237e97f9
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/app/dashboard/organization/page.tsx
@@ -0,0 +1,5 @@
+import { DocumentsList } from "@/components/DocumentsList";
+
+export default async function DashboardPage() {
+ return
-
diff --git a/starter-kits/nextjs-starter-kit/app/whiteboard/[id]/WhiteboardDocumentView.tsx b/starter-kits/nextjs-starter-kit/app/whiteboard/[id]/WhiteboardDocumentView.tsx
index 58b27758590..04ef89dbf99 100644
--- a/starter-kits/nextjs-starter-kit/app/whiteboard/[id]/WhiteboardDocumentView.tsx
+++ b/starter-kits/nextjs-starter-kit/app/whiteboard/[id]/WhiteboardDocumentView.tsx
@@ -2,7 +2,7 @@
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
-import { DocumentHeader, DocumentHeaderSkeleton } from "@/components/Document";
+import { Header, HeaderSkeleton } from "@/components/Header";
import { Whiteboard } from "@/components/Whiteboard";
import { DocumentLayout, DocumentProviders } from "@/layouts/Document";
import { ErrorLayout } from "@/layouts/Error";
@@ -32,14 +32,12 @@ export function WhiteboardDocumentView({
}
if (!initialDocument) {
- return
-
diff --git a/starter-kits/nextjs-starter-kit/auth.ts b/starter-kits/nextjs-starter-kit/auth.ts
index b052e509dbe..f9c072050c3 100644
--- a/starter-kits/nextjs-starter-kit/auth.ts
+++ b/starter-kits/nextjs-starter-kit/auth.ts
@@ -1,5 +1,6 @@
import NextAuth from "next-auth";
import { authConfig } from "@/auth.config";
+import { getCurrentOrganization, switchOrganization } from "@/lib/actions";
import { getUser } from "@/lib/database/getUser";
// Your NextAuth secret (generate a new one for production)
@@ -19,7 +20,7 @@ export const {
callbacks: {
// Get extra user info from your database to pass to front-end
// For front end, update next-auth.d.ts with session type
- async session({ session }: { session: any }) {
+ async session({ session, token }: { session: any; token: any }) {
const userInfo = await getUser(session.user.email);
if (!userInfo) {
@@ -27,8 +28,42 @@ export const {
}
session.user.info = userInfo;
+ session.user.currentOrganizationId = token.organizationId;
+
+ // On every load, check current org and if user has access
+ const currentOrganizationId = await getCurrentOrganization();
+
+ if (currentOrganizationId) {
+ if (userInfo.organizationIds.includes(currentOrganizationId)) {
+ session.user.currentOrganizationId = currentOrganizationId;
+ }
+ }
+
return session;
},
+ async jwt({ token, user }) {
+ // Once on sign in, get user and current org. Set an org if not set already.
+ if (user && user.email) {
+ const userInfo = await getUser(user.email);
+
+ if (userInfo) {
+ const currentOrganizationId = await getCurrentOrganization();
+
+ if (
+ currentOrganizationId &&
+ userInfo.organizationIds.includes(currentOrganizationId)
+ ) {
+ token.organizationId = currentOrganizationId;
+ } else {
+ const firstOrganization = userInfo.organizationIds[0];
+ token.organizationId = firstOrganization;
+ await switchOrganization(firstOrganization);
+ }
+ }
+ }
+
+ return token;
+ },
},
pages: {
signIn: "/signin",
diff --git a/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardHeader.module.css b/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardHeader.module.css
deleted file mode 100644
index 37b711bb10f..00000000000
--- a/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardHeader.module.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.header {
- display: grid;
- width: 100%;
- height: 100%;
- padding: 0 var(--space-8);
- grid-template-columns: 1fr 2fr 1fr;
-}
-
-.menu,
-.logo,
-.profile {
- display: flex;
- place-items: center;
-}
-
-.menu {
- place-content: flex-start;
-}
-
-.menuToggle {
- display: flex;
- width: 32px;
- height: 32px;
- background: var(--color-surface);
- border-radius: 100%;
- place-content: center;
- place-items: center;
-}
-
-.logo {
- place-content: center;
-}
-
-.logoLink {
- transition: opacity var(--transition);
- outline: none;
-}
-
-.logoLink:hover,
-.logoLink:focus-visible {
- opacity: var(--opacity-hover);
-}
-
-.profile {
- gap: var(--space-6);
- place-content: flex-end;
-}
-
-.profileButton {
- transition: opacity var(--transition);
- outline: none;
-}
-
-.profileButton:hover,
-.profileButton:focus-visible {
- opacity: var(--opacity-hover);
-}
-
-.profilePopover {
- display: flex;
- min-width: 180px;
- max-width: 320px;
- flex-direction: column;
-}
-
-.profilePopoverInfo {
- padding: var(--space-6) var(--space-7);
-}
-
-.profilePopoverActions {
- padding: var(--space-3);
-}
-
-.profilePopoverInfo {
- display: flex;
- flex-direction: column;
- border-bottom: 1px solid var(--color-border);
-}
-
-.profilePopoverName,
-.profilePopoverId {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.profilePopoverName {
- font-weight: 500;
-}
-
-.profilePopoverId {
- color: var(--color-text-lighter);
- font-size: var(--size-sm);
-}
-
-.profilePopoverButton {
- width: 100%;
- place-content: center;
-}
-
-@media (min-width: 1024px) {
- .header {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .menu {
- display: none;
- }
-
- .logo {
- place-content: flex-start;
- }
-}
diff --git a/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardHeader.tsx b/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardHeader.tsx
deleted file mode 100644
index c2fa5e977f8..00000000000
--- a/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardHeader.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import clsx from "clsx";
-import Link from "next/link";
-import { signOut, useSession } from "next-auth/react";
-import { ComponentProps, MouseEventHandler } from "react";
-import { CrossIcon, MenuIcon, SignOutIcon } from "@/icons";
-import { Avatar } from "@/primitives/Avatar";
-import { Button } from "@/primitives/Button";
-import { Popover } from "@/primitives/Popover";
-import { InboxPopover } from "../Inbox";
-import { Logo } from "../Logo";
-import styles from "./DashboardHeader.module.css";
-
-interface Props extends ComponentProps<"header"> {
- isOpen: boolean;
- onMenuClick: MouseEventHandler;
-}
-
-export function DashboardHeader({
- isOpen,
- onMenuClick,
- className,
- ...props
-}: Props) {
- const { data: session } = useSession();
-
- return (
-
-
-
- {isOpen ?
-
-
-
-
- {session && (
-
-
-
- {session.user.info.name}
-
-
- {session.user.info.id}
-
-
-
-
-
-
-
- )}
-
-
-
-
- );
-}
diff --git a/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardSidebar.tsx b/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardSidebar.tsx
index 5eb4a1b2a9d..d3fe6ded92c 100644
--- a/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardSidebar.tsx
+++ b/starter-kits/nextjs-starter-kit/components/Dashboard/DashboardSidebar.tsx
@@ -1,20 +1,22 @@
+"use client";
+
import clsx from "clsx";
+import Image from "next/image";
import { usePathname } from "next/navigation";
import { ComponentProps, useMemo } from "react";
import {
- DASHBOARD_DRAFTS_URL,
- DASHBOARD_GROUP_URL,
+ DASHBOARD_ORGANIZATION_URL,
+ DASHBOARD_PRIVATE_URL,
+ DASHBOARD_PUBLIC_URL,
DASHBOARD_URL,
} from "@/constants";
-import { FileIcon, FolderIcon } from "@/icons";
+import { EarthIcon, FileIcon, LockIcon } from "@/icons";
+import { useCurrentOrganization } from "@/lib/hooks";
import { LinkButton } from "@/primitives/Button";
-import { Group } from "@/types";
import { normalizeTrailingSlash } from "@/utils";
import styles from "./DashboardSidebar.module.css";
-interface Props extends ComponentProps<"div"> {
- groups: Group[];
-}
+interface Props extends ComponentProps<"div"> {}
interface SidebarLinkProps extends Omit<
ComponentProps,
@@ -48,41 +50,67 @@ function SidebarLink({
);
}
-export function DashboardSidebar({ className, groups, ...props }: Props) {
+const ICON_SIZE = 18;
+
+export function DashboardSidebar({ className, ...props }: Props) {
+ const { currentOrganization } = useCurrentOrganization();
return (
+
+
+
Filter
-
-
+
+
-
Groups
-
- {groups.map((group) => {
- return (
-
-
- );
- })}
-
-
);
diff --git a/starter-kits/nextjs-starter-kit/components/Dashboard/index.ts b/starter-kits/nextjs-starter-kit/components/Dashboard/index.ts
index 4fda7973b73..b14d912993f 100644
--- a/starter-kits/nextjs-starter-kit/components/Dashboard/index.ts
+++ b/starter-kits/nextjs-starter-kit/components/Dashboard/index.ts
@@ -1,2 +1 @@
export * from "./DashboardSidebar";
-export * from "./DashboardHeader";
diff --git a/starter-kits/nextjs-starter-kit/components/Document/DocumentHeader.tsx b/starter-kits/nextjs-starter-kit/components/Document/DocumentHeader.tsx
deleted file mode 100644
index 3febd357d1a..00000000000
--- a/starter-kits/nextjs-starter-kit/components/Document/DocumentHeader.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { ClientSideSuspense } from "@liveblocks/react";
-import clsx from "clsx";
-import Link from "next/link";
-import { ComponentProps } from "react";
-import { InboxPopover } from "@/components/Inbox";
-import { ShareIcon } from "@/icons";
-import { renameDocument } from "@/lib/actions";
-import { useInitialDocument } from "@/lib/hooks";
-import { Button } from "@/primitives/Button";
-import { Skeleton } from "@/primitives/Skeleton";
-import { Document } from "@/types";
-import { Logo } from "../Logo";
-import { ShareDialog } from "../ShareDialog";
-import { DocumentHeaderAvatars } from "./DocumentHeaderAvatars";
-import { DocumentHeaderName } from "./DocumentHeaderName";
-import styles from "./DocumentHeader.module.css";
-
-interface Props extends ComponentProps<"header"> {
- documentId: Document["id"];
- showTitle?: boolean;
-}
-
-export function DocumentHeader({
- documentId,
- showTitle = true,
- className,
- ...props
-}: Props) {
- const initialDocument = useInitialDocument();
-
- return (
-
-
-
-
- {showTitle ? (
-
- {initialDocument.name}
-
- }
- >
- renameDocument({ documentId, name })}
- />
-
- ) : null}
-
-
-
-
-
-
-
} disabled={true}>
- Share
-
- }
- >
-
-
-
-
-
-
- );
-}
-
-export function DocumentHeaderSkeleton({
- className,
- ...props
-}: ComponentProps<"header">) {
- return (
-
- );
-}
diff --git a/starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderAvatars.tsx b/starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderAvatars.tsx
deleted file mode 100644
index 6b197f7e263..00000000000
--- a/starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderAvatars.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useOthers, useSelf } from "@liveblocks/react/suspense";
-import { useMemo } from "react";
-import { AvatarStack } from "@/primitives/AvatarStack";
-
-export function DocumentHeaderAvatars() {
- const self = useSelf();
- const others = useOthers();
- const users = useMemo(
- () => (self ? [self, ...others] : others),
- [self, others]
- );
-
- return (
- ({
- name: user.info.name,
- src: user.info.avatar,
- color: user.info.color,
- }))}
- max={5}
- size={20}
- tooltip
- tooltipProps={{ sideOffset: 28 }}
- />
- );
-}
diff --git a/starter-kits/nextjs-starter-kit/components/Document/index.ts b/starter-kits/nextjs-starter-kit/components/Document/index.ts
deleted file mode 100644
index 9071280d17b..00000000000
--- a/starter-kits/nextjs-starter-kit/components/Document/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./DocumentHeader";
diff --git a/starter-kits/nextjs-starter-kit/components/Documents/DocumentCreatePopover.module.css b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentCreatePopover.module.css
similarity index 100%
rename from starter-kits/nextjs-starter-kit/components/Documents/DocumentCreatePopover.module.css
rename to starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentCreatePopover.module.css
diff --git a/starter-kits/nextjs-starter-kit/components/Documents/DocumentCreatePopover.tsx b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentCreatePopover.tsx
similarity index 87%
rename from starter-kits/nextjs-starter-kit/components/Documents/DocumentCreatePopover.tsx
rename to starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentCreatePopover.tsx
index 64af4c6fc76..0bcd1621c47 100644
--- a/starter-kits/nextjs-starter-kit/components/Documents/DocumentCreatePopover.tsx
+++ b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentCreatePopover.tsx
@@ -1,25 +1,19 @@
+"use client";
+
import { ComponentProps, useState } from "react";
import { PlusIcon } from "@/icons";
import { createDocument } from "@/lib/actions";
import { Button } from "@/primitives/Button";
import { Popover } from "@/primitives/Popover";
-import { Document, DocumentGroup, DocumentType, DocumentUser } from "@/types";
+import { Document, DocumentType, DocumentUser } from "@/types";
import styles from "./DocumentCreatePopover.module.css";
interface Props extends Omit, "content"> {
documentName?: Document["name"];
- draft: Document["draft"];
- groupIds?: DocumentGroup["id"][];
userId: DocumentUser["id"];
}
-export function DocumentCreatePopover({
- groupIds,
- userId,
- draft,
- children,
- ...props
-}: Props) {
+export function DocumentCreatePopover({ userId, children, ...props }: Props) {
const [disableButtons, setDisableButtons] = useState(false);
// Create a new document, then navigate to the document's URL location
@@ -30,8 +24,6 @@ export function DocumentCreatePopover({
name,
type,
userId,
- draft,
- groupIds: draft ? undefined : groupIds,
},
true
);
diff --git a/starter-kits/nextjs-starter-kit/components/Documents/DocumentDeleteDialog.module.css b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentDeleteDialog.module.css
similarity index 100%
rename from starter-kits/nextjs-starter-kit/components/Documents/DocumentDeleteDialog.module.css
rename to starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentDeleteDialog.module.css
diff --git a/starter-kits/nextjs-starter-kit/components/Documents/DocumentDeleteDialog.tsx b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentDeleteDialog.tsx
similarity index 100%
rename from starter-kits/nextjs-starter-kit/components/Documents/DocumentDeleteDialog.tsx
rename to starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentDeleteDialog.tsx
diff --git a/starter-kits/nextjs-starter-kit/components/Documents/DocumentIcon.tsx b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentIcon.tsx
similarity index 100%
rename from starter-kits/nextjs-starter-kit/components/Documents/DocumentIcon.tsx
rename to starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentIcon.tsx
diff --git a/starter-kits/nextjs-starter-kit/components/Documents/DocumentRow.module.css b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentRow.module.css
similarity index 95%
rename from starter-kits/nextjs-starter-kit/components/Documents/DocumentRow.module.css
rename to starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentRow.module.css
index e22c9c4c045..f1be21aa71c 100644
--- a/starter-kits/nextjs-starter-kit/components/Documents/DocumentRow.module.css
+++ b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentRow.module.css
@@ -58,15 +58,10 @@
font-size: var(--size-xs);
}
-.groups {
- display: inline-flex;
- margin-left: var(--space-3);
- gap: var(--space-3);
-}
-
-.group {
+.permissionsGroup {
position: relative;
display: inline-block;
+ margin-left: var(--space-3);
padding: 0 var(--space-3);
border-radius: 1em;
color: var(--color-text-lighter);
diff --git a/starter-kits/nextjs-starter-kit/components/Documents/DocumentRow.tsx b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentRow.tsx
similarity index 78%
rename from starter-kits/nextjs-starter-kit/components/Documents/DocumentRow.tsx
rename to starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentRow.tsx
index 60a9fe637e5..801455f0813 100644
--- a/starter-kits/nextjs-starter-kit/components/Documents/DocumentRow.tsx
+++ b/starter-kits/nextjs-starter-kit/components/DocumentsList/DocumentRow.tsx
@@ -1,24 +1,21 @@
+"use client";
+
import { RoomUser } from "@liveblocks/node";
import clsx from "clsx";
import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
import Link from "next/link";
import { useSession } from "next-auth/react";
-import {
- ComponentProps,
- useCallback,
- useEffect,
- useMemo,
- useState,
-} from "react";
+import { ComponentProps, useCallback, useEffect, useState } from "react";
import { DOCUMENT_URL } from "@/constants";
import { DeleteIcon, MoreIcon } from "@/icons";
-import { useGroupsInfo } from "@/lib/hooks";
+import { getOrganizations } from "@/lib/actions";
+import { useDocumentsFunctionSWR } from "@/lib/hooks";
import { getDocumentAccess } from "@/lib/utils";
import { AvatarStack } from "@/primitives/AvatarStack";
import { Button } from "@/primitives/Button";
import { Popover } from "@/primitives/Popover";
import { Skeleton } from "@/primitives/Skeleton";
-import { Document, DocumentAccess } from "@/types";
+import { Document, DocumentPermissionType } from "@/types";
import { DocumentDeleteDialog } from "./DocumentDeleteDialog";
import { DocumentIcon } from "./DocumentIcon";
import styles from "./DocumentRow.module.css";
@@ -36,16 +33,9 @@ export function DocumentRow({
revalidateDocuments,
...props
}: Props) {
- const groupIds = useMemo(
- () => Object.keys(document.accesses.groups),
- [document]
- );
- const groups = useGroupsInfo(groupIds);
-
const { data: session } = useSession();
- const [currentUserAccess, setCurrentUserAccess] = useState(
- DocumentAccess.NONE
- );
+ const [currentUserAccess, setCurrentUserAccess] =
+ useState("read");
// Check if current user has access to edit the room
useEffect(() => {
@@ -54,9 +44,8 @@ export function DocumentRow({
}
const access = getDocumentAccess({
- documentAccesses: document.accesses,
+ document,
userId: session.user.info.id,
- groupIds: session.user.info.groupIds,
});
setCurrentUserAccess(access);
}, [session, document]);
@@ -72,6 +61,15 @@ export function DocumentRow({
}
}, []);
+ const { data: organizations } = useDocumentsFunctionSWR(
+ [getOrganizations, { organizationIds: [document.organization] }],
+ {
+ refreshInterval: 0,
+ }
+ );
+
+ const organization = organizations?.[0] ?? null;
+
return (
@@ -81,20 +79,24 @@ export function DocumentRow({
{document.name}
- {groups.length > 0 ? (
-
- {groups.map((group) => (
-
- {group.name}
-
- ))}
+ {document.generalPermissions.group === "public" ? (
+ Public
+ ) : null}
+ {organization &&
+ document.generalPermissions.group === "organization" ? (
+
+ {organization.name}
) : null}
+ {document.generalPermissions.group === "private" ? (
+ Private
+ ) : null}
Edited {formatDistanceToNow(date)} ago
+
{others && (
)}
- {currentUserAccess === DocumentAccess.FULL ? (
+
+ {currentUserAccess === "write" ? (
{
- filter?: "all" | "drafts" | "group";
- group?: Group;
+ filter?: "all" | "private" | "organization" | "public";
}
-export function DocumentsList({
- filter = "all",
- group,
- className,
- ...props
-}: Props) {
+export function DocumentsList({ filter = "all", className, ...props }: Props) {
const { data: session } = useSession();
const [documentType, setDocumentType] = useState("all");
- // Return `getDocuments` params for the current filters/group
+ // Return `getDocuments` params for the current filters
const getDocumentsOptions: GetDocumentsProps | null = useMemo(() => {
if (!session) {
return null;
@@ -45,33 +39,13 @@ export function DocumentsList({
const currentDocumentType =
documentType === "all" ? undefined : documentType;
- // Get the current user's drafts
- if (filter === "drafts") {
- return {
- documentType: currentDocumentType,
- userId: session.user.info.id,
- drafts: true,
- limit: DOCUMENT_LOAD_LIMIT,
- };
- }
-
- // Get the current group's documents
- if (filter === "group" && group?.id) {
- return {
- documentType: currentDocumentType,
- groupIds: [group.id],
- limit: DOCUMENT_LOAD_LIMIT,
- };
- }
-
// Get all documents for the current user
return {
documentType: currentDocumentType,
- userId: session.user.info.id,
- groupIds: session.user.info.groupIds,
+ permissionGroup: filter !== "all" ? filter : undefined,
limit: DOCUMENT_LOAD_LIMIT,
};
- }, [filter, group, session, documentType]);
+ }, [session, documentType, filter]);
// When session is found, find pages of documents with the above document options
const {
@@ -112,13 +86,9 @@ export function DocumentsList({
-
);
@@ -129,9 +99,7 @@ export function DocumentsList({
{...props}
>
-
- {group?.name ?? capitalize(filter)}
-
+
{capitalize(filter)}
{
+ documentId: Document["id"] | null;
+ showTitle?: boolean;
+}
+
+export function Header({
+ documentId,
+ showTitle = true,
+ className,
+ ...props
+}: Props) {
+ const isInsideRoom = useIsInsideRoom();
+ const { status } = useSession();
+
+ return (
+
+
+ {status === "authenticated" ? (
+
+
+ {showTitle ? (
+
+ {isInsideRoom && documentId ? (
+
+ renameDocument({ documentId, name })
+ }
+ />
+ ) : null}
+
+ ) : null}
+
+
+
+
+ {isInsideRoom ?
+
+
+ {isInsideRoom ? (
+
+
+
+ ) : null}
+
+ {status === "authenticated" ? (
+
+ ) : null}
+
+ );
+}
+
+function HeaderAvatars() {
+ const self = useSelf();
+ const others = useOthers();
+ const users = useMemo(
+ () => (self ? [self, ...others] : others),
+ [self, others]
+ );
+
+ return (
+ ({
+ name: user.info.name,
+ src: user.info.avatar,
+ color: user.info.color,
+ }))}
+ max={5}
+ size={20}
+ tooltip
+ tooltipProps={{ sideOffset: 28 }}
+ />
+ );
+}
+
+export function HeaderSkeleton({
+ className,
+ ...props
+}: ComponentProps<"header">) {
+ return (
+
+ );
+}
diff --git a/starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderName.module.css b/starter-kits/nextjs-starter-kit/components/Header/HeaderName.module.css
similarity index 100%
rename from starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderName.module.css
rename to starter-kits/nextjs-starter-kit/components/Header/HeaderName.module.css
diff --git a/starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderName.tsx b/starter-kits/nextjs-starter-kit/components/Header/HeaderName.tsx
similarity index 95%
rename from starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderName.tsx
rename to starter-kits/nextjs-starter-kit/components/Header/HeaderName.tsx
index b9dd4db0311..994606b2ffa 100644
--- a/starter-kits/nextjs-starter-kit/components/Document/DocumentHeaderName.tsx
+++ b/starter-kits/nextjs-starter-kit/components/Header/HeaderName.tsx
@@ -15,17 +15,13 @@ import { EditIcon } from "@/icons";
import { getDocument } from "@/lib/actions";
import { useInitialDocument } from "@/lib/hooks/useInitialDocument";
import { Tooltip } from "@/primitives/Tooltip";
-import styles from "./DocumentHeaderName.module.css";
+import styles from "./HeaderName.module.css";
interface Props extends ComponentProps<"div"> {
onDocumentRename: (name: string) => Promise;
}
-export function DocumentHeaderName({
- onDocumentRename,
- className,
- ...props
-}: Props) {
+export function HeaderName({ onDocumentRename, className, ...props }: Props) {
const initialDocument = useInitialDocument();
const broadcastEvent = useBroadcastEvent();
diff --git a/starter-kits/nextjs-starter-kit/components/Header/index.ts b/starter-kits/nextjs-starter-kit/components/Header/index.ts
new file mode 100644
index 00000000000..9e08a64dbfb
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/components/Header/index.ts
@@ -0,0 +1 @@
+export * from "./Header";
diff --git a/starter-kits/nextjs-starter-kit/components/Inbox/CustomNotifications.tsx b/starter-kits/nextjs-starter-kit/components/Inbox/CustomNotifications.tsx
index 1dd0d609c79..b1fdb20f03c 100644
--- a/starter-kits/nextjs-starter-kit/components/Inbox/CustomNotifications.tsx
+++ b/starter-kits/nextjs-starter-kit/components/Inbox/CustomNotifications.tsx
@@ -2,7 +2,7 @@ import {
InboxNotification,
InboxNotificationCustomKindProps,
} from "@liveblocks/react-ui";
-import { DocumentIcon } from "@/components/Documents";
+import { DocumentIcon } from "@/components/DocumentsList";
import { DOCUMENT_URL } from "@/constants";
import { getDocument } from "@/lib/actions";
import { useDocumentsFunctionSWR } from "@/lib/hooks";
diff --git a/starter-kits/nextjs-starter-kit/components/Inbox/InboxPopover.tsx b/starter-kits/nextjs-starter-kit/components/Inbox/InboxPopover.tsx
index d58025e7975..773b5625be2 100644
--- a/starter-kits/nextjs-starter-kit/components/Inbox/InboxPopover.tsx
+++ b/starter-kits/nextjs-starter-kit/components/Inbox/InboxPopover.tsx
@@ -1,7 +1,4 @@
-import {
- ClientSideSuspense,
- useUnreadInboxNotificationsCount,
-} from "@liveblocks/react";
+import { useUnreadInboxNotificationsCount } from "@liveblocks/react";
import { usePathname } from "next/navigation";
import { ComponentProps, useEffect, useState } from "react";
import { InboxIcon } from "@/icons";
@@ -10,14 +7,6 @@ import { Popover } from "@/primitives/Popover";
import { Inbox } from "./Inbox";
import styles from "./InboxPopover.module.css";
-function InboxPopoverUnreadCount() {
- const { count } = useUnreadInboxNotificationsCount();
-
- return count ? (
- {count}
- ) : null;
-}
-
export function InboxPopover(
props: Omit, "content">
) {
@@ -37,10 +26,20 @@ export function InboxPopover(
>
Notification inbox
-
-
+ {count}
+ ) : null;
+}
diff --git a/starter-kits/nextjs-starter-kit/components/OrganizationPopover/OrganizationPopover.module.css b/starter-kits/nextjs-starter-kit/components/OrganizationPopover/OrganizationPopover.module.css
new file mode 100644
index 00000000000..67acc17b431
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/components/OrganizationPopover/OrganizationPopover.module.css
@@ -0,0 +1,174 @@
+.profileButton {
+ margin-left: calc(0px - var(--space-4));
+ display: flex;
+ align-items: center;
+ gap: var(--space-4);
+ height: var(--space-13);
+ padding: 0 var(--space-7) 0 var(--space-5);
+ border-radius: var(--radius-sm);
+ color: var(--color-text-light);
+ font-size: var(--size-sm);
+ font-weight: 500;
+ transition: var(--transition);
+ transition-property: background, color, opacity;
+ outline: none;
+ border: none;
+ cursor: pointer;
+}
+
+.profileButton[data-loading] {
+ pointer-events: none;
+}
+
+.profileButton:hover,
+.profileButton:focus-visible {
+ background: var(--color-surface);
+ color: var(--color-text);
+ opacity: 1;
+}
+
+.profileButtonName {
+ white-space: nowrap;
+}
+
+.profileAvatar,
+.profilePopoverAvatar,
+.profileButtonPlaceholderAvatar {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ flex: none;
+ object-fit: cover;
+ background: var(--color-border);
+}
+
+.profileButtonIcon {
+ flex: none;
+ margin-right: calc(-1 * var(--space-3));
+ opacity: 0.4;
+}
+
+.profilePopoverAvatar {
+ margin-top: 12px;
+ width: 46px;
+ height: 46px;
+}
+
+.profileButtonPlaceholderAvatar {
+ background: var(--color-surface);
+}
+
+.profileButtonPlaceholderName {
+ width: 71.5px;
+ height: 14px;
+ background: var(--color-surface);
+ border-radius: var(--radius-xs);
+}
+
+.profilePopover {
+ display: flex;
+ min-width: 180px;
+ max-width: 320px;
+ flex-direction: column;
+}
+
+.profilePopoverHeader {
+ display: flex;
+}
+
+.profilePopoverInfo {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-6);
+ padding: var(--space-6) var(--space-7);
+ border-bottom: 1px solid var(--color-border);
+ align-items: center;
+}
+
+.profilePopoverInfoText {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+}
+
+.profilePopoverName,
+.profilePopoverId {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.profilePopoverName {
+ font-weight: 500;
+ font-size: var(--size-sm);
+}
+
+.profilePopoverId {
+ color: var(--color-text-lighter);
+ font-size: var(--size-xs);
+}
+
+.profilePopoverActions {
+ padding: var(--space-3);
+}
+
+.profilePopoverButton {
+ width: 100%;
+ place-content: center;
+}
+
+.organizationsSection {
+ display: flex;
+ flex-direction: column;
+ padding: var(--space-3);
+ border-bottom: 1px solid var(--color-border);
+}
+
+.organizationsLabel {
+ padding: var(--space-3) var(--space-4);
+ color: var(--color-text-lighter);
+ font-size: var(--size-xs);
+}
+
+.organizationItem {
+ display: flex;
+ align-items: center;
+ gap: var(--space-4);
+ padding: var(--space-3) var(--space-4);
+ border-radius: var(--radius-sm);
+ background: none;
+ border: none;
+ color: var(--color-text-light);
+ font-size: var(--size-sm);
+ font-weight: 500;
+ cursor: pointer;
+ transition: var(--transition);
+ transition-property: background, color;
+ outline: none;
+ text-align: left;
+ width: 100%;
+}
+
+.organizationItem:hover,
+.organizationItem:focus-visible {
+ background: var(--color-surface);
+ color: var(--color-text);
+}
+
+.organizationItemAvatar {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ flex: none;
+ object-fit: cover;
+}
+
+.organizationItemName {
+ flex: 1;
+}
+
+.checkIcon {
+ margin-left: auto;
+ flex: none;
+ color: var(--color-text);
+}
diff --git a/starter-kits/nextjs-starter-kit/components/OrganizationPopover/OrganizationPopover.tsx b/starter-kits/nextjs-starter-kit/components/OrganizationPopover/OrganizationPopover.tsx
new file mode 100644
index 00000000000..4f7f89a5f2a
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/components/OrganizationPopover/OrganizationPopover.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import { useIsInsideRoom } from "@liveblocks/react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { signOut, useSession } from "next-auth/react";
+import { useCallback, useMemo } from "react";
+import { DASHBOARD_URL } from "@/constants";
+import { CheckIcon, SelectIcon, SignOutIcon } from "@/icons";
+import {
+ getOrganizations,
+ getUserOrganizations,
+ switchOrganization,
+} from "@/lib/actions";
+import { useInitialDocument } from "@/lib/hooks";
+import { useDocumentsFunctionSWR } from "@/lib/hooks/useDocumentsFunctionSWR";
+import { Popover } from "@/primitives/Popover";
+import { Organization } from "@/types";
+import styles from "./OrganizationPopover.module.css";
+
+export function OrganizationPopover() {
+ const router = useRouter();
+ const { data: session } = useSession();
+ const isInsideRoom = useIsInsideRoom();
+
+ // Get a list of organizations for the current user
+ const {
+ data: organizations,
+ // mutate: revalidateOrganizations,
+ // error: organizationsError,
+ } = useDocumentsFunctionSWR([getUserOrganizations, []], {
+ refreshInterval: 0,
+ });
+
+ const currentOrganization = useMemo(() => {
+ if (!session || !organizations || organizations.length === 0) {
+ return null;
+ }
+
+ const currentId = session.user.currentOrganizationId;
+ const found = organizations.find((org) => org.id === currentId);
+
+ if (found) {
+ return found;
+ }
+
+ return organizations[0];
+ }, [organizations, session]);
+
+ // Changes organizations then go to dashboard
+ const handleOrganizationChange = useCallback(
+ async (organizationId: string) => {
+ if (organizationId === session?.user.currentOrganizationId) {
+ // If current organization is clicked, go to dashboard
+ router.push(DASHBOARD_URL);
+ return;
+ }
+
+ const result = await switchOrganization(organizationId);
+
+ if (result.error) {
+ console.error("Failed to switch organization:", result.error);
+ return;
+ }
+
+ // Always hard refresh/replace the page to re-authenticate with Liveblocks
+ // for a new organization. This will cause the Liveblocks auth callback to
+ // read the new organization from the cookie. Goes to the dashboard.
+ window.location.replace(DASHBOARD_URL);
+ },
+ [session, router]
+ );
+
+ if (!session) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ {session.user.info.name}
+
+
+ {session.user.info.id}
+
+
+
+
Workspaces
+ {organizations.map((organization) => {
+ const isSelected = organization.id === currentOrganization?.id;
+ const avatar =
+ organization.id === session.user.info.id
+ ? session.user.info.avatar
+ : organization.avatar;
+
+ return (
+
handleOrganizationChange(organization.id)}
+ >
+ {avatar && (
+
+ {organization.name}
+
+ {isSelected &&
+ );
+ })}
+
+ signOut()}
+ >
+
+
+
+ }
+ side="bottom"
+ sideOffset={6}
+ >
+
+ {currentOrganization ? (
+ isInsideRoom ? (
+
+
+ );
+}
+
+// If inside a document, show this documents organization in the trigger
+function DocumentOrganizationTrigger({
+ currentOrganization,
+}: {
+ currentOrganization: Organization;
+}) {
+ const document = useInitialDocument();
+
+ // Get the current document's organization
+ const { data: documentOrganizations, error: organizationsError } =
+ useDocumentsFunctionSWR(
+ [getOrganizations, { organizationIds: [document.organization] }],
+ {
+ refreshInterval: 0,
+ }
+ );
+
+ // Skip the loading placeholder if in the correct organization already
+ if (currentOrganization.id === document.organization) {
+ return
;
+ }
+
+ if (
+ !documentOrganizations ||
+ documentOrganizations.length === 0 ||
+ organizationsError
+ ) {
+ return
;
+ }
+
+ // Show the current document's organization after fetchingit
+ return (
+
+ );
+}
+
+function OrganizationTrigger({ organization }: { organization: Organization }) {
+ return (
+ <>
+
+
{organization.name}
+
+ );
+}
+
+function OrganizationTriggerPlaceholder() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/starter-kits/nextjs-starter-kit/components/OrganizationPopover/index.ts b/starter-kits/nextjs-starter-kit/components/OrganizationPopover/index.ts
new file mode 100644
index 00000000000..5ade424f770
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/components/OrganizationPopover/index.ts
@@ -0,0 +1 @@
+export * from "./OrganizationPopover";
diff --git a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.module.css b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.module.css
index 66292114df5..552328d990b 100644
--- a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.module.css
+++ b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.module.css
@@ -1,5 +1,5 @@
.dialog {
- width: 420px;
+ width: 520px;
max-width: 100%;
}
@@ -8,6 +8,16 @@
margin: var(--space-8) 0;
}
+.dialogDivider {
+ display: flex;
+ color: var(--color-text-lighter);
+ font-size: var(--size-sm);
+ place-items: center;
+ border-top: 1px solid var(--color-border);
+ padding: var(--space-6) var(--space-8) 0;
+ margin-bottom: calc(-1 * var(--space-5));
+}
+
.dialogTabs {
border-bottom: 1px solid var(--color-border);
}
diff --git a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.tsx b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.tsx
index 770e1363f64..fdc0f9fc50c 100644
--- a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.tsx
+++ b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialog.tsx
@@ -1,23 +1,18 @@
import {
useBroadcastEvent,
+ useErrorListener,
useEventListener,
} from "@liveblocks/react/suspense";
-import * as Tabs from "@radix-ui/react-tabs";
import { useSession } from "next-auth/react";
import { ComponentProps, useCallback, useEffect, useState } from "react";
-import { UserIcon, UsersIcon } from "@/icons";
-import {
- getDocument,
- getDocumentGroups,
- getDocumentUsers,
-} from "@/lib/actions";
+import { CheckIcon, LinkIcon } from "@/icons";
+import { getDocument, getDocumentUsers } from "@/lib/actions";
import { useDocumentsFunctionSWR, useInitialDocument } from "@/lib/hooks";
import { getDocumentAccess } from "@/lib/utils";
+import { Button } from "@/primitives/Button";
import { Dialog } from "@/primitives/Dialog";
-import { DocumentAccess } from "@/types";
-import { ShareDialogDefault } from "./ShareDialogDefault";
-import { ShareDialogGroups } from "./ShareDialogGroups";
-import { ShareDialogInviteGroup } from "./ShareDialogInviteGroup";
+import { DocumentPermissionType } from "@/types";
+import { ShareDialogGeneral } from "./ShareDialogGeneral";
import { ShareDialogInviteUser } from "./ShareDialogInviteUser";
import { ShareDialogUsers } from "./ShareDialogUsers";
import styles from "./ShareDialog.module.css";
@@ -25,12 +20,15 @@ import styles from "./ShareDialog.module.css";
type Props = Omit
, "content" | "title">;
export function ShareDialog({ children, ...props }: Props) {
- const { id: documentId, accesses: documentAccesses } = useInitialDocument();
-
const { data: session } = useSession();
- const [currentUserAccess, setCurrentUserAccess] = useState(
- DocumentAccess.NONE
- );
+ const initialDocument = useInitialDocument();
+ const { id: documentId, userPermissions, owner } = initialDocument;
+ const fullAccess = owner === session?.user?.info.id;
+
+ const [currentUserAccess, setCurrentUserAccess] =
+ useState(
+ userPermissions[session?.user?.info.id ?? ""] || null
+ );
// Get a list of users attached to the document (+ their info)
const {
@@ -41,34 +39,30 @@ export function ShareDialog({ children, ...props }: Props) {
refreshInterval: 0,
});
- // Get a list of groups attached to the document (+ their info)
- const {
- data: groups,
- mutate: revalidateGroups,
- // error: groupsError,
- } = useDocumentsFunctionSWR([getDocumentGroups, { documentId }], {
- refreshInterval: 0,
- });
-
// Get the current document
const {
data: document,
- error: defaultAccessError,
+ error: generalAccessError,
mutate: revalidateDefaultAccess,
} = useDocumentsFunctionSWR([getDocument, { documentId }], {
refreshInterval: 0,
});
- // Get default access value from document, or the default value from the property
- const defaultAccess = document
- ? document.accesses.default
- : documentAccesses.default;
-
- // If you have no access to this room, refresh
- if (defaultAccessError && defaultAccessError.code === 403) {
+ // If document says you have no access to this room, refresh and show error page
+ if (generalAccessError && generalAccessError.code === 403) {
window.location.reload();
}
+ // If WebSocket says you have no access to this room, refresh and show error page
+ useErrorListener((error) => {
+ if (
+ error.context.type === "ROOM_CONNECTION_ERROR" &&
+ error.context.code === 4001
+ ) {
+ window.location.reload();
+ }
+ });
+
// Refresh the current user's access level
const revalidateCurrentUserAccess = useCallback(() => {
if (!document) {
@@ -76,23 +70,16 @@ export function ShareDialog({ children, ...props }: Props) {
}
const accessLevel = getDocumentAccess({
- documentAccesses: document.accesses,
+ document,
userId: session?.user?.info.id ?? "",
- groupIds: session?.user?.info.groupIds ?? [],
});
- // Reload if current user has no access (will show error page)
- if (accessLevel === DocumentAccess.NONE) {
- window.location.reload();
- return;
- }
-
// Reload app if current user swapping between READONLY and EDIT/FULL (will reconnect to app with new access level)
const accessChanges = new Set([currentUserAccess, accessLevel]);
if (
- accessChanges.has(DocumentAccess.READONLY) &&
- (accessChanges.has(DocumentAccess.EDIT) ||
- accessChanges.has(DocumentAccess.FULL))
+ !accessChanges.has(null) &&
+ accessChanges.has("read") &&
+ accessChanges.has("write")
) {
window.location.reload();
return;
@@ -108,7 +95,6 @@ export function ShareDialog({ children, ...props }: Props) {
// Revalidate all access data
function revalidateAll() {
revalidateUsers();
- revalidateGroups();
revalidateDefaultAccess();
revalidateCurrentUserAccess();
}
@@ -127,76 +113,37 @@ export function ShareDialog({ children, ...props }: Props) {
-
-
-
-
- Users
-
-
-
-
- Groups
-
-
-
-
- {
- revalidateAll();
- broadcast({ type: "SHARE_DIALOG_UPDATE" });
- }}
- />
- {users?.length ? (
- {
- revalidateAll();
- broadcast({ type: "SHARE_DIALOG_UPDATE" });
- }}
- users={users}
- />
- ) : null}
-
-
- {
- revalidateAll();
- broadcast({ type: "SHARE_DIALOG_UPDATE" });
- }}
- />
- {groups?.length ? (
- {
- revalidateAll();
- broadcast({ type: "SHARE_DIALOG_UPDATE" });
- }}
- />
- ) : null}
-
-
- {
+ fullAccess={fullAccess}
+ onSetUsers={() => {
+ revalidateAll();
+ broadcast({ type: "SHARE_DIALOG_UPDATE" });
+ }}
+ />
+
+ {users?.length ? (
+ {
+ revalidateAll();
+ broadcast({ type: "SHARE_DIALOG_UPDATE" });
+ }}
+ users={users}
+ />
+ ) : null}
+
+ General access
+
+ {
revalidateAll();
broadcast({ type: "SHARE_DIALOG_UPDATE" });
}}
@@ -204,9 +151,49 @@ export function ShareDialog({ children, ...props }: Props) {
(null);
- const [copiedToClipboard, setCopiedToClipboard] = useState(false);
- const [publicRead, setPublicRead] = useState(false);
- const [isPublicReadLoading, setPublicReadLoading] = useState(false);
- const [publicEdit, setPublicEdit] = useState(false);
- const [isPublicEditLoading, setPublicEditLoading] = useState(false);
-
- // Toggle between public accesses: READONLY/NONE
- async function handlePublicRead(newPublicRead: boolean) {
- setPublicReadLoading(true);
-
- const accessValue = newPublicRead
- ? DocumentAccess.READONLY
- : DocumentAccess.NONE;
-
- const { data, error } = await updateDefaultAccess({
- documentId: documentId,
- access: accessValue,
- });
-
- if (error || !data) {
- return;
- }
-
- setPublicRead(newPublicRead);
- setPublicReadLoading(false);
- onSetDefaultAccess();
- }
-
- // Toggle between public accesses: EDIT/READONLY
- async function handlePublicEdit(newPublicEdit: boolean) {
- setPublicEditLoading(true);
-
- const accessValue = newPublicEdit
- ? DocumentAccess.EDIT
- : DocumentAccess.READONLY;
-
- const { data, error } = await updateDefaultAccess({
- documentId: documentId,
- access: accessValue,
- });
-
- if (error || !data) {
- return;
- }
-
- setPublicEdit(newPublicEdit);
- setPublicEditLoading(false);
- onSetDefaultAccess();
- }
-
- // When default access change by another, update UI
- useEffect(() => {
- setPublicRead(defaultAccess !== DocumentAccess.NONE);
- setPublicEdit(defaultAccess === DocumentAccess.EDIT);
- }, [defaultAccess]);
-
- const handleCopyToClipboard = useCallback(async () => {
- if (!shareInputRef.current) return;
-
- try {
- await navigator.clipboard.writeText(shareInputRef.current.value);
- shareInputRef.current.select();
-
- setCopiedToClipboard(true);
- window.clearTimeout(copyToClipboardTimeout);
- copyToClipboardTimeout = window.setTimeout(() => {
- setCopiedToClipboard(false);
- }, 3000);
- } catch {
- return;
- }
- }, []);
-
- return (
-
-
-
- Enable public share link
-
-
- {isPublicReadLoading ? (
-
-
- {defaultAccess !== DocumentAccess.NONE ? (
- <>
-
-
- Allow anyone to edit
-
-
- {isPublicEditLoading ? (
-
-
-
-
-
- ) : null}
-
(document.generalPermissions.group);
+ const [permissionType, setPermissionType] = useState(
+ document.generalPermissions.type
+ );
+
+ // When default access changed by another connected user, update UI
+ useEffect(() => {
+ setPermissionsGroup(document.generalPermissions.group);
+ setPermissionType(document.generalPermissions.type);
+ }, [document]);
+
+ const [isLoading, setIsLoading] = useState<"group" | "type" | null>(null);
+
+ // Handle permission change
+ async function handlePermissionChange({
+ group,
+ type,
+ loading,
+ }: {
+ group: DocumentPermissionGroup;
+ type: DocumentPermissionType;
+ loading: "group" | "type";
+ }) {
+ setPermissionsGroup(group);
+ setPermissionType(type);
+ setIsLoading(loading);
+
+ const { data, error } = await updateGeneralAccess({
+ documentId: document.id,
+ permissionGroup: group,
+ permissionType: type,
+ });
+
+ setIsLoading(null);
+
+ if (error || !data) {
+ // Revert on error
+ setPermissionsGroup(document.generalPermissions.group);
+ setPermissionType(document.generalPermissions.type);
+ return;
+ }
+
+ onSetGeneralAccess();
+ }
+
+ // Get the organization this document belongs to
+ const { data: organizations, isLoading: isLoadingOrganizations } =
+ useDocumentsFunctionSWR(
+ [getOrganizations, { organizationIds: [document.organization] }],
+ {
+ refreshInterval: 0,
+ }
+ );
+
+ const documentOrganization = organizations?.[0] ?? null;
+ const organizationIcon =
+ !isLoadingOrganizations && documentOrganization ? (
+
+
+
+
+ {permissionsGroup === "private" ?
+
+
+
+
+
+
+ {permissionsGroup !== "private" ? (
+ {
+ // Updates the current group's permission type
+ handlePermissionChange({
+ group: permissionsGroup,
+ type: value,
+ loading: "type",
+ });
+ }}
+ value={permissionType}
+ />
+ ) : null}
+
+
+
- {groups
- ? groups.map(({ name, id, access }) => (
-
-
- {name}
- {fullAccess ? (
- handleRemoveDocumentGroup(id)}
- >
- Remove
-
- ) : null}
-
-
- {
- handleUpdateDocumentGroup(id, value as DocumentAccess);
- }}
- value={access}
- />
-
-
- ))
- : null}
-
();
-
- // Add a group to the room
- async function handleAddDocumentGroup(id: DocumentGroup["id"]) {
- setErrorMessage(undefined);
- setInviteLoading(true);
-
- const { error } = await updateGroupAccess({
- groupId: id,
- documentId: documentId,
- access: DocumentAccess.READONLY,
- });
-
- setInviteLoading(false);
-
- if (error) {
- setErrorMessage(error?.suggestion);
- return;
- }
-
- onSetGroups();
- }
-
- const invitableGroupIds = (session?.user.info.groupIds ?? []).filter(
- (groupId) => currentGroups.every((group) => group.id !== groupId)
- );
-
- return (
-
- {fullAccess ? (
- <>
- {!session || invitableGroupIds.length ? (
-
- ) : (
-
- All of your groups have already been added.
-
- )}
- {errorMessage && (
-
- {errorMessage}
-
- )}
-
- ) : (
-
- You need full access to invite groups.
-
- )}
-
- You need full access to invite others.
+ You don’t have access to change permissions.
)}
diff --git a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogRows.module.css b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogRows.module.css
index c09d236d19c..91b036a3ea6 100644
--- a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogRows.module.css
+++ b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogRows.module.css
@@ -13,10 +13,11 @@
display: flex;
flex-direction: column;
align-items: flex-start;
+ gap: var(--space-1);
}
.rowAvatar {
- margin-right: var(--space-4);
+ margin-right: var(--space-7);
}
.rowName {
@@ -41,7 +42,7 @@
}
.rowDescription {
- color: var(--color-text-lighter);
+ color: var(--color-text-lightest);
}
.rowAccessSelect {
diff --git a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogUsers.tsx b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogUsers.tsx
index ea3f823305e..bf16de22d5d 100644
--- a/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogUsers.tsx
+++ b/starter-kits/nextjs-starter-kit/components/ShareDialog/ShareDialogUsers.tsx
@@ -1,9 +1,9 @@
import clsx from "clsx";
-import { ComponentProps } from "react";
+import { ComponentProps, useState } from "react";
import { removeUserAccess, updateUserAccess } from "@/lib/actions";
import { Avatar } from "@/primitives/Avatar";
import { Select } from "@/primitives/Select";
-import { Document, DocumentAccess, DocumentUser } from "@/types";
+import { Document, DocumentPermissionType, DocumentUser } from "@/types";
import styles from "./ShareDialogRows.module.css";
interface Props extends ComponentProps<"div"> {
@@ -23,6 +23,8 @@ export function ShareDialogUsers({
className,
...props
}: Props) {
+ const [isLoading, setIsLoading] = useState(null);
+
// Remove a collaborator from the room
async function handleRemoveDocumentUser(id: DocumentUser["id"]) {
const { data, error } = await removeUserAccess({
@@ -40,14 +42,18 @@ export function ShareDialogUsers({
// Update a collaborator in the room using email as user id
async function handleUpdateDocumentUser(
id: DocumentUser["id"],
- access: DocumentAccess
+ access: DocumentPermissionType
) {
+ setIsLoading(id);
+
const { data, error } = await updateUserAccess({
userId: id,
documentId: documentId,
access: access,
});
+ setIsLoading(null);
+
if (error || !data) {
return;
}
@@ -70,7 +76,7 @@ export function ShareDialogUsers({
/>
{name}
- {!isCurrentUser && fullAccess ? (
+ {fullAccess ? (
<>
{id !== documentOwner ? (
) : (
- Owner
+
+ {isCurrentUser ? "You are owner" : "Owner"}
+
+ )}
+
+ ) : (
+ <>
+ {isCurrentUser ? (
+ This is you
+ ) : (
+
+ {id === documentOwner ? "Owner" : "Member"}
+
)}
- ) : null}
- {isCurrentUser ? (
- This is you
- ) : null}
+ )}
- {!isCurrentUser && id !== documentOwner ? (
+ {id !== documentOwner ? (
{
- handleUpdateDocumentUser(id, value as DocumentAccess);
+ onChange={(value: DocumentPermissionType) => {
+ handleUpdateDocumentUser(id, value);
}}
value={access}
/>
diff --git a/starter-kits/nextjs-starter-kit/components/ShareDialog/index.ts b/starter-kits/nextjs-starter-kit/components/ShareDialog/index.ts
index a5231a5e9c0..bc53f0a04b2 100644
--- a/starter-kits/nextjs-starter-kit/components/ShareDialog/index.ts
+++ b/starter-kits/nextjs-starter-kit/components/ShareDialog/index.ts
@@ -1,6 +1,4 @@
export * from "./ShareDialog";
-export * from "./ShareDialogDefault";
-export * from "./ShareDialogGroups";
-export * from "./ShareDialogInviteGroup";
+export * from "./ShareDialogGeneral";
export * from "./ShareDialogInviteUser";
export * from "./ShareDialogUsers";
diff --git a/starter-kits/nextjs-starter-kit/constants.ts b/starter-kits/nextjs-starter-kit/constants.ts
index d543d6b292e..d985a678829 100644
--- a/starter-kits/nextjs-starter-kit/constants.ts
+++ b/starter-kits/nextjs-starter-kit/constants.ts
@@ -3,9 +3,16 @@ import { DocumentType } from "./types";
export const MARKETING_URL = "/";
export const DASHBOARD_URL = "/dashboard";
-export const DASHBOARD_DRAFTS_URL = `${DASHBOARD_URL}/drafts`;
-export const DASHBOARD_GROUP_URL = (id: string) =>
- `${DASHBOARD_URL}/group/${id}`;
export const DOCUMENT_URL = (type: DocumentType, id: string) =>
`/${type}/${id}`;
+
+export const DASHBOARD_PRIVATE_URL = "/dashboard/private";
+
+export const DASHBOARD_ORGANIZATION_URL = "/dashboard/organization";
+
+export const DASHBOARD_PUBLIC_URL = "/dashboard/public";
+
+export const ANONYMOUS_USER_ID = "anonymous";
+
+export const DEFAULT_ORGANIZATION_ID = "default";
diff --git a/starter-kits/nextjs-starter-kit/data/groups.ts b/starter-kits/nextjs-starter-kit/data/groups.ts
deleted file mode 100644
index 3834cea5198..00000000000
--- a/starter-kits/nextjs-starter-kit/data/groups.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Group } from "@/types";
-
-/**
- * This array simulates a database consisting of a list of groups.
- * Assign users to groups in /data/users.ts
- */
-export const groups: Group[] = [
- {
- id: "product",
- name: "Product",
- },
- {
- id: "engineering",
- name: "Engineering",
- },
- {
- id: "design",
- name: "Design",
- },
-];
diff --git a/starter-kits/nextjs-starter-kit/data/organizations.ts b/starter-kits/nextjs-starter-kit/data/organizations.ts
new file mode 100644
index 00000000000..5642bd76539
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/data/organizations.ts
@@ -0,0 +1,38 @@
+import { Organization } from "@/types";
+
+/**
+ * This array simulates a database consisting of a list of organizations/tenants.
+ * Assign users to organizations in /data/users.ts
+ */
+export const organizations: Organization[] = [
+ {
+ id: "liveblocks",
+ name: "Liveblocks",
+ avatar: "/liveblocks.png",
+ },
+ {
+ id: "charlie.layne@example.com",
+ name: "Charlie's space",
+ avatar: "https://liveblocks.io/avatars/avatar-2.png",
+ },
+ {
+ id: "mislav.abha@example.com",
+ name: "Mislav's space",
+ avatar: "https://liveblocks.io/avatars/avatar-3.png",
+ },
+ {
+ id: "tatum.paolo@example.com",
+ name: "Tatum's space",
+ avatar: "https://liveblocks.io/avatars/avatar-4.png",
+ },
+ {
+ id: "anjali.wanda@example.com",
+ name: "Anjali's space",
+ avatar: "https://liveblocks.io/avatars/avatar-5.png",
+ },
+ {
+ id: "emil.joyce@example.com",
+ name: "Emil's space",
+ avatar: "https://liveblocks.io/avatars/avatar-6.png",
+ },
+];
diff --git a/starter-kits/nextjs-starter-kit/data/users.ts b/starter-kits/nextjs-starter-kit/data/users.ts
index f4b0b72cd85..b3ef97ec249 100644
--- a/starter-kits/nextjs-starter-kit/data/users.ts
+++ b/starter-kits/nextjs-starter-kit/data/users.ts
@@ -5,8 +5,9 @@ import { User } from "@/types";
* After signing up with your auth solution (e.g. GitHub, Auth0)
* place your user info in an object, with the email address you used
* as the id.
- * The groupIds are the names of the groups the user is part of.
- * Group info is in /data/groups.ts
+ * The organizationIds are the organizations/tenants the user belongs to.
+ * Organization info is in /data/organizations.ts
+ * TODO REMOVE GROUPS
*/
export const users: Omit[] = [
/*
@@ -14,37 +15,37 @@ export const users: Omit[] = [
id: "[YOUR EMAIL ADDRESS]",
name: "[YOUR DISPLAY NAME]",
avatar: "https://liveblocks.io/avatars/avatar-0.png",
- groupIds: ["product", "engineering", "design"],
+ organizationIds: ["liveblocks", "[YOUR EMAIL ADDRESS]"],
},
*/
{
id: "charlie.layne@example.com",
name: "Charlie Layne",
avatar: "https://liveblocks.io/avatars/avatar-2.png",
- groupIds: ["product", "engineering", "design"],
+ organizationIds: ["liveblocks", "charlie.layne@example.com"],
},
{
id: "mislav.abha@example.com",
name: "Mislav Abha",
avatar: "https://liveblocks.io/avatars/avatar-3.png",
- groupIds: ["engineering"],
+ organizationIds: ["liveblocks", "mislav.abha@example.com"],
},
{
id: "tatum.paolo@example.com",
name: "Tatum Paolo",
avatar: "https://liveblocks.io/avatars/avatar-4.png",
- groupIds: ["engineering", "design"],
+ organizationIds: ["liveblocks", "tatum.paolo@example.com"],
},
{
id: "anjali.wanda@example.com",
name: "Anjali Wanda",
avatar: "https://liveblocks.io/avatars/avatar-5.png",
- groupIds: ["product"],
+ organizationIds: ["liveblocks", "anjali.wanda@example.com"],
},
{
id: "emil.joyce@example.com",
name: "Emil Joyce",
avatar: "https://liveblocks.io/avatars/avatar-6.png",
- groupIds: ["product", "design"],
+ organizationIds: ["liveblocks", "emil.joyce@example.com"],
},
];
diff --git a/starter-kits/nextjs-starter-kit/icons/EarthIcon.tsx b/starter-kits/nextjs-starter-kit/icons/EarthIcon.tsx
new file mode 100644
index 00000000000..bd24bc9f481
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/icons/EarthIcon.tsx
@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+
+export function EarthIcon(props: ComponentProps<"svg">) {
+ return (
+
+
+ );
+}
diff --git a/starter-kits/nextjs-starter-kit/icons/LockIcon.tsx b/starter-kits/nextjs-starter-kit/icons/LockIcon.tsx
new file mode 100644
index 00000000000..73c8025f10b
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/icons/LockIcon.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { ComponentProps } from "react";
+
+export function LockIcon(props: ComponentProps<"svg">) {
+ return (
+
+
+ );
+}
diff --git a/starter-kits/nextjs-starter-kit/icons/index.ts b/starter-kits/nextjs-starter-kit/icons/index.ts
index 63aa8da3ba9..1a141f23d68 100644
--- a/starter-kits/nextjs-starter-kit/icons/index.ts
+++ b/starter-kits/nextjs-starter-kit/icons/index.ts
@@ -11,6 +11,7 @@ export * from "./Comment";
export * from "./Copy";
export * from "./Cross";
export * from "./Delete";
+export * from "./EarthIcon";
export * from "./Edit";
export * from "./File";
export * from "./Folder";
@@ -22,6 +23,7 @@ export * from "./Italic";
export * from "./Link";
export * from "./ListOrdered";
export * from "./ListUnordered";
+export * from "./LockIcon";
export * from "./Menu";
export * from "./More";
export * from "./Plus";
diff --git a/starter-kits/nextjs-starter-kit/layouts/Dashboard/Dashboard.tsx b/starter-kits/nextjs-starter-kit/layouts/Dashboard/Dashboard.tsx
index ee79139066d..90243e29ea0 100644
--- a/starter-kits/nextjs-starter-kit/layouts/Dashboard/Dashboard.tsx
+++ b/starter-kits/nextjs-starter-kit/layouts/Dashboard/Dashboard.tsx
@@ -1,34 +1,19 @@
-"use client";
-
import clsx from "clsx";
-import { ComponentProps, useCallback, useState } from "react";
-import { DashboardHeader, DashboardSidebar } from "@/components/Dashboard";
-import { Group } from "@/types";
+import { ComponentProps } from "react";
+import { DashboardSidebar } from "@/components/Dashboard";
+import { Header } from "@/components/Header";
import styles from "./Dashboard.module.css";
-interface Props extends ComponentProps<"div"> {
- groups: Group[];
-}
-
-export function DashboardLayout({
- children,
- groups,
- className,
- ...props
-}: Props) {
- const [isMenuOpen, setMenuOpen] = useState(false);
-
- const handleMenuClick = useCallback(() => {
- setMenuOpen((isOpen) => !isOpen);
- }, []);
+interface Props extends ComponentProps<"div"> {}
+export function DashboardLayout({ children, className, ...props }: Props) {
return (
diff --git a/starter-kits/nextjs-starter-kit/layouts/Documents/Documents.tsx b/starter-kits/nextjs-starter-kit/layouts/Documents/Documents.tsx
deleted file mode 100644
index a903056e4b8..00000000000
--- a/starter-kits/nextjs-starter-kit/layouts/Documents/Documents.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ErrorLayout } from "@/layouts/Error";
-import { getGroup } from "@/lib/database";
-import { Group } from "@/types";
-import { DocumentsList } from "./DocumentsList";
-
-type Props = {
- filter?: "all" | "drafts" | "group";
- groupId?: Group["id"];
-};
-
-export async function DocumentsLayout({ filter, groupId }: Props) {
- if (groupId) {
- const group = await getGroup(groupId);
- if (!group) {
- return (
- {
+ const cookieStore = await cookies();
+ return cookieStore.get(ORGANIZATION_COOKIE_NAME)?.value || null;
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/getDocument.ts b/starter-kits/nextjs-starter-kit/lib/actions/getDocument.ts
index 3c73f4e4f50..0eb06755459 100644
--- a/starter-kits/nextjs-starter-kit/lib/actions/getDocument.ts
+++ b/starter-kits/nextjs-starter-kit/lib/actions/getDocument.ts
@@ -1,6 +1,7 @@
"use server";
import { auth } from "@/auth";
+import { DEFAULT_ORGANIZATION_ID } from "@/constants";
import { buildDocument, userAllowedInRoom } from "@/lib/utils";
import { liveblocks } from "@/liveblocks.server.config";
import { Document } from "@/types";
@@ -49,8 +50,9 @@ export async function getDocument({ documentId }: Props) {
!userAllowedInRoom({
accessAllowed: "read",
userId: session?.user.info.id ?? "",
- groupIds: session?.user.info.groupIds ?? [],
room,
+ organizationId:
+ session?.user.currentOrganizationId ?? DEFAULT_ORGANIZATION_ID,
})
) {
return {
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/getDocumentGroups.ts b/starter-kits/nextjs-starter-kit/lib/actions/getDocumentGroups.ts
deleted file mode 100644
index 33e352a7faf..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/actions/getDocumentGroups.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-"use server";
-
-import { buildDocumentGroups } from "@/lib/utils";
-import { liveblocks } from "@/liveblocks.server.config";
-import { Document, DocumentGroup } from "@/types";
-
-type Props = {
- documentId: Document["id"];
-};
-
-/**
- * Get Document Groups
- *
- * Get the groupIds attached to a given document
- * Uses custom API endpoint
- *
- * @param documentId - The document id
- */
-export async function getDocumentGroups({ documentId }: Props) {
- let room;
- try {
- // Get session and room
- room = await liveblocks.getRoom(documentId);
- } catch (err) {
- console.error(err);
- return {
- error: {
- code: 500,
- message: "Error fetching document",
- suggestion: "Refresh the page and try again",
- },
- };
- }
-
- if (!room) {
- return {
- error: {
- code: 404,
- message: "Document not found",
- suggestion: "Check that you're on the correct page",
- },
- };
- }
-
- // If successful, convert room to a list of groups and send
- const result: DocumentGroup[] = await buildDocumentGroups(room);
- return { data: result };
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/getDocuments.ts b/starter-kits/nextjs-starter-kit/lib/actions/getDocuments.ts
index 9efb246eb8d..d472cb5800e 100644
--- a/starter-kits/nextjs-starter-kit/lib/actions/getDocuments.ts
+++ b/starter-kits/nextjs-starter-kit/lib/actions/getDocuments.ts
@@ -1,19 +1,14 @@
"use server";
+import { GetRoomsOptions } from "@liveblocks/node";
import { auth } from "@/auth";
-import {
- buildDocuments,
- getDraftsGroupName,
- userAllowedInRoom,
-} from "@/lib/utils";
+import { buildDocuments, userAllowedInRoom } from "@/lib/utils";
import { liveblocks } from "@/liveblocks.server.config";
-import { Document, DocumentGroup, DocumentType, DocumentUser } from "@/types";
+import { Document, DocumentPermissionGroup, DocumentType } from "@/types";
export type GetDocumentsProps = {
- groupIds?: DocumentGroup["id"][];
- userId?: DocumentUser["id"];
+ permissionGroup?: DocumentPermissionGroup;
documentType?: DocumentType;
- drafts?: boolean;
limit?: number;
};
@@ -25,61 +20,59 @@ export type GetDocumentsResponse = {
/**
* Get Documents
*
- * Get a list of documents by groupId, userId, and metadata
+ * Get a list of documents by userId and metadata
* Uses custom API endpoint
*
- * @param groupIds - The groups to filter for
- * @param userId - The user to filter for
+ * @param permissionGroup - The permission group to filter for
* @param documentType - The document type to filter for
- * @param drafts - Get only drafts
* @param limit - The amount of documents to retrieve
*/
export async function getDocuments({
- groupIds = [],
- userId = undefined,
+ permissionGroup,
documentType,
- drafts = false,
limit = 20,
}: GetDocumentsProps) {
- // Build getRooms arguments
- let query: string | undefined = undefined;
+ const session = await auth();
- if (documentType) {
- query = `metadata["type"]:${JSON.stringify(documentType)}`;
+ // Check user is logged in
+ if (!session) {
+ return {
+ error: {
+ code: 401,
+ message: "Not signed in",
+ suggestion: "Sign in to get documents",
+ },
+ };
}
- let getRoomsOptions: Parameters[0] = {
- limit,
- query,
- };
+ const userId = session.user.info.id;
+ const organizationId = session.user.currentOrganizationId;
- const draftGroupName = getDraftsGroupName(userId || "");
+ // Build getRooms arguments
+ // Only include query if there are actual filters to apply
+ const query: GetRoomsOptions["query"] | undefined =
+ permissionGroup || documentType
+ ? {
+ metadata: {
+ ...(permissionGroup && { permissionGroup }),
+ ...(documentType && { type: documentType }),
+ },
+ }
+ : undefined;
- if (drafts) {
- // Drafts are stored as a group that uses the userId
- getRoomsOptions = {
- ...getRoomsOptions,
- groupIds: [draftGroupName],
- };
- } else {
- // Not a draft, use other info
- getRoomsOptions = {
- ...getRoomsOptions,
- groupIds: groupIds.filter((id) => id !== draftGroupName),
- userId: userId,
- };
- }
+ // Check all types of rooms a user is allowed to access, with query options too
+ const getRoomsOptions: Parameters[0] = {
+ organizationId,
+ userId,
+ groupIds: [organizationId],
+ limit,
+ ...(query && { query }),
+ };
- let session;
let getRoomsResponse;
try {
- // Get session and rooms
- const result = await Promise.all([
- auth(),
- liveblocks.getRooms(getRoomsOptions),
- ]);
- session = result[0];
- getRoomsResponse = result[1];
+ // Get rooms
+ getRoomsResponse = await liveblocks.getRooms(getRoomsOptions);
} catch (err) {
console.log(err);
return {
@@ -91,17 +84,6 @@ export async function getDocuments({
};
}
- // Check user is logged in
- if (!session) {
- return {
- error: {
- code: 401,
- message: "Not signed in",
- suggestion: "Sign in to get documents",
- },
- };
- }
-
const { data: rooms, nextCursor } = getRoomsResponse;
if (!rooms) {
@@ -121,8 +103,8 @@ export async function getDocuments({
userAllowedInRoom({
accessAllowed: "read",
userId: session.user.info.id,
- groupIds: session.user.info.groupIds,
room,
+ organizationId,
})
) {
finalRooms.push(room);
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/getGroups.ts b/starter-kits/nextjs-starter-kit/lib/actions/getGroups.ts
deleted file mode 100644
index 0cbfe463085..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/actions/getGroups.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-"use server";
-
-import { getGroup } from "@/lib/database";
-import { DocumentGroup, Group } from "@/types";
-
-/**
- * Get Groups
- *
- * Fetch groups from your database API
- * Uses custom API endpoint
- *
- * @param groupIds - The groups' ids
- */
-export async function getGroups(groupIds: DocumentGroup["id"][]) {
- // Get all groups
- const groups = await Promise.all(
- groupIds.map((groupId) => getGroup(groupId))
- );
-
- // Filter out draft groups or any that didn't return
- return groups.filter((group) => group) as Group[];
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/getNextDocuments.ts b/starter-kits/nextjs-starter-kit/lib/actions/getNextDocuments.ts
index 74a61143d04..fb9c66e5589 100644
--- a/starter-kits/nextjs-starter-kit/lib/actions/getNextDocuments.ts
+++ b/starter-kits/nextjs-starter-kit/lib/actions/getNextDocuments.ts
@@ -19,16 +19,28 @@ type Props = {
* @param nextCursor - nextCursor, retrieved from getDocumentByGroup
*/
export async function getNextDocuments({ nextCursor }: Props) {
- let session;
+ const session = await auth();
+
+ // Check user is logged in
+ if (!session) {
+ return {
+ error: {
+ code: 401,
+ message: "Not signed in",
+ suggestion: "Sign in to get documents",
+ },
+ };
+ }
+
+ const organizationId = session.user.currentOrganizationId;
+
let getRoomsResponse;
try {
- // Get session and rooms
- const result = await Promise.all([
- auth(),
- liveblocks.getRooms({ startingAfter: nextCursor }),
- ]);
- session = result[0];
- getRoomsResponse = result[1];
+ // Get rooms
+ getRoomsResponse = await liveblocks.getRooms({
+ startingAfter: nextCursor,
+ organizationId,
+ });
} catch (err) {
console.log(err);
return {
@@ -40,17 +52,6 @@ export async function getNextDocuments({ nextCursor }: Props) {
};
}
- // Check user is logged in
- if (!session) {
- return {
- error: {
- code: 401,
- message: "Not signed in",
- suggestion: "Sign in to get documents",
- },
- };
- }
-
const { data: rooms, nextCursor: newNextCursor } = getRoomsResponse;
if (!rooms) {
@@ -70,8 +71,8 @@ export async function getNextDocuments({ nextCursor }: Props) {
userAllowedInRoom({
accessAllowed: "read",
userId: session.user.info.id,
- groupIds: session.user.info.groupIds,
room: room,
+ organizationId,
})
) {
finalRooms.push(room);
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/getOrganizations.ts b/starter-kits/nextjs-starter-kit/lib/actions/getOrganizations.ts
new file mode 100644
index 00000000000..72040d8cdb6
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/actions/getOrganizations.ts
@@ -0,0 +1,30 @@
+"use server";
+
+import { getOrganization } from "@/lib/database";
+import { Organization } from "@/types";
+
+type Props = {
+ organizationIds: Organization["id"][];
+};
+
+/**
+ * Get Organizations
+ *
+ * Fetch organizations from your database API
+ * Uses custom API endpoint
+ *
+ * @param organizationIds - The organizations' ids
+ */
+export async function getOrganizations({ organizationIds }: Props) {
+ // Get all organizations
+ const organizations = await Promise.all(
+ organizationIds.map((organizationId) => getOrganization(organizationId))
+ );
+
+ // Filter out any that didn't return
+ const filtered = organizations.filter(
+ (organization) => organization
+ ) as Organization[];
+
+ return { data: filtered };
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/getUserOrganizations.ts b/starter-kits/nextjs-starter-kit/lib/actions/getUserOrganizations.ts
new file mode 100644
index 00000000000..d2798071e5c
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/actions/getUserOrganizations.ts
@@ -0,0 +1,23 @@
+"use server";
+
+import { auth } from "@/auth";
+import { getUserOrganizations as getOrganizationsFromDb } from "@/lib/database/getUserOrganizations";
+
+/**
+ * Get Organizations
+ *
+ * Fetch organizations for the current authenticated user from your database
+ */
+export async function getUserOrganizations() {
+ const session = await auth();
+
+ if (!session) {
+ return { data: [] };
+ }
+
+ const organizations = await getOrganizationsFromDb({
+ userId: session.user.info.id,
+ });
+
+ return { data: organizations };
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/index.ts b/starter-kits/nextjs-starter-kit/lib/actions/index.ts
index 7ecf6061c63..51ff37c8ebc 100644
--- a/starter-kits/nextjs-starter-kit/lib/actions/index.ts
+++ b/starter-kits/nextjs-starter-kit/lib/actions/index.ts
@@ -1,17 +1,18 @@
export * from "./authorizeLiveblocks";
export * from "./createDocument";
export * from "./deleteDocument";
+export * from "./getCurrentOrganization";
export * from "./getDocument";
-export * from "./getDocumentGroups";
export * from "./getDocuments";
export * from "./getDocumentUsers";
-export * from "./getGroups";
export * from "./getLiveUsers";
+export * from "./getOrganizations";
+export * from "./getUserOrganizations";
export * from "./getNextDocuments";
export * from "./getSpecificDocuments";
-export * from "./removeGroupAccess";
export * from "./removeUserAccess";
export * from "./renameDocument";
-export * from "./updateDefaultAccess";
-export * from "./updateGroupAccess";
+export * from "./switchOrganization";
+export * from "./signIn";
+export * from "./updateGeneralAccess";
export * from "./updateUserAccess";
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/removeGroupAccess.ts b/starter-kits/nextjs-starter-kit/lib/actions/removeGroupAccess.ts
deleted file mode 100644
index 2e097bd90c0..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/actions/removeGroupAccess.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-"use server";
-
-import { auth } from "@/auth";
-import { getGroup } from "@/lib/database/getGroup";
-import { buildDocumentGroups, userAllowedInRoom } from "@/lib/utils";
-import { liveblocks } from "@/liveblocks.server.config";
-import { Document, DocumentGroup } from "@/types";
-
-type Props = {
- groupId: DocumentGroup["id"];
- documentId: Document["id"];
-};
-
-/**
- * Remove Group Access
- *
- * Remove a group from a given document with its groupId
- * Uses custom API endpoint
- *
- * @param groupId - The id of the removed group
- * @param documentId - The document id
- */
-export async function removeGroupAccess({ groupId, documentId }: Props) {
- let session;
- let room;
- let group;
- try {
- // Get session and room
- const result = await Promise.all([
- auth(),
- liveblocks.getRoom(documentId),
- getGroup(groupId),
- ]);
- session = result[0];
- room = result[1];
- group = result[2];
- } catch (err) {
- console.error(err);
- return {
- error: {
- code: 500,
- message: "Error fetching document",
- suggestion: "Refresh the page and try again",
- },
- };
- }
-
- // Check user is logged in
- if (!session) {
- return {
- error: {
- code: 401,
- message: "Not signed in",
- suggestion: "Sign in to remove a user",
- },
- };
- }
-
- // Check current logged-in user is set as a user with id, ignoring groupIds and default access
- if (
- !userAllowedInRoom({
- accessAllowed: "write",
- checkAccessLevel: "user",
- userId: session.user.info.id,
- groupIds: [],
- room,
- })
- ) {
- return {
- error: {
- code: 403,
- message: "Not allowed access",
- suggestion: "Check that you've been given permission to the document",
- },
- };
- }
-
- // Check the room `documentId` exists
- if (!room) {
- return {
- error: {
- code: 404,
- message: "Document not found",
- suggestion: "Check that you're on the correct page",
- },
- };
- }
-
- // Check group exists in system
- if (!group) {
- return {
- error: {
- code: 400,
- message: "Group does not exist",
- suggestion: `Check that that group ${groupId} exists in the system`,
- },
- };
- }
-
- // If room exists, create groupsAccess element for removing the current group
- const groupsAccesses = {
- [groupId]: null,
- };
-
- // Update the room with the new collaborators
- let updatedRoom;
- try {
- updatedRoom = await liveblocks.updateRoom(documentId, {
- groupsAccesses,
- });
- } catch (err) {
- return {
- error: {
- code: 401,
- message: "Can't edit group in room",
- suggestion: "Please refresh the page and try again",
- },
- };
- }
-
- if (!updatedRoom) {
- return {
- error: {
- code: 404,
- message: "Updated room not found",
- suggestion: "Contact an administrator",
- },
- };
- }
-
- // If successful, convert room to a list of groups and send
- const result: DocumentGroup[] = await buildDocumentGroups(updatedRoom);
- return { data: result };
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/removeUserAccess.ts b/starter-kits/nextjs-starter-kit/lib/actions/removeUserAccess.ts
index 6e41a942695..f7f5d16efb9 100644
--- a/starter-kits/nextjs-starter-kit/lib/actions/removeUserAccess.ts
+++ b/starter-kits/nextjs-starter-kit/lib/actions/removeUserAccess.ts
@@ -60,14 +60,14 @@ export async function removeUserAccess({ userId, documentId }: Props) {
};
}
- // Check current logged-in user is set as a user with id, ignoring groupIds and default access
+ // Check current logged-in user is set as a user with id, ignoring default access
if (
!userAllowedInRoom({
accessAllowed: "write",
checkAccessLevel: "user",
userId: session.user.info.id,
- groupIds: [],
room,
+ organizationId: session.user.currentOrganizationId,
})
) {
return {
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/renameDocument.ts b/starter-kits/nextjs-starter-kit/lib/actions/renameDocument.ts
index 068c6061b7c..dfe24c3d3c9 100644
--- a/starter-kits/nextjs-starter-kit/lib/actions/renameDocument.ts
+++ b/starter-kits/nextjs-starter-kit/lib/actions/renameDocument.ts
@@ -1,6 +1,7 @@
"use server";
import { auth } from "@/auth";
+import { DEFAULT_ORGANIZATION_ID } from "@/constants";
import { userAllowedInRoom } from "@/lib/utils";
import { liveblocks } from "@/liveblocks.server.config";
import { Document } from "@/types";
@@ -53,8 +54,9 @@ export async function renameDocument({ documentId, name }: Props) {
!userAllowedInRoom({
accessAllowed: "write",
userId: session?.user.info.id ?? "",
- groupIds: session?.user.info.groupIds ?? [],
room,
+ organizationId:
+ session?.user.currentOrganizationId ?? DEFAULT_ORGANIZATION_ID,
})
) {
return {
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/signIn.ts b/starter-kits/nextjs-starter-kit/lib/actions/signIn.ts
new file mode 100644
index 00000000000..74e44a01e5b
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/actions/signIn.ts
@@ -0,0 +1,7 @@
+"use server";
+
+import { signIn as signInAuth } from "@/auth";
+
+export async function signIn() {
+ await signInAuth();
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/switchOrganization.ts b/starter-kits/nextjs-starter-kit/lib/actions/switchOrganization.ts
new file mode 100644
index 00000000000..5378dcfe489
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/actions/switchOrganization.ts
@@ -0,0 +1,56 @@
+"use server";
+
+import { cookies } from "next/headers";
+import { auth } from "@/auth";
+import { getUserOrganizations } from "../database/getUserOrganizations";
+
+const ORGANIZATION_COOKIE_NAME = "currentOrganizationId";
+
+/**
+ * Switch Organization
+ *
+ * Updates the current organization/tenant for the authenticated user
+ * Stores the organization in a cookie which is then read in auth callbacks
+ *
+ * @param organizationId - The organization/tenant ID to switch to
+ */
+export async function switchOrganization(organizationId: string) {
+ const session = await auth();
+
+ if (!session) {
+ return {
+ error: {
+ code: 401,
+ message: "Not signed in",
+ suggestion: "Sign in to switch organizations",
+ },
+ };
+ }
+
+ // Verify user has access to the organization
+ const userOrganizations = await getUserOrganizations({
+ userId: session.user.info.id,
+ });
+
+ if (!userOrganizations.some((org) => org.id === organizationId)) {
+ return {
+ error: {
+ code: 403,
+ message: "Access denied",
+ suggestion: `You don't have access to this organization: ${organizationId}`,
+ },
+ };
+ }
+
+ // Store organization in cookie
+ const cookieStore = await cookies();
+ cookieStore.set(ORGANIZATION_COOKIE_NAME, organizationId, {
+ httpOnly: true,
+ secure: process.env.NODE_ENV === "production",
+ sameSite: "lax",
+ maxAge: 60 * 60 * 24 * 365, // 1 year
+ path: "/",
+ });
+
+ return { success: true };
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/syncLiveblocksGroups.ts b/starter-kits/nextjs-starter-kit/lib/actions/syncLiveblocksGroups.ts
deleted file mode 100644
index dc92b76d915..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/actions/syncLiveblocksGroups.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-"use server";
-
-import { LiveblocksError } from "@liveblocks/node";
-import { getGroups } from "@/lib/database";
-import { liveblocks } from "@/liveblocks.server.config";
-
-/**
- * Sync Groups with Liveblocks
- *
- * Groups on Liveblocks are currently used for group mentions in comments and text editors.
- */
-export async function syncLiveblocksGroups() {
- const groups = (await getGroups()).filter((group) => group !== null);
-
- for (const group of groups) {
- const localMemberIds = new Set(group.memberIds ?? []);
-
- // Sync group members if the group already exists on Liveblocks
- try {
- const liveblocksMemberIds = new Set(
- (await liveblocks.getGroup({ groupId: group.id })).members.map(
- (member) => member.id
- )
- );
- const memberIdsToAdd: string[] = [];
- const memberIdsToRemove: string[] = [];
-
- for (const memberId of localMemberIds) {
- if (!liveblocksMemberIds.has(memberId)) {
- memberIdsToAdd.push(memberId);
- }
- }
-
- for (const memberId of liveblocksMemberIds) {
- if (!localMemberIds.has(memberId)) {
- memberIdsToRemove.push(memberId);
- }
- }
-
- if (memberIdsToAdd.length > 0) {
- await liveblocks.addGroupMembers({
- groupId: group.id,
- memberIds: memberIdsToAdd,
- });
- }
-
- if (memberIdsToRemove.length > 0) {
- await liveblocks.removeGroupMembers({
- groupId: group.id,
- memberIds: memberIdsToRemove,
- });
- }
- } catch (error) {
- // Let unrelated and unknown errors through
- if (!(error instanceof LiveblocksError && error.status === 404)) {
- throw error;
- }
-
- // Create the group on Liveblocks if it doesn't already exist
- await liveblocks.createGroup({
- groupId: group.id,
- memberIds: Array.from(localMemberIds),
- });
- }
- }
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/updateDefaultAccess.ts b/starter-kits/nextjs-starter-kit/lib/actions/updateDefaultAccess.ts
deleted file mode 100644
index 90c6551a1f3..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/actions/updateDefaultAccess.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-"use server";
-
-import { auth } from "@/auth";
-import {
- buildDocument,
- documentAccessToRoomAccesses,
- userAllowedInRoom,
-} from "@/lib/utils";
-import { liveblocks } from "@/liveblocks.server.config";
-import { Document, DocumentAccess } from "@/types";
-
-type Props = {
- documentId: Document["id"];
- access: DocumentAccess;
-};
-
-/**
- * Update Default Access
- *
- * Given a document, update its default access
- * Uses custom API endpoint
- *
- * @param documentId - The document to update
- * @param access - The new DocumentAccess permission level
- */
-export async function updateDefaultAccess({ documentId, access }: Props) {
- let session;
- let room;
- try {
- // Get session and room
- const result = await Promise.all([auth(), liveblocks.getRoom(documentId)]);
- session = result[0];
- room = result[1];
- } catch (err) {
- console.error(err);
- return {
- error: {
- code: 500,
- message: "Error fetching document",
- suggestion: "Refresh the page and try again",
- },
- };
- }
-
- // Check user is logged in
- if (!session) {
- return {
- error: {
- code: 401,
- message: "Not signed in",
- suggestion: "Sign in to update public access level",
- },
- };
- }
-
- if (!room) {
- return {
- error: {
- code: 404,
- message: "Document not found",
- suggestion: "Check that you're on the correct page",
- },
- };
- }
-
- // Check current logged-in user has write access to the room
- if (
- !userAllowedInRoom({
- accessAllowed: "write",
- userId: session.user.info.id,
- groupIds: session.user.info.groupIds,
- room,
- })
- ) {
- return {
- error: {
- code: 403,
- message: "Not allowed access",
- suggestion: "Check that you've been given permission to the room",
- },
- };
- }
-
- // If room exists, create default access parameter for room
- const defaultAccesses = documentAccessToRoomAccesses(access);
-
- // Update the room with the new collaborators
- let updatedRoom;
- try {
- updatedRoom = await liveblocks.updateRoom(documentId, {
- defaultAccesses,
- });
- } catch (err) {
- return {
- error: {
- code: 401,
- message: "Can't edit default access level in room",
- suggestion: "Please refresh the page and try again",
- },
- };
- }
-
- if (!updatedRoom) {
- return {
- error: {
- code: 404,
- message: "Updated room not found",
- suggestion: "Contact an administrator",
- },
- };
- }
-
- // If successful, covert to custom document format and return
- const document: Document = buildDocument(updatedRoom);
- return { data: document };
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/updateGeneralAccess.ts b/starter-kits/nextjs-starter-kit/lib/actions/updateGeneralAccess.ts
new file mode 100644
index 00000000000..30b58a454be
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/actions/updateGeneralAccess.ts
@@ -0,0 +1,163 @@
+"use server";
+
+import { RoomPermission } from "@liveblocks/node";
+import { auth } from "@/auth";
+import {
+ buildDocument,
+ permissionTypeToRoomAccesses,
+ userAllowedInRoom,
+} from "@/lib/utils";
+import { liveblocks } from "@/liveblocks.server.config";
+import {
+ Document,
+ DocumentPermissionGroup,
+ DocumentPermissionType,
+ DocumentRoomMetadata,
+} from "@/types";
+
+type Props = {
+ documentId: Document["id"];
+ permissionGroup: DocumentPermissionGroup;
+ permissionType: DocumentPermissionType;
+};
+
+/**
+ * Update General Access
+ *
+ * Given a document, update its general access and permission group
+ * Uses custom API endpoint
+ *
+ * @param documentId - The document to update
+ * @param permissionGroup - The new permission group (private, organization, public)
+ * @param permissionType - The new permission type (read, write)
+ */
+export async function updateGeneralAccess({
+ documentId,
+ permissionGroup,
+ permissionType,
+}: Props) {
+ let session;
+ let room;
+ try {
+ // Get session and room
+ const result = await Promise.all([auth(), liveblocks.getRoom(documentId)]);
+ session = result[0];
+ room = result[1];
+ } catch (err) {
+ console.error(err);
+ return {
+ error: {
+ code: 500,
+ message: "Error fetching document",
+ suggestion: "Refresh the page and try again",
+ },
+ };
+ }
+
+ // Check user is logged in
+ if (!session) {
+ return {
+ error: {
+ code: 401,
+ message: "Not signed in",
+ suggestion: "Sign in to update public access level",
+ },
+ };
+ }
+
+ if (!room) {
+ return {
+ error: {
+ code: 404,
+ message: "Document not found",
+ suggestion: "Check that you're on the correct page",
+ },
+ };
+ }
+
+ // Check current logged-in user has write access to the room
+ if (
+ !userAllowedInRoom({
+ accessAllowed: "write",
+ userId: session.user.info.id,
+ room,
+ organizationId: session.user.currentOrganizationId,
+ })
+ ) {
+ return {
+ error: {
+ code: 403,
+ message: "Not allowed access",
+ suggestion: "Check that you've been given permission to the room",
+ },
+ };
+ }
+
+ const metadata = room.metadata as DocumentRoomMetadata;
+ const organizationId = session.user.currentOrganizationId;
+
+ // Update metadata with new permission group and type
+ const updatedMetadata = {
+ ...metadata,
+ permissionGroup,
+ permissionType,
+ };
+
+ // Set up room access based on permission group
+ let defaultAccesses: RoomPermission = [];
+ const groupsAccesses: Record = {};
+
+ if (permissionGroup === "public") {
+ // Public access is defined in defaultAccesses
+ // Visible for everyone in workspace too, so set groupAccesses
+ defaultAccesses = permissionTypeToRoomAccesses(permissionType);
+ groupsAccesses[organizationId] =
+ permissionTypeToRoomAccesses(permissionType);
+ } else if (permissionGroup === "organization") {
+ // Has no public/default access
+ // Permission defined in groupsAccesses so workspace can see it
+ groupsAccesses[organizationId] =
+ permissionTypeToRoomAccesses(permissionType);
+ defaultAccesses = [];
+ } else if (permissionGroup === "private") {
+ // Private access has no default accesses
+ // No group access, so not visible in workspace
+ groupsAccesses[organizationId] = null;
+ defaultAccesses = [];
+ }
+
+ // Update the room with the new permissions
+ let updatedRoom;
+ try {
+ updatedRoom = await liveblocks.updateRoom(documentId, {
+ metadata: updatedMetadata,
+ defaultAccesses,
+ groupsAccesses: groupsAccesses as Record<
+ string,
+ ["room:write"] | ["room:read", "room:presence:write"] | null
+ >,
+ });
+ } catch (err) {
+ return {
+ error: {
+ code: 401,
+ message: "Can't edit default access level in room",
+ suggestion: "Please refresh the page and try again",
+ },
+ };
+ }
+
+ if (!updatedRoom) {
+ return {
+ error: {
+ code: 404,
+ message: "Updated room not found",
+ suggestion: "Contact an administrator",
+ },
+ };
+ }
+
+ // If successful, covert to custom document format and return
+ const document: Document = buildDocument(updatedRoom);
+ return { data: document };
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/updateGroupAccess.ts b/starter-kits/nextjs-starter-kit/lib/actions/updateGroupAccess.ts
deleted file mode 100644
index d5bfd924cfc..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/actions/updateGroupAccess.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-"use server";
-
-import { auth } from "@/auth";
-import { getGroup } from "@/lib/database/getGroup";
-import {
- buildDocumentGroups,
- documentAccessToRoomAccesses,
- getDraftsGroupName,
- userAllowedInRoom,
-} from "@/lib/utils";
-import { liveblocks } from "@/liveblocks.server.config";
-import { Document, DocumentAccess, DocumentGroup } from "@/types";
-
-type Props = {
- groupId: DocumentGroup["id"];
- documentId: Document["id"];
- access: DocumentAccess;
-};
-
-/**
- * Update Group Access
- *
- * Add a group to a given document with their groupId
- * Uses custom API endpoint
- *
- * @param groupId - The id of the group
- * @param documentId - The document id
- * @param access - The access level of the user
- */
-export async function updateGroupAccess({
- groupId,
- documentId,
- access,
-}: Props) {
- let session;
- let room;
- let group;
- try {
- // Get session and room
- const result = await Promise.all([
- auth(),
- liveblocks.getRoom(documentId),
- getGroup(groupId),
- ]);
- session = result[0];
- room = result[1];
- group = result[2];
- } catch (err) {
- console.error(err);
- return {
- error: {
- code: 500,
- message: "Error fetching document",
- suggestion: "Refresh the page and try again",
- },
- };
- }
-
- // Check user is logged in
- if (!session) {
- return {
- error: {
- code: 401,
- message: "Not signed in",
- suggestion: "Sign in to remove a user",
- },
- };
- }
-
- // Check current logged-in user has edit access to the room
- if (
- !userAllowedInRoom({
- accessAllowed: "write",
- checkAccessLevel: "user",
- userId: session.user.info.id,
- groupIds: session.user.info.groupIds,
- room,
- })
- ) {
- return {
- error: {
- code: 403,
- message: "Not allowed access",
- suggestion: "Check that you've been given permission to the document",
- },
- };
- }
-
- // Check the room `documentId` exists
- if (!room) {
- return {
- error: {
- code: 404,
- message: "Document not found",
- suggestion: "Check that you're on the correct page",
- },
- };
- }
-
- // Check group exists in system
- if (!group) {
- return {
- error: {
- code: 400,
- message: "Group does not exist",
- suggestion: `Check that that group ${groupId} exists in the system`,
- },
- };
- }
-
- // If room exists, create groupsAccesses element for new collaborator with passed access level
- const groupAccess = documentAccessToRoomAccesses(access);
-
- // TODO - Type this better after package fixes
- const groupsAccesses: Record<
- string,
- | ["room:write"]
- | ["room:read", "room:presence:write"]
- | ["room:read", "room:presence:write", "comments:write"]
- | null
- > = {
- [groupId]: groupAccess.length === 0 ? null : groupAccess,
- };
-
- // If draft and adding a group, remove drafts group
- const draftGroupId = getDraftsGroupName(session.user.info.id);
- if (groupId !== draftGroupId && draftGroupId in room.groupsAccesses) {
- groupsAccesses[draftGroupId] = null;
- }
-
- // Update the room with the new collaborators
- let updatedRoom;
- try {
- updatedRoom = await liveblocks.updateRoom(documentId, {
- groupsAccesses: groupsAccesses as any, // TODO - Type this better after package fixes
- });
- } catch (err) {
- return {
- error: {
- code: 401,
- message: "Can't edit group in room",
- suggestion: "Please refresh the page and try again",
- },
- };
- }
-
- if (!updatedRoom) {
- return {
- error: {
- code: 404,
- message: "Updated room not found",
- suggestion: "Contact an administrator",
- },
- };
- }
-
- // If successful, convert room to a list of groups and send
- const result: DocumentGroup[] = await buildDocumentGroups(updatedRoom);
- return { data: result };
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/actions/updateUserAccess.ts b/starter-kits/nextjs-starter-kit/lib/actions/updateUserAccess.ts
index 34c91a5de9d..17c6777b752 100644
--- a/starter-kits/nextjs-starter-kit/lib/actions/updateUserAccess.ts
+++ b/starter-kits/nextjs-starter-kit/lib/actions/updateUserAccess.ts
@@ -1,21 +1,22 @@
"use server";
import { auth } from "@/auth";
+import { DEFAULT_ORGANIZATION_ID } from "@/constants";
import { getUser } from "@/lib/database/getUser";
import {
buildDocument,
buildDocumentUsers,
- documentAccessToRoomAccesses,
isUserDocumentOwner,
+ permissionTypeToRoomAccesses,
userAllowedInRoom,
} from "@/lib/utils";
import { liveblocks } from "@/liveblocks.server.config";
-import { Document, DocumentAccess, DocumentUser } from "@/types";
+import { Document, DocumentPermissionType, DocumentUser } from "@/types";
type Props = {
userId: DocumentUser["id"];
documentId: Document["id"];
- access: DocumentAccess;
+ access: DocumentPermissionType;
};
/**
@@ -29,19 +30,21 @@ type Props = {
* @param access - The access level of the user
*/
export async function updateUserAccess({ userId, documentId, access }: Props) {
- let session;
+ const session = await auth();
+ // Default to personal workspace for authenticated users
+ const organizationId =
+ session?.user.currentOrganizationId ?? DEFAULT_ORGANIZATION_ID;
+
let room;
let user;
try {
- // Get session and room
+ // Get room and user
const result = await Promise.all([
- auth(),
liveblocks.getRoom(documentId),
getUser(userId),
]);
- session = result[0];
- room = result[1];
- user = result[2];
+ room = result[0];
+ user = result[1];
} catch (err) {
console.error(err);
return {
@@ -64,13 +67,13 @@ export async function updateUserAccess({ userId, documentId, access }: Props) {
};
}
- // Check current logged-in user is set as a user with id, ignoring groupIds and default access
+ // Check current logged-in user is set as a user with id, ignoring default access
if (
!userAllowedInRoom({
accessAllowed: "write",
checkAccessLevel: "user",
userId: session.user.info.id,
- groupIds: [],
+ organizationId,
room,
})
) {
@@ -119,24 +122,22 @@ export async function updateUserAccess({ userId, documentId, access }: Props) {
}
// If room exists, create userAccesses element for new collaborator with passed access level
- const userAccess = documentAccessToRoomAccesses(access);
-
- // TODO - Type this better after package fixes
+ const userAccess = permissionTypeToRoomAccesses(access);
const usersAccesses: Record<
string,
- | ["room:write"]
- | ["room:read", "room:presence:write"]
- | ["room:read", "room:presence:write", "comments:write"]
- | null
+ ["room:write"] | ["room:read", "room:presence:write"] | null
> = {
- [userId]: userAccess.length === 0 ? null : userAccess,
+ [userId]:
+ userAccess.length === 0
+ ? null
+ : (userAccess as ["room:write"] | ["room:read", "room:presence:write"]),
};
// Send userAccesses to room and remove user
let updatedRoom;
try {
updatedRoom = await liveblocks.updateRoom(documentId, {
- usersAccesses: usersAccesses as any, // TODO - Type this better after package fixes
+ usersAccesses,
});
} catch (err) {
return {
@@ -159,13 +160,14 @@ export async function updateUserAccess({ userId, documentId, access }: Props) {
}
// If the user previously had no access to document, send a notification saying they've been added
- const previousAccessLevel = document.accesses.users[userId];
- if (!previousAccessLevel || previousAccessLevel === DocumentAccess.NONE) {
+ const previousAccess = room.usersAccesses?.[userId];
+ if (!previousAccess) {
liveblocks.triggerInboxNotification({
userId,
kind: "$addedToDocument",
subjectId: document.id,
roomId: room.id,
+ organizationId,
activityData: {
documentId: document.id,
},
diff --git a/starter-kits/nextjs-starter-kit/lib/database/getGroup.ts b/starter-kits/nextjs-starter-kit/lib/database/getGroup.ts
deleted file mode 100644
index 6f56f476d5a..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/database/getGroup.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { groups } from "@/data/groups";
-import { Group } from "@/types";
-
-/**
- * Get Group
- *
- * Simulates calling your database and returning a group
- *
- * @param id - The group's id
- */
-export async function getGroup(id: string): Promise {
- // Special cases for `@everyone` and `@here` as they're not "real" groups
- if (id === "everyone") {
- return {
- id: "everyone",
- name: "Everyone",
- };
- }
-
- if (id === "here") {
- return {
- id: "here",
- name: "Here",
- };
- }
-
- return groups.find((group) => group.id === id) ?? null;
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/database/getGroups.ts b/starter-kits/nextjs-starter-kit/lib/database/getGroups.ts
deleted file mode 100644
index 4dfdcc2fa4c..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/database/getGroups.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { groups } from "@/data/groups";
-import { users } from "@/data/users";
-import { Group } from "@/types";
-import { getGroup } from "./getGroup";
-
-type Props = {
- groupIds?: string[];
- search?: string;
-};
-
-type GroupWithMembers = Group & {
- memberIds: string[];
-};
-
-/**
- * Get Groups
- *
- * Simulates calling your database and returning a list of groups
- *
- * @param groupIds - The group ids to get
- * @param search - The term to filter your users by, checks users' ids and names
- */
-export async function getGroups({ groupIds, search }: Props = {}): Promise<
- (GroupWithMembers | null)[]
-> {
- const groupsPromises: Promise[] = [];
-
- // Filter by userIds or get all users
- if (groupIds) {
- for (const groupId of groupIds) {
- groupsPromises.push(getGroup(groupId));
- }
- } else {
- const allGroupIds = groups.map((group) => group.id);
-
- for (const groupId of allGroupIds) {
- groupsPromises.push(getGroup(groupId));
- }
- }
-
- let groupList = await Promise.all(groupsPromises);
-
- // If search term, check if term is included in name or id, and filter
- if (search) {
- const term = search.toLowerCase();
-
- groupList = groupList.filter((group) => {
- if (!group) {
- return false;
- }
-
- return (
- group.name.toLowerCase().includes(term) ||
- group.id.toLowerCase().includes(term)
- );
- });
- }
-
- return groupList.map((group) =>
- group
- ? {
- ...group,
- memberIds: users
- .filter((user) => user.groupIds.includes(group.id))
- .map((user) => user.id),
- }
- : group
- );
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/database/getOrganization.ts b/starter-kits/nextjs-starter-kit/lib/database/getOrganization.ts
new file mode 100644
index 00000000000..bba449473cf
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/database/getOrganization.ts
@@ -0,0 +1,15 @@
+import { organizations } from "@/data/organizations";
+import { Organization } from "@/types";
+
+/**
+ * Get Organization
+ *
+ * Simulates calling your database and returning an organization
+ *
+ * @param id - The organization's id
+ */
+export async function getOrganization(
+ id: string
+): Promise {
+ return organizations.find((organization) => organization.id === id) ?? null;
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/database/getUser.ts b/starter-kits/nextjs-starter-kit/lib/database/getUser.ts
index c06f8c0a304..08f034c8a8e 100644
--- a/starter-kits/nextjs-starter-kit/lib/database/getUser.ts
+++ b/starter-kits/nextjs-starter-kit/lib/database/getUser.ts
@@ -20,7 +20,7 @@ Check that you've added the user to data/users.ts, for example:
id: "${userId}",
name: "Tchoka Ahoki",
avatar: "https://liveblocks.io/avatars/avatar-7.png",
- groupIds: ["product", "engineering", "design"],
+ organizationIds: ["liveblocks"],
},
`);
@@ -31,7 +31,7 @@ Check that you've added the user to data/users.ts, for example:
return { color, ...user };
}
-export function getRandom(array: T[], seed?: string): T {
+function getRandom(array: T[], seed?: string): T {
const index = seed
? Math.abs(hashCode(seed)) % array.length
: Math.floor(Math.random() * array.length);
diff --git a/starter-kits/nextjs-starter-kit/lib/database/getUserOrganizations.ts b/starter-kits/nextjs-starter-kit/lib/database/getUserOrganizations.ts
new file mode 100644
index 00000000000..8f45f209e2e
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/database/getUserOrganizations.ts
@@ -0,0 +1,33 @@
+import { organizations } from "@/data/organizations";
+import { Organization } from "@/types";
+import { getUser } from "./getUser";
+
+type Props = {
+ userId: string;
+};
+
+/**
+ * Get Organizations
+ *
+ * Simulates calling your database and returning a list of organizations
+ *
+ * @param userId - The user id to get organizations for
+ */
+export async function getUserOrganizations({ userId }: Props) {
+ const user = await getUser(userId);
+ if (!user) {
+ return [];
+ }
+
+ const userOrganizations: Organization[] = [];
+
+ // Add user's organizations from your database
+ for (const organizationId of user.organizationIds) {
+ const organization = organizations.find((org) => org.id === organizationId);
+ if (organization) {
+ userOrganizations.push(organization);
+ }
+ }
+
+ return userOrganizations;
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/database/index.ts b/starter-kits/nextjs-starter-kit/lib/database/index.ts
index e7e2737d4e4..775dc5e5115 100644
--- a/starter-kits/nextjs-starter-kit/lib/database/index.ts
+++ b/starter-kits/nextjs-starter-kit/lib/database/index.ts
@@ -1,4 +1,4 @@
-export * from "./getGroup";
-export * from "./getGroups";
+export * from "./getOrganization";
+export * from "./getUserOrganizations";
export * from "./getUser";
export * from "./getUsers";
diff --git a/starter-kits/nextjs-starter-kit/lib/hooks/index.ts b/starter-kits/nextjs-starter-kit/lib/hooks/index.ts
index d50c2a6adac..5816b69f465 100644
--- a/starter-kits/nextjs-starter-kit/lib/hooks/index.ts
+++ b/starter-kits/nextjs-starter-kit/lib/hooks/index.ts
@@ -1,4 +1,4 @@
+export * from "./useCurrentOrganization";
export * from "./useDocumentsFunctionSWR";
-export * from "./useGroups";
export * from "./useInitialDocument";
export * from "./usePaginatedDocumentsSWR";
diff --git a/starter-kits/nextjs-starter-kit/lib/hooks/useCurrentOrganization.ts b/starter-kits/nextjs-starter-kit/lib/hooks/useCurrentOrganization.ts
new file mode 100644
index 00000000000..fca8a0473ea
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/hooks/useCurrentOrganization.ts
@@ -0,0 +1,35 @@
+import { useSession } from "next-auth/react";
+import { useMemo } from "react";
+import { getUserOrganizations } from "@/lib/actions";
+import { useDocumentsFunctionSWR } from "@/lib/hooks";
+
+export function useCurrentOrganization() {
+ const { data: session } = useSession();
+
+ // Get a list of organizations for the current user
+ const {
+ data: organizations,
+ mutate,
+ error,
+ isLoading,
+ } = useDocumentsFunctionSWR([getUserOrganizations, []], {
+ refreshInterval: 0,
+ });
+
+ const currentOrganization = useMemo(() => {
+ if (!session || !organizations || organizations.length === 0) {
+ return null;
+ }
+
+ const currentId = session.user.currentOrganizationId;
+ const found = organizations.find((org) => org.id === currentId);
+
+ if (found) {
+ return found;
+ }
+
+ return organizations[0];
+ }, [organizations, session]);
+
+ return { currentOrganization, isLoading, error, mutate };
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/hooks/useGroups.ts b/starter-kits/nextjs-starter-kit/lib/hooks/useGroups.ts
deleted file mode 100644
index 6f5956fb636..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/hooks/useGroups.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import useSWR from "swr";
-import { getGroups } from "@/lib/actions";
-
-export function useGroupsInfo(groupIds: string[]) {
- const { data: groups = [] } = useSWR(
- `groups_${JSON.stringify(groupIds)}`,
- async () => (groupIds.length ? getGroups(groupIds) : [])
- );
- return groups;
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/buildDocumentGroups.ts b/starter-kits/nextjs-starter-kit/lib/utils/buildDocumentGroups.ts
deleted file mode 100644
index cdaa4b69148..00000000000
--- a/starter-kits/nextjs-starter-kit/lib/utils/buildDocumentGroups.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { RoomData } from "@liveblocks/node";
-import { DocumentGroup } from "@/types";
-import { getGroup } from "../database";
-import { roomAccessesToDocumentAccess } from "./convertAccessType";
-
-/**
- * Convert a Liveblocks room result into a list of DocumentGroups
- *
- * @param result - Liveblocks getRoomById() result
- */
-export async function buildDocumentGroups(result: RoomData) {
- const groups: DocumentGroup[] = [];
-
- for (const [id, accessValue] of Object.entries(result.groupsAccesses)) {
- const group = await getGroup(id);
-
- if (group) {
- groups.push({
- ...group,
- // @ts-ignore
- access: roomAccessesToDocumentAccess(accessValue, false),
- });
- }
- }
-
- return groups;
-}
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/buildDocumentUsers.ts b/starter-kits/nextjs-starter-kit/lib/utils/buildDocumentUsers.ts
index 736b0200d97..e1e4b171064 100644
--- a/starter-kits/nextjs-starter-kit/lib/utils/buildDocumentUsers.ts
+++ b/starter-kits/nextjs-starter-kit/lib/utils/buildDocumentUsers.ts
@@ -1,6 +1,6 @@
import { RoomData } from "@liveblocks/node";
import { getUser } from "@/lib/database/getUser";
-import { roomAccessesToDocumentAccess } from "@/lib/utils/convertAccessType";
+import { roomAccessesToPermissionType } from "@/lib/utils";
import { DocumentUser } from "@/types";
/**
@@ -18,8 +18,7 @@ export async function buildDocumentUsers(result: RoomData, userId: string) {
if (user) {
users.push({
...user,
- // @ts-ignore
- access: roomAccessesToDocumentAccess(accessValue, true),
+ access: roomAccessesToPermissionType(accessValue),
isCurrentUser: id === userId,
});
}
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/buildDocuments.ts b/starter-kits/nextjs-starter-kit/lib/utils/buildDocuments.ts
index f7eb8c08b07..83d1c3934b6 100644
--- a/starter-kits/nextjs-starter-kit/lib/utils/buildDocuments.ts
+++ b/starter-kits/nextjs-starter-kit/lib/utils/buildDocuments.ts
@@ -1,6 +1,11 @@
import { RoomData } from "@liveblocks/node";
-import { Document, DocumentRoomMetadata } from "@/types";
-import { roomAccessesToDocumentAccess } from "./convertAccessType";
+import {
+ Document,
+ DocumentPermissionType,
+ DocumentPermissions,
+ DocumentRoomMetadata,
+} from "@/types";
+import { roomAccessesToPermissionType } from "./convertAccessType";
/**
* Convert Liveblocks rooms into our custom document format
@@ -16,63 +21,49 @@ export function buildDocuments(rooms: RoomData[]): Document[] {
}
export function buildDocument(room: RoomData): Document {
- let name: Document["name"] = "Untitled";
- let owner: Document["owner"] = "";
- let draft: Document["draft"] = false;
-
- // Get document info from metadata
+ // Get document info from metadatachat
const metadata = room.metadata as DocumentRoomMetadata;
- if (metadata.name) {
- name = metadata.name;
- }
-
- if (metadata.owner) {
- owner = metadata.owner;
+ // Check all metadata fields exist
+ const requiredKeys = ["name", "owner", "permissionGroup", "permissionType"];
+ if (
+ !requiredKeys.every((key) =>
+ Object.prototype.hasOwnProperty.call(metadata, key)
+ )
+ ) {
+ throw new Error(
+ `Missing required metadata fields here: ${JSON.stringify(metadata)}`
+ );
}
- if (metadata.draft === "yes") {
- draft = true;
- }
-
- // Get default, group, and user access from metadata
- const defaultAccess: Document["accesses"]["default"] =
- roomAccessesToDocumentAccess(room.defaultAccesses);
-
- const groups: Document["accesses"]["groups"] = {};
- Object.entries(room.groupsAccesses).map(([id, accessValue]) => {
- if (accessValue) {
- // @ts-ignore
- groups[id] = roomAccessesToDocumentAccess(accessValue);
- }
- });
-
- const users: Document["accesses"]["users"] = {};
- Object.entries(room.usersAccesses).map(([id, accessValue]) => {
- if (accessValue) {
- // @ts-ignore
- users[id] = roomAccessesToDocumentAccess(accessValue);
- }
- });
-
+ // Add times to document
const created = room.createdAt.toString();
const lastConnection = room.lastConnectionAt
? room.lastConnectionAt.toString()
: created;
+ // Add general permissions
+ const generalPermissions: DocumentPermissions = {
+ group: metadata.permissionGroup,
+ type: metadata.permissionType,
+ };
+
+ // Add individual user permissions
+ const userPermissions: Record = {};
+ for (const [userId, accessValue] of Object.entries(room.usersAccesses)) {
+ userPermissions[userId] = roomAccessesToPermissionType(accessValue);
+ }
+
// Return our custom Document format
return {
id: room.id,
created,
lastConnection,
type: metadata.type,
- name,
- owner,
- draft,
- accesses: {
- default: defaultAccess,
- groups: groups,
- users: users,
- },
+ name: metadata.name || "Untitled",
+ owner: metadata.owner,
+ generalPermissions,
+ userPermissions,
+ organization: room.organizationId,
};
}
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/convertAccessType.ts b/starter-kits/nextjs-starter-kit/lib/utils/convertAccessType.ts
index ca99de1bc43..175cc89b70d 100644
--- a/starter-kits/nextjs-starter-kit/lib/utils/convertAccessType.ts
+++ b/starter-kits/nextjs-starter-kit/lib/utils/convertAccessType.ts
@@ -1,51 +1,41 @@
import { RoomPermission } from "@liveblocks/node";
-import { DocumentAccess } from "@/types";
+import { DocumentPermissionType } from "@/types";
/**
- * Convert from Liveblocks room accesses to a custom document access format
- * If the user was set on userAccesses, give FULL permissions to edit invited users
+ * Convert from Liveblocks room accesses to document permission type
* @param roomAccesses - The room access(es) to check
- * @param setOnUserAccesses - If the user was set with userAccesses or not
*/
-export function roomAccessesToDocumentAccess(
- roomAccesses: RoomPermission | null,
- setOnUserAccesses = false
-): DocumentAccess {
- if (!roomAccesses) {
- return DocumentAccess.NONE;
+export function roomAccessesToPermissionType(
+ roomAccesses: RoomPermission
+): DocumentPermissionType {
+ if (!roomAccesses || roomAccesses.length === 0) {
+ return "read";
}
if (roomAccesses[0] === "room:write") {
- return setOnUserAccesses ? DocumentAccess.FULL : DocumentAccess.EDIT;
+ return "write";
}
if (
roomAccesses[0] === "room:read" &&
roomAccesses[1] === "room:presence:write"
) {
- return DocumentAccess.READONLY;
+ return "read";
}
- return DocumentAccess.NONE;
+ return "read";
}
/**
- * Convert from a custom document access format to native Liveblocks room accesses
- * @param documentAccess
+ * Convert from document permission type to native Liveblocks room accesses
+ * @param permissionType - The document permission type
*/
-export function documentAccessToRoomAccesses(
- documentAccess: DocumentAccess
+export function permissionTypeToRoomAccesses(
+ permissionType: DocumentPermissionType
): RoomPermission {
- if (
- documentAccess === DocumentAccess.FULL ||
- documentAccess === DocumentAccess.EDIT
- ) {
+ if (permissionType === "write") {
return ["room:write"];
}
- if (documentAccess === DocumentAccess.READONLY) {
- return ["room:read", "room:presence:write"];
- }
-
- return [];
+ return ["room:read", "room:presence:write"];
}
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/getDocumentAccess.ts b/starter-kits/nextjs-starter-kit/lib/utils/getDocumentAccess.ts
index 601899c3cf6..2020c85fc6b 100644
--- a/starter-kits/nextjs-starter-kit/lib/utils/getDocumentAccess.ts
+++ b/starter-kits/nextjs-starter-kit/lib/utils/getDocumentAccess.ts
@@ -1,50 +1,29 @@
-import { Document, DocumentAccess, User } from "@/types";
+import { Document, DocumentPermissionType, User } from "@/types";
interface Props {
- documentAccesses: Document["accesses"];
- groupIds: User["groupIds"];
+ document: Document;
userId: User["id"];
}
-const accessLevelHierarchy = [
- DocumentAccess.NONE,
- DocumentAccess.READONLY,
- DocumentAccess.EDIT,
- DocumentAccess.FULL,
-];
-
+/**
+ * Get the user's permission type for a document. Not secure, used for UI purposes only.
+ * Checks user-specific access first, then falls back to default access based on permission group
+ */
export function getDocumentAccess({
- documentAccesses,
+ document,
userId,
- groupIds,
-}: Props) {
- let accessLevel = documentAccesses.default;
-
- // If a group id is higher than default access, use this
- groupIds.forEach((groupId) => {
- const groupAccess = documentAccesses.groups[groupId];
- if (
- accessLevelHierarchy.indexOf(groupAccess) >
- accessLevelHierarchy.indexOf(accessLevel)
- ) {
- accessLevel = groupAccess;
- }
- });
-
- let userAccess = documentAccesses.users[userId];
-
- // If EDIT access set at user level, give FULL access
- if (userAccess === DocumentAccess.EDIT) {
- userAccess = DocumentAccess.FULL;
+}: Props): DocumentPermissionType {
+ // If user is the owner they have write access
+ if (document.owner === userId) {
+ return "write";
}
- // If a user id is higher than default access, use this
- if (
- accessLevelHierarchy.indexOf(userAccess) >
- accessLevelHierarchy.indexOf(accessLevel)
- ) {
- accessLevel = userAccess;
+ // Check if user has specific permission for this document
+ const userPermission = document.userPermissions[userId];
+ if (userPermission) {
+ return userPermission;
}
- return accessLevel;
+ // Otherwise, return the document's permission type
+ return document.generalPermissions.type;
}
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/index.ts b/starter-kits/nextjs-starter-kit/lib/utils/index.ts
index d95baf5dd36..74c845a9032 100644
--- a/starter-kits/nextjs-starter-kit/lib/utils/index.ts
+++ b/starter-kits/nextjs-starter-kit/lib/utils/index.ts
@@ -1,8 +1,6 @@
export * from "./buildDocuments";
-export * from "./buildDocumentGroups";
export * from "./buildDocumentUsers";
export * from "./convertAccessType";
export * from "./getDocumentAccess";
-export * from "./getDraftsGroupName";
export * from "./isUserDocumentOwner";
export * from "./userAllowedInRooms";
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/organizationCookie.ts b/starter-kits/nextjs-starter-kit/lib/utils/organizationCookie.ts
new file mode 100644
index 00000000000..f78ac7c8813
--- /dev/null
+++ b/starter-kits/nextjs-starter-kit/lib/utils/organizationCookie.ts
@@ -0,0 +1,39 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+const ORGANIZATION_COOKIE_NAME = "currentOrganizationId";
+
+/**
+ * Get Organization ID from Cookie
+ *
+ * Gets the current organization/tenant ID from the cookie.
+ * Used in server-side auth callbacks.
+ *
+ * @returns The organization/tenant ID or null if not set
+ */
+export async function getOrganizationIdFromCookie(): Promise {
+ const cookieStore = await cookies();
+ return cookieStore.get(ORGANIZATION_COOKIE_NAME)?.value || null;
+}
+
+/**
+ * Set Organization ID in Cookie
+ *
+ * Sets the current organization/tenant ID in a cookie.
+ * Used when switching organizations.
+ *
+ * @param organizationId - The organization/tenant ID to set
+ */
+export async function setOrganizationIdInCookie(
+ organizationId: string
+): Promise {
+ const cookieStore = await cookies();
+ cookieStore.set(ORGANIZATION_COOKIE_NAME, organizationId, {
+ httpOnly: true,
+ secure: process.env.NODE_ENV === "production",
+ sameSite: "lax",
+ maxAge: 60 * 60 * 24 * 365, // 1 year
+ path: "/",
+ });
+}
diff --git a/starter-kits/nextjs-starter-kit/lib/utils/userAllowedInRooms.ts b/starter-kits/nextjs-starter-kit/lib/utils/userAllowedInRooms.ts
index d293ea44c3c..fd051a9dd64 100644
--- a/starter-kits/nextjs-starter-kit/lib/utils/userAllowedInRooms.ts
+++ b/starter-kits/nextjs-starter-kit/lib/utils/userAllowedInRooms.ts
@@ -7,8 +7,8 @@ import { RoomData } from "@liveblocks/node";
interface UserAccessProps {
accessAllowed: "write" | "read";
- checkAccessLevel?: "any" | "user" | "group" | "default";
- groupIds: string[];
+ checkAccessLevel?: "any" | "user" | "organization" | "general";
+ organizationId: string;
userId: string;
}
@@ -24,14 +24,14 @@ type UserAllowedInRoomsProps = UserAccessProps & {
* Returns true if a user has any of the allowed accesses in every room
* @param accessesAllowed - Each of these permission types is checked
* @param userId - The user's id to check
- * @param groupIds - An array of group names the user is part of
+ * @param organizationId - The organization's id to check
* @param rooms - A list of rooms returned from Liveblocks APIs
* @param [checkAccessLevels] - Check permission on only these access levels
*/
export function userAllowedInRooms({
accessAllowed,
userId,
- groupIds,
+ organizationId,
rooms,
checkAccessLevel,
}: UserAllowedInRoomsProps) {
@@ -39,7 +39,7 @@ export function userAllowedInRooms({
userAllowedInRoom({
accessAllowed,
userId,
- groupIds,
+ organizationId,
checkAccessLevel,
room,
})
@@ -50,7 +50,7 @@ export function userAllowedInRooms({
* Returns true if a user has one of the allowed accesses in the room
* @param accessesAllowed - Each of these permission types is checked
* @param userId - The user's id to check
- * @param groupIds - An array of group names the user is part of
+ * @param organizationId - The organization's id to check
* @param room - A room returned from Liveblocks APIs
* @param [checkAccessLevels] - Check permission on only these access levels
*/
@@ -58,62 +58,62 @@ export function userAllowedInRooms({
export function userAllowedInRoom({
accessAllowed,
userId,
- groupIds,
+ organizationId,
room,
checkAccessLevel = "any",
}: UserAllowedInRoomProps) {
const userAllowed = checkUserAccess({
accessAllowed,
userId,
- groupIds,
room,
+ organizationId,
});
- const groupAllowed = checkGroupsAccess({
+ const organizationAllowed = checkOrganizationAccess({
accessAllowed,
userId,
- groupIds,
room,
+ organizationId,
});
- const defaultAllowed = checkDefaultAccess({
+ const generalAllowed = checkGeneralAccess({
accessAllowed,
userId,
- groupIds,
room,
+ organizationId,
});
if (checkAccessLevel === "any") {
- return userAllowed || groupAllowed || defaultAllowed;
+ return userAllowed || organizationAllowed || generalAllowed;
}
if (checkAccessLevel === "user") {
return userAllowed;
}
- if (checkAccessLevel === "group") {
- return groupAllowed;
+ if (checkAccessLevel === "organization") {
+ return organizationAllowed;
}
- if (checkAccessLevel === "default") {
- return groupAllowed;
+ if (checkAccessLevel === "general") {
+ return generalAllowed;
}
return false;
}
-function checkDefaultAccess({ room, accessAllowed }: UserAllowedInRoomProps) {
- const defaultAccess = room.defaultAccesses as string[];
+function checkGeneralAccess({ room, accessAllowed }: UserAllowedInRoomProps) {
+ const generalAccess = room.defaultAccesses as string[];
if (accessAllowed === "write") {
- if (defaultAccess.includes("room:write")) {
+ if (generalAccess.includes("room:write")) {
return true;
}
}
if (accessAllowed === "read") {
if (
- defaultAccess.includes("room:write") ||
- defaultAccess.includes("room:read")
+ generalAccess.includes("room:write") ||
+ generalAccess.includes("room:read")
) {
return true;
}
@@ -122,28 +122,35 @@ function checkDefaultAccess({ room, accessAllowed }: UserAllowedInRoomProps) {
return false;
}
-function checkGroupsAccess({
+function checkOrganizationAccess({
room,
accessAllowed,
- groupIds,
+ organizationId,
}: UserAllowedInRoomProps) {
- for (const groupId of groupIds) {
- const groupAccess = (room.groupsAccesses[groupId] || []) as string[];
+ const groupAccess = (room.groupsAccesses?.[organizationId] || []) as string[];
- // Checking for write access on current group
- if (accessAllowed === "write" && groupAccess.includes("room:write")) {
+ if (!groupAccess) {
+ return false;
+ }
+
+ // Write access requires "room:write"
+ if (accessAllowed === "write") {
+ if (groupAccess.includes("room:write")) {
return true;
}
+ }
- // Checking for read (and write) access on current group
+ // Read access requires "room:write" or "room:read"
+ if (accessAllowed === "read") {
if (
- accessAllowed === "read" &&
- (groupAccess.includes("room:write") || groupAccess.includes("room:read"))
+ groupAccess.includes("room:write") ||
+ groupAccess.includes("room:read")
) {
return true;
}
}
+ // No access on organization level
return false;
}
diff --git a/starter-kits/nextjs-starter-kit/next-auth.d.ts b/starter-kits/nextjs-starter-kit/next-auth.d.ts
index 639c9b75734..def2aba3f56 100644
--- a/starter-kits/nextjs-starter-kit/next-auth.d.ts
+++ b/starter-kits/nextjs-starter-kit/next-auth.d.ts
@@ -9,6 +9,8 @@ declare module "next-auth" {
// The type of extra info taken from your database and sent to front end from auth endpoint
// See /pages/api/auth/[...nextauth].ts
info: User;
+ // The currently selected organization/tenant ID
+ currentOrganizationId: string;
};
}
}
diff --git a/starter-kits/nextjs-starter-kit/next-env.d.ts b/starter-kits/nextjs-starter-kit/next-env.d.ts
index 830fb594ca2..c4b7818fbb2 100644
--- a/starter-kits/nextjs-starter-kit/next-env.d.ts
+++ b/starter-kits/nextjs-starter-kit/next-env.d.ts
@@ -1,6 +1,6 @@
///
{title}
-
-
+
+ {titleButton}
+
+
+
{content}
diff --git a/starter-kits/nextjs-starter-kit/primitives/Popover/Popover.tsx b/starter-kits/nextjs-starter-kit/primitives/Popover/Popover.tsx
index ee27775bcbb..e08c73a6dbc 100644
--- a/starter-kits/nextjs-starter-kit/primitives/Popover/Popover.tsx
+++ b/starter-kits/nextjs-starter-kit/primitives/Popover/Popover.tsx
@@ -3,7 +3,8 @@ import { CSSProperties, ReactNode } from "react";
import styles from "./Popover.module.css";
interface Props
- extends RadixPopover.PopoverProps,
+ extends
+ RadixPopover.PopoverProps,
Pick<
RadixPopover.PopoverContentProps,
"side" | "sideOffset" | "align" | "alignOffset"
diff --git a/starter-kits/nextjs-starter-kit/primitives/Select/Select.module.css b/starter-kits/nextjs-starter-kit/primitives/Select/Select.module.css
index 93523998ee0..04619e10e3c 100644
--- a/starter-kits/nextjs-starter-kit/primitives/Select/Select.module.css
+++ b/starter-kits/nextjs-starter-kit/primitives/Select/Select.module.css
@@ -14,8 +14,30 @@
outline: none;
}
+.trigger[data-placeholder] {
+ color: var(--color-text-lightest);
+ font-weight: 400;
+}
+
+.trigger[data-disabled] {
+ cursor: default;
+ pointer-events: none;
+ opacity: 0.75;
+}
+
+.trigger[data-inline-description] {
+ height: var(--space-16);
+}
+
+.trigger[data-loading] {
+ transition: none;
+ pointer-events: none;
+ opacity: 0.75;
+}
+
.triggerSubtle {
background: none;
+ padding: 0 var(--space-5);
}
.trigger:hover,
@@ -32,21 +54,11 @@
.triggerIcon {
flex: none;
- margin-right: calc(-1 * var(--space-3));
+ margin-right: calc(-1 * var(--space-2));
margin-left: auto;
opacity: 0.4;
}
-.trigger[data-placeholder] {
- color: var(--color-text-lightest);
- font-weight: 400;
-}
-
-.trigger[data-disabled] {
- cursor: default;
- opacity: var(--opacity-disabled);
-}
-
.select {
z-index: var(--z-above);
padding: var(--space-3);
@@ -76,13 +88,43 @@
.itemInfo {
display: flex;
flex-direction: column;
+ align-items: start;
gap: var(--space-1);
}
+.itemIcon {
+ width: 36px;
+ height: 36px;
+ flex: none;
+ margin-right: var(--space-7);
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ place-items: center;
+ place-content: center;
+ background-color: var(--color-surface);
+}
+
+.item:hover .itemIcon {
+ background-color: var(--color-surface-hover);
+}
+
+.itemIcon > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.itemIcon > svg {
+ width: 50%;
+ height: 50%;
+ opacity: 0.5;
+}
+
.itemDescription {
font-size: var(--size-xs);
font-weight: 400;
- opacity: 0.6;
+ color: var(--color-text-lightest);
}
.item[data-highlighted] {
diff --git a/starter-kits/nextjs-starter-kit/primitives/Select/Select.tsx b/starter-kits/nextjs-starter-kit/primitives/Select/Select.tsx
index 5ad99c8dd32..450688e0ff5 100644
--- a/starter-kits/nextjs-starter-kit/primitives/Select/Select.tsx
+++ b/starter-kits/nextjs-starter-kit/primitives/Select/Select.tsx
@@ -1,13 +1,21 @@
import * as RadixSelect from "@radix-ui/react-select";
import clsx from "clsx";
-import { CSSProperties, useCallback, useEffect, useState } from "react";
+import {
+ CSSProperties,
+ ReactNode,
+ useCallback,
+ useEffect,
+ useState,
+} from "react";
import { CheckIcon, SelectIcon } from "../../icons";
+import { Spinner } from "../Spinner";
import styles from "./Select.module.css";
interface Item extends RadixSelect.SelectItemProps {
value: string;
title?: string;
description?: string;
+ icon?: ReactNode;
}
interface Props extends Omit {
@@ -18,7 +26,10 @@ interface Props extends Omit {
onChange?: RadixSelect.SelectProps["onValueChange"];
placeholder?: RadixSelect.SelectValueProps["placeholder"];
aboveOverlay?: boolean;
+ inlineDescription?: boolean;
className?: RadixSelect.SelectTriggerProps["className"];
+ style?: CSSProperties;
+ loading?: boolean;
}
export function Select({
@@ -29,7 +40,10 @@ export function Select({
onChange,
placeholder,
aboveOverlay,
+ inlineDescription,
className,
+ style,
+ loading,
...props
}: Props) {
const [internalValue, setInternalValue] = useState(initialValue);
@@ -59,13 +73,24 @@ export function Select({
className={clsx(className, styles.trigger, {
[styles.triggerSubtle]: variant === "subtle",
})}
+ style={style}
+ data-inline-description={inlineDescription === true || undefined}
+ data-loading={loading === true || undefined}
+ data-disabled={props.disabled === true || undefined}
>
-
+
+ {items.find((item) => item.value === internalValue)?.description}
+
+ )}
+
-
@@ -78,7 +103,7 @@ export function Select({
}
>
- {items.map(({ value, title, description, ...props }) => (
+ {items.map(({ value, title, description, icon, ...props }) => (
-
-
+
+ {icon && {icon}
}
{title ?? value}
diff --git a/starter-kits/nextjs-starter-kit/public/liveblocks.png b/starter-kits/nextjs-starter-kit/public/liveblocks.png
new file mode 100644
index 00000000000..7d84d5f24f3
Binary files /dev/null and b/starter-kits/nextjs-starter-kit/public/liveblocks.png differ
diff --git a/starter-kits/nextjs-starter-kit/tsconfig.json b/starter-kits/nextjs-starter-kit/tsconfig.json
index 24c6fd7fac2..47ae408299d 100644
--- a/starter-kits/nextjs-starter-kit/tsconfig.json
+++ b/starter-kits/nextjs-starter-kit/tsconfig.json
@@ -1,7 +1,10 @@
{
"compilerOptions": {
"target": "esnext",
- "lib": ["dom", "esnext"],
+ "lib": [
+ "dom",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -12,11 +15,15 @@
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "preserve",
+ "jsx": "react-jsx",
"incremental": true,
"paths": {
- "react": ["./node_modules/@types/react"],
- "@/*": ["./*"]
+ "react": [
+ "./node_modules/@types/react"
+ ],
+ "@/*": [
+ "./*"
+ ]
},
"plugins": [
{
@@ -24,6 +31,13 @@
}
]
},
- "include": [".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
+ "include": [
+ ".next/types/**/*.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/dev/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}
diff --git a/starter-kits/nextjs-starter-kit/types/data.ts b/starter-kits/nextjs-starter-kit/types/data.ts
index 62928014c13..d73e9344e76 100644
--- a/starter-kits/nextjs-starter-kit/types/data.ts
+++ b/starter-kits/nextjs-starter-kit/types/data.ts
@@ -5,12 +5,18 @@
export type User = {
id: string;
name: string;
- avatar?: string;
+ avatar: string;
color: string;
- groupIds: string[];
+ organizationIds: string[];
};
export type Group = {
id: string;
name: string;
};
+
+export type Organization = {
+ id: string;
+ name: string;
+ avatar: string;
+};
diff --git a/starter-kits/nextjs-starter-kit/types/document.ts b/starter-kits/nextjs-starter-kit/types/document.ts
index ed55f609252..9c60aa51b9d 100644
--- a/starter-kits/nextjs-starter-kit/types/document.ts
+++ b/starter-kits/nextjs-starter-kit/types/document.ts
@@ -1,4 +1,4 @@
-import { Group, User } from "./data";
+import { User } from "./data";
/**
* This is the main type of your Documents.
@@ -12,63 +12,53 @@ export type Document = {
// The document's name
name: string;
- // Arrays containing access levels
- accesses: DocumentAccesses;
+ // The document's general permissions (group and type)
+ generalPermissions: DocumentPermissions;
+
+ // User-specific permissions mapping user IDs to their permission type
+ userPermissions: Record;
// The user if of the document's creator
owner: DocumentUser["id"];
+ // The organization id of the document
+ organization: string;
+
// When the document was created (Date.toString())
created: string;
// When the last user connected (Date.toString())
lastConnection: string;
- // If the room is a draft (which has no groups or public access) or not
- draft: boolean;
-
// The type of document e.g. "canvas"
type: DocumentType;
};
-export type DocumentType = "text" | "whiteboard" | "canvas" | "note";
+export type DocumentPermissionGroup = "private" | "organization" | "public";
+export type DocumentPermissionType = "read" | "write";
-export type DocumentGroup = Group & {
- access: DocumentAccess;
+export type DocumentPermissions = {
+ group: DocumentPermissionGroup;
+ type: DocumentPermissionType;
};
+export type DocumentType = "text" | "whiteboard" | "canvas" | "note";
+
export type DocumentUser = User & {
- access: DocumentAccess;
+ access: DocumentPermissionType;
isCurrentUser: boolean;
};
-export enum DocumentAccess {
- // Can edit, read, and modify invited users
- FULL = "full",
-
- // Can edit and read the document
- EDIT = "edit",
-
- // Can only read the document
- READONLY = "readonly",
-
- // Can't view the document
- NONE = "none",
-}
-
-export type DocumentAccesses = {
- default: DocumentAccess;
- groups: Record;
- users: Record;
-};
-
// Room metadata used when creating a new document
-export interface DocumentRoomMetadata
- extends Record {
+export interface DocumentRoomMetadata extends Record<
+ string,
+ string | string[]
+> {
name: Document["name"];
type: DocumentType;
+ permissionGroup: DocumentPermissionGroup;
+ permissionType: DocumentPermissionType;
owner: User["id"];
- draft: "yes" | "no";
}
export type ErrorData = {
@@ -76,3 +66,74 @@ export type ErrorData = {
code?: number;
suggestion?: string;
};
+
+/**
+ * Documents translate into Liveblocks rooms. A room can be private, organization, or public.
+ *
+ * Private documents have this room data:
+ * ```
+ * "metadata": { name: "...", type: "whiteboard", permissionGroup: "private", permissionType: "write", owner: "alice" },
+ * "defaultAccesses": [],
+ * "usersAccesses": {
+ * "alice": [
+ * "room:write"
+ * ]
+ * }
+ * ```
+ *
+ * Organization documents have this room data (e.g. org is "liveblocks"):
+ * ```
+ * "metadata": { name: "...", type: "whiteboard", permissionGroup: "organization", permissionType: "organization", owner: "alice" },
+ * "defaultAccesses": [],
+ * "usersAccesses": {
+ * "alice": [
+ * "room:write"
+ * ]
+ * },
+ * groupsAccesses: {
+ * "liveblocks": [
+ * "room:write"
+ * ]
+ * }
+ * ```
+ *
+ * Public documents have this room data:
+ * ```
+ * "metadata": { name: "...", type: "whiteboard", permissionGroup: "public", permissionType: "write", owner: "alice" },
+ * "defaultAccesses": ["room:write"],
+ * "usersAccesses": {
+ * "alice": [
+ * "room:write"
+ * ]
+ * }
+ * ```
+ *
+ * There are two ways to set permissions in Liveblocks, read and write.
+ * read: ["room:read", "room:presence:write"]
+ * write: ["room:write"]
+ *
+ * All types can use these accesses:
+ * ```
+ * "defaultAccesses": ["room:read", "room:presence:write"],
+ * "usersAccesses": {
+ * "alice": [
+ * "room:write"
+ * ]
+ * }
+ * ```
+ *
+ * Additionally, all types can have multiple users added:
+ * ```
+ * "usersAccesses": {
+ * "alice": [
+ * "room:write"
+ * ],
+ * "bob": [
+ * "room:read", "room:presence:write"
+ * ]
+ * }
+ * ```
+ *
+ * However a room cannot be private, public, organization at the same time.
+ * Only one, with individual users.
+ */
diff --git a/tools/liveblocks-cli/package.json b/tools/liveblocks-cli/package.json
index 7279ede1d0e..9ad924ae903 100644
--- a/tools/liveblocks-cli/package.json
+++ b/tools/liveblocks-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "liveblocks",
- "version": "1.0.11",
+ "version": "1.0.12",
"description": "Liveblocks command line interface",
"type": "module",
"bin": {
@@ -39,9 +39,9 @@
},
"dependencies": {
"@liveblocks/core": "3.14.0",
- "@liveblocks/server": "1.0.11",
- "@liveblocks/zenrouter": "1.0.11",
- "decoders": "^2.8.0-1",
+ "@liveblocks/server": "1.0.12",
+ "@liveblocks/zenrouter": "1.0.12",
+ "decoders": "^2.8.0",
"js-base64": "^3.7.5",
"yjs": "^13.6.10"
}
+
+ 
-`@liveblocks/server` provides the APIs to run a Liveblocks server yourself.
-
-## Installation
-
-```
-bun install @liveblocks/server
-```
-
-## Architecture
-
-```mermaid
-classDiagram
- Room --> Store : store
- Room --> "0+" Session : sessions
- Session --> WebSocket
-
- class Room {
- +roomId
- +load()
- +createTicket(version) Ticket
- +startBrowserSession(Ticket ticket, WebSocket socket)
- +handleRaw(Ticket ticket, data)
- +endBrowserSession(Ticket ticket, code, reason)
- }
-
- class Store {
- +getString(key)
- +getNumber(key)
- +put(key, value)
- }
-
- class Session{
- +version
- +actor
- +nonce
- +createdAt
- +lastPong
- +sendPong()
- +sendServerMsg()
- }
-
- class WebSocket {
- +...
- }
-```
+`@liveblocks/server` provides the core Liveblocks server functionality. It
+powers both the Liveblocks production environment, and
+[our dev server](https://liveblocks.io/docs/tools/dev-server), so the behavior
+is identical. You typically don't need to install or use this package directly.
+
+While `@liveblocks/server` contains the same core technology that powers
+Liveblocks, we do not yet offer or recommend self-hosting or on-premises
+deployment. The purpose of open sourcing the server package is to provide
+transparency, and offer a great local development and testing experience. A
+production-ready self-hosted deployment requires additional infrastructure and
+expertise that are not yet easy to package.
## License
diff --git a/packages/liveblocks-server/package.json b/packages/liveblocks-server/package.json
index 6cc1e1fc9b4..20c0d570fe3 100644
--- a/packages/liveblocks-server/package.json
+++ b/packages/liveblocks-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/server",
- "version": "1.0.11",
+ "version": "1.0.12",
"description": "Liveblocks backend server foundation.",
"type": "module",
"main": "./dist/index.js",
@@ -57,7 +57,7 @@
"dependencies": {
"@liveblocks/core": "3.14.0",
"async-mutex": "^0.4.0",
- "decoders": "^2.8.0-1",
+ "decoders": "^2.8.0",
"itertools": "^2.3.2",
"js-base64": "^3.7.5",
"nanoid": "^3",
diff --git a/packages/liveblocks-zenrouter/README.md b/packages/liveblocks-zenrouter/README.md
index d37c46c7bae..3b2923e60da 100644
--- a/packages/liveblocks-zenrouter/README.md
+++ b/packages/liveblocks-zenrouter/README.md
@@ -1,7 +1,28 @@
-
-
-Zen Router is an opinionated router, with batteries included and encouraging
-patterns that remain maintable over time as your application grows.
+
+
+# `@liveblocks/zenrouter`
+
+
+
+Zen Router is an opinionated API router with batteries included, encouraging
+patterns that remain maintainable as your application grows.
## Installation
@@ -102,3 +123,10 @@ Maintainability:
- Default error handling can be configured on a per-status code basis (used when
handlers throw a (custom) HttpError), individual requests can always bypass
this by throwing a custom Response.
+
+## License
+
+Licensed under the Apache License 2.0, Copyright © 2021-present
+[Liveblocks](https://liveblocks.io).
+
+See [LICENSE](../../licenses/LICENSE-APACHE-2.0) for more information.
diff --git a/packages/liveblocks-zenrouter/assets/zen-router.webp b/packages/liveblocks-zenrouter/assets/zen-router.webp
deleted file mode 100644
index 1816d38800a..00000000000
Binary files a/packages/liveblocks-zenrouter/assets/zen-router.webp and /dev/null differ
diff --git a/packages/liveblocks-zenrouter/package.json b/packages/liveblocks-zenrouter/package.json
index e679e61dc5a..86090c677dd 100644
--- a/packages/liveblocks-zenrouter/package.json
+++ b/packages/liveblocks-zenrouter/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/zenrouter",
- "version": "1.0.11",
+ "version": "1.0.12",
"description": "An opinionated router library for building APIs following best practices.",
"type": "module",
"main": "./dist/index.js",
@@ -38,12 +38,10 @@
"license": "Apache-2.0",
"devDependencies": {
"@liveblocks/eslint-config": "*",
+ "decoders": "^2.8.0",
"hotscript": "^1.0.13",
- "nanoid": "^3"
- },
- "peerDependencies": {
- "@opentelemetry/api": "^1.9.0",
- "decoders": "^2.8.0-1"
+ "nanoid": "^3",
+ "zod": "^4.1.8"
},
"repository": {
"type": "git",
diff --git a/packages/liveblocks-zenrouter/src/Router.ts b/packages/liveblocks-zenrouter/src/Router.ts
index e05c0c73254..ca078f780c5 100644
--- a/packages/liveblocks-zenrouter/src/Router.ts
+++ b/packages/liveblocks-zenrouter/src/Router.ts
@@ -2,18 +2,17 @@
// TODO: Make this a local definition?
import type { Json, JsonObject } from "@liveblocks/core";
-import { context, trace } from "@opentelemetry/api";
-import type { Decoder } from "decoders";
-import { formatShort } from "decoders";
import type {
ExtractParams,
HttpVerb,
- MapDecoderTypes,
+ MapSchemaOutput,
Pattern,
RouteMatcher,
} from "~/lib/matchers.js";
import { routeMatcher, sortHttpVerbsInPlace } from "~/lib/matchers.js";
+import type { OtelConfig } from "~/lib/otel.js";
+import type { StandardSchemaV1 } from "~/lib/standard-schema.js";
import { mapv, raise } from "~/lib/utils.js";
import type { HttpError } from "~/responses/index.js";
import { abort, json, ValidationError } from "~/responses/index.js";
@@ -104,11 +103,11 @@ type RouteTuple
+ 
+ 
+ 
+