feat: [MDS-378] Create Chip widget (#33)

* Refactor BaseControl and Button

* Add squircle to Tag

* Finalize Chip

* Finalize Chip story

.editorconfig

@@ -0,0 +1,4 @@
+root = true
+
+[**/*.dart]
+max_line_length = 120

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

@@ -0,0 +1,130 @@
+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 ChipStory extends Story {
+  ChipStory()
+      : super(
+          name: "Chip",
+          builder: (context) {
+            final customLabelTextKnob = context.knobs.text(
+              label: "Custom label text",
+              initial: "MoonChip",
+            );
+
+            final colorsKnob = context.knobs.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for the chip.",
+              initial: 5, // bulma
+              options: colorOptions,
+            );
+
+            final color = colorTable(context)[colorsKnob];
+
+            final isActiveKnob = context.knobs.boolean(
+              label: "isActive",
+              description: "Whether the chip is active/selected.",
+            );
+
+            final showBorderKnob = context.knobs.boolean(
+              label: "showBorder",
+              description: "Show border when isActive.",
+            );
+
+            final borderRadiusKnob = context.knobs.sliderInt(
+              max: 28,
+              initial: 8,
+              label: "borderRadius",
+              description: "Border radius for the chip.",
+            );
+
+            final chipSizesKnob = context.knobs.options(
+              label: "MoonChipSize",
+              description: "Chip size variants.",
+              initial: MoonChipSize.md,
+              options: const [
+                Option(label: "sm", value: MoonChipSize.sm),
+                Option(label: "md", value: MoonChipSize.md),
+              ],
+            );
+
+            final setRtlModeKnob = context.knobs.boolean(
+              label: "RTL mode",
+              description: "Switch between LTR and RTL modes.",
+            );
+
+            final showLeftIconKnob = context.knobs.boolean(
+              label: "Show leftIcon",
+              description: "Show widget in the leftIcon slot.",
+              initial: true,
+            );
+
+            final showLabelKnob = context.knobs.boolean(
+              label: "Show label",
+              description: "Show widget in the label slot.",
+              initial: true,
+            );
+
+            final showRightIconKnob = context.knobs.boolean(
+              label: "Show rightIcon",
+              description: "Show widget in the rightIcon slot.",
+            );
+
+            return Directionality(
+              textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
+              child: Center(
+                child: SingleChildScrollView(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const SizedBox(height: 64),
+                      const TextDivider(text: "Regular chip"),
+                      const SizedBox(height: 32),
+                      MoonChip(
+                        isActive: isActiveKnob,
+                        borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
+                        showBorder: showBorderKnob,
+                        chipSize: chipSizesKnob,
+                        backgroundColor: color,
+                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        label: showLabelKnob ? Text(customLabelTextKnob) : null,
+                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                      ),
+                      const SizedBox(height: 40),
+                      const TextDivider(text: "Ghost chip"),
+                      const SizedBox(height: 32),
+                      MoonGhostChip(
+                        isActive: isActiveKnob,
+                        borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
+                        showBorder: showBorderKnob,
+                        chipSize: chipSizesKnob,
+                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        label: showLabelKnob ? Text(customLabelTextKnob) : null,
+                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                      ),
+                      const SizedBox(height: 40),
+                      const TextDivider(text: "Preset chip"),
+                      const SizedBox(height: 32),
+                      MoonChip(
+                        isActive: isActiveKnob,
+                        activeColor: context.moonColors!.dodoria100,
+                        backgroundColor: context.moonColors!.krillin100,
+                        hoverEffectColor: context.moonColors!.chiChi10,
+                        borderWidth: 2,
+                        showBorder: showBorderKnob,
+                        chipSize: chipSizesKnob,
+                        leftIcon: showLeftIconKnob ? const MoonPlaceholderIcon() : null,
+                        label: showLabelKnob ? Text(customLabelTextKnob) : null,
+                        rightIcon: showRightIconKnob ? const MoonPlaceholderIcon() : null,
+                      ),
+                      const SizedBox(height: 64),
+                    ],
+                  ),
+                ),
+              ),
+            );
+          },
+        );
+}

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

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

example/lib/src/storybook/storybook.dart

@@ -1,6 +1,7 @@
 import 'package:example/src/storybook/common/widgets/version.dart';
 import 'package:example/src/storybook/stories/avatar.dart';
 import 'package:example/src/storybook/stories/button.dart';
+import 'package:example/src/storybook/stories/chip.dart';
 import 'package:example/src/storybook/stories/tag.dart';
 import 'package:flutter/material.dart';
 
@@ -59,6 +60,7 @@ class StorybookPage extends StatelessWidget {
           stories: [
             AvatarStory(),
             ButtonStory(),
+            ChipStory(),
             TagStory(),
           ],
         ),

lib/moon_design.dart

@@ -5,6 +5,8 @@ export 'package:moon_design/src/theme/avatar/avatar_theme.dart';
 export 'package:moon_design/src/theme/borders.dart';
 export 'package:moon_design/src/theme/button/button_sizes.dart';
 export 'package:moon_design/src/theme/button/button_theme.dart';
+export 'package:moon_design/src/theme/chip/chip_sizes.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/effects/controls_effects.dart';
 export 'package:moon_design/src/theme/effects/effects.dart';
@@ -28,6 +30,8 @@ export 'package:moon_design/src/widgets/buttons/ghost_button.dart';
 export 'package:moon_design/src/widgets/buttons/primary_button.dart';
 export 'package:moon_design/src/widgets/buttons/secondary_button.dart';
 export 'package:moon_design/src/widgets/buttons/tertiary_button.dart';
+export 'package:moon_design/src/widgets/chips/chip.dart';
+export 'package:moon_design/src/widgets/chips/ghost_chip.dart';
 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/tag/tag.dart';

lib/src/theme/chip/chip_sizes.dart

@@ -0,0 +1,92 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/borders.dart';
+import 'package:moon_design/src/theme/sizes.dart';
+import 'package:moon_design/src/theme/typography/text_styles.dart';
+
+@immutable
+class MoonChipSizes extends ThemeExtension<MoonChipSizes> with DiagnosticableTreeMixin {
+  static final sm = MoonChipSizes(
+    height: MoonSizes.sizes.sm,
+    gap: MoonSizes.sizes.x5s,
+    padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s),
+    borderRadius: MoonBorders.borders.interactiveXs,
+    textStyle: MoonTextStyles.heading.text14,
+  );
+
+  static final md = MoonChipSizes(
+    height: MoonSizes.sizes.md,
+    gap: MoonSizes.sizes.x4s,
+    padding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s),
+    borderRadius: MoonBorders.borders.interactiveSm,
+    textStyle: MoonTextStyles.heading.text14,
+  );
+
+  /// Chip height.
+  final double height;
+
+  /// Space between chip children.
+  final double gap;
+
+  /// Padding around chip children.
+  final EdgeInsets padding;
+
+  /// Chip border radius.
+  final BorderRadius borderRadius;
+
+  /// Chip text style.
+  final TextStyle textStyle;
+
+  const MoonChipSizes({
+    required this.height,
+    required this.gap,
+    required this.padding,
+    required this.borderRadius,
+    required this.textStyle,
+  });
+
+  @override
+  MoonChipSizes copyWith({
+    double? height,
+    double? gap,
+    EdgeInsets? padding,
+    BorderRadius? borderRadius,
+    TextStyle? textStyle,
+  }) {
+    return MoonChipSizes(
+      height: height ?? this.height,
+      gap: gap ?? this.gap,
+      padding: padding ?? this.padding,
+      borderRadius: borderRadius ?? this.borderRadius,
+      textStyle: textStyle ?? this.textStyle,
+    );
+  }
+
+  @override
+  MoonChipSizes lerp(ThemeExtension<MoonChipSizes>? other, double t) {
+    if (other is! MoonChipSizes) return this;
+
+    return MoonChipSizes(
+      height: lerpDouble(height, other.height, t)!,
+      gap: lerpDouble(gap, other.gap, t)!,
+      padding: EdgeInsets.lerp(padding, other.padding, t)!,
+      borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
+      textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonChipSizes"))
+      ..add(DoubleProperty("height", height))
+      ..add(DoubleProperty("gap", gap))
+      ..add(DiagnosticsProperty<EdgeInsets>("padding", padding))
+      ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius))
+      ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));
+  }
+}

lib/src/theme/chip/chip_theme.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/chip/chip_sizes.dart';
+
+@immutable
+class MoonChipTheme extends ThemeExtension<MoonChipTheme> with DiagnosticableTreeMixin {
+  static final sizes = MoonChipTheme(
+    sm: MoonChipSizes.sm,
+    md: MoonChipSizes.md,
+  );
+
+  /// Small chip properties.
+  final MoonChipSizes sm;
+
+  /// Medium chip properties.
+  final MoonChipSizes md;
+
+  const MoonChipTheme({
+    required this.sm,
+    required this.md,
+  });
+
+  @override
+  MoonChipTheme copyWith({
+    MoonChipSizes? xs,
+    MoonChipSizes? sm,
+    MoonChipSizes? md,
+    MoonChipSizes? lg,
+    MoonChipSizes? xl,
+  }) {
+    return MoonChipTheme(
+      sm: sm ?? this.sm,
+      md: md ?? this.md,
+    );
+  }
+
+  @override
+  MoonChipTheme lerp(ThemeExtension<MoonChipTheme>? other, double t) {
+    if (other is! MoonChipTheme) return this;
+
+    return MoonChipTheme(
+      sm: sm.lerp(other.sm, t),
+      md: md.lerp(other.md, t),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonChipTheme"))
+      ..add(DiagnosticsProperty<MoonChipSizes>("sm", sm))
+      ..add(DiagnosticsProperty<MoonChipSizes>("md", md));
+  }
+}

lib/src/theme/effects/effects.dart

@@ -11,14 +11,14 @@ class MoonEffects extends ThemeExtension<MoonEffects> with DiagnosticableTreeMix
     controlScaleEffect: MoonControlsEffects.controlScaleEffect,
     controlPulseEffect: MoonControlsEffects.controlPulseEffect,
     controlFocusEffect: MoonFocusEffects.lightFocusEffect,
-    buttonHoverEffect: MoonHoverEffects.lightButtonHoverEffect,
+    controlHoverEffect: MoonHoverEffects.lightHoverEffect,
   );
 
   static final dark = MoonEffects(
     controlScaleEffect: MoonControlsEffects.controlScaleEffect,
     controlPulseEffect: MoonControlsEffects.controlPulseEffect,
     controlFocusEffect: MoonFocusEffects.darkFocusEffect,
-    buttonHoverEffect: MoonHoverEffects.darkButtonHoverEffect,
+    controlHoverEffect: MoonHoverEffects.darkHoverEffect,
   );
 
   /// Control widgets scale effect.
@@ -30,28 +30,28 @@ class MoonEffects extends ThemeExtension<MoonEffects> with DiagnosticableTreeMix
   /// Control widgets focus effect.
   final MoonFocusEffects controlFocusEffect;
 
-  /// Button hover effect.
-  final MoonHoverEffects buttonHoverEffect;
+  /// Control widgets hover effect.
+  final MoonHoverEffects controlHoverEffect;
 
   const MoonEffects({
     required this.controlScaleEffect,
     required this.controlPulseEffect,
     required this.controlFocusEffect,
-    required this.buttonHoverEffect,
+    required this.controlHoverEffect,
   });
 
   @override
   MoonEffects copyWith({
     MoonControlsEffects? controlScaleEffect,
     MoonControlsEffects? controlPulseEffect,
     MoonFocusEffects? controlFocusEffect,
-    MoonHoverEffects? buttonHoverEffect,
+    MoonHoverEffects? controlHoverEffect,
   }) {
     return MoonEffects(
       controlScaleEffect: controlScaleEffect ?? this.controlScaleEffect,
       controlPulseEffect: controlPulseEffect ?? this.controlPulseEffect,
       controlFocusEffect: controlFocusEffect ?? this.controlFocusEffect,
-      buttonHoverEffect: buttonHoverEffect ?? this.buttonHoverEffect,
+      controlHoverEffect: controlHoverEffect ?? this.controlHoverEffect,
     );
   }
 
@@ -63,7 +63,7 @@ class MoonEffects extends ThemeExtension<MoonEffects> with DiagnosticableTreeMix
       controlScaleEffect: controlScaleEffect.lerp(other.controlScaleEffect, t),
       controlPulseEffect: controlPulseEffect.lerp(other.controlPulseEffect, t),
       controlFocusEffect: controlFocusEffect.lerp(other.controlFocusEffect, t),
-      buttonHoverEffect: buttonHoverEffect.lerp(other.buttonHoverEffect, t),
+      controlHoverEffect: controlHoverEffect.lerp(other.controlHoverEffect, t),
     );
   }
 
@@ -75,6 +75,6 @@ class MoonEffects extends ThemeExtension<MoonEffects> with DiagnosticableTreeMix
       ..add(DiagnosticsProperty<MoonControlsEffects>("controlScaleEffect", controlScaleEffect))
       ..add(DiagnosticsProperty<MoonControlsEffects>("controlPulseEffect", controlPulseEffect))
       ..add(DiagnosticsProperty<MoonFocusEffects>("controlFocusEffect", controlFocusEffect))
-      ..add(DiagnosticsProperty<MoonHoverEffects>("buttonHoverEffect", buttonHoverEffect));
+      ..add(DiagnosticsProperty<MoonHoverEffects>("controlHoverEffect", controlHoverEffect));
   }
 }