Skip to content

Commit b279caa

Browse files
thelukewaltonthelukewalton
authored
docs: Update example app to work when embedded into docs site (#299)
fix: Initial themes are respected in ZetaProvider fix: Radio button background color fix: Screen header bar onBack callback added fix: Time input text size made smaller fix: Tab bar disabled styles fixed fix: Progress bar progress no longer required fix: Pagination type allowed to be overriden fix: Dropdown logic updated fix: Avatar rail key duplication
1 parent 7db8973 commit b279caa

File tree

71 files changed

+3626
-3661
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+3626
-3661
lines changed

‎.vscode/launch.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@
2626
"request": "launch",
2727
"type": "dart",
2828
"flutterMode": "release"
29+
},
30+
{
31+
"name": "embedded",
32+
"type": "dart",
33+
"cwd": "example",
34+
"request": "launch",
35+
"toolArgs": ["--dart-define=EMBEDDED=true"]
2936
}
3037
]
3138
}

‎LICENSE-3RD-PARTY‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ Applies to:
88

99
- material_switch.dart
1010
- icon.dart
11+
- multi_view_app.dart
1112

1213
Copyright 2014 The Flutter Authors. All rights reserved.
1314

‎example/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
### Building Embedded App for Zeta Docs Site
2+
3+
> Note: This procedure is automated in the Zeta script `build_flutter_example.tsx` found in the Zeta docs repository.
4+
5+
1. **Navigate to the example directory:**
6+
7+
```bash
8+
cd example
9+
```
10+
11+
2. **Build the Flutter web app:**
12+
13+
```bash
14+
flutter build web -t lib/embedded.dart --no-tree-shake-icons --base-href=/flutter/
15+
```
16+
17+
3. **Copy the built JavaScript file:**
18+
19+
```bash
20+
cp example/build/web/main.dart.js docusaurus/static/flutter
21+
```
22+
23+
4. **Edit the `main.dart.js` file:**
24+
- Change lines containing `"flutter/assets"` to `"/flutter/assets"`
25+
- Change lines containing `"assets"` to `"/assets"`
26+
27+
> 🚧 **Note**: Currently not sure why we need to make these changes, as we are setting the correct base-href. Also, there may be other changes required in main.dart.js

‎example/lib/embedded.dart‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:zeta_example/main.dart';
3+
import 'package:zeta_example/utils/interop.dart';
4+
import 'package:zeta_example/utils/multi_view_app.dart';
5+
import 'package:zeta_flutter/zeta_flutter.dart';
6+
7+
void main() async {
8+
WidgetsFlutterBinding.ensureInitialized();
9+
10+
runWidget(MultiViewApp(
11+
viewBuilder: (BuildContext context) {
12+
final int viewId = View.of(context).viewId;
13+
final InitialData? data = InitialData.forView(viewId);
14+
15+
return ZetaExample(
16+
initialThemeMode: (data?.darkMode ?? false) ? ThemeMode.dark : ThemeMode.light,
17+
initialContrast: (data?.highContrast ?? false) ? ZetaContrast.aaa : ZetaContrast.aa,
18+
initialRoute: data?.route ?? '',
19+
);
20+
},
21+
));
22+
}

