psharanda / nativebook

A toolkit for Implementing, maintaining, documenting and evolving a shared set of UI components for iOS inspired by Storybook.js

NativeBook

Intro

Implementing, maintaining, documenting and evolving a shared set of UI components is not an easy thing in a large-scale application. Web developers have created a powerful solution for this process - Storybook.js. But what about native iOS development? Can we achieve a somewhat similar experience?

What if we combine a catalog app, snapshot tests, and HTML-based documentation generation into a single system?

Imagine writing a code snippet just once, and then being able to do the following:

• Display a view produced from a snippet in a native catalog app
• Embed a view into SwiftUI previews
• Run a snapshot test for a snippet
• Display this code snippet and the resulting snapshot in a generated HTML-based documentation

This repo is a proof of the concept for such a system!

Check my article about NativeBook for more details: https://hackernoon.com/nativebook-unifying-the-native-ios-development-experience-with-storybookjs

Snippet

class UIButtonStories: DynamicComponentStories {
  @objc static func story_ImageTitleButton() -> UIView {
        let button = UIButton()
        var config = UIButton.Configuration.plain()
        config.title = "Image + Title"
        config.image = UIImage(systemName: "bell")
        config.imagePlacement = .top
        config.titlePadding = 10
        button.configuration = config
        return button
    }
   ...
}

Catalog

SwiftUI Preview

Snapshot tests

Documentation

Site: https://psharanda.github.io/NativeBook