yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

clan-app: Working npm run check in ui-2d folder

Browse Source
This commit is contained in:
Qubasa
2025-06-18 20:31:47 +02:00
parent 83dd36c784
commit a39fe0564d
10 changed files with 5 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
pkgs/clan-app/ui-2d/gtk.webview.js
View File

@@ -1,97 +0,0 @@
/**
* This script generates a custom index.html file for the webview UI.
* It reads the manifest.json file generated by Vite and uses it to generate the HTML file.
* It also processes the CSS files to rewrite the URLs in the CSS files to match the new location of the assets.
* The script is run after the Vite build is complete.
*
* This is necessary because the webview UI is loaded from the local file system and the URLs in the CSS files need to be rewritten to match the new location of the assets.
* The generated index.html file is then used as the entry point for the webview UI.
*/
import fs from "node:fs";
import postcss from "postcss";
import path from "node:path";
import css_url from "postcss-url";
const distPath = path.resolve("dist");
const manifestPath = path.join(distPath, ".vite/manifest.json");
const outputPath = path.join(distPath, "index.html");
fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => {
if (err) {
return console.error("Failed to read manifest:", err);
}
const manifest = JSON.parse(data);
/** @type {{ file: string; name: string; src: string; isEntry: bool; css: string[]; } []} */
const assets = Object.values(manifest);
console.log(`Generate custom index.html from ${manifestPath} ...`);
// Start with a basic HTML structure
let htmlContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webview UI</title>`;
// Add linked stylesheets
assets.forEach((asset) => {
// console.log(asset);
if (asset.src === "index.html") {
asset.css.forEach((cssEntry) => {
// css to be processed
const css = fs.readFileSync(`dist/${cssEntry}`, "utf8");
// process css
postcss()
.use(
css_url({
url: (asset, dir) => {
const res = path.basename(asset.url);
console.log(`Rewriting CSS url(): ${asset.url} to ${res}`);
return res;
},
}),
)
.process(css, {
from: `dist/${cssEntry}`,
to: `dist/${cssEntry}`,
})
.then((result) => {
fs.writeFileSync(`dist/${cssEntry}`, result.css, "utf8");
});
// Extend the HTML content with the linked stylesheet
console.log(`Relinking html css stylesheet: ${cssEntry}`);
htmlContent += `\n <link rel="stylesheet" href="${cssEntry}">`;
});
}
});
htmlContent += `
</head>
<body>
<div id="app"></div>
`;
// Add scripts
assets.forEach((asset) => {
if (asset.file.endsWith(".js")) {
console.log(`Relinking js script: ${asset.file}`);
htmlContent += `\n <script src="${asset.file}"></script>`;
}
});
htmlContent += `
</body>
</html>`;
// Write the HTML file
fs.writeFile(outputPath, htmlContent, (err) => {
if (err) {
console.error("Failed to write custom index.html:", err);
} else {
console.log("Custom index.html generated successfully!");
}
});
});

1
pkgs/clan-app/ui-2d/gtk.webview.js Symbolic link
View File

@@ -0,0 +1 @@
../ui/gtk.webview.js

1
pkgs/clan-app/ui-2d/package-lock.json generated Symbolic link
View File

@@ -0,0 +1 @@
../ui/package-lock.json

1
pkgs/clan-app/ui-2d/package.json Symbolic link
View File

@@ -0,0 +1 @@
../ui/package.json

1
pkgs/clan-app/ui-2d/src/components/RemoteForm.stories.tsx
View File

@@ -6,7 +6,6 @@ import {
RemoteDataSource, RemoteDataSource,
} from "./RemoteForm"; } from "./RemoteForm";
import { createSignal } from "solid-js"; import { createSignal } from "solid-js";
import { fn } from "@storybook/test";
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"; import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
// Default values for the form // Default values for the form

1
pkgs/clan-app/ui-2d/src/components/icon/index.tsx
View File

@@ -89,7 +89,6 @@ const Icon: Component<IconProps> = (props) => {
width={iconProps.size || 16} width={iconProps.size || 16}
height={iconProps.size || 16} height={iconProps.size || 16}
viewBox="0 0 48 48" viewBox="0 0 48 48"
// @ts-expect-error: dont know, fix this type nit later
ref={iconProps.ref} ref={iconProps.ref}
{...iconProps} {...iconProps}
/> />

1
pkgs/clan-app/ui-2d/src/routes/machines/install/hardware-step.tsx
View File

@@ -23,7 +23,6 @@ import {
type RemoteData, type RemoteData,
HostKeyCheck, HostKeyCheck,
} from "@/src/components/RemoteForm"; } from "@/src/components/RemoteForm";
import { ac } from "vitest/dist/chunks/reporters.d.C-cu31ET";
export type HardwareValues = FieldValues & { export type HardwareValues = FieldValues & {
report: boolean; report: boolean;

1
pkgs/clan-app/ui-2d/tailwind Symbolic link
View File

@@ -0,0 +1 @@
../ui/tailwind

322
pkgs/clan-app/ui-2d/tailwind/core-plugin.ts
View File

@@ -1,322 +0,0 @@
import plugin from "tailwindcss/plugin";
import { typography } from "./typography";
// @ts-expect-error: lib of tailwind has no types
import { parseColor } from "tailwindcss/lib/util/color";
/* Converts HEX color to RGB */
const toRGB = (value: string) =>
"rgb(" + parseColor(value).color.join(" ") + ")";
const mkBorderUtils = (
theme: (n: string) => unknown,
prefix: string,
cssProperty: string,
) => ({
// - def colors
[`.${prefix}-def-1`]: {
[cssProperty]: theme("colors.secondary.100"),
},
[`.${prefix}-def-2`]: {
[cssProperty]: theme("colors.secondary.200"),
},
[`.${prefix}-def-3`]: {
[cssProperty]: theme("colors.secondary.300"),
},
[`.${prefix}-def-4`]: {
[cssProperty]: theme("colors.secondary.400"),
},
// - def acc colors
[`.${prefix}-def-acc-1`]: {
[cssProperty]: theme("colors.secondary.500"),
},
[`.${prefix}-def-acc-2`]: {
[cssProperty]: theme("colors.secondary.900"),
},
[`.${prefix}-def-acc-3`]: {
[cssProperty]: theme("colors.secondary.900"),
},
[`.${prefix}-def-acc-4`]: {
[cssProperty]: theme("colors.secondary.950"),
},
// - inverse colors
[`.${prefix}-inv-1`]: {
[cssProperty]: theme("colors.secondary.700"),
},
[`.${prefix}-inv-2`]: {
[cssProperty]: theme("colors.secondary.800"),
},
[`.${prefix}-inv-3`]: {
[cssProperty]: theme("colors.secondary.900"),
},
[`.${prefix}-inv-4`]: {
[cssProperty]: theme("colors.secondary.950"),
},
// - inverse acc
[`.${prefix}-inv-acc-1`]: {
[cssProperty]: theme("colors.secondary.300"),
},
[`.${prefix}-inv-acc-2`]: {
[cssProperty]: theme("colors.secondary.200"),
},
[`.${prefix}-inv-acc-3`]: {
[cssProperty]: theme("colors.secondary.100"),
},
[`.${prefix}-inv-acc-4`]: {
[cssProperty]: theme("colors.secondary.50"),
},
[`.${prefix}-int-1`]: {
[cssProperty]: theme("colors.info.500"),
},
[`.${prefix}-int-2`]: {
[cssProperty]: theme("colors.info.600"),
},
[`.${prefix}-int-3`]: {
[cssProperty]: theme("colors.info.700"),
},
[`.${prefix}-int-4`]: {
[cssProperty]: theme("colors.info.800"),
},
[`.${prefix}-semantic-1`]: {
[cssProperty]: theme("colors.error.500"),
},
[`.${prefix}-semantic-2`]: {
[cssProperty]: theme("colors.error.600"),
},
[`.${prefix}-semantic-3`]: {
[cssProperty]: theme("colors.error.700"),
},
[`.${prefix}-semantic-4`]: {
[cssProperty]: theme("colors.error.800"),
},
});
export default plugin.withOptions(
(_options = {}) =>
({ addUtilities, theme, addVariant, e }) => {
// @ts-expect-error: lib of tailwind has no types
addVariant("popover-open", ({ modifySelectors, separator }) => {
// @ts-expect-error: lib of tailwind has no types
modifySelectors(({ className }) => {
return `.${e(`popover-open${separator}${className}`)}:popover-open`;
});
});
addUtilities({
// Background colors
// default
".bg-def-1": {
backgroundColor: theme("colors.white"),
},
".bg-def-2": {
backgroundColor: theme("colors.secondary.50"),
},
".bg-def-3": {
backgroundColor: theme("colors.secondary.100"),
},
".bg-def-4": {
backgroundColor: theme("colors.secondary.200"),
},
// default accessible
".bg-def-acc-1": {
backgroundColor: theme("colors.primary.50"),
},
".bg-def-acc-2": {
backgroundColor: theme("colors.secondary.100"),
},
".bg-def-acc-3": {
backgroundColor: theme("colors.secondary.200"),
},
".bg-def-acc-4": {
backgroundColor: theme("colors.secondary.300"),
},
// bg inverse
".bg-inv-1": {
backgroundColor: theme("colors.primary.600"),
},
".bg-inv-2": {
backgroundColor: theme("colors.primary.700"),
},
".bg-inv-3": {
backgroundColor: theme("colors.primary.800"),
},
".bg-inv-4": {
backgroundColor: theme("colors.primary.900"),
},
// bg inverse accessible
".bg-inv-acc-1": {
backgroundColor: theme("colors.secondary.500"),
},
".bg-inv-acc-2": {
backgroundColor: theme("colors.secondary.600"),
},
".bg-inv-acc-3": {
backgroundColor: theme("colors.secondary.700"),
},
".bg-inv-acc-4": {
backgroundColor: theme("colors.secondary.900"),
},
// bg inverse accent
".bg-semantic-1": {
backgroundColor: theme("colors.error.50"),
},
".bg-semantic-2": {
backgroundColor: theme("colors.error.100"),
},
".bg-semantic-3": {
backgroundColor: theme("colors.error.200"),
},
".bg-semantic-4": {
backgroundColor: theme("colors.error.300"),
},
// Text colors
".fg-def-1": {
color: theme("colors.secondary.950"),
},
".fg-def-2": {
color: theme("colors.secondary.900"),
},
".fg-def-3": {
color: theme("colors.secondary.700"),
},
".fg-def-4": {
color: theme("colors.secondary.400"),
},
// fg inverse
".fg-inv-1": {
color: theme("colors.white"),
},
".fg-inv-2": {
color: theme("colors.secondary.100"),
},
".fg-inv-3": {
color: theme("colors.secondary.300"),
},
".fg-inv-4": {
color: theme("colors.secondary.400"),
},
".fg-semantic-1": {
color: theme("colors.error.500"),
},
".fg-semantic-2": {
color: theme("colors.error.600"),
},
".fg-semantic-3": {
color: theme("colors.error.700"),
},
".fg-semantic-4": {
color: theme("colors.error.800"),
},
...mkBorderUtils(theme, "border", "borderColor"),
...mkBorderUtils(theme, "border-b", "borderBottom"),
...mkBorderUtils(theme, "border-t", "borderTop"),
...mkBorderUtils(theme, "border-l", "borderLeft"),
...mkBorderUtils(theme, "border-r", "borderRight"),
// Example: dark mode utilities (all elements within <html class="dark"> )
// ".dark .bg-def-1": {
// backgroundColor: theme("colors.black"),
// },
// ".dark .bg-def-2": {
// backgroundColor: theme("colors.primary.900"),
// },
// ".dark .bg-def-3": {
// backgroundColor: theme("colors.primary.800"),
// },
// ".dark .bg-def-4": {
// backgroundColor: theme("colors.primary.700"),
// },
// ".dark .bg-def-5": {
// backgroundColor: theme("colors.primary.600"),
// },
});
// add more base styles
},
// add configuration which is merged with the final config
() => ({
theme: {
extend: {
colors: {
white: toRGB("#ffffff"),
black: toRGB("#000000"),
primary: {
50: toRGB("#f4f9f9"),
100: toRGB("#dbeceb"),
200: toRGB("#b6d9d6"),
300: toRGB("#8abebc"),
400: toRGB("#478585"),
500: toRGB("#526f6f"),
600: toRGB("#4b6767"),
700: toRGB("#345253"),
800: toRGB("#2b4647"),
900: toRGB("#203637"),
950: toRGB("#162324"),
},
secondary: {
50: toRGB("#f7f9fA"),
100: toRGB("#e7f2f4"),
200: toRGB("#d8e8eb"),
300: toRGB("#afc6ca"),
400: toRGB("#90b2b7"),
500: toRGB("#7b9b9f"),
600: toRGB("#4f747A"),
700: toRGB("#415e63"),
800: toRGB("#446065"),
900: toRGB("#2c4347"),
950: toRGB("#0d1416"),
},
info: {
50: toRGB("#eff9ff"),
100: toRGB("#dff2ff"),
200: toRGB("#b8e8ff"),
300: toRGB("#78d6ff"),
400: toRGB("#2cc0ff"),
500: toRGB("#06aaf1"),
600: toRGB("#006ca7"),
700: toRGB("#006ca7"),
800: toRGB("#025b8a"),
900: toRGB("#084c72"),
950: toRGB("#06304b"),
},
error: {
50: toRGB("#fcf3f8"),
100: toRGB("#f9eaf4"),
200: toRGB("#f5d5e9"),
300: toRGB("#ea9ecb"),
400: toRGB("#e383ba"),
500: toRGB("#d75d9f"),
600: toRGB("#c43e81"),
700: toRGB("#a82e67"),
800: toRGB("#8c2855"),
900: toRGB("#75264a"),
950: toRGB("#461129"),
},
},
boxShadow: {
"input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637",
"button-primary":
"2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
"button-primary-hover":
"2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
"button-primary-focus":
"0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-border-def-sem-inf-1, #06AAF1), 2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
"button-primary-active":
"0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), -2px -2px 0px 0px var(--clr-bg-inv-acc-1, #7B9B9F) inset",
"button-secondary":
"-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px white inset",
"button-secondary-hover":
"-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px #FFF inset",
"button-secondary-focus":
"0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-border-def-sem-inf-1, #06AAF1), -2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px #FFF inset",
"button-secondary-active":
"0px 0px 0px 1px white, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), 2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
},
},
...typography,
},
}),
);

22
pkgs/clan-app/ui-2d/tailwind/typography.ts
View File

@@ -1,22 +0,0 @@
import defaultTheme from "tailwindcss/defaultTheme";
import type { Config } from "tailwindcss";
export const typography: Partial<Config["theme"]> = {
fontFamily: {
sans: ["Archivo SemiCondensed", ...defaultTheme.fontFamily.sans],
},
fontSize: {
...defaultTheme.fontSize,
title: ["1.125rem", { lineHeight: "124%" }],
"title-m": ["1.25rem", { lineHeight: "124%" }],
"title-l": ["1.375rem", { lineHeight: "124%" }],
label: ["0.8125rem", { lineHeight: "100%" }],
"label-s": ["0.75rem", { lineHeight: "100%" }],
"label-xs": ["0.6875rem", { lineHeight: "124%" }],
},
// textColor: {
// ...defaultTheme.textColor,
// primary: "#0D1416",
// secondary: "#2C4347",
// },
} as const;

2
pkgs/clan-app/ui-2d/tsconfig.json
View File

@@ -8,7 +8,7 @@
"esModuleInterop": true, "esModuleInterop": true,
"jsx": "preserve", "jsx": "preserve",
"jsxImportSource": "solid-js", "jsxImportSource": "solid-js",
"types": ["vite-plugin-solid-svg/types-component-solid", "vite/client"], "types": ["vite/client", "vite-plugin-solid-svg/types-component-solid"],
"noEmit": true, "noEmit": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"allowJs": true, "allowJs": true,