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

example/lib/home.dart

@@ -9,6 +9,7 @@ import 'package:zeta_example/pages/components/breadcrumbs_example.dart';
 import 'package:zeta_example/pages/components/button_example.dart';
 import 'package:zeta_example/pages/components/checkbox_example.dart';
 import 'package:zeta_example/pages/components/chip_example.dart';
+import 'package:zeta_example/pages/components/date_input_example.dart';
 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';
@@ -54,6 +55,7 @@ final List<Component> components = [
   Component(DialPadExample.name, (context) => const DialPadExample()),
   Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
   Component(SwitchExample.name, (context) => const SwitchExample()),
+  Component(DateInputExample.name, (context) => const DateInputExample()),
 ];
 
 final List<Component> theme = [

example/lib/pages/components/date_input_example.dart

@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class DateInputExample extends StatefulWidget {
+  static const String name = 'DateInput';
+
+  const DateInputExample({Key? key}) : super(key: key);
+
+  @override
+  State<DateInputExample> createState() => _DateInputExampleState();
+}
+
+class _DateInputExampleState extends State<DateInputExample> {
+  String? _errorText;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'Date Input',
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Rounded', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Birthdate',
+                hint: 'Enter birthdate',
+                hasError: _errorText != null,
+                errorText: _errorText ?? 'Invalid date',
+                onChanged: (value) {
+                  if (value == null) return setState(() => _errorText = null);
+                  final now = DateTime.now();
+                  setState(
+                    () => _errorText = value.difference(DateTime(now.year, now.month, now.day)).inDays > 0
+                        ? 'Birthdate cannot be in the future'
+                        : null,
+                  );
+                },
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Sharp', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                errorText: 'Oops! Error hint text',
+                rounded: false,
+                datePattern: 'yyyy-MM-dd',
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Disabled', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                enabled: false,
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Medium', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                errorText: 'Oops! Error hint text',
+                size: ZetaDateInputSize.medium,
+              ),
+            ),
+            Divider(color: Colors.grey[200]),
+            Padding(
+              padding: const EdgeInsets.only(top: 20),
+              child: Text('Small', style: ZetaTextStyles.titleSmall),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaDateInput(
+                label: 'Label',
+                hint: 'Default hint text',
+                errorText: 'Oops! Error hint text',
+                size: ZetaDateInputSize.small,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -12,6 +12,7 @@ import 'pages/components/breadcrumbs_widgetbook.dart';
 import 'pages/components/button_widgetbook.dart';
 import 'pages/components/checkbox_widgetbook.dart';
 import 'pages/components/chip_widgetbook.dart';
+import 'pages/components/date_input_widgetbook.dart';
 import 'pages/components/dial_pad_widgetbook.dart';
 import 'pages/components/dropdown_widgetbook.dart';
 import 'pages/components/in_page_banner_widgetbook.dart';
@@ -98,6 +99,7 @@ class HotReload extends StatelessWidget {
               name: 'Snack Bar',
               builder: (context) => snackBarUseCase(context),
             ),
+            WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
             WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),

example/widgetbook/pages/components/date_input_widgetbook.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget dateInputUseCase(BuildContext context) {
+  String? _errorText;
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        final errorText = context.knobs.string(
+          label: 'Error message for invalid date',
+          initialValue: 'Invalid date',
+        );
+        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
+        final enabled = context.knobs.boolean(label: 'Enabled', initialValue: true);
+        final size = context.knobs.list<ZetaDateInputSize>(
+          label: 'Size',
+          options: ZetaDateInputSize.values,
+          labelBuilder: (size) => size.name,
+        );
+        final datePattern = context.knobs.list<String>(
+          label: 'Date pattern',
+          options: ['MM/dd/yyyy', 'dd/MM/yyyy', 'dd.MM.yyyy', 'yyyy-MM-dd'],
+          labelBuilder: (pattern) => pattern,
+        );
+
+        return Padding(
+          padding: const EdgeInsets.all(ZetaSpacing.x5),
+          child: ZetaDateInput(
+            size: size,
+            rounded: rounded,
+            enabled: enabled,
+            label: 'Birthdate',
+            hint: 'Enter birthdate',
+            datePattern: datePattern,
+            hasError: _errorText != null,
+            errorText: _errorText ?? errorText,
+            onChanged: (value) {
+              if (value == null) return setState(() => _errorText = null);
+              final now = DateTime.now();
+              setState(
+                () => _errorText = value.difference(DateTime(now.year, now.month, now.day)).inDays > 0
+                    ? 'Birthdate cannot be in the future'
+                    : null,
+              );
+            },
+          ),
+        );
+      },
+    ),
+  );
+}