Switch to React Native macOS

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: Build macOS Editor DMG
+name: Build macOS Editor App
 
 on:
   push:
@@ -28,19 +28,19 @@ jobs:
           cd macos-editor
           npm install
 
-      - name: Build DMG
+      - name: Build React Native macOS App
         run: |
           cd macos-editor
-          ./build.sh
+          npm run build
 
       - name: Debug build artifacts
         run: ls -la macos-editor/dist/
 
       - name: Upload artifact
         uses: actions/upload-artifact@v2
         with:
-          name: macos-editor-dmg
-          path: macos-editor/dist/*.dmg
+          name: macos-editor-app
+          path: macos-editor/dist/*.app
 
   release:
     runs-on: macos-latest
@@ -56,13 +56,13 @@ jobs:
         run: |
           cd macos-editor
           npm install
-      - name: Build DMG
+      - name: Build React Native macOS App
         run: |
           cd macos-editor
-          ./build.sh
-      - name: Upload DMG to GitHub Release
+          npm run build
+      - name: Upload App to GitHub Release
         uses: softprops/action-gh-release@v1
         with:
-          files: macos-editor/dist/*.dmg
+          files: macos-editor/dist/*.app
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

build.sh

@@ -7,7 +7,7 @@ MODE=$1
 
 if [ -z "$MODE" ] || [ "$MODE" == "dev" ]; then
   echo "Iniciando en modo de desarrollo..."
-  npm run electron:dev
+  npx react-native run-macos
 elif [ "$MODE" == "dmg" ]; then
   echo "Generando DMG para macOS..."
 
@@ -20,7 +20,7 @@ elif [ "$MODE" == "dmg" ]; then
     fi
 
     # Generar el DMG
-    npm run build:dmg
+    npx react-native run-macos --configuration Release
   else
     echo "Error: La generación de DMG solo es posible en macOS."
     echo "Actualmente estás ejecutando en: $OSTYPE"
@@ -29,7 +29,7 @@ elif [ "$MODE" == "dmg" ]; then
   fi
 elif [ "$MODE" == "preview" ]; then
   echo "Iniciando vista previa de la aplicación..."
-  npm run electron:preview
+  npx react-native run-macos --configuration Release
 else
   echo "Uso: $0 [dev|dmg|preview]"
   echo "  dev    : Inicia la aplicación en modo de desarrollo (por defecto)."

docs/dependencies/dependencies.en.md

@@ -2,4 +2,4 @@
 
 The macOS editor is built using the following dependencies:
 - [Tiptap](https://github.com/ueberdosis/tiptap)
-- [Electron](https://www.electronjs.org/)
+- [React Native macOS](https://github.com/microsoft/react-native-macos)

docs/dependencies/dependencies.es.md

@@ -2,4 +2,4 @@
 
 El editor de macOS está construido usando las siguientes dependencias:
 - [Tiptap](https://github.com/ueberdosis/tiptap)
-- [Electron](https://www.electronjs.org/)
+- [React Native macOS](https://github.com/microsoft/react-native-macos)

docs/installation/installation.en.md

@@ -14,13 +14,9 @@
    ```sh
    npm install
    ```
-3. Build the React bundle:
+3. Start the React Native macOS app:
    ```sh
-   npx esbuild ./index.jsx --bundle --outfile=./bundle.js --format=iife
-   ```
-4. Start the Electron app:
-   ```sh
-   npm start
+   npx react-native run-macos
    ```
 
 ## Build DMG for macOS
@@ -29,24 +25,18 @@
    ```sh
    npm install
    ```
-2. Build the React bundle:
-   ```sh
-   npx esbuild ./index.jsx --bundle --outfile=./bundle.js --format=iife
-   ```
-3. Build the DMG:
+2. Build the React Native macOS app:
    ```sh
-   npm run build
-   npx electron-builder --mac
+   npx react-native run-macos --configuration Release
    ```
-   The DMG file will be in the `dist/` folder.
 
 ## Automated Script
 
 You can use the script:
 
 - For local development:
   ```sh
-  ./build.sh local
+  ./build.sh dev
   ```
 - To generate the DMG:
   ```sh

docs/installation/installation.es.md

@@ -14,13 +14,9 @@
    ```sh
    npm install
    ```
-3. Genera el bundle de React:
+3. Inicia la aplicación React Native macOS:
    ```sh
-   npx esbuild ./index.jsx --bundle --outfile=./bundle.js --format=iife
-   ```
-4. Inicia la aplicación Electron:
-   ```sh
-   npm start
+   npx react-native run-macos
    ```
 
 ## Generar DMG para macOS
@@ -29,24 +25,18 @@
    ```sh
    npm install
    ```
-2. Genera el bundle de React:
-   ```sh
-   npx esbuild ./index.jsx --bundle --outfile=./bundle.js --format=iife
-   ```
-3. Construye el instalador DMG:
+2. Construye la aplicación React Native macOS:
    ```sh
-   npm run build
-   npx electron-builder --mac
+   npx react-native run-macos --configuration Release
    ```
-   El archivo DMG estará en la carpeta `dist/`.
 
 ## Script automatizado
 
 Puedes usar el script:
 
 - Para desarrollo local:
   ```sh
-  ./build.sh local
+  ./build.sh dev
   ```
 - Para generar el DMG:
   ```sh

docs/project-overview/project-overview.en.md

@@ -5,10 +5,7 @@ This project is organized as follows:
 - **macos-editor/**
   - `index.html`: Main HTML file where the React app is mounted.
   - `index.jsx`: React entry point. Defines the editor and toolbar using Tiptap and React.
-  - `bundle.js`: Bundle generated from `index.jsx` using esbuild. Loaded by the browser/Electron.
-  - `main.js`: Main Electron script. Controls the main window, splash, and app menu.
-  - `renderer.js`: (Obsolete) Old editor logic, now replaced by React.
-  - `splash.html`: Splash screen shown at app startup.
+  - `bundle.js`: Bundle generated from `index.jsx` using esbuild. Loaded by the browser.
   - `build.sh`: Script to automate install, build, and DMG packaging.
   - `package.json`: Editor-specific dependencies and scripts.
 - **docs/**: Detailed documentation about installation, dependencies, build, workflows, etc.
@@ -19,5 +16,4 @@ This project is organized as follows:
 
 - **index.html**: Defines the `<div id="app"></div>` container for React and loads the generated bundle.
 - **index.jsx**: Contains the main React component, Tiptap configuration, and toolbar.
-- **main.js**: Initializes the Electron app, manages windows, splash, and menu.
 - **build.sh**: Automates install and build for both development and DMG generation.

docs/project-overview/project-overview.es.md

@@ -5,10 +5,7 @@ Este proyecto está organizado de la siguiente manera:
 - **macos-editor/**
   - `index.html`: Archivo HTML principal donde se monta la app React.
   - `index.jsx`: Punto de entrada de React. Aquí se define el editor y la barra de herramientas usando Tiptap y React.
-  - `bundle.js`: Bundle generado a partir de `index.jsx` usando esbuild. Es el archivo que carga el navegador/Electron.
-  - `main.js`: Script principal de Electron. Controla la ventana principal, el splash y el menú de la app.
-  - `renderer.js`: (Obsoleto) Lógica antigua del editor, ahora reemplazada por React.
-  - `splash.html`: Pantalla de bienvenida (splash) mostrada al iniciar la app.
+  - `bundle.js`: Bundle generado a partir de `index.jsx` usando esbuild. Es el archivo que carga el navegador.
   - `build.sh`: Script para automatizar la instalación, build y empaquetado DMG.
   - `package.json`: Dependencias y scripts específicos del editor.
 - **docs/**: Documentación detallada sobre instalación, dependencias, build, workflows, etc.
@@ -19,5 +16,4 @@ Este proyecto está organizado de la siguiente manera:
 
 - **index.html**: Define el contenedor `<div id="app"></div>` donde se monta la app React y carga el bundle generado.
 - **index.jsx**: Contiene el componente principal de React, la configuración de Tiptap y la barra de herramientas.
-- **main.js**: Inicializa la app Electron, gestiona ventanas, splash y menú.
 - **build.sh**: Permite automatizar la instalación y build tanto para desarrollo como para generar el DMG.

docs/splash/splash-screen.en.md

@@ -1,66 +1,45 @@
 # Splash Screen Functionality
 
-The `macos-editor/main.js` file includes functionality for displaying a splash screen when the macOS editor is launched. The splash screen is displayed for 3 seconds before the main window is shown. The relevant code is as follows:
+The splash screen component is implemented using React in the `src/components/splash-screen/splash-screen.tsx` file. The splash screen is displayed for a minimum of 1.5 seconds before the main application is shown. The relevant code is as follows:
 
-```javascript
-const { app, BrowserWindow } = require('electron');
-const path = require('path');
+```typescript
+import React, { useEffect, useState } from 'react';
+import './splash-screen.scss';
 
-function createSplashWindow() {
-  const splashWindow = new BrowserWindow({
-    width: 400,
-    height: 300,
-    frame: false,
-    alwaysOnTop: true,
-    transparent: true,
-    webPreferences: {
-      nodeIntegration: true,
-      contextIsolation: false
-    }
-  });
-
-  splashWindow.loadFile('splash.html');
-  return splashWindow;
-}
-
-function createWindow () {
-  const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    show: false,
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.js'),
-      nodeIntegration: true,
-      contextIsolation: false
-    }
-  });
-
-  mainWindow.loadFile('index.html');
-
-  mainWindow.once('ready-to-show', () => {
-    setTimeout(() => {
-      splashWindow.close();
-      mainWindow.show();
-    }, 3000); // Show splash screen for 3 seconds
-  });
+interface SplashScreenProps {
+  onComplete: () => void;
+  minimumDisplayTime?: number;
 }
 
-let splashWindow;
-
-app.on('ready', () => {
-  splashWindow = createSplashWindow();
-  createWindow();
-});
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
-});
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  }
-});
+export const SplashScreen: React.FC<SplashScreenProps> = ({ 
+  onComplete, 
+  minimumDisplayTime = 1500 
+}) => {
+  const [shouldHide, setShouldHide] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShouldHide(true);
+      onComplete();
+    }, minimumDisplayTime);
+
+    return () => clearTimeout(timer);
+  }, [minimumDisplayTime, onComplete]);
+
+  return (
+    <div className={`splash-screen ${shouldHide ? 'hidden' : ''}`}>
+      <div className="splash-content">
+        <div className="logo-container">
+          <img src="/images/baobab.png" alt="Pora Logo" className="app-logo" />
+        </div>
+        <h1 className="app-name">Pora</h1>
+        <div className="loading-indicator">
+          <div className="loading-bar">
+            <div className="loading-progress"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 ```