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

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

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

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

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

@@ -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-aip-app/src/index.css

@@ -0,0 +1,75 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root-container {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+#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;
+  flex-direction: column;
+  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;
+  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-aip-app/src/main.tsx

@@ -0,0 +1,36 @@
+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 />,
+    },
+  ],
+  { basename: import.meta.env.BASE_URL },
+);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <RouterProvider router={router} />,
+);

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

@@ -0,0 +1,187 @@
+export interface MockProject {
+  $apiName: string;
+  $primaryKey: string;
+  id: string;
+  name: string;
+  description: string;
+  tasks: MockTask[];
+}
+
+export interface MockTask {
+  $apiName: string;
+  $primaryKey: string;
+  id: string;
+  title: string;
+  description: string;
+}
+
+const projects: MockProject[] = [
+  {
+    $apiName: "MockProject",
+    $primaryKey: "1",
+    id: "1",
+    name: "Mock project",
+    description: "This is a mock description",
+    tasks: [
+      {
+        $apiName: "MockTask",
+        $primaryKey: "1",
+        id: "1",
+        title: "Try to",
+        description: "task description 1",
+      },
+      {
+        $apiName: "MockTask",
+        $primaryKey: "2",
+        id: "2",
+        title: "Implement this",
+        description: "task description 2",
+      },
+      {
+        $apiName: "MockTask",
+        $primaryKey: "3",
+        id: "3",
+        title: "With the Ontology SDK!",
+        description: "task description 3",
+      },
+    ],
+  },
+  {
+    $apiName: "MockProject",
+    $primaryKey: "2",
+    id: "2",
+    name: "Yet another mock project",
+    description: "This is another mock description",
+    tasks: [
+      {
+        $apiName: "MockTask",
+        $primaryKey: "4",
+        id: "4",
+        title: "More tasks here",
+        description: "More task description",
+      },
+    ],
+  },
+];
+
+async function delay(): Promise<void> {
+  return new Promise((resolve) =>
+    setTimeout(() => resolve(), 500 + Math.random() * 1000)
+  );
+}
+
+// Good enough random id for mocks
+function randomId(): string {
+  return `${Math.floor(Math.random() * 2 ** 31)}`;
+}
+
+async function getProjects(): Promise<MockProject[]> {
+  await delay();
+  const result = [...projects];
+  result.sort((p1, p2) => p1.name.localeCompare(p2.name));
+  return result;
+}
+
+async function createProject({
+  name,
+  description = "",
+}: {
+  name: string;
+  description?: string;
+}): Promise<MockProject["$primaryKey"]> {
+  await delay();
+  const id = randomId();
+  projects.push({
+    $apiName: "MockProject",
+    $primaryKey: id,
+    id,
+    name,
+    description,
+    tasks: [],
+  });
+  return id;
+}
+
+async function getRecommendedProjectDescription(
+  project: MockProject,
+): Promise<string> {
+  await delay();
+  if (project.tasks.length === 0) {
+    throw new Error("Project description recommendation requires tasks");
+  }
+  return `AIP Logic mock description for project`;
+}
+
+async function updateProjectDescription(
+  project: MockProject,
+  description: string,
+): Promise<void> {
+  await delay();
+  project.description = description;
+}
+
+async function deleteProject(id: string): Promise<void> {
+  await delay();
+  const idx = projects.findIndex((p) => p.id === id);
+  if (idx !== -1) {
+    projects.splice(idx, 1);
+  }
+}
+
+async function createTask({
+  title,
+  description = "",
+  projectId,
+}: {
+  title: string;
+  description: string;
+  projectId: string;
+}): Promise<MockTask["$primaryKey"]> {
+  await delay();
+  const project = projects.find((p) => p.id === projectId);
+  if (project == null) {
+    throw new Error(`Project ${projectId} not found!`);
+  }
+  const id = randomId();
+  project.tasks.unshift({
+    $apiName: "MockTask",
+    $primaryKey: id,
+    id,
+    title,
+    description,
+  });
+  return id;
+}
+
+async function getRecommendedTaskDescription(
+  taskName: string,
+): Promise<string> {
+  await delay();
+  if (taskName.length === 0) {
+    throw new Error("Task name must not be empty");
+  }
+  return `Mock AIP description for task`;
+}
+
+async function deleteTask(id: string): Promise<void> {
+  await delay();
+  for (const project of projects) {
+    const idx = project.tasks.findIndex((t) => t.id === id);
+    if (idx !== -1) {
+      project.tasks.splice(idx, 1);
+    }
+  }
+}
+
+const Mocks = {
+  getProjects,
+  createProject,
+  getRecommendedProjectDescription,
+  deleteProject,
+  createTask,
+  deleteTask,
+  getRecommendedTaskDescription,
+  updateProjectDescription,
+};
+
+export default Mocks;

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

