@osdk/create-app 0.13.0 → 0.14.0-main-20240503154621

package/templates/template-tutorial-todo-app/src/DeleteProjectDialog.tsx.hbs

@@ -0,0 +1,46 @@
+import { OsdkTodoProject } from "{{osdkPackage}}/ontology/objects";
+import { useCallback, useState } from "react";
+import Dialog from "./Dialog";
+import useProjects from "./useProjects";
+
+interface DeleteProjectDialogProps {
+  project: OsdkTodoProject;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+function DeleteProjectDialog({
+  project,
+  isOpen,
+  onClose,
+}: DeleteProjectDialogProps) {
+  const { deleteProject } = useProjects();
+
+  const [isDeleting, setIsDeleting] = useState(false);
+  const handleSubmit = useCallback(async () => {
+    setIsDeleting(true);
+    try {
+      await deleteProject(project);
+    } finally {
+      setIsDeleting(false);
+      onClose();
+    }
+  }, [deleteProject, onClose, project]);
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      buttons={[
+        <button disabled={isDeleting} onClick={handleSubmit}>
+          Delete
+        </button>,
+        <button disabled={isDeleting} onClick={onClose}>
+          Cancel
+        </button>,
+      ]}
+    >
+      Are you sure you want to delete this project?
+    </Dialog>
+  );
+}
+export default DeleteProjectDialog;

package/templates/template-tutorial-todo-app/src/Dialog.module.css

@@ -0,0 +1,5 @@
+.buttons {
+  display: flex;
+  gap: 1em;
+  margin-top: 1em;
+}

package/templates/template-tutorial-todo-app/src/Dialog.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from "react";
+import css from "./Dialog.module.css";
+
+interface DialogProps {
+  isOpen: boolean;
+  buttons?: React.ReactElement[];
+}
+
+function Dialog({ children, isOpen, buttons }: PropsWithChildren<DialogProps>) {
+  return (
+    <dialog open={isOpen}>
+      {children}
+      {buttons != null && buttons.length > 0 && (
+        <div className={css.buttons}>{buttons}</div>
+      )}
+    </dialog>
+  );
+}
+export default Dialog;

package/templates/template-tutorial-todo-app/src/Home.module.css

