zenstack 0.1.41 → 1.0.0

package/samples/todo/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "todo",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "db-gen": "prisma generate --schema zenstack/schema.prisma",
+        "db-push": "prisma db push --schema zenstack/schema.prisma",
+        "db-migrate": "prisma migrate dev --schema zenstack/schema.prisma",
+        "db-deploy": "prisma migrate deploy --schema zenstack/schema.prisma",
+        "db-reset": "prisma migrate reset --schema zenstack/schema.prisma",
+        "generate": "zenstack generate ./zenstack/schema.zmodel",
+        "vercel-build": "zenstack generate ./zenstack/schema.zmodel && npm run build && npm run db-deploy"
+    },
+    "dependencies": {
+        "@heroicons/react": "^2.0.12",
+        "@prisma/client": "^4.4.0",
+        "@zenstackhq/runtime": "latest",
+        "daisyui": "^2.31.0",
+        "moment": "^2.29.4",
+        "nanoid": "^4.0.0",
+        "next": "12.3.1",
+        "next-auth": "^4.10.3",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-toastify": "^9.0.8",
+        "swr": "^1.3.0"
+    },
+    "devDependencies": {
+        "@tailwindcss/line-clamp": "^0.4.2",
+        "@types/node": "^14.17.3",
+        "@types/react": "18.0.21",
+        "@types/react-dom": "18.0.6",
+        "autoprefixer": "^10.4.12",
+        "eslint": "^7.19.0",
+        "eslint-config-next": "12.3.1",
+        "postcss": "^8.4.16",
+        "tailwindcss": "^3.1.8",
+        "typescript": "^4.6.2",
+        "zenstack": "latest"
+    }
+}

package/samples/todo/pages/_app.tsx

@@ -0,0 +1,50 @@
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
+import { SessionProvider } from 'next-auth/react';
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from 'react-toastify';
+import NavBar from 'components/NavBar';
+import {
+    SpaceContext,
+    useCurrentSpace,
+    useCurrentUser,
+    UserContext,
+} from '@lib/context';
+import AuthGuard from 'components/AuthGuard';
+
+function AppContent(props: { children: JSX.Element | JSX.Element[] }) {
+    const user = useCurrentUser();
+    const space = useCurrentSpace();
+
+    return (
+        <AuthGuard>
+            <UserContext.Provider value={user}>
+                <SpaceContext.Provider value={space}>
+                    <div className="h-screen flex flex-col">
+                        <NavBar user={user} space={space} />
+                        {props.children}
+                    </div>
+                </SpaceContext.Provider>
+            </UserContext.Provider>
+        </AuthGuard>
+    );
+}
+
+function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
+    return (
+        <SessionProvider session={session}>
+            <AppContent>
+                <div className="flex-grow h-100">
+                    <Component {...pageProps} />
+                    <ToastContainer
+                        position="top-center"
+                        autoClose={2000}
+                        hideProgressBar={true}
+                    />
+                </div>
+            </AppContent>
+        </SessionProvider>
+    );
+}
+
+export default MyApp;

package/samples/todo/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,83 @@
+import NextAuth, { NextAuthOptions, User } from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+import {
+    authorize,
+    NextAuthAdapter as Adapter,
+} from '@zenstackhq/runtime/auth';
+import service from '@zenstackhq/runtime';
+import { nanoid } from 'nanoid';
+import { SpaceUserRole } from '@zenstackhq/runtime/types';
+
+export const authOptions: NextAuthOptions = {
+    // Configure one or more authentication providers
+
+    adapter: Adapter(service),
+
+    session: {
+        strategy: 'jwt',
+    },
+
+    providers: [
+        CredentialsProvider({
+            credentials: {
+                email: {
+                    label: 'Email Address',
+                    type: 'email',
+                    placeholder: 'john.doe@example.com',
+                },
+                password: {
+                    label: 'Password',
+                    type: 'password',
+                    placeholder: 'Your super secure password',
+                },
+            },
+            authorize: authorize(service),
+        }),
+    ],
+
+    callbacks: {
+        async session({ session, token }) {
+            return {
+                ...session,
+                user: {
+                    ...session.user,
+                    id: token.sub!,
+                },
+            };
+        },
+    },
+
+    events: {
+        async signIn({ user }: { user: User }) {
+            const spaceCount = await service.db.spaceUser.count({
+                where: {
+                    userId: user.id,
+                },
+            });
+            if (spaceCount > 0) {
+                return;
+            }
+
+            console.log(
+                `User ${user.id} doesn't belong to any space. Creating one.`
+            );
+            const space = await service.db.space.create({
+                data: {
+                    name: `${user.name || user.email}'s space`,
+                    slug: nanoid(8),
+                    members: {
+                        create: [
+                            {
+                                userId: user.id,
+                                role: SpaceUserRole.ADMIN,
+                            },
+                        ],
+                    },
+                },
+            });
+            console.log(`Space created:`, space);
+        },
+    },
+};
+
+export default NextAuth(authOptions);