‎example/lib/home.dart‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import 'package:zeta_example/pages/components/accordion_example.dart';
44
import 'package:zeta_example/pages/components/avatar_rail_example.dart';
55
import 'package:zeta_example/pages/components/avatar_example.dart';
66
import 'package:zeta_example/pages/components/badges_example.dart';
7-
import 'package:zeta_example/pages/components/system_banner_example.dart';
7+
import 'package:zeta_example/pages/components/banner_example.dart';
88
import 'package:zeta_example/pages/components/bottom_sheet_example.dart';
99
import 'package:zeta_example/pages/components/breadcrumb_example.dart';
1010
import 'package:zeta_example/pages/components/button_example.dart';
@@ -64,15 +64,27 @@ final List<Component> components = [
6464
Component(AccordionExample.name, (context) => const AccordionExample()),
6565
Component(TopAppBarExample.name, (context) => const TopAppBarExample()),
6666
Component(AvatarRailExample.name, (context) => const AvatarRailExample()),
67+
Component(AvatarBadgeExample.name, (context) => const AvatarBadgeExample()),
6768
Component(AvatarExample.name, (context) => const AvatarExample()),
68-
Component(BannerExample.name, (context) => const BannerExample()),
69-
Component(BadgesExample.name, (context) => const BadgesExample()),
69+
Component(SystemBannerExample.name, (context) => const SystemBannerExample()),
70+
Component(InPageBannerExample.name, (context) => const InPageBannerExample()),
71+
Component(StatusLabel.name, (context) => const StatusLabel()),
72+
Component(PriorityPill.name, (context) => const PriorityPill()),
73+
Component(Label.name, (context) => const Label()),
74+
Component(Indicators.name, (context) => const Indicators()),
75+
Component(Tags.name, (context) => const Tags()),
7076
Component(BottomSheetExample.name, (context) => const BottomSheetExample()),
7177
Component(BreadcrumbExample.name, (context) => const BreadcrumbExample()),
7278
Component(ButtonExample.name, (context) => const ButtonExample()),
79+
Component(ButtonGroupExample.name, (context) => const ButtonGroupExample()),
80+
Component(FabExample.name, (context) => const FabExample()),
81+
Component(IconButtonExample.name, (context) => const IconButtonExample()),
7382
Component(ChatItemExample.name, (context) => const ChatItemExample()),
7483
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
75-
Component(ChipExample.name, (context) => const ChipExample()),
84+
Component(AssistChipExample.name, (context) => const AssistChipExample()),
85+
Component(StatusChipExample.name, (context) => const StatusChipExample()),
86+
Component(InputChipExample.name, (context) => const InputChipExample()),
87+
Component(FilterChipExample.name, (context) => const FilterChipExample()),
7688
Component(CommsButtonExample.name, (context) => const CommsButtonExample()),
7789
Component(ContactItemExample.name, (context) => const ContactItemExample()),
7890
Component(ListExample.name, (context) => const ListExample()),
@@ -83,7 +95,8 @@ final List<Component> components = [
8395
Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
8496
Component(GroupHeaderExample.name, (context) => const GroupHeaderExample()),
8597
Component(DropdownExample.name, (context) => const DropdownExample()),
86-
Component(ProgressExample.name, (context) => const ProgressExample()),
98+
Component(ProgressBarExample.name, (context) => const ProgressBarExample()),
99+
Component(ProgressCircleExample.name, (context) => const ProgressCircleExample()),
87100
Component(SegmentedControlExample.name, (context) => const SegmentedControlExample()),
88101
Component(SnackBarExample.name, (context) => const SnackBarExample()),
89102
Component(StepperExample.name, (context) => const StepperExample()),
@@ -125,18 +138,22 @@ class Home extends StatefulWidget {
125138
}
126139

127140
final GoRouter router = GoRouter(
128-
routes: [
129-
GoRoute(
130-
path: '/',
131-
name: 'Home',
132-
builder: (_, __) => const Home(),
133-
routes: [
134-
...[
135-
...components,
136-
...assets,
137-
...theme,
138-
].map(
139-
(e) => GoRoute(
141+
routes: routes,
142+
);
143+
144+
final routes = [
145+
GoRoute(
146+
path: '/',
147+
name: 'Home',
148+
builder: (_, __) => const Home(),
149+
routes: [
150+
...[
151+
...components,
152+
...assets,
153+
...theme,
154+
].map(
155+
(e) {
156+
return GoRoute(
140157
path: e.name,
141158
name: e.name,
142159
builder: (_, __) => e.pageBuilder.call(_),
@@ -147,19 +164,23 @@ final GoRouter router = GoRouter(
147164
builder: (_, __) => f.pageBuilder(_),
148165
))
149166
.toList(),
150-
),
151-
),
152-
],
153-
),
154-
],
155-
);
167+
);
168+
},
169+
),
170+
],
171+
)
172+
];
156173

