Allow FTextField to be usable in Forms

docs/pages/docs/text-field.mdx

@@ -2,7 +2,8 @@ import { Tabs } from 'nextra/components';
 import { Widget } from '../../components/widget';
 
 # Text Fields
-A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.
+A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. It can also be used
+in a form.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
@@ -14,7 +15,7 @@ A text field lets the user enter text, either with hardware keyboard or with an
       enabled: enabled,
       label: 'Email',
       hint: '[email protected]',
-    )
+    );
     ```
   </Tabs.Tab>
 </Tabs>
@@ -26,9 +27,9 @@ A text field lets the user enter text, either with hardware keyboard or with an
 ```dart
 FTextField(
   enabled: true,
-  label: 'Email',
+  label: Text('Email'),
   hint: '[email protected]',
-  footer: 'Enter your email associated with your Forui account.',
+  footer: Text('Enter your email associated with your Forui account.'),
   keyboardType: TextInputType.emailAddress,
   textCapitalization: TextCapitalization.none,
 );
@@ -38,28 +39,26 @@ FTextField(
 
 ```dart
 FTextField.email(
-  label: 'Email',
   hint: '[email protected]',
-  footer: 'Enter your email associated with your Forui account.',
+  footer: Text('Enter your email associated with your Forui account.'),
 );
 ```
 
 ### `FTextField.password(...)`
 
 ```dart
 FTextField.password(
-  label: 'Password',
-  footer: 'Your password must be at least 8 characters long.',
+  footer: Text('Your password must be at least 8 characters long.'),
 );
 ```
 
 ### `FTextField.multiline(...)`
 
 ```dart
 FTextField.multiline(
-  label: 'Description',
+  label: Text('Description'),
   hint: 'Enter a description...',
-  footer: 'Enter a description of the item.',
+  footer: Text('Enter a description of the item.'),
 );
 ```
 
@@ -75,7 +74,6 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.email(
-      label: 'Email',
       hint: '[email protected]',
     );
     ```
@@ -92,7 +90,7 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.email(
-      label: 'Email',
+      enabled: false
       hint: '[email protected]',
     );
     ```
@@ -110,7 +108,6 @@ FTextField.multiline(
     ```dart
     FTextField.password(
       controller: TextEditingController(text: 'My password'),
-      label: 'Password',
     );
     ```
   </Tabs.Tab>
@@ -125,9 +122,62 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.multiline(
-      label: 'Leave a review',
+      label: Text('Leave a review'),
+      maxLines: 4,
     );
     ```
   </Tabs.Tab>
 </Tabs>
 
+
+### Form
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='text-field' variant='form' query={{}}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```dart
+    class LoginForm extends StatefulWidget {
+      const LoginForm({super.key});
+
+      @override
+      State<LoginForm> createState() => _LoginFormState();
+    }
+
+    class _LoginFormState extends State<LoginForm> {
+      final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
+      @override
+      void initState() {
+        super.initState();
+      }
+
+      @override
+      Widget build(BuildContext context) => Form(
+        key: _formKey,
+        child: Column(
+          children: [
+            FTextField.email(
+              hint: '[email protected]',
+              help: const Text(''),
+              validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
+            ),
+            const SizedBox(height: 4),
+            FTextField.password(
+              hint: '',
+              help: const Text(''),
+              validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
+            ),
+            const SizedBox(height: 30),
+            FButton(
+              rawLabel: const Text('Login'),
+              onPress: () => _formKey.currentState!.validate(),
+            ),
+          ],
+        ),
+      );
+    }
+    ```
+  </Tabs.Tab>
+</Tabs>

forui/CHANGELOG.md

@@ -1,3 +1,13 @@
+## Next
+
+### Changes
+* Change `FTextField` to be usable in `Form`s. 
+* Change `FTextFieldStyle`'s default vertical content padding from `5` to `15`.
+* Split exports in `forui.dart` into sub-libraries.
+
+## Fixes
+* Fix missing `key` parameter in `FTextField` constructors.
+
 ## 0.1.0
 
 * Initial release! 🚀

forui/analysis_options.yaml

@@ -5,4 +5,5 @@ analyzer:
 
 linter:
   rules:
+    - use_key_in_widget_constructors
     - require_trailing_commas

forui/build.yaml

@@ -3,10 +3,6 @@
 targets:
   $default:
     builders:
-      stevia_runner:steviaAssetGenerator:
-        generate_for:
-          - assets/**
-
       mockito:mockBuilder:
         generate_for:
           - test/**.dart

forui/example/lib/main.dart

@@ -31,56 +31,40 @@ class ExampleWidget extends StatefulWidget {
 }
 
 class _ExampleWidgetState extends State<ExampleWidget> {
+  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
   @override
   void initState() {
     super.initState();
   }
 
   @override
   Widget build(BuildContext context) => Padding(
-        padding: const EdgeInsets.all(8.0),
+      padding: const EdgeInsets.all(8.0),
+      child: Form(
+        key: _formKey,
         child: Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const SizedBox(height: 10),
-            Expanded(
-              child: FTabs(
-                tabs: [
-                  FTabEntry(
-                    label: 'Account',
-                    content: FCard(
-                      title: 'Account',
-                      subtitle: 'Make changes to your account here. Click save when you are done.',
-                      child: Column(
-                        children: [
-                          Container(
-                            color: Colors.red,
-                            height: 100,
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                  FTabEntry(
-                    label: 'Password',
-                    content: FCard(
-                      title: 'Password',
-                      subtitle: 'Change your password here. After saving, you will be logged out.',
-                      child: Column(
-                        children: [
-                          Container(
-                            color: Colors.blue,
-                            height: 100,
-                          )
-                        ],
-                      ),
-                    ),
-                  ),
-                ],
-              ),
+            FTextField.email(
+              hint: '[email protected]',
+              help: const Text(''),
+              validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
+            ),
+            const SizedBox(height: 4),
+            FTextField.password(
+              hint: '',
+              help: const Text(''),
+              validator: (value) => (value?.length ?? 0) >= 8 ? null : 'Password must be at least 8 characters long.',
             ),
+            const SizedBox(height: 4),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 30),
+              child: FButton(
+                rawLabel: const Text('Login'),
+                onPress: () => _formKey.currentState!.validate(),
+              ),
+            )
           ],
         ),
-      );
+      ));
 }

forui/lib/assets.dart

@@ -0,0 +1,6 @@
+/// The bundled assets in [forui_assets](https://github.com/forus-labs/forui/tree/main/forui_assets), exported for
+/// convenience.
+library forui.assets;
+
+export 'package:forui_assets/forui_assets.dart';
+export 'package:forui/src/svg_extension.nitrogen.dart';

forui/lib/forui.dart

@@ -1,32 +1,6 @@
 /// A Flutter package for building beautiful user interfaces.
 library forui;
 
-// Icons
-export 'package:forui_assets/forui_assets.dart';
-export 'package:forui/src/svg_extension.nitrogen.dart';
-
-// Theme
-export 'src/theme/color_scheme.dart';
-export 'src/theme/style.dart';
-export 'src/theme/theme.dart';
-export 'src/theme/theme_data.dart';
-
-export 'src/theme/typography.dart';
-
-// Themes
-export 'src/theme/themes.dart';
-
-// Foundation
-export 'src/foundation/tappable.dart' hide FTappable;
-
-// Widgets
-export 'src/widgets/badge/badge.dart' hide FBadgeContent, Variant;
-export 'src/widgets/button/button.dart' hide FButtonContent, Variant;
-export 'src/widgets/card/card.dart' hide FCardContent;
-export 'src/widgets/dialog/dialog.dart' hide FDialogContent, FHorizontalDialogContent, FVerticalDialogContent;
-export 'src/widgets/header/header.dart';
-export 'src/widgets/tabs/tabs.dart';
-export 'src/widgets/text_field/text_field.dart';
-export 'src/widgets/scaffold.dart';
-export 'src/widgets/separator.dart';
-export 'src/widgets/switch.dart';
+export 'assets.dart';
+export 'theme.dart';
+export 'widgets.dart';

forui/lib/src/widgets/dialog/dialog_content.dart

@@ -102,6 +102,7 @@ class FHorizontalDialogContent extends FDialogContent {
     required super.body,
     required super.rawBody,
     required super.actions,
+    super.key,
   }) : super(alignment: CrossAxisAlignment.start, titleTextAlign: TextAlign.start, bodyTextAlign: TextAlign.start);
 
   @override
@@ -125,6 +126,7 @@ class FVerticalDialogContent extends FDialogContent {
     required super.body,
     required super.rawBody,
     required super.actions,
+    super.key,
   }) : super(alignment: CrossAxisAlignment.center, titleTextAlign: TextAlign.center, bodyTextAlign: TextAlign.center);
 
   @override