Add examples of default-with-fork components

Author: necolas

apps/example-ui/Button/index.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { css, html } from 'react-strict-dom';
 
 /**
- * Example of a shared button.
+ * Example of a cross-platform button.
  */
 export function Button(props) {
   return (

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/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'
+  }
+};

apps/example-ui/index.js

@@ -8,6 +8,10 @@
 // Examples of shared components
 export { Button } from './Button';
 
+// Examples of default shared with platform forks
+export { NativeForkButton } from './NativeForkButton';
+export { WebForkButton } from './WebForkButton';
+
 // Examples of platform-specific component forks
 export { PlatformButton } from './PlatformButton';
 export { PlatformShell } from './PlatformShell';

apps/expo-app/src/components/App.js

@@ -6,7 +6,13 @@
  */
 
 import * as React from 'react';
-import { Button, PlatformButton, PlatformShell } from 'example-ui';
+import {
+  Button,
+  NativeForkButton,
+  PlatformButton,
+  PlatformShell,
+  WebForkButton
+} from 'example-ui';
 import { html } from 'react-strict-dom';
 
 export default function App() {
@@ -16,6 +22,8 @@ export default function App() {
         <html.p>Hello</html.p>
         <Button>Button</Button>
         <PlatformButton>PlatformButton</PlatformButton>
+        <NativeForkButton>NativeForkButton</NativeForkButton>
+        <WebForkButton>WebForkButton</WebForkButton>
       </PlatformShell>
     </React.StrictMode>
   );

apps/expo-app/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}

apps/nextjs-app/src/app/page.tsx

@@ -1,5 +1,12 @@
+/**
+ * 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 { Button, PlatformButton, PlatformShell } from 'example-ui';
+import { Button, NativeForkButton, PlatformButton, PlatformShell, WebForkButton } from 'example-ui';
 import { html } from 'react-strict-dom';
 
 export default function App() {
@@ -9,6 +16,8 @@ export default function App() {
         <html.p>Hello</html.p>
         <Button>Button</Button>
         <PlatformButton>PlatformButton</PlatformButton>
+        <NativeForkButton>NativeForkButton</NativeForkButton>
+        <WebForkButton>WebForkButton</WebForkButton>
       </PlatformShell>
     </React.StrictMode>
   );