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

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/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));
+}