react-native-web-serial-api 0.0.3 → 0.2.0

package/example/package.json

@@ -1,48 +0,0 @@
-{
-  "name": "react-native-web-serial-api-example",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "start": "react-native start",
-    "build:android": "cd android && ./gradlew assembleDebug",
-    "web": "vite",
-    "web:build": "vite build",
-    "web:preview": "vite preview",
-    "lint": "biome check",
-    "format": "biome check --write",
-    "test": "jest"
-  },
-  "dependencies": {
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-native": "0.85.3",
-    "react-native-web": "^0.21.2",
-    "react-native-web-serial-api": "file:.."
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.25.0",
-    "@biomejs/biome": "2.4.16",
-    "@react-native-community/cli": "20.1.3",
-    "@react-native-community/cli-platform-android": "20.1.3",
-    "@react-native/babel-preset": "0.85.3",
-    "@react-native/jest-preset": "0.85.3",
-    "@react-native/metro-config": "0.85.3",
-    "@react-native/typescript-config": "0.85.3",
-    "@testing-library/react-native": "^13.3.3",
-    "@types/react": "^19.2.6",
-    "@types/react-dom": "^19.2.0",
-    "@vitejs/plugin-react": "^6.0.2",
-    "babel-jest": "^29.6.3",
-    "babel-plugin-module-resolver": "^5.0.3",
-    "jest": "^29.6.3",
-    "react-test-renderer": "19.2.3",
-    "typescript": "6.0.3",
-    "vite": "^8.0.0"
-  },
-  "engines": {
-    "node": ">=22"
-  }
-}

package/example/react-native.config.js

@@ -1,17 +0,0 @@
-const path = require('node:path');
-const pkg = require('../package.json');
-
-/**
- * The library lives one level up (repo root) and is installed here as a symlink
- * pointing to an ancestor of this example dir. React Native autolinking skips
- * dependencies whose resolved path is an ancestor of the project, so we map the
- * dependency explicitly to the library's android module. This mirrors what
- * create-react-native-library scaffolds for its example app.
- */
-module.exports = {
-  dependencies: {
-    [pkg.name]: {
-      root: path.join(__dirname, '..'),
-    },
-  },
-};

