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
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
}
...
}



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