List all available recipes on the home screen (#67)

Author: bfollington

typescript/packages/lookslike-high-level/src/data.ts

@@ -5,6 +5,8 @@ const { state } = signal;
 
 import { todoList, todoTask } from "./recipes/todo-list.js";
 import "./recipes/todo-list-as-task.js"; // Necessary, so that suggestions are indexed.
+import { recipeItem, recipeList } from "./recipes/recipe-list.js";
+import { Recipe } from "./recipe.js";
 
 export const keywords: { [key: string]: string[] } = {
   groceries: ["grocery list"],
@@ -17,21 +19,31 @@ export function addGems(gems: { [key: string]: Gem }) {
   dataGems.send({ ...dataGems.get(), ...gems });
 }
 
-addGems({
+const recipes: { [name: string]: Recipe } = {
   "todo list": todoList({
     items: ["Buy groceries", "Walk the dog", "Wash the car"].map((item) =>
       todoTask({
         title: item,
         done: false,
-      })
+      }),
     ),
   }),
   "grocery list": todoList({
     items: ["milk", "eggs", "bread"].map((item) =>
       todoTask({
         title: item,
         done: false,
-      })
+      }),
     ),
   }),
+};
+
+recipes["recipe list"] = recipeList({
+  items: Object.keys(recipes).map((name) =>
+    recipeItem({
+      title: name,
+    }),
+  ),
 });
+
+addGems(recipes);

typescript/packages/lookslike-high-level/src/main.ts

@@ -7,7 +7,9 @@ const { computed, isSignal } = signal;
 
 // Hard coded todo list as UI to show
 const UI = computed([dataGems], (dataGems) => {
-  let UI = dataGems["todo list"]?.UI;
+  if (dataGems.length === 0) return null;
+
+  let UI = dataGems["recipe list"]?.UI;
   if (isSignal(UI)) UI = UI.get();
   return UI;
 });

typescript/packages/lookslike-high-level/src/recipes/recipe-list.ts

@@ -0,0 +1,35 @@
+import { view, tags } from "@commontools/common-ui";
+import { signal, stream } from "@commontools/common-frp";
+import { recipe } from "../recipe.js";
+import { annotation } from "../components/annotation.js";
+const { binding, repeat } = view;
+const { vstack, hstack, div, include } = tags;
+const { state } = signal;
+
+export const recipeList = recipe("recipe list", ({ items }) => {
+  return {
+    UI: [
+      vstack({}, [
+        vstack({}, repeat("items", include({ content: binding("itemUI") }))),
+      ]),
+      { items },
+    ],
+    items,
+  };
+});
+
+export const recipeItem = recipe("recipe list item", ({ title }) => {
+  return {
+    itemUI: state([
+      vstack({}, [
+        hstack({}, [div({}, binding("title"))]),
+        annotation({
+          query: title,
+          data: { recipeName: title },
+        }),
+      ]),
+      { title },
+    ]),
+    title,
+  };
+});