Skip to content

Commit

Permalink
default widgetbook to center widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton committed Mar 5, 2024
1 parent 19cd234 commit af79626
Show file tree
Hide file tree
Showing 12 changed files with 311 additions and 442 deletions.
34 changes: 13 additions & 21 deletions example/widgetbook/pages/components/avatar_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,19 @@ Widget avatarUseCase(BuildContext context) {
final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);

return WidgetbookTestWidget(
widget: Column(
children: [
Padding(
padding: const EdgeInsets.all(20),
child: ZetaAvatar(
image: context.knobs.boolean(label: 'Image') ? image : null,
size: context.knobs.list(
label: 'Size',
options: ZetaAvatarSize.values,
labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
),
lowerBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null,
borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
upperBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
? ZetaIndicator.notification()
: null,
initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null),
backgroundColor: context.knobs.colorOrNull(label: 'Background color'),
),
),
],
widget: ZetaAvatar(
image: context.knobs.boolean(label: 'Image') ? image : null,
size: context.knobs.list(
label: 'Size',
options: ZetaAvatarSize.values,
labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
),
lowerBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null,
borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
upperBadge:
context.knobs.boolean(label: 'Notification Badge', initialValue: false) ? ZetaIndicator.notification() : null,
initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null),
backgroundColor: context.knobs.colorOrNull(label: 'Background color'),
),
);
}
252 changes: 104 additions & 148 deletions example/widgetbook/pages/components/badges_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,177 +5,133 @@ import 'package:zeta_flutter/zeta_flutter.dart';
import '../../test/test_components.dart';

Widget statusLabelUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Column(
children: [
Padding(
padding: EdgeInsets.all(20),
child: ZetaStatusLabel(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
rounded: context.knobs.boolean(label: 'Rounded'),
status: context.knobs.list(
label: 'Status',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWidgetStatus.values,
),
customIcon: context.knobs.list(
label: 'Icon',
options: [
ZetaIcons.star_half_round,
ZetaIcons.add_alert_round,
ZetaIcons.add_box_round,
ZetaIcons.barcode_round,
],
labelBuilder: (value) {
if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
return '';
},
),
),
),
],
widget: ZetaStatusLabel(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
rounded: context.knobs.boolean(label: 'Rounded'),
status: context.knobs.list(
label: 'Status',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWidgetStatus.values,
),
customIcon: context.knobs.list(
label: 'Icon',
options: [
ZetaIcons.star_half_round,
ZetaIcons.add_alert_round,
ZetaIcons.add_box_round,
ZetaIcons.barcode_round,
],
labelBuilder: (value) {
if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
return '';
},
),
),
);

Widget priorityPillUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Column(
children: [
Padding(
padding: EdgeInsets.all(20),
child: ZetaPriorityPill(
index: context.knobs.int.slider(label: 'Index'),
priority: context.knobs.string(label: 'Priority', initialValue: 'Priority'),
rounded: context.knobs.boolean(label: 'Rounded'),
),
),
],
widget: ZetaPriorityPill(
index: context.knobs.int.slider(label: 'Index'),
priority: context.knobs.string(label: 'Priority', initialValue: 'Priority'),
rounded: context.knobs.boolean(label: 'Rounded'),
),
);
Widget badgeUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(20),
child: ZetaBadge(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
rounded: context.knobs.boolean(label: 'Rounded'),
status: context.knobs.list(
label: 'Status',
options: ZetaWidgetStatus.values,
labelBuilder: (value) => value.name.split('.').last.capitalize(),
),
),
),
],
widget: ZetaBadge(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
rounded: context.knobs.boolean(label: 'Rounded'),
status: context.knobs.list(
label: 'Status',
options: ZetaWidgetStatus.values,
labelBuilder: (value) => value.name.split('.').last.capitalize(),
),
),
);

