Component phone input (#21)

* chore: update contributing

* fix: Fix button group immutability (#1)

* Fix errors

* fix copywith function

* [automated commit] lint format and import sort

---------

Co-authored-by: Osman <[email protected]>
Co-authored-by: github-actions <[email protected]>

* [automated commit] lint format and import sort

* update on-main to push to firebase (#3)

* ci: move firebase to flutter main host for qa (#4)

* feat: Add List Item (#5)

* feat: Add List Item

* [automated commit] lint format and import sort

---------

Co-authored-by: Simeon Dimitrov <[email protected]>
Co-authored-by: github-actions <[email protected]>

* fix(main): ListItem disabled color (#8)

* fix(main): ListItem disabled color

* [automated commit] lint format and import sort

---------

Co-authored-by: github-actions <[email protected]>

* feat : Dropdown menu (#7)

* Create dropdown

* Add sizes

* create stoyrybook and add size

* Fix errrs and respond to comments

* Fix issues

* [automated commit] lint format and import sort

* Alter isLarge

* Fix spacing

* [automated commit] lint format and import sort

* Alter leading styles

* [automated commit] lint format and import sort

---------

Co-authored-by: Osman <[email protected]>
Co-authored-by: github-actions <[email protected]>

* Component ZetaSwitch (#6)

* create ZetaSwitch

* ZetaSwitch using MaterialSwitch

* widgetbook for ZetaSwitch

* remove hover; fix initState

* add showHover parameter

* add comments 'Zeta change' in material_switch.dart

* remove size parameter and factory constructors

* fix example and widgetbook

* Component Zeta Radio Button (#9)

* create component Zeta Radio Button

* remove hover color

* fix label line height

* feat(main): SnackBar (#10)

* add snackbar example

* Add snackbar widgetbook

* feat(main): SnackBar

* [automated commit] lint format and import sort

* remove view icon

* Add view icon

* Add widgetbook icon helper

* [automated commit] lint format and import sort

* fix alphabetical imports

* Fix delete and error background color

---------

Co-authored-by: github-actions <[email protected]>

* feat(main): Tabs (#11)

* feat(main): Tabs

* [automated commit] lint format and import sort

---------

Co-authored-by: github-actions <[email protected]>

* chore: Update text styles (#13)

* fix: switch on web (#14)

* Component date input (#12)

* create ZetaDateInput

* create different ZetaDateInput variants

* fix show error style

* date validation and input mask; documentation for ZetaDateInput properties

* create widgetbook

* changes according to comments

* Component date input (#16)

* create ZetaDateInput

* create different ZetaDateInput variants

* fix show error style

* date validation and input mask; documentation for ZetaDateInput properties

* create widgetbook

* changes according to comments

* fix Typography of Date Input

* restore

* remove text line height

* ZetaPhoneInput initial commit

* complete ZetaPhoneInput; add flags

* create phoneInputUseCase in Widgetbook

* refactor phone input to use native alert dialog

---------

Co-authored-by: Luke <[email protected]>
Co-authored-by: ahmed-osman3 <[email protected]>
Co-authored-by: Osman <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luke Walton <[email protected]>
Co-authored-by: Simeon Dimitrov <[email protected]>
Co-authored-by: sd-athlon <[email protected]>

example/lib/home.dart

@@ -15,6 +15,7 @@ import 'package:zeta_example/pages/components/dialpad_example.dart';
 import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
+import 'package:zeta_example/pages/components/phone_input_example.dart';
 import 'package:zeta_example/pages/components/radio_example.dart';
 import 'package:zeta_example/pages/components/stepper_example.dart';
 import 'package:zeta_example/pages/components/switch_example.dart';
@@ -61,6 +62,7 @@ final List<Component> components = [
   Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
   Component(SwitchExample.name, (context) => const SwitchExample()),
   Component(DateInputExample.name, (context) => const DateInputExample()),
+  Component(PhoneInputExample.name, (context) => const PhoneInputExample()),
   Component(DialogExample.name, (context) => const DialogExample()),
 ];
 

example/lib/pages/components/phone_input_example.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class PhoneInputExample extends StatefulWidget {
+  static const String name = 'PhoneInput';
+
+  const PhoneInputExample({Key? key}) : super(key: key);
+
+  @override
+  State<PhoneInputExample> createState() => _PhoneInputExampleState();
+}
+
+class _PhoneInputExampleState extends State<PhoneInputExample> {
+  String? _errorText;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'Phone Input',
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Rounded', style: ZetaTextStyles.titleMedium),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaPhoneInput(
+                label: 'Phone number',
+                hint: 'Enter your phone number',
+                hasError: _errorText != null,
+                errorText: _errorText,
+                onChanged: (value) {
+                  if (value?.isEmpty ?? true) setState(() => _errorText = null);
+                  print(value);
+                },
+                countries: ['US', 'GB', 'DE', 'AT', 'FR', 'IT', 'BG'],
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Sharp', style: ZetaTextStyles.titleMedium),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaPhoneInput(
+                label: 'Phone number',
+                hint: 'Enter your phone number',
+                countryDialCode: '+44',
+                phoneNumber: '987654321',
+                hasError: _errorText != null,
+                errorText: _errorText,
+                onChanged: (value) {
+                  if (value?.isEmpty ?? true) return setState(() => _errorText = null);
+                },
+                rounded: false,
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Disabled', style: ZetaTextStyles.titleMedium),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaPhoneInput(
+                label: 'Phone number',
+                hint: 'Enter your phone number',
+                enabled: false,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -22,6 +22,7 @@ import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
 import 'pages/components/pagination_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
+import 'pages/components/phone_input_widgetbook.dart';
 import 'pages/components/progress_widgetbook.dart';
 import 'pages/components/radio_widgetbook.dart';
 import 'pages/components/stepper_widgetbook.dart';
@@ -118,11 +119,12 @@ class HotReload extends StatelessWidget {
               builder: (context) => snackBarUseCase(context),
             ),
             WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
+            WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
+            WidgetbookUseCase(name: 'Phone Input', builder: (context) => phoneInputUseCase(context)),
             WidgetbookUseCase(
               name: 'Stepper',
               builder: (context) => stepperUseCase(context),
             ),
-            WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
             WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),

example/widgetbook/pages/components/phone_input_widgetbook.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget phoneInputUseCase(BuildContext context) {
+  final countries = context.knobs.string(
+    label: 'ISO 3166-1 alpha-2 county codes',
+    initialValue: '',
+  );
+  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+  final enabled = context.knobs.boolean(label: 'Enabled', initialValue: true);
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        return Padding(
+          padding: const EdgeInsets.all(ZetaSpacing.x5),
+          child: ZetaPhoneInput(
+            rounded: rounded,
+            enabled: enabled,
+            label: 'Phone number',
+            hint: 'Enter your phone number',
+            countries: countries.isEmpty ? null : countries.toUpperCase().split(','),
+          ),
+        );
+      },
+    ),
+  );
+}