@l10nmonster/server 3.0.0-alpha.1

package/README.md

@@ -0,0 +1,101 @@
+# @l10nmonster/server
+
+L10n Monster Manager UI - Web-based interface for managing localization projects and translation workflows.
+
+## Installation
+
+```bash
+npm install @l10nmonster/server
+```
+
+## Usage
+
+Start the server with API only:
+
+```bash
+l10n serve --port 9691
+```
+
+Start the server with web UI:
+
+```bash
+l10n serve --port 9691 --ui
+```
+
+## Features
+
+### Web UI
+
+Modern React-based interface built with:
+- **Material-UI**: Professional design system
+- **React Router**: Client-side routing
+- **Vite**: Fast development and build tooling
+- **Responsive Design**: Works on desktop and mobile
+
+### API Endpoints
+
+- `GET /api/status` - Translation status and project overview
+- `GET /api/untranslated/:sourceLang/:targetLang` - Untranslated content for language pairs
+- `GET /api/tm/stats/:sourceLang/:targetLang` - Translation memory statistics
+
+### Pages
+
+- **Home**: Project overview and status dashboard
+- **Untranslated**: Browse untranslated content by language pair
+- **Translation Memory**: View and manage translation memory statistics
+- **404**: Error handling for unknown routes
+
+## Development
+
+### Start Development Server
+
+```bash
+npm run dev
+```
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+### Preview Production Build
+
+```bash
+npm run preview
+```
+
+## Configuration
+
+The server supports:
+- **Custom Port**: Specify listening port with `--port` option
+- **UI Toggle**: Enable/disable web interface with `--ui` flag
+- **CORS**: Cross-Origin Resource Sharing enabled for API access
+- **Static Serving**: Production-ready static file serving
+
+## Architecture
+
+- **Express.js**: Backend API server
+- **React 19**: Modern frontend framework
+- **Material-UI v7**: Component library and theming
+- **Client-Side Routing**: Single-page application with React Router
+- **Mock Data**: Development-friendly mock data system
+
+## Dependencies
+
+### Backend
+- `express`: Web application framework
+- `cors`: Cross-Origin Resource Sharing
+- `open`: Automatic browser launching
+
+### Frontend
+- `react` & `react-dom`: Core React libraries
+- `@mui/material` & `@mui/icons-material`: Material Design components
+- `@emotion/react` & `@emotion/styled`: CSS-in-JS styling
+- `react-router-dom`: Client-side routing
+
+### Development
+- `vite`: Build tool and development server
+- `@vitejs/plugin-react`: React integration for Vite
+- `vitest`: Testing framework
+- `@testing-library/*`: React testing utilities

package/index.js