@@ -0,0 +1,35 @@
+.tutorialBannerWrapper {
+  display: flex;
+  margin: 2em;
+}
+
+.tutorialBanner {
+  flex: 1;
+  width: 0;
+  background: #646cff;
+  color: #ffffff;
+  border-radius: 1em;
+  padding: 1em;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.tutorialBannerTitle {
+  margin-top: 0;
+  font-weight: 600;
+}
+
+.projectSelect {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  margin: 2em;
+  font-weight: 600;
+}
+
+.projectCard {
+  margin: 2em;
+}
+
+.projectTitle {
+  font-size: 1.5em;
+}

package/templates/template-tutorial-todo-app/src/Home.tsx.hbs

@@ -0,0 +1,62 @@
+import { OsdkTodoProject } from "{{osdkPackage}}/ontology/objects";
+import { useCallback, useEffect, useState } from "react";
+import CreateProjectButton from "./CreateProjectButton";
+import CreateTaskButton from "./CreateTaskButton";
+import DeleteProjectButton from "./DeleteProjectButton";
+import css from "./Home.module.css";
+import Layout from "./Layout";
+import ProjectSelect from "./ProjectSelect";
+import TaskList from "./TaskList";
+import useProjects from "./useProjects";
+
+function Home() {
+  const [projectId, setProjectId] = useState<string | undefined>(undefined);
+  const { projects } = useProjects();
+  const project = projects?.find((p) => p.id === projectId);
+
+  const handleSelectProject = useCallback(
+    (p: OsdkTodoProject) => setProjectId(p.id),
+    [],
+  );
+
+  useEffect(() => {
+    if (project == null && projects != null && projects.length > 0) {
+      setProjectId(projects[0].id);
+    }
+  }, [project, projects]);
+
+  return (
+    <Layout>
+      <div className={css.tutorialBannerWrapper}>
+        <div className={css.tutorialBanner}>
+          <p className={css.tutorialBannerTitle}>
+            💡 Welcome to this tutorial!
+          </p>
+          <p>
+            The Todo App below has been implemented with fake in memory data.
+            Can you solve how to switch it to use the Ontology SDK instead?
+          </p>
+        </div>
+      </div>
+      <div className={css.projectSelect}>
+        <span>Project:</span>
+        <ProjectSelect
+          project={project}
+          projects={projects ?? []}
+          onSelectProject={handleSelectProject}
+        />
+        <CreateProjectButton onProjectCreated={setProjectId} />
+        {project != null && <DeleteProjectButton project={project} />}
+      </div>
+      {project != null && (
+        <div className={css.projectCard} key={project.id}>
+          <h1 className={css.projectTitle}>{project.name}</h1>
+          <TaskList project={project} />
+          <CreateTaskButton project={project} />
+        </div>
+      )}
+    </Layout>
+  );
+}
+
+export default Home;

package/templates/template-tutorial-todo-app/src/Layout.module.css

@@ -0,0 +1,16 @@
+.header {
+  display: flex;
+  align-items: center;
+  margin: 2em;
+}
+
+.logo {
+  height: 4em;
+  align-items: center;
+  margin-right: 1em;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 1.5em;
+}

package/templates/template-tutorial-todo-app/src/Layout.tsx

@@ -0,0 +1,21 @@
+import todoAppLogo from "/todo-app.svg";
+import React from "react";
+import css from "./Layout.module.css";
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+function Layout({ children }: LayoutProps) {
+  return (
+    <>
+      <div className={css.header}>
+        <img src={todoAppLogo} className={css.logo} alt="Todo App logo" />
+        <div className={css.title}>Ontology SDK Tutorial - Todo App</div>
+      </div>
+      {children}
+    </>
+  );
+}
+
+export default Layout;

package/templates/template-tutorial-todo-app/src/Login.module.css

@@ -0,0 +1,5 @@
+.loginButton {
+  display: flex;
+  justify-content: center;
+  margin: 2em;
+}

package/templates/template-tutorial-todo-app/src/Login.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useState } from "react";
+import { Navigate } from "react-router-dom";
+import client from "./client";
+import Layout from "./Layout";
+import css from "./Login.module.css";
+
+function Login() {
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const token = client.auth.token;
+
+  const handleLogin = useCallback(async () => {
+    setIsLoggingIn(true);
+    try {
+      // Initiate the OAuth flow, which will redirect the user to log into Foundry
+      // Once the login has completed, the user will be redirected back to the route defined via the
+      // FOUNDRY_REDIRECT_URL variable in .env.development
+      await client.auth.signIn();
+    } catch (e: unknown) {
+      console.error(e);
+      setError((e as Error).message ?? e);
+    }
+  }, []);
+
+  // If the token exists but a user tries to load /login, redirect to the home page instead
+  if (token != null) {
+    return <Navigate to="/" replace={true} />;
+  }
+
+  return (
+    <Layout>
+      <div className={css.loginButton}>
+        <button onClick={handleLogin}>
+          {isLoggingIn ? "Logging in…" : "Log in "}
+        </button>
+      </div>
+      {error && <div>Unable to log in: {error}</div>}
+    </Layout>
+  );
+}
+
+export default Login;

package/templates/template-tutorial-todo-app/src/ProjectSelect.tsx.hbs