package/example/src/components/AppBar.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import {
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {colors} from '../theme';
-import {Menu, type MenuItem} from './Menu';
-
-type Props = {
-  title: string;
-  onBack?: () => void;
-  menu?: MenuItem[];
-};
-
-const statusBarHeight =
-  Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0;
-
-export function AppBar({title, onBack, menu}: Props) {
-  const [open, setOpen] = React.useState(false);
-  return (
-    <View style={styles.wrap}>
-      <View style={styles.bar}>
-        {onBack ? (
-          <TouchableOpacity onPress={onBack} style={styles.iconBtn}>
-            <Text style={styles.icon}>←</Text>
-          </TouchableOpacity>
-        ) : null}
-        <Text style={styles.title} numberOfLines={1}>
-          {title}
-        </Text>
-        <View style={styles.spacer} />
-        {menu?.length ? (
-          <TouchableOpacity
-            onPress={() => setOpen(true)}
-            style={styles.iconBtn}>
-            <Text style={styles.icon}>⋮</Text>
-          </TouchableOpacity>
-        ) : null}
-      </View>
-      {menu ? (
-        <Menu visible={open} items={menu} onClose={() => setOpen(false)} />
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  wrap: {backgroundColor: colors.primary, paddingTop: statusBarHeight},
-  bar: {
-    height: 56,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 4,
-  },
-  iconBtn: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {color: colors.onPrimary, fontSize: 22},
-  title: {
-    color: colors.onPrimary,
-    fontSize: 20,
-    fontWeight: '600',
-    marginLeft: 8,
-  },
-  spacer: {flex: 1},
-});

package/example/src/components/Menu.tsx

@@ -1,90 +0,0 @@
-import {
-  Modal,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {colors} from '../theme';
-
-export type MenuItem = {
-  key: string;
-  title: string;
-  checkable?: boolean;
-  checked?: boolean;
-  disabled?: boolean;
-  onPress: () => void;
-};
-
-type Props = {
-  visible: boolean;
-  items: MenuItem[];
-  onClose: () => void;
-};
-
-/** Android-style overflow (⋮) dropdown anchored to the top-right. */
-export function Menu({visible, items, onClose}: Props) {
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="fade"
-      onRequestClose={onClose}>
-      <Pressable style={styles.backdrop} onPress={onClose}>
-        <View style={styles.menu}>
-          <ScrollView>
-            {items.map(item => (
-              <Pressable
-                key={item.key}
-                style={styles.item}
-                disabled={item.disabled}
-                onPress={() => {
-                  onClose();
-                  item.onPress();
-                }}>
-                <Text
-                  style={[styles.itemText, item.disabled && styles.disabled]}>
-                  {item.title}
-                </Text>
-                {item.checkable ? (
-                  <Text style={styles.check}>{item.checked ? '☑' : '☐'}</Text>
-                ) : null}
-              </Pressable>
-            ))}
-          </ScrollView>
-        </View>
-      </Pressable>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    alignItems: 'flex-end',
-    paddingTop: 4,
-    paddingRight: 4,
-  },
-  menu: {
-    minWidth: 220,
-    maxHeight: '80%',
-    backgroundColor: colors.background,
-    borderRadius: 4,
-    paddingVertical: 4,
-    elevation: 8,
-    shadowColor: '#000',
-    shadowOpacity: 0.3,
-    shadowRadius: 6,
-    shadowOffset: {width: 0, height: 2},
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  itemText: {flex: 1, fontSize: 16, color: colors.text},
-  disabled: {color: colors.textSecondary, opacity: 0.5},
-  check: {fontSize: 16, marginLeft: 16, color: colors.text},
-});

package/example/src/components/SingleChoiceDialog.tsx

@@ -1,120 +0,0 @@
-import {
-  Alert,
-  Modal,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
-import {colors} from '../theme';
-
-export type Choice<T> = {label: string; value: T};
-
-type Props<T> = {
-  visible: boolean;
-  title: string;
-  options: Choice<T>[];
-  selected: T;
-  onSelect: (value: T) => void;
-  onClose: () => void;
-  /** When set, shows an "Info" button that pops this message. */
-  infoMessage?: string;
-};
-
-/** Single-choice (radio) dialog, mirroring AlertDialog.setSingleChoiceItems. */
-export function SingleChoiceDialog<T extends string | number>({
-  visible,
-  title,
-  options,
-  selected,
-  onSelect,
-  onClose,
-  infoMessage,
-}: Props<T>) {
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="fade"
-      onRequestClose={onClose}>
-      <Pressable style={styles.backdrop} onPress={onClose}>
-        <Pressable style={styles.card} onPress={() => {}}>
-          <Text style={styles.title}>{title}</Text>
-          <ScrollView style={styles.list}>
-            {options.map(opt => {
-              const isSelected = opt.value === selected;
-              return (
-                <Pressable
-                  key={String(opt.value)}
-                  style={styles.row}
-                  onPress={() => {
-                    onSelect(opt.value);
-                    onClose();
-                  }}>
-                  <Text style={styles.radio}>{isSelected ? '◉' : '◯'}</Text>
-                  <Text style={styles.label}>{opt.label}</Text>
-                </Pressable>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.footer}>
-            {infoMessage ? (
-              <Pressable
-                style={styles.footerBtn}
-                onPress={() => Alert.alert(title, infoMessage)}>
-                <Text style={styles.footerText}>INFO</Text>
-              </Pressable>
-            ) : null}
-            <Pressable style={styles.footerBtn} onPress={onClose}>
-              <Text style={styles.footerText}>CANCEL</Text>
-            </Pressable>
-          </View>
-        </Pressable>
-      </Pressable>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 24,
-  },
-  card: {
-    width: '100%',
-    maxWidth: 360,
-    maxHeight: '80%',
-    backgroundColor: colors.background,
-    borderRadius: 6,
-    paddingVertical: 16,
-    elevation: 12,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: colors.text,
-    paddingHorizontal: 20,
-    paddingBottom: 12,
-  },
-  list: {flexGrow: 0},
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-  },
-  radio: {fontSize: 18, color: colors.primary, marginRight: 16},
-  label: {fontSize: 16, color: colors.text},
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingHorizontal: 12,
-    paddingTop: 8,
-  },
-  footerBtn: {paddingVertical: 8, paddingHorizontal: 12},
-  footerText: {color: colors.primary, fontWeight: '600', fontSize: 14},
-});

package/example/src/screens/ConnectScreen.tsx

@@ -1,195 +0,0 @@
-import React from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import type {SerialPort} from 'react-native-web-serial-api';
-import {AppBar} from '../components/AppBar';
-import {
-  type Choice,
-  SingleChoiceDialog,
-} from '../components/SingleChoiceDialog';
-import {
-  BAUD_RATES,
-  type ConnectionSettings,
-  DATA_BITS,
-  DEFAULT_SETTINGS,
-  FLOW_CONTROL_LABELS,
-  FLOW_CONTROLS,
-  PARITIES,
-  STOP_BITS,
-} from '../settings';
-import {colors} from '../theme';
-
-type Props = {
-  port: SerialPort;
-  initial?: ConnectionSettings;
-  onBack: () => void;
-  onConnect: (settings: ConnectionSettings) => void;
-};
-
-function hex4(n: number | undefined): string {
-  return (n ?? 0).toString(16).toUpperCase().padStart(4, '0');
-}
-
-export function ConnectScreen({port, initial, onBack, onConnect}: Props) {
-  const [settings, setSettings] = React.useState<ConnectionSettings>(
-    initial ?? DEFAULT_SETTINGS,
-  );
-  // Which dropdown's dialog is open (null = none).
-  const [open, setOpen] = React.useState<keyof ConnectionSettings | null>(null);
-
-  const info = port.getInfo();
-
-  const set = <K extends keyof ConnectionSettings>(
-    key: K,
-    value: ConnectionSettings[K],
-  ) => setSettings(s => ({...s, [key]: value}));
-
-  return (
-    <View style={styles.container}>
-      <AppBar title="Connection settings" onBack={onBack} />
-
-      <ScrollView contentContainerStyle={styles.form}>
-        <Text style={styles.device}>
-          {`Vendor ${hex4(info.usbVendorId)}  ·  Product ${hex4(
-            info.usbProductId,
-          )}`}
-        </Text>
-
-        <Dropdown
-          label="Baud rate"
-          value={String(settings.baudRate)}
-          onPress={() => setOpen('baudRate')}
-        />
-        <Dropdown
-          label="Data bits"
-          value={String(settings.dataBits)}
-          onPress={() => setOpen('dataBits')}
-        />
-        <Dropdown
-          label="Stop bits"
-          value={String(settings.stopBits)}
-          onPress={() => setOpen('stopBits')}
-        />
-        <Dropdown
-          label="Parity"
-          value={settings.parity}
-          onPress={() => setOpen('parity')}
-        />
-        <Dropdown
-          label="Flow control"
-          value={FLOW_CONTROL_LABELS[settings.flowControl]}
-          onPress={() => setOpen('flowControl')}
-        />
-
-        <TouchableOpacity
-          style={styles.connectBtn}
-          onPress={() => onConnect(settings)}>
-          <Text style={styles.connectText}>Connect</Text>
-        </TouchableOpacity>
-      </ScrollView>
-
-      <SingleChoiceDialog
-        visible={open === 'baudRate'}
-        title="Baud rate"
-        options={BAUD_RATES.map(b => ({label: String(b), value: b}))}
-        selected={settings.baudRate}
-        onSelect={v => set('baudRate', v)}
-        onClose={() => setOpen(null)}
-      />
-      <SingleChoiceDialog
-        visible={open === 'dataBits'}
-        title="Data bits"
-        options={DATA_BITS.map(b => ({label: String(b), value: b}))}
-        selected={settings.dataBits}
-        onSelect={v => set('dataBits', v as ConnectionSettings['dataBits'])}
-        onClose={() => setOpen(null)}
-      />
-      <SingleChoiceDialog
-        visible={open === 'stopBits'}
-        title="Stop bits"
-        options={STOP_BITS.map(b => ({label: String(b), value: b}))}
-        selected={settings.stopBits}
-        onSelect={v => set('stopBits', v as ConnectionSettings['stopBits'])}
-        onClose={() => setOpen(null)}
-      />
-      <SingleChoiceDialog
-        visible={open === 'parity'}
-        title="Parity"
-        options={PARITIES.map(p => ({label: p, value: p})) as Choice<string>[]}
-        selected={settings.parity}
-        onSelect={v => set('parity', v as ConnectionSettings['parity'])}
-        onClose={() => setOpen(null)}
-      />
-      <SingleChoiceDialog
-        visible={open === 'flowControl'}
-        title="Flow control"
-        options={
-          FLOW_CONTROLS.map(f => ({
-            label: FLOW_CONTROL_LABELS[f],
-            value: f,
-          })) as Choice<string>[]
-        }
-        selected={settings.flowControl}
-        onSelect={v =>
-          set('flowControl', v as ConnectionSettings['flowControl'])
-        }
-        onClose={() => setOpen(null)}
-      />
-    </View>
-  );
-}
-
-function Dropdown({
-  label,
-  value,
-  onPress,
-}: {
-  label: string;
-  value: string;
-  onPress: () => void;
-}) {
-  return (
-    <TouchableOpacity style={styles.row} onPress={onPress}>
-      <Text style={styles.rowLabel}>{label}</Text>
-      <View style={styles.rowValueWrap}>
-        <Text style={styles.rowValue}>{value}</Text>
-        <Text style={styles.caret}>▾</Text>
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {flex: 1, backgroundColor: colors.background},
-  form: {padding: 16},
-  device: {
-    fontSize: 13,
-    color: colors.textSecondary,
-    marginBottom: 16,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 14,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-  },
-  rowLabel: {fontSize: 16, color: colors.text},
-  rowValueWrap: {flexDirection: 'row', alignItems: 'center'},
-  rowValue: {fontSize: 16, color: colors.primary, fontWeight: '600'},
-  caret: {fontSize: 14, color: colors.primary, marginLeft: 8},
-  connectBtn: {
-    marginTop: 28,
-    backgroundColor: colors.primary,
-    borderRadius: 6,
-    paddingVertical: 14,
-    alignItems: 'center',
-  },
-  connectText: {color: colors.onPrimary, fontSize: 16, fontWeight: '600'},
-});