Merge pull request #16 from conceptadev/feat/divider

divider component

demo/lib/components/avatar.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 import 'package:remix_ui/remix_ui.dart';
-import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
 @widgetbook.UseCase(

demo/lib/components/card.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:mix/mix.dart';
+import 'package:remix_ui/remix_ui.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'interactive playground',
+  type: RemixCard,
+)
+Widget buildCheckboxUseCase(BuildContext context) {
+  return const Center(
+    child: SizedBox(
+      width: 300,
+      child: RemixCard(
+        child: RemixListTile(
+          leading: RemixAvatar(
+            child: StyledText('LF'),
+          ),
+          title: StyledText('Title'),
+          subtitle: StyledText('Subtitle'),
+        ),
+      ),
+    ),
+  );
+}

demo/lib/components/divider.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:remix_ui/remix_ui.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'interactive playground',
+  type: RemixDivider,
+)
+Widget buildCheckboxUseCase(BuildContext context) {
+  return const Center(
+    child: RemixDivider(),
+  );
+}

demo/lib/main.directories.g.dart

@@ -12,10 +12,12 @@
 import 'package:demo/components/avatar.dart' as _i2;
 import 'package:demo/components/badge.dart' as _i3;
 import 'package:demo/components/button.dart' as _i4;
-import 'package:demo/components/checkbox.dart' as _i5;
-import 'package:demo/components/list_tile.dart' as _i6;
-import 'package:demo/components/radio.dart' as _i7;
-import 'package:demo/components/switch.dart' as _i8;
+import 'package:demo/components/card.dart' as _i5;
+import 'package:demo/components/checkbox.dart' as _i6;
+import 'package:demo/components/divider.dart' as _i7;
+import 'package:demo/components/list_tile.dart' as _i8;
+import 'package:demo/components/radio.dart' as _i9;
+import 'package:demo/components/switch.dart' as _i10;
 import 'package:widgetbook/widgetbook.dart' as _i1;
 
 final directories = <_i1.WidgetbookNode>[
@@ -58,14 +60,38 @@ final directories = <_i1.WidgetbookNode>[
           )
         ],
       ),
+      _i1.WidgetbookFolder(
+        name: 'card',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixCard',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i5.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
       _i1.WidgetbookFolder(
         name: 'checkbox',
         children: [
           _i1.WidgetbookLeafComponent(
             name: 'RemixCheckbox',
             useCase: _i1.WidgetbookUseCase(
               name: 'interactive playground',
-              builder: _i5.buildCheckboxUseCase,
+              builder: _i6.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'divider',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixDivider',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i7.buildCheckboxUseCase,
             ),
           )
         ],
@@ -77,7 +103,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'RemixListTile',
             useCase: _i1.WidgetbookUseCase(
               name: 'interactive playground',
-              builder: _i6.buildCheckboxUseCase,
+              builder: _i8.buildCheckboxUseCase,
             ),
           )
         ],
@@ -89,7 +115,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'RemixRadio',
             useCase: _i1.WidgetbookUseCase(
               name: 'interactive playground',
-              builder: _i7.buildRadioUseCase,
+              builder: _i9.buildRadioUseCase,
             ),
           )
         ],
@@ -101,7 +127,7 @@ final directories = <_i1.WidgetbookNode>[
             name: 'RemixSwitch',
             useCase: _i1.WidgetbookUseCase(
               name: 'interactive playground',
-              builder: _i8.buildRadioUseCase,
+              builder: _i10.buildRadioUseCase,
             ),
           )
         ],

demo/pubspec.yaml

@@ -18,8 +18,7 @@ dependencies:
   remix_ui: 
     path: ../
 
-  mix: 
-    path: ../../mix
+  mix: 1.0.0-beta.6
 
 dev_dependencies:
   flutter_test:

lib/components/avatar/avatar.style.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
 class AvatarStyles extends StyleRecipe<AvatarStyles> {

lib/components/card/card.style.dart

@@ -16,12 +16,7 @@ class CardStyles extends StyleRecipe<CardStyles> {
 
   factory CardStyles.defaults() {
     return CardStyles(
-      container: Style(
-        box.padding(16),
-        box.elevation(1),
-        box.borderRadius(8),
-        box.color.white(),
-      ),
+      container: _container(),
     );
   }
 
@@ -49,3 +44,10 @@ class CardStyles extends StyleRecipe<CardStyles> {
     );
   }
 }
+
+Style _container() => Style(
+      box.padding(16),
+      box.elevation(1),
+      box.borderRadius(8),
+      box.color.white(),
+    );

lib/components/divider/divider.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:mix/mix.dart';
+
+import 'divider.style.dart';
+import '../../utils/component_recipe.dart';
+
+class RemixDivider extends StatelessWidget
+    implements RemixComponentRecipe<DividerStyles> {
+  const RemixDivider({
+    super.key,
+    this.style,
+    this.variants = const [],
+  });
+
+  @override
+  final DividerStyles? style;
+
+  @override
+  final List<Variant> variants;
+
+  DividerStyles buildStyle(List<Variant> variants) {
+    var styles = style == null ? DividerStyles.base() : style!;
+    return styles.applyVariants(variants);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Box(
+      style: buildStyle(variants).container,
+    );
+  }
+}

lib/components/divider/divider.style.dart

@@ -0,0 +1,45 @@
+import 'package:mix/mix.dart';
+
+class DividerStyles extends StyleRecipe<DividerStyles> {
+  const DividerStyles({
+    this.container = const Style.empty(),
+  });
+
+  final Style container;
+
+  factory DividerStyles.base() {
+    return DividerStyles(
+      container: _container(),
+    );
+  }
+
+  @override
+  DividerStyles applyVariants(List<Variant> variants) {
+    return DividerStyles(
+      container: container.applyVariants(variants),
+    );
+  }
+
+  @override
+  DividerStyles copyWith({
+    Style? container,
+  }) {
+    return DividerStyles(
+      container: this.container.merge(container),
+    );
+  }
+
+  @override
+  DividerStyles merge(DividerStyles? other) {
+    return copyWith(
+      container: other?.container,
+    );
+  }
+}
+
+Style _container() => Style(
+      box.margin.vertical(15),
+      box.height(2),
+      box.borderRadius(1),
+      box.color.grey.shade200(),
+    );

lib/components/list_tile/list_tile.style.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
 class ListTileStyles extends StyleRecipe<ListTileStyles> {

lib/remix_ui.dart

@@ -18,3 +18,7 @@ export 'components/badge/badge.dart';
 export 'components/badge/badge.style.dart';
 export 'components/list_tile/list_tile.dart';
 export 'components/list_tile/list_tile.style.dart';
+export 'components/divider/divider.dart';
+export 'components/divider/divider.style.dart';
+export 'components/card/card.dart';
+export 'components/card/card.style.dart';

pubspec.yaml

@@ -11,8 +11,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  mix: 
-    path: ../mix
+  mix: 1.0.0-beta.6
 
   cupertino_icons: ^1.0.2
   flutter_hooks: ^0.18.4