Skip to content

Commit

Permalink
feat : Breacrumbs (#37)
Browse files Browse the repository at this point in the history
* Add breadcrumbs

* Rebase

* change to have breadcrumb inputs

* Respond to comments

---------

Authored-by: Osman <[email protected]>
  • Loading branch information
ahmed-osman3 authored Mar 15, 2024
1 parent 0d23f7c commit ad18f6d
Show file tree
Hide file tree
Showing 7 changed files with 591 additions and 40 deletions.
20 changes: 15 additions & 5 deletions example/lib/home.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import 'package:zeta_example/pages/components/avatar_example.dart';
import 'package:zeta_example/pages/components/badges_example.dart';
import 'package:zeta_example/pages/components/banner_example.dart';
import 'package:zeta_example/pages/components/bottom_sheet_example.dart';
import 'package:zeta_example/pages/components/breadcrumbs_example.dart';
import 'package:zeta_example/pages/components/button_example.dart';
import 'package:zeta_example/pages/components/checkbox_example.dart';
import 'package:zeta_example/pages/components/chip_example.dart';
Expand Down Expand Up @@ -33,11 +34,14 @@ final List<Component> components = [
Component(BannerExample.name, (context) => const BannerExample()),
Component(BadgesExample.name, (context) => const BadgesExample()),
Component(BottomSheetExample.name, (context) => const BottomSheetExample()),
Component(BreadCrumbsExample.name, (context) => const BreadCrumbsExample()),
Component(ButtonExample.name, (context) => const ButtonExample()),
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
Component(ChipExample.name, (context) => const ChipExample()),
Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
Component(
NavigationBarExample.name, (context) => const NavigationBarExample()),
Component(
PasswordInputExample.name, (context) => const PasswordInputExample()),
Component(ProgressExample.name, (context) => const ProgressExample()),
Component(DialPadExample.name, (context) => const DialPadExample()),
];
Expand Down Expand Up @@ -104,21 +108,27 @@ class _HomeState extends State<Home> {
title: Text('Widgets'),
backgroundColor: Zeta.of(context).colors.warm.shade30,
children: _components
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
.map((item) => ListTile(
title: Text(item.name),
onTap: () => context.go('/${item.name}')))
.toList(),
),
ExpansionTile(
title: Text('Theme'),
backgroundColor: Zeta.of(context).colors.warm.shade30,
children: _theme
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
.map((item) => ListTile(
title: Text(item.name),
onTap: () => context.go('/${item.name}')))
.toList(),
),
ExpansionTile(
title: Text('Assets'),
backgroundColor: Zeta.of(context).colors.warm.shade30,
children: _assets
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
.map((item) => ListTile(
title: Text(item.name),
onTap: () => context.go('/${item.name}')))
.toList(),
),
],
Expand Down
58 changes: 58 additions & 0 deletions example/lib/pages/components/breadcrumbs_example.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class BreadCrumbsExample extends StatefulWidget {
static const String name = 'Breadcrumbs';

const BreadCrumbsExample({super.key});

@override
State<BreadCrumbsExample> createState() => _BreadCrumbsExampleState();
}

