feat: [MDS-649] Create Table component (#262)

example/lib/src/storybook/storybook.dart

@@ -23,6 +23,7 @@ import 'package:example/src/storybook/stories/radio.dart';
 import 'package:example/src/storybook/stories/segmented_control.dart';
 import 'package:example/src/storybook/stories/switch.dart';
 import 'package:example/src/storybook/stories/tab_bar.dart';
+import 'package:example/src/storybook/stories/table.dart';
 import 'package:example/src/storybook/stories/tag.dart';
 import 'package:example/src/storybook/stories/text_area.dart';
 import 'package:example/src/storybook/stories/text_input.dart';
@@ -58,7 +59,7 @@ class StorybookPage extends StatelessWidget {
           initialStory: "Accordion",
           plugins: _plugins,
           brandingWidget: const MoonVersionWidget(),
-          wrapperBuilder: (context, child) => MaterialApp(
+          wrapperBuilder: (BuildContext context, Widget? child) => MaterialApp(
             title: "Moon Design for Flutter",
             theme: ThemeData.light().copyWith(
               extensions: <ThemeExtension<dynamic>>[
@@ -101,9 +102,13 @@ class StorybookPage extends StatelessWidget {
                     extendBody: true,
                     extendBodyBehindAppBar: true,
                     resizeToAvoidBottomInset: false,
-                    body: Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
-                      child: child,
+                    body: SafeArea(
+                      top: false,
+                      bottom: false,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                        child: child,
+                      ),
                     ),
                   ),
                 ),
@@ -135,6 +140,7 @@ class StorybookPage extends StatelessWidget {
             SegmentedControlStory(),
             SwitchStory(),
             TabBarStory(),
+            TableStory(),
             TagStory(),
             TextAreaStory(),
             TextInputStory(),

lib/moon_design.dart

@@ -94,6 +94,7 @@ export 'package:moon_design/src/widgets/tab_bar/pill_tab_style.dart';
 export 'package:moon_design/src/widgets/tab_bar/tab.dart';
 export 'package:moon_design/src/widgets/tab_bar/tab_bar.dart';
 export 'package:moon_design/src/widgets/tab_bar/tab_style.dart';
+export 'package:moon_design/src/widgets/table/table.dart';
 export 'package:moon_design/src/widgets/tag/tag.dart';
 export 'package:moon_design/src/widgets/text_area/text_area.dart';
 export 'package:moon_design/src/widgets/text_input/form_text_input.dart';

lib/src/theme/table/table_colors.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
+
+@immutable
+class MoonTableColors extends ThemeExtension<MoonTableColors> with DiagnosticableTreeMixin {
+  /// Table column text color.
+  final Color columnTextColor;
+
+  /// Table row text color.
+  final Color rowTextColor;
+
+  /// Table row title text color.
+  final Color rowTitleTextColor;
+
+  /// Table row pinned and animated title text color.
+  final Color rowPinnedAnimatedTitleTextColor;
+
+  /// Table icon color.
+  final Color iconColor;
+
+  /// Table row background color.
+  final Color rowBackgroundColor;
+
+  const MoonTableColors({
+    required this.columnTextColor,
+    required this.rowTextColor,
+    required this.rowTitleTextColor,
+    required this.rowPinnedAnimatedTitleTextColor,
+    required this.iconColor,
+    required this.rowBackgroundColor,
+  });
+
+  @override
+  MoonTableColors copyWith({
+    Color? columnTextColor,
+    Color? rowTextColor,
+    Color? rowTitleTextColor,
+    Color? rowPinnedAnimatedTitleTextColor,
+    Color? iconColor,
+    Color? rowBackgroundColor,
+  }) {
+    return MoonTableColors(
+      columnTextColor: columnTextColor ?? this.columnTextColor,
+      rowTextColor: rowTextColor ?? this.rowTextColor,
+      rowTitleTextColor: rowTitleTextColor ?? this.rowTitleTextColor,
+      rowPinnedAnimatedTitleTextColor: rowPinnedAnimatedTitleTextColor ?? this.rowPinnedAnimatedTitleTextColor,
+      iconColor: iconColor ?? this.iconColor,
+      rowBackgroundColor: rowBackgroundColor ?? this.rowBackgroundColor,
+    );
+  }
+
+  @override
+  MoonTableColors lerp(ThemeExtension<MoonTableColors>? other, double t) {
+    if (other is! MoonTableColors) return this;
+
+    return MoonTableColors(
+      columnTextColor: colorPremulLerp(columnTextColor, other.columnTextColor, t)!,
+      rowTextColor: colorPremulLerp(rowTextColor, other.rowTextColor, t)!,
+      rowTitleTextColor:
+          colorPremulLerp(rowTitleTextColor, other.rowTitleTextColor, t)!,
+      rowPinnedAnimatedTitleTextColor:
+          colorPremulLerp(rowPinnedAnimatedTitleTextColor, other.rowPinnedAnimatedTitleTextColor, t)!,
+      iconColor: colorPremulLerp(iconColor, other.iconColor, t)!,
+      rowBackgroundColor: colorPremulLerp(rowBackgroundColor, other.rowBackgroundColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonTableColors"))
+      ..add(ColorProperty("columnTextColor", columnTextColor))
+      ..add(ColorProperty("rowTextColor", rowTextColor))
+      ..add(ColorProperty("rowTitleTextColor", rowTitleTextColor))
+      ..add(ColorProperty("rowPinnedAnimatedTitleTextColor", rowPinnedAnimatedTitleTextColor))
+      ..add(ColorProperty("iconColor", iconColor))
+      ..add(ColorProperty("rowBackgroundColor", rowBackgroundColor));
+  }
+}

lib/src/theme/table/table_properties.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+@immutable
+class MoonTableProperties extends ThemeExtension<MoonTableProperties> with DiagnosticableTreeMixin {
+  /// Table row animated title transition duration.
+  final Duration transitionDuration;
+
+  /// Table row animated title transition curve.
+  final Curve transitionCurve;
+
+  const MoonTableProperties({
+    required this.transitionDuration,
+    required this.transitionCurve,
+  });
+
+  @override
+  MoonTableProperties copyWith({
+    Duration? transitionDuration,
+    Curve? transitionCurve,
+  }) {
+    return MoonTableProperties(
+      transitionDuration: transitionDuration ?? this.transitionDuration,
+      transitionCurve: transitionCurve ?? this.transitionCurve,
+    );
+  }
+
+  @override
+  MoonTableProperties lerp(ThemeExtension<MoonTableProperties>? other, double t) {
+    if (other is! MoonTableProperties) return this;
+
+    return MoonTableProperties(
+      transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t),
+      transitionCurve: other.transitionCurve,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonTableProperties"))
+      ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration))
+      ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve));
+  }
+}

lib/src/theme/table/table_size_properties.dart

@@ -0,0 +1,120 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+@immutable
+class MoonTableSizeProperties extends ThemeExtension<MoonTableSizeProperties> with DiagnosticableTreeMixin {
+  /// Table row border radius.
+  final BorderRadiusGeometry rowBorderRadius;
+
+  /// Space between table rows.
+  final double rowGap;
+
+  /// Table row height.
+  final double rowHeight;
+
+  /// Horizontal gap between column label and sort icon.
+  final double sortIconGap;
+
+  /// Table sort icon size value.
+  final double sortIconSizeValue;
+
+  /// Table row cell padding.
+  final EdgeInsetsGeometry cellPadding;
+
+  /// Table row cell padding.
+  final EdgeInsetsGeometry rowTitlePadding;
+
+  /// Table column text style.
+  final TextStyle columnTextStyle;
+
+  /// Table row text style.
+  final TextStyle rowTextStyle;
+
+  /// Table row title text style.
+  final TextStyle rowTitleTextStyle;
+
+  /// Table row animated title text style.
+  final TextStyle rowPinnedAnimatedTitleTextStyle;
+
+  const MoonTableSizeProperties({
+    required this.rowBorderRadius,
+    required this.rowGap,
+    required this.rowHeight,
+    required this.sortIconGap,
+    required this.sortIconSizeValue,
+    required this.cellPadding,
+    required this.rowTitlePadding,
+    required this.columnTextStyle,
+    required this.rowTextStyle,
+    required this.rowTitleTextStyle,
+    required this.rowPinnedAnimatedTitleTextStyle,
+  });
+
+  @override
+  MoonTableSizeProperties copyWith({
+    BorderRadiusGeometry? rowBorderRadius,
+    double? rowGap,
+    double? rowHeight,
+    double? sortIconGap,
+    double? sortIconSizeValue,
+    EdgeInsetsGeometry? cellPadding,
+    EdgeInsetsGeometry? rowTitlePadding,
+    TextStyle? columnTextStyle,
+    TextStyle? rowTextStyle,
+    TextStyle? rowTitleTextStyle,
+    TextStyle? rowPinnedAnimatedTitleTextStyle,
+  }) {
+    return MoonTableSizeProperties(
+      rowBorderRadius: rowBorderRadius ?? this.rowBorderRadius,
+      rowGap: rowGap ?? this.rowGap,
+      rowHeight: rowHeight ?? this.rowHeight,
+      sortIconGap: sortIconGap ?? this.sortIconGap,
+      sortIconSizeValue: sortIconSizeValue ?? this.sortIconSizeValue,
+      cellPadding: cellPadding ?? this.cellPadding,
+      rowTitlePadding: rowTitlePadding ?? this.rowTitlePadding,
+      columnTextStyle: columnTextStyle ?? this.columnTextStyle,
+      rowTextStyle: rowTextStyle ?? this.rowTextStyle,
+      rowTitleTextStyle: rowTitleTextStyle ?? this.rowTitleTextStyle,
+      rowPinnedAnimatedTitleTextStyle: rowPinnedAnimatedTitleTextStyle ?? this.rowPinnedAnimatedTitleTextStyle,
+    );
+  }
+
+  @override
+  MoonTableSizeProperties lerp(ThemeExtension<MoonTableSizeProperties>? other, double t) {
+    if (other is! MoonTableSizeProperties) return this;
+
+    return MoonTableSizeProperties(
+      rowBorderRadius: BorderRadiusGeometry.lerp(rowBorderRadius, other.rowBorderRadius, t)!,
+      rowGap: lerpDouble(rowGap, other.rowGap, t)!,
+      rowHeight: lerpDouble(rowHeight, other.rowHeight, t)!,
+      sortIconGap: lerpDouble(sortIconGap, other.sortIconGap, t)!,
+      sortIconSizeValue: lerpDouble(sortIconSizeValue, other.sortIconSizeValue, t)!,
+      cellPadding: EdgeInsetsGeometry.lerp(cellPadding, other.cellPadding, t)!,
+      rowTitlePadding: EdgeInsetsGeometry.lerp(rowTitlePadding, other.rowTitlePadding, t)!,
+      columnTextStyle: TextStyle.lerp(columnTextStyle, other.columnTextStyle, t)!,
+      rowTextStyle: TextStyle.lerp(rowTextStyle, other.rowTextStyle, t)!,
+      rowTitleTextStyle: TextStyle.lerp(rowTitleTextStyle, other.rowTitleTextStyle, t)!,
+      rowPinnedAnimatedTitleTextStyle: TextStyle.lerp(rowPinnedAnimatedTitleTextStyle, other.rowPinnedAnimatedTitleTextStyle, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonTableSizeProperties"))
+      ..add(DiagnosticsProperty<BorderRadiusGeometry>("rowBorderRadius", rowBorderRadius))
+      ..add(DoubleProperty("rowGap", rowGap))
+      ..add(DoubleProperty("rowHeight", rowHeight))
+      ..add(DoubleProperty("sortIconGap", sortIconGap))
+      ..add(DoubleProperty("sortIconSizeValue", sortIconSizeValue))
+      ..add(DiagnosticsProperty<EdgeInsetsGeometry>("cellPadding", cellPadding))
+      ..add(DiagnosticsProperty<EdgeInsetsGeometry>("rowTitlePadding", rowTitlePadding))
+      ..add(DiagnosticsProperty<TextStyle>("columnTextStyle", columnTextStyle))
+      ..add(DiagnosticsProperty<TextStyle>("rowTextStyle", rowTextStyle))
+      ..add(DiagnosticsProperty<TextStyle>("rowTitleTextStyle", rowTitleTextStyle))
+      ..add(DiagnosticsProperty<TextStyle>("rowAnimatedTitleTextStyle", rowPinnedAnimatedTitleTextStyle));
+  }
+}