@osdk/create-app 0.17.0-beta.0 → 0.17.0-beta.2

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

@@ -0,0 +1,66 @@
+.task {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto min-content;
+    gap: 10px;
+    width: 500px;
+}
+.label {
+  display: flex;
+  gap: 5px;
+  resize: none;
+}
+
+.input {
+  width: 300px;
+  border: 1px solid gray;
+  border-radius: 5px;
+}
+
+.textArea {
+  width: 300px;
+  resize: vertical;
+  border: 1px solid gray;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+.aip {
+  background-color: #7961DB;
+  border: 1px solid #ccc;
+  padding: 2px 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.processing {
+  cursor: progress;
+}
+
+.image {
+  width: 16px;
+  height: 16px;
+}
+
+.container {
+  display: flex;
+  align-items:flex-start;
+  gap: 5px;
+}
+
+.dialogContainer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5); /* Optional: for dimmed background */
+}
+
+.button {
+  border: 1px solid #ccc;
+}

package/templates/template-tutorial-todo-aip-app/src/CreateTaskDialog.tsx

@@ -0,0 +1,140 @@
+import aipLogo from "/aip-icon.svg";
+import type { ChangeEvent } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import css from "./CreateTaskDialog.module.css";
+import Dialog from "./Dialog";
+import type { MockProject } from "./mocks";
+import { useProjectTasks } from "./useProjectTasks";
+
+interface CreateTaskDialogProps {
+  project: MockProject;
+  isOpen: boolean;
+  onClose: () => void;
+  onTaskCreated: (taskId: string) => void;
+}
+
+function CreateTaskDialog(
+  { project, isOpen, onClose, onTaskCreated }: CreateTaskDialogProps,
+) {
+  const { createTask, getRecommendedTaskDescription } = useProjectTasks(
+    project,
+  );
+
+  const [name, setName] = useState<string>("New task");
+  const [description, setDescription] = useState<string>("");
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleChangeTaskName = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => setName(e.target.value),
+    [],
+  );
+
+  const handleChangeTaskDescription = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value),
+    [],
+  );
+
+  const handleTaskDescriptionRecommendation = useCallback(async () => {
+    setIsProcessing(true);
+    const recommendedDescription = await getRecommendedTaskDescription(name);
+    setDescription(recommendedDescription);
+    setIsProcessing(false);
+  }, [getRecommendedTaskDescription, name]);
+
+  useEffect(() => {
+    setName("New task");
+    setDescription("");
+  }, [isOpen]);
+  useEffect(() => {
+    if (textAreaRef.current) {
+      const textArea = textAreaRef.current;
+      textArea.style.height = "auto";
+      textArea.style.height = `${textArea.scrollHeight}px`;
+    }
+  }, [description]);
+
+  const handleSubmit = useCallback(async () => {
+    setIsCreating(true);
+    try {
+      const taskId = await createTask(name, description);
+      if (taskId != null) {
+        onTaskCreated(taskId);
+      }
+    } finally {
+      setIsCreating(false);
+      onClose();
+    }
+  }, [onClose, createTask, onTaskCreated, name, description]);
+
+  return (
+    <>
+      {isOpen && (
+        <div className={css.dialogContainer}>
+          <Dialog
+            isOpen={isOpen}
+            buttons={[
+              <button
+                disabled={isCreating}
+                onClick={onClose}
+                key="cancel"
+                className={css.button}
+              >
+                Cancel
+              </button>,
+              <button
+                disabled={isCreating}
+                onClick={handleSubmit}
+                key="create"
+                className={css.button}
+              >
+                Create task
+              </button>,
+            ]}
+          >
+            <div className={css.task}>
+              <label className={css.label}>
+                Task name:{" "}
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={handleChangeTaskName}
+                className={css.input}
+              />
+
+              <label className={css.label}>
+                Task description:{" "}
+              </label>
+              <div className={css.container}>
+                <textarea
+                  ref={textAreaRef}
+                  value={description}
+                  onChange={handleChangeTaskDescription}
+                  className={css.textArea}
+                  rows={2}
+                />
+                <button
+                  disabled={isProcessing}
+                  className={`${css.aip} ${isProcessing ? css.processing : ""}`}
+                  title="Click here to get AIP task description recommendation"
+                  type="button"
+                  onClick={handleTaskDescriptionRecommendation}
+                >
+                  <img
+                    src={aipLogo}
+                    alt="AIP"
+                    className={css.image}
+                  />
+                </button>
+              </div>
+            </div>
+          </Dialog>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default CreateTaskDialog;

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

@@ -0,0 +1,3 @@
+.button {
+  border: 1px solid #ccc;
+}

package/templates/template-tutorial-todo-aip-app/src/DeleteProjectButton.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useState } from "react";
+import css from "./DeleteProjectButton.module.css";
+import DeleteProjectDialog from "./DeleteProjectDialog";
+import type { MockProject } from "./mocks";
+import useProjects from "./useProjects";
+
+interface DeleteProjectButtonProps {
+  project: MockProject;
+}
+
+function DeleteProjectButton({ project }: DeleteProjectButtonProps) {
+  const { isLoading: isLoadingProjects, isError: isErrorProjects } =
+    useProjects();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpen = useCallback(() => setIsOpen(true), []);
+  const handleClose = useCallback(() => setIsOpen(false), []);
+
+  if (isLoadingProjects || isErrorProjects) {
+    return null;
+  }
+
+  return (
+    <>
+      <button onClick={handleOpen} className={css.button}>
+        Delete Project
+      </button>
+      <DeleteProjectDialog
+        project={project}
+        isOpen={isOpen}
+        onClose={handleClose}
+      />
+    </>
+  );
+}
+
+export default DeleteProjectButton;

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

@@ -0,0 +1,3 @@
+.button {
+  border: 1px solid #ccc;
+}

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

@@ -0,0 +1,57 @@
+import { useCallback, useState } from "react";
+import css from "./DeleteProjectDialog.module.css";
+import Dialog from "./Dialog";
+import type { MockProject } from "./mocks";
+import useProjects from "./useProjects";
+
+interface DeleteProjectDialogProps {
+  project: MockProject;
+  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={onClose}
+          key="cancel"
+          className={css.button}
+        >
+          Cancel
+        </button>,
+        <button
+          disabled={isDeleting}
+          onClick={handleSubmit}
+          key="delete"
+          className={css.button}
+        >
+          Delete
+        </button>,
+      ]}
+    >
+      Are you sure you want to delete this project?
+    </Dialog>
+  );
+}
+export default DeleteProjectDialog;

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

