fix: Add tab bar view

LucasCarioca · Aug 24, 2020 · f2c4310 · f2c4310
1 parent aa4fc5b
commit f2c4310
Show file tree

Hide file tree

Showing 33 changed files with 949 additions and 703 deletions.
diff --git a/README.md b/README.md
@@ -20,208 +20,12 @@ Contributions are welcome
 
 import the package in the file you would like to use it: `import QuickComponents`
 
-### Documentation
+### Components
 
-You can find our documentation here: [Docs](https://quickcomponents.lucasdesouza.net)
-
-## Component Examples
-
-[**SwitcherView**](https://quickcomponents.lucasdesouza.net/switcherview/)
-```swift
-SwitcherView(pages: [
-    SwitcherPage(label: "One", view: Text("Hello World!")),
-    SwitcherPage(label: "Two", view: Text("GoodBye World!"))
-])
-```
-<img src="assets/switcherView.gif" width="300"/>
-
-[**BarView**](https://quickcomponents.lucasdesouza.net/barview/)
-```swift
-VStack {
-    BarView(value: 22, max: 30)
-    BarView(value: 35, max: 30) // Notice that this bar overflows its max. This is why there is a indicator on the bar.
-    BarView(value: 30, max: 30)
-    BarView(value: 22, max: 30, showLabel: nil, color: .green)
-    BarView(value: 22, max: 30, showLabel: true, color: nil)
-    BarView(value: 22, max: 30, showLabel: true, color: .red)
-}
-```
-
-For a slight Neumorphic effect use the included offWhie color for the background with a barView. *Note that this will not work well with out of the box darkmode functionality.*
-```swift
-ZStack {
-    Color.offWhite.edgesIgnoringSafeArea(.all)
-    BarView(value: 22, max: 30)
-}
-```
-
-<img src="assets/barView.png" width="300"/>
-
-**Dark mode**
-
-<img src="assets/barViewDark.png" width="300"/>
-
-**Using percentages**
-
-```swift
-VStack {
-    BarView(percent: 25)
-    BarView(percent: 50)
-    BarView(percent: 75)
-    BarView(percent: 100)
-}
-```
-
-<img src="assets/barViewpercentages.png" width="300"/>
-
-## Button Styles
-
-Based on Material UI buttons. 
-
-<img src="assets/buttonStyles.png" width="300"/>
-<img src="assets/buttonStylesDark.png" width="300"/>
-
-[**PrimartButton**](https://quickcomponents.lucasdesouza.net/PrimartButton/)
-```swift
-    Button(action: {}){
-        Text("Primary")
-    }.buttonStyle(PrimaryButton())
-        .frame(width: 100, height: 50)
-
-    Button(action: {}){
-        Text("Primary")
-    }.buttonStyle(PrimaryButton(variant: .outlined))
-        .frame(width: 100, height: 50)
-
-    Button(action: {}){
-        Text("Primary")
-    }.buttonStyle(PrimaryButton(variant: .contained))
-        .frame(width: 100, height: 50)
-```
-
-[**SecondaryButton**](https://quickcomponents.lucasdesouza.net/SecondaryButton/)
-```swift
-    Button(action: {}){
-        Text("Secondary")
-    }.buttonStyle(SecondaryButton())
-        .frame(width: 100, height: 50)
-
-    Button(action: {}){
-        Text("Secondary")
-    }.buttonStyle(SecondaryButton(variant: .outlined))
-        .frame(width: 100, height: 50)
-
-    Button(action: {}){
-        Text("Secondary")
-    }.buttonStyle(SecondaryButton(variant: .contained))
-        .frame(width: 100, height: 50)
-```
-[**DisabledButton**](https://quickcomponents.lucasdesouza.net/DisabledButton/)
-```swift
-    Button(action: {}){
-        Text("Disabled")
-    }.buttonStyle(DisabledButton())
-        .frame(width: 100, height: 50)
-
-    Button(action: {}){
-        Text("Disabled")
-    }.buttonStyle(DisabledButton(variant: .outlined))
-        .frame(width: 100, height: 50)
-
-    Button(action: {}){
-        Text("Disabled")
-    }.buttonStyle(DisabledButton(variant: .contained))
-        .frame(width: 100, height: 50)
-```
-## Typography
-
-### Heading
-
-[Heading Docs](https://quickcomponents.lucasdesouza.net/heading)
-
-
-**Sizing**
-
-```swift
-VStack {
-    Text("Heading Sizes").Heading(align:.center)
-    Text("H1").Heading()
-    Text("H2").Heading(size: .H2)
-    Text("H3").Heading(size: .H3)
-    Text("H4").Heading(size: .H4)
-    Text("H5").Heading(size: .H5)
-    Text("H6").Heading(size: .H6)
-}
-```
-
-<img src="assets/headingsize.png" width="300"/>
-
-**Alignment**
-
-```swift
-VStack {
-    Text("Alginment").Heading(align:.center)
-    Text("leading").Heading()
-    Text("center").Heading(align: .center)
-    Text("trailing").Heading(align: .trailing)
-}
-```
-
-<img src="assets/headingalign.png" width="300"/>
-
-### Paragraph
-
-[Paragraph Docs](https://quickcomponents.lucasdesouza.net/paragraph)
-
-**Sizing**
-
-```swift
-VStack{
-    Text("Lorem ipsum ... semper vitae.").Paragraph(size: .LG)
-    Text("Lorem ipsum ... semper vitae.").Paragraph()
-    Text("Lorem ipsum ... semper vitae.").Paragraph(size:.SM)
-}
-```
-
-<img src="assets/paragraphsize.png" width="300"/>
-
-**Alignment**
-
-```swift
-VStack{
-    Text("Lorem ipsum ... semper vitae.").Paragraph()
-    Text("Lorem ipsum ... semper vitae.").Paragraph(align: .center)
-    Text("Lorem ipsum ... semper vitae.").Paragraph(align: .trailing)
-}
-```
-
-<img src="assets/paragraphalign.png" width="300"/>
-
-### List
-
-[**Ordered List**](https://quickcomponents.lucasdesouza.net/OrderedList)
-
-```swift
-OrderedList(items: [
-    "step one",
-    "step two",
-    "step three"
-])
-```
-
-<img src="assets/orderedlist.png" width="300"/>
-
-
-[**Unordered List**](https://quickcomponents.lucasdesouza.net/UnorderedList)
-
-```swift
-UnorderedList(items: [
-    "step one",
-    "step two",
-    "step three"
-])
-```
-
-<img src="assets/unorderedlist.png" width="300"/>
+- [General](docs/generalComponents.md)
+- [Navigation](docs/navigation.md)
+- [Typography](docs/typography.md) 
+### Full Documentation
 
+You can find our documentation here: [Docs](https://quickcomponents.lucasdesouza.net)
 
diff --git a/...ts/NavigationComponents/SwiftUIView.swift → ...s/NavigationComponents/SwitcherView.swift b/...ts/NavigationComponents/SwiftUIView.swift → ...s/NavigationComponents/SwitcherView.swift
@@ -8,16 +8,8 @@
 import SwiftUI
 
 
-/**
- # SwitcherPage
- 
- Used to define a page for SwitcherView.
- 
- ## Example
- ```swift
- SwitcherPage(label: "One", view: Text("Hello World!")),
- ```
- */
+
+/// Used to define a page for SwitcherView.
 public struct SwitcherPage {
     var label: String
     var view: AnyView
@@ -31,38 +23,24 @@ public struct SwitcherPage {
     }
 }
 
-/**
-# SwitcherView
- 
- Creates a view with buttons to switch between a list of views
- 
- ## Example
- ```swift
- SwitcherView(pages: [
-     SwitcherPage(label: "One", view: Text("Hello World!")),
-     SwitcherPage(label: "Two", view: Text("GoodBye World!"))
- ])
- ```
- */
+
+/// Creates a view with buttons to switch between a list of views
 public struct SwitcherView: View {
 
     var pages: [SwitcherPage]
     var reverse: Bool
 
+    /// Builds the swtcher that can toggle between the proviced views
     /// - Parameter pages: Lists the pages to include in the switcher
-    public init(pages: [SwitcherPage]) {
-        self.pages = pages
-        self.reverse = false
-    }
-
-    public init(reverse: Bool, pages: [SwitcherPage]) {
+    /// - Parameter reverse: If true the picker will appear below the views
+    public init(reverse: Bool = false, pages: [SwitcherPage]) {
         self.pages = pages
         self.reverse = reverse
     }
+
 
     @State var pickerSelectedItem = 0
 
-    /// Builds the swtcher that can toggle between the proviced views
     public var body: some View {
         VStack{
             if self.reverse{

diff --git a/Sources/QuickComponents/NavigationComponents/TabRootView.swift b/Sources/QuickComponents/NavigationComponents/TabRootView.swift
@@ -7,32 +7,37 @@
 
 import SwiftUI
 
+///  A TabPage contains both a View and a SF Symbols image name. This is used to create a Tabbed view where the image is the icon for the tab and the view is the content shown when the tab is selected.
 public struct TabPage {
     var image: String
     var view: AnyView
 
+    /// Cteates TabPage with a SF Symbol image and View.
+    /// - Parameters:
+    ///   - image: SF Symbol name for the image that will appear on the tab
+    ///   - view: Content to be shown when the tab is selected
     public init<V>(image: String, view: V) where V : View {
         self.image = image
         self.view = AnyView(view)
     }
 }
 
-struct TabRootView: View {
+/// Creates the root of a tabbed view.
+public struct TabRootView: View {
     @State var tag = 0
     var tabs: [TabPage]
     var theme: TabViewTheme
 
-    init(tabs: [TabPage]) {
-        self.tabs = tabs
-        self.theme = TabViewTheme(backgroundColor: Color.clear, highlightColor: .blue, defaultColor: .gray)
-    }
-
-    init(tabs: [TabPage], theme: TabViewTheme) {
+    /// Creates a TabRootView with the provided TabPages and custom theme
+    /// - Parameters:
+    ///   - tabs: Tabs to include in the tabbed view
+    ///   - theme: Cusom theme for the tabbed view
+    public init(tabs: [TabPage], theme: TabViewTheme = TabViewTheme(backgroundColor: Color.clear, highlightColor: .blue, defaultColor: .gray)) {
         self.tabs = tabs
         self.theme = theme
     }
 
-    var body: some View {
+    public var body: some View {
         GeometryReader { geometry in
             ZStack {
                 self.theme.backgroundColor.edgesIgnoringSafeArea(.all)
@@ -62,18 +67,29 @@ struct TabRootView: View {
     }
 }
 
+/// Custom theme for TabRootView
 public class TabViewTheme {
     public var backgroundColor: Color
     public var highlightColor: Color
     public var defaultColor: Color
 
-    init(backgroundColor: Color, highlightColor: Color, defaultColor: Color) {
+    /// Custom theme for TabRootView with SwiftUI Color
+    /// - Parameters:
+    ///   - backgroundColor: Set the background of the bottom tab bar
+    ///   - highlightColor: Set the color for the highlight on the selected tab
+    ///   - defaultColor: Set the color for non-selected tabs
+    public init(backgroundColor: Color, highlightColor: Color, defaultColor: Color) {
         self.backgroundColor = backgroundColor
         self.highlightColor = highlightColor
         self.defaultColor = defaultColor
     }
 
-    init(backgroundColor: UIColor, highlightColor: UIColor, defaultColor: UIColor) {
+    /// Custom theme for TabRootView with  UIColor
+    /// - Parameters:
+    ///   - backgroundColor: Set the background of the bottom tab bar
+    ///   - highlightColor: Set the color for the highlight on the selected tab
+    ///   - defaultColor: Set the color for non-selected tabs
+    public init(backgroundColor: UIColor, highlightColor: UIColor, defaultColor: UIColor) {
         self.backgroundColor = Color(backgroundColor)
         self.highlightColor = Color(highlightColor)
         self.defaultColor = Color(defaultColor)
@@ -84,9 +100,9 @@ struct TabRootView_Previews: PreviewProvider {
     static var previews: some View {
         TabRootView(tabs: [
             TabPage(image: "timer", view: Text("one")),
-            TabPage(image: "lungs", view: Text("Two")),
-            TabPage(image: "lungs", view: Text("Two")),
-            TabPage(image: "lungs", view: Text("Two")),
+            TabPage(image: "timer", view: Text("Two")),
+
+
         ])
     }
 }
@@ -95,7 +111,7 @@ struct TabRootViewTheme_Previews: PreviewProvider {
     static var previews: some View {
         TabRootView(tabs: [
             TabPage(image: "timer", view: Text("one")),
-            TabPage(image: "lungs", view: Text("Two"))
+            TabPage(image: "timer", view: Text("Two"))
         ], theme: TabViewTheme(backgroundColor: .darkGray, highlightColor: .white, defaultColor: .gray))
     }
 }
diff --git a/assets/tabview.png b/assets/tabview.png
diff --git a/assets/tabviewcustom.png b/assets/tabviewcustom.png