Initial

forus-labs · Aug 14, 2024 · f83d351 · f83d351
1 parent 73bdcc0
commit f83d351
Show file tree

Hide file tree

Showing 16 changed files with 811 additions and 212 deletions.
diff --git a/docs/pages/docs/text-field.mdx b/docs/pages/docs/text-field.mdx
@@ -16,14 +16,37 @@ in a form.
     <Widget name='text-field' query={{enabled: 'true'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
-    FTextField(
-      enabled: enabled,
-      label: 'Email',
-      hint: '[email protected]',
-      description: const Text('Enter your email associated with your Forui account.'),
-      maxLines: 1,
-    );
+    ```dart {9, 18, 23-29}
+    class DefaultTextField extends StatefulWidget {
+      const DefaultTextField({super.key});
+
+      @override
+      State<DefaultTextField> createState() => _DefaultTextFieldState();
+    }
+
+    class _DefaultTextFieldState extends State<DefaultTextField> {
+      final TextEditingController _controller = TextEditingController();
+
+      @override
+      void initState() {
+        super.initState();
+      }
+
+      @override
+      void dispose() {
+        _controller.dispose();
+        super.dispose();
+      }
+
+      @override
+      Widget build(BuildContext context) => FTextField(
+        controller: _controller,
+        label: const Text('Email'),
+        hint: '[email protected]',
+        description: const Text('Please enter your email.'),
+        maxLines: 1,
+      );
+    }
     ```
   </Tabs.Tab>
 </Tabs>
@@ -34,6 +57,7 @@ in a form.
 
 ```dart
 FTextField(
+  controller: _controller, // TextEditingController
   enabled: true,
   label: const Text('Email'),
   hint: '[email protected]',
@@ -48,6 +72,7 @@ FTextField(
 
 ```dart
 FTextField.email(
+  controller: _controller, // TextEditingController
   hint: '[email protected]',
   description: const Text('Enter your email associated with your Forui account.'),
 );
@@ -57,6 +82,7 @@ FTextField.email(
 
 ```dart
 FTextField.password(
+  controller: _controller, // TextEditingController
   description: const Text('Your password must be at least 8 characters long.'),
 );
 ```
@@ -65,6 +91,7 @@ FTextField.password(
 
 ```dart
 FTextField.multiline(
+  controller: _controller, // TextEditingController
   label: const Text('Description'),
   hint: 'Enter a description...',
   description: const Text('Enter a description of the item.'),
@@ -83,7 +110,11 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.email(
+      controller: _controller, // TextEditingController
+      label: const Text('Email'),
       hint: '[email protected]',
+      description: const Text('Please enter your email.'),
+      maxLines: 1,
     );
     ```
   </Tabs.Tab>
@@ -97,10 +128,14 @@ FTextField.multiline(
     <Widget name='text-field' query={{enabled: 'false'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart {2}
+    ```dart {3}
     FTextField.email(
-      enabled: false
+      controller: _controller, // TextEditingController
+      enabled: false,
+      label: const Text('Email'),
       hint: '[email protected]',
+      description: const Text('Please enter your email.'),
+      maxLines: 1,
     );
     ```
   </Tabs.Tab>
@@ -116,7 +151,7 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.password(
-      controller: TextEditingController(text: 'My password'),
+      controller: _controller, // TextEditingController
     );
     ```
   </Tabs.Tab>
@@ -131,6 +166,7 @@ FTextField.multiline(
   <Tabs.Tab>
     ```dart
     FTextField.multiline(
+      controller: _controller, // TextEditingController
       label: const Text('Leave a review'),
       maxLines: 4,
     );
@@ -146,7 +182,7 @@ FTextField.multiline(
     <Widget name='text-field' variant='form' height={550} query={{}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart {22-26, 28-32}
+    ```dart {9-11, 20-21, 26-27, 31-36, 38-42, 46-52}
     class LoginForm extends StatefulWidget {
       const LoginForm({super.key});
 
@@ -156,48 +192,53 @@ FTextField.multiline(
 
     class _LoginFormState extends State<LoginForm> {
       final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+      final TextEditingController _emailController = TextEditingController();
+      final TextEditingController _passwordController = TextEditingController();
 
       @override
       void initState() {
         super.initState();
       }
 
+      @override
+      void dispose() {
+        _emailController.dispose();
+        _passwordController.dispose();
+        super.dispose();
+      }
+
       @override
       Widget build(BuildContext context) => Form(
-        key: _formKey,
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            SizedBox(
-              height: 110,
-              child: FTextField.email(
-                hint: '[email protected]',
-                autovalidateMode: AutovalidateMode.onUserInteraction,
-                validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
-              ),
+            key: _formKey,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                FTextField.email(
+                  controller: _emailController,
+                  hint: '[email protected]',
+                  autovalidateMode: AutovalidateMode.onUserInteraction,
+                  validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
+                ),
+                const SizedBox(height: 10),
+                FTextField.password(
+                  controller: _passwordController,
+                  autovalidateMode: AutovalidateMode.onUserInteraction,
+                  validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
+                ),
+                const SizedBox(height: 20),
+                FButton(
+                  label: const Text('Login'),
+                  onPress: () {
+                    if (!_formKey.currentState!.validate()) {
+                      return; // Form is invalid.
+                    }
+
+                    // Form is valid, do something.
+                  },
+                ),
+              ],
             ),
-            const SizedBox(height: 4),
-            SizedBox(
-              height: 110,
-              child: FTextField.password(
-                hint: '',
-                autovalidateMode: AutovalidateMode.onUserInteraction,
-                validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
-              ),
-            ),
-            const SizedBox(height: 30),
-            FButton(
-              label: const Text('Login'),
-              onPress: () {
-                if (!_formKey.currentState!.validate()) {
-                  // Handle errors here.
-                  return;
-                }
-              },
-            ),
-          ],
-        ),
-      );
+          );
     }
     ```
   </Tabs.Tab>

diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md
@@ -1,6 +1,21 @@
+## Next
+
+### Additions
+
+* Add `FLabel`.
+* Add label and description to `FCheckbox`.
+
+### Changes
+
+### Fixes
+
+* Fix `FTextField` error message replacing the description text.
+
+
 ## 0.5.0
 
 ### Additions
+
 * Add `FFormFieldStyle`.
 
 ### Changes
@@ -25,16 +40,23 @@
 ## 0.4.0
 
 ### Additions
+
 * Add `FAvatar`.
+
 * **Breaking:** Add `FCalendarEntryStyle.focusedBorderColor`. This only affects users that customized `FCalendarEntryStyle`.
+
 * Add `FResizable`.
+
 * Add `image` parameter to `FCard`.
 
 ### Changes
+
 * Change number of years displayed per page in `FCalendar` from 12 to 15.
+
 * **Breaking:** Move `FCalendar.enabled` to `FCalendarController.selectable(...)`.
 
 * **Breaking:** Rename `FCalendarController.contains(...)` to `FCalendarController.selected(...)`.
+
 * **Breaking:** Rename `FCalendarController.onPress(...)` to `FCalendarController.select(...)`.
 
 * **Breaking:** Rename `FCalendarEntryStyle.focusedBackgroundColor` to `FCalendarEntryStyle.hoveredBackgroundColor`.
@@ -57,64 +79,88 @@
   This should only affect people that customize `FThemeData`. Use the `FThemeData.inherit(...)` constructor instead.
 
 ### Fixes
+
 * Fix `FCalendar` dates & `FButton`s not being toggleable using `Enter` key.
+
 * Fix `FCalendar` dates sometimes not being navigable using arrow keys.
 
 
 ## 0.3.0
 
 ### Additions
+
 * Add `FAlert`
+
 * Add `FCalendar`
+
 * Add `FBottomNavigationBar`
 
 ### Enhancements
+
 * **Breaking** Change `FSwitch` to be usable in `Form`s.
+
 * **Breaking** Rename `FThemeData.checkBoxStyle` to `FThemeData.checkboxStyle` for consistency.
 
 ### Fixes
+
 * Fix missing `style` parameter for `FCheckbox`.
 
 
 ## 0.2.0+3
 
 ### Fixes
+
 * Fix broken images in README.md (yet again).
 
 
 ## 0.2.0+2
 
 ### Fixes
+
 * Fix broken images in README.md.
 
 
 ## 0.2.0+1
 
 ### Fixes
+
 * Fix broken images in README.md.
 
 
 ## 0.2.0
 
 ### Additions
+
 * Add `FCheckbox`.
+
 * Add `FHeader.nested`.
+
 * Add `FProgress`.
 
 ### Enhancements
+
 * **Breaking** Move `FHeaderStyle` to `FHeaderStyles.rootStyle`.
+
 * **Breaking** Move `FHeaderActionStyle.padding` to `FRootHeaderStyle.actionSpacing`.
+
 * **Breaking** Suffix style parameters with `Style`, i.e. `FRootHeaderStyle.action` has been renamed to 
   `FRootHeaderStyle.actionStyle`.
+
 * **Breaking** Raw fields have been removed, wrap strings with the Text() widget. E.g. `FButton(label: 'Hello')` or 
   `FButton(rawLabel: 'Hello')` should be replaced with `FButton(label: Text('Hello'))`.
-* Change `FTextField` to be usable in `Form`s. 
+
+* 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.
+
 * **Breaking** `FButton.prefixIcon` and `FButton.suffixIcon` have been renamed to `FButton.prefix` and `FButton.suffix`.
+
 * Fix padding inconsistencies in `FCard` and `FDialog`.