feat: [MDS-491] Create TextArea widget

example/lib/src/storybook/stories/textarea.dart

@@ -0,0 +1,128 @@
+import 'package:example/src/storybook/common/color_options.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class TextAreaStory extends Story {
+  TextAreaStory()
+      : super(
+          name: "TextArea",
+          builder: (context) {
+            final textColorsKnob = context.knobs.options(
+              label: "textColor",
+              description: "MoonColors variants for MoonTextArea text.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final textColor = colorTable(context)[textColorsKnob];
+
+            final hintTextColorsKnob = context.knobs.options(
+              label: "hintTextColor",
+              description: "MoonColors variants for MoonTextArea hint text.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final hintTextColor = colorTable(context)[hintTextColorsKnob];
+
+            final backgroundColorsKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for MoonTextArea background.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[backgroundColorsKnob];
+
+            final activeBorderColorsKnob = context.knobs.options(
+              label: "activeBorderColor",
+              description: "MoonColors variants for MoonTextArea active border.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final activeBorderColor = colorTable(context)[activeBorderColorsKnob];
+
+            final inactiveBorderColorsKnob = context.knobs.options(
+              label: "inactiveBorderColor",
+              description: "MoonColors variants for MoonTextArea inactive border.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final inactiveBorderColor = colorTable(context)[inactiveBorderColorsKnob];
+
+            final errorBorderColorsKnob = context.knobs.options(
+              label: "errorBorderColor",
+              description: "MoonColors variants for MoonTextArea error border.",
+              initial: 40, // null
+              options: colorOptions,
+            );
+
+            final errorBorderColor = colorTable(context)[errorBorderColorsKnob];
+
+            final borderRadiusKnob = context.knobs.sliderInt(
+              max: 32,
+              initial: 8,
+              label: "borderRadius",
+              description: "Border radius for MoonTextArea.",
+            );
+
+            final enabledKnob = context.knobs.boolean(
+              label: "enabled",
+              description: "Switch between enabled and disabled states.",
+              initial: true,
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
+
+            return Directionality(
+              textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+              child: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const SizedBox(height: 64),
+                    Form(
+                      child: Builder(
+                        builder: (context) {
+                          return Column(
+                            children: [
+                              MoonTextArea(
+                                enabled: enabledKnob,
+                                height: 300,
+                                textColor: textColor,
+                                hintTextColor: hintTextColor,
+                                backgroundColor: backgroundColor,
+                                activeBorderColor: activeBorderColor,
+                                inactiveBorderColor: inactiveBorderColor,
+                                errorBorderColor: errorBorderColor,
+                                borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
+                                hintText: "Enter your text here...",
+                                validator: (value) => value?.length != null && value!.length < 10
+                                    ? "The text should be longer than 10 characters."
+                                    : null,
+                                errorBuilder: (context, errorText) => Text(errorText!),
+                              ),
+                              const SizedBox(height: 16),
+                              MoonFilledButton(
+                                label: const Text("Submit"),
+                                onTap: () => Form.of(context).validate(),
+                              )
+                            ],
+                          );
+                        },
+                      ),
+                    ),
+                    const SizedBox(height: 64),
+                  ],
+                ),
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -16,6 +16,7 @@ import 'package:example/src/storybook/stories/popover.dart';
 import 'package:example/src/storybook/stories/radio.dart';
 import 'package:example/src/storybook/stories/switch.dart';
 import 'package:example/src/storybook/stories/tag.dart';
+import 'package:example/src/storybook/stories/textarea.dart';
 import 'package:example/src/storybook/stories/toast.dart';
 import 'package:example/src/storybook/stories/tooltip.dart';
 import 'package:flutter/material.dart';
@@ -89,6 +90,7 @@ class StorybookPage extends StatelessWidget {
             RadioStory(),
             SwitchStory(),
             TagStory(),
+            TextAreaStory(),
             ToastStory(),
             TooltipStory(),
           ],

lib/moon_design.dart

@@ -21,15 +21,18 @@ export 'package:moon_design/src/theme/radio/radio_theme.dart';
 export 'package:moon_design/src/theme/shadows.dart';
 export 'package:moon_design/src/theme/sizes.dart';
 export 'package:moon_design/src/theme/switch/switch_theme.dart';
+export 'package:moon_design/src/theme/textarea/textarea_theme.dart';
 export 'package:moon_design/src/theme/theme.dart';
 export 'package:moon_design/src/theme/toast/toast_theme.dart';
 export 'package:moon_design/src/theme/tooltip/tooltip_theme.dart';
 export 'package:moon_design/src/theme/typography/text_colors.dart';
 export 'package:moon_design/src/theme/typography/text_styles.dart';
 export 'package:moon_design/src/theme/typography/typography.dart';
+
 export 'package:moon_design/src/utils/extensions.dart';
 export 'package:moon_design/src/utils/measure_size.dart';
 export 'package:moon_design/src/utils/widget_surveyor.dart';
+
 export 'package:moon_design/src/widgets/accordion/accordion_item.dart';
 export 'package:moon_design/src/widgets/alert/alert.dart';
 export 'package:moon_design/src/widgets/alert/filled_alert.dart';
@@ -59,5 +62,6 @@ export 'package:moon_design/src/widgets/progress/linear_progress.dart';
 export 'package:moon_design/src/widgets/radio/radio.dart';
 export 'package:moon_design/src/widgets/switch/switch.dart';
 export 'package:moon_design/src/widgets/tag/tag.dart';
+export 'package:moon_design/src/widgets/textarea/textarea.dart';
 export 'package:moon_design/src/widgets/toast/toast.dart';
 export 'package:moon_design/src/widgets/tooltip/tooltip.dart';

lib/src/theme/accordion/accordion_item_colors.dart

@@ -10,17 +10,17 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
     expandedBackgroundColor: MoonColors.light.gohan,
     borderColor: MoonColors.light.beerus,
     dividerColor: MoonColors.light.beerus,
-    expandedIconColor: MoonColors.light.bulma,
-    iconColor: MoonColors.light.trunks,
+    trailingIconColor: MoonColors.light.trunks,
+    expandedTrailingIconColor: MoonColors.light.bulma,
   );
 
   static final dark = MoonAccordionItemColors(
     backgroundColor: MoonColors.dark.gohan,
     expandedBackgroundColor: MoonColors.dark.gohan,
     borderColor: MoonColors.dark.beerus,
     dividerColor: MoonColors.dark.beerus,
-    iconColor: MoonColors.dark.trunks,
-    expandedIconColor: MoonColors.dark.bulma,
+    trailingIconColor: MoonColors.dark.trunks,
+    expandedTrailingIconColor: MoonColors.dark.bulma,
   );
 
   /// Accordion item background color.
@@ -35,19 +35,19 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
   /// Accordion item divider color.
   final Color dividerColor;
 
-  /// Accordion item icon color.
-  final Color iconColor;
+  /// Accordion item trailing icon color.
+  final Color trailingIconColor;
 
-  /// Expanded accordion item icon color.
-  final Color expandedIconColor;
+  /// Expanded accordion item trailing icon color.
+  final Color expandedTrailingIconColor;
 
   const MoonAccordionItemColors({
     required this.backgroundColor,
     required this.expandedBackgroundColor,
     required this.borderColor,
     required this.dividerColor,
-    required this.expandedIconColor,
-    required this.iconColor,
+    required this.trailingIconColor,
+    required this.expandedTrailingIconColor,
   });
 
   @override
@@ -56,16 +56,16 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
     Color? expandedBackgroundColor,
     Color? borderColor,
     Color? dividerColor,
-    Color? expandedIconColor,
-    Color? iconColor,
+    Color? trailingIconColor,
+    Color? expandedTrailingIconColor,
   }) {
     return MoonAccordionItemColors(
       backgroundColor: backgroundColor ?? this.backgroundColor,
       expandedBackgroundColor: expandedBackgroundColor ?? this.expandedBackgroundColor,
       borderColor: borderColor ?? this.borderColor,
       dividerColor: dividerColor ?? this.dividerColor,
-      expandedIconColor: expandedIconColor ?? this.expandedIconColor,
-      iconColor: iconColor ?? this.iconColor,
+      trailingIconColor: trailingIconColor ?? this.trailingIconColor,
+      expandedTrailingIconColor: expandedTrailingIconColor ?? this.expandedTrailingIconColor,
     );
   }
 
@@ -78,8 +78,8 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
       expandedBackgroundColor: Color.lerp(expandedBackgroundColor, other.expandedBackgroundColor, t)!,
       borderColor: Color.lerp(borderColor, other.borderColor, t)!,
       dividerColor: Color.lerp(dividerColor, other.dividerColor, t)!,
-      expandedIconColor: Color.lerp(expandedIconColor, other.expandedIconColor, t)!,
-      iconColor: Color.lerp(iconColor, other.iconColor, t)!,
+      trailingIconColor: Color.lerp(trailingIconColor, other.trailingIconColor, t)!,
+      expandedTrailingIconColor: Color.lerp(expandedTrailingIconColor, other.expandedTrailingIconColor, t)!,
     );
   }
 
@@ -92,7 +92,7 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
       ..add(ColorProperty("expandedBackgroundColor", expandedBackgroundColor))
       ..add(ColorProperty("borderColor", borderColor))
       ..add(ColorProperty("dividerColor", dividerColor))
-      ..add(ColorProperty("expandedIconColor", expandedIconColor))
-      ..add(ColorProperty("iconColor", iconColor));
+      ..add(ColorProperty("trailingIconColor", trailingIconColor))
+      ..add(ColorProperty("expandedTrailingIconColor", expandedTrailingIconColor));
   }
 }

