plusui-native 0.2.0

package/templates/react/CMakeLists.txt.template

@@ -0,0 +1,151 @@
+cmake_minimum_required(VERSION 3.16)
+project({{PROJECT_NAME}} VERSION {{PROJECT_VERSION}} LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD 20)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
+
+# Platform detection
+if(WIN32)
+    add_definitions(-DPLUSUI_EDGE)
+elseif(APPLE)
+    add_definitions(-DPLUSUI_COCOA)
+else()
+    add_definitions(-DPLUSUI_GTK)
+endif()
+
+# Development mode flag
+option(PLUSUI_DEV_MODE "Enable development mode (connect to Vite dev server)" OFF)
+if(PLUSUI_DEV_MODE)
+    add_definitions(-DPLUSUI_DEV_MODE)
+endif()
+
+# Find PlusUI Core library
+# Strategy: Check multiple locations for the Core library
+set(PLUSUI_FOUND FALSE)
+
+# Location 1: Local development (sibling to project inside PlusUI repo)
+set(PLUSUI_CORE_DEV "${CMAKE_SOURCE_DIR}/../Core")
+if(EXISTS "${PLUSUI_CORE_DEV}/CMakeLists.txt")
+    message(STATUS "Found PlusUI Core at: ${PLUSUI_CORE_DEV}")
+    add_subdirectory("${PLUSUI_CORE_DEV}" "${CMAKE_BINARY_DIR}/plusui-core")
+    set(PLUSUI_FOUND TRUE)
+endif()
+
+# Location 2: Installed via npm (node_modules)
+if(NOT PLUSUI_FOUND)
+    set(PLUSUI_CORE_NPM "${CMAKE_SOURCE_DIR}/node_modules/plusui-native-core/Core")
+    if(EXISTS "${PLUSUI_CORE_NPM}/CMakeLists.txt")
+        message(STATUS "Found PlusUI Core in node_modules: ${PLUSUI_CORE_NPM}")
+        add_subdirectory("${PLUSUI_CORE_NPM}" "${CMAKE_BINARY_DIR}/plusui-core")
+        set(PLUSUI_FOUND TRUE)
+    endif()
+endif()
+
+# Location 3: Parent directory development structure
+if(NOT PLUSUI_FOUND)
+    set(PLUSUI_CORE_PARENT "${CMAKE_SOURCE_DIR}/../../Core")
+    if(EXISTS "${PLUSUI_CORE_PARENT}/CMakeLists.txt")
+        message(STATUS "Found PlusUI Core at: ${PLUSUI_CORE_PARENT}")
+        add_subdirectory("${PLUSUI_CORE_PARENT}" "${CMAKE_BINARY_DIR}/plusui-core")
+        set(PLUSUI_FOUND TRUE)
+    endif()
+endif()
+
+if(NOT PLUSUI_FOUND)
+    message(FATAL_ERROR "
+    PlusUI Core not found!
+
+    Make sure you have run 'npm install' or that this project is inside the PlusUI repository.
+
+    Searched locations:
+      - ${PLUSUI_CORE_DEV}
+      - ${PLUSUI_CORE_NPM}
+      - ${PLUSUI_CORE_PARENT}
+    ")
+endif()
+
+# Create the executable
+add_executable({{PROJECT_NAME}} main.cpp)
+
+# Optional: Add your own C++ files here
+# file(GLOB_RECURSE MY_SOURCES "features/*.cpp")
+# target_sources({{PROJECT_NAME}} PRIVATE ${MY_SOURCES})
+
+# Link PlusUI library
+target_link_libraries({{PROJECT_NAME}} PRIVATE plusui)
+target_include_directories({{PROJECT_NAME}} PRIVATE ${CMAKE_SOURCE_DIR})
+
+# Platform-specific setup
+if(WIN32)
+    # Windows: WebView2
+    # Try to find WebView2 SDK headers
+    find_path(WEBVIEW2_INCLUDE_DIR
+        NAMES webview2.h
+        PATHS
+            "${CMAKE_SOURCE_DIR}/packages/Microsoft.Web.WebView2/build/native/include"
+            "${CMAKE_BINARY_DIR}/packages/Microsoft.Web.WebView2/build/native/include"
+            "$ENV{USERPROFILE}/.nuget/packages/microsoft.web.webview2/1.0.2903.40/build/native/include"
+            "$ENV{NUGET_PACKAGES}/microsoft.web.webview2/1.0.2903.40/build/native/include"
+            "C:/Program Files (x86)/Microsoft EdgeWebView/runtimes/win-x64/native"
+            "C:/Program Files/Microsoft EdgeWebView/runtimes/win-x64/native"
+    )
+    
+    if(WEBVIEW2_INCLUDE_DIR)
+        message(STATUS "Found WebView2 headers at: ${WEBVIEW2_INCLUDE_DIR}")
+        target_include_directories({{PROJECT_NAME}} PRIVATE ${WEBVIEW2_INCLUDE_DIR})
+    else()
+        message(WARNING "WebView2 headers not found. Building may fail.")
+        message(STATUS "Please install WebView2 SDK via NuGet:")
+        message(STATUS "  nuget install Microsoft.Web.WebView2 -OutputDirectory packages")
+    endif()
+    
+    target_link_libraries({{PROJECT_NAME}} PRIVATE ole32 shell32 shlwapi user32 version)
+
+    # Set subsystem to Windows for release builds (no console window)
+    if(NOT PLUSUI_DEV_MODE)
+        set_target_properties({{PROJECT_NAME}} PROPERTIES
+            WIN32_EXECUTABLE TRUE
+        )
+    endif()
+elseif(APPLE)
+    # macOS: WebKit
+    find_library(WEBKIT_LIBRARY WebKit REQUIRED)
+    find_library(COCOA_LIBRARY Cocoa REQUIRED)
+    target_link_libraries({{PROJECT_NAME}} PRIVATE ${WEBKIT_LIBRARY} ${COCOA_LIBRARY})
+
+    # Create app bundle for production
+    if(NOT PLUSUI_DEV_MODE)
+        set_target_properties({{PROJECT_NAME}} PROPERTIES
+            MACOSX_BUNDLE TRUE
+            MACOSX_BUNDLE_BUNDLE_NAME "{{PROJECT_NAME}}"
+            MACOSX_BUNDLE_BUNDLE_VERSION "{{PROJECT_VERSION}}"
+            MACOSX_BUNDLE_GUI_IDENTIFIER "com.plusui.{{PROJECT_NAME_LOWER}}"
+        )
+    endif()
+else()
+    # Linux: GTK + WebKitGTK
+    find_package(PkgConfig REQUIRED)
+    pkg_check_modules(GTK3 REQUIRED gtk+-3.0)
+    pkg_check_modules(WEBKIT2 REQUIRED webkit2gtk-4.0)
+    target_include_directories({{PROJECT_NAME}} PRIVATE ${GTK3_INCLUDE_DIRS} ${WEBKIT2_INCLUDE_DIRS})
+    target_link_libraries({{PROJECT_NAME}} PRIVATE ${GTK3_LIBRARIES} ${WEBKIT2_LIBRARIES})
+endif()
+
+# Copy frontend dist files to build directory after build
+if(EXISTS "${CMAKE_SOURCE_DIR}/frontend/dist")
+    add_custom_command(TARGET {{PROJECT_NAME}} POST_BUILD
+        COMMAND ${CMAKE_COMMAND} -E make_directory "$<TARGET_FILE_DIR:{{PROJECT_NAME}}>/frontend"
+        COMMAND ${CMAKE_COMMAND} -E copy_directory
+            "${CMAKE_SOURCE_DIR}/frontend/dist"
+            "$<TARGET_FILE_DIR:{{PROJECT_NAME}}>/frontend"
+        COMMENT "Copying frontend files to build directory"
+    )
+endif()
+
+# Set output directories for organized builds
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/bin")
+set(CMAKE_LIBRARY_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
+set(CMAKE_ARCHIVE_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
+
+

package/templates/react/frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{PROJECT_NAME}}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/react/frontend/package.json.template

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME_LOWER}}-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "plusui-native-core": "{{PLUSUI_CORE_PATH}}"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  }
+}
+

