web support

nandorojo · May 8, 2023 · 6cd08e0 · 6cd08e0
1 parent 29cbe1c
commit 6cd08e0
Show file tree

Hide file tree

Showing 16 changed files with 4,488 additions and 217 deletions.
diff --git a/README.md b/README.md
@@ -5,16 +5,14 @@ Cross-platform toasts for React Native, powered by native elements.
 - [Install](#installation)
 - [Usage](#api)
 
-## Toasts
+## Alerts
 
 https://user-images.githubusercontent.com/13172299/202289223-8a333223-3afa-49c4-a001-a70c76150ef0.mp4
 
-## Alerts
+## ...and Toasts
 
 https://user-images.githubusercontent.com/13172299/231801324-3f0858a6-bd61-4d74-920f-4e77b80d26c1.mp4
 
-
-
 ## Context
 
 See this
@@ -28,7 +26,10 @@ On iOS, it wraps [`SPIndicator`](https://github.com/ivanvorobei/SPIndicator) and
 [`SPAlert`](https://github.com/ivanvorobei/SPAlert).
 
 On Android, it wraps `ToastAndroid` from `react-native`. `Burnt.alert()` falls
-back to `Burnt.toast()` on Android.
+back to `Burnt.toast()` on Android. This may change in a future version.
+
+On Web, it wraps [`sonner`](https://github.com/emilkowalski/sonner) by Emil
+Kowalski.
 
 Burnt works with both the old & new architectures. It's built on top of JSI,
 thanks to Expo's new module system.
@@ -42,17 +43,13 @@ thanks to Expo's new module system.
 - Overlays on top of native iOS modals
 - Loading alerts
 
-
 ## Modals
 
-Displaying toasts on top of modals has always been an issue in React Native. With Burnt, this works out of the box.
-
-
+Displaying toasts on top of modals has always been an issue in React Native.
+With Burnt, this works out of the box.
 
 https://user-images.githubusercontent.com/13172299/231801096-2894fbf3-4df7-45d7-9c72-f80d36fd45ef.mp4
 
-
-
 ## Usage
 
 ```tsx
@@ -72,8 +69,7 @@ You can also `Burnt.alert()` and `Burnt.dismissAllAlerts()`.
 - [x] iOS support
 - [x] Android support
 - [x] Custom iOS icons
-- [ ] Web support (could be cool to use Radix UI...but maybe I'll leave that
-      part up to Zeego)
+- [x] Web support
 
 Chances are, I'll keep this lib to iOS & Android only, and then another library
 can consume it to build a broader API out on the JS side with Web support, such
@@ -121,6 +117,28 @@ npx expo run:ios
 The config plugin ensures that your iOS app has at least iOS 13 as a deployment
 target, which is required for Burnt (as well as Expo SDK 47+).
 
+### Web Support
+
+To enable Web support, you need to add the `<Toaster />` to the root of your
+app. If you're using Next.js, add this into your `_app.tsx` component.
+
+```tsx
+// _app.tsx
+import { Toaster } from "burnt/web";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <Toaster position='bottom-right' />
+    </>
+  );
+}
+```
+
+To configure your `Toaster`, please reference the `sonner`
+[docs](https://github.com/emilkowalski/sonner/tree/main#theme).
+
 ### Plain React Native
 
 ```sh
@@ -138,7 +156,8 @@ cd ../..
 yarn
 ```
 
-Be sure to follow the [expo](#expo) instructions too.
+Be sure to also follow the [expo](#expo) instructions and [web](#web-support)
+instructions.
 
 ## API
 
@@ -150,35 +169,36 @@ https://user-images.githubusercontent.com/13172299/202275423-300671e5-3918-4d5d-
 
 ```tsx
 Burnt.toast({
-  title: 'Congrats!', // required
+  title: "Congrats!", // required
 
-  preset: 'done',     // or "error", "none", "custom"
+  preset: "done", // or "error", "none", "custom"
 
-  message: '',        // optional
+  message: "", // optional
 
-  haptic: 'none',      // or "success", "warning", "error"
+  haptic: "none", // or "success", "warning", "error"
 
-  duration: 2,         // duration in seconds
+  duration: 2, // duration in seconds
 
   shouldDismissByDrag: true,
 
-  from: 'bottom', // ios only, "top" or "bottom"
+  from: "bottom", // ios only, "top" or "bottom"
 
   // optionally customize layout
   layout: {
     iconSize: {
       height: 24,
       width: 24,
-    }
+    },
   },
   icon: {
     ios: {
       // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
       name: "checkmark.seal",
       color: "#1D9BF0",
     },
+    web: <Icon />,
   },
-})
+});
 ```
 
 ### `alert`
@@ -215,11 +235,14 @@ export const alert = () => {
         name: "checkmark.seal",
         color: "#1D9BF0",
       },
+      web: <Icon />,
     },
   });
 };
 ```
 