@@ -0,0 +1,11 @@
+.buttons {
+  display: flex;
+  gap: 1em;
+  margin-top: 1em;
+  justify-content: flex-end;
+}
+
+.dialog {
+  border: 1px solid black;
+  border-radius: 10px;
+}

package/templates/template-tutorial-todo-aip-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} className={css.dialog}>
+      {children}
+      {buttons != null && buttons.length > 0 && (
+        <div className={css.buttons}>{buttons}</div>
+      )}
+    </dialog>
+  );
+}
+export default Dialog;

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

@@ -0,0 +1,80 @@
+.tutorialBannerWrapper {
+  display: flex;
+  margin: 2em;
+}
+
+.tutorialBanner {
+  flex: 1;
+  width: 0;
+  background: rgba(121, 97, 219, 0.7);
+  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;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  /* margin: 0.5em; */
+  gap: 0.5em;
+  border-radius: 5px;
+
+}
+
+.projectTitle {
+  font-size: 1.5em;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+}
+
+.image {
+  height: 16px;
+  width: 16px;
+}
+
+.aip {
+  background-color: #7961DB;
+  color: #ffffff;
+  border: 1px solid #ccc;
+  padding: 2px;
+  gap: 10px;
+  height: 30px;
+}
+
+.processing {
+  cursor: progress;
+}
+
+.aipText {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.textArea {
+  border: none;
+  color: gray;
+  resize: none;
+  overflow: hidden;
+  pointer-events: none;
+}

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

@@ -0,0 +1,135 @@
+import aipLogo from "/aip-icon.svg";
+import { useCallback, useEffect, useRef, 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 type { MockProject } from "./mocks";
+import ProjectSelect from "./ProjectSelect";
+import TaskList from "./TaskList";
+import useProjects from "./useProjects";
+import { useProjectTasks } from "./useProjectTasks";
+
+function Home() {
+  const [projectId, setProjectId] = useState<string | undefined>(undefined);
+  const { projects, updateProjectDescription } = useProjects();
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [projectHasTasks, setProjectHasTasks] = useState<boolean>(false);
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const project = projects?.find((p) => p.id === projectId);
+  const tasks = useProjectTasks(project).tasks;
+
+  const handleSelectProject = useCallback(
+    (p: MockProject) => setProjectId(p.id),
+    [],
+  );
+
+  const handleProjectDescriptionRecommendation = useCallback(async () => {
+    if (project == null) {
+      return;
+    }
+    setIsProcessing(true);
+    await updateProjectDescription(project);
+    setIsProcessing(false);
+  }, [project, updateProjectDescription]);
+
+  useEffect(() => {
+    if (project == null && projects != null && projects.length > 0) {
+      setProjectId(projects[0].id);
+      setProjectHasTasks(tasks == null ? false : tasks.length > 0);
+    }
+  }, [project, projects, tasks]);
+
+  useEffect(() => {
+    if (textAreaRef.current) {
+      const textArea = textAreaRef.current;
+      textArea.style.height = "auto";
+      textArea.style.height = `${textArea.scrollHeight}px`;
+    }
+  }, [project?.description]);
+
+  const handleOnTaskCreated = useCallback(() => {
+    setProjectHasTasks(true);
+  }, []);
+
+  const handleOnProjectCreated = useCallback(
+    (projectId: string | undefined) => {
+      setProjectId(projectId);
+      setProjectHasTasks(false);
+    },
+    [],
+  );
+
+  const handleOnTaskDeleted = useCallback(() => {
+    if (tasks?.length === 0) {
+      setProjectHasTasks(false);
+    }
+  }, [tasks]);
+
+  return (
+    <Layout>
+      <div className={css.tutorialBannerWrapper}>
+        <div className={css.tutorialBanner}>
+          <p className={css.tutorialBannerTitle}>
+            💡 Welcome to the To Do AIP App tutorial!
+          </p>
+          <p>
+            The application is implemented with mock in memory data.
+            <br />Can you solve how to change 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={handleOnProjectCreated} />
+        {project != null && <DeleteProjectButton project={project} />}
+      </div>
+      {project != null && (
+        <div className={css.projectCard} key={project.id}>
+          <h1 className={css.projectTitle}>{project.name}</h1>
+          {projectHasTasks && (
+            <div className={css.description}>
+              <textarea
+                ref={textAreaRef}
+                readOnly
+                value={project.description}
+                className={css.textArea}
+              />
+              <button
+                disabled={isProcessing}
+                className={`${css.aip} ${isProcessing ? css.processing : ""}`}
+                title="Click here to update project description based on AIP Logic"
+                type="button"
+                onClick={handleProjectDescriptionRecommendation}
+              >
+                <div className={css.aipText}>
+                  <img
+                    src={aipLogo}
+                    alt="AIP"
+                    className={css.image}
+                  />
+                  Get description recommendation
+                </div>
+              </button>
+            </div>
+          )}
+          <TaskList project={project} onTaskDeleted={handleOnTaskDeleted} />
+          <CreateTaskButton
+            project={project}
+            onTaskCreated={handleOnTaskCreated}
+          />
+        </div>
+      )}
+    </Layout>
+  );
+}
+
+export default Home;

package/templates/template-tutorial-todo-aip-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-aip-app/src/Layout.tsx

@@ -0,0 +1,23 @@
+import todoAppLogo from "/todo-aip-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 - To Do App Powered by AIP
+        </div>
+      </div>
+      {children}
+    </>
+  );
+}
+
+export default Layout;

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

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

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

@@ -0,0 +1,44 @@
+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);
+    } finally {
+      setIsLoggingIn(false);
+    }
+  }, []);
+
+  // 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-aip-app/src/ProjectSelect.tsx

@@ -0,0 +1,40 @@
+import { ChangeEvent, useCallback } from "react";
+import { MockProject } from "./mocks";
+
+interface ProjectSelectProps {
+  project: MockProject | undefined;
+  projects: MockProject[];
+  onSelectProject: (project: MockProject) => 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 value="">
+        -- 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-aip-app/src/TaskList.module.css

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