lib/src/theme/textarea/textarea_colors.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/colors.dart';
+
+@immutable
+class MoonTextAreaColors extends ThemeExtension<MoonTextAreaColors> with DiagnosticableTreeMixin {
+  static final light = MoonTextAreaColors(
+    backgroundColor: MoonColors.light.gohan,
+    activeBorderColor: MoonColors.light.piccolo,
+    inactiveBorderColor: MoonColors.light.beerus,
+    errorBorderColor: MoonColors.light.chiChi100,
+    hintTextColor: MoonColors.light.trunks,
+  );
+
+  static final dark = MoonTextAreaColors(
+    backgroundColor: MoonColors.dark.gohan,
+    activeBorderColor: MoonColors.dark.piccolo,
+    inactiveBorderColor: MoonColors.dark.beerus,
+    errorBorderColor: MoonColors.dark.chiChi100,
+    hintTextColor: MoonColors.dark.trunks,
+  );
+
+  /// TextArea background color.
+  final Color backgroundColor;
+
+  /// TextArea active border color.
+  final Color activeBorderColor;
+
+  /// TextArea inactive border color.
+  final Color inactiveBorderColor;
+
+  /// TextArea error border color.
+  final Color errorBorderColor;
+
+  /// TextArea hint text color.
+  final Color hintTextColor;
+
+  const MoonTextAreaColors({
+    required this.backgroundColor,
+    required this.activeBorderColor,
+    required this.inactiveBorderColor,
+    required this.errorBorderColor,
+    required this.hintTextColor,
+  });
+
+  @override
+  MoonTextAreaColors copyWith({
+    Color? backgroundColor,
+    Color? activeBorderColor,
+    Color? inactiveBorderColor,
+    Color? errorBorderColor,
+    Color? hoverBorderColor,
+    Color? hintTextColor,
+  }) {
+    return MoonTextAreaColors(
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      activeBorderColor: activeBorderColor ?? this.activeBorderColor,
+      inactiveBorderColor: inactiveBorderColor ?? this.inactiveBorderColor,
+      errorBorderColor: errorBorderColor ?? this.errorBorderColor,
+      hintTextColor: hintTextColor ?? this.hintTextColor,
+    );
+  }
+
+  @override
+  MoonTextAreaColors lerp(ThemeExtension<MoonTextAreaColors>? other, double t) {
+    if (other is! MoonTextAreaColors) return this;
+
+    return MoonTextAreaColors(
+      backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!,
+      activeBorderColor: Color.lerp(activeBorderColor, other.activeBorderColor, t)!,
+      inactiveBorderColor: Color.lerp(inactiveBorderColor, other.inactiveBorderColor, t)!,
+      errorBorderColor: Color.lerp(errorBorderColor, other.errorBorderColor, t)!,
+      hintTextColor: Color.lerp(hintTextColor, other.hintTextColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonTextAreaColors"))
+      ..add(ColorProperty("backgroundColor", backgroundColor))
+      ..add(ColorProperty("activeBorderColor", activeBorderColor))
+      ..add(ColorProperty("inactiveBorderColor", inactiveBorderColor))
+      ..add(ColorProperty("errorBorderColor", errorBorderColor))
+      ..add(ColorProperty("hintTextColor", hintTextColor));
+  }
+}