feat: [MDS-1639] Input components

example/assets/code_snippets/combobox_multi_select.md

@@ -113,7 +113,7 @@ class _ComboboxMultiSelectState extends State<ComboboxMultiSelect> {
                   },
                 ),
         ),
-        child: MoonTextInput(
+        child: MoonInput(
           focusNode: _focusNode,
           hintText: "Select multiple components",
           controller: _searchController,

example/assets/code_snippets/combobox_single_select.md

@@ -115,7 +115,7 @@ class _ComboboxSingleSelectState extends State<ComboboxSingleSelect> {
                   },
                 ),
         ),
-        child: MoonTextInput(
+        child: MoonInput(
           focusNode: _focusNode,
           hintText: "Select single component",
           controller: _searchController,

example/assets/code_snippets/dropdown.md

@@ -61,7 +61,7 @@ class _DropdownState extends State<Dropdown> {
               ),
             ),
           ),
-          child: MoonTextInput(
+          child: MoonInput(
             width: 250,
             readOnly: true,
             canRequestFocus: false,

example/assets/code_snippets/text_input.md → example/assets/code_snippets/input.md

@@ -1,14 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 
-class TextInput extends StatefulWidget {
-  const TextInput({super.key});
+class Input extends StatefulWidget {
+  const Input({super.key});
 
   @override
-  State<TextInput> createState() => _TextInputState();
+  State<Input> createState() => _InputState();
 }
 
-class _TextInputState extends State<TextInput> {
+class _InputState extends State<Input> {
   final TextEditingController _textController = TextEditingController();
 
   @override
@@ -18,7 +18,7 @@ class _TextInputState extends State<TextInput> {
         builder: (BuildContext context) {
           return Column(
             children: [
-              MoonFormTextInput(
+              MoonInput.form(
                 controller: _textController,
                 validator: (String? value) => value != null && value.length < 5 
                   ? "The text should be longer than 5 characters." 

example/assets/code_snippets/text_input_group.md → example/assets/code_snippets/input_group.md

@@ -1,14 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 
-class TextInputGroup extends StatefulWidget {
-  const TextInputGroup({super.key});
+class InputGroup extends StatefulWidget {
+  const InputGroup({super.key});
 
   @override
-  State<TextInputGroup> createState() => _TextInputGroupState();
+  State<InputGroup> createState() => _InputGroupState();
 }
 
-class _TextInputGroupState extends State<TextInputGroup> {
+class _InputGroupState extends State<InputGroup> {
   final TextEditingController _textController = TextEditingController();
   final TextEditingController _passwordController = TextEditingController();
 
@@ -21,10 +21,10 @@ class _TextInputGroupState extends State<TextInputGroup> {
         builder: (context) {
           return Column(
             children: [
-              MoonTextInputGroup(
+              MoonInputGroup(
                 children: [
-                  MoonFormTextInput(
-                    textInputSize: MoonTextInputSize.xl,
+                  MoonInput.form(
+                    inputSize: MoonInputSize.xl,
                     controller: _textController,
                     validator: (String? value) => value?.length != null && value!.length < 5
                       ? "The text should be longer than 5 characters."
@@ -35,8 +35,8 @@ class _TextInputGroupState extends State<TextInputGroup> {
                       child: const Icon(MoonIcons.controls_close_small_24_light),
                     ),
                   ),
-                  MoonFormTextInput(
-                    textInputSize: MoonTextInputSize.xl,
+                  MoonInput.form(
+                    inputSize: MoonInputSize.xl,
                     obscureText: _hidePassword,
                     controller: _passwordController,
                     validator: (String? value) => value != "123" ? "Wrong password." : null,

example/assets/code_snippets/search_with_dropdown.md

@@ -117,7 +117,7 @@ class _SearchWithDropdownState extends State<SearchWithDropdown> {
                   },
                 ),
         ),
-        child: MoonTextInput(
+        child: MoonInput(
           hintText: "Search components",
           controller: _searchController,
           borderRadius: _showDropdown ? const BorderRadius.vertical(top: Radius.circular(8)) : null,

example/assets/code_snippets/search_with_list.md

@@ -65,7 +65,7 @@ class _SearchWithListState extends State<SearchWithList> {
       children: [
         Column(
           children: [
-            MoonTextInput(
+            MoonInput(
               hintText: "Search components",
               controller: _searchController,
               // The onTap() and onChanged() properties are used instead of a listener to initiate search on every input tap.

example/lib/src/storybook/common/component_options.dart

@@ -16,6 +16,8 @@ import 'package:example/src/storybook/stories/primitives/dot_indicator.dart';
 import 'package:example/src/storybook/stories/primitives/drawer.dart';
 import 'package:example/src/storybook/stories/primitives/dropdown.dart';
 import 'package:example/src/storybook/stories/primitives/icons.dart';
+import 'package:example/src/storybook/stories/primitives/input.dart';
+import 'package:example/src/storybook/stories/primitives/input_group.dart';
 import 'package:example/src/storybook/stories/primitives/linear_loader.dart';
 import 'package:example/src/storybook/stories/primitives/linear_progress.dart';
 import 'package:example/src/storybook/stories/primitives/menu_item.dart';
@@ -28,8 +30,6 @@ import 'package:example/src/storybook/stories/primitives/tab_bar.dart';
 import 'package:example/src/storybook/stories/primitives/table.dart';
 import 'package:example/src/storybook/stories/primitives/tag.dart';
 import 'package:example/src/storybook/stories/primitives/text_area.dart';
-import 'package:example/src/storybook/stories/primitives/text_input.dart';
-import 'package:example/src/storybook/stories/primitives/text_input_group.dart';
 import 'package:example/src/storybook/stories/primitives/toast.dart';
 import 'package:example/src/storybook/stories/primitives/tooltip.dart';
 
@@ -51,6 +51,8 @@ enum Component {
   drawer,
   dropdown,
   icons,
+  input,
+  inputGroup,
   linearLoader,
   linearProgress,
   menuItem,
@@ -64,8 +66,6 @@ enum Component {
   table,
   tag,
   textArea,
-  textInput,
-  textInputGroup,
   toast,
   tooltip;
 
@@ -111,6 +111,9 @@ enum Component {
           "Dropdown list allows users to choose one value from a menu by clicking.",
         icons =>
           'Commonly used interface icons provided by Moon Design System.',
+        input => 'Input fields allow users to enter text.',
+        inputGroup =>
+          'Combine different types of inputs into groups to save vertical space on designs.',
         linearLoader =>
           "Loaders provide visual feedback for in-progress tasks.",
         linearProgress =>
@@ -135,9 +138,6 @@ enum Component {
         tag =>
           "Tags are interactive keywords used to organize and categorize objects.",
         textArea => 'A form control for entering and editing multi-line text.',
-        textInput => 'Text input fields allow users to enter text.',
-        textInputGroup =>
-          'Combine different types of inputs into groups to save vertical space on designs.',
         toast =>
           "Toast provides brief feedback message without interrupting the interface.",
         tooltip => 'Tooltip displays additional information about an element.',
@@ -161,6 +161,8 @@ enum Component {
         drawer => DrawerStory.path,
         dropdown => DropdownStory.path,
         icons => IconsStory.path,
+        input => InputStory.path,
+        inputGroup => InputGroupStory.path,
         linearLoader => LinearLoaderStory.path,
         linearProgress => LinearProgressStory.path,
         menuItem => MenuItemStory.path,
@@ -174,8 +176,6 @@ enum Component {
         table => TableStory.path,
         tag => TagStory.path,
         textArea => TextAreaStory.path,
-        textInput => TextInputStory.path,
-        textInputGroup => TextInputGroupStory.path,
         toast => ToastStory.path,
         tooltip => TooltipStory.path,
       };

example/lib/src/storybook/routing/app_router.dart

@@ -2,6 +2,7 @@ import 'package:example/src/storybook/common/pages/colors_page.dart';
 import 'package:example/src/storybook/common/pages/home_page.dart';
 import 'package:example/src/storybook/common/pages/typography_page.dart';
 import 'package:example/src/storybook/common/widgets/routing_error_widget.dart';
+
 import 'package:example/src/storybook/stories/composites/combobox_multi_select.dart';
 import 'package:example/src/storybook/stories/composites/combobox_single_select.dart';
 import 'package:example/src/storybook/stories/composites/search_with_dropdown.dart';
@@ -22,6 +23,8 @@ import 'package:example/src/storybook/stories/primitives/dot_indicator.dart';
 import 'package:example/src/storybook/stories/primitives/drawer.dart';
 import 'package:example/src/storybook/stories/primitives/dropdown.dart';
 import 'package:example/src/storybook/stories/primitives/icons.dart';
+import 'package:example/src/storybook/stories/primitives/input.dart';
+import 'package:example/src/storybook/stories/primitives/input_group.dart';
 import 'package:example/src/storybook/stories/primitives/linear_loader.dart';
 import 'package:example/src/storybook/stories/primitives/linear_progress.dart';
 import 'package:example/src/storybook/stories/primitives/menu_item.dart';
@@ -34,12 +37,11 @@ import 'package:example/src/storybook/stories/primitives/tab_bar.dart';
 import 'package:example/src/storybook/stories/primitives/table.dart';
 import 'package:example/src/storybook/stories/primitives/tag.dart';
 import 'package:example/src/storybook/stories/primitives/text_area.dart';
-import 'package:example/src/storybook/stories/primitives/text_input.dart';
-import 'package:example/src/storybook/stories/primitives/text_input_group.dart';
 import 'package:example/src/storybook/stories/primitives/toast.dart';
 import 'package:example/src/storybook/stories/primitives/tooltip.dart';
 
 import 'package:flutter/material.dart';
+
 import 'package:go_router/go_router.dart';
 
 const String primitivesDirectory = '/primitives';
@@ -214,6 +216,18 @@ GoRouter router = GoRouter(
         child: IconsStory(),
       ),
     ),
+    GoRoute(
+      path: InputStory.path,
+      pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage(
+        child: InputStory(),
+      ),
+    ),
+    GoRoute(
+      path: InputGroupStory.path,
+      pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage(
+        child: InputGroupStory(),
+      ),
+    ),
     GoRoute(
       path: LinearLoaderStory.path,
       pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage(
@@ -302,18 +316,6 @@ GoRouter router = GoRouter(
         child: TextAreaStory(),
       ),
     ),
-    GoRoute(
-      path: TextInputStory.path,
-      pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage(
-        child: TextInputStory(),
-      ),
-    ),
-    GoRoute(
-      path: TextInputGroupStory.path,
-      pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage(
-        child: TextInputGroupStory(),
-      ),
-    ),
     GoRoute(
       path: ToastStory.path,
       pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage(

example/lib/src/storybook/routing/route_aware_stories.dart

@@ -1,7 +1,9 @@
 import 'package:example/src/storybook/common/pages/colors_page.dart';
 import 'package:example/src/storybook/common/pages/home_page.dart';
 import 'package:example/src/storybook/common/pages/typography_page.dart';
+
 import 'package:example/src/storybook/routing/app_router.dart';
+
 import 'package:example/src/storybook/stories/composites/combobox_multi_select.dart';
 import 'package:example/src/storybook/stories/composites/combobox_single_select.dart';
 import 'package:example/src/storybook/stories/composites/search_with_dropdown.dart';
@@ -22,6 +24,8 @@ import 'package:example/src/storybook/stories/primitives/dot_indicator.dart';
 import 'package:example/src/storybook/stories/primitives/drawer.dart';
 import 'package:example/src/storybook/stories/primitives/dropdown.dart';
 import 'package:example/src/storybook/stories/primitives/icons.dart';
+import 'package:example/src/storybook/stories/primitives/input.dart';
+import 'package:example/src/storybook/stories/primitives/input_group.dart';
 import 'package:example/src/storybook/stories/primitives/linear_loader.dart';
 import 'package:example/src/storybook/stories/primitives/linear_progress.dart';
 import 'package:example/src/storybook/stories/primitives/menu_item.dart';
@@ -34,12 +38,11 @@ import 'package:example/src/storybook/stories/primitives/tab_bar.dart';
 import 'package:example/src/storybook/stories/primitives/table.dart';
 import 'package:example/src/storybook/stories/primitives/tag.dart';
 import 'package:example/src/storybook/stories/primitives/text_area.dart';
-import 'package:example/src/storybook/stories/primitives/text_input.dart';
-import 'package:example/src/storybook/stories/primitives/text_input_group.dart';
 import 'package:example/src/storybook/stories/primitives/toast.dart';
 import 'package:example/src/storybook/stories/primitives/tooltip.dart';
 
 import 'package:flutter/services.dart';
+
 import 'package:storybook_flutter/storybook_flutter.dart';
 
 const String directory = 'assets/code_snippets/';
@@ -188,6 +191,18 @@ final List<Story> routeAwareStories = [
     router: router,
     codeString: fetchAsset('icons.md'),
   ),
+  Story.asRoute(
+    name: 'Primitives/Input',
+    routePath: InputStory.path,
+    router: router,
+    codeString: fetchAsset('input.md'),
+  ),
+  Story.asRoute(
+    name: 'Primitives/InputGroup',
+    routePath: InputGroupStory.path,
+    router: router,
+    codeString: fetchAsset('input_group.md'),
+  ),
   Story.asRoute(
     name: 'Primitives/Loader/LinearLoader',
     routePath: LinearLoaderStory.path,
@@ -260,18 +275,6 @@ final List<Story> routeAwareStories = [
     router: router,
     codeString: fetchAsset('text_area.md'),
   ),
-  Story.asRoute(
-    name: 'Primitives/TextInput',
-    routePath: TextInputStory.path,
-    router: router,
-    codeString: fetchAsset('text_input.md'),
-  ),
-  Story.asRoute(
-    name: 'Primitives/TextInputGroup',
-    routePath: TextInputGroupStory.path,
-    router: router,
-    codeString: fetchAsset('text_input_group.md'),
-  ),
   Story.asRoute(
     name: 'Primitives/Toast',
     routePath: ToastStory.path,