mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-03-29 13:41:51 +02:00
Extract shared UI and theme packages
This commit is contained in:
Gregory Schier
@@ -1,12 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Yaak Proxy</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/main.tsx"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Yaak Proxy</title>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html,
|
||||
body {
|
||||
background-color: #1b1a29;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-base">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/theme.ts"></script>
|
||||
<script type="module" src="/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,95 +1,92 @@
|
||||
:root {
|
||||
color: #f4efe7;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(217, 119, 6, 0.35), transparent 45%),
|
||||
linear-gradient(180deg, #18212b 0%, #0f141a 100%);
|
||||
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@layer base {
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
@apply w-full h-full overflow-hidden text-text bg-surface;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
:root {
|
||||
--font-family-interface: "";
|
||||
--font-family-editor: "";
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
:root {
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
}
|
||||
html[data-platform="linux"] {
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
width: min(680px, 100%);
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(244, 239, 231, 0.12);
|
||||
border-radius: 28px;
|
||||
background: rgba(9, 12, 16, 0.7);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
::selection {
|
||||
@apply bg-selection;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: #f6ad55;
|
||||
}
|
||||
:not(a),
|
||||
:not(input):not(textarea),
|
||||
:not(input):not(textarea)::after,
|
||||
:not(input):not(textarea)::before {
|
||||
@apply select-none cursor-default;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(44px, 8vw, 84px);
|
||||
line-height: 0.95;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
&::placeholder {
|
||||
@apply text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.lede {
|
||||
margin: 20px 0 0;
|
||||
max-width: 48ch;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: rgba(244, 239, 231, 0.78);
|
||||
}
|
||||
a,
|
||||
a[href] * {
|
||||
@apply cursor-pointer !important;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
table th {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
background: #f6ad55;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
:not(iframe) {
|
||||
&::-webkit-scrollbar,
|
||||
&::-webkit-scrollbar-corner {
|
||||
@apply w-[8px] h-[8px] bg-transparent;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #f4efe7;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply bg-text-subtlest rounded-[4px] opacity-20;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
color: rgba(244, 239, 231, 0.88);
|
||||
font-size: 14px;
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
@apply opacity-40 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-scrollbars {
|
||||
&::-webkit-scrollbar-corner,
|
||||
&::-webkit-scrollbar {
|
||||
@apply hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--transition-duration: 100ms ease-in-out;
|
||||
--color-white: 255 100% 100%;
|
||||
--color-black: 255 0% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import "./main.css";
|
||||
import { Button } from "@yaakapp-internal/ui";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { StrictMode } from "react";
|
||||
import { useState } from "react";
|
||||
@@ -45,25 +46,38 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="app-shell">
|
||||
<section className="hero-card">
|
||||
<p className="eyebrow">Monorepo Smoke Test</p>
|
||||
<h1>Yaak Proxy</h1>
|
||||
<p className="lede">
|
||||
This is a minimal proxy app stub running on the new `apps/yaak-proxy`
|
||||
and `crates-tauri/yaak-app-proxy` structure.
|
||||
</p>
|
||||
<div className="controls">
|
||||
<button className="btn" disabled={busy} onClick={startProxy}>
|
||||
Start Proxy
|
||||
</button>
|
||||
<button className="btn ghost" disabled={busy} onClick={stopProxy}>
|
||||
Stop Proxy
|
||||
</button>
|
||||
</div>
|
||||
<div className="status">
|
||||
<span>Status: {status}</span>
|
||||
{port != null ? <span>Port: {port}</span> : null}
|
||||
<main className="h-full w-full overflow-auto p-6">
|
||||
<section className="flex items-start">
|
||||
<div className="flex w-full max-w-xl flex-col gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-text">Yaak Proxy</h1>
|
||||
<p className="mt-2 text-sm text-text-subtle">Status: {status}</p>
|
||||
<p className="mt-1 text-sm text-text-subtle">
|
||||
Port: {port ?? "Not running"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button
|
||||
disabled={busy}
|
||||
onClick={startProxy}
|
||||
size="sm"
|
||||
tone="primary"
|
||||
>
|
||||
Start Proxy
|
||||
</Button>
|
||||
<Button
|
||||
disabled={busy}
|
||||
onClick={stopProxy}
|
||||
size="sm"
|
||||
variant="border"
|
||||
>
|
||||
Stop Proxy
|
||||
</Button>
|
||||
<Button size="sm" type="button">
|
||||
Shared Button
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
"lint": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@yaakapp-internal/theme": "^1.0.0",
|
||||
"@yaakapp-internal/ui": "^1.0.0",
|
||||
"@tauri-apps/api": "^2.9.1",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
|
||||
7
apps/yaak-proxy/postcss.config.cjs
Normal file
7
apps/yaak-proxy/postcss.config.cjs
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require("@tailwindcss/nesting")(require("postcss-nesting")),
|
||||
require("tailwindcss"),
|
||||
require("autoprefixer"),
|
||||
],
|
||||
};
|
||||
7
apps/yaak-proxy/tailwind.config.cjs
Normal file
7
apps/yaak-proxy/tailwind.config.cjs
Normal file
@@ -0,0 +1,7 @@
|
||||
const sharedConfig = require("@yaakapp-internal/tailwind-config");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
...sharedConfig,
|
||||
content: ["./*.{html,ts,tsx}", "../../packages/ui/src/**/*.{ts,tsx}"],
|
||||
};
|
||||
9
apps/yaak-proxy/theme.ts
Normal file
9
apps/yaak-proxy/theme.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import {
|
||||
applyThemeToDocument,
|
||||
defaultDarkTheme,
|
||||
platformFromUserAgent,
|
||||
setPlatformOnDocument,
|
||||
} from "@yaakapp-internal/theme";
|
||||
|
||||
setPlatformOnDocument(platformFromUserAgent(navigator.userAgent));
|
||||
applyThemeToDocument(defaultDarkTheme);
|
||||
@@ -14,9 +14,16 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@yaakapp-internal/theme": ["../../packages/theme/src/index.ts"],
|
||||
"@yaakapp-internal/theme/*": ["../../packages/theme/src/*"],
|
||||
"@yaakapp-internal/ui": ["../../packages/ui/src/index.ts"],
|
||||
"@yaakapp-internal/ui/*": ["../../packages/ui/src/*"],
|
||||
},
|
||||
},
|
||||
"include": ["."],
|
||||
"exclude": ["vite.config.ts"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
"references": [{ "path": "./tsconfig.node.json" }],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user