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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,44 +0,0 @@
-import type { MockProject } from "./mocks";
-import css from "./TaskList.module.css";
-import TaskListItem from "./TaskListItem";
-import { useProjectTasks } from "./useProjectTasks";
-
-interface TaskListProps {
-  project: MockProject;
-  onTaskDeleted: (taskId: string | undefined) => void;
-}
-
-function TaskList({ project, onTaskDeleted }: 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}
-          onTaskDeleted={onTaskDeleted}
-        />
-      ))}
-    </ul>
-  );
-}
-
-export default TaskList;

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

@@ -1,35 +0,0 @@
-.li {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 5px;
-  border: 1px solid #ccc;
-  gap: 5px;
-  border-radius: 5px;
-  background-color: #f9f9f9;
-  margin: 10px 0;
-}
-
-.checked {
-  text-decoration: line-through;
-}
-
-.delete {
-  border: 1px solid #ccc;
-  padding: 2px;
-}
-
-.task {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.textArea {
-  border: none;
-  background-color: #f9f9f9;
-  color: gray;
-  resize: none;
-  overflow: hidden;
-  pointer-events: none;
-}

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

@@ -1,58 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { MockTask } from "./mocks";
-import css from "./TaskListItem.module.css";
-
-interface TaskListItemProps {
-  task: MockTask;
-  deleteTask: (task: MockTask) => Promise<void>;
-  onTaskDeleted: (taskId: string | undefined) => void;
-}
-
-function TaskListItem({ task, deleteTask, onTaskDeleted }: TaskListItemProps) {
-  const [isDeleting, setIsDeleting] = useState(false);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleClick = useCallback(async () => {
-    setIsDeleting(true);
-    try {
-      await deleteTask(task);
-    } finally {
-      onTaskDeleted(task.id);
-      setIsDeleting(false);
-    }
-  }, [deleteTask, task, onTaskDeleted]);
-
-  useEffect(() => {
-    if (textAreaRef.current) {
-      const textArea = textAreaRef.current;
-      textArea.style.height = "auto";
-      textArea.style.height = `${textArea.scrollHeight}px`;
-    }
-  }, [task.description]);
-  const cleanDescription = task.description?.trim();
-  return (
-    <li className={css.li}>
-      <input
-        type="checkbox"
-        onChange={handleClick}
-        checked={isDeleting}
-        className={css.delete}
-        title="Delete task"
-      />
-      <div className={`${css.task} ${isDeleting ? css.checked : ""}`}>
-        <span>{task.title}</span>
-        {cleanDescription != null && (
-          <textarea
-            ref={textAreaRef}
-            readOnly
-            value={task.description}
-            className={css.textArea}
-            rows={1}
-          />
-        )}
-      </div>
-    </li>
-  );
-}
-
-export default TaskListItem;

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

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