Merge pull request #33 from tarkalabs/ibrahim/refactor

Renamed components and updated readme
tarkalabs · Jan 16, 2024 · 0ecf37b · 0ecf37b
2 parents 7056a60 + 4da4c27
commit 0ecf37b
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 222 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Tarka UI Kit is a reusable component library for building Flutter apps, based on
 # List of components
 - TUIAccordion
 - TUIAnchor
-- TUIAppBar
+- TUIAppTopBar
 - TUIAvatar
 - TUIBadge
 - TUIBreadCrumb
@@ -33,5 +33,4 @@ Tarka UI Kit is a reusable component library for building Flutter apps, based on
 - TUISuccessCheckMark
 - TUISwitch
 - TUITag
-- TUITextField
-- TUITextStyle
+- TUIInputField
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -112,7 +112,7 @@ class _HomePageState extends State<HomePage> {
         iconData: Symbol.map.value,
         onPressed: () {},
       ),
-      bottomNavigationBar: TUIAppBar(
+      bottomNavigationBar: TUIAppTopBar(
         items: [
           TUIAppBarItem(
               iconData: FluentIcons.bookmark_24_regular, label: "Saved"),
@@ -356,14 +356,14 @@ class _HomePageState extends State<HomePage> {
             const SizedBox(height: 8),
             const Text("Text Field", style: TUITextStyle.heading6),
             const SizedBox(height: 8),
-            const TUITextField(
+            const TUIInputField(
               labelText: "Label",
               prefixIcon: Icon(TUISymbol.successCheckMark),
               suffixIcon: Icon(TUISymbol.chevronDown),
               helperText: "Helper / hint message goes here.",
             ),
             const SizedBox(height: 8),
-            const TUITextField(
+            const TUIInputField(
               hintText: "Label",
               labelText: "Hello World",
               errorText: "Error message goes here.",

diff --git a/lib/components/app_bar/app_bar.dart b/lib/components/app_bar/app_bar.dart
@@ -1,15 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:tarka_ui/styles/theme.dart';
 
-class TUIAppBar extends StatefulWidget {
+class TUIAppTopBar extends StatefulWidget {
   final List<TUIAppBarItem> items;
   final List<BottomNavigationBarItem> _bnbItems;
 
   final ValueChanged<int>? onTap;
   final int currentIndex;
   final bool showLabels;
 
-  TUIAppBar({
+  TUIAppTopBar({
     super.key,
     required this.items,
     this.onTap,
@@ -44,7 +44,7 @@ class TUIAppBar extends StatefulWidget {
   }
 }
 
-class _TUIAppBar extends State<TUIAppBar> {
+class _TUIAppBar extends State<TUIAppTopBar> {
   @override
   Widget build(BuildContext context) {
     TUIThemeData themeData = TUITheme.of(context);

diff --git a/lib/components/textfield/text_field.dart b/lib/components/textfield/text_field.dart
@@ -2,11 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:tarka_ui/styles/default_colors.dart';
 import 'package:tarka_ui/styles/text_style.dart';
 
-/// TUITextField is a text input field that allows users to enter text.
+/// TUIInputField is a text input field that allows users to enter text.
 /*
   Example:
   ```dart
-  TUITextField(
+  TUIInputField(
     hintText: 'Hint Text',
     labelText: 'Label',
     prefixText: 'Prefix',
@@ -23,7 +23,7 @@ import 'package:tarka_ui/styles/text_style.dart';
   )
   ```
  */
-class TUITextField extends StatelessWidget {
+class TUIInputField extends StatelessWidget {
   final bool enabled;
   final bool readOnly;
   final String? hintText;
@@ -54,7 +54,7 @@ class TUITextField extends StatelessWidget {
   final void Function(String)? onSubmitted;
   final void Function()? onTap;
 
-  const TUITextField({
+  const TUIInputField({
     super.key,
     this.enabled = true,
     this.readOnly = false,
@@ -85,77 +85,86 @@ class TUITextField extends StatelessWidget {
     this.onEditingComplete,
     this.onSubmitted,
     this.onTap,
-  }):assert(maxLines == null || maxLines > 0),
+  })  : assert(maxLines == null || maxLines > 0),
         assert(minLines == null || minLines > 0),
         assert(
-        (maxLines == null) || (minLines == null) || (maxLines >= minLines),
-        "minLines can't be greater than maxLines",
+          (maxLines == null) || (minLines == null) || (maxLines >= minLines),
+          "minLines can't be greater than maxLines",
         ),
         assert(
-        !expands || (maxLines == null && minLines == null),
-        'minLines and maxLines must be null when expands is true.',
+          !expands || (maxLines == null && minLines == null),
+          'minLines and maxLines must be null when expands is true.',
         ),
-        assert(!obscureText || maxLines == 1, 'Obscured fields cannot be multiline.'),
-        assert(maxLength == null || maxLength == TextField.noMaxLength || maxLength > 0);
+        assert(!obscureText || maxLines == 1,
+            'Obscured fields cannot be multiline.'),
+        assert(maxLength == null ||
+            maxLength == TextField.noMaxLength ||
+            maxLength > 0);
 
   @override
   Widget build(BuildContext context) {
     return Material(
         child: TextField(
-        onChanged: onChanged,
-        onEditingComplete: onEditingComplete,
-        onSubmitted: onSubmitted,
-        keyboardType: keyboardType,
-        textInputAction: textInputAction,
-        controller: controller,
-        onTap: onTap,
-        readOnly: readOnly,
-        enabled: enabled,
-        obscureText: obscureText,
-        obscuringCharacter: obscuringCharacter,
-        textAlign: textAlign,
-        textAlignVertical: textAlignVertical,
-        textCapitalization: textCapitalization,
-        textDirection: textDirection,
-        minLines: minLines,
-        maxLines: maxLines,
-        maxLength: maxLength,
-        decoration: InputDecoration(
-          filled: true,
-          fillColor: TUIDefaultColors.inputBackground,
-          hintText: hintText,
-          hintStyle: TUITextStyle.body6.copyWith(color: TUIDefaultColors.inputTextDim),
-          labelText: labelText,
-          labelStyle:
-              TUITextStyle.body6.copyWith(color: TUIDefaultColors.inputTextDim),
-          suffixText: suffixText,
-          prefixText: prefixText,
-          prefixIconColor: prefixIconColor,
-          prefixIcon: prefixIcon ?? prefixIcon,
-          suffixIconColor: TUIDefaultColors.inputText,
-          suffixIcon: suffixIcon ?? suffixIcon,
-          errorText: errorText,
-          helperText: helperText,
-          errorStyle: TUITextStyle.body7.copyWith(color: TUIDefaultColors.inputText),
-          helperStyle: TUITextStyle.body7.copyWith(color: TUIDefaultColors.inputText),
-          focusedBorder: const UnderlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(8)),
-              borderSide: BorderSide(color: TUIDefaultColors.primary)),
-          disabledBorder: const UnderlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(8)),
-              borderSide: BorderSide(color: TUIDefaultColors.inputBackground)),
-          enabledBorder: const UnderlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(8)),
-              borderSide: BorderSide(color: TUIDefaultColors.inputBackground)),
-          border: const UnderlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(8)),
-              borderSide: BorderSide(color: TUIDefaultColors.inputBackground)),
-          errorBorder: const UnderlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(8)),
-              borderSide: BorderSide(color: TUIDefaultColors.error)),
-          focusedErrorBorder: const UnderlineInputBorder(
-              borderRadius: BorderRadius.all(Radius.circular(8)),
-              borderSide: BorderSide(color: TUIDefaultColors.error)),
-        )));
+            onChanged: onChanged,
+            onEditingComplete: onEditingComplete,
+            onSubmitted: onSubmitted,
+            keyboardType: keyboardType,
+            textInputAction: textInputAction,
+            controller: controller,
+            onTap: onTap,
+            readOnly: readOnly,
+            enabled: enabled,
+            obscureText: obscureText,
+            obscuringCharacter: obscuringCharacter,
+            textAlign: textAlign,
+            textAlignVertical: textAlignVertical,
+            textCapitalization: textCapitalization,
+            textDirection: textDirection,
+            minLines: minLines,
+            maxLines: maxLines,
+            maxLength: maxLength,
+            decoration: InputDecoration(
+              filled: true,
+              fillColor: TUIDefaultColors.inputBackground,
+              hintText: hintText,
+              hintStyle: TUITextStyle.body6
+                  .copyWith(color: TUIDefaultColors.inputTextDim),
+              labelText: labelText,
+              labelStyle: TUITextStyle.body6
+                  .copyWith(color: TUIDefaultColors.inputTextDim),
+              suffixText: suffixText,
+              prefixText: prefixText,
+              prefixIconColor: prefixIconColor,
+              prefixIcon: prefixIcon ?? prefixIcon,
+              suffixIconColor: TUIDefaultColors.inputText,
+              suffixIcon: suffixIcon ?? suffixIcon,
+              errorText: errorText,
+              helperText: helperText,
+              errorStyle: TUITextStyle.body7
+                  .copyWith(color: TUIDefaultColors.inputText),
+              helperStyle: TUITextStyle.body7
+                  .copyWith(color: TUIDefaultColors.inputText),
+              focusedBorder: const UnderlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(8)),
+                  borderSide: BorderSide(color: TUIDefaultColors.primary)),
+              disabledBorder: const UnderlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(8)),
+                  borderSide:
+                      BorderSide(color: TUIDefaultColors.inputBackground)),
+              enabledBorder: const UnderlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(8)),
+                  borderSide:
+                      BorderSide(color: TUIDefaultColors.inputBackground)),
+              border: const UnderlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(8)),
+                  borderSide:
+                      BorderSide(color: TUIDefaultColors.inputBackground)),
+              errorBorder: const UnderlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(8)),
+                  borderSide: BorderSide(color: TUIDefaultColors.error)),
+              focusedErrorBorder: const UnderlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(8)),
+                  borderSide: BorderSide(color: TUIDefaultColors.error)),
+            )));
   }
 }