@@ -0,0 +1,40 @@
+import { OsdkTodoProject } from "{{osdkPackage}}/ontology/objects";
+import { ChangeEvent, useCallback } from "react";
+
+interface ProjectSelectProps {
+  project: OsdkTodoProject | undefined;
+  projects: OsdkTodoProject[];
+  onSelectProject: (project: OsdkTodoProject) => void;
+}
+
+function ProjectSelect({
+  project,
+  projects,
+  onSelectProject,
+}: ProjectSelectProps) {
+  const handleSelect = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      const nextProject = projects.find((p) => `${p.id}` === e.target.value);
+      if (nextProject != null) {
+        onSelectProject(nextProject);
+      }
+    },
+    [projects, onSelectProject],
+  );
+
+  return (
+    <select value={project?.id} onChange={handleSelect}>
+      <option hidden disabled selected>
+        -- select a project --
+      </option>
+
+      {projects.map((p) => (
+        <option key={p.id} value={p.id}>
+          {p.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export default ProjectSelect;

package/templates/template-tutorial-todo-app/src/TaskList.module.css

@@ -0,0 +1,6 @@
+.taskList {
+  list-style: none;
+  padding: 0;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}

package/templates/template-tutorial-todo-app/src/TaskList.tsx.hbs

@@ -0,0 +1,38 @@
+import { OsdkTodoProject } from "{{osdkPackage}}/ontology/objects";
+import css from "./TaskList.module.css";
+import TaskListItem from "./TaskListItem";
+import { useProjectTasks } from "./useProjectTasks";
+
+interface TaskListProps {
+  project: OsdkTodoProject;
+}
+
+function TaskList({ project }: TaskListProps) {
+  const {
+    tasks,
+    isLoading: isLoadingTasks,
+    isError: isErrorTasks,
+    deleteTask,
+  } = useProjectTasks(project);
+
+  if (isErrorTasks) {
+    return <div className={css.taskList}>Error loading tasks!</div>;
+  } else if (isLoadingTasks) {
+    return null;
+  }
+
+  const data = tasks ?? [];
+  if (data.length === 0) {
+    return <div className={css.taskList}>No tasks found</div>;
+  }
+
+  return (
+    <ul className={css.taskList}>
+      {data.map((task) => (
+        <TaskListItem key={task.id} task={task} deleteTask={deleteTask} />
+      ))}
+    </ul>
+  );
+}
+
+export default TaskList;

package/templates/template-tutorial-todo-app/src/TaskListItem.module.css

@@ -0,0 +1,3 @@
+.label {
+  margin-left: 0.5em;
+}

package/templates/template-tutorial-todo-app/src/TaskListItem.tsx.hbs

@@ -0,0 +1,37 @@
+import { OsdkTodoTask } from "{{osdkPackage}}/ontology/objects";
+import { useCallback, useState } from "react";
+import css from "./TaskListItem.module.css";
+
+interface TaskListItemProps {
+  task: OsdkTodoTask;
+  deleteTask: (task: OsdkTodoTask) => Promise<void>;
+}
+
+function TaskListItem({ task, deleteTask }: TaskListItemProps) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const handleClick = useCallback(async () => {
+    setIsDeleting(true);
+    try {
+      await deleteTask(task);
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [deleteTask, task]);
+
+  return (
+    <li>
+      <input
+        id={`${task.id}`}
+        type="checkbox"
+        onClick={handleClick}
+        checked={isDeleting}
+        disabled={isDeleting}
+      />
+      <label className={css.label} htmlFor={`${task.id}`}>
+        {task.title}
+      </label>
+    </li>
+  );
+}
+
+export default TaskListItem;

package/templates/template-tutorial-todo-app/src/client.ts.hbs

@@ -0,0 +1,31 @@
+import { FoundryClient, PublicClientAuth } from "{{osdkPackage}}";
+
+const url = import.meta.env.VITE_FOUNDRY_API_URL;
+const clientId = import.meta.env.VITE_FOUNDRY_CLIENT_ID;
+const redirectUrl = import.meta.env.VITE_FOUNDRY_REDIRECT_URL;
+checkEnv(url, "VITE_FOUNDRY_API_URL");
+checkEnv(clientId, "VITE_FOUNDRY_CLIENT_ID");
+checkEnv(redirectUrl, "VITE_FOUNDRY_REDIRECT_URL");
+
+function checkEnv(
+  value: string | undefined,
+  name: string,
+): asserts value is string {
+  if (value == null) {
+    throw new Error(`Missing environment variable: ${name}`);
+  }
+}
+
+/**
+ * Initialize the client to interact with the Ontology SDK
+ */
+const client = new FoundryClient({
+  url,
+  auth: new PublicClientAuth({
+    clientId,
+    url,
+    redirectUrl,
+  }),
+});
+
+export default client;

package/templates/template-tutorial-todo-app/src/index.css

@@ -0,0 +1,73 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 2rem auto;
+  padding: 2rem;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/template-tutorial-todo-app/src/main.tsx

@@ -0,0 +1,33 @@
+import ReactDOM from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import AuthCallback from "./AuthCallback";
+import AuthenticatedRoute from "./AuthenticatedRoute";
+import Home from "./Home";
+import Login from "./Login";
+import "./index.css";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <AuthenticatedRoute />,
+    children: [
+      {
+        path: "/",
+        element: <Home />,
+      },
+    ],
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    // This is the route defined in your application's redirect URL
+    path: "/auth/callback",
+    element: <AuthCallback />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <RouterProvider router={router} />,
+);