zenstack 1.0.0 → 1.0.1

package/samples/todo/components/AuthGuard.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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