feat(#10): initial basic web support

Author: mateusz1913

.gitignore

@@ -50,6 +50,7 @@ project.xcworkspace
 build/
 packages/*/lib/
 packages/*/build/
+.rnlegal/
 
 # Expo example
 examples/expo-example/android

examples/expo-example/index.js

@@ -1,3 +1,4 @@
+import '@expo/metro-runtime';
 import { registerRootComponent } from 'expo';
 
 import App from './App';

examples/expo-example/package.json

@@ -7,18 +7,22 @@
     "expo": "expo",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web",
+    "web": "react-native-legal && expo start --web",
+    "react-native-legal": "react-native-legal",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@expo/metro-runtime": "~4.0.1",
     "expo": "~52.0.36",
     "expo-build-properties": "~0.13.2",
     "expo-splash-screen": "~0.29.22",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-native": "0.76.7",
     "react-native-legal": "workspace:*",
-    "react-native-legal-common-example-ui": "workspace:*"
+    "react-native-legal-common-example-ui": "workspace:*",
+    "react-native-web": "~0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/react-native-legal/bin/index.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+const fs = require('node:fs');
+const path = require('node:path');
+
+const { scanDependencies } = require('@callstack/licenses');
+
+const repoRootPath = path.resolve(process.cwd());
+const packageJsonPath = path.join(repoRootPath, 'package.json');
+
+if (!fs.existsSync(packageJsonPath)) {
+  console.error(`package.json not found at ${packageJsonPath}`);
+  process.exit(1);
+}
+
+const licenses = scanDependencies(packageJsonPath);
+
+const payload = Object.entries(licenses)
+  .map(([packageKey, licenseObj]) => {
+    return {
+      name: licenseObj.name,
+      version: licenseObj.version,
+      content: licenseObj.content ?? licenseObj.type ?? 'UNKNOWN',
+      packageKey,
+      ...(licenseObj.url && { source: licenseObj.url }),
+    };
+  })
+  .toSorted((first, second) => {
+    if (!first.version || !second.version) {
+      return first.name > second.name;
+    }
+
+    if (first.name !== second.name) {
+      return first.name > second.name ? 1 : -1;
+    }
+
+    const [firstMajor, firstMinor, firstPatch] = first.version.split('.').filter(Boolean);
+    const [secondMajor, secondMinor, secondPatch] = second.version.split('.').filter(Boolean);
+
+    return `${first.name}.${firstMajor.padStart(10, '0')}.${(firstMinor ?? '0').padStart(10, '0')}.${(
+      firstPatch ?? '0'
+    ).padStart(10, '0')}` >
+      `${second.name}.${secondMajor.padStart(10, '0')}.${(secondMinor ?? '0').padStart(10, '0')}.${(
+        secondPatch ?? '0'
+      ).padStart(10, '0')}`
+      ? 1
+      : -1;
+  });
+
+const rnLegalConfigPath = path.join(__dirname, '..', '.rnlegal');
+
+if (!fs.existsSync(rnLegalConfigPath)) {
+  fs.mkdirSync(rnLegalConfigPath);
+}
+
+const rnLegalConfigLibrariesPath = path.join(rnLegalConfigPath, 'libraries.json');
+
+fs.writeFileSync(rnLegalConfigLibrariesPath, JSON.stringify(payload), { encoding: 'utf-8' });
+
+console.log(`✅ Output written to ${rnLegalConfigLibrariesPath}`);

packages/react-native-legal/package.json

@@ -12,6 +12,7 @@
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
+  "bin": "./bin/index.js",
   "react-native": "src/index",
   "source": "src/index",
   "repository": {

packages/react-native-legal/src/ReactNativeLegal.web.ts

@@ -0,0 +1,95 @@
+import type { LibrariesResult } from './NativeReactNativeLegal';
+
+export const ReactNativeLegal = {
+  getLibrariesAsync: () => {
+    const payload = require(`react-native-legal/.rnlegal/libraries.json`);
+
+    return Promise.resolve<LibrariesResult>({
+      data: payload.map((library: any) => ({
+        id: library.packageKey,
+        name: library.packageKey,
+        licenses: [{ licenseContent: library.content }],
+      })),
+    });
+  },
+  launchLicenseListScreen: (licenseHeaderText?: string) => {
+    const payload = require(`react-native-legal/.rnlegal/libraries.json`);
+
+    const main = document.createElement('main');
+
+    main.style.display = 'flex';
+    main.style.alignSelf = 'stretch';
+    main.style.flex = '1';
+    main.style.flexDirection = 'column';
+    main.style.overflow = 'scroll';
+    main.style.width = '100%';
+
+    const closeBtn = document.createElement('button');
+
+    closeBtn.innerText = 'Close';
+
+    const headerContainer = document.createElement('header');
+
+    headerContainer.style.display = 'flex';
+    headerContainer.style.flexDirection = 'row';
+    headerContainer.style.alignItems = 'center';
+    headerContainer.style.justifyContent = 'space-between';
+    headerContainer.appendChild(closeBtn);
+
+    main.appendChild(headerContainer);
+
+    if (licenseHeaderText) {
+      const header = document.createElement('h1');
+
+      header.innerText = licenseHeaderText;
+
+      headerContainer.insertBefore(header, closeBtn);
+    } else {
+      headerContainer.style.flexDirection = 'row-reverse';
+    }
+
+    payload.forEach((library: any) => {
+      const summary = document.createElement('summary');
+
+      summary.style.fontSize = '20px';
+      summary.style.margin = '10px 0px';
+      summary.innerText = library.packageKey;
+
+      const content = document.createElement('p');
+
+      content.innerText = library.content;
+
+      const details = document.createElement('details');
+
+      details.appendChild(summary);
+      details.appendChild(content);
+
+      main.appendChild(details);
+    });
+
+    const dialog = document.createElement('dialog');
+
+    dialog.id = 'react-native-legal-dialog';
+    dialog.style.height = '90%';
+    dialog.style.width = '90%';
+    dialog.appendChild(main);
+
+    document.querySelector('body')?.appendChild(dialog);
+
+    closeBtn.addEventListener(
+      'click',
+      () => {
+        document.querySelector('body')?.removeChild(dialog);
+      },
+      { once: true },
+    );
+    dialog.addEventListener(
+      'close',
+      () => {
+        document.querySelector('body')?.removeChild(dialog);
+      },
+      { once: true },
+    );
+    dialog.showModal();
+  },
+};