Workiva · joebingham-wk · Aug 13, 2020 · Aug 14, 2020 · Aug 14, 2020 · Aug 18, 2020
diff --git a/app/over_react_redux/todo_client/example/index.html b/app/over_react_redux/todo_client/example/index.html
@@ -0,0 +1,39 @@
+<!--
+  ~ Copyright 2020 Workiva Inc.
+  ~
+  ~ Licensed 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.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+    <meta charset="utf-8">
+    <title>MUI OverReact Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+</head>
+    <body>
+        <a href="./make_styles/make_styles_example.html"><h3>Make Styles Examples</h3></a>
+        <a href="./with_styles/with_styles_example.html"><h3>With Styles Examples</h3></a>
+        <a href="./styled/styled_example.html"><h3>Styled Examples</h3></a>
+
+        <script src="packages/react/react.js"></script>
+        <script src="packages/react/react_dom.js"></script>
+        <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
+
+        <!-- Serve compiled output. -->
+        <script defer src="main.dart.js"></script>
+    </body>
+</html>
diff --git a/app/over_react_redux/todo_client/example/make_styles/box.dart b/app/over_react_redux/todo_client/example/make_styles/box.dart
@@ -0,0 +1,225 @@
+import 'dart:html';
+
+import 'package:over_react/over_react.dart';
+import 'package:react_material_ui/react_material_ui.dart';
+
+part 'box.over_react.g.dart'; // ignore: uri_has_not_been_generated
+
+const standardHeightAndWidth = {
+  'height': 100,
+  'width': 100,
+};
+
+Map<String, dynamic> getBoxColored(String boxColor) {
+  return {
+    'backgroundColor': boxColor,
+    ...standardHeightAndWidth,
+  };
+}
+
+final useStyles = makeStyles<BoxWrapperProps>(
+  MuiStyleMap<BoxWrapperProps>()
+    ..addFunctionRule('arbitrary', (props) {
+      return getBoxColored(props.color);
+    })
+    ..addRule('arbitrary-2', getBoxColored('blue'))
+    ..addRule('noProps', getBoxColored('red')),
+  propsBuilder:
+      $BoxWrapperConfig.propsFactory, // ignore: invalid_use_of_protected_member
+);
+
+mixin BoxWrapperProps on UiProps {
+  String color;
+}
+
+UiFactory<BoxWrapperProps> BoxWrapper = uiFunction(
+  (props) {
+    final styles = useStyles(props);
+
+    return (Box()..className = styles['arbitrary'])(props.children);
+  },
+  $BoxWrapperConfig, // ignore: undefined_identifier
+);
+
+mixin NoPropsBoxWrapperProps on UiProps {}
+
+UiFactory<NoPropsBoxWrapperProps> NoPropsBoxWrapper = uiFunction(
+  (props) {
+    final styles = useStyles();
+
+    return (Box()..className = styles['noProps'])(props.children);
+  },
+  $NoPropsBoxWrapperConfig, // ignore: undefined_identifier
+);
+
+final useFunctionStyles = makeThemedStyles<FunctionStylesBoxWrapperProps>(
+  (theme) {
+    return MuiStyleMap<FunctionStylesBoxWrapperProps>()
+      ..addFunctionRule('root', (props) {
+        return {
+          'backgroundColor': theme.palette.primary.dark,
+          'height': props.height,
+          'width': props.width,
+        };
+      })
+      ..addRule('noProps', {
+        'backgroundColor': theme.palette.primary.light,
+        ...standardHeightAndWidth,
+      });
+  },
+  propsBuilder: $FunctionStylesBoxWrapperConfig
+      .propsFactory, // ignore: invalid_use_of_protected_member
+);
+
+mixin FunctionStylesBoxWrapperProps on UiProps {
+  int height;
+  int width;
+}
+
+UiFactory<FunctionStylesBoxWrapperProps> FunctionStylesBoxWrapper = uiFunction(
+  (props) {
+    final styles = useFunctionStyles(props);
+    return (Box()..className = styles['root'])(props.children);
+  },
+  $FunctionStylesBoxWrapperConfig, // ignore: undefined_identifier
+);
+
+UiFactory<FunctionStylesBoxWrapperProps> FunctionStylesNoPropsBoxWrapper =
+    uiFunction(
+  (props) {
+    final styles = useFunctionStyles();
+    return (Box()..className = styles['noProps'])(props.children);
+  },
+  $FunctionStylesNoPropsBoxWrapperConfig, // ignore: undefined_identifier
+);
+
+final backupTheme = MuiTheme()
+  ..palette = MuiPalette({
+    'primary': {
+      'light': '#008000',
+      'main': '#FFA500',
+      'dark': '#0000FF',
+    }
+  });
+
+// When inspecting the DOM, this `<style>` tag should be last because
+// of the index.
+final useStylesWithOptions = makeThemedStyles(
+    (theme) => MuiStyleMap({
+          'root': {
+            'backgroundColor': theme.palette.primary.light,
+            'height': 100,
+            'width': 100,
+          },
+        }),
+    options: (MuiStyleOptions()
+      ..name = 'this-is-a-custom-name'
+      ..defaultTheme = backupTheme
+      ..meta = 'the_last_tag_because_of_index'
+      ..index = 1));
+
+mixin OptionsBoxWrapperProps on UiProps {}
+
+UiFactory<NoPropsBoxWrapperProps> OptionsBoxWrapper = uiFunction(
+  (props) {
+    final styles = useStylesWithOptions();
+
+    return (Box()..className = styles['root'])();
+  },
+  $OptionsBoxWrapperConfig, // ignore: undefined_identifier
+);
+
+final stylesWithElementOption = makeStyles({
+  'root': {
+    'backgroundColor': 'orange',
+    'color': 'white',
+    ...standardHeightAndWidth,
+  }
+},
+    options: MuiStyleOptions()
+      ..element = (StyleElement()..id = 'a_custom_style_tag'));
+
+UiFactory<NoPropsBoxWrapperProps> BoxWithElement = uiFunction(
+  (props) {
+    final styles = stylesWithElementOption();
+
+    return (Box()..className = styles['root'])(props.children);
+  },
+  $BoxWithMediaConfig, // ignore: undefined_identifier
+);
+
+final stylesWithMediaOption = makeStyles({
+  'root': {
+    ...standardHeightAndWidth,
+  }
+}, options: MuiStyleOptions()..media = 'print');
+
+UiFactory<NoPropsBoxWrapperProps> BoxWithMedia = uiFunction(
+  (props) {
+    final styles = stylesWithMediaOption();
+
+    return (Box()..className = styles['root'])(props.children);
+  },
+  $BoxWithMediaConfig, // ignore: undefined_identifier
+);
+
+final nestedUseStylesParent = makeStyles({
+  'the_parent_class': {
+    'backgroundColor': 'red',
+    'color': '#FFF',
+    ...standardHeightAndWidth,
+  },
+  'the_parent_class_with_background_override': {
+    'backgroundColor': 'orange !important',
+    'color': '#FFF',
+    ...standardHeightAndWidth,
+  },
+});
+
+final nestedUseStylesChild = makeThemedStyles(
+  (theme) => {
+    'the_child_class': {
+      'backgroundColor': 'blue',
+      ...standardHeightAndWidth,
+    },
+  },
+  propsBuilder: $NestedBoxWrapperConfig
+      .propsFactory, // ignore: invalid_use_of_protected_member
+);
+
+class NestedBoxWrapperProps = UiProps with MuiClassesMixin;
+
+UiFactory<NestedBoxWrapperProps> NestedBoxWrapper = uiFunction(
+  (props) {
+    final classes = nestedUseStylesChild(props);
+
+    return (Box()..className = classes['the_child_class'])(props.children);
+  },
+  $NestedBoxWrapperConfig, // ignore: undefined_identifier
+);
+
+mixin ParentBoxWrapperProps on UiProps {
+  Map<String, String> classes;
+}
+
+UiFactory<ParentBoxWrapperProps> ParentBoxWrapper = uiFunction(
+  (props) {
+    final classes = nestedUseStylesParent();
+
+    return Fragment()(
+      (Box()..className = classes['the_parent_class'])(),
+      (NestedBoxWrapper()
+        ..muiClasses = {
+          'the_child_class': classes['the_parent_class']
+        }
+      )('A nested box'),
+      (NestedBoxWrapper()
+        ..muiClasses = {
+          'the_child_class':
+              classes['the_parent_class_with_background_override']
+        }
+      )('A nested box'),
+    );
+  },
+  $ParentBoxWrapperConfig, // ignore: undefined_identifier
+);
diff --git a/app/over_react_redux/todo_client/example/make_styles/container.dart b/app/over_react_redux/todo_client/example/make_styles/container.dart
@@ -0,0 +1,34 @@
+import 'package:over_react/over_react.dart';
+import 'package:react_material_ui/react_material_ui.dart';
+
+part 'container.over_react.g.dart'; // ignore: uri_has_not_been_generated
+
+final useStyles = makeStyles(
+  MuiStyleMap<ContainerWrapperProps>({
+    'newRoot': (props) => ({
+          // Note that the null aware here is essentially serving the purpose of default props
+          // Do we want a better interface for that?
+          'backgroundColor': props.backgroundColor ?? 'gray',
+          'height': 500,
+        })
+  }),
+  propsBuilder: $ContainerWrapperConfig
+      .propsFactory, // ignore: invalid_use_of_protected_member
+);
+
+mixin ContainerWrapperProps on UiProps {
+  String backgroundColor;
+}
+
+UiFactory<ContainerWrapperProps> ContainerWrapper = uiFunction(
+  (props) {
+    final styles = useStyles(props);
+
+    return (Container()
+      ..classes = JsBackedMap.from({
+        'root': styles['newRoot'],
+      })
+    )(props.children);
+  },
+  $ContainerWrapperConfig, // ignore: undefined_identifier
+);
diff --git a/app/over_react_redux/todo_client/example/make_styles/example_entrypoint.dart b/app/over_react_redux/todo_client/example/make_styles/example_entrypoint.dart
@@ -0,0 +1,33 @@
+import 'package:over_react/over_react.dart';
+
+import 'box.dart';
+import 'container.dart';
+
+part 'example_entrypoint.over_react.g.dart'; // ignore: uri_has_not_been_generated
+
+mixin ExampleEntrypointProps on UiProps {}
+
+UiFactory<ExampleEntrypointProps> ExampleEntrypoint = uiFunction(
+  (props) {
+    return Fragment()(
+      ContainerWrapper()(
+        (BoxWrapper()..color = 'blue')(),
+        NoPropsBoxWrapper()(),
+        (FunctionStylesBoxWrapper()
+          ..height = 100
+          ..width = 100
+        )(),
+        FunctionStylesNoPropsBoxWrapper()(),
+      ),
+      (ContainerWrapper()..backgroundColor = 'papayawhip')(
+        OptionsBoxWrapper()(),
+        BoxWithElement()('This box is tied to a custom style element'),
+        BoxWithMedia()(
+          'This box is tied to a Style element has a media attribute',
+        ),
+        ParentBoxWrapper()(),
+      ),
+    );
+  },
+  $ExampleEntrypointConfig, // ignore: undefined_identifier
+);
diff --git a/app/over_react_redux/todo_client/example/make_styles/main.dart b/app/over_react_redux/todo_client/example/make_styles/main.dart
@@ -0,0 +1,13 @@
+import 'dart:html';
+
+import 'package:over_react/react_dom.dart' as react_dom;
+
+import 'example_entrypoint.dart';
+
+main() {
+  final container = querySelector('#example-container');
+
+  final app = ExampleEntrypoint()();
+
+  react_dom.render(app, container);
+}
diff --git a/app/over_react_redux/todo_client/example/make_styles/make_styles_example.html b/app/over_react_redux/todo_client/example/make_styles/make_styles_example.html
@@ -0,0 +1,37 @@
+<!--
+  ~ Copyright 2020 Workiva Inc.
+  ~
+  ~ Licensed 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.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+    <meta charset="utf-8">
+    <title>MUI OverReact Make Styles Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+</head>
+<body>
+<div id="example-container"></div>
+
+<script src="packages/react/react.js"></script>
+<script src="packages/react/react_dom.js"></script>
+<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
+
+<!-- Serve compiled output. -->
+<script defer src="main.dart.js"></script>
+</body>
+</html>