diff --git a/pkgs/clan-app/ui-2d/gtk.webview.js b/pkgs/clan-app/ui-2d/gtk.webview.js deleted file mode 100644 index e75eecc12..000000000 --- a/pkgs/clan-app/ui-2d/gtk.webview.js +++ /dev/null @@ -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 = ` - - - - - Webview UI`; - - // 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 `; - }); - } - }); - - htmlContent += ` - - -
- `; - // Add scripts - assets.forEach((asset) => { - if (asset.file.endsWith(".js")) { - console.log(`Relinking js script: ${asset.file}`); - htmlContent += `\n `; - } - }); - - htmlContent += ` - -`; - - // 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!"); - } - }); -}); diff --git a/pkgs/clan-app/ui-2d/gtk.webview.js b/pkgs/clan-app/ui-2d/gtk.webview.js new file mode 120000 index 000000000..1f2061406 --- /dev/null +++ b/pkgs/clan-app/ui-2d/gtk.webview.js @@ -0,0 +1 @@ +../ui/gtk.webview.js \ No newline at end of file diff --git a/pkgs/clan-app/ui-2d/package-lock.json b/pkgs/clan-app/ui-2d/package-lock.json new file mode 120000 index 000000000..26aac4762 --- /dev/null +++ b/pkgs/clan-app/ui-2d/package-lock.json @@ -0,0 +1 @@ +../ui/package-lock.json \ No newline at end of file diff --git a/pkgs/clan-app/ui-2d/package.json b/pkgs/clan-app/ui-2d/package.json new file mode 120000 index 000000000..c606d535c --- /dev/null +++ b/pkgs/clan-app/ui-2d/package.json @@ -0,0 +1 @@ +../ui/package.json \ No newline at end of file diff --git a/pkgs/clan-app/ui-2d/src/components/RemoteForm.stories.tsx b/pkgs/clan-app/ui-2d/src/components/RemoteForm.stories.tsx index e88cc5955..9df499beb 100644 --- a/pkgs/clan-app/ui-2d/src/components/RemoteForm.stories.tsx +++ b/pkgs/clan-app/ui-2d/src/components/RemoteForm.stories.tsx @@ -6,7 +6,6 @@ import { RemoteDataSource, } from "./RemoteForm"; import { createSignal } from "solid-js"; -import { fn } from "@storybook/test"; import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"; // Default values for the form diff --git a/pkgs/clan-app/ui-2d/src/components/icon/index.tsx b/pkgs/clan-app/ui-2d/src/components/icon/index.tsx index 8e3df4b8a..36aee57fe 100644 --- a/pkgs/clan-app/ui-2d/src/components/icon/index.tsx +++ b/pkgs/clan-app/ui-2d/src/components/icon/index.tsx @@ -89,7 +89,6 @@ const Icon: Component = (props) => { width={iconProps.size || 16} height={iconProps.size || 16} viewBox="0 0 48 48" - // @ts-expect-error: dont know, fix this type nit later ref={iconProps.ref} {...iconProps} /> diff --git a/pkgs/clan-app/ui-2d/src/routes/machines/install/hardware-step.tsx b/pkgs/clan-app/ui-2d/src/routes/machines/install/hardware-step.tsx index 1c325f11c..9e3402ee1 100644 --- a/pkgs/clan-app/ui-2d/src/routes/machines/install/hardware-step.tsx +++ b/pkgs/clan-app/ui-2d/src/routes/machines/install/hardware-step.tsx @@ -23,7 +23,6 @@ import { type RemoteData, HostKeyCheck, } from "@/src/components/RemoteForm"; -import { ac } from "vitest/dist/chunks/reporters.d.C-cu31ET"; export type HardwareValues = FieldValues & { report: boolean; diff --git a/pkgs/clan-app/ui-2d/tailwind b/pkgs/clan-app/ui-2d/tailwind new file mode 120000 index 000000000..4c414011c --- /dev/null +++ b/pkgs/clan-app/ui-2d/tailwind @@ -0,0 +1 @@ +../ui/tailwind \ No newline at end of file diff --git a/pkgs/clan-app/ui-2d/tailwind/core-plugin.ts b/pkgs/clan-app/ui-2d/tailwind/core-plugin.ts deleted file mode 100644 index 3c1fbe6c9..000000000 --- a/pkgs/clan-app/ui-2d/tailwind/core-plugin.ts +++ /dev/null @@ -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 ) - // ".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, - }, - }), -); diff --git a/pkgs/clan-app/ui-2d/tailwind/typography.ts b/pkgs/clan-app/ui-2d/tailwind/typography.ts deleted file mode 100644 index a21e8a6ce..000000000 --- a/pkgs/clan-app/ui-2d/tailwind/typography.ts +++ /dev/null @@ -1,22 +0,0 @@ -import defaultTheme from "tailwindcss/defaultTheme"; -import type { Config } from "tailwindcss"; - -export const typography: Partial = { - 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; diff --git a/pkgs/clan-app/ui-2d/tsconfig.json b/pkgs/clan-app/ui-2d/tsconfig.json index 98e05a906..d0fab85f8 100644 --- a/pkgs/clan-app/ui-2d/tsconfig.json +++ b/pkgs/clan-app/ui-2d/tsconfig.json @@ -8,7 +8,7 @@ "esModuleInterop": true, "jsx": "preserve", "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, "resolveJsonModule": true, "allowJs": true,