Extract playground components (apache#23253)

* [Tour of Beam][Frontend][apache#22600] TourScreen layout

* theme setup

* Replaced ThemeProvider with ThemeSwitchNotifier

* header with theme mode switcher and logo

* page container with header & footer

* theme mode tests

* renamed the directory to tour-of-beam

* compressed beam_logo.png

* added missing license comments

* rudimentary layout of the first screen

* review comments fixes #1

* moved notifyListeners inside then

* responsive todo

* split into 2 simple functions

* deleted redundant constants &
replaced 2018 text theme with 2021

* styling refinement

* home screen layout

* clickable sign in text

* font weights fix

* removed _getBaseFontTheme function

* fixed border and bg color

* color fixes

* difficulty component

* _LastModuleBody

* todo in test

* footer border

* fixed overflows

* replaced Project prefix with Tob

* replaced then with await

* inferred type

* started translation of the home screen

* sorted translations

* Complexity comments

* comment fixes

* home screen translations

* sign in overlay

* import fix

* integration test does not fail

* playground_components package with
dismissible_overlay

* missing license

* removed _dots from build

* widgets refinement

* renamed home screen to welcome screen

* deleted copyWith

* _SdkButton

* trailing comma & pubspec formatting

* license and lints

* license

* removed license from .metadata

* pubspec formatting

* total lints update

* changed from tour_of_beam to
tour-of-beam in build.gradle.kts

* license check

* _SdkButton mimics Radio button

* renamed MyApp to TourOfBeamApp

* onChanged mimics Radio button

Tour of Beam frontend blank project

[Tour of Beam][Frontend][apache#22600] TourScreen layout

TourScreen layout (apache#22600)

common theme, constants, split view

missing license

flutter_gen, summary layout details

content layout details

no functional widgets in split view

main screen todos & translation

main screen todos & translation

comment fixes #1

ExpansionTileWrapper

SplitViewController

lists in tour screen widgets

comment fixes #1 (31.08)

split view package in PGC

fixed button overflow

splitter theme color

comment fixes #2 (31.08)

gradlew check

welcome screen overflow test (apache#22600)

SDK dropdown (apache#22600)

flexible complete unit OutlinedButton (apache#22600)

renamed PageContainer to TobScaffold

dropdown style refinement

DropdownButton implicit type

sdk instead of e

licenses apache#22600

renamed _ShrinkedTour to _NarrowTour apache#22600

tour screen style refinement apache#22600

BeamDivider in PGC apache#22600

removed todo, added license apache#22600

built with text apache#22600

_WideWelcome with IntrinsicHeight (apache#22600)

Co-Authored-By: darkhan.nausharipov <[email protected]>

* addressing review comments apache#22600

replaced magic numbers apache#22600

comments (apache#22600)

comments apache#22600

comments apache#22600

comments apache#22600

comments apache#22600

comments, flutter 3.3.0 upgrade apache#22600

renamed ActionPadding to ActionVerticalPadding apache#22600

actions formatting apache#22600

* branded sign in buttons apache#22600

* _BrandedSignInButtons apache#22600

* _Divider color apache#22600

* profile apache#22600

* moved split_view from PGC into ToB apache#22600

* indentation fix apache#22600

* split ProfileContent into widgets apache#22600

* Extract playground components to a separate package (apache#22600)

* Minor fixes (apache#22600)

* Address review issues (apache#22600)

* Upgrade Flutter to v3.3.2 (apache#22600)

* Add precommit Gradle task for playground_components, add code generation to frontend Gradle task, remove generated mocks, fix linter issues (apache#22600)

* startTour button (apache#22600)

* lint fixes (apache#22600)

* Fix highlighting for Python and SCIO (apache#22600)

Co-authored-by: darkhan.nausharipov <[email protected]>

.github/workflows/build_playground_frontend.yml

@@ -37,7 +37,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:
@@ -49,8 +49,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. '));
+  }
+}