finish off creating interfaces main content

Author: rmorshea

docs/source/_examples/creating_interfaces/sorted_and_filtered_todo_list.py

@@ -0,0 +1,32 @@
+from idom import component, html, run
+
+
+@component
+def DataList(items, filter_by_priority=None, sort_by_priority=False):
+    if filter_by_priority is not None:
+        items = [i for i in items if i["priority"] <= filter_by_priority]
+    if sort_by_priority:
+        items = list(sorted(items, key=lambda i: i["priority"]))
+    list_item_elements = [html.li(i["text"]) for i in items]
+    return html.ul(list_item_elements)
+
+
+@component
+def TodoList():
+    tasks = [
+        {"text": "Make breakfast", "priority": 0},
+        {"text": "Feed the dog", "priority": 0},
+        {"text": "Do laundry", "priority": 2},
+        {"text": "Go on a run", "priority": 1},
+        {"text": "Clean the house", "priority": 2},
+        {"text": "Go to the grocery store", "priority": 2},
+        {"text": "Do some coding", "priority": 1},
+        {"text": "Read a book", "priority": 1},
+    ]
+    return html.section(
+        html.h1("My Todo List"),
+        DataList(tasks, filter_by_priority=1, sort_by_priority=True),
+    )
+
+
+run(TodoList)

docs/source/_examples/creating_interfaces/todo_from_list.py

@@ -0,0 +1,28 @@
+from idom import component, html, run
+
+
+@component
+def DataList(items):
+    list_item_elements = [html.li(text) for text in items]
+    return html.ul(list_item_elements)
+
+
+@component
+def TodoList():
+    tasks = [
+        "Make breakfast (important)",
+        "Feed the dog (important)",
+        "Do laundry",
+        "Go on a run (important)",
+        "Clean the house",
+        "Go to the grocery store",
+        "Do some coding",
+        "Read a book (important)",
+    ]
+    return html.section(
+        html.h1("My Todo List"),
+        DataList(tasks),
+    )
+
+
+run(TodoList)

docs/source/_examples/creating_interfaces/todo_list_with_keys.py

@@ -0,0 +1,32 @@
+from idom import component, html, run
+
+
+@component
+def DataList(items, filter_by_priority=None, sort_by_priority=False):
+    if filter_by_priority is not None:
+        items = [i for i in items if i["priority"] <= filter_by_priority]
+    if sort_by_priority:
+        items = list(sorted(items, key=lambda i: i["priority"]))
+    list_item_elements = [html.li(i["text"], key=i["id"]) for i in items]
+    return html.ul(list_item_elements)
+
+
+@component
+def TodoList():
+    tasks = [
+        {"id": 0, "text": "Make breakfast", "priority": 0},
+        {"id": 1, "text": "Feed the dog", "priority": 0},
+        {"id": 2, "text": "Do laundry", "priority": 2},
+        {"id": 3, "text": "Go on a run", "priority": 1},
+        {"id": 4, "text": "Clean the house", "priority": 2},
+        {"id": 5, "text": "Go to the grocery store", "priority": 2},
+        {"id": 6, "text": "Do some coding", "priority": 1},
+        {"id": 7, "text": "Read a book", "priority": 1},
+    ]
+    return html.section(
+        html.h1("My Todo List"),
+        DataList(tasks, filter_by_priority=1, sort_by_priority=True),
+    )
+
+
+run(TodoList)

docs/source/conf.py

@@ -7,6 +7,7 @@
 # http://www.sphinx-doc.org/en/master/config
 
 import sys
+from doctest import NORMALIZE_WHITESPACE
 from pathlib import Path
 
 
@@ -102,6 +103,10 @@
 # Controls how sphinx.ext.autodoc represents typehints in the function signature
 autodoc_typehints = "description"
 
+# -- Doc Test Configuration -------------------------------------------------------
+
+doctest_default_flags = NORMALIZE_WHITESPACE
+
 # -- Extension Configuration ------------------------------------------------------
 
 # -- MyST Parser --

docs/source/creating-interfaces/dynamic-element-children.rst

@@ -6,7 +6,7 @@ Creating Interfaces
 
     html-with-idom
     your-first-components
-    dynamic-element-children
+    rendering-data
 
 .. dropdown:: :octicon:`bookmark-fill;2em` What You'll Learn
     :color: info
@@ -19,19 +19,19 @@ Creating Interfaces
             :link: html-with-idom
             :link-type: doc
 
-            Learn how to construct HTML layouts with IDOM.
+            Construct HTML layouts with IDOM.
 
         .. grid-item-card:: :octicon:`package` Your First Components
             :link: your-first-components
             :link-type: doc
 
-            Discover how to define and use components.
+            Define and use components.
 
-        .. grid-item-card:: :octicon:`versions` Dynamic Element Children
-            :link: dynamic-element-children
+        .. grid-item-card:: :octicon:`versions` Rendering Data
+            :link: rendering-data
             :link-type: doc
 
-            Correctly render lists of child elements that may change in length or order.
+            Render HTML elements and components from raw data
 
 IDOM is a Python package for making user interfaces (UI). These interfaces are built
 from small elements of functionality like buttons text and images. IDOM allows you to
@@ -92,19 +92,11 @@ components are just a normal Python functions that return :ref:`HTML <HTML with
 The one special thing about them that we'll concern ourselves with now, is that to
 create them we need to add an ``@component`` `decorator
 <https://realpython.com/primer-on-python-decorators/>`__. To see what this looks like in
-practice we'll put the todo list HTML from above into a component:
+practice we'll quickly make a ``Photo`` component:
 
 .. example:: creating_interfaces.simple_photo
     :activate-result:
 
 
-Section 3: Parametrizing Components
------------------------------------
-
-
-Section 4: Conditional Rendering
---------------------------------
-
-
-Section 5: Dynamic Element Children
------------------------------------
+Section 3: Rendering Data
+-------------------------