From ca04dbc3710746ee8f39dbc3d9386e89735606b7 Mon Sep 17 00:00:00 2001 From: Juan David Hurtado Date: Sun, 11 Dec 2022 16:51:20 -0500 Subject: [PATCH] feat: add search box component --- .../PuraceDemo.xcodeproj/project.pbxproj | 4 ++ .../Examples/Basic/SearchExample.swift | 19 ++++++ PuraceDemo/PuraceDemo/MenuView.swift | 3 + .../close.imageset/Contents.json | 12 ++++ .../Media.xcassets/close.imageset/close.svg | 3 + .../search.imageset/Contents.json | 12 ++++ .../Media.xcassets/search.imageset/search.svg | 3 + Sources/Purace/Styles/PuraceStyle.swift | 2 + .../Basic/SearchBox/PuraceSearchBox.swift | 68 +++++++++++++++++++ 9 files changed, 126 insertions(+) create mode 100644 PuraceDemo/PuraceDemo/Examples/Basic/SearchExample.swift create mode 100644 Sources/Purace/Resources/Media.xcassets/close.imageset/Contents.json create mode 100644 Sources/Purace/Resources/Media.xcassets/close.imageset/close.svg create mode 100644 Sources/Purace/Resources/Media.xcassets/search.imageset/Contents.json create mode 100644 Sources/Purace/Resources/Media.xcassets/search.imageset/search.svg create mode 100644 Sources/Purace/Views/Basic/SearchBox/PuraceSearchBox.swift diff --git a/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj b/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj index 5858cdb..b410159 100644 --- a/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj +++ b/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj @@ -18,6 +18,7 @@ 2F6267AE2857B6960063A630 /* AccordionExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F6267AD2857B6960063A630 /* AccordionExample.swift */; }; 2F77A234283C4AC700F143FB /* ImageExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F77A233283C4AC700F143FB /* ImageExample.swift */; }; 2F7EC3C72867656200D5DDC6 /* ImageViewerExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F7EC3C62867656200D5DDC6 /* ImageViewerExample.swift */; }; + 2F8272CF2946831300783DE6 /* SearchExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F8272CE2946831300783DE6 /* SearchExample.swift */; }; 2F9321B3282EE49E003DA929 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F9321B2282EE49E003DA929 /* AppDelegate.swift */; }; 2F9321B5282EE49E003DA929 /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F9321B4282EE49E003DA929 /* SceneDelegate.swift */; }; 2F9321B7282EE49E003DA929 /* MenuView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F9321B6282EE49E003DA929 /* MenuView.swift */; }; @@ -43,6 +44,7 @@ 2F6267AD2857B6960063A630 /* AccordionExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AccordionExample.swift; sourceTree = ""; }; 2F77A233283C4AC700F143FB /* ImageExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageExample.swift; sourceTree = ""; }; 2F7EC3C62867656200D5DDC6 /* ImageViewerExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageViewerExample.swift; sourceTree = ""; }; + 2F8272CE2946831300783DE6 /* SearchExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SearchExample.swift; sourceTree = ""; }; 2F9321AF282EE49E003DA929 /* PuraceDemo.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = PuraceDemo.app; sourceTree = BUILT_PRODUCTS_DIR; }; 2F9321B2282EE49E003DA929 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 2F9321B4282EE49E003DA929 /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = ""; }; @@ -89,6 +91,7 @@ 2F6267AD2857B6960063A630 /* AccordionExample.swift */, 2F569938285FB93500F2D4D3 /* ModalExample.swift */, 2FD5447928720B810098468D /* TextFieldExample.swift */, + 2F8272CE2946831300783DE6 /* SearchExample.swift */, ); path = Basic; sourceTree = ""; @@ -225,6 +228,7 @@ 2FC004092831AC250037EF10 /* StoryExample.swift in Sources */, 2F1F7D7128317E0700AA30DB /* CollectionCardExample.swift in Sources */, 2F1F7D7328318D9900AA30DB /* TextExample.swift in Sources */, + 2F8272CF2946831300783DE6 /* SearchExample.swift in Sources */, 2F9321B7282EE49E003DA929 /* MenuView.swift in Sources */, 2F7EC3C72867656200D5DDC6 /* ImageViewerExample.swift in Sources */, 2F9321B3282EE49E003DA929 /* AppDelegate.swift in Sources */, diff --git a/PuraceDemo/PuraceDemo/Examples/Basic/SearchExample.swift b/PuraceDemo/PuraceDemo/Examples/Basic/SearchExample.swift new file mode 100644 index 0000000..6247ad2 --- /dev/null +++ b/PuraceDemo/PuraceDemo/Examples/Basic/SearchExample.swift @@ -0,0 +1,19 @@ +// +// SearchExample.swift +// PuraceDemo +// +// Created by Juan Hurtado on 11/12/22. +// + +import SwiftUI +import Purace + +struct SearchExample: View { + @State var text = "" + + var body: some View { + PuraceSearchBox("Buscar...", text: $text) + .padding(16) + Spacer() + } +} diff --git a/PuraceDemo/PuraceDemo/MenuView.swift b/PuraceDemo/PuraceDemo/MenuView.swift index 3394a3d..b34bb73 100644 --- a/PuraceDemo/PuraceDemo/MenuView.swift +++ b/PuraceDemo/PuraceDemo/MenuView.swift @@ -38,6 +38,9 @@ struct MenuView: View { NavigationLink("Text Field") { TextFieldExample() } + NavigationLink("Search box") { + SearchExample() + } } Section(header: Text("Complex")) { NavigationLink("Collection card") { diff --git a/Sources/Purace/Resources/Media.xcassets/close.imageset/Contents.json b/Sources/Purace/Resources/Media.xcassets/close.imageset/Contents.json new file mode 100644 index 0000000..308f9c8 --- /dev/null +++ b/Sources/Purace/Resources/Media.xcassets/close.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "close.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Sources/Purace/Resources/Media.xcassets/close.imageset/close.svg b/Sources/Purace/Resources/Media.xcassets/close.imageset/close.svg new file mode 100644 index 0000000..8b21a7d --- /dev/null +++ b/Sources/Purace/Resources/Media.xcassets/close.imageset/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/Purace/Resources/Media.xcassets/search.imageset/Contents.json b/Sources/Purace/Resources/Media.xcassets/search.imageset/Contents.json new file mode 100644 index 0000000..4a3f4da --- /dev/null +++ b/Sources/Purace/Resources/Media.xcassets/search.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "search.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Sources/Purace/Resources/Media.xcassets/search.imageset/search.svg b/Sources/Purace/Resources/Media.xcassets/search.imageset/search.svg new file mode 100644 index 0000000..1e45a7f --- /dev/null +++ b/Sources/Purace/Resources/Media.xcassets/search.imageset/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/Sources/Purace/Styles/PuraceStyle.swift b/Sources/Purace/Styles/PuraceStyle.swift index 2a71faa..1ccc378 100644 --- a/Sources/Purace/Styles/PuraceStyle.swift +++ b/Sources/Purace/Styles/PuraceStyle.swift @@ -49,6 +49,8 @@ public struct PuraceStyle { public static let R1 = SwiftUI.Color(hex: "E24649") ?? .red + public static let F1 = SwiftUI.Color(hex: "F5F5F5") ?? .gray + public static let allSkeletons: [SwiftUI.Color] = [Color.S1, Color.S2, Color.S3, Color.S4, Color.S5, Color.S6, Color.S7, Color.S8] } diff --git a/Sources/Purace/Views/Basic/SearchBox/PuraceSearchBox.swift b/Sources/Purace/Views/Basic/SearchBox/PuraceSearchBox.swift new file mode 100644 index 0000000..84106e6 --- /dev/null +++ b/Sources/Purace/Views/Basic/SearchBox/PuraceSearchBox.swift @@ -0,0 +1,68 @@ +// +// PuraceSearchBox.swift +// +// +// Created by Juan Hurtado on 11/12/22. +// + +import SwiftUI + +public struct PuraceSearchBox: View { + var placeholder: String + @Binding var text: String + + public init(_ placeholder: String, text: Binding) { + self.placeholder = placeholder + _text = text + } + + public var body: some View { + TextField(placeholder, text: $text, onCommit: { + print("asdf?") + }) + .textFieldStyle(.plain) + .padding(.horizontal, 12) + .frame(height: 35) + .font(PuraceStyle.Font.get(size: 12)) + .foregroundColor(PuraceStyle.Color.N1) + .modifier(ClearButton(text: $text)) + .modifier(LeadingSearchIcon()) + .background( + RoundedRectangle(cornerRadius: 20) + .fill(PuraceStyle.Color.F1) + ) + } +} + + +struct ClearButton: ViewModifier { + @Binding var text: String + + init(text: Binding) { + self._text = text + } + + func body(content: Content) -> some View { + HStack(spacing: 0) { + content + Spacer(minLength: 0) + Image("close", bundle: Bundle.module) + .foregroundColor(.secondary) + .opacity(text == "" ? 0 : 1) + .onTapGesture { self.text = "" } + .padding(.trailing, 15) + } + } +} + +struct LeadingSearchIcon: ViewModifier { + func body(content: Content) -> some View { + HStack(spacing: 0) { + Image("search", bundle: Bundle.module) + .foregroundColor(.secondary) + .padding(.leading, 15) + Spacer(minLength: 0) + content + } + } +}