forked from clan/clan-core
Merge pull request 'Webview: improve linting & typechecks' (#1445) from hsjobeki-main into main
This commit is contained in:
commit
76622557c4
5
pkgs/webview-ui/.vscode/settings.json
vendored
Normal file
5
pkgs/webview-ui/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"tailwindCSS.experimental.classRegex": [["cx\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]],
|
||||
"editor.wordWrap": "on"
|
||||
}
|
26
pkgs/webview-ui/app/eslint.config.mjs
Normal file
26
pkgs/webview-ui/app/eslint.config.mjs
Normal file
@ -0,0 +1,26 @@
|
||||
import eslint from "@eslint/js";
|
||||
import tseslint from "typescript-eslint";
|
||||
import tailwind from "eslint-plugin-tailwindcss";
|
||||
|
||||
export default tseslint.config(
|
||||
eslint.configs.recommended,
|
||||
...tseslint.configs.strict,
|
||||
...tseslint.configs.stylistic,
|
||||
...tailwind.configs["flat/recommended"],
|
||||
{
|
||||
rules: {
|
||||
"tailwindcss/no-contradicting-classname": [
|
||||
"error",
|
||||
{
|
||||
callees: ["cx"],
|
||||
},
|
||||
],
|
||||
"tailwindcss/no-custom-classname": [
|
||||
"error",
|
||||
{
|
||||
callees: ["cx"],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
);
|
1686
pkgs/webview-ui/app/package-lock.json
generated
1686
pkgs/webview-ui/app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -8,22 +8,29 @@
|
||||
"build": "npm run check && vite build && npm run convert-html",
|
||||
"convert-html": "node gtk.webview.js",
|
||||
"serve": "vite preview",
|
||||
"check": "tsc --noEmit --skipLibCheck"
|
||||
"check": "tsc --noEmit --skipLibCheck && eslint ./src"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.3.0",
|
||||
"@types/node": "^20.12.12",
|
||||
"@typescript-eslint/parser": "^7.10.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"classnames": "^2.5.1",
|
||||
"daisyui": "^4.11.1",
|
||||
"eslint": "^8.57.0",
|
||||
"json-schema-to-ts": "^3.1.0",
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "^3.2.5",
|
||||
"solid-devtools": "^0.29.2",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.3.3",
|
||||
"typescript": "^5.4.5",
|
||||
"typescript-eslint": "^7.10.0",
|
||||
"vite": "^5.0.11",
|
||||
"vite-plugin-solid": "^2.8.2"
|
||||
"vite-plugin-solid": "^2.8.2",
|
||||
"eslint-plugin-tailwindcss": "^3.17.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "^20.12.12",
|
||||
"json-schema-to-ts": "^3.1.0",
|
||||
"solid-js": "^1.8.11"
|
||||
}
|
||||
}
|
||||
|
@ -1,34 +1,60 @@
|
||||
import { Match, Switch, createSignal, type Component } from "solid-js";
|
||||
import { CountProvider } from "./Config";
|
||||
// import { Nested } from "./nested";
|
||||
import { Layout } from "./layout/layout";
|
||||
import cx from "classnames";
|
||||
import { Nested } from "./nested";
|
||||
|
||||
type Route = "home" | "graph";
|
||||
type Route = "home" | "machines";
|
||||
|
||||
const App: Component = () => {
|
||||
const [route, setRoute] = createSignal<Route>("home");
|
||||
return (
|
||||
<CountProvider>
|
||||
<div class="w-full flex items-center flex-col gap-2 my-2">
|
||||
<div>Clan</div>
|
||||
<p>Current route: {route()}</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<Layout>
|
||||
<div class="col-span-1">
|
||||
<div class={cx("text-zinc-500")}>Navigation</div>
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setRoute((o) => (o === "graph" ? "home" : "graph"))}
|
||||
class="btn btn-link"
|
||||
onClick={() => setRoute("home")}
|
||||
classList={{ "bg-blue-500": route() === "home" }}
|
||||
>
|
||||
Navigate to {route() === "home" ? "graph" : "home"}
|
||||
Home
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
<button
|
||||
onClick={() => setRoute("machines")}
|
||||
classList={{ "bg-blue-500": route() === "machines" }}
|
||||
>
|
||||
Machines
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-span-7">
|
||||
<div>{route()}</div>
|
||||
<Switch fallback={<p>{route()} not found</p>}>
|
||||
<Match when={route() == "home"}>
|
||||
<Nested />
|
||||
</Match>
|
||||
<Match when={route() == "graph"}>
|
||||
<p></p>
|
||||
<Match when={route() == "machines"}>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="h-10 w-20 bg-red-500">red</div>
|
||||
<div class="h-10 w-20 bg-green-500">green</div>
|
||||
<div class="h-10 w-20 bg-blue-500">blue</div>
|
||||
<div class="h-10 w-20 bg-yellow-500">yellow</div>
|
||||
<div class="h-10 w-20 bg-purple-500">purple</div>
|
||||
<div class="h-10 w-20 bg-cyan-500">cyan</div>
|
||||
<div class="h-10 w-20 bg-pink-500">pink</div>
|
||||
</div>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</Layout>
|
||||
</CountProvider>
|
||||
);
|
||||
};
|
||||
|
@ -39,9 +39,12 @@ type CountContextType = ReturnType<typeof makeCountContext>;
|
||||
export const CountContext = createContext<CountContextType>([
|
||||
{
|
||||
loading: () => false,
|
||||
|
||||
// eslint-disable-next-line
|
||||
machines: () => ({}),
|
||||
},
|
||||
{
|
||||
// eslint-disable-next-line
|
||||
getMachines: () => {},
|
||||
},
|
||||
]);
|
||||
|
@ -6,7 +6,6 @@ import App from "./App";
|
||||
|
||||
const root = document.getElementById("app");
|
||||
|
||||
// @ts-ignore: add the clan scope to the window object so we can register callbacks for gtk
|
||||
window.clan = window.clan || {};
|
||||
|
||||
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
|
||||
@ -15,4 +14,5 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
|
||||
);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
render(() => <App />, root!);
|
||||
|
9
pkgs/webview-ui/app/src/layout/layout.tsx
Normal file
9
pkgs/webview-ui/app/src/layout/layout.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import { Component, JSXElement } from "solid-js";
|
||||
|
||||
interface LayoutProps {
|
||||
children: JSXElement;
|
||||
}
|
||||
|
||||
export const Layout: Component<LayoutProps> = (props) => {
|
||||
return <div class="grid grid-cols-8">{props.children}</div>;
|
||||
};
|
@ -74,7 +74,7 @@ const deserialize =
|
||||
const pyApi: PyApi = {} as PyApi;
|
||||
operationNames.forEach((opName) => {
|
||||
const name = opName as OperationNames;
|
||||
// @ts-ignore: TODO make typescript happy
|
||||
// @ts-expect-error - TODO: Fix this. Typescript is not recognizing the receive function correctly
|
||||
pyApi[name] = createFunctions(name);
|
||||
});
|
||||
|
||||
|
@ -1,32 +0,0 @@
|
||||
{
|
||||
dream2nix,
|
||||
config,
|
||||
src,
|
||||
...
|
||||
}:
|
||||
{
|
||||
imports = [ dream2nix.modules.dream2nix.WIP-nodejs-builder-v3 ];
|
||||
|
||||
mkDerivation = {
|
||||
inherit src;
|
||||
};
|
||||
|
||||
deps =
|
||||
{ nixpkgs, ... }:
|
||||
{
|
||||
inherit (nixpkgs) stdenv;
|
||||
};
|
||||
|
||||
WIP-nodejs-builder-v3 = {
|
||||
packageLockFile = "${config.mkDerivation.src}/package-lock.json";
|
||||
# config.groups.all.packages.${config.name}.${config.version}.
|
||||
};
|
||||
public.out = {
|
||||
checkPhase = ''
|
||||
echo "Running tests"
|
||||
echo "Tests passed"
|
||||
'';
|
||||
};
|
||||
name = "@clan/webview-ui";
|
||||
version = "0.0.1";
|
||||
}
|
@ -9,10 +9,9 @@
|
||||
|
||||
src = ./app;
|
||||
|
||||
# npmDepsHash = "sha256-bRD2vzijhdOOvcEi6XaG/neSqhkVQMqIX/8bxvRQkTc=";
|
||||
npmDeps = pkgs.fetchNpmDeps {
|
||||
src = ./app;
|
||||
hash = "sha256-bRD2vzijhdOOvcEi6XaG/neSqhkVQMqIX/8bxvRQkTc=";
|
||||
hash = "sha256-E0++hupVKnDqmLk7ljoMcqcI4w+DIMlfRYRPbKUsT2c=";
|
||||
};
|
||||
# The prepack script runs the build script, which we'd rather do in the build phase.
|
||||
npmPackFlags = [ "--ignore-scripts" ];
|
||||
|
Loading…
Reference in New Issue
Block a user