@@ -0,0 +1,69 @@
+import express from 'express';
+import cors from 'cors';
+import path from 'path';
+import open from 'open';
+import * as mockData from './mockData.js'; // Import named exports, add .js extension
+
+export default class serve {
+    static help = {
+        description: 'starts the L10n Monster server.',
+        options: [
+            [ '--port <number>', 'listen to specified port' ],
+            [ '--ui', 'also serve a web frontend' ],
+        ]
+    };
+
+    static async action(mm, options) {
+        const port = options.port ?? 9691;
+        const app = express();
+
+        // === Middleware ===
+        app.use(cors());
+        app.use(express.json());
+
+        // === API Routes ===
+        const apiRouter = express.Router();
+
+        // GET /api/status
+        apiRouter.get('/status', async (req, res) => {
+            try {
+                const status = await mm.getTranslationStatus()
+                res.json(status);
+            } catch (error) {
+                console.error('Error fetching status: ', error);
+                res.status(500).json({ message: 'Problems fetching status data' });
+            }
+        });
+
+        // GET /api/untranslated/:sourceLang/:targetLang
+        apiRouter.get('/untranslated/:sourceLang/:targetLang', (req, res) => {
+            const { sourceLang, targetLang } = req.params;
+            const pairKey = `${sourceLang}_${targetLang}`;
+            const content = mockData.untranslatedContent[pairKey] || [];
+            res.json(content);
+        });
+
+        // GET /api/tm/stats/:sourceLang/:targetLang
+        apiRouter.get('/tm/stats/:sourceLang/:targetLang', (req, res) => {
+            const { sourceLang, targetLang } = req.params;
+            const pairKey = `${sourceLang}_${targetLang}`;
+            const tmInfo = mockData.tmData[pairKey] || { summary: { totalUnits: 0, lastUpdated: 'N/A' }, units: [] };
+            res.json(tmInfo);
+        });
+
+        // Mount the API router under the /api prefix
+        app.use('/api', apiRouter);
+
+        if (options.ui) {
+            const uiDistPath = path.join(import.meta.dirname, 'ui', 'dist');
+            app.use(express.static(uiDistPath)); // rest of dist files
+            app.get('/*splat', (req, res) => res.sendFile(path.join(uiDistPath, 'index.html'))); // fallback for Client-Side Routing
+        }
+
+        // === Start Server ===
+        app.listen(port, async () => {
+            console.log(`🚀 L10n Monster Server listening on port ${port}`);
+            options.ui && await open(`http://localhost:${port}`);
+        });
+    }
+}

package/mockData.js