diff --git a/test/golden_test/app_bar_test.dart b/test/golden_test/app_bar_test.dart
@@ -27,13 +27,12 @@ void main() {
     builder.addScenario("With Label", appBarWithLabel);
     builder.addScenario("Without Label", appBarWithoutLabel);
     await tester.pumpWidgetBuilder(builder.build(), wrapper: tuiAppWrapper());
-    await screenMatchesGolden(
-        tester, 'app_bar_all_types');
+    await screenMatchesGolden(tester, 'app_bar_all_types');
   });
 }
 
-TUIAppBar buildAppBar(List<TUIAppBarItem> items) {
-  return TUIAppBar(
+TUIAppTopBar buildAppBar(List<TUIAppBarItem> items) {
+  return TUIAppTopBar(
     items: items,
     currentIndex: 2,
     onTap: (value) => {},

diff --git a/test/golden_test/goldens/snack_bar_error_with_action.png b/test/golden_test/goldens/snack_bar_error_with_action.png
diff --git a/test/golden_test/goldens/snack_bar_error_without_action.png b/test/golden_test/goldens/snack_bar_error_without_action.png
diff --git a/test/golden_test/goldens/snack_bar_information_with_action.png b/test/golden_test/goldens/snack_bar_information_with_action.png
diff --git a/test/golden_test/goldens/snack_bar_information_without_action.png b/test/golden_test/goldens/snack_bar_information_without_action.png
diff --git a/test/golden_test/goldens/snack_bar_success_with_action.png b/test/golden_test/goldens/snack_bar_success_with_action.png
diff --git a/test/golden_test/goldens/snack_bar_success_without_action.png b/test/golden_test/goldens/snack_bar_success_without_action.png
diff --git a/test/golden_test/goldens/snack_bar_warning_with_action.png b/test/golden_test/goldens/snack_bar_warning_with_action.png
diff --git a/test/golden_test/goldens/snack_bar_warning_without_action.png b/test/golden_test/goldens/snack_bar_warning_without_action.png
diff --git a/test/golden_test/snackbar_test.dart b/test/golden_test/snackbar_test.dart
diff --git a/test/widget_test/app_bar_test.dart b/test/widget_test/app_bar_test.dart
@@ -18,7 +18,7 @@ main() {
     1. Snapshot testing, But Snapshot did not have System nav bar and I could not find a way to include System Nav bar in snapshot.
     2. I tried to find absolute position of widget and make sure that, its above safe area bottom, using some pixels calculation. But I got some wierd numbers that did not make any sense to me.
     */
-    final appBar = TUIAppBar(
+    final appBar = TUIAppTopBar(
       items: [
         TUIAppBarItem(
             iconData: FluentIcons.bookmark_24_regular, label: "Saved"),
@@ -32,14 +32,15 @@ main() {
     await widgetTester.pumpWidgetBuilder(appBar, wrapper: tuiAppWrapper());
     //Since we know that, `BottomNavigationBar` will always be displayed on top of SystemNavBar, we can be assured that TUIAppBar will also be displayed above System Nav Bar.
     var bottomNavBarFinder = find.descendant(
-        of: find.byType(TUIAppBar), matching: find.byType(BottomNavigationBar));
+        of: find.byType(TUIAppTopBar),
+        matching: find.byType(BottomNavigationBar));
     expect(bottomNavBarFinder, findsOneWidget);
   });
 
   testWidgets("When user clicks on App bar item, A Callback is passed.",
       (widgetTester) async {
     final completer = Completer<int>();
-    final appBar = TUIAppBar(
+    final appBar = TUIAppTopBar(
       items: [
         TUIAppBarItem(
             iconData: FluentIcons.bookmark_24_regular, label: "Saved"),