feat: [MDS-590] Create Drawer widget (#204)

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

@@ -0,0 +1,101 @@
+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 DrawerStory extends Story {
+  DrawerStory()
+      : super(
+          name: "Drawer",
+          builder: (context) {
+            final backgroundColorsKnob = context.knobs.nullable.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for MoonDrawer background.",
+              enabled: false,
+              initial: 0, // piccolo
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40];
+
+            final barrierColorsKnob = context.knobs.nullable.options(
+              label: "barrierColor",
+              description: "MoonColors variants for MoonDrawer barrier.",
+              enabled: false,
+              initial: 0, // piccolo
+              options: colorOptions,
+            );
+
+            final barrierColor = colorTable(context)[barrierColorsKnob ?? 40];
+
+            final borderRadiusKnob = context.knobs.nullable.sliderInt(
+              label: "borderRadius",
+              description: "Border radius for MoonDrawer.",
+              enabled: false,
+              initial: 8,
+              max: 32,
+            );
+
+            final drawerWidthKnob = context.knobs.nullable.sliderInt(
+              label: "width",
+              description: "The width of the MoonDrawer",
+              enabled: false,
+              initial: 200,
+              max: MediaQuery.of(context).size.width.round(),
+            );
+
+            return OverflowBox(
+              maxHeight: MediaQuery.of(context).size.height,
+              maxWidth: MediaQuery.of(context).size.width,
+              child: Scaffold(
+                drawerScrimColor: barrierColor,
+                drawer: MoonDrawer(
+                  backgroundColor: backgroundColor,
+                  barrierColor: barrierColorsKnob != null
+                      ? barrierColor
+                      : context.moonTheme?.drawerTheme.colors.barrierColor ?? MoonColors.light.zeno,
+                  borderRadius: BorderRadiusDirectional.only(
+                    topEnd: Radius.circular(borderRadiusKnob?.toDouble() ?? 0),
+                    bottomEnd: Radius.circular(borderRadiusKnob?.toDouble() ?? 0),
+                  ),
+                  width: drawerWidthKnob?.toDouble() ?? MediaQuery.of(context).size.width,
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const SizedBox(height: 64),
+                      const Text("MoonDrawer"),
+                      const SizedBox(height: 32),
+                      Builder(
+                        builder: (context) {
+                          return MoonFilledButton(
+                            label: const Text("Close"),
+                            onTap: () => Navigator.of(context).pop(),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 64),
+                    ],
+                  ),
+                ),
+                body: Center(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const SizedBox(height: 64),
+                      Builder(
+                        builder: (context) {
+                          return MoonFilledButton(
+                            label: const Text("Tap me"),
+                            onTap: () => Scaffold.of(context).openDrawer(),
+                          );
+                        },
+                      ),
+                      const SizedBox(height: 64),
+                    ],
+                  ),
+                ),
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -11,6 +11,7 @@ import 'package:example/src/storybook/stories/chip.dart';
 import 'package:example/src/storybook/stories/circular_loader.dart';
 import 'package:example/src/storybook/stories/circular_progress.dart';
 import 'package:example/src/storybook/stories/dot_indicator.dart';
+import 'package:example/src/storybook/stories/drawer.dart';
 import 'package:example/src/storybook/stories/icons.dart';
 import 'package:example/src/storybook/stories/linear_loader.dart';
 import 'package:example/src/storybook/stories/linear_progress.dart';
@@ -95,6 +96,7 @@ class StorybookPage extends StatelessWidget {
             CircularLoaderStory(),
             CircularProgressStory(),
             DotIndicatorStory(),
+            DrawerStory(),
             IconsStory(),
             LinearLoaderStory(),
             LinearProgressStory(),

lib/moon_design.dart

@@ -13,6 +13,7 @@ export 'package:moon_design/src/theme/checkbox/checkbox_theme.dart';
 export 'package:moon_design/src/theme/chip/chip_theme.dart';
 export 'package:moon_design/src/theme/colors.dart';
 export 'package:moon_design/src/theme/dot_indicator/dot_indicator_theme.dart';
+export 'package:moon_design/src/theme/drawer/drawer_theme.dart';
 export 'package:moon_design/src/theme/effects/effects.dart';
 export 'package:moon_design/src/theme/icons/icon_theme.dart';
 export 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart';
@@ -70,6 +71,7 @@ export 'package:moon_design/src/widgets/common/icons/moon_icon.dart';
 export 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart';
 export 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart';
 export 'package:moon_design/src/widgets/dot_indicator/dot_indicator.dart';
+export 'package:moon_design/src/widgets/drawer/drawer.dart';
 export 'package:moon_design/src/widgets/loaders/circular_loader.dart';
 export 'package:moon_design/src/widgets/loaders/linear_loader.dart';
 export 'package:moon_design/src/widgets/modal/modal.dart';

lib/src/theme/drawer/drawer_colors.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/colors.dart';
+import 'package:moon_design/src/theme/icons/icon_theme.dart';
+import 'package:moon_design/src/theme/typography/typography.dart';
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
+
+@immutable
+class MoonDrawerColors extends ThemeExtension<MoonDrawerColors> with DiagnosticableTreeMixin {
+  static final light = MoonDrawerColors(
+    textColor: MoonTypography.light.colors.bodyPrimary,
+    iconColor: MoonIconTheme.light.colors.primaryColor,
+    backgroundColor: MoonColors.light.gohan,
+    barrierColor: MoonColors.light.zeno,
+  );
+
+  static final dark = MoonDrawerColors(
+    textColor: MoonTypography.dark.colors.bodyPrimary,
+    iconColor: MoonIconTheme.dark.colors.primaryColor,
+    backgroundColor: MoonColors.dark.gohan,
+    barrierColor: MoonColors.dark.zeno,
+  );
+
+  /// Drawer text color.
+  final Color textColor;
+
+  /// Drawer icon color.
+  final Color iconColor;
+
+  /// Drawer background color.
+  final Color backgroundColor;
+
+  /// Drawer barrier color.
+  final Color barrierColor;
+
+  const MoonDrawerColors({
+    required this.textColor,
+    required this.iconColor,
+    required this.backgroundColor,
+    required this.barrierColor,
+  });
+
+  @override
+  MoonDrawerColors copyWith({
+    Color? textColor,
+    Color? iconColor,
+    Color? backgroundColor,
+    Color? barrierColor,
+  }) {
+    return MoonDrawerColors(
+      textColor: textColor ?? this.textColor,
+      iconColor: iconColor ?? this.iconColor,
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      barrierColor: barrierColor ?? this.barrierColor,
+    );
+  }
+
+  @override
+  MoonDrawerColors lerp(ThemeExtension<MoonDrawerColors>? other, double t) {
+    if (other is! MoonDrawerColors) return this;
+
+    return MoonDrawerColors(
+      textColor: colorPremulLerp(textColor, other.textColor, t)!,
+      iconColor: colorPremulLerp(iconColor, other.iconColor, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
+      barrierColor: colorPremulLerp(barrierColor, other.barrierColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonDrawerColors"))
+      ..add(ColorProperty("textColor", textColor))
+      ..add(ColorProperty("iconColor", iconColor))
+      ..add(ColorProperty("backgroundColor", backgroundColor))
+      ..add(ColorProperty("barrierColor", barrierColor));
+  }
+}

lib/src/theme/drawer/drawer_properties.dart

@@ -0,0 +1,64 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/typography/text_styles.dart';
+
+@immutable
+class MoonDrawerProperties extends ThemeExtension<MoonDrawerProperties> with DiagnosticableTreeMixin {
+  static final properties = MoonDrawerProperties(
+    borderRadius: BorderRadius.zero,
+    width: 448,
+    textStyle: MoonTextStyles.body.textDefault,
+  );
+
+  /// Drawer border radius.
+  final BorderRadiusGeometry borderRadius;
+
+  /// Drawer width.
+  final double width;
+
+  /// Drawer text style.
+  final TextStyle textStyle;
+
+  const MoonDrawerProperties({
+    required this.borderRadius,
+    required this.width,
+    required this.textStyle,
+  });
+
+  @override
+  MoonDrawerProperties copyWith({
+    BorderRadiusGeometry? borderRadius,
+    double? width,
+    TextStyle? textStyle,
+  }) {
+    return MoonDrawerProperties(
+      borderRadius: borderRadius ?? this.borderRadius,
+      width: width ?? this.width,
+      textStyle: textStyle ?? this.textStyle,
+    );
+  }
+
+  @override
+  MoonDrawerProperties lerp(ThemeExtension<MoonDrawerProperties>? other, double t) {
+    if (other is! MoonDrawerProperties) return this;
+
+    return MoonDrawerProperties(
+      borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!,
+      width: lerpDouble(width, other.width, t)!,
+      textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonDrawerProperties"))
+      ..add(DiagnosticsProperty<BorderRadiusGeometry>("borderRadius", borderRadius))
+      ..add(DoubleProperty("width", width))
+      ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));
+  }
+}

lib/src/theme/drawer/drawer_shadows.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/shadows.dart';
+
+@immutable
+class MoonDrawerShadows extends ThemeExtension<MoonDrawerShadows> with DiagnosticableTreeMixin {
+  static final light = MoonDrawerShadows(
+    drawerShadows: MoonShadows.light.lg,
+  );
+
+  static final dark = MoonDrawerShadows(
+    drawerShadows: MoonShadows.dark.lg,
+  );
+
+  /// Drawer shadows.
+  final List<BoxShadow> drawerShadows;
+
+  const MoonDrawerShadows({
+    required this.drawerShadows,
+  });
+
+  @override
+  MoonDrawerShadows copyWith({List<BoxShadow>? drawerShadows}) {
+    return MoonDrawerShadows(
+      drawerShadows: drawerShadows ?? this.drawerShadows,
+    );
+  }
+
+  @override
+  MoonDrawerShadows lerp(ThemeExtension<MoonDrawerShadows>? other, double t) {
+    if (other is! MoonDrawerShadows) return this;
+
+    return MoonDrawerShadows(
+      drawerShadows: BoxShadow.lerpList(drawerShadows, other.drawerShadows, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonDrawerShadows"))
+      ..add(DiagnosticsProperty<List<BoxShadow>>("drawerShadows", drawerShadows));
+  }
+}

lib/src/theme/drawer/drawer_theme.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/drawer/drawer_colors.dart';
+import 'package:moon_design/src/theme/drawer/drawer_properties.dart';
+import 'package:moon_design/src/theme/drawer/drawer_shadows.dart';
+
+@immutable
+class MoonDrawerTheme extends ThemeExtension<MoonDrawerTheme> with DiagnosticableTreeMixin {
+  static final light = MoonDrawerTheme(
+    colors: MoonDrawerColors.light,
+    properties: MoonDrawerProperties.properties,
+    shadows: MoonDrawerShadows.light,
+  );
+
+  static final dark = MoonDrawerTheme(
+    colors: MoonDrawerColors.dark,
+    properties: MoonDrawerProperties.properties,
+    shadows: MoonDrawerShadows.dark,
+  );
+
+  /// Drawer colors.
+  final MoonDrawerColors colors;
+
+  /// Drawer properties.
+  final MoonDrawerProperties properties;
+
+  /// Drawer shadows.
+  final MoonDrawerShadows shadows;
+
+  const MoonDrawerTheme({
+    required this.colors,
+    required this.properties,
+    required this.shadows,
+  });
+
+  @override
+  MoonDrawerTheme copyWith({
+    MoonDrawerColors? colors,
+    MoonDrawerProperties? properties,
+    MoonDrawerShadows? shadows,
+  }) {
+    return MoonDrawerTheme(
+      colors: colors ?? this.colors,
+      properties: properties ?? this.properties,
+      shadows: shadows ?? this.shadows,
+    );
+  }
+
+  @override
+  MoonDrawerTheme lerp(ThemeExtension<MoonDrawerTheme>? other, double t) {
+    if (other is! MoonDrawerTheme) return this;
+
+    return MoonDrawerTheme(
+      colors: colors.lerp(other.colors, t),
+      properties: properties.lerp(other.properties, t),
+      shadows: shadows.lerp(other.shadows, t),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) {
+    super.debugFillProperties(diagnosticProperties);
+    diagnosticProperties
+      ..add(DiagnosticsProperty("type", "MoonDrawerTheme"))
+      ..add(DiagnosticsProperty<MoonDrawerColors>("colors", colors))
+      ..add(DiagnosticsProperty<MoonDrawerProperties>("properties", properties))
+      ..add(DiagnosticsProperty<MoonDrawerShadows>("shadows", shadows));
+  }
+}