Customize each component doc page and organize overall component docs

docs/components/badge.md

@@ -1 +1,13 @@
-::: mesop.components.badge.badge
+## Overview
+
+Badge decorates a UI component and is oftentimes used for unread message count and is based on the [Angular Material badge component](https://material.angular.io/components/badge/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/badge/e2e/badge_app.py"
+```
+
+## API
+
+::: mesop.components.badge.badge.badge

docs/components/box.md

@@ -1 +1,13 @@
-::: mesop.components.box.box
+## Overview
+
+Box is a container component which is used for grouping children components and styling them.
+
+## Examples
+
+```python
+--8<-- "mesop/components/box/e2e/box_app.py"
+```
+
+## API
+
+::: mesop.components.box.box.box

docs/components/button.md

@@ -1 +1,14 @@
-::: mesop.components.button.button
+## Overview
+
+Button is based on the [Angular Material button component](https://material.angular.io/components/button/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/examples/buttons.py"
+```
+
+## API
+
+::: mesop.components.button.button.button
+::: mesop.events.ClickEvent

docs/components/checkbox.md

@@ -1,6 +1,15 @@
-::: mesop.components.checkbox.checkbox
-options:
-members:
- - checkbox
- - CheckboxChangeEvent
- - CheckboxIndeterminateChangeEvent
+## Overview
+
+Checkbox is a multi-selection form control and is based on the [Angular Material checkbox component](https://material.angular.io/components/checkbox/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/checkbox/e2e/checkbox_app.py"
+```
+
+## API
+
+::: mesop.components.checkbox.checkbox.checkbox
+::: mesop.components.checkbox.checkbox.CheckboxChangeEvent
+::: mesop.components.checkbox.checkbox.CheckboxIndeterminateChangeEvent

docs/components/divider.md

@@ -1 +1,13 @@
-::: mesop.components.divider.divider
+## Overview
+
+Divider is used to provide visual separation and is based on the [Angular Material divider component](https://material.angular.io/components/divider/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/divider/e2e/divider_app.py"
+```
+
+## API
+
+::: mesop.components.divider.divider.divider

docs/components/icon.md

@@ -1 +1,13 @@
-::: mesop.components.icon.icon
+## Overview
+
+Icon displays a Material icon/symbol and is based on the [Angular Material icon component](https://material.angular.io/components/icon/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/icon/e2e/icon_app.py"
+```
+
+## API
+
+::: mesop.components.icon.icon.icon

docs/components/input.md

@@ -1 +1,14 @@
-::: mesop.components.input.input
+## Overview
+
+Input allows the user to type in a value and is based on the [Angular Material input component](https://material.angular.io/components/input/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/input/e2e/input_app.py"
+```
+
+## API
+
+::: mesop.components.input.input.input
+::: mesop.components.input.input.Textarea

docs/components/markdown.md

@@ -1 +1,13 @@
-::: mesop.components.markdown.markdown
+## Overview
+
+Markdown is used to render markdown text.
+
+## Examples
+
+```python
+--8<-- "mesop/components/markdown/e2e/markdown_app.py"
+```
+
+## API
+
+::: mesop.components.markdown.markdown.markdown

docs/components/progress_bar.md

@@ -1 +1,13 @@
-::: mesop.components.progress_bar.progress_bar
+## Overview
+
+Progress Bar is used to indicate something is in progress and is based on the [Angular Material progress bar component](https://material.angular.io/components/progress-bar/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/progress_bar/e2e/progress_bar_app.py"
+```
+
+## API
+
+::: mesop.components.progress_bar.progress_bar.progress_bar

docs/components/progress_spinner.md

@@ -1 +1,15 @@
-::: mesop.components.progress_spinner.progress_spinner
+## Overview
+
+Progress Spinner is used to indicate something is in progress and is based on the [Angular Material progress spinner component](https://material.angular.io/components/progress-spinner/overview).
+
+> NOTE: `spinner` is an alias for `progress_spinner`
+
+## Examples
+
+```python
+--8<-- "mesop/components/progress_spinner/e2e/progress_spinner_app.py"
+```
+
+## API
+
+::: mesop.components.progress_spinner.progress_spinner.progress_spinner

docs/components/radio.md

@@ -1 +1,15 @@
-::: mesop.components.radio.radio
+## Overview
+
+Radio is a single selection form control based on the [Angular Material radio component](https://material.angular.io/components/radio/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/radio/e2e/radio_app.py"
+```
+
+## API
+
+::: mesop.components.radio.radio.radio
+
+::: mesop.components.radio.radio.RadioOption

docs/components/select.md

@@ -1 +1,13 @@
-::: mesop.components.select.select
+## Overview
+
+Select allows the user to choose from a list of values and is based on the [Angular Material select component](https://material.angular.io/components/select/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/select/e2e/select_app.py"
+```
+
+## API
+
+::: mesop.components.select.select.select

docs/components/slide_toggle.md

@@ -1 +1,13 @@
-::: mesop.components.slide_toggle.slide_toggle
+## Overview
+
+Slide Toggle allows the user to toggle on and off and is based on the [Angular Material slide toggle component](https://material.angular.io/components/slide-toggle/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/slide_toggle/e2e/slide_toggle_app.py"
+```
+
+## API
+
+::: mesop.components.slide_toggle.slide_toggle.slide_toggle

docs/components/slider.md

@@ -1 +1,13 @@
-::: mesop.components.slider.slider
+## Overview
+
+Slider allows the user to select from a range of values and is based on the [Angular Material slider component](https://material.angular.io/components/slider/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/slider/e2e/slider_app.py"
+```
+
+## API
+
+::: mesop.components.slider.slider.slider

docs/components/text.md

@@ -1 +1,13 @@
-::: mesop.components.text.text
+## Overview
+
+Text displays text as-is. If you have markdown text, use the [Markdown](./markdown.md) component.
+
+## Examples
+
+```python
+--8<-- "mesop/components/text/e2e/text_app.py"
+```
+
+## API
+
+::: mesop.components.text.text.text

docs/components/tooltip.md

@@ -1 +1,13 @@
-::: mesop.components.tooltip.tooltip
+## Overview
+
+Tooltip is based on the [Angular Material tooltip component](https://material.angular.io/components/tooltip/overview).
+
+## Examples
+
+```python
+--8<-- "mesop/components/tooltip/e2e/tooltip_app.py"
+```
+
+## API
+
+::: mesop.components.tooltip.tooltip.tooltip

mesop/components/box/e2e/box_app.py

@@ -1,16 +1,6 @@
 import mesop as me
 
 
-@me.stateclass
-class State:
-  is_toggled: bool
-
-
-def on_click(e: me.ClickEvent):
-  state = me.state(State)
-  state.is_toggled = not state.is_toggled
-
-
 @me.page(path="/components/box/e2e/box_app")
 def app():
   with me.box(
@@ -22,28 +12,3 @@ def app():
   ):
     me.text(text="hi1")
     me.text(text="hi2")
-
-  with me.box(
-    on_click=on_click,
-    style="""
-  background-color: lightblue;
-  height: 50px;
-  width: 50px;
-  cursor: pointer;
-  position: relative;
-  """,
-  ):
-    me.text("click me")
-    if me.state(State).is_toggled:
-      with me.box(
-        style="""
-      height: 100px;
-      width: 100px;
-      background: orange;
-      position: absolute;
-      left: 48px;
-      top: 48px;
-      """
-      ):
-        me.text("in popover")
-  me.text("some other text")

mesop/components/checkbox/e2e/checkbox_app.py

@@ -12,21 +12,15 @@ def on_update(event: me.CheckboxChangeEvent):
   state.checked = event.checked
 
 
-def on_indeterminate_change(event: me.CheckboxIndeterminateChangeEvent):
-  state = me.state(State)
-  state.indeterminate = event.indeterminate
-
-
 @me.page(path="/components/checkbox/e2e/checkbox_app")
 def app():
   state = me.state(State)
   with me.checkbox(
     aria_label="aria_checkbox",
     on_change=on_update,
     checked=state.checked,
-    on_indeterminate_change=on_indeterminate_change,
   ):
-    me.text(text="checked=True")
+    me.text(text="label")
 
   if state.checked:
     me.text(text="is checked")

mesop/components/input/e2e/input_app.py

@@ -4,27 +4,17 @@
 @me.stateclass
 class State:
   input: str = ""
-  count: int = 0
-  checked: bool = False
 
 
 def on_input(e: me.InputEvent):
   state = me.state(State)
   state.input = e.value
 
 
-def on_change(e: me.CheckboxChangeEvent):
-  state = me.state(State)
-  state.checked = e.checked
-
-
 @me.page(path="/components/input/e2e/input_app")
 def app():
-  me.text(text="Hello, world!")
-  with me.checkbox(on_change=on_change):
-    me.text(text="check")
   s = me.state(State)
-  me.input(label="Basic input", on_input=on_input, key=str(s.checked))
+  me.input(label="Basic input", on_input=on_input)
   me.text(text=s.input)
 
   me.input(label="Textarea", type=me.Textarea(), on_input=on_input)

mesop/components/input/e2e/input_test.ts

@@ -1,8 +1,9 @@
-import {test, expect} from '@playwright/test';
+import {test} from '@playwright/test';
 
 test('test', async ({page}) => {
   await page.goto('/components/input/e2e/input_app');
-  expect(await page.getByText('Hello, world!').textContent()).toContain(
-    'Hello, world!',
-  );
+  // TODO: write test.
+  // expect(await page.getByText('Hello, world!').textContent()).toContain(
+  //   'Hello, world!',
+  // );
 });

mesop/components/progress_spinner/e2e/progress_spinner_app.py

@@ -3,5 +3,6 @@
 
 @me.page(path="/components/progress_spinner/e2e/progress_spinner_app")
 def app():
-  me.text(text="Hello, world!")
+  me.text(text="Two usages of spinners")
+  me.spinner()  # spinner is the same as progress_spinner
   me.progress_spinner(diameter=40, stroke_width=4)

mesop/components/progress_spinner/e2e/progress_spinner_test.ts

@@ -2,7 +2,7 @@ import {test, expect} from '@playwright/test';
 
 test('test', async ({page}) => {
   await page.goto('/components/progress_spinner/e2e/progress_spinner_app');
-  expect(await page.getByText('Hello, world!').textContent()).toContain(
-    'Hello, world!',
-  );
+  expect(
+    await page.getByText('Two usages of spinners').textContent(),
+  ).toContain('Two usages of spinners');
 });

mesop/components/radio/e2e/radio_app.py

@@ -17,8 +17,8 @@ def app():
   me.radio(
     on_change=on_change,
     options=[
-      me.RadioOption(label="Hello", value="1"),
-      me.RadioOption(label="Hello2", value="2"),
+      me.RadioOption(label="Option 1", value="1"),
+      me.RadioOption(label="Option 2", value="2"),
     ],
     value=s.radio_value,
   )