SwiftBlocksUI: ClipIt

SwiftBlocksUI is a way to write interactive Slack messages and modal dialogs (also known as Slack "applications") using a SwiftUI like declarative style.

Explained in blog article/tutorial: Instant “SwiftUI” Flavoured Slack Apps.

This repository contains the ClipIt demo, loosely based on the official Slack tutorial: Make your Slack app accessible directly from a message.

What we want to do here is work on some arbitrary message the user selects. This is possible using "Message Actions" (called "Message Shortcuts" in the admin panel).

How to Run

This demo requires a Slack bot authentication token, which can be found on the Admin Panel, "OAuth & Permissions" section in the sidebar, "Bot User OAuth Access Token".

If swift-sh is installed,

a simple ./Sources/ClipIt/main.swift does the job.

Alternatively: swift run:

Zini18:ClipIt helge$ export SLACK_ACCESS_TOKEN=xoxb-YOUR-TOKEN
Zini18:ClipIt helge$ swift run
2020-07-17T17:13:12+0200 notice μ.console : App started on port: 1337

How to Build

cd ClipIt
swift build

Or open the Package.swift in Xcode and build it there.

Full Source

#!/usr/bin/swift sh

import SwiftBlocksUI // @SwiftBlocksUI ~> 0.8.0

dotenv.config()

struct ClipItForm: Blocks {

  @State(\.messageText) var messageText
  @State var importance = "medium"
  
  var body: some Blocks {
    View("Save it to ClipIt!") {
      TextEditor("Message Text", text: $messageText)
      
      Picker("Importance", selection: $importance,
             placeholder: "Select importance")
      {
        "High 💎💎✨".tag("high")
        "Medium 💎"  .tag("medium")
        "Low ⚪️"     .tag("low")
      }
      
      Submit("CliptIt") {
        console.log("Clipping:", self.messageText, self.importance)
      }
    }
  }
}

struct ClipIt: App {
  
  var body: some Endpoints {
    Group { // only necessary w/ Swift <5.3
      Use(logger("dev"),
          bodyParser.urlencoded(),
          sslCheck(verifyToken(allowUnsetInDebug: true)))

      MessageAction("clipit") {
        ClipItForm()
      }
    }
  }
}
try ClipIt.main()

Environment Variables

• SLACK_ACCESS_TOKEN (the token required to send requests to Slack)
• SLACK_VERIFICATION_TOKEN (shared secret with Slack to verify requests)
• PORT (the port the app is going to start on, defaults to 1337)

Requirements

On Linux this currently requires a Swift 5.3 environment (swiftc crash, might be SR-12543).

On macOS it should work with Swift 5.2 (aka Xcode 11) and up, though 5.3 has some additional conveniences.

Who

SwiftBlocksUI is brought to you by the Always Right Institute and ZeeZide. We like feedback, GitHub stars, cool contract work, presumably any form of praise you can think of.