Feat UIKit Hint

CharcoalUIKitSample/Sources/CharcoalUIKitSample/ContentViewController.swift

@@ -52,6 +52,7 @@ public final class ContentViewController: UIViewController {
         case tooltips = "Tooltips"
         case toasts = "Toasts"
         case spinners = "Spinners"
+        case hints = "Hints"
         case balloons = "Balloons"
 
         var viewController: UIViewController {
@@ -74,6 +75,8 @@ public final class ContentViewController: UIViewController {
                 return ToastsViewController()
             case .spinners:
                 return SpinnersViewController()
+            case .hints:
+                return HintsViewController()
             case .balloons:
                 return BalloonsViewController()
             }

CharcoalUIKitSample/Sources/CharcoalUIKitSample/Views/Hints/Hints.swift

@@ -0,0 +1,83 @@
+import Charcoal
+import UIKit
+
+final class HintsViewController: UIViewController {
+    private lazy var scrollView: UIScrollView = {
+        let view = UIScrollView(frame: .zero)
+        view.bounces = true
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    private lazy var stackView: UIStackView = {
+        let view = UIStackView(frame: .zero)
+        view.axis = .vertical
+        view.spacing = 16
+        view.alignment = .center
+        view.distribution = .equalSpacing
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    let cellReuseIdentifier = "cell"
+
+    private var hints: [CharcoalHintView] = [
+        CharcoalHintView(text: "Hello World"),
+        CharcoalHintView(text: "ブックマークしました"),
+        CharcoalHintView(text: "ブックマークしました", action: CharcoalAction(title: "Button", actionCallback: {
+            print("Button taped")
+        })),
+        CharcoalHintView(
+            text: "こんにちは",
+            action: CharcoalAction(title: "Button", actionCallback: {
+                print("Button taped")
+            })
+        )
+    ]
+
+    private var switchingButton: CharcoalSwitchingButton!
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        setupUI()
+        addHintViews()
+    }
+
+    private func setupUI() {
+        view.backgroundColor = UIColor.systemBackground
+
+        view.addSubview(scrollView)
+
+        NSLayoutConstraint.activate([
+            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
+        ])
+
+        scrollView.addSubview(stackView)
+
+        NSLayoutConstraint.activate([
+            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
+            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
+            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
+            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)
+        ])
+    }
+
+    private func addHintViews() {
+        for example in hints {
+            let hint = example
+            hint.translatesAutoresizingMaskIntoConstraints = false
+            stackView.addArrangedSubview(hint)
+            hint.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true
+        }
+    }
+
+}
+
+@available(iOS 17.0, *)
+#Preview {
+    let viewController = HintsViewController()
+    return viewController
+}

Sources/CharcoalShared/Extensions/CGSize+Extension.swift

@@ -0,0 +1,7 @@
+import Foundation
+
+public extension CGSize {
+    var area: CGFloat {
+        return width * height
+    }
+}

Sources/CharcoalShared/Extensions/UIColor+Extension.swift

@@ -0,0 +1,11 @@
+import UIKit
+
+public extension UIColor {
+    func imageWithColor(width: Int, height: Int) -> UIImage {
+        let size = CGSize(width: width, height: height)
+        return UIGraphicsImageRenderer(size: size).image { rendererContext in
+            self.setFill()
+            rendererContext.fill(CGRect(origin: .zero, size: size))
+        }
+    }
+}

Sources/CharcoalSwiftUI/Extensions/ConditionalViewModifier.swift

@@ -0,0 +1,16 @@
+import SwiftUI
+
+extension View {
+    /// Applies the given transform if the given condition evaluates to `true`.
+    /// - Parameters:
+    ///   - condition: The condition to evaluate.
+    ///   - transform: The transform to apply to the source `View`.
+    /// - Returns: Either the original `View` or the modified `View` if the condition is `true`.
+    @ViewBuilder func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
+        if condition {
+            transform(self)
+        } else {
+            self
+        }
+    }
+}

Sources/CharcoalUIKit/Components/Hints/HintView.swift

