Create kino_ui_widgets.livemd

public-apps/kino_ui_widgets.livemd

@@ -0,0 +1,88 @@
+<!-- livebook:{"app_settings":{"access_type":"public","auto_shutdown_ms":3600000,"output_type":"rich","show_source":true,"slug":"kino-widgets"}} -->
+
+# Kino UI widgets
+
+```elixir
+Mix.install([
+  {:kino, "~> 0.12.3"}
+])
+```
+
+## Kino.Input
+
+````elixir
+defmodule Helpers do
+  def display_widget_demo("select") do
+    code =
+      quote do
+        Kino.Input.select("select", en: "English", fr: "Français")
+      end
+
+    markdown = build_code_sample("select", code)
+
+    render_input_demo(markdown, code)
+  end
+
+  def display_widget_demo(function_name) do
+    code =
+      quote do
+        Kino.Input.unquote(String.to_atom(function_name))(unquote(function_name))
+      end
+
+    markdown = build_code_sample(function_name, code)
+
+    render_input_demo(markdown, code)
+  end
+
+  defp build_code_sample(title, code) do
+    Kino.Markdown.new("""
+    ### #{title}
+
+    ```elixir
+    #{Macro.to_string(code)}
+    ```
+    """)
+  end
+
+  defp render_input_demo(code_sample_markdown, code) do
+    {result, _bindings} = Code.eval_quoted(code)
+
+    Kino.render(
+      Kino.Layout.grid([code_sample_markdown, result, Kino.HTML.new("<br/>")], boxed: true)
+    )
+
+    Kino.render(Kino.HTML.new("<br/>"))
+  end
+end
+````
+
+```elixir
+import Helpers
+```
+
+```elixir
+Kino.Markdown.new("## Kino.input")
+```
+
+```elixir
+kino_input_functions = ~w(
+audio
+checkbox
+color
+file
+image
+number
+password
+range
+select
+text
+textarea
+url
+utc_datetime
+utc_time
+)
+
+Enum.each(kino_input_functions, fn function_name ->
+  display_widget_demo(function_name)
+end)
+```