Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wip/spec or style propagation #515

Draft
wants to merge 22 commits into
base: main
Choose a base branch
from
Draft

Wip/spec or style propagation #515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f7df643
small fixes
tilucasoli Oct 23, 2024
202fbad
lint
tilucasoli Oct 23, 2024
cba6a46
Update radio_use_case.dart
tilucasoli Oct 23, 2024
f040cd5
checkbox
tilucasoli Oct 25, 2024
82d4adf
avatar
tilucasoli Oct 25, 2024
0abbee6
button
tilucasoli Oct 25, 2024
036974a
callout and button adjustments
tilucasoli Oct 25, 2024
7090428
card
tilucasoli Oct 25, 2024
8648293
chip
tilucasoli Oct 25, 2024
04120f8
dialog
tilucasoli Nov 4, 2024
158b43d
divider
tilucasoli Nov 4, 2024
40ba3d9
IconButton
tilucasoli Nov 4, 2024
a4a494d
menu item
tilucasoli Nov 4, 2024
d5766d0
progress
tilucasoli Nov 4, 2024
7c6285e
radio
tilucasoli Nov 4, 2024
1098c11
scaffold
tilucasoli Nov 4, 2024
496ae78
segmented control
tilucasoli Nov 4, 2024
01b85e0
radio and segmented control
tilucasoli Nov 4, 2024
a2ce99b
select
tilucasoli Nov 4, 2024
b338c5a
slider
tilucasoli Nov 4, 2024
27d0c2c
toast
tilucasoli Nov 4, 2024
a8b2919
style propagation
tilucasoli Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 131 additions & 8 deletions examples/todo_list/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:mix/mix.dart';

import 'pages/todo_list_page.dart';
import 'style/design_tokens.dart';
import 'package:remix/remix.dart';

void main() {
runApp(const MyApp());
Expand All @@ -13,11 +11,136 @@ class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MixTheme(
data: lightTheme,
child: const MaterialApp(
home: TodoListPage(),
return const RemixApp(
home: Scaffold(body: SelectPage()),
);
}
}

class SelectPage extends StatefulWidget {
const SelectPage({super.key});

@override
State<SelectPage> createState() => _SelectPageState();
}

class _SelectPageState extends State<SelectPage> {
String? value;
final items = ['Item 1', 'Item 2', 'Item 3'];

@override
Widget build(BuildContext context) {
return Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 200,
child: Select(
style: const SelectOnceUI(),
value: value,
onChanged: (v) {
setState(() {
value = v;
});
},
button: (spec) => spec(
text: value ?? 'Select an Item',
),
items: items
.map(
(e) => SelectMenuItem(
value: e,
childBuilder: (spec) => spec(
title: e,
subtitle: 'Subtitle',
// leadingWidgetBuilder: (spec) =>
// spec(m.Icons.ac_unit_rounded),
),
),
)
.toList(),
),
),
const SizedBox(width: 32),
SizedBox(
width: 200,
child: Select(
value: value,
onChanged: (v) {
setState(() {
value = v;
});
},
button: (spec) => spec(
text: value ?? 'Select an Item',
),
items: items
.map(
(e) => SelectMenuItem(
value: e,
childBuilder: (spec) => spec(
title: e,
subtitle: 'Subtitle',
),
),
)
.toList(),
),
),
],
),
);
}
}

class SelectOnceUI extends SelectStyle {
const SelectOnceUI();

@override
Style makeStyle(SpecConfiguration<SelectSpecUtility> spec) {
final $ = spec.utilities;
final on = spec.on;

final button = Style.create([
$.button.container.chain
..padding(16)
..borderRadius(16)
..border.width(1)
..border.color.grey.shade300()
..color.grey.shade100(),
]);

final menu = Style.create([
$.menu.container.chain
..color.white()
..shadow.blurRadius.zero()
..borderRadius(16),
]);

final item = Style.create([
$.item.outerContainer.chain
..padding.horizontal(12)
..padding.vertical(10)
..borderRadius(12),
on.selected(
$.item.outerContainer.chain..color.grey.shade200(),
),
]);

final onHover = Style.create([
on.hover(
$.item.outerContainer.chain..color.grey.shade300(),
$.button.container.chain..color.grey.shade300(),
)
]);

return Style(
super.makeStyle(spec).call(),
button(),
menu(),
item(),
onHover(),
).animate();
}
}
2 changes: 1 addition & 1 deletion examples/todo_list/macos/Runner/AppDelegate.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Cocoa
import FlutterMacOS

