@powerhousedao/academy 5.1.0-dev.9 → 5.1.0

package/docs/academy/10-TodoListTutorial/07-AddSharedComponentForShowingTodoListStats.md

@@ -1,370 +0,0 @@
-# Step 7 - Add shared component for showing TodoList stats
-
-So far we've been creating components that live in the same directories as the editors that use them. But sometimes we want to use the same component across multiple editors.
-
-Let's create a component for showing statistics about our todos. We'd like this component to work with any set of todos or todo lists, so that we can use the same one in our document editor or in our drive editor or a folder.
-
-## Creating the `<Stats />` component
-
-Create a new directory at `editors/components` and create two new files inside it: 
-
-`editors/components/Stats.tsx` with this content:
-
-```jsx
-import type {
-  TodoItem,
-  TodoListDocument,
-} from "todo-tutorial/document-models/todo-list";
-
-type Props = {
-  todos: TodoItem[] | undefined;
-  todoListDocuments?: TodoListDocument[] | undefined;
-  createdAtUtcIso?: string;
-  lastModifiedAtUtcIso?: string;
-};
-
-/** Generic component for showing statistics about todo lists and the todos they contain */
-export function Stats({
-  todos,
-  todoListDocuments,
-  createdAtUtcIso,
-  lastModifiedAtUtcIso,
-}: Props) {
-  const totalTodos = todos?.length ?? 0;
-  const totalChecked = todos?.filter((todo) => todo.checked).length ?? 0;
-  const totalUnchecked = todos?.filter((todo) => !todo.checked).length ?? 0;
-  const percentageChecked = Math.round(
-    calculatePercentage(totalTodos, totalChecked),
-  );
-  const percentageUnchecked = Math.round(
-    calculatePercentage(totalTodos, totalUnchecked),
-  );
-  const createdAt = createdAtUtcIso ? new Date(createdAtUtcIso) : null;
-  const hasCreatedAt = createdAt !== null;
-  const lastModified = lastModifiedAtUtcIso
-    ? new Date(lastModifiedAtUtcIso)
-    : null;
-  const hasLastModified = lastModified !== null;
-  const createdAtFormattedDate = createdAt
-    ? createdAt.toLocaleDateString()
-    : null;
-  const lastModifiedFormattedDate = lastModified
-    ? lastModified.toLocaleDateString()
-    : null;
-  const createdAtFormattedTime = createdAt
-    ? createdAt.toLocaleTimeString()
-    : null;
-  const lastModifiedFormattedTime = lastModified
-    ? lastModified.toLocaleTimeString()
-    : null;
-  const totalTodoListDocuments = todoListDocuments?.length ?? 0;
-  const hasTodoLists = todoListDocuments !== undefined;
-
-  return (
-    <ul className="text-sm text-gray-800 max-w-1/2">
-      {hasTodoLists && (
-        <li className="flex justify-between">
-          <span>Todo Lists:</span> <span>{totalTodoListDocuments}</span>
-        </li>
-      )}
-      <li className="flex justify-between">
-        <span>Todos:</span> <span>{totalTodos}</span>
-      </li>
-      <li className="flex justify-between">
-        <span>Checked:</span>{" "}
-        <span>
-          {totalChecked} ({percentageChecked}%)
-        </span>
-      </li>
-      <li className="flex justify-between">
-        <span>Unchecked:</span>{" "}
-        <span>
-          {totalUnchecked} ({percentageUnchecked}%)
-        </span>
-      </li>
-      {hasCreatedAt && (
-        <li className="flex justify-between">
-          <span>Created:</span>{" "}
-          <span>
-            {createdAtFormattedDate} {createdAtFormattedTime}
-          </span>
-        </li>
-      )}
-      {hasLastModified && (
-        <li className="flex justify-between">
-          <span>Last modified:</span>{" "}
-          <span>
-            {lastModifiedFormattedDate} {lastModifiedFormattedTime}
-          </span>
-        </li>
-      )}
-    </ul>
-  );
-}
-
-function calculatePercentage(total: unknown, value: unknown) {
-  if (typeof total !== "number" || typeof value !== "number") {
-    return 0;
-  }
-  const ratio = value / total;
-  if (isNaN(ratio)) {
-    return 0;
-  }
-  return ratio * 100;
-}
-```
-
-And `editors/components/index.ts` with this content:
-
-```ts
-export { Stats } from "./Stats.js";
-```
-
-The index file lets us use a nice neat import path like `todo-tutorial/editors/components` in all of our editor components.
-
-Don't be too concerned with the math and time related code you see here — those are just implementation details.
-
-## Using the  `<Stats />` component in our `TodoListEditor`
-
-Now let's use the `<Stats />` component in our `<TodoList />` component:
-
-```diff
-import { useSelectedTodoListDocument } from "todo-tutorial/document-models/todo-list";
-+ import { Stats } from "todo-tutorial/editors/components";
-import { EditTodoListName } from "./EditName.js";
-import { Todos } from "./Todos.js";
-import { AddTodo } from "./AddTodo.js";
-import { CloseButton } from "./CloseButton.js";
-
-/** Displays the selected todo list */
-export function TodoList() {
-  const [selectedTodoList] = useSelectedTodoListDocument();
-
-  if (!selectedTodoList) return null;
-
-  const todos = selectedTodoList.state.global.items;
-+ const createdAtUtcIso = selectedTodoList.header.createdAtUtcIso;
-+ const lastModifiedAtUtcIso = selectedTodoList.header.lastModifiedAtUtcIso;
-
-  return (
-    <div>
-      <section className="mb-4 flex gap-2 items-center">
-        <div className="grow">
-          <EditTodoListName />
-        </div>
-        <div className="flex-none">
-          <CloseButton />
-        </div>
-      </section>
-+     <section className="mb-4">
-+       <Stats
-+         todos={todos}
-+         createdAtUtcIso={createdAtUtcIso}
-+         lastModifiedAtUtcIso={lastModifiedAtUtcIso}
-+       />
-+     </section>
-      <section className="mb-4">
-        <Todos todos={todos} />
-      </section>
-      <section>
-        <AddTodo />
-      </section>
-    </div>
-  );
-}
-```
-
-With this, you will now see statistics about the todo items in a todo list document.
-
-And now we can also show off the flexibility of our new `<Stats />` component. Since drives are also just documents themselves, we can derive the same information about a drive too. This means we can use this same component in our drive editor as well.
-
-## Using the `<Stats />` component in our `TodoDriveExplorer`
-
-Let's add this to our `<DriveContents />` component, along with some conditional logic that either shows stats for the selected folder (if one is selected) or the selected drive otherwise.
-
-```diff
-+ import {
-+   useSelectedDrive,
-+   useSelectedFolder,
-+ } from "@powerhousedao/reactor-browser";
-import { CreateDocument } from "./CreateDocument.js";
-import { EmptyState } from "./EmptyState.js";
-import { Files } from "./Files.js";
-import { Folders } from "./Folders.js";
-import { NavigationBreadcrumbs } from "./NavigationBreadcrumbs.js";
-+ import { Stats } from "todo-tutorial/editors/components";
-+ import {
-+   useTodoListDocumentsInSelectedDrive,
-+   useTodoListDocumentsInSelectedFolder,
-+   type TodoItem,
-+   type TodoListDocument,
-+ } from "todo-tutorial/document-models/todo-list";
-
-+ /** Small helper function to get all todo items from all todo lists */
-+ export function getAllTodoItemsFromTodoLists(
-+   todoLists: TodoListDocument[] | undefined,
-+ ): TodoItem[] {
-+   return todoLists?.flatMap((todoList) => todoList.state.global.items) ?? [];
-+ }
-
-/** Shows the documents and folders in the selected drive */
-export function DriveContents() {
-+ const selectedFolder = useSelectedFolder();
-+ const hasSelectedFolder = selectedFolder !== undefined;
-  return (
-    <div className="space-y-6 px-6">
-      <NavigationBreadcrumbs />
-+     {hasSelectedFolder ? <FolderStats /> : <DriveStats />}
-      <Folders />
-      <Files />
-      <EmptyState />
-      <CreateDocument />
-    </div>
-  );
-}
-
-+ /** Shows the statistics for the selected drive */
-+ function DriveStats() {
-+   const todoListDocumentsInSelectedDrive =
-+     useTodoListDocumentsInSelectedDrive();
-+   const allTodos = getAllTodoItemsFromTodoLists(
-+     todoListDocumentsInSelectedDrive,
-+   );
-+   const [selectedDrive] = useSelectedDrive();
-+   const driveCreatedAt = selectedDrive.header.createdAtUtcIso;
-+   const driveLastModified = selectedDrive.header.lastModifiedAtUtcIso;
-+ 
-+   return (
-+     <Stats
-+       todos={allTodos}
-+       todoListDocuments={todoListDocumentsInSelectedDrive}
-+       createdAtUtcIso={driveCreatedAt}
-+       lastModifiedAtUtcIso={driveLastModified}
-+     />
-+   );
-+ }
-+ 
-+ /** Shows the statistics for the selected folder */
-+ function FolderStats() {
-+   const todoListDocumentsInSelectedFolder =
-+     useTodoListDocumentsInSelectedFolder();
-+   const allTodos = getAllTodoItemsFromTodoLists(
-+     todoListDocumentsInSelectedFolder,
-+   );
-+ 
-+   return (
-+     <Stats
-+       todos={allTodos}
-+       todoListDocuments={todoListDocumentsInSelectedFolder}
-+     />
-+   );
-+ }
-```
-
-The final result should look like this:
-
-```jsx
-import {
-  useSelectedDrive,
-  useSelectedFolder,
-} from "@powerhousedao/reactor-browser";
-import { CreateDocument } from "./CreateDocument.js";
-import { EmptyState } from "./EmptyState.js";
-import { Files } from "./Files.js";
-import { Folders } from "./Folders.js";
-import { NavigationBreadcrumbs } from "./NavigationBreadcrumbs.js";
-import { Stats } from "todo-tutorial/editors/components";
-import {
-  useTodoListDocumentsInSelectedDrive,
-  useTodoListDocumentsInSelectedFolder,
-  type TodoItem,
-  type TodoListDocument,
-} from "todo-tutorial/document-models/todo-list";
-
-/** Small helper function to get all todo items from all todo lists */
-export function getAllTodoItemsFromTodoLists(
-  todoLists: TodoListDocument[] | undefined,
-): TodoItem[] {
-  return todoLists?.flatMap((todoList) => todoList.state.global.items) ?? [];
-}
-
-/** Shows the documents and folders in the selected drive */
-export function DriveContents() {
-  const selectedFolder = useSelectedFolder();
-  const hasSelectedFolder = selectedFolder !== undefined;
-  return (
-    <div className="space-y-6 px-6">
-      <NavigationBreadcrumbs />
-      {hasSelectedFolder ? <FolderStats /> : <DriveStats />}
-      <Folders />
-      <Files />
-      <EmptyState />
-      <CreateDocument />
-    </div>
-  );
-}
-
-/** Shows the statistics for the selected drive */
-function DriveStats() {
-  const todoListDocumentsInSelectedDrive =
-    useTodoListDocumentsInSelectedDrive();
-  const allTodos = getAllTodoItemsFromTodoLists(
-    todoListDocumentsInSelectedDrive,
-  );
-  const [selectedDrive] = useSelectedDrive();
-  const driveCreatedAt = selectedDrive.header.createdAtUtcIso;
-  const driveLastModified = selectedDrive.header.lastModifiedAtUtcIso;
-
-  return (
-    <Stats
-      todos={allTodos}
-      todoListDocuments={todoListDocumentsInSelectedDrive}
-      createdAtUtcIso={driveCreatedAt}
-      lastModifiedAtUtcIso={driveLastModified}
-    />
-  );
-}
-
-/** Shows the statistics for the selected folder */
-function FolderStats() {
-  const todoListDocumentsInSelectedFolder =
-    useTodoListDocumentsInSelectedFolder();
-  const allTodos = getAllTodoItemsFromTodoLists(
-    todoListDocumentsInSelectedFolder,
-  );
-
-  return (
-    <Stats
-      todos={allTodos}
-      todoListDocuments={todoListDocumentsInSelectedFolder}
-    />
-  );
-}
-```
-
-With this update, you can now see the statistics for the todo lists and todo items for the selected drive, folder or document depending on which you select.
-
- ## Check your work
-
-To make sure all works as expected, we should:
-
-- check types
-run: `pnpm tsc`
-
-- check linting
-run: `pnpm lint`
-
-- check tests
-run: `pnpm test`
-
-- test in connect
-run: `pnpm connect` — you should now be able to see the `<Stats />` component showing the data for your drives, folder and documents.
-
-- make sure your code matches the code in the completed step branch
-run: `git diff step-7-complete-added-shared-component-for-showing-todo-list-stats`
-
-## The end
-
-Congratulations! You now have a working `TodoList` document model, and editor for those documents, and a drive editor for managing those documents. This will make a good starting point for creating your own new implementations. 
-
-We're excited to see what you build!

