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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @osdk/create-app
 
+## 0.17.0-beta.3
+
+### Minor Changes
+
+- adebdb0: update AIP template
+
+## 0.17.0-beta.2
+
+### Minor Changes
+
+- 79335e5: fix AIP template
+
 ## 0.17.0-beta.1
 
 ### Minor Changes

package/build/browser/index.js

@@ -457,7 +457,7 @@ async function run({
 
 // src/cli.ts
 async function cli(args = process.argv) {
-  const base = yargs(hideBin(args)).version("0.17.0-beta.1").wrap(Math.min(150, yargs().terminalWidth())).strict().help().command("$0 [project] [--<option>]", "Create a new OSDK application based on framework templates. Information may be provided through options to skip interactive prompts.", (yargs2) => yargs2.positional("project", {
+  const base = yargs(hideBin(args)).version("0.17.0-beta.3").wrap(Math.min(150, yargs().terminalWidth())).strict().help().command("$0 [project] [--<option>]", "Create a new OSDK application based on framework templates. Information may be provided through options to skip interactive prompts.", (yargs2) => yargs2.positional("project", {
     type: "string",
     describe: "Project name to create"
   }).option("overwrite", {

package/build/cjs/index.cjs

@@ -467,7 +467,7 @@ async function run({
 
 // src/cli.ts
 async function cli(args = process.argv) {
-  const base = yargs__default.default(helpers.hideBin(args)).version("0.17.0-beta.1").wrap(Math.min(150, yargs__default.default().terminalWidth())).strict().help().command("$0 [project] [--<option>]", "Create a new OSDK application based on framework templates. Information may be provided through options to skip interactive prompts.", (yargs2) => yargs2.positional("project", {
+  const base = yargs__default.default(helpers.hideBin(args)).version("0.17.0-beta.3").wrap(Math.min(150, yargs__default.default().terminalWidth())).strict().help().command("$0 [project] [--<option>]", "Create a new OSDK application based on framework templates. Information may be provided through options to skip interactive prompts.", (yargs2) => yargs2.positional("project", {
     type: "string",
     describe: "Project name to create"
   }).option("overwrite", {

package/build/esm/index.js

@@ -457,7 +457,7 @@ async function run({
 
 // src/cli.ts
 async function cli(args = process.argv) {
-  const base = yargs(hideBin(args)).version("0.17.0-beta.1").wrap(Math.min(150, yargs().terminalWidth())).strict().help().command("$0 [project] [--<option>]", "Create a new OSDK application based on framework templates. Information may be provided through options to skip interactive prompts.", (yargs2) => yargs2.positional("project", {
+  const base = yargs(hideBin(args)).version("0.17.0-beta.3").wrap(Math.min(150, yargs().terminalWidth())).strict().help().command("$0 [project] [--<option>]", "Create a new OSDK application based on framework templates. Information may be provided through options to skip interactive prompts.", (yargs2) => yargs2.positional("project", {
     type: "string",
     describe: "Project name to create"
   }).option("overwrite", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osdk/create-app",
-  "version": "0.17.0-beta.1",
+  "version": "0.17.0-beta.3",
   "description": "",
   "access": "public",
   "license": "Apache-2.0",

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

@@ -18,8 +18,8 @@
   "devDependencies": {
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",

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

@@ -19,8 +19,8 @@
   "devDependencies": {
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",

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

@@ -26,55 +26,3 @@
   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,22 +1,17 @@
-import aipLogo from "/aip-icon.svg";
-import { useCallback, useEffect, useRef, useState } from "react";
+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 type { MockProject } from "./mocks";
+import { ProjectDetails } from "./ProjectDetails";
 import ProjectSelect from "./ProjectSelect";
-import TaskList from "./TaskList";
 import useProjects from "./useProjects";
 
 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 { projects } = useProjects();
 
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const project = projects?.find((p) => p.id === projectId);
 
   const handleSelectProject = useCallback(
@@ -24,48 +19,19 @@ function Home() {
     [],
   );
 
-  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(projects[0].tasks.length > 0);
     }
   }, [project, projects]);
 
-  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 (project != null && project.tasks.length === 0) {
-      setProjectHasTasks(false);
-    }
-  }, [project]);
-
   return (
     <Layout>
       <div className={css.tutorialBannerWrapper}>
@@ -90,42 +56,7 @@ function Home() {
         <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>
-      )}
+      {project != null && <ProjectDetails project={project} />}
     </Layout>
   );
 }

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

@@ -0,0 +1,53 @@
+.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;
+  gap: 5px;
+}
+
+.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/ProjectDetails.tsx

@@ -0,0 +1,88 @@
+import aipLogo from "/aip-icon.svg";
+import { useCallback, useEffect, useRef, useState } from "react";
+import CreateTaskButton from "./CreateTaskButton";
+import type { MockProject } from "./mocks";
+import css from "./ProjectDetails.module.css";
+import TaskList from "./TaskList";
+import useProjects from "./useProjects";
+import { useProjectTasks } from "./useProjectTasks";
+
+interface ProjectDetailsProps {
+  project: MockProject;
+}
+
+export function ProjectDetails({ project }: ProjectDetailsProps) {
+  const [projectHasTasks, setProjectHasTasks] = useState<boolean>(false);
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const { updateProjectDescription } = useProjects();
+  const tasks = useProjectTasks(project).tasks;
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setProjectHasTasks(tasks == null ? false : tasks.length > 0);
+  }, [project, tasks]);
+
+  const handleProjectDescriptionRecommendation = useCallback(async () => {
+    if (project == null) {
+      return;
+    }
+    setIsProcessing(true);
+    await updateProjectDescription(project);
+    setIsProcessing(false);
+  }, [project, updateProjectDescription]);
+
+  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 handleOnTaskDeleted = useCallback(() => {
+    if (tasks?.length === 0) {
+      setProjectHasTasks(false);
+    }
+  }, [tasks]);
+
+  return (
+    <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>
+  );
+}

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

@@ -5,7 +5,7 @@ import { useProjectTasks } from "./useProjectTasks";
 
 interface TaskListProps {
   project: MockProject;
-  onTaskDeleted: (taskId: string) => void;
+  onTaskDeleted: (taskId: string | undefined) => void;
 }
 
 function TaskList({ project, onTaskDeleted }: TaskListProps) {

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

@@ -1,10 +1,11 @@
 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) => void;
+  onTaskDeleted: (taskId: string | undefined) => void;
 }
 
 function TaskListItem({ task, deleteTask, onTaskDeleted }: TaskListItemProps) {
@@ -28,9 +29,7 @@ function TaskListItem({ task, deleteTask, onTaskDeleted }: TaskListItemProps) {
       textArea.style.height = `${textArea.scrollHeight}px`;
     }
   }, [task.description]);
-  const cleanDescription = task.description.trim() === ""
-    ? null
-    : task.description.trim();
+  const cleanDescription = task.description?.trim();
   return (
     <li className={css.li}>
       <input

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

@@ -106,7 +106,7 @@ async function getRecommendedProjectDescription(
   project: MockProject,
 ): Promise<string> {
   await delay();
-  if (project.tasks.length === 0) {
+  if (project.tasks != null && project.tasks.length === 0) {
     throw new Error("Project description recommendation requires tasks");
   }
   return `AIP Logic mock description for project`;
@@ -114,10 +114,9 @@ async function getRecommendedProjectDescription(
 
 async function updateProjectDescription(
   project: MockProject,
-  description: string,
 ): Promise<void> {
   await delay();
-  project.description = description;
+  project.description = await getRecommendedProjectDescription(project);
 }
 
 async function deleteProject(id: string): Promise<void> {

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

@@ -28,8 +28,7 @@ function useProjects() {
   ) => 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 Mocks.updateProjectDescription(project);
       await mutate();
     },
     [mutate],

package/templates/template-tutorial-todo-app/package.json.hbs

@@ -19,8 +19,8 @@
   "devDependencies": {
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",