feat: initialize landing application with Vite and Mantine configuration

2026-04-06 12:11:17 +07:00
parent 988826ac8e
commit 8c7b6d3017
16 changed files with 307 additions and 43 deletions
@@ -0,0 +1,5 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@repo/eslint-config/react.js'],
+};
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Eigen — Company Profile</title>
+    <meta name="description" content="Eigen — Enterprise-grade solutions for modern businesses. Discover our products, services, and vision." />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,30 @@
+{
+  "name": "landing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --clearScreen false",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint \"src/**/*.ts\""
+  },
+  "dependencies": {
+    "@repo/ui": "workspace:*",
+    "@repo/utils": "workspace:*",
+    "@tailwindcss/vite": "^4.1.18",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint": "^8.57.1",
+    "typescript": "5.5.4",
+    "vite": "^5.1.4"
+  }
+}
@@ -0,0 +1,37 @@
+import { ThemeProvider } from '@repo/ui/provider';
+import { Button } from '@repo/ui/components';
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <div className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-gray-950 via-gray-900 to-gray-800 text-white">
+        <div className="mx-auto max-w-3xl px-6 text-center">
+          <h1 className="text-5xl font-bold tracking-tight sm:text-6xl">
+            Hello from{' '}
+            <span className="bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">
+              Landing Page
+            </span>
+          </h1>
+
+          <p className="mt-6 text-lg leading-8 text-gray-300">
+            Enterprise-grade solutions for modern businesses.
+            This page is served from{' '}
+            <code className="rounded bg-gray-700/50 px-2 py-0.5 text-sm font-mono text-blue-300">
+              apps/landing
+            </code>{' '}
+            on port <strong>5174</strong>.
+          </p>
+
+          <div className="mt-10 flex items-center justify-center gap-4">
+            <Button>Get Started</Button>
+            <Button variant="outline">Learn More</Button>
+          </div>
+
+          <p className="mt-12 text-xs text-gray-500">
+            ✅ @repo/ui workspace link verified — Button component rendered successfully.
+          </p>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import '@repo/ui/theme.css';
+@source "../../../packages/ui/src";
@@ -0,0 +1,10 @@
+import './main.css';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app';
+
+createRoot(document.getElementById('app')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,7 @@
+{
+  "extends": "@repo/typescript-config/react-app.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 3000,
+    strictPort: true, // Evacuated from 517x range to avoid electron-vite port collision.
+  },
+});
@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react';
+import { useIsElectron } from './use-is-electron';

 // ─── Types ──────────────────────────────────────────────────────

@@ -50,7 +51,7 @@ export function useElectronPrinter(): UseElectronPrinterReturn {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

-  const isElectron = typeof window !== 'undefined' && !!window.electronAPI;
+  const isElectron = useIsElectron();

  const refreshPrinters = useCallback(async (): Promise<ElectronPrinterInfo[]> => {
    if (!window.electronAPI) {
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
+import { useIsElectron } from './use-is-electron';

 // ─── Types ──────────────────────────────────────────────────────

@@ -64,7 +65,7 @@ export function useElectronUpdater(): UseElectronUpdaterReturn {
  const [updateInfo, setUpdateInfo] = useState<ElectronUpdateInfo | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

-  const isElectron = typeof window !== 'undefined' && !!window.electronAPI;
+  const isElectron = useIsElectron();

  useEffect(() => {
    if (!window.electronAPI) return;
@@ -0,0 +1,7 @@
+/**
+ * A utility hook to determine if the React application is running
+ * inside the Electron desktop wrapper or a standard web browser.
+ */
+export function useIsElectron(): boolean {
+  return typeof window !== 'undefined' && !!window.electronAPI;
+}
@@ -4,4 +4,8 @@ import tailwindcss from '@tailwindcss/vite';

 export default defineConfig({
  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+    strictPort: true, // Fail if 5173 is in use. Electron NEEDS this exact port.
+  },
 });