class _BreadCrumbsExampleState extends State<BreadCrumbsExample> {
List<ZetaBreadCrumb> _children = [
ZetaBreadCrumb(
label: 'Icon before with seperator',
onPressed: () {
print("Breadcrumb " + 0.toString() + "Clicked");
},
),
];
int index = 1;

@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: 'Breadcrumbs',
child: Center(
child: SingleChildScrollView(
child: SizedBox(
width: double.infinity,
child: Column(children: [
ZetaBreadCrumbs(children: _children),
SizedBox(
height: 50,
),
FilledButton(
onPressed: () {
setState(() {
_children.add(
ZetaBreadCrumb(
label: 'Icon before with seperator',
onPressed: () {
print("Breadcrumb clicked");
},
),
);
index++;
});
},
child: Text("Add Breadcrumb"))
])),
),
),
);
}
}
7 changes: 7 additions & 0 deletions example/lib/pages/components/progress_example.dart
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,19 @@ class ProgressExampleState extends State<ProgressExample> {
isThin: false,
label: "UPLOADING ...",
),
SizedBox(
height: 40,
),
Wrapper(
stepsCompleted: 0,
circleSize: ZetaCircleSizes.xl,
rounded: false,
isCircle: true,
),
SizedBox(
height: 40,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: [])
]),
),
),
Expand Down
129 changes: 94 additions & 35 deletions example/widgetbook/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'pages/components/avatar_widgetbook.dart';
import 'pages/components/badges_widgetbook.dart';
import 'pages/components/banner_widgetbook.dart';
import 'pages/components/bottom_sheet_widgetbook.dart';
import 'pages/components/breadcrumbs_widgetbook.dart';
import 'pages/components/button_widgetbook.dart';
import 'pages/components/checkbox_widgetbook.dart';
import 'pages/components/chip_widgetbook.dart';
Expand Down Expand Up @@ -39,47 +40,92 @@ class HotReload extends StatelessWidget {
WidgetbookComponent(
name: 'Badge',
useCases: [
WidgetbookUseCase(name: 'Status Label', builder: (context) => statusLabelUseCase(context)),
WidgetbookUseCase(name: 'Priority Pill', builder: (context) => priorityPillUseCase(context)),
WidgetbookUseCase(name: 'Badge', builder: (context) => badgeUseCase(context)),
WidgetbookUseCase(name: 'Indicators', builder: (context) => indicatorsUseCase(context)),
WidgetbookUseCase(name: 'Tags', builder: (context) => tagsUseCase(context)),
WidgetbookUseCase(
name: 'Workcloud Indicators', builder: (context) => workcloudIndicatorsUseCase(context)),
name: 'Status Label',
builder: (context) => statusLabelUseCase(context)),
WidgetbookUseCase(
name: 'Priority Pill',
builder: (context) => priorityPillUseCase(context)),
WidgetbookUseCase(
name: 'Badge', builder: (context) => badgeUseCase(context)),
WidgetbookUseCase(
name: 'Indicators',
builder: (context) => indicatorsUseCase(context)),
WidgetbookUseCase(
name: 'Tags', builder: (context) => tagsUseCase(context)),
WidgetbookUseCase(
name: 'Workcloud Indicators',
builder: (context) => workcloudIndicatorsUseCase(context)),
],
),
WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
WidgetbookUseCase(
name: 'Avatar', builder: (context) => avatarUseCase(context)),
WidgetbookUseCase(
name: 'Checkbox',
builder: (context) => checkboxUseCase(context)),
WidgetbookComponent(
name: 'Buttons',
useCases: [
WidgetbookUseCase(name: 'Button', builder: (context) => buttonUseCase(context)),
WidgetbookUseCase(name: 'Icon Button', builder: (context) => iconButtonUseCase(context)),
WidgetbookUseCase(
name: 'Floating Action Button', builder: (context) => floatingActionButtonUseCase(context)),
WidgetbookUseCase(name: 'Group Button', builder: (context) => buttonGroupUseCase(context)),
name: 'Button',
builder: (context) => buttonUseCase(context)),
WidgetbookUseCase(
name: 'Icon Button',
builder: (context) => iconButtonUseCase(context)),
WidgetbookUseCase(
name: 'Floating Action Button',
builder: (context) => floatingActionButtonUseCase(context)),
WidgetbookUseCase(
name: 'Group Button',
builder: (context) => buttonGroupUseCase(context)),
],
),
WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
WidgetbookUseCase(
name: 'BreadCrumbs',
builder: (context) => breadCrumbsUseCase(context)),
WidgetbookUseCase(
name: 'Banners', builder: (context) => bannerUseCase(context)),
WidgetbookUseCase(
name: 'In Page Banners',
builder: (context) => inPageBannerUseCase(context)),
WidgetbookUseCase(
name: 'Accordion',
builder: (context) => accordionUseCase(context)),
WidgetbookComponent(
name: 'Chips',
useCases: [
WidgetbookUseCase(name: 'Filter Chip', builder: (context) => filterChipUseCase(context)),
WidgetbookUseCase(name: 'Input Chip', builder: (context) => inputChipUseCase(context)),
WidgetbookUseCase(name: 'Assist Chip', builder: (context) => assistChipUseCase(context)),
WidgetbookUseCase(
name: 'Filter Chip',
builder: (context) => filterChipUseCase(context)),
WidgetbookUseCase(
name: 'Input Chip',
builder: (context) => inputChipUseCase(context)),
WidgetbookUseCase(
name: 'Assist Chip',
builder: (context) => assistChipUseCase(context)),
],
),
WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)),
WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)),
WidgetbookUseCase(
name: 'Password Input',
builder: (context) => passwordInputUseCase(context)),
WidgetbookUseCase(
name: 'Content',
builder: (context) => bottomSheetContentUseCase(context)),
WidgetbookUseCase(
name: 'Dial Pad',
builder: (context) => dialPadUseCase(context)),
WidgetbookUseCase(
name: 'Navigation Bar',
builder: (context) => navigationBarUseCase(context)),
WidgetbookComponent(
name: 'Progress',
useCases: [
WidgetbookUseCase(name: 'Bar', builder: (context) => progressBarUseCase(context)),
WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context))
WidgetbookUseCase(
name: 'Bar',
builder: (context) => progressBarUseCase(context)),
WidgetbookUseCase(
name: 'Circle',
builder: (context) => progressCircleUseCase(context))
],
),
]..sort((a, b) => a.name.compareTo(b.name)),
Expand All @@ -88,17 +134,23 @@ class HotReload extends StatelessWidget {
name: 'Theme',
isInitiallyExpanded: false,
children: [
WidgetbookUseCase(name: 'Typography', builder: (context) => typographyUseCase(context)),
WidgetbookUseCase(name: 'Color', builder: (context) => colorUseCase(context)),
WidgetbookUseCase(name: 'Spacing', builder: (context) => spacingUseCase(context)),
WidgetbookUseCase(name: 'Radius', builder: (context) => radiusUseCase(context)),
WidgetbookUseCase(
name: 'Typography',
builder: (context) => typographyUseCase(context)),
WidgetbookUseCase(
name: 'Color', builder: (context) => colorUseCase(context)),
WidgetbookUseCase(
name: 'Spacing', builder: (context) => spacingUseCase(context)),
WidgetbookUseCase(
name: 'Radius', builder: (context) => radiusUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
WidgetbookCategory(
name: 'Assets',
isInitiallyExpanded: false,
children: [
WidgetbookUseCase(name: 'Icons', builder: (context) => iconsUseCase(context)),
WidgetbookUseCase(
name: 'Icons', builder: (context) => iconsUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
],
Expand All @@ -115,16 +167,23 @@ class HotReload extends StatelessWidget {
),
ThemeAddon(
themes: [
WidgetbookTheme(name: 'Light Mode', data: _Theme(isDark: false, isAAA: false)),
WidgetbookTheme(name: 'Dark Mode', data: _Theme(isDark: true, isAAA: false)),
WidgetbookTheme(name: 'Light Mode AAA', data: _Theme(isDark: false, isAAA: true)),
WidgetbookTheme(name: 'Dark Mode AAA', data: _Theme(isDark: true, isAAA: true)),
WidgetbookTheme(
name: 'Light Mode', data: _Theme(isDark: false, isAAA: false)),
WidgetbookTheme(
name: 'Dark Mode', data: _Theme(isDark: true, isAAA: false)),
WidgetbookTheme(
name: 'Light Mode AAA',
data: _Theme(isDark: false, isAAA: true)),
WidgetbookTheme(
name: 'Dark Mode AAA', data: _Theme(isDark: true, isAAA: true)),
],
themeBuilder: (context, theme, child) {
_Theme _theme = theme;
return ZetaProvider(
initialContrast: _theme.isAAA ? ZetaContrast.aaa : ZetaContrast.aa,
initialThemeMode: _theme.isDark ? ThemeMode.dark : ThemeMode.light,
initialContrast:
_theme.isAAA ? ZetaContrast.aaa : ZetaContrast.aa,
initialThemeMode:
_theme.isDark ? ThemeMode.dark : ThemeMode.light,
builder: (context, theme, themeMode) {
return Builder(
builder: (context) {
Expand Down
64 changes: 64 additions & 0 deletions example/widgetbook/pages/components/breadcrumbs_widgetbook.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../test/test_components.dart';
import '../../utils/utils.dart';

Widget breadCrumbsUseCase(BuildContext context) => WidgetbookTestWidget(
widget: Center(
child: BreadCrumbExample(context),
));

class BreadCrumbExample extends StatefulWidget {
const BreadCrumbExample(this.c);
final BuildContext c;

@override
State<BreadCrumbExample> createState() => _BreadCrumbExampleState();
}

class _BreadCrumbExampleState extends State<BreadCrumbExample> {
List<ZetaBreadCrumb> _children = [
ZetaBreadCrumb(
label: 'Icon before with seperator',
onPressed: () {
print("Breadcrumb " + 0.toString() + "Clicked");
},
),
];
int index = 1;

@override
Widget build(BuildContext _) {
return SingleChildScrollView(
child: SizedBox(
width: double.infinity,
child: Column(children: [
ZetaBreadCrumbs(
children: _children,
rounded: widget.c.knobs.boolean(label: 'Rounded'),
activeIcon: iconKnob(context),
),
SizedBox(
height: 50,
),
FilledButton(
onPressed: () {
setState(() {
_children.add(
ZetaBreadCrumb(
label: 'Icon before with seperator',
onPressed: () {
print("Breadcrumb clicked");
},
),
);
index++;
});
},
child: Text("Add Breadcrumb"))
])),
);
}
}
Loading

0 comments on commit ad18f6d

Please sign in to comment.