zenstack 0.1.42 → 1.0.0

package/samples/todo/components/AuthGuard.tsx

@@ -0,0 +1,17 @@
+import { signIn, useSession } from 'next-auth/react';
+
+type Props = {
+    children: JSX.Element | JSX.Element[];
+};
+
+export default function AuthGuard({ children }: Props) {
+    const { status } = useSession();
+    if (status === 'loading') {
+        return <p>Loading...</p>;
+    } else if (status === 'unauthenticated') {
+        signIn();
+        return <></>;
+    } else {
+        return <>{children}</>;
+    }
+}

package/samples/todo/components/Avatar.tsx

@@ -0,0 +1,22 @@
+import { UserIcon } from '@heroicons/react/24/outline';
+import { User } from 'next-auth';
+import Image from 'next/image';
+
+type Props = {
+    user: User;
+    size?: number;
+};
+
+export default function Avatar({ user, size }: Props) {
+    return (
+        <div className="tooltip" data-tip={user.name || user.email}>
+            <Image
+                src={user.image || '/avatar.jpg'}
+                alt="avatar"
+                width={size || 32}
+                height={size || 32}
+                className="rounded-full"
+            />
+        </div>
+    );
+}

package/samples/todo/components/BreadCrumb.tsx

@@ -0,0 +1,44 @@
+import { useList } from '@zenstackhq/runtime/hooks';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useCurrentSpace } from '@lib/context';
+
+export default function BreadCrumb() {
+    const router = useRouter();
+    const space = useCurrentSpace();
+    const { get: getList } = useList();
+
+    const parts = router.asPath.split('/').filter((p) => p);
+
+    const [base, slug, listId] = parts;
+    if (base !== 'space') {
+        return <></>;
+    }
+
+    const items: Array<{ text: string; link: string }> = [];
+
+    items.push({ text: 'Home', link: '/' });
+    items.push({ text: space?.name || '', link: `/space/${slug}` });
+
+    if (listId) {
+        const { data } = getList(listId);
+        items.push({
+            text: data?.title || '',
+            link: `/space/${slug}/${listId}`,
+        });
+    }
+
+    return (
+        <div className="text-sm text-gray-600 breadcrumbs">
+            <ul>
+                {items.map((item, i) => (
+                    <li key={i}>
+                        <Link href={item.link}>
+                            <a>{item.text}</a>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

package/samples/todo/components/ManageMembers.tsx

@@ -0,0 +1,134 @@
+import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useCurrentUser } from '@lib/context';
+import { ServerErrorCode } from '@zenstackhq/internal';
+import { HooksError, useSpaceUser } from '@zenstackhq/runtime/hooks';
+import { Space, SpaceUserRole } from '@zenstackhq/runtime/types';
+import { ChangeEvent, KeyboardEvent, useState } from 'react';
+import { toast } from 'react-toastify';
+import Avatar from './Avatar';
+
+type Props = {
+    space: Space;
+};
+
+export default function ManageMembers({ space }: Props) {
+    const [email, setEmail] = useState('');
+    const [role, setRole] = useState<SpaceUserRole>(SpaceUserRole.USER);
+    const user = useCurrentUser();
+
+    const { find, create: addMember, del: delMember } = useSpaceUser();
+    const { data: members } = find({
+        where: {
+            spaceId: space.id,
+        },
+        include: {
+            user: true,
+        },
+    });
+
+    const inviteUser = async () => {
+        try {
+            const r = await addMember({
+                data: {
+                    user: {
+                        connect: {
+                            email,
+                        },
+                    },
+                    space: {
+                        connect: {
+                            id: space.id,
+                        },
+                    },
+                    role,
+                },
+            });
+            console.log('SpaceUser created:', r);
+        } catch (err: any) {
+            console.error(JSON.stringify(err));
+            if (err.info?.code) {
+                const { info } = err as HooksError;
+                if (info.code === ServerErrorCode.UNIQUE_CONSTRAINT_VIOLATION) {
+                    toast.error('User is already a member of the space');
+                } else if (
+                    info.code === ServerErrorCode.REFERENCE_CONSTRAINT_VIOLATION
+                ) {
+                    toast.error('User is not found for this email');
+                }
+            } else {
+                toast.error(`Error occurred: ${err}`);
+            }
+        }
+    };
+
+    const removeMember = async (id: string) => {
+        if (confirm(`Are you sure to remove this member from space?`)) {
+            await delMember(id);
+        }
+    };
+
+    return (
+        <div>
+            <div className="flex flex-wrap gap-2 items-center mb-8 w-full">
+                <input
+                    type="text"
+                    placeholder="Type user email and enter to invite"
+                    className="input input-sm input-bordered flex-grow mr-2"
+                    value={email}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        setEmail(e.currentTarget.value);
+                    }}
+                    onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => {
+                        if (e.key === 'Enter') {
+                            inviteUser();
+                        }
+                    }}
+                />
+
+                <select
+                    className="select select-sm mr-2"
+                    value={role}
+                    onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+                        setRole(e.currentTarget.value as SpaceUserRole);
+                    }}
+                >
+                    <option value={SpaceUserRole.USER}>USER</option>
+                    <option value={SpaceUserRole.ADMIN}>ADMIN</option>
+                </select>
+
+                <button>
+                    <PlusIcon className="w-6 h-6 text-gray-500" />
+                </button>
+            </div>
+
+            <ul className="space-y-2">
+                {members?.map((member) => (
+                    <li
+                        key={member.id}
+                        className="flex flex-wrap w-full justify-between"
+                    >
+                        <div className="flex items-center">
+                            <div className="hidden md:block mr-2">
+                                <Avatar user={member.user} size={32} />
+                            </div>
+                            <p className="w-36 md:w-48 line-clamp-1 mr-2">
+                                {member.user.name || member.user.email}
+                            </p>
+                            <p>{member.role}</p>
+                        </div>
+                        <div className="flex items-center">
+                            {user?.id !== member.user.id && (
+                                <TrashIcon
+                                    className="w-4 h-4 text-gray-500"
+                                    onClick={() => {
+                                        removeMember(member.id);
+                                    }}
+                                />
+                            )}
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

package/samples/todo/components/NavBar.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import Avatar from './Avatar';
+import { signOut } from 'next-auth/react';
+import Link from 'next/link';
+import { Space } from '@zenstackhq/runtime/types';
+import { User } from 'next-auth';
+
+type Props = {
+    space: Space | undefined;
+    user: User | undefined;
+};
+
+export default function NavBar({ user, space }: Props) {
+    return (
+        <div className="navbar bg-base-100 px-8 py-2 border-b">
+            <div className="flex-1">
+                <Link href="/">
+                    <a className="flex items-center">
+                        <Image
+                            src="/logo.png"
+                            alt="Logo"
+                            width={32}
+                            height={32}
+                        />
+                        <div className="text-xl font-semibold ml-2 text-slate-700 hidden md:inline-block">
+                            {space?.name || 'Welcome Todo App'}
+                        </div>
+                        <p className="text-xs ml-2 text-gray-500 self-end">
+                            Powered by ZenStack
+                        </p>
+                    </a>
+                </Link>
+            </div>
+            <div className="flex-none">
+                <div className="dropdown dropdown-end">
+                    <label
+                        tabIndex={0}
+                        className="btn btn-ghost btn-circle avatar"
+                    >
+                        {user && <Avatar user={user!} />}
+                    </label>
+                    <ul
+                        tabIndex={0}
+                        className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
+                    >
+                        <li className="border-b border-gray-200">
+                            {user && <div>{user.name || user.email}</div>}
+                        </li>
+                        <li>
+                            <a onClick={() => signOut()}>Logout</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}

package/samples/todo/components/SpaceMembers.tsx

@@ -0,0 +1,76 @@
+import { useSpaceUser } from '@zenstackhq/runtime/hooks';
+import { useCurrentSpace } from '@lib/context';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import Avatar from './Avatar';
+import ManageMembers from './ManageMembers';
+import { Space } from '@zenstackhq/runtime/types';
+
+function ManagementDialog(space?: Space) {
+    if (!space) return undefined;
+    return (
+        <>
+            <label htmlFor="management-modal" className="modal-button">
+                <PlusIcon className="w-6 h-6 text-gray-500 cursor-pointer mr-1" />
+            </label>
+
+            <input
+                type="checkbox"
+                id="management-modal"
+                className="modal-toggle"
+            />
+            <div className="modal">
+                <div className="modal-box">
+                    <h3 className="font-bold text-base md:text-lg">
+                        Manage Members of {space.name}
+                    </h3>
+
+                    <div className="p-4 mt-4">
+                        <ManageMembers space={space} />
+                    </div>
+
+                    <div className="modal-action">
+                        <label
+                            htmlFor="management-modal"
+                            className="btn btn-outline"
+                        >
+                            Close
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default function SpaceMembers() {
+    const space = useCurrentSpace();
+
+    const { find: findMembers } = useSpaceUser();
+    const { data: members } = findMembers({
+        where: {
+            spaceId: space?.id,
+        },
+        include: {
+            user: true,
+        },
+        orderBy: {
+            role: 'desc',
+        },
+    });
+
+    return (
+        <div className="flex items-center">
+            {ManagementDialog(space)}
+            {members && (
+                <label
+                    className="mr-1 modal-button cursor-pointer"
+                    htmlFor="management-modal"
+                >
+                    {members?.map((member) => (
+                        <Avatar key={member.id} user={member.user} size={24} />
+                    ))}
+                </label>
+            )}
+        </div>
+    );
+}

package/samples/todo/components/Spaces.tsx

@@ -0,0 +1,28 @@
+import { useSpace } from '@zenstackhq/runtime/hooks';
+import Link from 'next/link';
+
+export default function Spaces() {
+    const { find } = useSpace();
+    const spaces = find();
+
+    return (
+        <ul className="flex flex-wrap gap-4">
+            {spaces.data?.map((space) => (
+                <li
+                    className="card w-80 h-32 shadow-xl text-gray-600 cursor-pointer hover:bg-gray-50 border"
+                    key={space.id}
+                >
+                    <Link href={`/space/${space.slug}`}>
+                        <a>
+                            <div className="card-body" title={space.name}>
+                                <h2 className="card-title line-clamp-1">
+                                    {space.name}
+                                </h2>
+                            </div>
+                        </a>
+                    </Link>
+                </li>
+            ))}
+        </ul>
+    );
+}

package/samples/todo/components/TimeInfo.tsx

@@ -0,0 +1,17 @@
+import moment from 'moment';
+
+type Props = {
+    value: { createdAt: Date; updatedAt: Date; completedAt?: Date | null };
+};
+
+export default function TimeInfo({ value }: Props) {
+    return (
+        <p className="text-sm text-gray-500">
+            {value.completedAt
+                ? `Completed ${moment(value.completedAt).fromNow()}`
+                : value.createdAt === value.updatedAt
+                ? `Created ${moment(value.createdAt).fromNow()}`
+                : `Updated ${moment(value.updatedAt).fromNow()}`}
+        </p>
+    );
+}

package/samples/todo/components/Todo.tsx

@@ -0,0 +1,72 @@
+import { TrashIcon } from '@heroicons/react/24/outline';
+import { useTodo } from '@zenstackhq/runtime/hooks';
+import { Todo, User } from '@zenstackhq/runtime/types';
+import { ChangeEvent, useEffect, useState } from 'react';
+import Avatar from './Avatar';
+import TimeInfo from './TimeInfo';
+
+type Props = {
+    value: Todo & { owner: User };
+    updated?: (value: Todo) => any;
+    deleted?: (value: Todo) => any;
+};
+
+export default function Component({ value, updated, deleted }: Props) {
+    const [completed, setCompleted] = useState(!!value.completedAt);
+    const { update, del } = useTodo();
+
+    useEffect(() => {
+        if (!!value.completedAt !== completed) {
+            update(value.id, {
+                data: { completedAt: completed ? new Date() : null },
+            }).then((newValue) => {
+                if (updated) {
+                    updated(newValue);
+                }
+            });
+        }
+    });
+
+    const deleteTodo = async () => {
+        await del(value.id);
+        if (deleted) {
+            deleted(value);
+        }
+    };
+
+    return (
+        <div className="border rounded-lg px-8 py-4 shadow-lg flex flex-col items-center w-full lg:w-[480px]">
+            <div className="flex justify-between w-full mb-4">
+                <h3
+                    className={`text-xl line-clamp-1 ${
+                        value.completedAt
+                            ? 'line-through text-gray-400 italic'
+                            : 'text-gray-700'
+                    }`}
+                >
+                    {value.title}
+                </h3>
+                <div className="flex">
+                    <input
+                        type="checkbox"
+                        className="checkbox mr-2"
+                        checked={completed}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setCompleted(e.currentTarget.checked)
+                        }
+                    />
+                    <TrashIcon
+                        className="w-6 h-6 text-gray-500 cursor-pointer"
+                        onClick={() => {
+                            deleteTodo();
+                        }}
+                    />
+                </div>
+            </div>
+            <div className="flex justify-end w-full space-x-2">
+                <TimeInfo value={value} />
+                <Avatar user={value.owner} size={18} />
+            </div>
+        </div>
+    );
+}

package/samples/todo/components/TodoList.tsx

@@ -0,0 +1,77 @@
+import Image from 'next/image';
+import { List } from '@zenstackhq/runtime/types';
+import { customAlphabet } from 'nanoid';
+import { LockClosedIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { User } from 'next-auth';
+import Avatar from './Avatar';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useList } from '@zenstackhq/runtime/hooks';
+import TimeInfo from './TimeInfo';
+
+type Props = {
+    value: List & { owner: User };
+    deleted?: (value: List) => void;
+};
+
+export default function TodoList({ value, deleted }: Props) {
+    const router = useRouter();
+
+    const { del } = useList();
+
+    const deleteList = async () => {
+        if (confirm('Are you sure to delete this list?')) {
+            await del(value.id);
+            if (deleted) {
+                deleted(value);
+            }
+        }
+    };
+
+    return (
+        <div className="card w-80 bg-base-100 shadow-xl cursor-pointer hover:bg-gray-50">
+            <Link href={`${router.asPath}/${value.id}`}>
+                <a>
+                    <figure>
+                        <Image
+                            src={`https://picsum.photos/300/200?r=${customAlphabet(
+                                '0123456789'
+                            )(4)}`}
+                            width={320}
+                            height={200}
+                            alt="Cover"
+                        />
+                    </figure>
+                </a>
+            </Link>
+            <div className="card-body">
+                <Link href={`${router.asPath}/${value.id}`}>
+                    <a>
+                        <h2 className="card-title line-clamp-1">
+                            {value.title || 'Missing Title'}
+                        </h2>
+                    </a>
+                </Link>
+                <div className="card-actions flex w-full justify-between">
+                    <div>
+                        <TimeInfo value={value} />
+                    </div>
+                    <div className="flex space-x-2">
+                        <Avatar user={value.owner} size={18} />
+                        {value.private && (
+                            <div className="tooltip" data-tip="Private">
+                                <LockClosedIcon className="w-4 h-4 text-gray-500" />
+                            </div>
+                        )}
+                        <TrashIcon
+                            className="w-4 h-4 text-gray-500 cursor-pointer"
+                            onClick={() => {
+                                deleteList();
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/samples/todo/lib/context.ts

@@ -0,0 +1,31 @@
+import { useSpace } from '@zenstackhq/runtime/hooks';
+import { Space } from '@zenstackhq/runtime/types';
+import { User } from 'next-auth';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { createContext } from 'react';
+
+export const UserContext = createContext<User | undefined>(undefined);
+
+export function useCurrentUser() {
+    const { data: session } = useSession();
+    return session?.user;
+}
+
+export const SpaceContext = createContext<Space | undefined>(undefined);
+
+export function useCurrentSpace() {
+    const router = useRouter();
+    const { find } = useSpace();
+    const spaces = find({
+        where: {
+            slug: router.query.slug as string,
+        },
+    });
+
+    if (!router.query.slug) {
+        return undefined;
+    }
+
+    return spaces.data?.[0];
+}

package/samples/todo/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+    swcMinify: true,
+    images: {
+        domains: ['lh3.googleusercontent.com', 'picsum.photos'],
+    },
+};
+
+module.exports = nextConfig;