package/samples/todo/pages/api/zenstack/[...path].ts

@@ -0,0 +1,16 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import {
+    type RequestHandlerOptions,
+    requestHandler,
+} from '@zenstackhq/runtime/server';
+import { authOptions } from '@api/auth/[...nextauth]';
+import { unstable_getServerSession } from 'next-auth';
+import service from '@zenstackhq/runtime';
+
+const options: RequestHandlerOptions = {
+    async getServerUser(req: NextApiRequest, res: NextApiResponse) {
+        const session = await unstable_getServerSession(req, res, authOptions);
+        return session?.user;
+    },
+};
+export default requestHandler(service, options);

package/samples/todo/pages/create-space.tsx

@@ -0,0 +1,114 @@
+import { NextPage } from 'next';
+import { FormEvent, useState } from 'react';
+import { useSpace, type HooksError } from '@zenstackhq/runtime/hooks';
+import { ServerErrorCode } from '@zenstackhq/runtime/server';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
+import { SpaceUserRole } from '@zenstackhq/runtime/types';
+
+const CreateSpace: NextPage = () => {
+    const { data: session } = useSession();
+    const [name, setName] = useState('');
+    const [slug, setSlug] = useState('');
+
+    const { create } = useSpace();
+    const router = useRouter();
+
+    const onSubmit = async (event: FormEvent) => {
+        event.preventDefault();
+        try {
+            const space = await create({
+                data: {
+                    name,
+                    slug,
+                    members: {
+                        create: [
+                            {
+                                userId: session!.user.id,
+                                role: SpaceUserRole.ADMIN,
+                            },
+                        ],
+                    },
+                },
+            });
+            console.log('Space created:', space);
+            toast.success("Space created successfull! You'll be redirected.");
+
+            setTimeout(() => {
+                router.push(`/space/${space.slug}`);
+            }, 2000);
+        } catch (err) {
+            console.error(err);
+            if (
+                (err as HooksError).info?.code ===
+                ServerErrorCode.UNIQUE_CONSTRAINT_VIOLATION
+            ) {
+                toast.error('Space slug alread in use');
+            } else {
+                toast.error(`Error occurred: ${err}`);
+            }
+        }
+    };
+
+    return (
+            <div className="flex items-center justify-center h-full">
+                <form onSubmit={onSubmit}>
+                    <h1 className="text-3xl mb-8">Create a space</h1>
+                    <div className="flex-col space-y-4">
+                        <div>
+                            <label htmlFor="name" className="text-lg">
+                                Space name
+                            </label>
+                            <input
+                                id="name"
+                                type="text"
+                                required
+                                placeholder="Name of your space"
+                                className="input input-bordered w-full max-w-xs mt-2"
+                                onChange={(e: FormEvent<HTMLInputElement>) =>
+                                    setName(e.currentTarget.value)
+                                }
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="slug" className="text-lg">
+                                Space slug
+                            </label>
+                            <input
+                                id="slug"
+                                type="text"
+                                required
+                                placeholder="Slug of your space"
+                                className="input input-bordered w-full max-w-xs mt-2"
+                                onChange={(e: FormEvent<HTMLInputElement>) =>
+                                    setSlug(e.currentTarget.value)
+                                }
+                            />
+                        </div>
+                    </div>
+
+                    <div className="flex space-x-4 mt-6">
+                        <input
+                            type="submit"
+                            disabled={
+                                name.length < 4 ||
+                                name.length > 20 ||
+                                !slug.match(/^[0-9a-zA-Z]{4,16}$/)
+                            }
+                            value="Create"
+                            className="btn btn-primary px-8"
+                        />
+                        <button
+                            className="btn btn-outline"
+                            onClick={() => router.push('/')}
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
+    );
+};
+
+export default CreateSpace;