@@ -0,0 +1,67 @@
+// server/data/mockData.js
+
+// Use 'export const' for each piece of data
+
+export const languagePairs = [
+  { source: 'en-us', target: 'fr-fr', sourceName: 'English (US)', targetName: 'French (FR)', sourceFlag: '🇺🇸', targetFlag: '🇫🇷' },
+  { source: 'en-us', target: 'de-de', sourceName: 'English (US)', targetName: 'German (DE)', sourceFlag: '🇺🇸', targetFlag: '🇩🇪' },
+  { source: 'es-es', target: 'en-gb', sourceName: 'Spanish (ES)', targetName: 'English (UK)', sourceFlag: '🇪🇸', targetFlag: '🇬🇧' },
+];
+
+export const projectsData = {
+  'en-us_fr-fr': {
+    'Website': [
+      { id: 'proj1', name: 'Q3 Homepage Update', status: 'In Progress', progress: 80, totalWords: 1500, translatedWords: 1200, untranslatedWords: 300, dueDate: '2023-12-15' },
+      { id: 'proj2', name: 'Blog Feature Launch', status: 'Needs Translation', progress: 0, totalWords: 500, translatedWords: 0, untranslatedWords: 500, dueDate: '2023-12-20' },
+    ],
+    'Mobile App (iOS)': [
+      { id: 'proj3', name: 'v2.5 String Updates', status: 'Completed', progress: 100, totalWords: 850, translatedWords: 850, untranslatedWords: 0, dueDate: '2023-11-30' },
+    ]
+  },
+  'en-us_de-de': {
+     'Website': [
+       { id: 'proj4', name: 'Q3 Homepage Update', status: 'Needs Review', progress: 100, totalWords: 1500, translatedWords: 1500, untranslatedWords: 0, dueDate: '2023-12-15' },
+     ],
+     'Marketing Docs': [
+       { id: 'proj5', name: 'Winter Sale Brochure', status: 'Needs Translation', progress: 0, totalWords: 2000, translatedWords: 0, untranslatedWords: 2000, dueDate: '2023-12-10' },
+     ]
+  },
+   'es-es_en-gb': {
+     'General': [
+       { id: 'proj6', name: 'Support Articles Q4', status: 'In Progress', progress: 50, totalWords: 5000, translatedWords: 2500, untranslatedWords: 2500, dueDate: '2024-01-10' },
+     ]
+   }
+};
+
+export const untranslatedContent = {
+  'en-us_fr-fr': [
+    { id: 'str1', sourceText: 'Welcome to our new feature!', contextKey: 'homepage.welcome_banner', channel: 'Website', project: 'Q3 Homepage Update', dateAdded: '2023-11-15' },
+    { id: 'str2', sourceText: 'Click here to learn more.', contextKey: 'button.learn_more', channel: 'Website', project: 'Q3 Homepage Update', dateAdded: '2023-11-15' },
+    { id: 'str3', sourceText: 'Update your profile settings.', contextKey: 'profile.update_prompt', channel: 'Mobile App (iOS)', project: 'v2.5 String Updates', dateAdded: '2023-11-10' },
+    { id: 'str4', sourceText: 'Are you sure you want to delete?', contextKey: 'dialog.delete_confirm', channel: 'Mobile App (iOS)', project: 'v2.5 String Updates', dateAdded: '2023-11-10' },
+    { id: 'str5', sourceText: 'Read our latest blog post on AI trends.', contextKey: 'blog.latest_post_title', channel: 'Website', project: 'Blog Feature Launch', dateAdded: '2023-11-18' },
+  ],
+  'en-us_de-de': [
+    { id: 'str6', sourceText: 'Discover our winter collection.', contextKey: 'marketing.winter_headline', channel: 'Marketing Docs', project: 'Winter Sale Brochure', dateAdded: '2023-11-20' },
+    { id: 'str7', sourceText: 'Save up to 30%!', contextKey: 'marketing.winter_discount', channel: 'Marketing Docs', project: 'Winter Sale Brochure', dateAdded: '2023-11-20' },
+  ],
+};
+
+export const tmData = {
+  'en-us_fr-fr': {
+    summary: { totalUnits: 15830, lastUpdated: '2023-11-20' },
+    units: [
+      { id: 'tm1', sourceText: 'Save Changes', targetText: 'Enregistrer les modifications', contextKey: 'button.save', project: 'Q2 Settings Update', dateModified: '2023-06-10' },
+      { id: 'tm2', sourceText: 'Cancel', targetText: 'Annuler', contextKey: 'button.cancel', project: 'Q2 Settings Update', dateModified: '2023-06-10' },
+      { id: 'tm3', sourceText: 'Welcome back, {user}!', targetText: 'Bon retour, {user} !', contextKey: 'header.greeting', project: 'Initial Launch', dateModified: '2023-01-15' },
+      { id: 'tm4', sourceText: 'View Details', targetText: 'Voir les détails', contextKey: 'link.view_details', project: 'Product Page v1', dateModified: '2023-03-22' },
+    ]
+  },
+  'en-us_de-de': {
+     summary: { totalUnits: 12105, lastUpdated: '2023-11-18' },
+     units: [
+       { id: 'tm5', sourceText: 'Save Changes', targetText: 'Änderungen speichern', contextKey: 'button.save', project: 'Q2 Settings Update', dateModified: '2023-06-10' },
+       { id: 'tm6', sourceText: 'Cancel', targetText: 'Abbrechen', contextKey: 'button.cancel', project: 'Q2 Settings Update', dateModified: '2023-06-10' },
+     ]
+  },
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@l10nmonster/server",
+    "version": "3.0.0-alpha.1",
+    "description": "L10n Monster Manager UI",
+    "type": "module",
+    "main": "index.js",
+    "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^7.0.2",
+        "@mui/material": "^7.0.2",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/user-event": "^14",
+        "cors": "^2.8.5",
+        "dotenv": "^16.5.0",
+        "express": "^5.1.0",
+        "open": "^10.1.1",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.5.2",
+        "web-vitals": "^5"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "node --test"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.3.0",
+        "@vitejs/plugin-react": "^4.4.1",
+        "jsdom": "^26.1.0",
+        "vite": "^6.3.3",
+        "vitest": "^3.1.2"
+    }
+}

package/ui/dist/assets/index-CIfVvUo9.css

@@ -0,0 +1 @@
+body{margin:0;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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}