@@ -0,0 +1,162 @@
+import UIKit
+
+public class CharcoalHintView: UIView {
+    lazy var hStackView: UIStackView = {
+        let stackView = UIStackView()
+        stackView.axis = .horizontal
+        stackView.alignment = .center
+        stackView.spacing = 0
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        return stackView
+    }()
+
+    lazy var label: CharcoalTypography14 = {
+        let label = CharcoalTypography14()
+        label.numberOfLines = 0
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.textAlignment = .left
+        label.textColor = CharcoalAsset.ColorPaletteGenerated.text1.color
+        return label
+    }()
+
+    lazy var thumbnailImageView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.contentMode = .scaleAspectFill
+        return imageView
+    }()
+
+    lazy var actionButton: CharcoalPrimarySButton = {
+        let button = CharcoalPrimarySButton()
+        return button
+    }()
+
+    let thumbnailImage: UIImage = CharcoalAsset.Images.info16.image
+
+    var action: CharcoalAction?
+
+    let text: String
+
+    /// The corner radius of the snackbar
+    let cornerRadius: CGFloat = 8
+
+    /// Padding around the bubble
+    let padding = UIEdgeInsets(top: 12, left: 16, bottom: 12, right: 16)
+
+    var gesture: CharcoalGesture?
+
+    public init(text: String, action: CharcoalAction? = nil) {
+        self.action = action
+        self.text = text
+        super.init(frame: .zero)
+        self.hStackView.spacing = 4
+        if let action = action {
+            actionButton.setTitle(action.title, for: .normal)
+        }
+        setupLayer()
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setupCapsuleShape() {
+        layer.backgroundColor = CharcoalAsset.ColorPaletteGenerated.surface3.color.cgColor
+        layer.masksToBounds = true
+        layer.cornerRadius = cornerRadius
+        layer.cornerCurve = .continuous
+    }
+
+    private func addThumbnailView() {
+        thumbnailImageView.image = thumbnailImage
+        hStackView.addArrangedSubview(thumbnailImageView)
+        NSLayoutConstraint.activate([
+            thumbnailImageView.widthAnchor.constraint(equalToConstant: 16),
+            thumbnailImageView.heightAnchor.constraint(equalToConstant: 16)
+        ])
+    }
+
+    private func addTextLabel() {
+        hStackView.addArrangedSubview(label)
+        label.text = text
+        label.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        label.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
+    }
+
+    private func addActionButton() {
+        if let _ = action {
+            actionButton.addTarget(self, action: #selector(actionButtonTapped), for: .touchUpInside)
+            hStackView.addArrangedSubview(actionButton)
+            actionButton.widthAnchor.constraint(equalToConstant: actionButton.intrinsicContentSize.width).isActive = true
+        }
+    }
+
+    private func setupLayer() {
+        // Setup Bubble Shape
+        setupCapsuleShape()
+
+        // Add HStack
+        addSubview(hStackView)
+        NSLayoutConstraint.activate([
+            hStackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: padding.left),
+            hStackView.topAnchor.constraint(equalTo: topAnchor, constant: padding.top),
+            hStackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -padding.bottom),
+            hStackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -padding.right)
+        ])
+
+
+        // Add thumbnail view
+        addThumbnailView()
+
+        // Add text label with padding view
+        addTextLabel()
+
+        // Add action button
+        addActionButton()
+    }
+
+    @objc func actionButtonTapped() {
+        action?.actionCallback()
+    }
+
+    /// Add gesture to this view
+    func addGesture(_ gesture: CharcoalGesture) {
+        self.gesture = gesture
+        addGestureRecognizer(gesture.gesture)
+    }
+}
+
+@available(iOS 17.0, *)
+#Preview(traits: .sizeThatFitsLayout) {
+    let stackView = UIStackView()
+    stackView.axis = .vertical
+    stackView.distribution = .fill
+    stackView.alignment = .center
+    stackView.spacing = 8.0
+
+    stackView.widthAnchor.constraint(equalToConstant: 300).isActive = true
+
+    let snackbar = CharcoalHintView(text: "Hello World")
+    stackView.addArrangedSubview(snackbar)
+
+    let snackbar2 = CharcoalHintView(text: "ブックマークしました")
+    stackView.addArrangedSubview(snackbar2)
+    snackbar2.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true
+
+    let snackbar3 = CharcoalHintView(text: "ブックマークしました", action: CharcoalAction(title: "編集", actionCallback: {
+        print("編集 taped")
+    }))
+    stackView.addArrangedSubview(snackbar3)
+
+    let snackbar4 = CharcoalHintView(
+        text: "こんにちは",
+        action: CharcoalAction(title: "編集", actionCallback: {
+            print("編集 taped")
+        })
+    )
+    stackView.addArrangedSubview(snackbar4)
+    snackbar4.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true
+
+    return stackView
+}

