update docs for forms, navigation-hub and what-is-nylo

Author: agordn52

resources/docs/6.x/forms.md

@@ -15,9 +15,15 @@
   - [Date and Time Fields](#date-and-time-fields "Date and Time Fields")
   - [Password Fields](#password-fields "Password Fields")
   - [Masked Input Fields](#masked-input-fields "Masked Input Fields")
+  - [Checkbox Fields](#checkbox-fields "Checkbox Fields")
+  - [Picker Fields](#picker-fields "Picker Fields")
+  - [Radio Fields](#radio-fields "Radio Fields")
+  - [Chip Fields](#chip-fields "Chip Fields")
+  - [Switch Box Fields](#switch-box-fields "Switch Box Fields")
 - [Form Validation](#form-validation "Form Validation")
 - [Form Casts](#form-casts "Form Casts")
 - [Managing Form Data](#managing-form-data "Managing Form Data")
+- [Submit Button](#submit-button "Submit Button")
 - [Form Styling](#form-styling "Form Styling")
 - [Advanced Features](#advanced-features "Advanced Features")
   - [Form Layout](#form-layout "Form Layout")
@@ -248,6 +254,7 @@ Field("Price", cast: FormCast.currency("usd"))
 // Recommended approach
 Field.picker("Category", options: ["Electronics", "Clothing", "Books"]),
 Field.chips("Tags", options: ["Featured", "Sale", "New"]),
+Field.radio("Size", options: ["Small", "Medium", "Large"]),
 
 // Alternative approach
 Field("Category", 
@@ -319,6 +326,83 @@ Field("Phone",
 )
 ```
 
+<a name="checkbox-fields"></a>
+<br>
+
+### Checkbox Fields
+
+```dart
+// Recommended approach
+Field.checkbox("Accept Terms"),
+
+// Alternative approach
+Field("Accept Terms", cast: FormCast.checkbox())
+```
+
+<a name="picker-fields"></a>
+<br>
+
+### Picker Fields
+
+```dart
+// Recommended approach
+Field.picker("Category", options: ["Electronics", "Clothing", "Books"]),
+
+// Alternative approach
+Field("Category", 
+  cast: FormCast.picker(
+    options: ["Electronics", "Clothing", "Books"]
+  )
+)
+```
+
+<a name="radio-fields"></a>
+<br>
+
+### Radio Fields
+
+```dart
+// Recommended approach
+Field.radio("Size", options: ["Small", "Medium", "Large"]),
+
+// Alternative approach
+Field("Size", 
+  cast: FormCast.radio(
+    options: ["Small", "Medium", "Large"]
+  )
+)
+```
+
+<a name="chip-fields"></a>
+<br>
+
+### Chip Fields
+
+```dart
+// Recommended approach
+Field.chips("Tags", options: ["Featured", "Sale", "New"]),
+
+// Alternative approach
+Field("Tags", 
+  cast: FormCast.chips(
+    options: ["Featured", "Sale", "New"]
+  )
+)
+```
+
+<a name="switch-box-fields"></a>
+<br>
+
+### Switch Box Fields
+
+```dart
+// Recommended approach
+Field.switchBox("Enable Notifications"),
+
+// Alternative approach
+Field("Enable Notifications", cast: FormCast.switchBox())
+```
+
 <a name="form-validation"></a>
 <br>
 
@@ -542,6 +626,105 @@ form.clear();
 form.clearField("name");
 ```
 
+<a name="submit-button"></a>
+<br>
+
+## Submit Button
+
+In your Form class, you can define a submit button:
+
+```dart
+class UserInfoForm extends NyFormData {
+  UserInfoForm({String? name}) : super(name ?? "user_info");
+
+  @override
+  fields() => [
+        Field.text("First Name",
+            style: "compact"
+        ),
+        Field.text("Last Name",
+            style: "compact"
+        ),
+        Field.number("Phone Number",
+            style: "compact"
+        ),
+      ];
+  
+  @override
+  Widget? get submitButton => Button.primary(text: "Submit", 
+                submitForm: (this, (data) {
+                    printInfo(data);
+                }));
+}
+```
+
+The `Button` widget is a pre-built component that can be used to submit a form. 
+All you need to do is pass the `submitForm` parameter to the button.
+
+Out the box, Nylo provides 8 pre-built buttons that you can use to submit a form.
+- `Button.primary`
+- `Button.secondary`
+- `Button.outlined`
+- `Button.textOnly`
+- `Button.icon`
+- `Button.gradient`
+- `Button.rounded`
+
+If you want to use a different widget to submit the form, you can call the `submit` method on the form:
+
+```dart
+class UserInfoForm extends NyFormData {
+  UserInfoForm({String? name}) : super(name ?? "user_info");
+
+  @override
+  fields() => [
+        Field.text("First Name",
+            style: "compact"
+        ),
+        Field.text("Last Name",
+            style: "compact"
+        ),
+        Field.number("Phone Number",
+            style: "compact"
+        ),
+      ];
+  
+  @override
+  Widget? get submitButton => ElevatedButton(
+    onPressed: () {
+      submit(onSuccess: (data) {
+        printInfo(data);
+      });
+    },
+    child: Text("Submit"),
+  );
+}
+```
+
+Lastly, you can also add a submit button directly to the form widget:
+
+```dart
+NyForm(
+    form: form,
+    footer: Button.primary(text: "Submit", submitForm: (form, (data) {
+      printInfo(data);
+    })),
+)
+```
+
+Or with another widget:
+
+```dart
+NyForm(
+  form: form,
+  footer: MaterialButton(onPressed: () {
+    form.submit(onSuccess: (data) {
+      printInfo(data);
+    });
+  }, child: Text("Submit")),
+)
+```
+
 <a name="form-styling"></a>
 <br>
 

resources/docs/6.x/navigation-hub.md

@@ -8,7 +8,9 @@
   - [Bottom Navigation Bar](#bottom-navigation-bar "Bottom Navigation Bar")
   - [Top Navigation Bar](#bottom-navigation-bar "Bottom Navigation Bar")
 - [Navigating within a tab](#navigating-within-a-tab "Navigating within a tab")
-- [Adding Badges to Tabs](#adding-badges-to-tabs "Adding Badges to Tabs")
+- [Tabs](#tabs "Tabs")
+  - [Adding Badges to Tabs](#adding-badges-to-tabs "Adding Badges to Tabs")
+  - [Adding Alerts to Tabs](#adding-alerts-to-tabs "Adding Alerts to Tabs")
 - [Maintaining state](#maintaining-state "Maintaining state")
 - [State Actions](#state-actions "State Actions")
 - [Loading Style](#loading-style "Loading Style")
@@ -79,7 +81,7 @@ class _BaseNavigationHubState extends NavigationHub<BaseNavigationHub> {
         title: "Home",
         page: HomeTab(),
         icon: Icon(Icons.home),
-        activeIcon: Icon(Icons.home_filled),
+        activeIcon: Icon(Icons.home),
       ),
       1: NavigationTab(
          title: "Settings",
@@ -231,6 +233,45 @@ _HomeTabState extends State<HomeTab> {
 }
 ```
 
+<a name="tabs"></a>
+<br>
+
+## Tabs
+
+Tabs are the main building blocks of a Navigation Hub.
+
+You can add tabs to a Navigation Hub by using the `NavigationTab` class.
+
+``` dart
+class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
+    ... 
+    NavigationHubLayout? layout = NavigationHubLayout.bottomNav();
+    ... 
+    _MyNavigationHubState() : super(() async {
+        return {
+            0: NavigationTab(
+                title: "Home",
+                page: HomeTab(),
+                icon: Icon(Icons.home),
+                activeIcon: Icon(Icons.home),
+            ),
+            1: NavigationTab(
+                title: "Settings",
+                page: SettingsTab(),
+                icon: Icon(Icons.settings),
+                activeIcon: Icon(Icons.settings),
+            ),
+        };
+    });
+```
+
+In the above example, we've added two tabs to the Navigation Hub, Home and Settings.
+
+You can use different kinds of tabs like `NavigationTab`, `NavigationTab.badge`, and `NavigationTab.alert`.
+
+- The `NavigationTab.badge` class is used to add badges to tabs.
+- The `NavigationTab.alert` class is used to add alerts to tabs.
+- The `NavigationTab` class is used to add a normal tab.
 
 <a name="adding-badges-to-tabs"></a>
 <br>
@@ -311,6 +352,55 @@ class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
     });
 ```
 
+<a name="adding-alerts-to-tabs"></a>
+<br>
+
+## Adding Alerts to Tabs
+
+You can add alerts to your tabs.
+
+Sometime you might not want to show a badge count, but you want to show an alert to the user.
+
+To add an alert to a tab, you can use the `NavigationTab.alert` class.
+
+``` dart
+class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
+    ... 
+    NavigationHubLayout? layout = NavigationHubLayout.bottomNav();
+    ... 
+    _MyNavigationHubState() : super(() async {
+        return {
+            0: NavigationTab.alert(
+                title: "Chats",
+                page: ChatTab(),
+                icon: Icon(Icons.message),
+                activeIcon: Icon(Icons.message),
+                alertColor: Colors.red,
+                alertEnabled: true,
+                rememberAlert: false,
+            ),
+            1: NavigationTab(
+                title: "Settings",
+                page: SettingsTab(),
+                icon: Icon(Icons.settings),
+                activeIcon: Icon(Icons.settings),
+            ),
+        };
+    });
+```
+
+This will add an alert to the Chat tab with a red color.
+
+You can also update the alert programmatically.
+
+``` dart
+/// Enable the alert
+BaseNavigationHub.stateActions.alertEnableTab(tab: 0);
+
+/// Disable the alert
+BaseNavigationHub.stateActions.alertDisableTab(tab: 0);
+```
+
 <a name="maintaining-state"></a>
 <br>
 
@@ -421,7 +511,7 @@ class _MyNavigationHubState extends NavigationHub<MyNavigationHub> {
           title: "Home",
           page: HomeTab(),
           icon: Icon(Icons.home),
-          activeIcon: Icon(Icons.home_filled),
+          activeIcon: Icon(Icons.home),
         ),
         1: NavigationTab(
           title: "Settings",

resources/docs/6.x/what-is-nylo.md

@@ -82,3 +82,4 @@ Here's a shout out to the contributors who have helped build {{ config('app.name
 - <a href="https://github.com/stensonb" target="_blank">stensonb</a>
 - <a href="https://github.com/ruwiss" target="_blank">ruwiss</a>
 - <a href="https://github.com/rytisder" target="_blank">rytisder</a>
+- <a href="https://github.com/israelins85" target="_blank">israelins85</a>