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,12 +1,14 @@
-## 0.2.0
+## Next
 
+### Changes
 * Add `Header.nested` widget.
-
-### Breaking changes
-
-* `FHeaderStyle` have been nested in `FHeaderStyles.rootStyle`.
-* `FHeaderActionStyle.action` parameter has been renamed to `FRootHeaderStyle.actionStyle`.
-* `FHeaderActionStyle.padding` parameter has been moved to `FRootHeaderStyle.actionSpacing`.
+* Change `FTextField` to be usable in `Form`s. 
+* Change `FTextFieldStyle`'s default vertical content padding from `5` to `15`.
+* **Breaking** Move `FHeaderStyle` to `FHeaderStyles.rootStyle`.
+* **Breaking** Move `FHeaderActionStyle.padding` to `FRootHeaderStyle.actionSpacing`.
+* Split exports in `forui.dart` into sub-libraries.
+* **Breaking** Suffix style parameters with `Style`, i.e. `FRootHeaderStyle.action` has been renamed to `FRootHeaderStyle.actionStyle`.
+* Fix missing `key` parameter in `FTextField` constructors.
 
 ## 0.1.0
 

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

@@ -30,5 +30,5 @@ class Application extends StatelessWidget {
             content: const Example(),
           ),
         ),
-      );
+      ));
 }

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