@osdk/create-app 0.16.2 → 0.17.0-beta.1

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/package.json.hbs

@@ -11,21 +11,21 @@
   },
   "dependencies": {
     "{{osdkPackage}}": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.20.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6.23.1",
     "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/react": "^18",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",
     "typescript": "^5.2.2",
-    "vite": "^5.0.13"
+    "vite": "^5.2.11"
   }
 }

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>

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

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

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

@@ -31,12 +31,12 @@ function DeleteProjectDialog({
     <Dialog
       isOpen={isOpen}
       buttons={[
-        <button disabled={isDeleting} onClick={handleSubmit} key="delete">
-          Delete
-        </button>,
         <button disabled={isDeleting} onClick={onClose} key="cancel">
           Cancel
         </button>,
+        <button disabled={isDeleting} onClick={handleSubmit} key="delete">
+          Delete
+        </button>,
       ]}
     >
       Are you sure you want to delete this project?

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

@@ -3,3 +3,8 @@
   gap: 1em;
   margin-top: 1em;
 }
+
+.dialog {
+  border: 1px solid black;
+  border-radius: 10px;
+}

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

@@ -8,7 +8,7 @@ interface DialogProps {
 
 function Dialog({ children, isOpen, buttons }: PropsWithChildren<DialogProps>) {
   return (
-    <dialog open={isOpen}>
+    <dialog open={isOpen} className={css.dialog}>
       {children}
       {buttons != null && buttons.length > 0 && (
         <div className={css.buttons}>{buttons}</div>

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

@@ -6,8 +6,7 @@
 .tutorialBanner {
   flex: 1;
   width: 0;
-  background: #646cff;
-  color: #ffffff;
+  background: hsl(35, 100%, 70%);
   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);

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

@@ -30,11 +30,12 @@ function Home() {
       <div className={css.tutorialBannerWrapper}>
         <div className={css.tutorialBanner}>
           <p className={css.tutorialBannerTitle}>
-            💡 Welcome to this tutorial!
+            💡 Welcome to To Do app 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?
+            The To Do App is implemented with mock in-memory data.
+            <br />Can you solve how to switch it to use the Ontology SDK
+            instead?
           </p>
         </div>
       </div>

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

@@ -19,6 +19,8 @@ function Login() {
     } catch (e: unknown) {
       console.error(e);
       setError((e as Error).message ?? e);
+    } finally {
+      setIsLoggingIn(false);
     }
   }, []);
 

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

@@ -1,3 +1,13 @@
 .label {
   margin-left: 0.5em;
 }
+
+.checked {
+  text-decoration: line-through;
+}
+
+.delete {
+  border: 1px solid #ccc;
+  padding: 2px;
+}
+

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

@@ -20,14 +20,17 @@ function TaskListItem({ task, deleteTask }: TaskListItemProps) {
 
   return (
     <li>
-      <input
-        id={`${task.id}`}
-        type="checkbox"
-        onClick={handleClick}
-        checked={isDeleting}
-        disabled={isDeleting}
-      />
-      <label className={css.label} htmlFor={`${task.id}`}>
+      <label
+        className={`${css.label} ${isDeleting ? css.checked : ""}`}
+        htmlFor={`${task.id}`}
+      >
+        <input
+          type="checkbox"
+          onChange={handleClick}
+          checked={isDeleting}
+          className={css.delete}
+          title="Delete task"
+        />
         {task.title}
       </label>
     </li>

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

@@ -3,10 +3,6 @@
   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;
@@ -54,7 +50,6 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }

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

@@ -18,7 +18,7 @@ const projects: MockProject[] = [
     $apiName: "MockProject",
     $primaryKey: "1",
     id: "1",
-    name: "Fake Project",
+    name: "Mock project",
     tasks: [
       {
         $apiName: "MockTask",
@@ -44,7 +44,7 @@ const projects: MockProject[] = [
     $apiName: "MockProject",
     $primaryKey: "2",
     id: "2",
-    name: "Yet Another Fake Project",
+    name: "Yet another mock project",
     tasks: [
       {
         $apiName: "MockTask",
@@ -78,7 +78,7 @@ async function createProject({
   name,
 }: {
   name: string;
-}): Promise<MockTask["$primaryKey"]> {
+}): Promise<MockProject["$primaryKey"]> {
   await delay();
   const id = randomId();
   projects.push({

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

@@ -37,6 +37,7 @@ export function useProjectTasks(project: MockProject | undefined) {
       if (project == null) {
         return;
       }
+      await sleep(1000);
       // Try to implement this with the Ontology SDK!
       await Mocks.deleteTask(task.$primaryKey);
       await mutate();
@@ -53,3 +54,7 @@ export function useProjectTasks(project: MockProject | undefined) {
     deleteTask,
   };
 }
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}

package/templates/template-vue/package.json.hbs

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.13",
+    "vite": "^5.2.11",
     "vue-tsc": "^1.8.22"
   }
 }