docs: add todolist example

packages/demo/bsconfig.json

@@ -1,8 +1,9 @@
 {
   "name": "reason-scripts",
-  "sources": [
-    "src"
-  ],
+  "sources": {
+    "dir" : "src",
+    "subdirs" : true
+  },
   "bs-dependencies": [
     "bs-reform",
     "reason-react",

packages/demo/src/App.re

@@ -16,10 +16,13 @@ let make = (~message) => {
       <a href="/new-post"> "New post form demo "->React.string </a>
       <br />
       <a href="/fav-colors"> "Form with array field demo"->React.string </a>
+      <br />
+      <a href="/todo"> "Form with array todo demo"->React.string </a>
       <div style={ReactDOMRe.Style.make(~padding="100px", ())}>
         {switch (url.path) {
          | ["new-post"] => <PostAddNext />
          | ["fav-colors"] => <FavoriteColorsForm />
+         | ["todo"] => <TodoListForm />
          | _ =>
            <p className="App-intro">
              {ReasonReact.string("Say hello to ReForm")}

packages/demo/src/modules/TodoListForm.re

@@ -0,0 +1,91 @@
+open BsReform;
+
+module TodoLenses = [%lenses
+  type todo = {
+    content: string,
+    completed: bool,
+  }
+];
+
+module StateLenses = [%lenses type state = {todos: array(TodoLenses.todo)}];
+
+module TodoForm = ReForm.Make(StateLenses);
+
+[@react.component]
+let make = () => {
+  let {state, submit, arrayPush, arrayUpdateByIndex, arrayRemoveByIndex}: TodoForm.api =
+    TodoForm.use(
+      ~schema={
+        TodoForm.Validation.Schema([|
+          Custom(
+            Todos,
+            ({todos}) => {
+              let length = Array.length(todos);
+
+              length < 0
+              || Belt.Array.some(todos, item =>
+                   Js.String.length(item.content) == 0
+                 )
+                ? Error("Invalid todo") : Valid;
+            },
+          ),
+        |]);
+      },
+      ~onSubmit=
+        ({state}) => {
+          Js.log2("State", state);
+          None;
+        },
+      ~initialState={todos: [||]},
+      (),
+    );
+
+  <div>
+    <form
+      onSubmit={event => {
+        ReactEvent.Synthetic.preventDefault(event);
+        submit();
+      }}>
+      <button
+        onClick={_ => arrayPush(Todos, {content: "", completed: false})}>
+        {"Add Task" |> React.string}
+      </button>
+      {state.values.todos
+       ->Belt.Array.mapWithIndex((index, todo) =>
+           <>
+             <hr />
+             <label>
+               <span> {" Task description " |> React.string} </span>
+               <input
+                 value={todo.content}
+                 onChange={BsReform.Helpers.handleChange(content =>
+                   arrayUpdateByIndex(
+                     ~field=Todos,
+                     ~index,
+                     {...todo, content},
+                   )
+                 )}
+               />
+             </label>
+             <span>
+               {(todo.completed ? "Done" : "Not done") |> React.string}
+             </span>
+             <button
+               onClick={_ =>
+                 arrayUpdateByIndex(
+                   ~field=Todos,
+                   ~index,
+                   {...todo, completed: !todo.completed},
+                 )
+               }>
+               {"Toggle" |> React.string}
+             </button>
+             <button onClick={_ => arrayRemoveByIndex(Todos, index)}>
+               {"Remove" |> React.string}
+             </button>
+           </>
+         )
+       ->React.array}
+    </form>
+  </div>;
+};