add sign in

apps/playground/next.config.js

@@ -12,7 +12,6 @@ const config = {
   transpilePackages: [
     "@swy/liveblocks",
     "@swy/notion",
-    "@swy/prisma",
     "@swy/ui",
     "@swy/validators",
     "lucide-react",
@@ -43,6 +42,14 @@ const config = {
         protocol: "https",
         hostname: "www.notion.so",
       },
+      {
+        protocol: "https",
+        hostname: "upload.wikimedia.org",
+      },
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
     ],
   },
 };

apps/playground/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "pnpm with-env next dev -p 3001",
+    "dev": "pnpm with-env next dev -p 3002",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint",
     "start": "pnpm with-env next start",

apps/playground/src/app/(marketing)/_components/heading.tsx

@@ -16,7 +16,7 @@ const Heading = () => {
         Steeeee WorXpace is the connected workspace where <br />
         better, faster work happens.
       </h3>
-      <Link href="/select-role">
+      <Link href="/sign-in">
         <Button className="mt-4">
           Get Started <ArrowRight className="ml-2 size-4" />
         </Button>

apps/playground/src/app/(platform)/(auth)/sign-in/_components/sign-in-button.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Image from "next/image";
+
+import { Button } from "@swy/ui/shadcn";
+
+interface SignInButtonProps {
+  name: string;
+  avatarUrl: string;
+}
+
+export const SignInButton: React.FC<SignInButtonProps> = ({
+  name,
+  avatarUrl,
+}) => {
+  return (
+    <Button variant="hint" className="flex h-fit w-full justify-between">
+      <div className="flex w-full items-center gap-2.5">
+        <div className="relative flex-shrink-0">
+          <Image
+            src={avatarUrl}
+            alt="I"
+            className="size-7 rounded-full border border-border"
+          />
+        </div>
+        <div className="flex-1 text-left">
+          <div className="truncate text-sm text-primary dark:text-primary/80">
+            {name}
+          </div>
+          <div className="truncate text-xs text-secondary dark:text-secondary-dark">
+            Fake user
+          </div>
+        </div>
+      </div>
+    </Button>
+  );
+};

apps/playground/src/app/(platform)/(auth)/sign-in/page.tsx

@@ -0,0 +1,25 @@
+import { IconBlock } from "@swy/ui/shared";
+
+import { accounts } from "~/db/accounts";
+import { SignInButton } from "./_components/sign-in-button";
+
+export default function Page() {
+  return (
+    <div className="flex flex-col items-center gap-12 p-10">
+      <div className="flex w-[320px] flex-col items-center gap-4">
+        <IconBlock
+          icon={{ type: "lucide", name: "user-round-check", color: "#448361" }}
+          size="lg"
+        />
+        <h1 className="flex w-full flex-col text-center text-xl font-medium">
+          Sign in with ...
+        </h1>
+        <div className="flex w-[240px] flex-col items-center gap-3">
+          {Object.values(accounts).map(({ name, avatarUrl }) => (
+            <SignInButton name={name} avatarUrl={avatarUrl} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/playground/src/app/(platform)/layout.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import React, { useEffect } from "react";
+
+import { mockDB } from "~/db";
+import { useMockDB } from "~/hooks";
+
+export default function Layout({ children }: React.PropsWithChildren) {
+  const { update } = useMockDB();
+
+  useEffect(() => {
+    update(mockDB);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex h-screen items-center justify-center">{children}</div>
+  );
+}

apps/playground/src/app/layout.tsx

@@ -12,7 +12,7 @@ const inter = Inter({ subsets: ["latin", "latin-ext"] });
 export const metadata: Metadata = {
   metadataBase: new URL(
     env.VERCEL_ENV === "production"
-      ? "https://worxpace.steeeee0223.vercel.app"
+      ? "https://playground.steeeee0223.vercel.app"
       : `http://localhost:${env.PORT}`,
   ),
   title: "Steeeee WorXpace",

apps/playground/src/db/accounts.ts

@@ -1,40 +1,47 @@
 import { AccountModel } from "./types";
 
+export enum _USER {
+  U1 = "a97f4e50-0b72-44f4-a95a-aba319534af5",
+  U2 = "22bd2a9e-bbee-4f3f-9c78-6a430a2c29b2",
+  U3 = "83e2f249-f02c-4971-b8fc-cda5cf71dd77",
+}
+
 export const accounts: Record<string, AccountModel> = {
-  "45d7e133-d354-47c2-881b-441b7f95a327": {
-    id: "45d7e133-d354-47c2-881b-441b7f95a327",
-    name: "John Wick",
-    clerkId: "user_1",
-    email: "john-wick@example.com",
-    avatarUrl: "",
-    preferredName: "John Wick",
-    updatedAt: Date.UTC(2024, 1, 1),
-  },
-  "a97f4e50-0b72-44f4-a95a-aba319534af5": {
-    id: "a97f4e50-0b72-44f4-a95a-aba319534af5",
+  [_USER.U1]: {
+    id: _USER.U1,
     name: "Steve Yu",
     clerkId: "user_2",
     email: "steve-yu@example.com",
-    avatarUrl: "",
+    avatarUrl:
+      "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Go_gopher_favicon.svg/1200px-Go_gopher_favicon.svg.png",
     preferredName: "Steve",
     updatedAt: Date.UTC(2024, 1, 1),
   },
-  "22bd2a9e-bbee-4f3f-9c78-6a430a2c29b2": {
-    id: "22bd2a9e-bbee-4f3f-9c78-6a430a2c29b2",
+  [_USER.U2]: {
+    id: _USER.U2,
     name: "Chien Pong",
     clerkId: "user_3",
     email: "pong123@example.com",
-    avatarUrl: "",
+    avatarUrl: "https://avatars.githubusercontent.com/u/91364382",
     preferredName: "Pong",
     updatedAt: Date.UTC(2024, 1, 1),
   },
-  "83e2f249-f02c-4971-b8fc-cda5cf71dd77": {
-    id: "83e2f249-f02c-4971-b8fc-cda5cf71dd77",
+  [_USER.U3]: {
+    id: _USER.U3,
     name: "Chia Ming",
     clerkId: "user_4",
     email: "chiaming@example.com",
-    avatarUrl: "",
+    avatarUrl: "https://avatars.githubusercontent.com/u/15240773",
     preferredName: "Mark",
     updatedAt: Date.UTC(2024, 1, 1),
   },
+  // "45d7e133-d354-47c2-881b-441b7f95a327": {
+  //   id: "45d7e133-d354-47c2-881b-441b7f95a327",
+  //   name: "John Wick",
+  //   clerkId: "user_1",
+  //   email: "john-wick@example.com",
+  //   avatarUrl: "",
+  //   preferredName: "John Wick",
+  //   updatedAt: Date.UTC(2024, 1, 1),
+  // },
 };

apps/playground/src/db/index.ts

@@ -1,19 +1,16 @@
-/** Mock data */
-export * from "./accounts";
-/** Types */
-export type * from "./types";
+import { accounts } from "./accounts";
+import { memberships } from "./memberships";
+import type { AccountModel, MembershipModel, WorkspaceModel } from "./types";
+import { workspaces } from "./workspaces";
 
-/**
+export interface MockDB {
+  accounts: Record<string, AccountModel>;
+  workspaces: Record<string, WorkspaceModel>;
+  memberships: MembershipModel[];
+}
 
-ff86a28d-88a2-4bfa-8526-626724a52aff
-
-fd5f3c3f-e2d9-4e8b-a336-061bcce54681
-
-e478ea0e-d20f-42e9-a2b3-38401bd72b71
-
-35233f19-b5f8-46a8-a6cc-b73e6ef686e8
-
-69161f49-d6d0-4ad8-b4a7-c44bc85737f0
-
-85e02808-25d5-44ab-adc4-b6d4867e37d3
- */
+export const mockDB: MockDB = {
+  accounts,
+  workspaces,
+  memberships,
+};

apps/playground/src/db/memberships.ts

@@ -0,0 +1,71 @@
+import { Role } from "@swy/validators";
+
+import { _USER } from "./accounts";
+import type { MembershipModel } from "./types";
+import { _WORKSPACE } from "./workspaces";
+
+export const memberships: MembershipModel[] = [
+  {
+    id: "mem-1",
+    role: Role.OWNER,
+    accountId: _USER.U1,
+    workspaceId: _WORKSPACE.W1,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-2",
+    role: Role.MEMBER,
+    accountId: _USER.U2,
+    workspaceId: _WORKSPACE.W1,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-3",
+    role: Role.GUEST,
+    accountId: _USER.U3,
+    workspaceId: _WORKSPACE.W1,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-4",
+    role: Role.OWNER,
+    accountId: _USER.U3,
+    workspaceId: _WORKSPACE.W2,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-5",
+    role: Role.MEMBER,
+    accountId: _USER.U1,
+    workspaceId: _WORKSPACE.W2,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-6",
+    role: Role.OWNER,
+    accountId: _USER.U1,
+    workspaceId: _WORKSPACE.W3,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-7",
+    role: Role.OWNER,
+    accountId: _USER.U2,
+    workspaceId: _WORKSPACE.W4,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-8",
+    role: Role.OWNER,
+    accountId: _USER.U2,
+    workspaceId: _WORKSPACE.W5,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+  {
+    id: "mem-9",
+    role: Role.OWNER,
+    accountId: _USER.U3,
+    workspaceId: _WORKSPACE.W5,
+    joinedAt: Date.UTC(2024, 1, 1),
+  },
+];

apps/playground/src/db/types.ts

@@ -13,20 +13,20 @@ export interface AccountModel {
 }
 
 export interface WorkspaceModel {
-  id: string; // default uuid
+  id: string; // (uuid)
   name: string;
-  icon: IconInfo;
+  icon?: IconInfo | null;
   domain: string;
   plan: Plan;
-  inviteToken: string; // default uuid
-  createdBy: string; // account.id
+  inviteToken: string; // (uuid) default: same as `id`
+  createdBy: string; // (uuid) account.id
   lastEditedAt: number; // ts in 'ms'
 }
 
 export interface MembershipModel {
-  id: string; // default uuid
+  id: string; // (uuid)
   role: Role;
-  accountId: string; // account.id
-  workspaceId: string; // workspace.id
+  accountId: string; // (uuid) account.id
+  workspaceId: string; // (uuid) workspace.id
   joinedAt: number; // ts in 'ms'
 }