157174
class _HomeState extends State<Home> {
158175
@override
159176
Widget build(BuildContext context) {
160177
final _components = components..sort((a, b) => a.name.compareTo(b.name));
161178
final _assets = assets..sort((a, b) => a.name.compareTo(b.name));
162179
final _theme = theme..sort((a, b) => a.name.compareTo(b.name));
180+
if (GoRouterState.of(context).extra == 'docs') {
181+
return Nothing();
182+
}
183+
163184
return ExampleScaffold(
164185
// x-release-please-start-version
165186
name: 'zeta_flutter v0.20.2',

‎example/lib/main.dart‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:go_router/go_router.dart';
23
import 'package:zeta_flutter/zeta_flutter.dart';
34
import 'home.dart';
45

@@ -9,11 +10,19 @@ void main() async {
910
}
1011

1112
class ZetaExample extends StatelessWidget {
12-
const ZetaExample({super.key});
13+
final ZetaContrast? initialContrast;
14+
final ThemeMode? initialThemeMode;
15+
16+
/// Only pass an initial route for Embedded mode.
17+
final String? initialRoute;
18+
19+
const ZetaExample({super.key, this.initialContrast, this.initialThemeMode, this.initialRoute});
1320

1421
@override
1522
Widget build(BuildContext context) {
1623
return ZetaProvider(
24+
initialContrast: initialContrast,
25+
initialThemeMode: initialThemeMode,
1726
customThemes: [
1827
ZetaCustomTheme(
1928
id: 'teal',
@@ -51,10 +60,39 @@ class ZetaExample extends StatelessWidget {
5160
secondaryDark: ZetaPrimitivesDark().blue,
5261
),
5362
],
54-
builder: (context, lightTheme, darkTheme, themeMode) {
63+
builder: (context, lightTheme, darkTheme, _) {
64+
if (initialRoute != null) {
65+
return MaterialApp.router(
66+
routerConfig: GoRouter(
67+
routes: routes,
68+
initialLocation: initialRoute,
69+
initialExtra: 'docs',
70+
errorBuilder: (context, state) => Scaffold(
71+
body: Center(
72+
child: Column(
73+
mainAxisSize: MainAxisSize.min,
74+
spacing: 16,
75+
children: [
76+
Text('Issue displaying demo content'),
77+
ZetaAccordion(
78+
title: 'See more',
79+
child: Column(
80+
crossAxisAlignment: CrossAxisAlignment.start,
81+
children: [Text('Error: ${state.error}'), Text('Path: ${state.uri}')],
82+
),
83+
),
84+
],
85+
),
86+
),
87+
),
88+
),
89+
themeMode: initialThemeMode,
90+
theme: lightTheme,
91+
darkTheme: darkTheme,
92+
);
93+
}
5594
return MaterialApp.router(
5695
routerConfig: router,
57-
themeMode: themeMode,
5896
theme: lightTheme,
5997
darkTheme: darkTheme,
6098
);

‎example/lib/pages/components/accordion_example.dart‎

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -11,45 +11,42 @@ class AccordionExample extends StatelessWidget {
1111
Widget build(BuildContext context) {
1212
return ExampleScaffold(
1313
name: AccordionExample.name,
14-
child: SingleChildScrollView(
15-
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
16-
child: Column(
17-
children: [
18-
Text('Divider'),
19-
const SizedBox(height: 20),
20-
ZetaAccordion(
21-
title: 'title',
22-
child: Column(
23-
children: [
24-
ListTile(title: Text('List Item')),
25-
ListTile(title: Text('List Item')),
26-
ListTile(title: Text('List Item')),
27-
],
28-
),
29-
),
30-
ZetaAccordion(title: 'title'),
31-
const SizedBox(height: 40),
32-
Text('Contained'),
33-
const SizedBox(height: 20),
34-
ZetaAccordion(
35-
contained: true,
36-
title: 'title',
37-
child: Column(
38-
children: [
39-
ListTile(title: Text('List Item')),
40-
ListTile(title: Text('List Item')),
41-
ListTile(title: Text('List Item')),
42-
],
43-
),
44-
),
45-
ZetaAccordion(
46-
contained: true,
47-
title: 'title',
48-
),
49-
const SizedBox(height: 40),
50-
].divide(const SizedBox.square(dimension: 10)).toList(),
14+
children: [
15+
Text('Divider'),
16+
const SizedBox(height: 20),
17+
ZetaAccordion(
18+
title: 'title',
19+
key: Key('docs'),
20+
child: Column(
21+
children: [
22+
ListTile(title: Text('List Item')),
23+
ListTile(title: Text('List Item')),
24+
ListTile(title: Text('List Item')),
25+
],
26+
),
5127
),
52-
),
28+
ZetaAccordion(title: 'title'),
29+
const SizedBox(height: 40),
30+
Text('Contained'),
31+
const SizedBox(height: 20),
32+
ZetaAccordion(
33+
contained: true,
34+
key: Key('docs-2'),
35+
title: 'title',
36+
child: Column(
37+
children: [
38+
ListTile(title: Text('List Item')),
39+
ListTile(title: Text('List Item')),
40+
ListTile(title: Text('List Item')),
41+
],
42+
),
43+
),
44+
ZetaAccordion(
45+
contained: true,
46+
title: 'title',
47+
),
48+
const SizedBox(height: 40),
49+
],
5350
);
5451
}
5552
}

0 commit comments

Comments
 (0)