package/static/img/Vetra-logo-dark.svg

@@ -1,11 +0,0 @@
-<svg width="398" height="81" viewBox="0 0 398 81" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M373.299 10.9033C373.712 10.9033 374.082 11.1566 374.232 11.541L397.676 71.8486C397.931 72.504 397.448 73.2108 396.745 73.2109H383.399C382.983 73.2109 382.61 72.9529 382.463 72.5635L378.19 61.2168L373.516 48.5996L366.507 30.0625L360.499 45.9512H370.305C370.996 45.9512 371.48 46.636 371.247 47.2871L367.094 58.917C366.952 59.315 366.574 59.5811 366.152 59.5811H355.429L354.824 61.2168L350.55 72.5635C350.403 72.9529 350.031 73.2109 349.615 73.2109H336.19C335.487 73.2108 335.003 72.5049 335.257 71.8496L358.626 11.542C358.776 11.1571 359.146 10.9034 359.559 10.9033H373.299Z" fill="#22272E"/>
-<path d="M274.693 73.2113C274.141 73.2113 273.693 72.7635 273.693 72.2113V11.9033C273.693 11.351 274.141 10.9033 274.693 10.9033H307.573C319.489 10.9033 327.823 19.0034 327.823 30.6082C327.823 39.3313 322.761 46.4188 315.05 49.2227L329.696 71.6647C330.13 72.3299 329.652 73.2113 328.858 73.2113H314.119C313.777 73.2113 313.459 73.0367 313.275 72.7483L299.239 50.7025H288.881V72.2113C288.881 72.7635 288.433 73.2113 287.881 73.2113H274.693ZM288.881 37.0727H306.638C310.221 37.0727 312.636 34.5025 312.636 30.8419C312.636 27.1034 310.221 24.5332 306.638 24.5332H288.881V37.0727Z" fill="#22272E"/>
-<path d="M236.798 73.2113C236.246 73.2113 235.798 72.7635 235.798 72.2113V24.5332H217.532C216.814 24.5332 216.33 23.7991 216.613 23.1393L221.597 11.5094C221.755 11.1417 222.116 10.9033 222.516 10.9033H267.51C268.062 10.9033 268.51 11.351 268.51 11.9033V23.5332C268.51 24.0855 268.062 24.5332 267.51 24.5332H250.908V72.2113C250.908 72.7635 250.46 73.2113 249.908 73.2113H236.798Z" fill="#22272E"/>
-<path d="M175.291 73.2113C174.738 73.2113 174.291 72.7635 174.291 72.2113V11.9033C174.291 11.351 174.738 10.9033 175.291 10.9033H215.066C215.784 10.9033 216.268 11.6372 215.985 12.2971L211.003 23.9269C210.846 24.2947 210.484 24.5332 210.084 24.5332H189.481L189.478 34.5803H204.634C205.329 34.5803 205.813 35.273 205.572 35.9259L201.405 47.2442C201.26 47.6374 200.885 47.8987 200.466 47.8987H189.478V59.8929H213.635C214.187 59.8929 214.635 60.3407 214.635 60.8929V72.2113C214.635 72.7635 214.187 73.2113 213.635 73.2113H175.291Z" fill="#22272E"/>
-<path d="M130.753 73.2113C130.341 73.2113 129.97 72.9576 129.821 72.5726L106.452 12.2646C106.198 11.6093 106.681 10.9033 107.384 10.9033H120.811C121.226 10.9033 121.598 11.1604 121.746 11.549L136.766 51.1939C137.092 52.0549 138.31 52.0549 138.636 51.1939L153.657 11.549C153.804 11.1604 154.176 10.9033 154.592 10.9033H167.939C168.642 10.9033 169.126 11.6101 168.871 12.2657L145.426 72.5736C145.277 72.958 144.906 73.2113 144.494 73.2113H130.753Z" fill="#22272E"/>
-<path d="M0 48.3295C0 45.1116 2.60866 42.5029 5.8266 42.5029H9.36418C25.4539 42.5029 38.4972 55.5462 38.4972 71.6359V75.1735C38.4972 78.3914 35.8885 81.0001 32.6706 81.0001H5.8266C2.60865 81.0001 0 78.3914 0 75.1735V48.3295Z" fill="#38C780"/>
-<path d="M0 5.8266C0 2.60865 2.60866 0 5.8266 0H32.6706C35.8885 0 38.4972 2.60866 38.4972 5.8266V9.36418C38.4972 25.4539 25.4539 38.4972 9.36417 38.4972H5.8266C2.60865 38.4972 0 35.8885 0 32.6706V5.8266Z" fill="#38C780"/>
-<path d="M42.5034 71.6359C42.5034 55.5462 55.5467 42.5029 71.6364 42.5029H75.174C78.3919 42.5029 81.0006 45.1116 81.0006 48.3295V75.1735C81.0006 78.3914 78.3919 81.0001 75.174 81.0001H48.33C45.1121 81.0001 42.5034 78.3914 42.5034 75.1735V71.6359Z" fill="#38C780"/>
-<path d="M42.5034 5.8266C42.5034 2.60865 45.1121 0 48.33 0H75.174C78.3919 0 81.0006 2.60866 81.0006 5.8266V32.6706C81.0006 35.8885 78.3919 38.4972 75.174 38.4972H71.6364C55.5467 38.4972 42.5034 25.4539 42.5034 9.36417V5.8266Z" fill="#38C780"/>
-</svg>

