feat: [MDS-390] Add MoonTooltip (#53)

.gitignore

@@ -28,3 +28,5 @@ migrate_working_dir/
 .dart_tool/
 .packages
 build/
+
+.fvm/

.vscode/launch.json

@@ -2,7 +2,17 @@
   // Use IntelliSense to learn about possible attributes.
   // Hover to view descriptions of existing attributes.
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
+  "version": "0.3.0",
+  "dart.lineLength": 120,
+    "dart.flutterSdkPath": ".fvm/flutter_sdk",
+    // Remove .fvm files from search
+    "search.exclude": {
+        "**/.fvm": true
+    },
+    // Remove from file watching
+    "files.watcherExclude": {
+        "**/.fvm": true
+    },
   "configurations": [
     {
       "name": "moon_flutter",

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

@@ -7,7 +7,7 @@ import 'package:storybook_flutter/storybook_flutter.dart';
 class ButtonStory extends Story {
   ButtonStory()
       : super(
-          name: "Buttons",
+          name: "Button",
           builder: (context) {
             final customLabelTextKnob = context.knobs.text(
               label: "Custom label text",

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

@@ -0,0 +1,108 @@
+import 'package:example/src/storybook/common/options.dart';
+import 'package:example/src/storybook/common/widgets/text_divider.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class TooltipStory extends Story {
+  TooltipStory()
+      : super(
+          name: "Tooltip",
+          builder: (context) {
+            final customLabelTextKnob = context.knobs.text(
+              label: "Custom label text",
+              initial: "Custom tooltip text",
+            );
+
+            final tooltipPositionsKnob = context.knobs.options(
+              label: "tooltipPosition",
+              description: "Tooltip position variants.",
+              initial: MoonTooltipPosition.top,
+              options: const [
+                Option(label: "top", value: MoonTooltipPosition.top),
+                Option(label: "bottom", value: MoonTooltipPosition.bottom),
+                Option(label: "left", value: MoonTooltipPosition.left),
+                Option(label: "right", value: MoonTooltipPosition.right),
+              ],
+            );
+
+            final showTooltipKnob = context.knobs.boolean(
+              label: "show",
+              description: "Show the tooltip.",
+              initial: true,
+            );
+
+            final showArrowKnob = context.knobs.boolean(
+              label: "hasArrow",
+              description: "Does tooltip have an arrow (tail).",
+              initial: true,
+            );
+
+            final showShadowKnob = context.knobs.boolean(
+              label: "Show shadow",
+              description: "Show shadows under the tooltip.",
+              initial: true,
+            );
+
+            final colorsKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for base MoonButton.",
+              initial: 4, // gohan
+              options: colorOptions,
+            );
+
+            final color = colorTable(context)[colorsKnob];
+
+            /* 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),
+                    const TextDivider(text: "Customisable tooltip"),
+                    const SizedBox(height: 32),
+                    MoonTooltip(
+                      show: showTooltipKnob,
+                      tooltipPosition: tooltipPositionsKnob,
+                      hasArrow: showArrowKnob,
+                      backgroundColor: color,
+                      tooltipShadows: showShadowKnob == true ? null : [],
+                      content: Text(customLabelTextKnob),
+                      child: MoonButton(
+                        backgroundColor: context.moonColors!.bulma,
+                        onTap: () {},
+                        label: const Text("MoonButton"),
+                      ),
+                    ),
+                    const SizedBox(height: 40),
+                    const TextDivider(text: "Default tooltip"),
+                    const SizedBox(height: 32),
+                    MoonPrimaryButton(
+                      showTooltip: true,
+                      tooltipMessage: customLabelTextKnob,
+                      onTap: () {},
+                      label: const Text("MoonPrimaryButton"),
+                    ),
+                    const SizedBox(height: 32),
+                    MoonChip(
+                      showTooltip: true,
+                      tooltipMessage: customLabelTextKnob,
+                      borderRadius: BorderRadius.circular(20),
+                      backgroundColor: context.moonColors!.hit,
+                      leftIcon: const Icon(MoonIcons.frame24),
+                      label: const Text("MoonChip"),
+                    ),
+                    const SizedBox(height: 64),
+                  ],
+                ),
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -4,6 +4,7 @@ import 'package:example/src/storybook/stories/button.dart';
 import 'package:example/src/storybook/stories/chip.dart';
 import 'package:example/src/storybook/stories/icons.dart';
 import 'package:example/src/storybook/stories/tag.dart';
+import 'package:example/src/storybook/stories/tooltip.dart';
 import 'package:flutter/material.dart';
 
 import 'package:moon_design/moon_design.dart';
@@ -64,6 +65,7 @@ class StorybookPage extends StatelessWidget {
             ChipStory(),
             IconsStory(),
             TagStory(),
+            TooltipStory(),
           ],
         ),
         const Align(

lib/moon_design.dart

@@ -16,12 +16,15 @@ export 'package:moon_design/src/theme/opacity.dart';
 export 'package:moon_design/src/theme/shadows.dart';
 export 'package:moon_design/src/theme/sizes.dart';
 export 'package:moon_design/src/theme/theme.dart';
+export 'package:moon_design/src/theme/tooltip/tooltip.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/animated_icon_theme.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/avatar/avatar.dart';
 export 'package:moon_design/src/widgets/base_control.dart';
 export 'package:moon_design/src/widgets/buttons/button.dart';
@@ -35,3 +38,4 @@ export 'package:moon_design/src/widgets/effects/focus_effect.dart';
 export 'package:moon_design/src/widgets/effects/pulse_effect.dart';
 export 'package:moon_design/src/widgets/icons.dart';
 export 'package:moon_design/src/widgets/tag/tag.dart';
+export 'package:moon_design/src/widgets/tooltip/tooltip.dart';

lib/src/theme/effects/controls_effects.dart

@@ -7,24 +7,24 @@ import 'package:moon_design/src/theme/colors.dart';
 @immutable
 class MoonControlsEffects extends ThemeExtension<MoonControlsEffects> with DiagnosticableTreeMixin {
   static const controlScaleEffect = MoonControlsEffects(
-    effectCurve: Curves.easeInOutCubic,
     effectDuration: Duration(milliseconds: 150),
+    effectCurve: Curves.easeInOutCubic,
     effectScalar: 0.95,
   );
 
   static final controlPulseEffect = MoonControlsEffects(
-    effectCurve: Curves.easeInOutCubic,
     effectDuration: const Duration(milliseconds: 1400),
+    effectCurve: Curves.easeInOutCubic,
     effectColor: MoonColors.light.piccolo,
     effectExtent: 24,
   );
 
-  /// Controls effect curve.
-  final Curve effectCurve;
-
   /// Controls effect duration.
   final Duration effectDuration;
 
+  /// Controls effect curve.
+  final Curve effectCurve;
+
   /// Controls effect color.
   final Color? effectColor;
 
@@ -35,24 +35,24 @@ class MoonControlsEffects extends ThemeExtension<MoonControlsEffects> with Diagn
   final double? effectScalar;
 
   const MoonControlsEffects({
-    required this.effectCurve,
     required this.effectDuration,
+    required this.effectCurve,
     this.effectColor,
     this.effectExtent,
     this.effectScalar,
   });
 
   @override
   MoonControlsEffects copyWith({
-    Curve? effectCurve,
     Duration? effectDuration,
+    Curve? effectCurve,
     Color? effectColor,
     double? effectExtent,
     double? effectScalar,
   }) {
     return MoonControlsEffects(
-      effectCurve: effectCurve ?? this.effectCurve,
       effectDuration: effectDuration ?? this.effectDuration,
+      effectCurve: effectCurve ?? this.effectCurve,
       effectColor: effectColor ?? this.effectColor,
       effectExtent: effectExtent ?? this.effectExtent,
       effectScalar: effectScalar ?? this.effectScalar,
@@ -64,8 +64,8 @@ class MoonControlsEffects extends ThemeExtension<MoonControlsEffects> with Diagn
     if (other is! MoonControlsEffects) return this;
 
     return MoonControlsEffects(
-      effectCurve: other.effectCurve,
       effectDuration: lerpDuration(effectDuration, other.effectDuration, t),
+      effectCurve: other.effectCurve,
       effectColor: Color.lerp(effectColor, other.effectColor, t),
       effectExtent: lerpDouble(effectExtent, other.effectExtent, t),
       effectScalar: lerpDouble(effectScalar, other.effectScalar, t),
@@ -77,8 +77,8 @@ class MoonControlsEffects extends ThemeExtension<MoonControlsEffects> with Diagn
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty("type", "MoonControlsEffects"))
-      ..add(DiagnosticsProperty<Curve>("effectCurve", effectCurve))
       ..add(DiagnosticsProperty<Duration>("effectDuration", effectDuration))
+      ..add(DiagnosticsProperty<Curve>("effectCurve", effectCurve))
       ..add(ColorProperty("effectColor", effectColor))
       ..add(DoubleProperty("effectExtent", effectExtent))
       ..add(DoubleProperty("transitionLowerBound", effectScalar));

lib/src/theme/effects/focus_effects.dart

@@ -8,15 +8,15 @@ class MoonFocusEffects extends ThemeExtension<MoonFocusEffects> with Diagnostica
   static const lightFocusEffect = MoonFocusEffects(
     effectColor: Colors.black26,
     effectExtent: 4,
-    effectCurve: Curves.easeInOut,
     effectDuration: Duration(milliseconds: 150),
+    effectCurve: Curves.easeInOutCubic,
   );
 
   static const darkFocusEffect = MoonFocusEffects(
     effectColor: Colors.white24,
     effectExtent: 4,
-    effectCurve: Curves.easeInOut,
     effectDuration: Duration(milliseconds: 150),
+    effectCurve: Curves.easeInOutCubic,
   );
 
   /// Focus effect color.
@@ -25,31 +25,31 @@ class MoonFocusEffects extends ThemeExtension<MoonFocusEffects> with Diagnostica
   /// Focus effect extent.
   final double effectExtent;
 
-  /// Focus effect curve.
-  final Curve effectCurve;
-
   /// Focus effect duration.
   final Duration effectDuration;
 
+  /// Focus effect curve.
+  final Curve effectCurve;
+
   const MoonFocusEffects({
     required this.effectColor,
     required this.effectExtent,
-    required this.effectCurve,
     required this.effectDuration,
+    required this.effectCurve,
   });
 
   @override
   MoonFocusEffects copyWith({
     Color? effectColor,
     double? effectExtent,
-    Curve? effectCurve,
     Duration? effectDuration,
+    Curve? effectCurve,
   }) {
     return MoonFocusEffects(
       effectColor: effectColor ?? this.effectColor,
       effectExtent: effectExtent ?? this.effectExtent,
-      effectCurve: effectCurve ?? this.effectCurve,
       effectDuration: effectDuration ?? this.effectDuration,
+      effectCurve: effectCurve ?? this.effectCurve,
     );
   }
 
@@ -60,8 +60,8 @@ class MoonFocusEffects extends ThemeExtension<MoonFocusEffects> with Diagnostica
     return MoonFocusEffects(
       effectColor: Color.lerp(effectColor, other.effectColor, t)!,
       effectExtent: lerpDouble(effectExtent, other.effectExtent, t)!,
-      effectCurve: other.effectCurve,
       effectDuration: lerpDuration(effectDuration, other.effectDuration, t),
+      effectCurve: other.effectCurve,
     );
   }
 
@@ -72,7 +72,7 @@ class MoonFocusEffects extends ThemeExtension<MoonFocusEffects> with Diagnostica
       ..add(DiagnosticsProperty("type", "MoonFocusEffects"))
       ..add(ColorProperty("effectColor", effectColor))
       ..add(DoubleProperty("effectExtent", effectExtent))
-      ..add(DiagnosticsProperty<Curve>("effectCurve", effectCurve))
-      ..add(DiagnosticsProperty<Duration>("effectDuration", effectDuration));
+      ..add(DiagnosticsProperty<Duration>("effectDuration", effectDuration))
+      ..add(DiagnosticsProperty<Curve>("effectCurve", effectCurve));
   }
 }