Sources/CharcoalUIKit/Components/Toast/CharcoalAction.swift

@@ -0,0 +1,11 @@
+public typealias ActionCallback = () -> Void
+
+public struct CharcoalAction {
+    let title: String
+    let actionCallback: ActionCallback
+
+    public init(title: String, actionCallback: @escaping ActionCallback) {
+        self.title = title
+        self.actionCallback = actionCallback
+    }
+}

Sources/CharcoalUIKit/Components/Toast/CharcoalRubberGesture.swift

@@ -0,0 +1,78 @@
+import UIKit
+
+protocol CharcoalGesture {
+    var gesture: UIGestureRecognizer { get }
+}
+
+class CharcoalRubberGesture: NSObject, CharcoalGesture {
+    let screenEdge: CharcoalPopupViewEdge
+
+    var gesture: UIGestureRecognizer
+
+    var dragVelocity: CGPoint = .zero
+
+    var isDragging: Bool = false
+
+    var offset: CGSize = .zero
+
+    var dismiss: (() -> Void)?
+
+    init(screenEdge: CharcoalPopupViewEdge) {
+        self.screenEdge = screenEdge
+        gesture = UIPanGestureRecognizer()
+        super.init()
+        gesture.addTarget(self, action: #selector(handlePan(_:)))
+    }
+
+    @objc func handlePan(_ gesture: UIPanGestureRecognizer) {
+        guard let view = gesture.view else { return }
+
+        let translation = gesture.translation(in: gesture.view)
+        let velocity = gesture.velocity(in: gesture.view)
+        let translationInDirection = translation.y * screenEdge.direction
+        let movingVelocityInDirection = velocity.y * screenEdge.direction
+        let offsetInDirection = offset.height * screenEdge.direction
+
+        // Rubber band effect
+        let damping: CGFloat = 0.75
+        let initialSpringVelocity: CGFloat = 0.0
+        let duration: TimeInterval = 0.65
+
+        switch gesture.state {
+        case .began:
+            isDragging = true
+        case .changed:
+            dragVelocity = velocity
+            if translationInDirection < 0 {
+                offset = CGSize(width: 0, height: translation.y)
+                view.transform = CGAffineTransform(translationX: 0, y: translation.y)
+            } else {
+                let limit: CGFloat = 60
+                let dist = sqrt(translation.y * translation.y)
+                let factor = 1 / (dist / limit + 1)
+                offset = CGSize(width: 0, height: translation.y * factor)
+                view.transform = CGAffineTransform(translationX: 0, y: translation.y * factor)
+            }
+        case .ended, .cancelled:
+            isDragging = false
+            if offsetInDirection < -50 || movingVelocityInDirection < -100 {
+                // Dismiss
+                dismiss?()
+            } else {
+                UIView.animate(
+                    withDuration: duration,
+                    delay: 0,
+                    usingSpringWithDamping: damping,
+                    initialSpringVelocity: initialSpringVelocity,
+                    options: [],
+                    animations: {
+                        view.transform = .identity
+                    },
+                    completion: nil
+                )
+            }
+        default:
+            break
+        }
+    }
+}