[Tour of Beam]: Welcome Screen frontend layout (#22794)

* Tour of Beam frontend blank project

* TOBF (ToB frontend): welcome screen (#226)

* 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

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

* removed whitespace from readme (issue-22583)

* renamed "content" to "child" to mimic widgets

* README in tour-of-beam

* translation path rename,
grey dot with opacity,
footer link text style

* report issue in github, grey dot color

* table instead of row to clip the laptop image

* horizontalHalves & verticalHalves

* cropped laptop image

* row in an expensive intrinsic height

* laptop image in the bottom

* ScreenBreakpoints

* intrinsic height is not needed!

* _WideWelcome and _NarrowWelcome

* draft readme

* blank line in readme

* removed irrelevant info from readme

* removed whitespace

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

build.gradle.kts

@@ -139,6 +139,14 @@ tasks.rat {
     "playground/frontend/.metadata",
     "playground/frontend/pubspec.lock",
 
+    // Ignore Flutter autogenerated files for Playground Components
+    "playground/frontend/playground_components/.metadata",
+    "playground/frontend/playground_components/pubspec.lock",
+
+    // Ignore Flutter autogenerated files for Tour of Beam
+    "learning/tour-of-beam/frontend/.metadata",
+    "learning/tour-of-beam/frontend/pubspec.lock",
+
     // Ignore .gitkeep file
     "**/.gitkeep",
 

learning/tour-of-beam/README.md

@@ -0,0 +1,28 @@
+<!--
+    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.
+-->
+
+# Overview
+
+This folder holds code that supports the user interface for [Tour of Beam](../).
+
+# Requirements
+
+To develop, build and test code in this folder requires the following:
+
+- https://flutter.dev/

learning/tour-of-beam/frontend/.metadata

@@ -0,0 +1,30 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled.
+
+version:
+  revision: f1875d570e39de09040c8f79aa13cc56baab8db1
+  channel: stable
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
+      base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
+    - platform: web
+      create_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
+      base_revision: f1875d570e39de09040c8f79aa13cc56baab8db1
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

learning/tour-of-beam/frontend/README.md

@@ -0,0 +1,47 @@
+<!--
+     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.
+ -->
+
+ # Tour of Beam
+ These are the main sources of the Tour of Beam website.
+
+ # About
+
+ # Getting started
+ Flutter installation guide: https://docs.flutter.dev/get-started/install
+ Run the app: `flutter run --web-renderer html`
+
+ # Deployment
+
+ # Tests
+ Install ChromeDriver to run integration tests in a browser: https://docs.flutter.dev/testing/integration-tests#running-in-a-browser
+ Run integration tests:
+ flutter drive \
+   --driver=test_driver/integration_test.dart \
+   --target=integration_test/counter_test.dart \
+   -d web-server
+
+ # Packages
+ `flutter pub get`
+
+ # Contribution guide
+ For checks: `./gradlew rat`
+
+ # Additional resources
+
+ # Troubleshooting

learning/tour-of-beam/frontend/analysis_options.yaml

@@ -0,0 +1,18 @@
+#  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.
+
+include: package:total_lints/app.yaml

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

@@ -0,0 +1,39 @@
+#  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.
+
+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'
+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.'
+    selectLanguage: 'Please select the default language (you may change the language at any time):'
+    startLearning: 'Start learning'
+dialogs:
+  signInIf: If you would like to save your progress and track completed modules
+complexity:
+  basic: 'Basic level'
+  medium: 'Medium level'
+  advanced: 'Advanced level'

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

@@ -0,0 +1,43 @@
+/*
+ * 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: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:tour_of_beam/main.dart' as app;
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('theme', () {
+    testWidgets('mode toggle', (tester) async {
+      app.main();
+      await tester.pumpAndSettle();
+      final Finder switchToDarkModeButton =
+          find.widgetWithText(ToggleThemeButton, 'ui.darkMode'.tr());
+      expect(switchToDarkModeButton, findsOneWidget);
+      await tester.tap(switchToDarkModeButton);
+      await tester.pumpAndSettle();
+      expect(
+        find.widgetWithText(ToggleThemeButton, 'ui.lightMode'.tr()),
+        findsOneWidget,
+      );
+    });
+  });
+}

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

@@ -0,0 +1,65 @@
+/*
+ * 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 '../constants/colors.dart';
+import '../constants/sizes.dart';
+
+enum Complexity { basic, medium, advanced }
+
+class ComplexityWidget extends StatelessWidget {
+  final Complexity complexity;
+
+  const ComplexityWidget({required this.complexity});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(children: _dots[complexity]!);
+  }
+
+  static const Map<Complexity, List<Widget>> _dots = {
+    Complexity.basic: [_Dot.green, _Dot.grey, _Dot.grey],
+    Complexity.medium: [_Dot.orange, _Dot.orange, _Dot.grey],
+    Complexity.advanced: [_Dot.red, _Dot.red, _Dot.red],
+  };
+}
+
+class _Dot extends StatelessWidget {
+  final Color color;
+
+  const _Dot({required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.only(left: 1),
+      width: TobSizes.size4,
+      height: TobSizes.size4,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: color,
+      ),
+    );
+  }
+
+  static const grey = _Dot(color: TobColors.grey4);
+  static const green = _Dot(color: TobColors.green);
+  static const orange = _Dot(color: TobColors.orange);
+  static const red = _Dot(color: TobColors.red);
+}