Layout tweaks (#27)

.pre-commit-config.yaml

@@ -36,10 +36,10 @@ repos:
 
   - repo: local
     hooks:
-      - id: codegen-colors
-        name: generate color utilities
+      - id: generate-utilities
+        name: generate utilities
         language: system
-        entry: codegen/colors.py
+        entry: codegen/generate_utilities.py
         always_run: true
         pass_filenames: false
 

codegen/colors.py → codegen/generate_utilities.py

@@ -1,9 +1,20 @@
 #!/usr/bin/env python3
 
 from pathlib import Path
+from typing import get_args, get_type_hints
+
+from reprisal.styles.styles import BorderKind, Flex
+
+
+def literal_vals(obj: object, field: str) -> tuple[str, ...]:
+    return get_args(get_type_hints(obj)[field])
+
+
+SIDES = ["top", "bottom", "left", "right"]
+N = list(range(9))
 
 # From https://github.com/tailwindlabs/tailwindcss/blob/37575ea0bd573a96d10f3ba4d063020abc7c5825/src/public/colors.js
-colors = {
+COLORS = {
     "slate": {
         50: "#f8fafc",
         100: "#f1f5f9",
@@ -296,11 +307,13 @@
 
 utils_text = utils_path.read_text().splitlines(keepends=False)
 
-start = utils_text.index("# Start generated Tailwind colors")
-stop = utils_text.index("# Stop generated Tailwind colors")
+start = utils_text.index("# Start generated")
+stop = utils_text.index("# Stop generated")
+
 
 generated_lines = [""]
-for color, shades in colors.items():
+
+for color, shades in COLORS.items():
     for shade, hex in shades.items():
         generated_lines.extend(
             [
@@ -315,6 +328,76 @@
 
     generated_lines.append("")
 
+for d in literal_vals(Flex, "direction"):
+    generated_lines.append(f'{d[:3]} = Style(layout=Flex(direction="{d}"))')
+
+generated_lines.append("")
+
+for j in literal_vals(Flex, "justify_children"):
+    generated_lines.append(f'justify_children_{j.replace("-", "_")} = Style(layout=Flex(justify_children="{j}"))')
+
+generated_lines.append("")
+
+for a in literal_vals(Flex, "align_children"):
+    generated_lines.append(f'align_children_{a.replace("-", "_")} = Style(layout=Flex(align_children="{a}"))')
+
+generated_lines.append("")
+
+generated_lines.append("weight_none = Style(layout=Flex(weight=None))")
+for n in N:
+    if n <= 0:
+        continue
+    generated_lines.append(f"weight_{n} = Style(layout=Flex(weight={n}))")
+
+generated_lines.append("")
+
+generated_lines.append("border_none = Style(border=None)")
+for b in BorderKind:
+    generated_lines.append(f"border_{b.name.lower()} = Style(border=Border(kind=BorderKind.{b.name}))")
+
+generated_lines.append("")
+
+
+for side in SIDES:
+    for n in N:
+        generated_lines.append(f"pad_{side}_{n} = Style(padding=Padding({side}={n}))")
+    generated_lines.append("")
+
+for n in N:
+    generated_lines.append(f"pad_x_{n} = Style(padding=Padding(left={n}, right={n}))")
+
+generated_lines.append("")
+
+for n in N:
+    generated_lines.append(f"pad_y_{n} = Style(padding=Padding(top={n}, bottom={n}))")
+
+generated_lines.append("")
+
+for n in N:
+    generated_lines.append(f"pad_{n} = Style(padding=Padding(top={n}, bottom={n}, left={n}, right={n}))")
+
+generated_lines.append("")
+
+for side in SIDES:
+    for n in N:
+        generated_lines.append(f"margin_{side}_{n} = Style(margin=Margin({side}={n}))")
+    generated_lines.append("")
+
+for n in N:
+    generated_lines.append(f"margin_x_{n} = Style(margin=Margin(left={n}, right={n}))")
+
+generated_lines.append("")
+
+for n in N:
+    generated_lines.append(f"margin_y_{n} = Style(margin=Margin(top={n}, bottom={n}))")
+
+generated_lines.append("")
+
+for n in N:
+    generated_lines.append(f"margin_{n} = Style(margin=Margin(top={n}, bottom={n}, left={n}, right={n}))")
+
+generated_lines.append("")
+
 utils_path.write_text(
     "\n".join(
         [

examples/end_to_end.py

@@ -74,13 +74,13 @@ def on_key(event: KeyPressed) -> None:
                     time() if toggled else textpad(),
                 ],
                 style=Style(
-                    display=Flex(direction="row"),
+                    layout=Flex(direction="row"),
                     border=Border(kind=BorderKind.LightRounded),
                 ),
             ),
         ],
         style=Style(
-            display=Flex(
+            layout=Flex(
                 direction="column",
                 # TODO: without align_children="stretch", the children don't grow in width, even though they have text in them...
                 # maybe I'm applying auto width too late?

examples/justify_and_align.py

@@ -30,7 +30,7 @@ def content(justify_children: str, align_children: str, n: int) -> Text:
         ),
         style=Style(
             # TODO: width=auto doesn't make sense if weight=None, combine?
-            display=Flex(
+            layout=Flex(
                 weight=None,
             ),
             span=Span(
@@ -46,7 +46,7 @@ def content(justify_children: str, align_children: str, n: int) -> Text:
     Div(
         children=[content(justify_children, align_children, n=n) for n in range(3)],
         style=Style(
-            display=Flex(
+            layout=Flex(
                 direction="row",
                 justify_children=justify_children,  # type: ignore[arg-type]
                 align_children=align_children,  # type: ignore[arg-type]
@@ -73,7 +73,7 @@ def content(justify_children: str, align_children: str, n: int) -> Text:
 root = Div(
     children=children,
     style=Style(
-        display=Flex(direction="column", align_children="stretch"),
+        layout=Flex(direction="column", align_children="stretch"),
         span=Span(
             width=w,
             height=20 * len(children),

examples/justify_and_align_flex.py

@@ -30,7 +30,7 @@ def content(justify_children: str, align_children: str, n: int) -> Text:
         ),
         style=Style(
             # TODO: width=auto doesn't make sense if weight=None, combine?
-            display=Flex(
+            layout=Flex(
                 weight=2 if n == 1 else 1,
             ),
             span=Span(
@@ -46,7 +46,7 @@ def content(justify_children: str, align_children: str, n: int) -> Text:
     Div(
         children=[content(justify_children, align_children, n=n) for n in range(3)],
         style=Style(
-            display=Flex(
+            layout=Flex(
                 direction="row",
                 justify_children=justify_children,  # type: ignore[arg-type]
                 align_children=align_children,  # type: ignore[arg-type]
@@ -73,7 +73,7 @@ def content(justify_children: str, align_children: str, n: int) -> Text:
 root = Div(
     children=children,
     style=Style(
-        display=Flex(direction="column", align_children="stretch"),
+        layout=Flex(direction="column", align_children="stretch"),
         span=Span(
             width=w,
             height=20 * len(children),

examples/stopwatch.py

@@ -9,24 +9,69 @@
 from reprisal.events import KeyPressed
 from reprisal.hooks import use_effect, use_state
 from reprisal.keys import Key
-from reprisal.styles import Border, BorderKind, Style
-from reprisal.styles.styles import Flex, Padding, Span, Typography
-from reprisal.styles.utilities import (
-    border_emerald_500,
-    border_rose_500,
-    border_slate_400,
-    text_slate_200,
-)
+from reprisal.styles.utilities import *
 
 logger = get_logger()
 
 
 @component
-def stopwatch() -> Div:
+def root() -> Div:
+    num_stopwatches = 3
+
+    selected_stopwatch, set_selected_stopwatch = use_state(0)
+
+    def on_key(event: KeyPressed) -> None:
+        match event.key:
+            case Key.Tab:
+                set_selected_stopwatch(lambda s: (s + 1) % num_stopwatches)
+            case Key.BackTab:
+                set_selected_stopwatch(lambda s: (s - 1) % num_stopwatches)
+
+    return Div(
+        style=col | align_children_center,
+        children=[
+            Div(
+                style=row | weight_none,
+                children=[
+                    Text(
+                        content="Stopwatch Example",
+                        style=text_amber_600,
+                    )
+                ],
+            ),
+            Div(
+                style=row | align_children_center,
+                children=[stopwatch(selected=selected_stopwatch == n) for n in range(num_stopwatches)],
+                on_key=on_key,
+            ),
+            Div(
+                style=row | align_children_center,
+                children=[
+                    Text(
+                        content=dedent(
+                            """\
+                            - <tab>/<shift+tab> to select next/previous stopwatch
+                            - <space> to start/stop selected stopwatch
+                            - <backspace> to reset selected stopwatch
+                            """
+                        ),
+                        style=border_slate_400 | text_slate_200 | border_lightrounded | pad_x_2 | pad_y_1,
+                    ),
+                ],
+            ),
+        ],
+    )
+
+
+@component
+def stopwatch(selected: bool) -> Text:
     running, set_running = use_state(False)
     elapsed_time, set_elapsed_time = use_state(0.0)
 
     def on_key(event: KeyPressed) -> None:
+        if not selected:
+            return
+
         match event.key:
             case Key.Space:
                 set_running(not running)
@@ -46,74 +91,14 @@ async def tick() -> None:
 
     use_effect(tick, deps=(running,))
 
-    border_color = border_emerald_500 if running else border_rose_500
-
-    content = f"{elapsed_time:.6f}"
-
-    return Div(
-        style=Style(
-            display=Flex(
-                direction="column",
-                align_children="center",
-            ),
-        ),
-        children=[
-            Div(
-                style=Style(
-                    display=Flex(
-                        direction="row",
-                        align_children="center",
-                    ),
-                ),
-                children=[
-                    Text(
-                        content=content,
-                        style=border_color
-                        | Style(
-                            span=Span(
-                                # TODO: width should get set automatically for this element, but its not
-                                # the problem is that the available width in this block is zero because when the column div
-                                # lays out, it decides the width of the row div is zero because its stretch,
-                                # and the row div doesn't know how its supposed to be yet
-                                # does align self solve this problem? you set parent to stretch, then center the text box?
-                                width=len(content)
-                            ),
-                            border=Border(kind=BorderKind.Double),
-                            padding=Padding(top=1, bottom=1, left=2, right=2),
-                        ),
-                    ),
-                ],
-            ),
-            Div(
-                style=Style(
-                    display=Flex(
-                        direction="row",
-                        align_children="center",
-                    ),
-                ),
-                children=[
-                    Text(
-                        content=dedent(
-                            """\
-                            <space> to start/stop
-
-                            <backspace> to reset
-                            """
-                        ),
-                        style=border_slate_400
-                        | text_slate_200
-                        | Style(
-                            span=Span(width=30),
-                            border=Border(kind=BorderKind.LightRounded),
-                            padding=Padding(top=1, bottom=1, left=2, right=2),
-                            typography=Typography(justify="center"),
-                        ),
-                    ),
-                ],
-            ),
-        ],
+    return Text(
+        content=f"{elapsed_time:.6f}",
+        style=(border_emerald_500 if running else border_rose_500)
+        | (border_heavy if selected else border_double)
+        | pad_x_2
+        | pad_y_1,
         on_key=on_key,
     )
 
 
-asyncio.run(app(stopwatch))
+asyncio.run(app(root))