Merge pull request #47 from DroidKaigi/MrSmart00/feature/about-links

Add Credits list on AboutFeature

app-ios/Sources/AboutFeature/AboutReducer.swift

@@ -6,20 +6,48 @@ public struct AboutReducer {
 
     @ObservableState
     public struct State: Equatable {
-        var text: String
+        var path = StackState<Path.State>()
+
+        public init(path: StackState<Path.State> = .init()) {
+          self.path = path
+        }
+    }
+
+    public enum Action: ViewAction {
+        case path(StackAction<Path.State, Path.Action>)
+        case view(View)
+
+        @CasePathable
+        public enum View {
+            case staffsTapped
+            case contributersTapped
+            case sponsorsTapped
+        }
     }
 
-    public enum Action {
-        case onAppear
+    @Reducer(state: .equatable)
+    public enum Path {
+        case staffs
+        case contributers
+        case sponsors
     }
 
     public var body: some ReducerOf<Self> {
         Reduce { state, action in
             switch action {
-            case .onAppear:
-                state.text = "About Feature"
+            case .view(.staffsTapped):
+                state.path.append(.staffs)
+                return .none
+            case .view(.contributersTapped):
+                state.path.append(.contributers)
+                return .none
+            case .view(.sponsorsTapped):
+                state.path.append(.sponsors)
+                return .none
+            case .path:
                 return .none
             }
         }
+        .forEach(\.path, action: \.path)
     }
 }

app-ios/Sources/AboutFeature/AboutView.swift

@@ -1,23 +1,107 @@
 import ComposableArchitecture
 import SwiftUI
 
+@ViewAction(for: AboutReducer.self)
 public struct AboutView: View {
-    private let store: StoreOf<AboutReducer>
+    @Bindable public var store: StoreOf<AboutReducer>
 
     public init(store: StoreOf<AboutReducer>) {
         self.store = store
     }
 
     public var body: some View {
-        VStack {
-            KeyVisual()
-                .padding(16)
-            Spacer()
+        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
+            content
+        } destination: { store in
+            switch store.state {
+            case .staffs:
+                Text("Staffs")
+            case .contributers:
+                Text("Contributers")
+            case .sponsors:
+                Text("Sponsors")
+            }
+        }
+    }
+
+    @ViewBuilder var content: some View {
+        ScrollView {
+            VStack(spacing: 0) {
+                KeyVisual()
+                    .padding(.top, 28)
+                    .padding(.bottom, 32)
+
+                VStack(alignment: .leading) {
+                    Text("Credits")
+                        .foregroundStyle(Color(.surfaceOnSurfaceVariant))
+                        .font(.headline)
+
+                    Button(action: {
+                        send(.staffsTapped)
+                    }, label: {
+                        Label(
+                            String(localized: "Staffs", bundle: .module),
+                            systemImage: "face.smiling"
+                        )
+                        .labelStyle(AboutLabelStyle())
+                        Spacer()
+                    })
+                    .padding(.init(top: 24, leading: 14, bottom: 24, trailing: 14))
+
+                    Divider()
+                        .background(Color(.outlineOutlineVariant))
+
+                    Button(action: {
+                        send(.contributersTapped)
+                    }, label: {
+                        Label(
+                            String(localized: "Contributers", bundle: .module),
+                            systemImage: "person"
+                        )
+                        .labelStyle(AboutLabelStyle())
+                        Spacer()
+                    })
+                    .padding(.init(top: 24, leading: 14, bottom: 24, trailing: 14))
+
+                    Divider()
+                        .background(Color(.outlineOutlineVariant))
+
+                    Button(action: {
+                        send(.sponsorsTapped)
+                    }, label: {
+                        Label(
+                            String(localized: "Sponsors", bundle: .module),
+                            systemImage: "building.2"
+                        )
+                        .labelStyle(AboutLabelStyle())
+                        Spacer()
+                    })
+                    .padding(.init(top: 24, leading: 14, bottom: 24, trailing: 14))
+
+                    Divider()
+                        .background(Color(.outlineOutlineVariant))
+
+                }
+
+            }
+            .padding(.horizontal, 16)
         }
         .background(Color(.background))
     }
+
+    struct AboutLabelStyle: LabelStyle {
+        func makeBody(configuration: Configuration) -> some View {
+            HStack(spacing: 14) {
+                configuration.icon
+                    .font(.headline)
+                configuration.title
+                    .font(.body)
+            }
+            .foregroundStyle(Color(.surfaceOnSurface))
+        }
+    }
 }
 
 #Preview {
-    AboutView(store: .init(initialState: .init(text: "Hoge"), reducer: { AboutReducer() }))
+    AboutView(store: .init(initialState: .init(), reducer: { AboutReducer() }))
 }

app-ios/Sources/AboutFeature/Localizable.xcstrings

@@ -1,6 +1,26 @@
 {
   "sourceLanguage" : "en",
   "strings" : {
+    "Contributers" : {
+      "localizations" : {
+        "ja" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "コントリビューター"
+          }
+        }
+      }
+    },
+    "Credits" : {
+      "localizations" : {
+        "ja" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Credits"
+          }
+        }
+      }
+    },
     "KeyVisualCheckMap" : {
       "localizations" : {
         "ja" : {
@@ -60,6 +80,26 @@
           }
         }
       }
+    },
+    "Sponsors" : {
+      "localizations" : {
+        "ja" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "スポンサー"
+          }
+        }
+      }
+    },
+    "Staffs" : {
+      "localizations" : {
+        "ja" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "スタッフ"
+          }
+        }
+      }
     }
   },
   "version" : "1.0"

app-ios/Sources/AboutFeature/Media.xcassets/OutlineOutline Variant.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x44",
+          "green" : "0x49",
+          "red" : "0x40"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

app-ios/Tests/AboutFeatureTests/AboutFeatureTests.swift

@@ -5,13 +5,33 @@ import ComposableArchitecture
 final class AboutFeatureTests: XCTestCase {
 
     @MainActor
-    func testExample() async throws {
-        let store = TestStore(initialState: AboutReducer.State(text: "HOGE")) {
+    func testTappedStaffs() async {
+        let store = TestStore(initialState: AboutReducer.State()) {
             AboutReducer()
         }
-        await store.send(.onAppear) {
-            $0.text = "About Feature"
+
+        await store.send(\.view.staffsTapped) {
+            $0.path[id: 0] = .staffs
+        }
+    }
+
+    @MainActor
+    func testTappedControbuters() async {
+        let store = TestStore(initialState: AboutReducer.State()) {
+            AboutReducer()
+        }
+        await store.send(\.view.contributersTapped) {
+            $0.path[id: 0] = .contributers
+        }
+    }
+
+    @MainActor
+    func testTappedSponsors() async {
+        let store = TestStore(initialState: AboutReducer.State()) {
+            AboutReducer()
+        }
+        await store.send(\.view.sponsorsTapped) {
+            $0.path[id: 0] = .sponsors
         }
     }
-
 }