@@ -0,0 +1,75 @@
+import { useCallback } from "react";
+import useSWR from "swr";
+import Mocks, { MockProject, MockTask } from "./mocks";
+
+export function useProjectTasks(project: MockProject | undefined) {
+  const { data, isLoading, isValidating, error, mutate } = useSWR<MockTask[]>(
+    project != null ? `projects/${project.id}/tasks` : null,
+    // Try to implement this with the Ontology SDK!
+    async () => {
+      if (project == null) {
+        return [];
+      }
+      return project.tasks;
+    },
+  );
+
+  const createTask: (
+    title: string,
+    description: string,
+  ) => Promise<MockTask["$primaryKey"] | undefined> = useCallback(
+    async (title: string, description: string) => {
+      if (project == null) {
+        return undefined;
+      }
+      // Try to implement this with the Ontology SDK!
+      const id = await Mocks.createTask({
+        title,
+        description,
+        projectId: project.$primaryKey,
+      });
+      await mutate();
+      return id;
+    },
+    [project, mutate],
+  );
+
+  const deleteTask: (task: MockTask) => Promise<void> = useCallback(
+    async (task) => {
+      if (project == null) {
+        return;
+      }
+      await sleep(1000);
+      // Try to implement this with the Ontology SDK!
+      await Mocks.deleteTask(task.$primaryKey);
+      await mutate();
+    },
+    [project, mutate],
+  );
+
+  const getRecommendedTaskDescription: (taskName: string) => Promise<string> =
+    useCallback(
+      async (taskName: string) => {
+        // Try to implement this with the Ontology SDK!
+        const recommendedTaskDescription = await Mocks
+          .getRecommendedTaskDescription(taskName);
+        await mutate();
+        return recommendedTaskDescription;
+      },
+      [mutate],
+    );
+
+  return {
+    tasks: data,
+    isLoading,
+    isValidating,
+    isError: error,
+    createTask,
+    deleteTask,
+    getRecommendedTaskDescription,
+  };
+}
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}

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

@@ -0,0 +1,58 @@
+import { useCallback } from "react";
+import useSWR from "swr";
+import type { MockProject } from "./mocks";
+import Mocks from "./mocks";
+
+function useProjects() {
+  const { data, isLoading, isValidating, error, mutate } = useSWR<
+    MockProject[]
+  >("projects", async () => {
+    // Try to implement this with the Ontology SDK!
+    return Mocks.getProjects();
+  });
+
+  const createProject: (
+    name: string,
+  ) => Promise<MockProject["$primaryKey"]> = useCallback(
+    async (name: string) => {
+      // Try to implement this with the Ontology SDK!
+      const id = await Mocks.createProject({ name });
+      await mutate();
+      return id;
+    },
+    [mutate],
+  );
+
+  const updateProjectDescription: (
+    project: MockProject,
+  ) => Promise<void> = useCallback(
+    async (project) => {
+      // Try to implement this with the Ontology SDK!
+      const description = await Mocks.getRecommendedProjectDescription(project);
+      await Mocks.updateProjectDescription(project, description);
+      await mutate();
+    },
+    [mutate],
+  );
+
+  const deleteProject: (project: MockProject) => Promise<void> = useCallback(
+    async (project) => {
+      // Try to implement this with the Ontology SDK!
+      await Mocks.deleteProject(project.$primaryKey);
+      await mutate();
+    },
+    [mutate],
+  );
+
+  return {
+    projects: data,
+    isLoading,
+    isValidating,
+    isError: error,
+    createProject,
+    deleteProject,
+    updateProjectDescription,
+  };
+}
+
+export default useProjects;

package/templates/template-tutorial-todo-aip-app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/template-tutorial-todo-aip-app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/template-tutorial-todo-aip-app/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/template-tutorial-todo-aip-app/vite.config.ts.hbs

@@ -0,0 +1,19 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 8080,
+    {{#if corsProxy}}
+    proxy: {
+      "^(/multipass/api|/api)": {
+        target: "{{foundryUrl}}",
+        changeOrigin: true,
+        secure: true,
+      },
+    },
+    {{/if}}
+  },
+});

package/templates/template-tutorial-todo-app/README.md.hbs

@@ -1,6 +1,6 @@
 # {{project}}
 
-This project was generated with `@osdk/create-app` and is intended to be used alongside the Developer Console tutorial for creating a Todo App against a reference Ontology.
+This project was generated with `@osdk/create-app` and is intended to be used alongside the Developer Console tutorial for creating a To Do App against a reference Ontology.
 
 ## Developing
 

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

@@ -39,12 +39,12 @@ function CreateProjectDialog({
     <Dialog
       isOpen={isOpen}
       buttons={[
-        <button disabled={isCreating} onClick={handleSubmit} key="create">
-          Create project
-        </button>,
         <button disabled={isCreating} onClick={onClose} key="cancel">
           Cancel
         </button>,
+        <button disabled={isCreating} onClick={handleSubmit} key="create">
+          Create project
+        </button>,
       ]}
     >
       <label>