From 15c1b8c443530f0c8f9d03c1c0634fe2fd03619e Mon Sep 17 00:00:00 2001 From: leedoyeon849 Date: Sun, 14 Jul 2024 04:07:11 +0900 Subject: [PATCH] feat(DesignSystem): Add flat varaint color --- .../Rounded/Rounded+Extension.swift | 8 + .../Theme/Basic/BasicSegmentColorTheme.swift | 16 +- .../Theme/Basic/BasicSegmentFigureTheme.swift | 4 +- .../Bedge/BedgeBookViewController.swift | 4 + .../Button/ButtonBookViewController.swift | 14 +- .../SegmentControlBookViewController.swift | 167 ++++++++++++++++++ .../Sources/ViewController.swift | 21 +++ 7 files changed, 215 insertions(+), 19 deletions(-) create mode 100644 Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/SegmentControl/SegmentControlBookViewController.swift diff --git a/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/Rounded/Rounded+Extension.swift b/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/Rounded/Rounded+Extension.swift index 75cde919..82211dbb 100644 --- a/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/Rounded/Rounded+Extension.swift +++ b/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/Rounded/Rounded+Extension.swift @@ -8,12 +8,20 @@ import Foundation extension RoundedOffset { + /// 0 static let zero = RoundedOffset() + /// 2 static let extraSmall = RoundedOffset(all: 2) + /// 2 static let xsmall = RoundedOffset(all: 2) + /// 4 static let small = RoundedOffset(all: 4) + /// 8 static let medium = RoundedOffset(all: 8) + /// 12 static let large = RoundedOffset(all: 12) + /// 16 static let xlarge = RoundedOffset(all: 16) + /// infinity static let infinity = RoundedOffset(all: .infinity) } diff --git a/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentColorTheme.swift b/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentColorTheme.swift index 1a43e5c0..7ea2f0be 100644 --- a/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentColorTheme.swift +++ b/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentColorTheme.swift @@ -32,17 +32,19 @@ struct BasicSegmentColorTheme: SegmentColorTheme { // for flat, shadow switch (color, state) { - case (_, .unselected): - return .init(.grey400) - case (_, .selected): - return .init(.white) + case (.green, .unselected): return .init(.grey400) + case (.green, .selected): return .init(.green500) + case (.stone, .unselected): return .init(.grey400) + case (.stone, .selected): return .init(.fullWhite) } } func indicatorBackgroundColor() -> UniversalColor { - switch color { - case .green: return .init(.green500) - case .stone: return .init(.grey800) + switch (variant, color) { + case (.underline, .green): return .init(.green500) + case (.underline, .stone): return .init(.grey800) + case (_, .green): return .init(.fullWhite) + case (_, .stone): return .init(.grey800) } } diff --git a/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentFigureTheme.swift b/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentFigureTheme.swift index e914dd56..6c8d1598 100644 --- a/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentFigureTheme.swift +++ b/Projects/UI/DesignSystemUIModule/DesignSystem/Sources/Foundation/SegmentControl/Theme/Basic/BasicSegmentFigureTheme.swift @@ -31,7 +31,7 @@ struct BasicSegmentFigureTheme: SegmentFigureTheme { func containerRounded() -> RoundedOffset { switch _shape { - case .round: return .xlarge + case .round: return .medium case .square: return .medium case .pill: return .infinity } @@ -55,7 +55,7 @@ struct BasicSegmentFigureTheme: SegmentFigureTheme { func itemPadding() -> GapOffset { if variant == .underline { - return .init(0, 0) + return .init(8, 0) } return .init(8, 28) diff --git a/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Bedge/BedgeBookViewController.swift b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Bedge/BedgeBookViewController.swift index 122528ca..2dd5816f 100644 --- a/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Bedge/BedgeBookViewController.swift +++ b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Bedge/BedgeBookViewController.swift @@ -99,6 +99,10 @@ final class BadgeBookViewController: UIViewController { stackView.addArrangedSubview(variantControlLabel) stackView.addArrangedSubview(variantControl) + stackView.addArrangedSubview(BaseSpacer()) + stackView.addArrangedSubview(BaseDivider()) + stackView.addArrangedSubview(BaseSpacer()) + badges.enumerated().forEach { index, badge in stackView.addArrangedSubview(badgeLabels[index]) stackView.addArrangedSubview(badge) diff --git a/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Button/ButtonBookViewController.swift b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Button/ButtonBookViewController.swift index 6a090271..b04fe267 100644 --- a/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Button/ButtonBookViewController.swift +++ b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/Button/ButtonBookViewController.swift @@ -71,10 +71,6 @@ final class ButtonBookViewController: UIViewController { $0.selectedSegmentIndex = 0 } - lazy var divider = UIView().then { - $0.backgroundColor = .grey100 - } - lazy var colorLabels: [UILabel] = BasicButtonColor.allCases.map { color in UILabel().then { $0.text = color.rawValue @@ -126,7 +122,10 @@ final class ButtonBookViewController: UIViewController { stackView.addArrangedSubview(shapeControl) stackView.addArrangedSubview(stateControlLabel) stackView.addArrangedSubview(stateControl) - stackView.addArrangedSubview(divider) + + stackView.addArrangedSubview(BaseSpacer()) + stackView.addArrangedSubview(BaseDivider()) + stackView.addArrangedSubview(BaseSpacer()) buttons.enumerated().forEach { index, button in stackView.addArrangedSubview(colorLabels[index]) @@ -167,11 +166,6 @@ final class ButtonBookViewController: UIViewController { $0.width.equalTo(stackView.snp.width) } - divider.snp.makeConstraints { - $0.height.equalTo(1) - $0.width.equalTo(stackView.snp.width) - } - buttons.forEach { button in button.snp.makeConstraints { $0.width.equalToSuperview() diff --git a/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/SegmentControl/SegmentControlBookViewController.swift b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/SegmentControl/SegmentControlBookViewController.swift new file mode 100644 index 00000000..96fe3969 --- /dev/null +++ b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/SegmentControl/SegmentControlBookViewController.swift @@ -0,0 +1,167 @@ +// +// SegmentControlBookViewController.swift +// DesignSystemBookApp +// +// Created by DOYEON LEE on 6/26/24. +// + +import UIKit + +import DesignSystem +import Assets + +import RxSwift +import Then +import SnapKit + +final class SegmentControlBookViewController: UIViewController { + struct SegmentOption: Identifiable, Equatable { + let id: Int + + static func factory(_ options: [Int]) -> [SegmentOption] { + return options.map { SegmentOption(id: $0) } + } + } + + private let scrollView = UIScrollView() + + private let contentView = UIView() + + private let stackView = UIStackView().then { + $0.axis = .vertical + $0.spacing = 8 + $0.alignment = .center + $0.distribution = .fill + } + + private let variantControlLabel = UILabel().then { + $0.text = "variant" + $0.setTypo(.body1b) + } + + private let variantControl = UISegmentedControl( + items: Array(BasicSegmentVariant.allCases).map { $0.rawValue } + ).then { + $0.selectedSegmentIndex = 0 + } + + private let colorControlLabel = UILabel().then { + $0.text = "color" + $0.setTypo(.body1b) + } + + private let colorControl = UISegmentedControl( + items: Array(BasicSegmentColor.allCases).map { $0.rawValue } + ).then { + $0.selectedSegmentIndex = 0 + } + + private let shapeControlLabel = UILabel().then { + $0.text = "shape" + $0.setTypo(.body1b) + } + + private let shapeControl = UISegmentedControl( + items: Array(BasicSegmentShape.allCases).map { $0.rawValue } + ).then { + $0.selectedSegmentIndex = 0 + } + + private let segmentControl = BaseSegmentControl( + source: SegmentOption.factory(Array(0...3)), + itemBuilder: { option in + [ + UILabel().then { + $0.text = "\(option.id)" + $0.setTypo(.body1b) + $0.textAlignment = .center + } + ] + } + ).then { + $0.styled() + } + + private let disposeBag = DisposeBag() + + // MARK: Lifecycle + override func viewDidLoad() { + super.viewDidLoad() + view.backgroundColor = .white + + setupHierarchy() + setupLayout() + setupBind() + } + + // MARK: Setup methods + private func setupHierarchy() { + view.addSubview(scrollView) + scrollView.addSubview(contentView) + contentView.addSubview(stackView) + + stackView.addArrangedSubview(variantControlLabel) + stackView.addArrangedSubview(variantControl) + stackView.addArrangedSubview(colorControlLabel) + stackView.addArrangedSubview(colorControl) + stackView.addArrangedSubview(shapeControlLabel) + stackView.addArrangedSubview(shapeControl) + + stackView.addArrangedSubview(BaseSpacer()) + stackView.addArrangedSubview(BaseDivider()) + stackView.addArrangedSubview(BaseSpacer()) + + stackView.addArrangedSubview(segmentControl) + } + + private func setupLayout() { + scrollView.snp.makeConstraints { + $0.edges.equalToSuperview() + } + + contentView.snp.makeConstraints { + $0.edges.equalToSuperview() + $0.width.equalTo(scrollView) + $0.height.equalTo(1000) + } + + stackView.snp.makeConstraints { + $0.top.equalTo(contentView.safeAreaLayoutGuide.snp.top) + $0.left.right.equalToSuperview().inset(pagePadding) + } + + variantControl.snp.makeConstraints { + $0.width.equalTo(stackView.snp.width) + } + + colorControl.snp.makeConstraints { + $0.width.equalTo(stackView.snp.width) + } + + shapeControl.snp.makeConstraints { + $0.width.equalTo(stackView.snp.width) + } + + segmentControl.snp.makeConstraints { + $0.width.equalTo(stackView.snp.width) + } + } + + private func setupBind() { + Observable.combineLatest( + variantControl.rx.selectedSegmentIndex, + colorControl.rx.selectedSegmentIndex, + shapeControl.rx.selectedSegmentIndex + ) + .observe(on: MainScheduler.instance) + .withUnretained(self) + .subscribe(onNext: { owner, value in + owner.segmentControl.styled( + variant: BasicSegmentVariant.allCases[value.0], + color: BasicSegmentColor.allCases[value.1], + shape: BasicSegmentShape.allCases[value.2] + ) + }) + .disposed(by: disposeBag) + } +} diff --git a/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/ViewController.swift b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/ViewController.swift index 8de68dff..3729aa3c 100644 --- a/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/ViewController.swift +++ b/Projects/UI/DesignSystemUIModule/DesignSystemApp/Sources/ViewController.swift @@ -84,6 +84,17 @@ class ViewController: UIViewController { $0.setTitleColor(.systemBlue, for: .normal) } + private lazy var segmentControlBookLabel = UILabel().then { + $0.text = "SegmentControl" + $0.setTypo(.heading3) + $0.textColor = .grey700 + } + + private lazy var segmentControlBookButton = UIButton().then { + $0.setTitle("Basic segment control example", for: .normal) + $0.setTitleColor(.systemBlue, for: .normal) + } + // MARK: DisposeBag private let disposeBag = DisposeBag() @@ -116,6 +127,9 @@ class ViewController: UIViewController { stackView.addArrangedSubview(dialogBookLabel) stackView.addArrangedSubview(dialogBookButton) + + stackView.addArrangedSubview(segmentControlBookLabel) + stackView.addArrangedSubview(segmentControlBookButton) } private func setupLayout() { @@ -166,5 +180,12 @@ class ViewController: UIViewController { self?.navigationController?.pushViewController(viewController, animated: true) }) .disposed(by: disposeBag) + + segmentControlBookButton.rx.tap + .subscribe(onNext: { [weak self] in + let viewController = SegmentControlBookViewController() + self?.navigationController?.pushViewController(viewController, animated: true) + }) + .disposed(by: disposeBag) } }