[BEAM-12963] [Playground] Create base Beam Playground page structure

playground/frontend/lib/components/logo/logo_component.dart

@@ -0,0 +1,37 @@
+/*
+ * 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 Logo extends StatelessWidget {
+  const Logo({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return RichText(
+      text: TextSpan(
+        style: theme.textTheme.headline6,
+        children: <TextSpan>[
+          TextSpan(text: 'Beam', style: TextStyle(color: theme.primaryColor)),
+          const TextSpan(text: ' Playground'),
+        ],
+      ),
+    );
+  }
+}

playground/frontend/lib/components/toggle_theme_button/toggle_theme_button.dart

@@ -0,0 +1,50 @@
+/*
+ * 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/config/theme.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:provider/provider.dart';
+
+const kLightMode = "Light Mode";
+const kDartMode = "Dark Mode";
+
+class ToggleThemeButton extends StatelessWidget {
+  const ToggleThemeButton({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<ThemeProvider>(builder: (context, theme, child) {
+      final text = theme.isDarkMode ? kLightMode : kDartMode;
+      final icon = theme.isDarkMode
+          ? Icons.light_mode_outlined
+          : Icons.mode_night_outlined;
+      return Padding(
+        padding: const EdgeInsets.symmetric(
+          vertical: kSmPadding,
+          horizontal: kMdPadding,
+        ),
+        child: TextButton.icon(
+          icon: Icon(icon),
+          label: Text(text),
+          onPressed: theme.toggleTheme,
+        ),
+      );
+    });
+  }
+}

playground/frontend/lib/config/theme.dart

@@ -0,0 +1,86 @@
+/*
+ * 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/constants/colors.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:provider/provider.dart';
+
+class ThemeProvider extends ChangeNotifier {
+  ThemeMode themeMode = ThemeMode.light;
+
+  bool get isDarkMode {
+    return themeMode == ThemeMode.dark;
+  }
+
+  void toggleTheme() {
+    themeMode = themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
+    notifyListeners();
+  }
+}
+
+final kLightTheme = ThemeData(
+  brightness: Brightness.light,
+  primaryColor: kLightPrimary,
+  backgroundColor: kLightPrimaryBackground,
+  appBarTheme: const AppBarTheme(
+    color: kLightSecondaryBackground,
+    elevation: 1,
+    centerTitle: false,
+  ),
+  textButtonTheme: TextButtonThemeData(
+    style: TextButton.styleFrom(
+      primary: kLightText,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(kBorderRadius)),
+      ),
+    ),
+  ),
+);
+
+final kDarkTheme = ThemeData(
+  brightness: Brightness.dark,
+  primaryColor: kDarkPrimary,
+  backgroundColor: kDarkGrey,
+  appBarTheme: const AppBarTheme(
+    color: kDarkSecondaryBackground,
+    elevation: 1,
+    centerTitle: false,
+  ),
+  textButtonTheme: TextButtonThemeData(
+    style: TextButton.styleFrom(
+      primary: kDarkText,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(kBorderRadius)),
+      ),
+    ),
+  ),
+);
+
+class ThemeColors {
+  final bool isDark;
+
+  static ThemeColors of(BuildContext context) {
+    final theme = Provider.of<ThemeProvider>(context);
+    return ThemeColors(theme.isDarkMode);
+  }
+
+  ThemeColors(this.isDark);
+
+  Color get greyColor => isDark ? kDarkGrey : kLightGrey;
+}

playground/frontend/lib/constants/colors.dart

@@ -0,0 +1,33 @@
+/*
+ * 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';
+
+const Color kLightPrimaryBackground = Colors.white;
+const Color kLightSecondaryBackground = Color(0xFFFCFCFC);
+const Color kLightGrey = Color(0xFFE5E5E5);
+const Color kLightGrey1 = Color(0xFFA0A4AB);
+const Color kLightText = Color(0xFF242639);
+const Color kLightPrimary = Color(0xFFE74D1A);
+
+const Color kDarkPrimaryBackground = Color(0xFF18181B);
+const Color kDarkSecondaryBackground = Color(0xFF2E2E34);
+const Color kDarkGrey = Color(0xFF3F3F46);
+const Color kDarkGrey1 = Color(0xFF606772);
+const Color kDarkText = Color(0xFFFFFFFF);
+const Color kDarkPrimary = Color(0xFFF26628);

playground/frontend/lib/constants/sizes.dart

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+// paddings
+const double kZeroPadding = 0.0;
+const double kSmPadding = 4.0;
+const double kMdPadding = 8.0;
+const double kLgPadding = 16.0;
+
+// border radius
+const double kBorderRadius = 8.0;
+
+// elevation
+const int kElevation = 1;
+
+// icon sizes
+const double kIconSizeMd = 24.0;

playground/frontend/lib/main.dart

@@ -17,40 +17,8 @@
  */
 
 import 'package:flutter/material.dart';
+import 'package:playground/playground_app.dart';
 
 void main() {
   runApp(const PlaygroundApp());
 }
-
-class PlaygroundApp extends StatelessWidget {
-  const PlaygroundApp({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Apache Beam Playground',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-      ),
-      home: const HomePage(title: 'Apache Beam Playground'),
-    );
-  }
-}
-
-class HomePage extends StatelessWidget {
-  final String title;
-
-  const HomePage({Key? key, required this.title}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(title),
-      ),
-      body: const Center(
-        child: Text('Playground'),
-      ),
-    );
-  }
-}

playground/frontend/lib/modules/editor/components/editor_textarea.dart

@@ -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.
+ */
+
+import 'package:flutter/material.dart';
+
+class EditorTextArea extends StatelessWidget {
+  const EditorTextArea({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(child: Text('Editor Text Area'));
+  }
+}

playground/frontend/lib/modules/output/components/output_area.dart

@@ -0,0 +1,30 @@
+/*
+ * 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 OutputArea extends StatelessWidget {
+  const OutputArea({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: Text('Output'),
+    );
+  }
+}