Refactor FFont & support errors in FTextField (#36)

* Refactor FFont & add error colors

* Refactor FTextField to support errors

forui/example/analysis_options.yaml

@@ -1,4 +1,6 @@
 include: package:flint/analysis_options.flutter.yaml
 analyzer:
   errors:
+    diagnostic_describe_all_properties: ignore
+    public_member_api_docs: ignore
     unused_result: ignore

forui/example/lib/main.dart

@@ -17,20 +17,66 @@ class Application extends StatelessWidget {
           data: FThemes.zinc.light,
           child: Scaffold(
             backgroundColor: FThemes.zinc.light.colorScheme.background,
-            body: const Padding(
-              padding: EdgeInsets.all(16),
-              child: ExampleWidget(),
+            body: const Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                ExampleWidget(),
+              ],
             ),
           ),
         ),
       );
 }
 
-/// The example widget.
-class ExampleWidget extends StatelessWidget {
-  /// Creates an example widget.
+class ExampleWidget extends StatefulWidget {
   const ExampleWidget({super.key});
 
   @override
-  Widget build(BuildContext context) => ListView();
+  State<ExampleWidget> createState() => _ExampleWidgetState();
+}
+
+class _ExampleWidgetState extends State<ExampleWidget> {
+  late WidgetStatesController controller;
+  late TextEditingController textController;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = WidgetStatesController();
+    textController = TextEditingController()..addListener(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) => Padding(
+    padding: const EdgeInsets.all(8.0),
+    child: Column(
+        children: [
+          // FCard(title: 'Email'),
+          FTextField(
+            // enabled: false,
+            labelText: 'Email',
+            hintText: '[email protected]',
+            helpText: 'This is your public display name.',
+            // errorText: 'Error',
+            // statesController: controller,
+            controller: textController,
+          ),
+          // const TextField(
+          //   // enabled: false,
+          //   decoration: InputDecoration(
+          //     labelText: 'Material TextField',
+          //     hintText: 'Email',
+          //     errorText: 'Error text',
+          //   ),
+          // ),
+        ],
+      ),
+  );
+
+  @override
+  void dispose() {
+    super.dispose();
+    controller.dispose();
+    textController.dispose();
+  }
 }

forui/example/pubspec.lock

@@ -77,18 +77,18 @@ packages:
     dependency: "direct dev"
     description:
       name: build_runner
-      sha256: "1414d6d733a85d8ad2f1dfcb3ea7945759e35a123cb99ccfac75d0758f75edfa"
+      sha256: "644dc98a0f179b872f612d3eb627924b578897c629788e858157fa5e704ca0c7"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.10"
+    version: "2.4.11"
   build_runner_core:
     dependency: transitive
     description:
       name: build_runner_core
-      sha256: "4ae8ffe5ac758da294ecf1802f2aff01558d8b1b00616aa7538ea9a8a5d50799"
+      sha256: e3c79f69a64bdfcd8a776a3c28db4eb6e3fb5356d013ae5eb2e52007706d5dbe
       url: "https://pub.dev"
     source: hosted
-    version: "7.3.0"
+    version: "7.3.1"
   built_collection:
     dependency: transitive
     description:

forui/lib/forui.dart

@@ -11,7 +11,7 @@ export 'src/theme/style.dart';
 export 'src/theme/theme.dart';
 export 'src/theme/theme_data.dart';
 
-export 'src/theme/font.dart';
+export 'src/theme/typography.dart';
 
 // Themes
 export 'src/theme/themes.dart';

forui/lib/src/theme/color_scheme.dart

@@ -41,6 +41,12 @@ final class FColorScheme with Diagnosticable {
   /// The destructive foreground color.
   final Color destructiveForeground;
 
+  /// The error color.
+  final Color error;
+
+  /// The error foreground color.
+  final Color errorForeground;
+
   /// The border color.
   final Color border;
 
@@ -57,6 +63,8 @@ final class FColorScheme with Diagnosticable {
     required this.mutedForeground,
     required this.destructive,
     required this.destructiveForeground,
+    required this.error,
+    required this.errorForeground,
     required this.border,
   });
 
@@ -73,6 +81,8 @@ final class FColorScheme with Diagnosticable {
     Color? mutedForeground,
     Color? destructive,
     Color? destructiveForeground,
+    Color? error,
+    Color? errorForeground,
     Color? border,
   }) =>
       FColorScheme(
@@ -87,6 +97,8 @@ final class FColorScheme with Diagnosticable {
         mutedForeground: mutedForeground ?? this.mutedForeground,
         destructive: destructive ?? this.destructive,
         destructiveForeground: destructiveForeground ?? this.destructiveForeground,
+        error: error ?? this.error,
+        errorForeground: errorForeground ?? this.errorForeground,
         border: border ?? this.border,
       );
 
@@ -105,6 +117,8 @@ final class FColorScheme with Diagnosticable {
       ..add(ColorProperty('mutedForeground', mutedForeground))
       ..add(ColorProperty('destructive', destructive))
       ..add(ColorProperty('destructiveForeground', destructiveForeground))
+      ..add(ColorProperty('error', error))
+      ..add(ColorProperty('errorForeground', errorForeground))
       ..add(ColorProperty('border', border));
   }
 
@@ -121,6 +135,8 @@ final class FColorScheme with Diagnosticable {
     mutedForeground == other.mutedForeground &&
     destructive == other.destructive &&
     destructiveForeground == other.destructiveForeground &&
+    error == other.error &&
+    errorForeground == other.errorForeground &&
     border == other.border;
 
   @override
@@ -136,6 +152,8 @@ final class FColorScheme with Diagnosticable {
     mutedForeground.hashCode ^
     destructive.hashCode ^
     destructiveForeground.hashCode ^
+    error.hashCode ^
+    errorForeground.hashCode ^
     border.hashCode;
 
 }

forui/lib/src/theme/theme.dart

@@ -41,8 +41,8 @@ class FTheme extends StatelessWidget {
     child: Directionality(
       textDirection: textDirection ?? Directionality.of(context),
       child: DefaultTextStyle(
-        style: data.font.toTextStyle(
-          fontSize: data.font.base,
+        style: data.typography.toTextStyle(
+          fontSize: data.typography.base,
           color: data.colorScheme.foreground,
         ),
         child: child,

forui/lib/src/theme/theme_data.dart

@@ -7,8 +7,8 @@ class FThemeData with Diagnosticable {
   /// The color scheme.
   final FColorScheme colorScheme;
 
-  /// The font data.
-  final FFont font;
+  /// The typography data.
+  final FTypography typography;
 
   /// The overarching style.
   final FStyle style;
@@ -40,7 +40,7 @@ class FThemeData with Diagnosticable {
   /// Creates a [FThemeData].
   FThemeData({
     required this.colorScheme,
-    required this.font,
+    required this.typography,
     required this.style,
     required this.badgeStyles,
     required this.buttonStyles,
@@ -55,25 +55,25 @@ class FThemeData with Diagnosticable {
   /// Creates a [FThemeData] that inherits the given properties.
   FThemeData.inherit({
     required this.colorScheme,
-    required this.font,
+    required this.typography,
     required this.style,
-  })  : badgeStyles = FBadgeStyles.inherit(colorScheme: colorScheme, font: font, style: style),
+  })  : badgeStyles = FBadgeStyles.inherit(colorScheme: colorScheme, font: typography, style: style),
         buttonStyles = FButtonStyles.inherit(
           colorScheme: colorScheme,
-          font: font,
+          font: typography,
           style: style,
         ),
-        cardStyle = FCardStyle.inherit(colorScheme: colorScheme, font: font, style: style),
-        headerStyle = FHeaderStyle.inherit(colorScheme: colorScheme, font: font),
-        textFieldStyle = FTextFieldStyle.inherit(colorScheme: colorScheme, font: font, style: style),
+        cardStyle = FCardStyle.inherit(colorScheme: colorScheme, font: typography, style: style),
+        headerStyle = FHeaderStyle.inherit(colorScheme: colorScheme, font: typography),
+        textFieldStyle = FTextFieldStyle.inherit(colorScheme: colorScheme, font: typography, style: style),
         boxStyle = FBoxStyle.inherit(colorScheme: colorScheme),
         separatorStyles = FSeparatorStyles.inherit(colorScheme: colorScheme, style: style),
         switchStyle = FSwitchStyle.inherit(colorScheme: colorScheme);
 
   /// Creates a copy of this [FThemeData] with the given properties replaced.
   FThemeData copyWith({
     FColorScheme? colorScheme,
-    FFont? font,
+    FTypography? typography,
     FStyle? style,
     FBadgeStyles? badgeStyles,
     FButtonStyles? buttonStyles,
@@ -86,7 +86,7 @@ class FThemeData with Diagnosticable {
   }) =>
       FThemeData(
         colorScheme: colorScheme ?? this.colorScheme,
-        font: font ?? this.font,
+        typography: typography ?? this.typography,
         style: style ?? this.style,
         badgeStyles: badgeStyles ?? this.badgeStyles,
         buttonStyles: buttonStyles ?? this.buttonStyles,
@@ -103,7 +103,7 @@ class FThemeData with Diagnosticable {
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty('colorScheme', colorScheme, level: DiagnosticLevel.debug))
-      ..add(DiagnosticsProperty('font', font, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty('typography', typography, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('style', style, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('badgeStyles', badgeStyles, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('buttonStyles', buttonStyles, level: DiagnosticLevel.debug))
@@ -121,7 +121,7 @@ class FThemeData with Diagnosticable {
       other is FThemeData &&
           runtimeType == other.runtimeType &&
           colorScheme == other.colorScheme &&
-          font == other.font &&
+          typography == other.typography &&
           style == other.style &&
           badgeStyles == other.badgeStyles &&
           buttonStyles == other.buttonStyles &&
@@ -135,7 +135,7 @@ class FThemeData with Diagnosticable {
   @override
   int get hashCode =>
       colorScheme.hashCode ^
-      font.hashCode ^
+      typography.hashCode ^
       style.hashCode ^
       badgeStyles.hashCode ^
       buttonStyles.hashCode ^

forui/lib/src/theme/themes.dart

@@ -8,7 +8,7 @@ extension FThemes on Never {
   /// The light and dark variants of the [Zinc](https://ui.shadcn.com/themes) theme.
   static final zinc = (
     light: FThemeData.inherit(
-      font: FFont(),
+      typography: FTypography(),
       colorScheme: const FColorScheme(
         brightness: Brightness.light,
         background: Color(0xFFFFFFFF),
@@ -21,12 +21,14 @@ extension FThemes on Never {
         mutedForeground: Color(0xFF71717A),
         destructive: Color(0xFFEF4444),
         destructiveForeground: Color(0xFFFAFAFA),
+        error: Color(0xFFEF4444),
+        errorForeground: Color(0xFFFAFAFA),
         border: Color(0xFFE4E4E7),
       ),
       style: FStyle(),
     ),
     dark: FThemeData.inherit(
-      font: FFont(),
+      typography: FTypography(),
       colorScheme: const FColorScheme(
         brightness: Brightness.dark,
         background: Color(0xFF09090B),
@@ -39,6 +41,8 @@ extension FThemes on Never {
         mutedForeground: Color(0xFFA1A1AA),
         destructive: Color(0xFF7F1D1D),
         destructiveForeground: Color(0xFFFAFAFA),
+        error: Color(0xFF7F1D1D),
+        errorForeground: Color(0xFFFAFAFA),
         border: Color(0xFF27272A),
       ),
       style: FStyle(),