+On Web, this will display a regular toast. This may change in the future.
+
 ### `dismissAllAlerts()`
 
 Does what you think it does! In the future, I'll allow async spinners for

diff --git a/example/App.tsx b/example/App.tsx
@@ -1,8 +1,16 @@
-import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 
 import * as Burnt from "burnt";
 import { useState } from "react";
 import { StatusBar } from "expo-status-bar";
+import { Toaster } from "burnt/web";
 
 export default function App() {
   const [modal, setModal] = useState(false);
@@ -69,6 +77,7 @@ export default function App() {
                 name: "checkmark.seal",
                 color: "#1D9BF0",
               },
+              web: <WebIcon />,
             },
           });
         }}
@@ -129,7 +138,9 @@ export default function App() {
                 name: "circle",
                 color: "#F7A51D",
               },
+              web: <WebIcon />,
             },
+            duration: Infinity,
           });
         }}
       >
@@ -139,27 +150,30 @@ export default function App() {
   );
 
   return (
-    <View style={styles.container}>
-      <StatusBar style="light" />
-      {content}
-      <View style={{ height: 16 }} />
-      <Text
-        style={[styles.text, styles.purple]}
-        onPress={async () => {
-          setModal(true);
-        }}
-      >
-        Open Modal
-      </Text>
-      <Modal
-        presentationStyle="formSheet"
-        onRequestClose={() => setModal(false)}
-        visible={modal}
-        animationType="slide"
-      >
-        <View style={[styles.container]}>{content}</View>
-      </Modal>
-    </View>
+    <>
+      <View style={styles.container}>
+        <StatusBar style='light' />
+        {content}
+        <View style={{ height: 16 }} />
+        <Text
+          style={[styles.text, styles.purple]}
+          onPress={async () => {
+            setModal(true);
+          }}
+        >
+          Open Modal
+        </Text>
+        <Modal
+          presentationStyle='formSheet'
+          onRequestClose={() => setModal(false)}
+          visible={modal}
+          animationType='slide'
+        >
+          <View style={[styles.container]}>{content}</View>
+        </Modal>
+      </View>
+      <Toaster theme='dark' />
+    </>
   );
 }
 
@@ -198,3 +212,24 @@ const styles = StyleSheet.create({
   yellow: { backgroundColor: "#2C2100", color: "#F5D90A" },
   blue: { backgroundColor: "#0A1A2C", color: "#4CB5FF" },
 });
+
+const WebIcon = () => {
+  if (Platform.OS !== "web") return null;
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    >
+      <path d='m14 12-8.5 8.5a2.12 2.12 0 1 1-3-3L11 9'></path>
+      <path d='M15 13 9 7l4-4 6 6h3a8 8 0 0 1-7 7z'></path>
+    </svg>
+  );
+};
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -1,16 +1,17 @@
-const path = require('path');
+const path = require("path");
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
     plugins: [
       [
-        'module-resolver',
+        "module-resolver",
         {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
+          extensions: [".tsx", ".ts", ".js", ".json"],
           alias: {
             // For development, we want to alias the library to the source
-            'burnt': path.join(__dirname, '..', 'src', 'index.ts'),
+            "burnt/web": path.join(__dirname, "..", "src", "web.tsx"),
+            burnt$: path.join(__dirname, "..", "src", "index.ts"),
           },
         },
       ],

diff --git a/example/package.json b/example/package.json
@@ -8,13 +8,14 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/webpack-config": "^0.17.2",
     "expo": "~47.0.6",
+    "expo-splash-screen": "~0.17.5",
+    "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
-    "react-native-web": "~0.18.9",
-    "expo-splash-screen": "~0.17.5",
-    "expo-status-bar": "~1.4.2"
+    "react-native-web": "~0.18.9"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",