Interactive Guides

[BrooklinJazz]

Overview

This PR introduces the following guides:

• closes LiveView Native SwiftUI: Getting Started #86
• closes LiveView Native SwiftUI: Create SwiftUI Application #88
• closes LiveView Native SwiftUI: SwiftUI Views #89
• closes LiveView Native SwiftUI: Event Bindings #91

**Testing this PR requires the main version of Livebook. You can go here to install it using Escript: https://github.com/livebook-dev/livebook#escript

This PR also introduces the mix ex_doc_guides task, which formats the .livemd files into .md files. These .md files have content stripped and other formatting improvements, such as the run-in livebook badge.

[bcardarella]

@BrooklinJazz this PR seems fine but I didn't do a content review. Let's do the content review on our call.

[carson-katri]

This looks great! I really like the "Your Turn" sections.

I think some other useful elements to include would be:

• List - provides a system-specific interface, and has better performance for large amounts of scrolling elements
• ScrollView - more customizable than list. This could also mention LazyVStack, LazyHStack, LazyVGrid, and LazyHGrid. These are crucial for performance when using ScrollView with large amounts of items, and should be preferred over VStack, HStack, and Grid for scrollable content.
• TextField, Toggle, Stepper, DatePicker, and other form controls

[BrooklinJazz]

This looks great! I really like the "Your Turn" sections.

I think some other useful elements to include would be:

• List - provides a system-specific interface, and has better performance for large amounts of scrolling elements
• ScrollView - more customizable than list. This could also mention LazyVStack, LazyHStack, LazyVGrid, and LazyHGrid. These are crucial for performance when using ScrollView with large amounts of items, and should be preferred over VStack, HStack, and Grid for scrollable content.
• TextField, Toggle, Stepper, DatePicker, and other form controls

I've added everything except for the form controls, as they are covered in the event bindings/interactive views section.

[carson-katri]

List Selection

def mount(_params, _session, socket) do
  {:ok, assign(socket, selection: "1")}
end

def render(assigns) do
  ~SWIFTUI"""
  <List selection={@selection} phx-change="selection-changed">
    <Text id={"#{i}"} :for={i <- 1..10}><%= i %></Text>
  </List>
  """
end

def handle_event("selection-changed", %{ "selection" => selection }, socket) do
  {:noreply, assign(socket, selection: selection)}
end

Hierarchical List (Disclosure Group)

<List>
  <DisclosureGroup>
    <Text template="label">Level 1</Text>
    <DisclosureGroup>
      <Text template="label">Level 2</Text>
      <DisclosureGroup>
        <Text template="label">Level 3</Text>
        Content
      </DisclosureGroup>
    </DisclosureGroup>
  </DisclosureGroup>
</List>

Hierarchical List (Section)

<List>
  <Section>
    <Text template="header">Header</Text>
    Content
    <Text template="footer">Footer</Text>
  </Section>
</List>

Refreshable List (requires liveview-native/liveview-client-swiftui#1212)

def render(assigns) do
  ~SWIFTUI"""
  <List class="refreshable">
    <Text id={"#{i}"} :for={i <- 1..10}><%= i %></Text>
  </List>
  """
end

def handle_event("refresh", _params, socket) do
  {:noreply, socket}
end

Stylesheet:

"refreshable" do
  refreshable(action: event("on-refresh"))
end

[BrooklinJazz]

List Selection

def mount(_params, _session, socket) do
  {:ok, assign(socket, selection: "1")}
end

def render(assigns) do
  ~SWIFTUI"""
  <List selection={@selection} phx-change="selection-changed">
    <Text id={"#{i}"} :for={i <- 1..10}><%= i %></Text>
  </List>
  """
end

def handle_event("selection-changed", %{ "selection" => selection }, socket) do
  {:noreply, assign(socket, selection: selection)}
end

Hierarchical List (Disclosure Group)

<List>
  <DisclosureGroup>
    <Text template="label">Level 1</Text>
    <DisclosureGroup>
      <Text template="label">Level 2</Text>
      <DisclosureGroup>
        <Text template="label">Level 3</Text>
        Content
      </DisclosureGroup>
    </DisclosureGroup>
  </DisclosureGroup>
</List>

Hierarchical List (Section)

<List>
  <Section>
    <Text template="header">Header</Text>
    Content
    <Text template="footer">Footer</Text>
  </Section>
</List>

Refreshable List (requires liveview-native/liveview-client-swiftui#1212)

def render(assigns) do
  ~SWIFTUI"""
  <List class="refreshable">
    <Text id={"#{i}"} :for={i <- 1..10}><%= i %></Text>
  </List>
  """
end

def handle_event("refresh", _params, socket) do
  {:noreply, socket}
end

Stylesheet:

"refreshable" do
  refreshable(action: event("on-refresh"))
end

@carson-katri Thank you for the help with examples.

Do we have a way of supporting multiple selection?

[carson-katri]

@BrooklinJazz Good question, we used to support it with native_binding. Looks like some updates are needed to get it working with phx-change though. I'll look into this.