Extract playground components

.github/workflows/build_playground_frontend.yml

@@ -32,7 +32,7 @@ jobs:
       GO_VERSION: 1.18.0
       BEAM_VERSION: 2.40.0
       TERRAFORM_VERSION: 1.0.9
-      FLUTTER_VERSION: 3.0.1-stable
+      FLUTTER_VERSION: 3.3.2
       STAND_SUFFIX: ''
       GOOGLE_DOMAIN: '-dot-apache-beam-testing.appspot.com'
     steps:
@@ -44,8 +44,8 @@ jobs:
             java-version: '8'
       - name: install flutter
         run: |
-             wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_$FLUTTER_VERSION.tar.xz &&\
-             tar -xf flutter_linux_$FLUTTER_VERSION.tar.xz &&\
+             wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_$FLUTTER_VERSION-stable.tar.xz &&\
+             tar -xf flutter_linux_$FLUTTER_VERSION-stable.tar.xz &&\
              mv flutter /opt/ &&\
              ln -s /opt/flutter/bin/flutter /usr/local/bin/flutter &&\
              ln -s /opt/flutter/bin/dart /usr/local/bin/dart &&\

.gitignore

@@ -125,6 +125,7 @@ website/www/yarn-error.log
 **/.flutter-plugins
 **/.flutter-plugins-dependencies
 **/generated_plugin_registrant.dart
+**/*.mocks.dart
 
 # Ignore Beam Playground Terraform
 **/.terraform

learning/tour-of-beam/frontend/assets/translations/en.yaml

@@ -16,24 +16,33 @@
 #  under the License.
 
 ui:
-  copyright: '© The Apache Software Foundation'
-  darkMode: 'Dark Mode'
-  lightMode: 'Light Mode'
-  privacyPolicy: 'Privacy Policy'
-  reportIssue: 'Report Issue in GitHub'
-  signIn: 'Sign in'
-  continueGitHub: 'Continue with GitHub'
-  continueGoogle: 'Continue with Google'
+  about: About Tour of Beam
+  builtWith: Built with Apache Beam
+  continueGitHub: Continue with GitHub
+  continueGoogle: Continue with Google
+  copyright: © The Apache Software Foundation
+  deleteAccount: Delete my account
+  privacyPolicy: Privacy Policy
+  reportIssue: Report Issue in GitHub
+  signIn: Sign in
+  signOut: Sign out
+  toWebsite: To Apache Beam website
+
 pages:
   welcome:
-    title: 'Welcome to the Tour of Beam!'
-    ifSaveProgress: 'Your journey is broken down into learning modules. If you would like to save your progress and track completed modules, please'
-    signIn: ' sign in.'
+    ifSaveProgress: Your journey is broken down into learning modules. If you would like to save your progress and track completed modules, please
     selectLanguage: 'Please select the default language (you may change the language at any time):'
-    startLearning: 'Start learning'
+    signIn: ' sign in.'
+    startTour: Start your tour
+    title: Welcome to the Tour of Beam!
+  tour:
+    completeUnit: Complete Unit
+    summaryTitle: Table of Contents
+
 dialogs:
   signInIf: If you would like to save your progress and track completed modules
+
 complexity:
-  basic: 'Basic level'
-  medium: 'Medium level'
-  advanced: 'Advanced level'
+  basic: Basic level
+  medium: Medium level
+  advanced: Advanced level

learning/tour-of-beam/frontend/integration_test/app_test.dart

@@ -19,7 +19,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
-import 'package:tour_of_beam/components/toggle_theme_button.dart';
+import 'package:playground_components/playground_components.dart';
 import 'package:tour_of_beam/main.dart' as app;
 
 void main() {

learning/tour-of-beam/frontend/lib/components/expansion_tile_wrapper.dart

@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:playground_components/playground_components.dart';
+
+class ExpansionTileWrapper extends StatelessWidget {
+  final ExpansionTile expansionTile;
+  const ExpansionTileWrapper(this.expansionTile);
+
+  @override
+  Widget build(BuildContext context) {
+    return Theme(
+      data: Theme.of(context).copyWith(
+        hoverColor: BeamColors.transparent,
+        splashColor: BeamColors.transparent,
+        highlightColor: BeamColors.transparent,
+        dividerColor: BeamColors.transparent,
+        unselectedWidgetColor: Colors.grey,
+        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.grey),
+        visualDensity: const VisualDensity(vertical: -4),
+        listTileTheme: const ListTileThemeData(dense: true),
+      ),
+      child: expansionTile,
+    );
+  }
+}

learning/tour-of-beam/frontend/lib/components/filler_text.dart

@@ -0,0 +1,29 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+
+class FillerText extends StatelessWidget {
+  final int width;
+  const FillerText({required this.width});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(''.padRight(width, 'Just a filler text. '));
+  }
+}