*]:cursor-pointer',
+ 'flex gap-2 items-start *:cursor-pointer',
direction === 'column' ? 'flex-col' : 'flex-row',
className,
)}
diff --git a/ui/src/components/utilities/InvalidSimulation.tsx b/ui/src/components/utilities/InvalidSimulation.tsx
index 302f7d7..84a63f1 100644
--- a/ui/src/components/utilities/InvalidSimulation.tsx
+++ b/ui/src/components/utilities/InvalidSimulation.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@/components/ui/Button';
import { ResetIcon } from '@radix-ui/react-icons';
-import React from 'react';
+import { Button } from '@/components/ui/Button';
type Props = {
onClick: () => void;
diff --git a/ui/src/components/utilities/SelectHttpStatus.tsx b/ui/src/components/utilities/SelectHttpStatus.tsx
index 0781bf5..01ebda1 100644
--- a/ui/src/components/utilities/SelectHttpStatus.tsx
+++ b/ui/src/components/utilities/SelectHttpStatus.tsx
@@ -5,7 +5,6 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/Select';
-import React from 'react';
type Props = {
code?: string;
diff --git a/ui/src/components/utilities/TooltipDecorator.tsx b/ui/src/components/utilities/TooltipDecorator.tsx
index 2075fa5..c82586f 100644
--- a/ui/src/components/utilities/TooltipDecorator.tsx
+++ b/ui/src/components/utilities/TooltipDecorator.tsx
@@ -1,5 +1,5 @@
+import type { ReactElement } from 'react';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip';
-import React, { type ReactElement } from 'react';
interface TooltipDecoratorProps {
tooltipText: string;
diff --git a/ui/src/fonts/InterVariable.woff2 b/ui/src/fonts/InterVariable.woff2
new file mode 100644
index 0000000..5a8d3e7
Binary files /dev/null and b/ui/src/fonts/InterVariable.woff2 differ
diff --git a/ui/src/hooks/use-debounce-callback.ts b/ui/src/hooks/use-debounce-callback.ts
index 8efbdaa..faa5ce7 100644
--- a/ui/src/hooks/use-debounce-callback.ts
+++ b/ui/src/hooks/use-debounce-callback.ts
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useRef } from 'react';
-import { debounce } from '../lib/lodash-debounce';
+import { debounce } from '@/lib/lodash-debounce';
/** Configuration options for controlling the behavior of the debounced function. */
type DebounceOptions = {
@@ -32,7 +32,7 @@ type ControlFunctions = {
isPending: () => boolean;
};
-// biome-ignore lint/suspicious/noExplicitAny:
+// biome-ignore lint/suspicious/noExplicitAny: _
export type DebouncedState ReturnType> = ((
...args: Parameters
) => ReturnType | undefined) &
@@ -51,7 +51,7 @@ function useUnmount(func: () => void) {
);
}
-// biome-ignore lint/suspicious/noExplicitAny:
+// biome-ignore lint/suspicious/noExplicitAny: _
export function useDebounceCallback ReturnType>(
func: T,
delay = 500,
diff --git a/ui/src/hooks/use-local-storage.ts b/ui/src/hooks/use-local-storage.ts
index deef119..e348893 100644
--- a/ui/src/hooks/use-local-storage.ts
+++ b/ui/src/hooks/use-local-storage.ts
@@ -5,8 +5,7 @@ export function useLocalStorage(key: string, initialValue: T): [T, (x: T) =>
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
- } catch (error) {
- console.log(error);
+ } catch (_) {
return initialValue;
}
});
@@ -16,9 +15,7 @@ export function useLocalStorage(key: string, initialValue: T): [T, (x: T) =>
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
- } catch (error) {
- console.log(error);
- }
+ } catch (_) {}
};
return [storedValue, setValue];
diff --git a/ui/src/hooks/use-plugin-mode.ts b/ui/src/hooks/use-plugin-mode.ts
index 5905f6a..5492880 100644
--- a/ui/src/hooks/use-plugin-mode.ts
+++ b/ui/src/hooks/use-plugin-mode.ts
@@ -1,5 +1,5 @@
-import { usePollInitialData } from '@/hooks/use-poll-initial-data';
import { useEffect, useState } from 'react';
+import { usePollInitialData } from '@/hooks/use-poll-initial-data';
export const usePluginMode = () => {
const isPluginMode = location.search.endsWith('plugin=true');
diff --git a/ui/src/hooks/use-store-debounce.ts b/ui/src/hooks/use-store-debounce.ts
index b077293..de0f46a 100644
--- a/ui/src/hooks/use-store-debounce.ts
+++ b/ui/src/hooks/use-store-debounce.ts
@@ -1,6 +1,6 @@
+import { useEffect } from 'react';
import { useDebounceValue } from '@/hooks/use-debounce-value';
import { useLocalStorage } from '@/hooks/use-local-storage';
-import { useEffect } from 'react';
// Store a value when it is stabilized for a certain delay
export default function useStoreDebounce(key: string, value: string, debounceDelay = 1000) {
diff --git a/ui/src/index.css b/ui/src/index.css
index 5fa0b3f..2708f0e 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,78 +1,104 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- :root {
- --background: 0 0% 100%;
- --foreground: 222.2 84% 4.9%;
-
- --card: 0 0% 100%;
- --card-foreground: 222.2 84% 4.9%;
-
- --popover: 0 0% 100%;
- --popover-foreground: 222.2 84% 4.9%;
-
- --primary: 222.2 47.4% 11.2%;
- --primary-foreground: 210 40% 98%;
-
- --secondary: 210 40% 96.1%;
- --secondary-foreground: 222.2 47.4% 11.2%;
-
- --muted: 210 40% 96.1%;
- --muted-foreground: 215.4 16.3% 46.9%;
-
- --accent: 210 40% 96.1%;
- --accent-foreground: 222.2 47.4% 11.2%;
-
- --destructive: 0 50.2% 50%;
- --destructive-foreground: 210 40% 99%;
-
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --ring: 222.2 84% 4.9%;
-
- --radius: 0.5rem;
- }
-
- .dark {
- --background: 220 5% 15%;
- --foreground: 208 33% 98%;
-
- --card: 220 5% 15%;
- --card-foreground: 208 33% 90%;
-
- --popover: 220 5% 15%;
- --popover-foreground: 208 33% 90%;
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@font-face {
+ font-family: 'Inter var';
+ src: url('@/fonts/InterVariable.woff2') format('woff2');
+ font-weight: 100 900;
+ font-style: normal;
+ font-display: swap;
+}
- --primary: 210 40% 90%;
- --primary-foreground: 222.2 47.4% 11.2%;
+:root {
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(222.2 84% 4.9%);
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(222.2 84% 4.9%);
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(222.2 84% 4.9%);
+ --primary: hsl(222.2 47.4% 11.2%);
+ --primary-foreground: hsl(210 40% 98%);
+ --secondary: hsl(210 40% 96.1%);
+ --secondary-foreground: hsl(222.2 47.4% 11.2%);
+ --muted: hsl(210 40% 96.1%);
+ --muted-foreground: hsl(215.4 16.3% 46.9%);
+ --accent: hsl(210 40% 96.1%);
+ --accent-foreground: hsl(222.2 47.4% 11.2%);
+ --destructive: hsl(0 50.2% 50%);
+ --destructive-foreground: hsl(210 40% 99%);
+ --border: hsl(214.3 31.8% 91.4%);
+ --input: hsl(214.3 31.8% 91.4%);
+ --ring: hsl(222.2 84% 4.9%);
+ --radius: 0.5rem;
+}
- --secondary: 221 35% 25%;
- --secondary-foreground: 210 40% 98%;
+.dark {
+ --background: hsl(220 5% 15%);
+ --foreground: hsl(208 33% 98%);
+ --card: hsl(220 5% 15%);
+ --card-foreground: hsl(208 33% 90%);
+ --popover: hsl(220 5% 15%);
+ --popover-foreground: hsl(208 33% 90%);
+ --primary: hsl(210 40% 90%);
+ --primary-foreground: hsl(222.2 47.4% 11.2%);
+ --secondary: hsl(221 35% 25%);
+ --secondary-foreground: hsl(210 40% 98%);
+ --muted: hsl(217.2 10% 23%);
+ --muted-foreground: hsl(208 15% 72%);
+ --accent: hsl(217.2 32.6% 17.5%);
+ --accent-foreground: hsl(210 40% 98%);
+ --destructive: hsl(0 62.8% 25.6%);
+ --destructive-foreground: hsl(210 40% 98%);
+ --border: hsl(215 7% 35%);
+ --input: hsl(215 10% 30%);
+ --ring: hsl(215 52% 62%);
+}
- --muted: 217.2 10% 23%;
- --muted-foreground: 208 15% 72%;
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+}
- --accent: 217.2 32.6% 17.5%;
- --accent-foreground: 210 40% 98%;
+button,
+[role="button"],
+.cursor-pointer,
+button:not(:disabled) {
+ cursor: pointer;
+}
- --destructive: 0 62.8% 25.6%;
- --destructive-foreground: 210 40% 98%;
+button:disabled,
+.cursor-not-allowed {
+ cursor: not-allowed;
+}
- --border: 215 7% 35%;
- --input: 215 10% 30%;
- --ring: 215 52% 62%;
- }
+.cursor-col-resize:hover {
+ cursor: col-resize;
}
-@layer base {
- * {
- @apply border-border;
- }
+* {
+ border-color: theme(colors.border); /* biome-ignore parse: Tailwind theme() function is valid for Tailwind/PostCSS */
+}
- body {
- @apply bg-background text-foreground;
- min-height: 100vh;
- }
+body {
+ background-color: theme(colors.background); /* biome-ignore parse: Tailwind theme() function is valid for Tailwind/PostCSS */
+ color: theme(colors.foreground); /* biome-ignore parse: Tailwind theme() function is valid for Tailwind/PostCSS */
+ font-family: Inter var, sans-serif;
+ min-height: 100vh;
}
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index bc08b32..150d9d0 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import App from './App';
+import { StrictMode } from 'react';
import { ThemeProvider } from './hooks/use-theme-provider';
+import Main from './main';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
-
+
-
+
- ,
+ ,
);
diff --git a/ui/src/lib/lodash-debounce.ts b/ui/src/lib/lodash-debounce.ts
index 7e453e2..edc52f9 100644
--- a/ui/src/lib/lodash-debounce.ts
+++ b/ui/src/lib/lodash-debounce.ts
@@ -7,14 +7,14 @@ type DebounceOptions = {
trailing?: boolean;
};
-// biome-ignore lint/suspicious/noExplicitAny:
+// biome-ignore lint/suspicious/noExplicitAny: _
export function debounce any>(
func: T,
wait: number,
options?: DebounceOptions,
): T & { cancel: () => void; flush: () => ReturnType | undefined } {
let lastArgs: Parameters | undefined;
- // biome-ignore lint/suspicious/noExplicitAny:
+ // biome-ignore lint/suspicious/noExplicitAny: _
let lastThis: any;
let maxWait: number | undefined;
let result: ReturnType | undefined;
@@ -28,7 +28,6 @@ export function debounce any>(
if (typeof func !== 'function') {
throw new TypeError('Expected a function');
}
- // biome-ignore lint/style/noParameterAssign:
wait = Number(wait) || 0;
if (typeof options === 'object') {
@@ -39,7 +38,7 @@ export function debounce any>(
}
function invokeFunc(time: number): ReturnType {
- // biome-ignore lint/style/noNonNullAssertion:
+ // biome-ignore lint/style/noNonNullAssertion: _
const args = lastArgs!;
const thisArg = lastThis;
@@ -108,7 +107,7 @@ export function debounce any>(
}
function debounced(
- // biome-ignore lint/suspicious/noExplicitAny:
+ // biome-ignore lint/suspicious/noExplicitAny: _
this: any,
...args: Parameters
): ReturnType | undefined {
diff --git a/ui/src/App.tsx b/ui/src/main.tsx
similarity index 92%
rename from ui/src/App.tsx
rename to ui/src/main.tsx
index 932d68f..6516ba3 100644
--- a/ui/src/App.tsx
+++ b/ui/src/main.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
import PluginEditorPage from './components/pages/PluginEditorPage';
import WebEditorPage from './components/pages/WebEditorPage';
import './hooks/use-monaco-worker';
import { usePluginMode } from '@/hooks/use-plugin-mode';
-export default function App() {
+export default function Main() {
const { ideSimulationData, isPluginMode } = usePluginMode();
if (isPluginMode && ideSimulationData === undefined) {
diff --git a/ui/src/services/json-service.ts b/ui/src/services/json-service.ts
index 46ec60c..993b129 100644
--- a/ui/src/services/json-service.ts
+++ b/ui/src/services/json-service.ts
@@ -1,13 +1,13 @@
-// biome-ignore lint/suspicious/noExplicitAny:
+// biome-ignore lint/suspicious/noExplicitAny: _
export function stringify(json: any): string {
return JSON.stringify(json, null, 4);
}
-// biome-ignore lint/suspicious/noExplicitAny:
+// biome-ignore lint/suspicious/noExplicitAny: _
export function parse(json: any): any {
try {
return JSON.parse(json);
- } catch (e) {
+ } catch (_) {
return undefined;
}
}
@@ -16,7 +16,7 @@ export function prettify(json: string) {
try {
const parsedJson = JSON.parse(json);
return JSON.stringify(parsedJson, null, 2);
- } catch (error) {
+ } catch (_) {
return json;
}
}
@@ -24,7 +24,7 @@ export function prettify(json: string) {
export function minify(json: string) {
try {
return JSON.stringify(JSON.parse(json));
- } catch (error) {
+ } catch (_) {
return json;
}
}
@@ -33,7 +33,7 @@ export function isJSON(str: string): boolean {
try {
JSON.parse(str);
return true;
- } catch (e) {
+ } catch (_) {
return false;
}
}
@@ -53,7 +53,7 @@ export function removeEmptyValues(arg: Record) {
export function parseIntOrDefault(value: string, fallback: number | undefined) {
try {
return Number.parseInt(value);
- } catch (e) {
+ } catch (_) {
return fallback;
}
}
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 9b0a57e..a6d82cb 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -1,13 +1,11 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- darkMode: ['class'],
+const config = {
+ darkMode: 'class',
content: [
- './pages/**/*.{ts,tsx}',
- './components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
+ './components/**/*.{ts,tsx}',
+ './pages/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
- prefix: '',
theme: {
container: {
center: true,
@@ -17,48 +15,10 @@ module.exports = {
},
},
extend: {
- fontFamily: {
- sans: ['Inter var', 'Segoe UI', 'sans Serif'],
- },
- colors: {
- border: 'hsl(var(--border))',
- input: 'hsl(var(--input))',
- ring: 'hsl(var(--ring))',
- background: 'hsl(var(--background))',
- foreground: 'hsl(var(--foreground))',
- primary: {
- DEFAULT: 'hsl(var(--primary))',
- foreground: 'hsl(var(--primary-foreground))',
- },
- secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))',
- },
- destructive: {
- DEFAULT: 'hsl(var(--destructive))',
- foreground: 'hsl(var(--destructive-foreground))',
- },
- muted: {
- DEFAULT: 'hsl(var(--muted))',
- foreground: 'hsl(var(--muted-foreground))',
- },
- accent: {
- DEFAULT: 'hsl(var(--accent))',
- foreground: 'hsl(var(--accent-foreground))',
- },
- popover: {
- DEFAULT: 'hsl(var(--popover))',
- foreground: 'hsl(var(--popover-foreground))',
- },
- card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))',
- },
- },
borderRadius: {
- lg: 'var(--radius)',
- md: 'calc(var(--radius) - 2px)',
- sm: 'calc(var(--radius) - 4px)',
+ lg: 'calc(var(--radius) + 2px)',
+ md: 'var(--radius)',
+ sm: 'calc(var(--radius) - 2px)',
},
keyframes: {
'accordion-down': {
@@ -71,12 +31,11 @@ module.exports = {
},
},
animation: {
- 'accordion-down':
- 'accordion-down var(--accordion-animation-duration) ease-out',
- 'accordion-up':
- 'accordion-up var(--accordion-animation-duration) ease-out',
+ 'accordion-down': 'accordion-down var(--accordion-animation-duration) ease-out',
+ 'accordion-up': 'accordion-up var(--accordion-animation-duration) ease-out',
},
},
},
- plugins: [require('tailwindcss-animate')],
};
+
+export default config;
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index bc08408..9989eb4 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -1,11 +1,12 @@
///
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
import path from 'path';
export default defineConfig({
base: './',
- plugins: [react()],
+ plugins: [react(), tailwindcss()],
build: {
outDir: 'build',
},