Add Expo and Next examples apps

.github/workflows/website.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Upload build artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./apps/website/build
+          path: ./packages/website/build
 
   deploy:
     needs: build

README.md

@@ -12,14 +12,17 @@ Development monorepo for "React Strict DOM".
   * Contains workflows used by GitHub Actions.
   * Contains issue templates.
 * `apps`
-  * Applications.
-  * [examples](https://github.com/facebook/react-strict-dom/blob/main/apps/examples)
-  * [website](https://github.com/facebook/react-strict-dom/blob/main/apps/website)
+  * Example applications using React Strict DOM.
+  * [example-ui](https://github.com/facebook/react-strict-dom/blob/main/apps/example-ui)
+  * [expo-app](https://github.com/facebook/react-strict-dom/blob/main/apps/expo)
+  * [nextjs-app](https://github.com/facebook/react-strict-dom/blob/main/apps/nextjs)
+  * [platform-tests](https://github.com/facebook/react-strict-dom/blob/main/apps/platform-tests)
 * `packages`
   * Contains the individual packages managed in the monorepo.
   * [benchmarks](https://github.com/facebook/react-strict-dom/blob/main/packages/benchmarks)
   * [react-strict-dom](https://github.com/facebook/react-strict-dom/blob/main/packages/react-strict-dom) ([docs](https://facebook.github.io/react-strict-dom/))
   * [scripts](https://github.com/facebook/react-strict-dom/blob/main/packages/scripts)
+  * [website](https://github.com/facebook/react-strict-dom/blob/main/packages/website)
 * `tools`
   * Tools used by the monorepo (pre-commit tasks, etc.)
 

apps/example-ui/Button/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+
+/**
+ * Example of a cross-platform button.
+ */
+export function Button(props) {
+  return (
+    <html.button style={styles.pressable}>
+      <html.span style={styles.text}>{props.children}</html.span>
+      <html.span style={styles.text}>(shared)</html.span>
+    </html.button>
+  );
+}
+
+const styles = css.create({
+  pressable: {
+    alignSelf: 'flex-start',
+    backgroundColor: 'darkgreen',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    display: 'flex',
+    gap: '0.25rem',
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  text: {
+    color: 'white',
+    fontFamily: 'Arial',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+});

apps/example-ui/NativeForkButton/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+
+/**
+ * Example of a cross-platform button.
+ */
+export function NativeForkButton(props) {
+  return (
+    <html.button style={styles.pressable}>
+      <html.span style={styles.text}>{props.children}</html.span>
+      <html.span style={styles.text}>(shared)</html.span>
+    </html.button>
+  );
+}
+
+const styles = css.create({
+  pressable: {
+    alignSelf: 'flex-start',
+    backgroundColor: 'darkgreen',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    display: 'flex',
+    gap: '0.25rem',
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  text: {
+    color: 'white',
+    fontFamily: 'Arial',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+});

apps/example-ui/NativeForkButton/index.native.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+/**
+ * Example of a native-fork, where the default is cross-platform.
+ */
+export function NativeForkButton(props) {
+  return (
+    <Pressable style={styles.pressable}>
+      <Text style={styles.text}>{props.children} (native)</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignSelf: 'flex-start',
+    backgroundColor: 'darkgreen',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  text: {
+    color: 'white',
+    fontFamily: 'Arial',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+});

apps/example-ui/PlatformButton/index.native.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+/**
+ * Example of a platform-specific button. Here we use
+ * Pressable but it could be a custom native component too.
+ */
+export function PlatformButton(props) {
+  return (
+    <Pressable style={styles.pressable}>
+      <Text style={styles.text}>{props.children} (native)</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignSelf: 'flex-start',
+    backgroundColor: 'darkgreen',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  text: {
+    color: 'white',
+    fontFamily: 'Arial',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+});

apps/example-ui/PlatformButton/index.web.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+
+/**
+ * Example of a platform-specific button. Here we use
+ * Pressable but it could be a custom native component too.
+ */
+export function PlatformButton(props) {
+  return (
+    <button style={styles.pressable} type="button">
+      <span style={styles.text}>{props.children} (web)</span>
+    </button>
+  );
+}
+
+const styles = {
+  pressable: {
+    backgroundColor: 'darkgreen',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  text: {
+    color: 'white',
+    fontFamily: 'Arial',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+};

apps/example-ui/PlatformShell/index.native.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+
+export function PlatformShell(props) {
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <View style={styles.headingContainer}>
+          <Text style={styles.heading}>App Shell: Native ({Platform.OS})</Text>
+        </View>
+        {props.children}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  headingContainer: {
+    backgroundColor: '#e9f7fb',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: '#ccc',
+    marginBottom: 16,
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  heading: {
+    fontFamily: 'Arial',
+    fontSize: 24,
+    fontWeight: 'normal',
+    margin: 0,
+    padding: 0
+  }
+});

apps/example-ui/PlatformShell/index.web.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+
+export function PlatformShell(props) {
+  return (
+    <div>
+      <div style={styles.headingContainer}>
+        <h1 style={styles.heading}>App Shell: Web</h1>
+      </div>
+      {props.children}
+    </div>
+  );
+}
+
+const styles = {
+  headingContainer: {
+    backgroundColor: '#e9f7fb',
+    borderBottom: '1px solid #ccc',
+    marginBottom: '1rem',
+    padding: '0.5rem 2rem'
+  },
+  heading: {
+    fontFamily: 'Arial',
+    fontSize: '2rem',
+    fontWeight: 'normal',
+    margin: 0,
+    padding: 0
+  }
+};

apps/example-ui/README.md

@@ -0,0 +1,3 @@
+# example-ui
+
+Example UI shared by example apps

apps/example-ui/WebForkButton/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+
+/**
+ * Example of a cross-platform button.
+ */
+export function WebForkButton(props) {
+  return (
+    <html.button style={styles.pressable}>
+      <html.span style={styles.text}>{props.children}</html.span>
+      <html.span style={styles.text}>(shared)</html.span>
+    </html.button>
+  );
+}
+
+const styles = css.create({
+  pressable: {
+    alignSelf: 'flex-start',
+    backgroundColor: 'darkgreen',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    display: 'flex',
+    gap: '0.25rem',
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  text: {
+    color: 'white',
+    fontFamily: 'Arial',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+});

apps/example-ui/WebForkButton/index.web.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+
+/**
+ * Example of a web-fork, where the default is cross-platform.
+ */
+export function WebForkButton(props) {
+  return (
+    <button style={styles.pressable} type="button">
+      <span style={styles.text}>{props.children} (web)</span>
+    </button>
+  );
+}
+
+const styles = {
+  pressable: {
+    backgroundColor: 'darkgreen',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    paddingBlock: 8,
+    paddingInline: 32
+  },
+  text: {
+    color: 'white',
+    fontFamily: 'Arial',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  }
+};