@@ -101,8 +104,8 @@ export function Header() {
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
>
- Join Us
- FAQs
+ Join Us
+ FAQs
diff --git a/website/src/components/Header/NavLinks.stories.jsx b/website/src/components/Header/NavLinks.stories.jsx
new file mode 100644
index 00000000..f7fafae2
--- /dev/null
+++ b/website/src/components/Header/NavLinks.stories.jsx
@@ -0,0 +1,14 @@
+import { NavLinks } from "./NavLinks";
+
+export default {
+ title: "Header/NavLinks",
+ component: NavLinks,
+};
+
+const Template = (args) => (
+
+
+
+);
+
+export const Default = Template.bind({});
diff --git a/website/src/components/NavLinks.tsx b/website/src/components/Header/NavLinks.tsx
similarity index 90%
rename from website/src/components/NavLinks.tsx
rename to website/src/components/Header/NavLinks.tsx
index c6e4959a..955d92f8 100644
--- a/website/src/components/NavLinks.tsx
+++ b/website/src/components/Header/NavLinks.tsx
@@ -3,13 +3,13 @@ import Link from "next/link";
import { AnimatePresence, motion } from "framer-motion";
export function NavLinks(): JSX.Element {
- let [hoveredIndex, setHoveredIndex] = useState(null);
+ const [hoveredIndex, setHoveredIndex] = useState(null);
return (
<>
{[
- ["Join Us", "#join-us"],
- ["FAQ", "#faq"],
+ ["Join Us", "/#join-us"],
+ ["FAQ", "/#faq"],
].map(([label, href], index) => (
{
+ var { session } = args;
+ return (
+
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" } };
diff --git a/website/src/components/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
similarity index 98%
rename from website/src/components/UserMenu.tsx
rename to website/src/components/Header/UserMenu.tsx
index e3b0d819..3fe4d2da 100644
--- a/website/src/components/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -3,7 +3,7 @@ import { signOut, useSession } from "next-auth/react";
import Image from "next/image";
import { Popover } from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
-import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
+import { FaCog, FaSignOutAlt } from "react-icons/fa";
export function UserMenu() {
const { data: session } = useSession();
diff --git a/website/src/components/Header/index.ts b/website/src/components/Header/index.ts
new file mode 100644
index 00000000..005784d9
--- /dev/null
+++ b/website/src/components/Header/index.ts
@@ -0,0 +1,3 @@
+export { Header } from "./Header";
+export { UserMenu } from "./UserMenu";
+export { NavLinks } from "./NavLinks";
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index 52f8a6ae..6cd08771 100644
--- a/website/src/components/Layout.tsx
+++ b/website/src/components/Layout.tsx
@@ -3,9 +3,9 @@
import type { NextPage } from "next";
import { Footer } from "./Footer";
-import { Header } from "./Header";
+import { Header } from "src/components/Header";
-export type NextPageWithLayout
= NextPage
& {
+export type NextPageWithLayout
= NextPage
& {
getLayout?: (page: React.ReactElement) => React.ReactNode;
};
diff --git a/website/src/components/Loading/Loading.stories.jsx b/website/src/components/Loading/Loading.stories.jsx
new file mode 100644
index 00000000..0f068009
--- /dev/null
+++ b/website/src/components/Loading/Loading.stories.jsx
@@ -0,0 +1,16 @@
+import { LoadingScreen } from "./LoadingScreen";
+
+export default {
+ title: "Example/LoadingScreen",
+ component: LoadingScreen,
+ parameters: {
+ layout: "fullscreen",
+ },
+};
+
+const Template = (args) => ;
+
+export const Default = Template.bind({});
+
+export const WithText = Template.bind({});
+WithText.args = { text: "Loading Text ..." };
diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx
new file mode 100644
index 00000000..57323f8c
--- /dev/null
+++ b/website/src/components/Loading/LoadingScreen.jsx
@@ -0,0 +1,12 @@
+import { Progress } from "@chakra-ui/react";
+
+export const LoadingScreen = ({ text }) => (
+
+);
diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx
new file mode 100644
index 00000000..3f805726
--- /dev/null
+++ b/website/src/components/Sortable/Sortable.tsx
@@ -0,0 +1,48 @@
+import { ReactNode, useEffect, useState } from "react";
+import { SortableItem } from "./SortableItem";
+
+export interface SortableProps {
+ items: ReactNode[];
+ onChange: (newSortedIndices: number[]) => void;
+}
+
+export const Sortable = ({ items, onChange }) => {
+ const [sortOrder, setSortOrder] = useState
([]);
+
+ const update = (newRanking: number[]) => {
+ setSortOrder(newRanking);
+ onChange(newRanking);
+ };
+
+ useEffect(() => {
+ const indices = Array.from({ length: items.length }).map((_, i) => i);
+ setSortOrder(indices);
+ onChange(indices);
+ }, [items, onChange]);
+
+ return (
+
+ {sortOrder.map((rank, i) => (
+ 0}
+ onIncrement={() => {
+ const newRanking = sortOrder.slice();
+ const newIdx = i - 1;
+ [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+ update(newRanking);
+ }}
+ canDecrement={i < sortOrder.length - 1}
+ onDecrement={() => {
+ const newRanking = sortOrder.slice();
+ const newIdx = i + 1;
+ [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+ update(newRanking);
+ }}
+ >
+ {items[rank]}
+
+ ))}
+
+ );
+};
diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx
new file mode 100644
index 00000000..0b7e7ba7
--- /dev/null
+++ b/website/src/components/Sortable/SortableItem.tsx
@@ -0,0 +1,40 @@
+import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
+import { Button } from "@chakra-ui/react";
+import clsx from "clsx";
+
+export interface SortableItemProps {
+ canIncrement: boolean;
+ canDecrement: boolean;
+ onIncrement: () => void;
+ onDecrement: () => void;
+ children: React.ReactNode;
+}
+
+export const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children }: SortableItemProps) => {
+ return (
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+};
+
+interface ArrowButtonProps {
+ active: boolean;
+ onClick: () => void;
+ children: React.ReactNode;
+}
+
+const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => {
+ return (
+
+ );
+};
diff --git a/website/src/components/TaskInfo/TaskInfo.tsx b/website/src/components/TaskInfo/TaskInfo.tsx
new file mode 100644
index 00000000..629d5c1a
--- /dev/null
+++ b/website/src/components/TaskInfo/TaskInfo.tsx
@@ -0,0 +1,10 @@
+export const TaskInfo = ({ id, output }: { id: string; output: any }) => {
+ return (
+
+ Prompt
+ {id}
+ Output
+ {output}
+
+ );
+};
diff --git a/website/src/components/TaskSelection/TaskSelection.tsx b/website/src/components/TaskSelection/TaskSelection.tsx
index e9f4876d..414ad76e 100644
--- a/website/src/components/TaskSelection/TaskSelection.tsx
+++ b/website/src/components/TaskSelection/TaskSelection.tsx
@@ -7,12 +7,12 @@ export const TaskSelection = () => {
return (
-
+ /> */}
{
/>
-
+ /> */}
+
+
);
diff --git a/website/src/lib/prismadb.ts b/website/src/lib/prismadb.ts
index 32fb23d0..85f25fcb 100644
--- a/website/src/lib/prismadb.ts
+++ b/website/src/lib/prismadb.ts
@@ -1,10 +1,10 @@
import { PrismaClient } from "@prisma/client";
-
declare global {
- var prisma;
+ // eslint-disable-next-line no-var
+ var prisma: PrismaClient | undefined;
}
-const client = globalThis.prisma || new PrismaClient();
+const client = new PrismaClient();
if (process.env.NODE_ENV !== "production") {
globalThis.prisma = client;
}
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
index 76fb0b67..2f464fa2 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -1,6 +1,6 @@
import { useSession } from "next-auth/react";
import { Footer } from "../components/Footer";
-import { Header } from "../components/Header";
+import { Header } from "src/components/Header";
import Head from "next/head";
import Link from "next/link";
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
index f602457f..119f337b 100644
--- a/website/src/pages/_app.tsx
+++ b/website/src/pages/_app.tsx
@@ -4,7 +4,7 @@ import { Inter } from "@next/font/google";
import { extendTheme } from "@chakra-ui/react";
import type { AppProps } from "next/app";
-import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
+import { NextPageWithLayout, getDefaultLayout } from "src/components/Layout";
import "../styles/globals.css";
import "focus-visible";
diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts
index 4ab07440..e0d818c5 100644
--- a/website/src/pages/api/auth/[...nextauth].ts
+++ b/website/src/pages/api/auth/[...nextauth].ts
@@ -5,6 +5,7 @@ import DiscordProvider from "next-auth/providers/discord";
import EmailProvider from "next-auth/providers/email";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import { boolean } from "boolean";
import prisma from "src/lib/prismadb";
@@ -34,7 +35,7 @@ if (process.env.DISCORD_CLIENT_ID) {
);
}
-if (process.env.NODE_ENV === "development") {
+if (boolean(process.env.DEBUG_LOGIN) || process.env.NODE_ENV === "development") {
providers.push(
CredentialsProvider({
name: "Debug Credentials",
diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx
index 4afc3102..1dcbf211 100644
--- a/website/src/pages/auth/signin.tsx
+++ b/website/src/pages/auth/signin.tsx
@@ -1,19 +1,26 @@
import { Button, Input, Stack } from "@chakra-ui/react";
import Head from "next/head";
-import { FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
+import { FaDiscord, FaEnvelope, FaGithub, FaBug } from "react-icons/fa";
import { getCsrfToken, getProviders, signIn } from "next-auth/react";
-import { useRef } from "react";
+import React, { useRef } from "react";
import Link from "next/link";
import { AuthLayout } from "src/components/AuthLayout";
export default function Signin({ csrfToken, providers }) {
- const { discord, email, github } = providers;
+ const { discord, email, github, credentials } = providers;
const emailEl = useRef(null);
- const signinWithEmail = () => {
+ const signinWithEmail = (ev: React.FormEvent) => {
+ ev.preventDefault();
signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
};
+ const debugUsernameEl = useRef(null);
+ function signinWithDebugCredentials(ev: React.FormEvent) {
+ ev.preventDefault();
+ signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value });
+ }
+
return (
<>
@@ -22,19 +29,26 @@ export default function Signin({ csrfToken, providers }) {
+ {credentials && (
+
+ )}
{email && (
-
-
- }
- colorScheme="gray"
- onClick={signinWithEmail}
- // isDisabled="false"
- >
- Continue with Email
-
-
+
)}
{discord && (
);
diff --git a/website/src/pages/create/summarize_story.tsx b/website/src/pages/create/summarize_story.tsx
index 2fb75647..2a86eb4b 100644
--- a/website/src/pages/create/summarize_story.tsx
+++ b/website/src/pages/create/summarize_story.tsx
@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
import Head from "next/head";
import { useRef, useState } from "react";
import useSWRImmutable from "swr/immutable";
@@ -7,8 +7,11 @@ import useSWRMutation from "swr/mutation";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { TwoColumns } from "src/components/TwoColumns";
-import { Button } from "src/components/Button";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
const SummarizeStory = () => {
// Use an array of tasks that record the sequence of steps until a task is
@@ -49,11 +52,12 @@ const SummarizeStory = () => {
});
};
- /**
- * TODO: Make this a nicer loading screen.
- */
+ if (isLoading) {
+ return Loading...
;
+ return No tasks found...
;
}
return (
@@ -73,22 +77,12 @@ const SummarizeStory = () => {
Loading...
;
+ return No tasks found...
;
}
const task = tasks[0].task;
@@ -60,22 +65,12 @@ const UserReply = () => {