@NSApplicationMain
@main
class AppDelegate: FlutterAppDelegate {
override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
return true
Expand Down
2 changes: 2 additions & 0 deletions examples/todo_list/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ dependencies:
sdk: flutter
mix:
path: ../../packages/mix
remix:
path: ../../packages/remix
custom_lint: ^0.6.4
google_fonts: ^6.0.0

Expand Down
2 changes: 1 addition & 1 deletion packages/remix/demo/lib/components/accordion_use_case.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Widget buildAccordionUseCase(BuildContext context) {
child: SizedBox(
width: 300,
child: Accordion(
header: (spec) => XAccordionHeaderSpecWidget(
header: (spec) => AccordionHeaderSpecWidget(
title: context.knobs.string(
label: 'Title',
initialValue: 'Title',
Expand Down
64 changes: 38 additions & 26 deletions packages/remix/demo/lib/components/button_use_case.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,44 @@ Widget buildButtonUseCase(BuildContext context) {
key: _key,
child: Scaffold(
body: Center(
child: Button(
variants: [
context.knobs.variant(FortalezaButtonStyle.variants),
],
label: context.knobs.string(
label: 'Title',
initialValue: 'Button',
),
onPressed: () {},
disabled: context.knobs.boolean(
label: 'Disabled',
initialValue: false,
),
loading: context.knobs.boolean(
label: 'loading',
initialValue: false,
),
iconLeft: context.knobs.iconData(
label: 'Icon left',
initialValue: null,
),
iconRight: context.knobs.iconData(
label: 'Icon right',
initialValue: null,
),
),
child: Builder(builder: (context) {
return Button(
variants: [
context.knobs.variant(FortalezaButtonStyle.variants),
],
label: context.knobs.string(
label: 'Title',
initialValue: 'Button',
),
onPressed: () {
showToast(
context: context,
entry: ToastEntry(
showDuration: const Duration(milliseconds: 800),
builder: (context, actions) => const Toast(
title: 'Button pressed',
),
),
);
},
disabled: context.knobs.boolean(
label: 'Disabled',
initialValue: false,
),
loading: context.knobs.boolean(
label: 'loading',
initialValue: false,
),
iconLeft: context.knobs.iconData(
label: 'Icon left',
initialValue: null,
),
iconRight: context.knobs.iconData(
label: 'Icon right',
initialValue: null,
),
);
}),
),
),
);
Expand Down
1 change: 1 addition & 0 deletions packages/remix/demo/lib/components/checkbox_use_case.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ Widget buildCheckboxUseCase(BuildContext context) {
key: _key,
child: Center(
child: Checkbox(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
variants: [context.knobs.variant(FortalezaCheckboxStyle.variants)],
disabled:
context.knobs.boolean(label: 'Disabled', initialValue: false),
Expand Down
42 changes: 27 additions & 15 deletions packages/remix/demo/lib/components/icon_button_use_case.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:flutter/widgets.dart';
import 'package:remix/remix.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

import '../helpers/knob_builder.dart';

final _key = GlobalKey();
Expand All @@ -17,21 +18,32 @@ Widget buildButtonUseCase(BuildContext context) {
key: _key,
child: Scaffold(
body: Center(
child: IconButton(
m.Icons.add,
variants: [
context.knobs.variant(FortalezaIconButtonStyle.variants),
],
onPressed: () {},
disabled: context.knobs.boolean(
label: 'Disabled',
initialValue: false,
),
loading: context.knobs.boolean(
label: 'loading',
initialValue: false,
),
),
child: Builder(builder: (context) {
return IconButton(
m.Icons.add,
variants: [
context.knobs.variant(FortalezaIconButtonStyle.variants),
],
onPressed: () {
showToast(
context: context,
entry: ToastEntry(
showDuration: const Duration(milliseconds: 800),
builder: (context, actions) =>
const Toast(title: 'Button pressed'),
),
);
},
disabled: context.knobs.boolean(
label: 'Disabled',
initialValue: false,
),
loading: context.knobs.boolean(
label: 'loading',
initialValue: false,
),
);
}),
),
),
);
Expand Down
4 changes: 0 additions & 4 deletions packages/remix/demo/lib/components/menu_item_use_case.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'package:demo/helpers/knob_builder.dart';
import 'package:flutter/material.dart' hide Scaffold;
import 'package:remix/remix.dart';
import 'package:widgetbook/widgetbook.dart';
Expand All @@ -18,9 +17,6 @@ Widget buildButtonUseCase(BuildContext context) {
child: SizedBox(
width: 350,
child: MenuItem(
variants: [
context.knobs.variant(FortalezaButtonStyle.variants),
],
title: context.knobs.string(
label: 'Title',
initialValue: 'Menu Item',
Expand Down
Loading
Loading