https://github.com/psharanda/nativebook

A toolkit for Implementing, maintaining, documenting and evolving a shared set of UI components inspired by Storybook.js
https://github.com/psharanda/nativebook

design-system ios snapshot-testing swiftui-previews ui-components uikit uiview

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/psharanda/nativebook
• Owner: psharanda
• License: mit
• Created: 2023-12-03T01:05:21.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-10T21:45:16.000Z (12 months ago)
• Last Synced: 2024-02-10T22:34:49.239Z (12 months ago)
• Topics: design-system, ios, snapshot-testing, swiftui-previews, ui-components, uikit, uiview
• Language: Swift
• Homepage:
• Size: 641 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```swift

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](https://psharanda.github.io/NativeBook)