package/static/img/vetra-logo-light.svg

@@ -1,11 +0,0 @@
-<svg width="398" height="81" viewBox="0 0 398 81" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M373.299 10.9033C373.712 10.9033 374.082 11.1566 374.232 11.541L397.676 71.8486C397.931 72.5039 397.448 73.2108 396.745 73.2109H383.399C382.983 73.2109 382.61 72.9527 382.463 72.5635L378.19 61.2168L373.516 48.5996L366.507 30.0625L360.499 45.9512H370.305C370.996 45.9512 371.48 46.636 371.247 47.2871L367.094 58.917C366.952 59.3147 366.574 59.5811 366.152 59.5811H355.429L354.824 61.2168L350.55 72.5635C350.403 72.9527 350.031 73.2109 349.615 73.2109H336.19C335.487 73.2109 335.004 72.5048 335.257 71.8496L358.626 11.542C358.776 11.1571 359.146 10.9034 359.559 10.9033H373.299Z" fill="#EFEFEF"/>
-<path d="M274.693 73.2113C274.141 73.2113 273.693 72.7635 273.693 72.2113V11.9033C273.693 11.351 274.141 10.9033 274.693 10.9033H307.573C319.489 10.9033 327.823 19.0034 327.823 30.6082C327.823 39.3313 322.761 46.4188 315.05 49.2227L329.696 71.6647C330.13 72.3299 329.652 73.2113 328.858 73.2113H314.119C313.777 73.2113 313.459 73.0367 313.275 72.7483L299.239 50.7025H288.881V72.2113C288.881 72.7635 288.433 73.2113 287.881 73.2113H274.693ZM288.881 37.0727H306.638C310.221 37.0727 312.636 34.5025 312.636 30.8419C312.636 27.1034 310.221 24.5332 306.638 24.5332H288.881V37.0727Z" fill="#EFEFEF"/>
-<path d="M236.798 73.2113C236.246 73.2113 235.798 72.7635 235.798 72.2113V24.5332H217.532C216.814 24.5332 216.33 23.7991 216.613 23.1393L221.597 11.5094C221.755 11.1417 222.116 10.9033 222.516 10.9033H267.51C268.062 10.9033 268.51 11.351 268.51 11.9033V23.5332C268.51 24.0855 268.062 24.5332 267.51 24.5332H250.908V72.2113C250.908 72.7635 250.46 73.2113 249.908 73.2113H236.798Z" fill="#EFEFEF"/>
-<path d="M175.291 73.2113C174.738 73.2113 174.291 72.7635 174.291 72.2113V11.9033C174.291 11.351 174.738 10.9033 175.291 10.9033H215.066C215.784 10.9033 216.268 11.6372 215.985 12.2971L211.003 23.9269C210.846 24.2947 210.484 24.5332 210.084 24.5332H189.481L189.478 34.5803H204.634C205.329 34.5803 205.813 35.273 205.572 35.9259L201.405 47.2442C201.26 47.6374 200.885 47.8987 200.466 47.8987H189.478V59.8929H213.635C214.187 59.8929 214.635 60.3407 214.635 60.8929V72.2113C214.635 72.7635 214.187 73.2113 213.635 73.2113H175.291Z" fill="#EFEFEF"/>
-<path d="M130.753 73.2113C130.341 73.2113 129.97 72.9576 129.821 72.5726L106.452 12.2646C106.198 11.6093 106.681 10.9033 107.384 10.9033H120.811C121.226 10.9033 121.598 11.1604 121.746 11.549L136.766 51.1939C137.092 52.0549 138.31 52.0549 138.636 51.1939L153.657 11.549C153.804 11.1604 154.176 10.9033 154.592 10.9033H167.939C168.642 10.9033 169.126 11.6101 168.871 12.2657L145.426 72.5736C145.277 72.958 144.906 73.2113 144.494 73.2113H130.753Z" fill="#EFEFEF"/>
-<path d="M0 48.3295C0 45.1116 2.60866 42.5029 5.8266 42.5029H9.36418C25.4539 42.5029 38.4972 55.5462 38.4972 71.6359V75.1735C38.4972 78.3914 35.8885 81.0001 32.6706 81.0001H5.8266C2.60865 81.0001 0 78.3914 0 75.1735V48.3295Z" fill="#38C780"/>
-<path d="M0 5.8266C0 2.60865 2.60866 0 5.8266 0H32.6706C35.8885 0 38.4972 2.60866 38.4972 5.8266V9.36418C38.4972 25.4539 25.4539 38.4972 9.36417 38.4972H5.8266C2.60865 38.4972 0 35.8885 0 32.6706V5.8266Z" fill="#38C780"/>
-<path d="M42.5034 71.6359C42.5034 55.5462 55.5467 42.5029 71.6364 42.5029H75.174C78.3919 42.5029 81.0006 45.1116 81.0006 48.3295V75.1735C81.0006 78.3914 78.3919 81.0001 75.174 81.0001H48.33C45.1121 81.0001 42.5034 78.3914 42.5034 75.1735V71.6359Z" fill="#38C780"/>
-<path d="M42.5034 5.8266C42.5034 2.60865 45.1121 0 48.33 0H75.174C78.3919 0 81.0006 2.60866 81.0006 5.8266V32.6706C81.0006 35.8885 78.3919 38.4972 75.174 38.4972H71.6364C55.5467 38.4972 42.5034 25.4539 42.5034 9.36417V5.8266Z" fill="#38C780"/>
-</svg>