Adapt pyinkui to pyinkcli 0.1.3, fix interactive rendering, and align examples/tests

Author: jstzwj

examples/alert.py

@@ -8,12 +8,13 @@ def App():
         Alert('Your license is expired', variant='error'),
         Alert('Current version of this CLI has been deprecated', variant='warning'),
         Alert("API won't be available tomorrow night", variant='info'),
-        flex_direction='column',
+        flexDirection='column',
+        alignItems='stretch',
         padding=2,
         width=60,
         gap=1,
     )
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/autocomplete.py

@@ -33,12 +33,12 @@ def App():
                 onChange=setValue,
                 visibleOptionCount=5,
             ),
-            flex_direction='column',
+            flexDirection='column',
             gap=1,
         )
     else:
         return Text(f"You've selected {value}")
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/badge.py

@@ -14,4 +14,4 @@ def App():
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/confirm-input.py

@@ -22,4 +22,4 @@ def App():
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/email-input.py

@@ -8,11 +8,11 @@ def App():
     return Box(
         EmailInput(placeholder='Enter email...', onChange=setValue),
         Text(f'Input value: "{value}"'),
-        flex_direction='column',
+        flexDirection='column',
         padding=2,
         gap=1,
     )
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/multi-select.py

@@ -19,11 +19,11 @@ def App():
             onChange=setValue,
         ),
         Text(f"Selected values: {', '.join(value)}"),
-        flex_direction='column',
+        flexDirection='column',
         padding=2,
         gap=1,
     )
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/ordered-list.py

@@ -20,4 +20,4 @@ def App():
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/password-input.py

@@ -8,11 +8,11 @@ def App():
     return Box(
         PasswordInput(placeholder='Enter password...', onChange=setValue),
         Text(f'Input value: "{value}"'),
-        flex_direction='column',
+        flexDirection='column',
         padding=2,
         gap=1,
     )
 
 
 if __name__ == '__main__':
-    render(App).wait_until_exit()
+    render(App, interactive=True).wait_until_exit()

examples/progress-bar.py

@@ -1,8 +1,23 @@
 import threading
 
-from pyinkcli import Box, render
+from pyinkcli import Box, Text, render
 from pyinkcli.hooks import useEffect, useState
-from pyinkui import ProgressBar
+from pyinkui import useComponentTheme
+
+
+def InlineProgressBar(*, value, width):
+    theme = useComponentTheme('ProgressBar')
+    styles = theme['styles']
+    config = theme['config']
+    progress = min(100, max(0, value))
+    complete = round((progress / 100) * width)
+    remaining = width - complete
+    children = []
+    if complete > 0:
+        children.append(Text(config()['completedCharacter'] * complete, **styles['completed']()))
+    if remaining > 0:
+        children.append(Text(config()['remainingCharacter'] * remaining, **styles['remaining']()))
+    return Box(*children)
 
 
 def Example():
@@ -22,8 +37,8 @@ def cleanup():
         return cleanup
 
     useEffect(effect, (progress,))
-    return Box(ProgressBar(value=progress), padding=2, width=30)
+    return Box(InlineProgressBar(value=progress, width=26), padding=2, width=30)
 
 
 if __name__ == '__main__':
-    render(Example).wait_until_exit()
+    render(Example, interactive=True).wait_until_exit()

examples/select/index.py

@@ -0,0 +1,41 @@
+import sys
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parents[2]
+CLI_SRC = ROOT.parent / 'pyinkcli' / 'src'
+UI_SRC = ROOT / 'src'
+
+for candidate in (str(CLI_SRC), str(UI_SRC)):
+    if candidate not in sys.path:
+        sys.path.insert(0, candidate)
+
+from pyinkcli import Box, Text, render
+from pyinkui import Select
+from pyinkcli.hooks import useState
+
+
+def App():
+    value, setValue = useState('')
+    return Box(
+        Select(
+            options=[
+                {'label': 'Red', 'value': 'red'},
+                {'label': 'Green', 'value': 'green'},
+                {'label': 'Yellow', 'value': 'yellow'},
+                {'label': 'Blue', 'value': 'blue'},
+                {'label': 'Magenta', 'value': 'magenta'},
+                {'label': 'Cyan', 'value': 'cyan'},
+                {'label': 'White', 'value': 'white'},
+            ],
+            onChange=setValue,
+        ),
+        Text(f'Selected value: {value}'),
+        flexDirection='column',
+        padding=2,
+        gap=1,
+    )
+
+
+if __name__ == '__main__':
+    render(App, interactive=True).wait_until_exit()