Widget indicatorsUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(20),
child: ZetaIndicator(
type: context.knobs.list(
label: 'Type',
options: ZetaIndicatorType.values,
labelBuilder: (value) => value.name.split('.').last.capitalize(),
),
icon: context.knobs.list(
label: 'Icon',
options: [
Icon(ZetaIcons.star_half_round),
Icon(ZetaIcons.add_alert_round),
Icon(ZetaIcons.add_box_round),
Icon(ZetaIcons.barcode_round),
],
labelBuilder: (value) {
if (value?.icon == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
if (value?.icon == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
if (value?.icon == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
if (value?.icon == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
return '';
},
),
inverse: context.knobs.boolean(label: 'Inverse Border'),
size: context.knobs.list(
label: 'Size',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWidgetSize.values,
),
value: context.knobs.int.slider(label: 'Value'),
),
widget: Center(
child: ZetaIndicator(
type: context.knobs.list(
label: 'Type',
options: ZetaIndicatorType.values,
labelBuilder: (value) => value.name.split('.').last.capitalize(),
),
],
icon: context.knobs.list(
label: 'Icon',
options: [
Icon(ZetaIcons.star_half_round),
Icon(ZetaIcons.add_alert_round),
Icon(ZetaIcons.add_box_round),
Icon(ZetaIcons.barcode_round),
],
labelBuilder: (value) {
if (value?.icon == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
if (value?.icon == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
if (value?.icon == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
if (value?.icon == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
return '';
},
),
inverse: context.knobs.boolean(label: 'Inverse Border'),
size: context.knobs.list(
label: 'Size',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWidgetSize.values,
),
value: context.knobs.int.slider(label: 'Value'),
),
),
);

Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Column(
widget: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(20),
child: ZetaTag(
label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
rounded: context.knobs.boolean(label: 'Rounded'),
direction: context.knobs.list(
label: 'Direction',
options: ZetaTagDirection.values,
labelBuilder: (value) => value.name.split('.').last.capitalize(),
),
ZetaTag(
label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
rounded: context.knobs.boolean(label: 'Rounded'),
direction: context.knobs.list(
label: 'Direction',
options: ZetaTagDirection.values,
labelBuilder: (value) => value.name.split('.').last.capitalize(),
),
)
),
],
),
);

Widget workcloudIndicatorsUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(20),
child: ZetaWorkcloudIndicator(
index: context.knobs.string(label: 'Index', initialValue: '1'),
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
prioritySize: context.knobs.list(
label: 'Size',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWidgetSize.values,
),
priorityType: context.knobs.list(
label: 'Type',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWorkcloudIndicatorType.values,
),
icon: context.knobs.listOrNull(
label: 'Icon',
options: [
ZetaIcons.star_half_round,
ZetaIcons.add_alert_round,
ZetaIcons.add_box_round,
ZetaIcons.barcode_round,
],
initialOption: null,
labelBuilder: (value) {
if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
return '';
},
)),
)
],
widget: ZetaWorkcloudIndicator(
index: context.knobs.string(label: 'Index', initialValue: '1'),
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
prioritySize: context.knobs.list(
label: 'Size',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWidgetSize.values,
),
],
),
priorityType: context.knobs.list(
label: 'Type',
labelBuilder: (value) => value.name.split('.').last.capitalize(),
options: ZetaWorkcloudIndicatorType.values,
),
icon: context.knobs.listOrNull(
label: 'Icon',
options: [
ZetaIcons.star_half_round,
ZetaIcons.add_alert_round,
ZetaIcons.add_box_round,
ZetaIcons.barcode_round,
],
initialOption: null,
labelBuilder: (value) {
if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
return '';
},
)),
);
14 changes: 6 additions & 8 deletions example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,15 @@ Widget bottomSheetContentUseCase(BuildContext context) => WidgetbookTestWidget(
child: _bottomSheet(context),
),
);

Widget bottomSheetLiveUseCase(BuildContext context) {
final sheet = _bottomSheet(context);
return WidgetbookTestWidget(
widget: Padding(
padding: const EdgeInsets.all(20),
child: ElevatedButton(
child: Text('Open'),
onPressed: () {
showModalBottomSheet(context: context, builder: (_) => sheet);
},
),
widget: ElevatedButton(
child: Text('Open'),
onPressed: () {
showModalBottomSheet(context: context, builder: (_) => sheet);
},
),
);
}
Expand Down
Loading

0 comments on commit af79626

Please sign in to comment.