package/templates/react/frontend/src/App.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { win, browser, router, app } from 'plusui-native-core';
+
+// Define routes for your app (optional - for SPA routing)
+const routes = {
+  '/': 'http://localhost:5173',
+  '/settings': 'http://localhost:5173/settings',
+  '/about': 'http://localhost:5173/about',
+};
+
+function App() {
+  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
+  const [windowPos, setWindowPos] = useState({ x: 0, y: 0 });
+  const [currentUrl, setCurrentUrl] = useState('');
+  const [canGoBack, setCanGoBack] = useState(false);
+  const [canGoForward, setCanGoForward] = useState(false);
+
+  useEffect(() => {
+    // Setup routes
+    router.setRoutes(routes);
+    
+    // Listen for navigation changes
+    const unsub = browser.onNavigate((url) => {
+      setCurrentUrl(url);
+      browser.canGoBack().then(setCanGoBack);
+      browser.canGoForward().then(setCanGoForward);
+    });
+    
+    // Get initial state
+    browser.getUrl().then(setCurrentUrl);
+    browser.canGoBack().then(setCanGoBack);
+    browser.canGoForward().then(setCanGoForward);
+    
+    return unsub;
+  }, []);
+
+  const handleMinimize = async () => await win.minimize();
+  const handleMaximize = async () => await win.maximize();
+  const handleClose = async () => await win.close();
+  const handleGetSize = async () => {
+    const size = await win.getSize();
+    setWindowSize(size);
+  };
+  const handleGetPosition = async () => {
+    const pos = await win.getPosition();
+    setWindowPos(pos);
+  };
+
+  // Browser navigation
+  const handleGoBack = async () => await browser.goBack();
+  const handleGoForward = async () => await browser.goForward();
+  const handleReload = async () => await browser.reload();
+
+  // Router navigation
+  const handleGoHome = async () => await router.push('/');
+  const handleGoSettings = async () => await router.push('/settings');
+
+  // App control
+  const handleQuit = async () => await app.quit();
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>{{PROJECT_NAME}}</h1>
+        <p>Built with PlusUI Framework</p>
+      </header>
+
+      <main className="app-content">
+        <div className="card">
+          <h2>Window Controls</h2>
+          <div className="button-group">
+            <button onClick={handleMinimize} className="button">Minimize</button>
+            <button onClick={handleMaximize} className="button">Maximize</button>
+            <button onClick={handleClose} className="button button-danger">Close</button>
+          </div>
+        </div>
+
+        <div className="card">
+          <h2>Window Size</h2>
+          <button onClick={handleGetSize} className="button">Get Size</button>
+          {windowSize.width > 0 && (
+            <p className="info-text">Size: {windowSize.width} x {windowSize.height}</p>
+          )}
+        </div>
+
+        <div className="card">
+          <h2>Window Position</h2>
+          <div className="button-group">
+            <button onClick={handleGetPosition} className="button">Get Position</button>
+            <button onClick={() => win.setPosition(100, 100)} className="button">Move Left</button>
+            <button onClick={() => win.setPosition(800, 100)} className="button">Move Right</button>
+          </div>
+          {windowPos.x !== 0 && (
+            <p className="info-text">Position: {windowPos.x}, {windowPos.y}</p>
+          )}
+        </div>
+
+        <div className="card">
+          <h2>Browser Navigation</h2>
+          <p className="info-text">Current: {currentUrl}</p>
+          <div className="button-group">
+            <button onClick={handleGoBack} className="button" disabled={!canGoBack}>Back</button>
+            <button onClick={handleGoForward} className="button" disabled={!canGoForward}>Forward</button>
+            <button onClick={handleReload} className="button">Reload</button>
+          </div>
+        </div>
+
+        <div className="card">
+          <h2>Router (SPA Navigation)</h2>
+          <div className="button-group">
+            <button onClick={handleGoHome} className="button">Home /</button>
+            <button onClick={handleGoSettings} className="button">Settings</button>
+          </div>
+          <p style={{ fontSize: '0.85em', color: '#666', marginTop: '10px' }}>
+            Define routes with <code>router.setRoutes({'{ ... }'})</code> then navigate with <code>router.push('/path')</code>
+          </p>
+        </div>
+
+        <div className="card">
+          <h2>App Control</h2>
+          <button onClick={handleQuit} className="button button-danger">Quit App</button>
+        </div>
+
+        <div className="info">
+          <p>Edit <code>frontend/src/App.tsx</code> to modify the UI.</p>
+          <p>Edit <code>main.cpp</code> to add C++ functionality.</p>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default App;
+

package/templates/react/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/app.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/templates/react/frontend/src/styles/app.css

@@ -0,0 +1,140 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  min-height: 100vh;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-header {
+  padding: 3rem 2rem;
+  text-align: center;
+}
+
+.app-header h1 {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.app-header p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.app-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  gap: 2rem;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 1rem;
+  padding: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  min-width: 400px;
+  text-align: center;
+}
+
+.card h2 {
+  margin-bottom: 1rem;
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.button {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.button:active {
+  transform: translateY(0);
+}
+
+.button-danger {
+  background: rgba(231, 76, 60, 0.6);
+  border-color: rgba(231, 76, 60, 0.8);
+}
+
+.button-danger:hover {
+  background: rgba(231, 76, 60, 0.8);
+}
+
+.info-text {
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.info {
+  text-align: center;
+  opacity: 0.8;
+}
+
+.info p {
+  margin: 0.5rem 0;
+}
+
+.info code {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: 'Courier New', monospace;
+}

package/templates/react/frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/react/frontend/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/react/frontend/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+    strictPort: true,
+  },
+});