package/samples/todo/pages/index.tsx

@@ -0,0 +1,32 @@
+import type { NextPage } from 'next';
+import Spaces from 'components/Spaces';
+import Link from 'next/link';
+import { useCurrentUser } from '@lib/context';
+
+const Home: NextPage = () => {
+    const user = useCurrentUser();
+    return (
+        <>
+            {user && (
+                <div className="mt-8 text-center flex flex-col items-center w-full">
+                    <h1 className="text-2xl text-gray-800">
+                        Welcome {user.name || user.email}!
+                    </h1>
+                    <div className="w-full p-8">
+                        <h2 className="text-lg md:text-xl text-left mb-8 text-gray-700">
+                            Choose a space to start, or{' '}
+                            <Link href="/create-space">
+                                <a className="link link-primary">
+                                    create a new one.
+                                </a>
+                            </Link>
+                        </h2>
+                        <Spaces />
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default Home;

package/samples/todo/pages/space/[slug]/[listId]/index.tsx

@@ -0,0 +1,88 @@
+import { useList, useTodo } from '@zenstackhq/runtime/hooks';
+import { useRouter } from 'next/router';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import { ChangeEvent, KeyboardEvent, useState } from 'react';
+import { useCurrentUser } from '@lib/context';
+import TodoComponent from 'components/Todo';
+import BreadCrumb from 'components/BreadCrumb';
+
+export default function TodoList() {
+    const user = useCurrentUser();
+    const router = useRouter();
+    const { get: getList } = useList();
+    const { create: createTodo, find: findTodos } = useTodo();
+    const [title, setTitle] = useState('');
+
+    const { data: list } = getList(router.query.listId as string);
+    const { data: todos, mutate: invalidateTodos } = findTodos({
+        where: {
+            listId: list?.id,
+        },
+        include: {
+            owner: true,
+        },
+        orderBy: {
+            updatedAt: 'desc',
+        },
+    });
+
+    if (!list) {
+        return <p>Loading ...</p>;
+    }
+
+    const _createTodo = async () => {
+        const todo = await createTodo({
+            data: {
+                title,
+                ownerId: user!.id,
+                listId: list!.id,
+            },
+        });
+        console.log(`Todo created: ${todo}`);
+        setTitle('');
+    };
+
+    return (
+        <>
+            <div className="px-8 py-2">
+                <BreadCrumb />
+            </div>
+            <div className="container w-full flex flex-col items-center pt-12">
+                <h1 className="text-2xl font-semibold mb-4">{list?.title}</h1>
+                <div className="flex space-x-2">
+                    <input
+                        type="text"
+                        placeholder="Type a title and press enter"
+                        className="input input-bordered w-72 max-w-xs mt-2"
+                        value={title}
+                        onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => {
+                            if (e.key === 'Enter') {
+                                _createTodo();
+                            }
+                        }}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                            setTitle(e.currentTarget.value);
+                        }}
+                    />
+                    <button onClick={() => _createTodo()}>
+                        <PlusIcon className="w-6 h-6 text-gray-500" />
+                    </button>
+                </div>
+                <ul className="flex flex-col space-y-4 py-8 w-11/12 md:w-auto">
+                    {todos?.map((todo) => (
+                        <TodoComponent
+                            key={todo.id}
+                            value={todo}
+                            updated={() => {
+                                invalidateTodos();
+                            }}
+                            deleted={() => {
+                                invalidateTodos();
+                            }}
+                        />
+                    ))}
+                </ul>
+            </div>
+        </>
+    );
+}

package/samples/todo/pages/space/[slug]/index.tsx

@@ -0,0 +1,169 @@
+import { SpaceContext, UserContext } from '@lib/context';
+import { ChangeEvent, FormEvent, useContext, useState } from 'react';
+import { useList } from '@zenstackhq/runtime/hooks';
+import { toast } from 'react-toastify';
+import TodoList from 'components/TodoList';
+import BreadCrumb from 'components/BreadCrumb';
+import SpaceMembers from 'components/SpaceMembers';
+
+function CreateDialog() {
+    const user = useContext(UserContext);
+    const space = useContext(SpaceContext);
+
+    const [modalOpen, setModalOpen] = useState(false);
+    const [title, setTitle] = useState('');
+    const [_private, setPrivate] = useState(false);
+
+    const { create } = useList();
+
+    const onSubmit = async (event: FormEvent) => {
+        event.preventDefault();
+
+        try {
+            await create({
+                data: {
+                    title,
+                    private: _private,
+                    spaceId: space!.id,
+                    ownerId: user!.id,
+                },
+            });
+        } catch (err) {
+            toast.error(`Failed to create list: ${err}`);
+            return;
+        }
+
+        toast.success('List created successfully!');
+
+        // reset states
+        setTitle('');
+        setPrivate(false);
+
+        // close modal
+        setModalOpen(false);
+    };
+
+    return (
+        <>
+            <input
+                type="checkbox"
+                id="create-list-modal"
+                className="modal-toggle"
+                checked={modalOpen}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                    setModalOpen(e.currentTarget.checked);
+                }}
+            />
+            <div className="modal">
+                <div className="modal-box">
+                    <h3 className="font-bold text-xl mb-8">
+                        Create a Todo list
+                    </h3>
+                    <form onSubmit={onSubmit}>
+                        <div className="flex flex-col space-y-4">
+                            <div className="flex items-center">
+                                <label
+                                    htmlFor="title"
+                                    className="text-lg inline-block w-20"
+                                >
+                                    Title
+                                </label>
+                                <input
+                                    id="title"
+                                    type="text"
+                                    required
+                                    placeholder="Title of your list"
+                                    className="input input-bordered w-full max-w-xs mt-2"
+                                    value={title}
+                                    onChange={(
+                                        e: FormEvent<HTMLInputElement>
+                                    ) => setTitle(e.currentTarget.value)}
+                                />
+                            </div>
+                            <div className="flex items-center">
+                                <label
+                                    htmlFor="private"
+                                    className="text-lg inline-block w-20"
+                                >
+                                    Private
+                                </label>
+                                <input
+                                    id="private"
+                                    type="checkbox"
+                                    className="checkbox"
+                                    onChange={(
+                                        e: FormEvent<HTMLInputElement>
+                                    ) => setPrivate(e.currentTarget.checked)}
+                                />
+                            </div>
+                        </div>
+                        <div className="modal-action">
+                            <input
+                                className="btn btn-primary"
+                                type="submit"
+                                value="Create"
+                            />
+                            <label
+                                htmlFor="create-list-modal"
+                                className="btn btn-outline"
+                            >
+                                Cancel
+                            </label>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default function SpaceHome() {
+    const space = useContext(SpaceContext);
+    const { find } = useList();
+
+    const { data: lists, mutate: invalidateLists } = find({
+        where: {
+            space: {
+                id: space?.id,
+            },
+        },
+        include: {
+            owner: true,
+        },
+        orderBy: {
+            updatedAt: 'desc',
+        },
+    });
+
+    return (
+        <>
+            <div className="px-8 py-2">
+                <BreadCrumb />
+            </div>
+            <div className="p-8">
+                <div className="w-full flex flex-col md:flex-row mb-8 space-y-4 md:space-y-0 md:space-x-4">
+                    <label
+                        htmlFor="create-list-modal"
+                        className="btn btn-primary btn-wide modal-button"
+                    >
+                        Create a list
+                    </label>
+                    <SpaceMembers />
+                </div>
+
+                <ul className="flex flex-wrap gap-6">
+                    {lists?.map((list) => (
+                        <li key={list.id}>
+                            <TodoList
+                                value={list}
+                                deleted={() => invalidateLists()}
+                            />
+                        </li>
+                    ))}
+                </ul>
+
+                <CreateDialog />
+            </div>
+        </>
+    );
+}

package/samples/todo/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/samples/todo/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

package/samples/todo/styles/globals.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    @apply text-gray-800;
+}

package/samples/todo/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        './pages/**/*.{js,ts,jsx,tsx}',
+        './components/**/*.{js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [require('daisyui'), require('@tailwindcss/line-clamp')],
+};

package/samples/todo/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "baseUrl": ".",
+        "paths": {
+            "@api/*": ["pages/api/*"],
+            "@lib/*": ["lib/*"],
+            "@components/*": ["lib/components/*"],
+            "@components": ["lib/components/index"],
+            "@zenstack/*": [".zenstack/*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
+}