dumtruck/konobangu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: dumtruck:dev
Branches Tags
dumtruck:master
dumtruck:dev
..
compare: dumtruck:master
Branches Tags
dumtruck:dev
dumtruck:master

No commits in common. "dev" and "master" have entirely different histories.
dev ... master

124 changed files with 9214 additions and 7198 deletions
Show Stats Expand all files Collapse all files

13
apps/recorder/src/app/core.rs
View File

@ -78,25 +78,12 @@ impl App {
.await; .await;
}; };
#[cfg(all(unix, debug_assertions))]
let quit = async {
signal::unix::signal(signal::unix::SignalKind::quit())
.expect("Failed to install SIGQUIT handler")
.recv()
.await;
println!("Received SIGQUIT");
};
#[cfg(not(unix))] #[cfg(not(unix))]
let terminate = std::future::pending::<()>(); let terminate = std::future::pending::<()>();
#[cfg(all(not(unix), debug_assertions))]
let quit = std::future::pending::<()>();
tokio::select! { tokio::select! {
() = ctrl_c => {}, () = ctrl_c => {},
() = terminate => {}, () = terminate => {},
() = quit => {},
} }
} }
} }

20
apps/webui/components.json
View File

@ -1,20 +0,0 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/app.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/styles/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}

14
apps/webui/index.html
View File

@ -4,20 +4,6 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
(function() {
try {
const theme = localStorage.getItem('prefers-color-scheme');
document.documentElement.classList.remove('dark', 'light');
if (theme === 'dark' || theme === 'light') {
document.documentElement.classList.add(theme);
} else {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.classList.add(systemTheme);
}
} catch(e) {}
})();
</script>
</head> </head>
<body> <body>

72
apps/webui/package.json
View File

@ -10,79 +10,49 @@
}, },
"dependencies": { "dependencies": {
"@abraham/reflection": "^0.12.0", "@abraham/reflection": "^0.12.0",
"@ark-ui/solid": "^4.10.2",
"@codemirror/language": "6.0.0", "@codemirror/language": "6.0.0",
"@corvu/drawer": "^0.2.3", "@corvu/drawer": "^0.2.3",
"@corvu/otp-field": "^0.1.4", "@corvu/otp-field": "^0.1.4",
"@corvu/resizable": "^0.2.4", "@corvu/resizable": "^0.2.4",
"@graphiql/toolkit": "^0.11.1", "@graphiql/toolkit": "^0.11.1",
"@hookform/resolvers": "^5.0.1", "@kobalte/core": "^0.13.9",
"@kobalte/tailwindcss": "^0.9.0",
"@outposts/injection-js": "^2.5.1", "@outposts/injection-js": "^2.5.1",
"@radix-ui/react-accordion": "^1.2.7", "@solid-primitives/graphql": "^2.2.0",
"@radix-ui/react-alert-dialog": "^1.1.10", "@solid-primitives/refs": "^1.1.0",
"@radix-ui/react-aspect-ratio": "^1.1.4", "@tailwindcss/postcss": "^4.0.9",
"@radix-ui/react-avatar": "^1.1.6",
"@radix-ui/react-checkbox": "^1.2.2",
"@radix-ui/react-collapsible": "^1.1.7",
"@radix-ui/react-context-menu": "^2.2.11",
"@radix-ui/react-dialog": "^1.1.10",
"@radix-ui/react-dropdown-menu": "^2.1.11",
"@radix-ui/react-hover-card": "^1.1.10",
"@radix-ui/react-label": "^2.1.4",
"@radix-ui/react-menubar": "^1.1.11",
"@radix-ui/react-navigation-menu": "^1.2.9",
"@radix-ui/react-popover": "^1.1.10",
"@radix-ui/react-progress": "^1.1.4",
"@radix-ui/react-radio-group": "^1.3.3",
"@radix-ui/react-scroll-area": "^1.2.5",
"@radix-ui/react-select": "^2.2.2",
"@radix-ui/react-separator": "^1.1.4",
"@radix-ui/react-slider": "^1.3.2",
"@radix-ui/react-slot": "^1.2.0",
"@radix-ui/react-switch": "^1.2.2",
"@radix-ui/react-tabs": "^1.1.8",
"@radix-ui/react-toggle": "^1.1.6",
"@radix-ui/react-toggle-group": "^1.1.7",
"@radix-ui/react-tooltip": "^1.2.3",
"@rsbuild/plugin-react": "^1.2.0",
"@tanstack/react-router": "^1.112.13", "@tanstack/react-router": "^1.112.13",
"@tanstack/router-devtools": "^1.112.13", "@tanstack/router-devtools": "^1.112.13",
"@tanstack/solid-router": "^1.112.12",
"arktype": "^2.1.6", "arktype": "^2.1.6",
"chart.js": "^4.4.8", "chart.js": "^4.4.8",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"cmdk": "^1.1.1", "cmdk-solid": "^1.1.2",
"date-fns": "^4.1.0", "embla-carousel-solid": "^8.5.2",
"embla-carousel-react": "^8.6.0",
"graphiql": "^3.8.3", "graphiql": "^3.8.3",
"input-otp": "^1.4.2", "lucide-solid": "^0.477.0",
"jotai": "^2.12.3",
"jotai-signal": "^0.9.0",
"lucide-react": "^0.503.0",
"next-themes": "^0.4.6",
"oidc-client-rx": "0.1.0-alpha.9", "oidc-client-rx": "0.1.0-alpha.9",
"react": "^19.1.0", "react": "^18.3.1",
"react-day-picker": "8.10.1", "react-dom": "^18.3.1",
"react-dom": "^19.1.0",
"react-hook-form": "^7.56.0",
"react-resizable-panels": "^2.1.7",
"recharts": "^2.15.3",
"rxjs": "^7.8.2", "rxjs": "^7.8.2",
"sonner": "^2.0.3", "solid-js": "^1.9.5",
"tailwind-merge": "^3.2.0", "solid-sonner": "^0.2.8",
"tailwindcss": "^4.0.6", "tailwind-merge": "^3.0.2",
"tw-animate-css": "^1.2.7", "tailwindcss": "^3.4.17",
"type-fest": "^4.40.0", "tailwindcss-animate": "^1.0.7"
"vaul": "^1.1.2",
"zod": "^3.24.3"
}, },
"devDependencies": { "devDependencies": {
"@rsbuild/core": "^1.2.15", "@rsbuild/core": "^1.2.15",
"@rsbuild/plugin-babel": "^1.0.4",
"@rsbuild/plugin-solid": "^1.0.5",
"@tailwindcss/postcss": "^4.0.9", "@tailwindcss/postcss": "^4.0.9",
"@tanstack/react-router": "^1.112.0", "@tanstack/react-router": "^1.112.0",
"@tanstack/router-devtools": "^1.112.6", "@tanstack/router-devtools": "^1.112.6",
"@tanstack/router-plugin": "^1.112.13", "@tanstack/router-plugin": "^1.112.13",
"@types/react": "^19.1.2", "@types/react": "^18.3.18",
"@types/react-dom": "^19.1.2", "@types/react-dom": "^18.3.5",
"chalk": "^5.4.1", "chalk": "^5.4.1",
"commander": "^13.1.0", "commander": "^13.1.0",
"postcss": "^8.5.3" "postcss": "^8.5.3"

2
apps/webui/postcss.config.mjs
View File

@ -1,5 +1,5 @@
export default { export default {
plugins: { plugins: {
'@tailwindcss/postcss': {}, 'tailwindcss': {},
}, },
}; };

12
apps/webui/rsbuild.config.ts
View File

@ -1,5 +1,6 @@
import { defineConfig } from '@rsbuild/core'; import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react'; import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginSolid } from '@rsbuild/plugin-solid';
import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'; import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack';
export default defineConfig({ export default defineConfig({
@ -7,11 +8,16 @@ export default defineConfig({
title: 'Konobangu', title: 'Konobangu',
favicon: './public/assets/favicon.ico', favicon: './public/assets/favicon.ico',
}, },
plugins: [pluginReact()], plugins: [
pluginBabel({
include: /\.(?:jsx|tsx)$/,
}),
pluginSolid(),
],
tools: { tools: {
rspack: { rspack: {
plugins: [ plugins: [
TanStackRouterRspack({ target: 'react', autoCodeSplitting: true }), TanStackRouterRspack({ target: 'solid', autoCodeSplitting: true }),
], ],
}, },
}, },

257
apps/webui/src/app.css
View File

@ -1,146 +1,149 @@
@import "tailwindcss"; @tailwind base;
@import "tw-animate-css"; @tailwind components;
@tailwind utilities;
@custom-variant dark (&:is(.dark *)); @layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
:root { --muted: 240 4.8% 95.9%;
--radius: 0.625rem; --muted-foreground: 240 3.8% 46.1%;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark { --popover: 0 0% 100%;
--background: oklch(0.145 0 0); --popover-foreground: 240 10% 3.9%;
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@theme inline { --border: 240 5.9% 90%;
--color-background: var(--background); --input: 240 5.9% 90%;
--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);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
@keyframes accordion-down { --card: 0 0% 100%;
from { --card-foreground: 240 10% 3.9%;
height: 0;
} --primary: 240 5.9% 10%;
to { --primary-foreground: 0 0% 98%;
height: var(--radix-accordion-content-height);
} --secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--info: 204 94% 94%;
--info-foreground: 199 89% 48%;
--success: 149 80% 90%;
--success-foreground: 160 84% 39%;
--warning: 48 96% 89%;
--warning-foreground: 25 95% 53%;
--error: 0 93% 94%;
--error-foreground: 0 84% 60%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
} }
@keyframes accordion-up { .dark,
from { [data-kb-theme="dark"] {
height: var(--radix-accordion-content-height); --background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--info: 204 94% 94%;
--info-foreground: 199 89% 48%;
--success: 149 80% 90%;
--success-foreground: 160 84% 39%;
--warning: 48 96% 89%;
--warning-foreground: 25 95% 53%;
--error: 0 93% 94%;
--error-foreground: 0 84% 60%;
--ring: 240 4.9% 83.9%;
--radius: 0.5rem;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
} }
to {
height: 0; /* custom start */
::-webkit-scrollbar {
width: 16px;
} }
::-webkit-scrollbar-thumb {
border-radius: 9999px;
border: 4px solid transparent;
background-clip: content-box;
@apply bg-accent;
} }
::-webkit-scrollbar-corner {
display: none;
}
/* custom end */
} }
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} font-feature-settings:
"rlig" 1,
button:not(:disabled), "calt" 1;
[role="button"]:not(:disabled) { }
cursor: pointer; }
@media (max-width: 640px) {
.container {
@apply px-4;
} }
} }

11
apps/webui/src/auth/config.ts
View File

@ -1,14 +1,7 @@
import { LogLevel, type OpenIdConfiguration } from 'oidc-client-rx'; import { LogLevel, type OpenIdConfiguration } from 'oidc-client-rx';
import type { ValueOf } from 'type-fest';
export const AuthMethodEnum = { export const isBasicAuth = process.env.AUTH_TYPE === 'basic';
BASIC: 'basic', export const isOidcAuth = process.env.AUTH_TYPE === 'oidc';
OIDC: 'oidc',
} as const;
export type AuthMethodType = ValueOf<typeof AuthMethodEnum>;
export const AppAuthMethod = process.env.AUTH_TYPE as AuthMethodType;
export function buildOidcConfig(): OpenIdConfiguration { export function buildOidcConfig(): OpenIdConfiguration {
const origin = window.location.origin; const origin = window.location.origin;

87
apps/webui/src/auth/context.ts
View File

@ -1,85 +1,4 @@
import { UnreachableError } from '@/errors/common'; import { createSignal } from 'solid-js';
import type { Injector, Provider } from '@outposts/injection-js'; import { isBasicAuth } from './config';
import type { AnyRouter } from '@tanstack/react-router';
import { atomSignal } from 'jotai-signal';
import type { Atom } from 'jotai/vanilla';
import {
CHECK_AUTH_RESULT_EVENT,
type CheckAuthResultEventType,
OidcSecurityService,
provideAuth as provideOidcAuth,
withCheckAuthResultEvent,
withDefaultFeatures,
} from 'oidc-client-rx';
import { withTanstackRouter } from 'oidc-client-rx/adapters/@tanstack/react-router';
import { NEVER, type Observable, map, of } from 'rxjs';
import { AppAuthMethod, AuthMethodEnum, buildOidcConfig } from './config';
export function provideAuth(router: AnyRouter): Provider[] { export const [isAuthenticated, setIsAuthenticated] = createSignal(isBasicAuth);
if (AppAuthMethod === AuthMethodEnum.OIDC) {
return provideOidcAuth(
{
config: buildOidcConfig(),
},
withDefaultFeatures({
router: { enabled: false },
securityStorage: { type: 'local-storage' },
}),
withTanstackRouter(router),
withCheckAuthResultEvent()
);
}
return [];
}
export function setupAuthContext(injector: Injector) {
if (AppAuthMethod === AuthMethodEnum.OIDC) {
const oidcSecurityService = injector.get(OidcSecurityService);
oidcSecurityService.checkAuth().subscribe();
}
}
export interface OidcAuthContext {
type: typeof AuthMethodEnum.OIDC;
oidcSecurityService: OidcSecurityService;
isAuthenticated$: Observable<boolean>;
userData$: Observable<any>;
checkAuthResultEvent$: Observable<CheckAuthResultEventType>;
}
export interface BasicAuthContext {
type: typeof AuthMethodEnum.BASIC;
isAuthenticated$: Observable<true>;
userData$: Observable<{}>;
checkAuthResultEvent$: Observable<CheckAuthResultEventType>;
}
export type AuthContext = OidcAuthContext | BasicAuthContext;
const BASIC_AUTH_IS_AUTHENTICATED$ = of(true) as Observable<true>;
const BASIC_AUTH_USER_DATA$ = of({});
export function authContextFromInjector(injector: Injector): AuthContext {
if (AppAuthMethod === AuthMethodEnum.OIDC) {
const oidcSecurityService = injector.get(OidcSecurityService)!;
return {
type: AuthMethodEnum.OIDC,
oidcSecurityService: injector.get(OidcSecurityService),
isAuthenticated$: oidcSecurityService.isAuthenticated$.pipe(
map((s) => s.isAuthenticated)
),
userData$: oidcSecurityService.userData$.pipe(map((s) => s.userData)),
checkAuthResultEvent$: injector.get(CHECK_AUTH_RESULT_EVENT),
};
}
if (AppAuthMethod === AuthMethodEnum.BASIC) {
return {
type: AuthMethodEnum.BASIC,
isAuthenticated$: BASIC_AUTH_IS_AUTHENTICATED$,
userData$: BASIC_AUTH_USER_DATA$,
checkAuthResultEvent$: NEVER,
};
}
throw new UnreachableError('Invalid auth method');
}

6
apps/webui/src/auth/guard.ts
View File

@ -1,14 +1,12 @@
import type { RouterContext } from '@/traits/router';
import { runInInjectionContext } from '@outposts/injection-js'; import { runInInjectionContext } from '@outposts/injection-js';
import { autoLoginPartialRoutesGuard } from 'oidc-client-rx'; import { autoLoginPartialRoutesGuard } from 'oidc-client-rx';
import { firstValueFrom } from 'rxjs'; import { firstValueFrom } from 'rxjs';
import { authContextFromInjector } from './context'; import type { RouterContext } from '~/traits/router';
export const beforeLoadGuard = async ({ export const beforeLoadGuard = async ({
context, context,
}: { context: RouterContext }) => { }: { context: RouterContext }) => {
const { isAuthenticated$ } = authContextFromInjector(context.injector); if (!context.isAuthenticated()) {
if (!(await firstValueFrom(isAuthenticated$))) {
const guard$ = runInInjectionContext(context.injector, () => const guard$ = runInInjectionContext(context.injector, () =>
autoLoginPartialRoutesGuard() autoLoginPartialRoutesGuard()
); );

67
apps/webui/src/auth/hooks.ts
View File

@ -1,34 +1,55 @@
import { atomWithObservable } from 'jotai/utils'; import { CHECK_AUTH_RESULT_EVENT } from 'oidc-client-rx';
import { useInjector } from 'oidc-client-rx/adapters/react'; import {
import { useMemo } from 'react'; InjectorContextVoidInjector,
import type { Observable } from 'rxjs'; useOidcClient,
import { authContextFromInjector } from './context'; } from 'oidc-client-rx/adapters/solid-js';
import { NEVER, map, of } from 'rxjs';
import { from } from 'solid-js';
import { isBasicAuth, isOidcAuth } from './config';
const BASIC_AUTH_IS_AUTHENTICATED$ = of({
isAuthenticated: true,
allConfigsAuthenticated: [],
});
const BASIC_AUTH_USER_DATA$ = of({
userData: {},
allUserData: [],
});
const useOidcClientExt = isOidcAuth
? useOidcClient
: () => ({
oidcSecurityService: undefined,
injector: InjectorContextVoidInjector,
});
export function useAuth() { export function useAuth() {
const injector = useInjector(); const { oidcSecurityService, injector } = useOidcClientExt();
const authContext = useMemo( const isAuthenticated$ = (
() => authContextFromInjector(injector), oidcSecurityService?.isAuthenticated$ ?? BASIC_AUTH_IS_AUTHENTICATED$
[injector] ).pipe(map((s) => s.isAuthenticated));
);
const isAuthenticated = useMemo( const userData$ = (
() => oidcSecurityService?.userData$ ?? BASIC_AUTH_USER_DATA$
atomWithObservable( ).pipe(map((s) => s.userData));
() => authContext.isAuthenticated$ as Observable<boolean>
),
[authContext.isAuthenticated$]
);
const userData = useMemo( const isAuthenticated = from(isAuthenticated$);
() => atomWithObservable(() => authContext.userData$ as Observable<any>),
[authContext] const userData = from(userData$);
);
const checkAuthResultEvent$ = isBasicAuth
? NEVER
: injector.get(CHECK_AUTH_RESULT_EVENT);
return { return {
oidcSecurityService,
isAuthenticated$,
isAuthenticated,
userData$,
userData, userData,
injector, injector,
isAuthenticated, checkAuthResultEvent$,
authContext,
}; };
} }

26
apps/webui/src/components/layout/app-icon.tsx
View File

@ -1,10 +1,9 @@
import {Image} from '@kobalte/core/image';
import { import {
SidebarMenu, SidebarMenu,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
} from '@/components/ui/sidebar'; } from '~/components/ui/sidebar';
import { Image } from '@/components/ui/image';
export function AppIcon() { export function AppIcon() {
return ( return (
@ -12,20 +11,21 @@ export function AppIcon() {
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton <SidebarMenuButton
size="lg" size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
> >
<div className="flex size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"> <div
<div className="relative size-8"> class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
<Image <Image fallbackDelay={1000}>
<Image.Img
src="/assets/favicon.png" src="/assets/favicon.png"
alt="App Logo" class="size-8 object-cover"
className="object-cover"
/> />
<Image.Fallback>KO</Image.Fallback>
</Image>
</div> </div>
</div> <div class="grid flex-1 gap-1 py-1 text-left text-sm leading-tight">
<div className="grid flex-1 gap-1 py-1 text-left text-xs leading-tight"> <span class="truncate font-semibold">Konobangu</span>
<span className="truncate font-semibold">Konobangu</span> <span class="mt-1 truncate">@dumtruck</span>
<span className="mt-1 truncate">@dumtruck</span>
</div> </div>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>

147
apps/webui/src/components/layout/app-layout.tsx
View File

@ -1,53 +1,54 @@
import { AppSidebar } from '@/components/layout/app-sidebar'; import { useMatches } from '@tanstack/solid-router';
import {
type ComponentProps,
type FlowProps,
For,
Show,
createMemo,
splitProps,
} from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { AppSidebar } from '~/components/layout/app-sidebar';
import { import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
BreadcrumbLink, BreadcrumbLink,
BreadcrumbList, BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator, BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'; } from '~/components/ui/breadcrumb';
import { Separator } from '@/components/ui/separator'; import { Separator } from '~/components/ui/separator';
import { import {
SidebarInset, SidebarInset,
SidebarProvider, SidebarProvider,
SidebarTrigger, SidebarTrigger,
} from '@/components/ui/sidebar'; } from '~/components/ui/sidebar';
import { cn } from '@/styles/utils'; import type { RouteStateDataOption } from '~/traits/router';
import type { RouteStateDataOption } from '@/traits/router'; import type { RouteBreadcrumbItem } from '~/traits/router';
import type { RouteBreadcrumbItem } from '@/traits/router'; import { cn } from '~/utils/styles';
import { useMatches } from '@tanstack/react-router';
import {
type DetailedHTMLProps,
Fragment,
type HTMLAttributes,
useMemo,
} from 'react';
import { ProLink } from '../ui/pro-link'; import { ProLink } from '../ui/pro-link';
export type AppAsideBreadcrumbItem = RouteBreadcrumbItem; export type AppAsideBreadcrumbItem = RouteBreadcrumbItem;
export interface AppAsideProps extends FlowProps<ComponentProps<'div'>> {
export interface AppAsideProps
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
breadcrumb?: AppAsideBreadcrumbItem[]; breadcrumb?: AppAsideBreadcrumbItem[];
extractBreadcrumbFromRoutes?: boolean; extractBreadcrumbFromRoutes?: boolean;
} }
export function AppAside({ export function AppAside(props: AppAsideProps) {
children, const [local, other] = splitProps(props, [
className, 'children',
breadcrumb: propBreadcrumb, 'class',
extractBreadcrumbFromRoutes, 'breadcrumb',
...other 'extractBreadcrumbFromRoutes',
}: AppAsideProps) { ]);
const matches = useMatches(); const matches = useMatches();
const breadcrumb = useMemo(() => { const breadcrumb = createMemo(() => {
if (propBreadcrumb) { if (local.breadcrumb) {
return propBreadcrumb; return local.breadcrumb;
} }
if (extractBreadcrumbFromRoutes) { if (local.extractBreadcrumbFromRoutes) {
return matches return matches()
.map((m, i, arr) => { .map((m, i, arr) => {
const staticData = m.staticData as RouteStateDataOption; const staticData = m.staticData as RouteStateDataOption;
if (staticData.breadcrumb) { if (staticData.breadcrumb) {
@ -66,69 +67,61 @@ export function AppAside({
.filter((b): b is AppAsideBreadcrumbItem => !!b); .filter((b): b is AppAsideBreadcrumbItem => !!b);
} }
return []; return [];
}, [matches, propBreadcrumb, extractBreadcrumbFromRoutes]); });
const breadcrumbLength = breadcrumb.length; const breadcrumbLength = breadcrumb().length;
return ( return (
<SidebarProvider> <SidebarProvider>
<AppSidebar /> <AppSidebar />
<SidebarInset> <SidebarInset>
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"> <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
<div className="flex items-center gap-2 px-4"> <div class="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" /> <SidebarTrigger class="-ml-1" />
{breadcrumbLength > 0 && ( <Show when={breadcrumbLength}>
<> <Separator orientation="vertical" class="mr-2 h-4" />
<Separator orientation="vertical" className="mr-2 h-4" />
<Breadcrumb> <Breadcrumb>
<BreadcrumbList> <BreadcrumbList>
{breadcrumb.map((item, index) => { <For each={breadcrumb()}>
const iconEl = item.icon ? ( {(item, index) => {
<item.icon className="size-4" /> const iconEl = (
) : null; <Show when={!!item.icon}>
<Dynamic component={item.icon} class=" size-4" />
const isCurrent = index + 1 === breadcrumbLength; </Show>
const LinkChild = (
item.link ? ProLink : Fragment
) as typeof ProLink;
return (
<Fragment key={index}>
{index > 0 && (
<BreadcrumbSeparator className="hidden md:block" />
)}
<BreadcrumbItem className="hidden md:block">
{isCurrent ? (
<BreadcrumbPage>
{iconEl}
{item.label}
</BreadcrumbPage>
) : (
<BreadcrumbLink
className="text-[var(--foreground)] hover:text-inherit"
asChild={!!item.link}
>
<LinkChild {...item?.link}>
{iconEl}
{item.label}
</LinkChild>
</BreadcrumbLink>
)}
</BreadcrumbItem>
</Fragment>
); );
})}
const isCurrent = index() + 1 === breadcrumbLength;
return (
<>
<Show when={index() > 0}>
<BreadcrumbSeparator class="hidden md:block" />
</Show>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink
class="text-[var(--foreground)] hover:text-inherit"
as={item.link ? ProLink : undefined}
current={isCurrent}
{...item?.link}
>
{iconEl}
{item.label}
</BreadcrumbLink>
</BreadcrumbItem>
</>
);
}}
</For>
</BreadcrumbList> </BreadcrumbList>
</Breadcrumb> </Breadcrumb>
</> </Show>
)}
</div> </div>
</header> </header>
<div <div
{...other} {...other}
className={cn('flex min-h-0 flex-1 flex-col p-4 pt-0', className)} class={cn('flex min-h-0 flex-1 flex-col p-4 pt-0', local.class)}
> >
{children} {local.children}
</div> </div>
</SidebarInset> </SidebarInset>
</SidebarProvider> </SidebarProvider>

14
apps/webui/src/components/layout/app-not-found.tsx
View File

@ -2,7 +2,7 @@ import {
type AnyRoute, type AnyRoute,
type ParsedLocation, type ParsedLocation,
redirect, redirect,
} from '@tanstack/react-router'; } from '@tanstack/solid-router';
import { ProLink } from '../ui/pro-link'; import { ProLink } from '../ui/pro-link';
export function guardRouteIndexAsNotFound( export function guardRouteIndexAsNotFound(
@ -21,19 +21,19 @@ export function guardRouteIndexAsNotFound(
export function AppNotFoundComponent() { export function AppNotFoundComponent() {
return ( return (
<div className="flex h-svh items-center px-4 py-12 sm:px-6 md:px-8 lg:px-12 xl:px-16"> <div class="flex h-svh items-center px-4 py-12 sm:px-6 md:px-8 lg:px-12 xl:px-16">
<div className="w-full space-y-6 text-center"> <div class="w-full space-y-6 text-center">
<div className="space-y-3"> <div class="space-y-3">
<h1 className="font-bold text-4xl tracking-tighter sm:text-5xl"> <h1 class="font-bold text-4xl tracking-tighter sm:text-5xl">
404 Page Not Found 404 Page Not Found
</h1> </h1>
<p className="text-gray-500"> <p class="text-gray-500">
Sorry, we couldn&#x27;t find the page you&#x27;re looking for. Sorry, we couldn&#x27;t find the page you&#x27;re looking for.
</p> </p>
</div> </div>
<ProLink <ProLink
to="/" to="/"
className="inline-flex h-10 items-center rounded-md border border-gray-20 bg-white px-8 font-medium text-xs shadow-xs transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:focus-visible:ring-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50" class="inline-flex h-10 items-center rounded-md border border-gray-200 border-gray-200 bg-white px-8 font-medium text-sm shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:border-gray-800 dark:bg-gray-950 dark:focus-visible:ring-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50"
> >
Return to website Return to website
</ProLink> </ProLink>

11
apps/webui/src/components/layout/app-sidebar.tsx
View File

@ -1,12 +1,12 @@
import type { ComponentProps } from 'solid-js';
import { import {
Sidebar, Sidebar,
SidebarContent, SidebarContent,
SidebarFooter, SidebarFooter,
SidebarHeader, SidebarHeader,
SidebarRail, SidebarRail,
} from '@/components/ui/sidebar'; } from '~/components/ui/sidebar';
import { AppNavMainData } from '@/config/app-layout'; import { AppNavMainData } from '~/config/app-layout';
import type { ComponentPropsWithoutRef } from 'react';
import { AppIcon } from './app-icon'; import { AppIcon } from './app-icon';
import { NavMain } from './nav-main'; import { NavMain } from './nav-main';
import { NavUser } from './nav-user'; import { NavUser } from './nav-user';
@ -19,10 +19,7 @@ const data = {
}, },
}; };
type AppSidebarRootProps = Omit< type AppSidebarRootProps = Omit<ComponentProps<typeof Sidebar>, 'collapsible'>;
ComponentPropsWithoutRef<typeof Sidebar>,
'collapsible'
>;
export const AppSidebar = (props: AppSidebarRootProps) => { export const AppSidebar = (props: AppSidebarRootProps) => {
return ( return (

12
apps/webui/src/components/layout/app-skeleton.tsx
View File

@ -1,12 +1,12 @@
export function AppSkeleton() { export function AppSkeleton() {
return ( return (
<div className="flex min-h-svh flex-1 flex-col gap-4 md:min-h-0"> <div class="flex min-h-svh flex-1 flex-col gap-4 md:min-h-0">
<div className="grid auto-rows-min gap-4 md:grid-cols-3"> <div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50" /> <div class="aspect-video rounded-xl bg-muted/50" />
<div className="aspect-video rounded-xl bg-muted/50" /> <div class="aspect-video rounded-xl bg-muted/50" />
<div className="aspect-video rounded-xl bg-muted/50" /> <div class="aspect-video rounded-xl bg-muted/50" />
</div> </div>
<div className="min-h-svh flex-1 rounded-xl bg-muted/50 md:min-h-0" /> <div class="min-h-svh flex-1 rounded-xl bg-muted/50 md:min-h-0" />
</div> </div>
); );
} }

80
apps/webui/src/components/layout/nav-main.tsx
View File

@ -1,12 +1,12 @@
'use client'; import { ChevronRight, type LucideIcon } from 'lucide-solid';
import { For, Show, createSignal } from 'solid-js';
import { ChevronRight, type LucideIcon } from 'lucide-react';
import { useMatch, useMatches } from '@tanstack/solid-router';
import { import {
Collapsible, Collapsible,
CollapsibleContent, CollapsibleContent,
CollapsibleTrigger, CollapsibleTrigger,
} from '@/components/ui/collapsible'; } from '~/components/ui/collapsible';
import { import {
SidebarGroup, SidebarGroup,
SidebarGroupLabel, SidebarGroupLabel,
@ -16,8 +16,7 @@ import {
SidebarMenuSub, SidebarMenuSub,
SidebarMenuSubButton, SidebarMenuSubButton,
SidebarMenuSubItem, SidebarMenuSubItem,
} from '@/components/ui/sidebar'; } from '~/components/ui/sidebar';
import { useMatches } from '@tanstack/react-router';
import { ProLink, type ProLinkProps } from '../ui/pro-link'; import { ProLink, type ProLinkProps } from '../ui/pro-link';
export interface NavMainItem { export interface NavMainItem {
@ -44,7 +43,7 @@ export function NavMain({
if (!linkTo) { if (!linkTo) {
return false; return false;
} }
return matches.some((match) => match.pathname.startsWith(linkTo)); return matches().some((match) => match.pathname.startsWith(linkTo));
}; };
const renderSidebarMenuItemButton = (item: NavMainItem) => { const renderSidebarMenuItemButton = (item: NavMainItem) => {
@ -52,68 +51,71 @@ export function NavMain({
<> <>
{item.icon && <item.icon />} {item.icon && <item.icon />}
<span>{item.title}</span> <span>{item.title}</span>
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]:rotate-90" /> <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
</> </>
); );
}; };
return groups.map((group, groupIndex) => {
return ( return (
<SidebarGroup key={groupIndex}> <For each={groups}>
{(group) => (
<SidebarGroup>
<SidebarGroupLabel>{group.group}</SidebarGroupLabel> <SidebarGroupLabel>{group.group}</SidebarGroupLabel>
<SidebarMenu> <SidebarMenu>
{group.items.map((item, itemIndex) => { <For each={group.items}>
if (!item.children?.length) { {(item) => {
return ( return (
<SidebarMenuItem key={itemIndex}> <Show
<SidebarMenuButton asChild tooltip={item.title}> when={!!item.children?.length}
<ProLink {...item.link}> fallback={
<SidebarMenuItem>
<SidebarMenuButton
as={ProLink}
{...item.link}
tooltip={item.title}
>
{renderSidebarMenuItemButton(item)} {renderSidebarMenuItemButton(item)}
</ProLink>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
);
} }
return ( >
<Collapsible <Collapsible
key={itemIndex} as={SidebarMenuItem}
asChild class="group/collapsible"
className="group/collapsible"
defaultOpen={isMenuMatch(item.link)} defaultOpen={isMenuMatch(item.link)}
> >
<SidebarMenuItem> <CollapsibleTrigger
<CollapsibleTrigger asChild> as={SidebarMenuButton}
<SidebarMenuButton tooltip={item.title}> tooltip={item.title}
>
{renderSidebarMenuItemButton(item)} {renderSidebarMenuItemButton(item)}
</SidebarMenuButton>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<SidebarMenuSub> <SidebarMenuSub>
{(item.children || []).map((subItem, subItemIndex) => { <For each={item.children || []}>
return ( {(subItem) => (
<SidebarMenuSubItem key={subItemIndex}> <SidebarMenuSubItem>
<SidebarMenuSubButton <SidebarMenuSubButton
asChild as={ProLink}
isActive={isMenuMatch(subItem.link)}
>
<ProLink
{...subItem.link} {...subItem.link}
activeProps={{ className: '' }} isActive={isMenuMatch(subItem.link)}
activeProps={{ class: '' }}
> >
<span>{subItem.title}</span> <span>{subItem.title}</span>
</ProLink>
</SidebarMenuSubButton> </SidebarMenuSubButton>
</SidebarMenuSubItem> </SidebarMenuSubItem>
); )}
})} </For>
</SidebarMenuSub> </SidebarMenuSub>
</CollapsibleContent> </CollapsibleContent>
</SidebarMenuItem>
</Collapsible> </Collapsible>
</Show>
); );
})} }}
</For>
</SidebarMenu> </SidebarMenu>
</SidebarGroup> </SidebarGroup>
)}
</For>
); );
});
} }

52
apps/webui/src/components/layout/nav-projects.tsx
View File

@ -1,14 +1,12 @@
'use client'; import { Link } from '@tanstack/solid-router';
import { Link } from '@tanstack/react-router';
import { import {
Folder, Folder,
Forward, Forward,
type LucideIcon, type LucideIcon,
MoreHorizontal, MoreHorizontal,
Trash2, Trash2,
} from 'lucide-react'; } from 'lucide-solid';
import { type ComponentProps, For } from 'solid-js';
import { import {
DropdownMenu, DropdownMenu,
@ -16,7 +14,7 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'; } from '~/components/ui/dropdown-menu';
import { import {
SidebarGroup, SidebarGroup,
SidebarGroupLabel, SidebarGroupLabel,
@ -24,9 +22,7 @@ import {
SidebarMenuAction, SidebarMenuAction,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
useSidebar, } from '~/components/ui/sidebar';
} from '@/components/ui/sidebar';
import type { ComponentProps } from 'react';
export function NavProjects({ export function NavProjects({
projects, projects,
@ -37,52 +33,44 @@ export function NavProjects({
link: ComponentProps<typeof Link>; link: ComponentProps<typeof Link>;
}[]; }[];
}) { }) {
const { isMobile } = useSidebar();
return ( return (
<SidebarGroup className="group-data-[collapsible=icon]:hidden"> <SidebarGroup class="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Projects</SidebarGroupLabel> <SidebarGroupLabel>Projects</SidebarGroupLabel>
<SidebarMenu> <SidebarMenu>
{projects.map((item) => ( <For each={projects}>
<SidebarMenuItem key={item.name}> {(item) => (
<SidebarMenuButton asChild> <SidebarMenuItem>
<Link {...item.link}> <SidebarMenuButton as={Link} {...item?.link}>
<item.icon /> <item.icon />
<span>{item.name}</span> <span>{item.name}</span>
</Link>
</SidebarMenuButton> </SidebarMenuButton>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger as={SidebarMenuAction} showOnHover>
<SidebarMenuAction showOnHover>
<MoreHorizontal /> <MoreHorizontal />
<span className="sr-only">More</span> <span class="sr-only">More</span>
</SidebarMenuAction>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent class="w-48 rounded-lg">
className="w-48 rounded-lg"
side={isMobile ? 'bottom' : 'right'}
align={isMobile ? 'end' : 'start'}
>
<DropdownMenuItem> <DropdownMenuItem>
<Folder className="text-muted-foreground" /> <Folder class="text-muted-foreground" />
<span>View Project</span> <span>View Project</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Forward className="text-muted-foreground" /> <Forward class="text-muted-foreground" />
<span>Share Project</span> <span>Share Project</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
<Trash2 className="text-muted-foreground" /> <Trash2 class="text-muted-foreground" />
<span>Delete Project</span> <span>Delete Project</span>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</SidebarMenuItem> </SidebarMenuItem>
))} )}
</For>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton className="text-sidebar-foreground/70"> <SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal className="text-sidebar-foreground/70" /> <MoreHorizontal class="text-sidebar-foreground/70" />
<span>More</span> <span>More</span>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>

53
apps/webui/src/components/layout/nav-user.tsx
View File

@ -1,5 +1,3 @@
'use client';
import { import {
BadgeCheck, BadgeCheck,
Bell, Bell,
@ -7,9 +5,9 @@ import {
CreditCard, CreditCard,
LogOut, LogOut,
Sparkles, Sparkles,
} from 'lucide-react'; } from 'lucide-solid';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -18,13 +16,12 @@ import {
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'; } from '~/components/ui/dropdown-menu';
import { import {
SidebarMenu, SidebarMenu,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
useSidebar, } from '~/components/ui/sidebar';
} from '@/components/ui/sidebar';
export function NavUser({ export function NavUser({
user, user,
@ -35,43 +32,35 @@ export function NavUser({
avatar: string; avatar: string;
}; };
}) { }) {
const { isMobile } = useSidebar();
return ( return (
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger
<SidebarMenuButton as={SidebarMenuButton}
size="lg" size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
> >
<Avatar className="h-8 w-8 rounded-lg"> <Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} /> <AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback> <AvatarFallback class="rounded-lg">CN</AvatarFallback>
</Avatar> </Avatar>
<div className="grid flex-1 text-left text-xs leading-tight"> <div class="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">{user.name}</span> <span class="truncate font-semibold">{user.name}</span>
<span className="truncate text-xs">{user.email}</span> <span class="truncate text-xs">{user.email}</span>
</div> </div>
<ChevronsUpDown className="ml-auto size-4" /> <ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg">
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" <DropdownMenuLabel class="p-0 font-normal">
side={isMobile ? 'bottom' : 'right'} <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
align="end" <Avatar class="h-8 w-8 rounded-lg">
sideOffset={4}
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-xs">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} /> <AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback> <AvatarFallback class="rounded-lg">CN</AvatarFallback>
</Avatar> </Avatar>
<div className="grid flex-1 text-left text-xs leading-tight"> <div class="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">{user.name}</span> <span class="truncate font-semibold">{user.name}</span>
<span className="truncate text-xs">{user.email}</span> <span class="truncate text-xs">{user.email}</span>
</div> </div>
</div> </div>
</DropdownMenuLabel> </DropdownMenuLabel>

121
apps/webui/src/components/ui/accordion.tsx
View File

@ -1,64 +1,91 @@
import * as React from "react" import type { JSX, ValidComponent } from 'solid-js';
import * as AccordionPrimitive from "@radix-ui/react-accordion" import { splitProps } from 'solid-js';
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/styles/utils" import * as AccordionPrimitive from '@kobalte/core/accordion';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
function Accordion({ import { cn } from '~/utils/styles';
...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}
function AccordionItem({ const Accordion = AccordionPrimitive.Root;
className,
...props type AccordionItemProps<T extends ValidComponent = 'div'> =
}: React.ComponentProps<typeof AccordionPrimitive.Item>) { AccordionPrimitive.AccordionItemProps<T> & {
class?: string | undefined;
};
const AccordionItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, AccordionItemProps<T>>
) => {
const [local, others] = splitProps(props as AccordionItemProps, ['class']);
return ( return (
<AccordionPrimitive.Item <AccordionPrimitive.Item class={cn('border-b', local.class)} {...others} />
data-slot="accordion-item" );
className={cn("border-b last:border-b-0", className)} };
{...props}
/>
)
}
function AccordionTrigger({ type AccordionTriggerProps<T extends ValidComponent = 'button'> =
className, AccordionPrimitive.AccordionTriggerProps<T> & {
children, class?: string | undefined;
...props children?: JSX.Element;
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) { };
const AccordionTrigger = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, AccordionTriggerProps<T>>
) => {
const [local, others] = splitProps(props as AccordionTriggerProps, [
'class',
'children',
]);
return ( return (
<AccordionPrimitive.Header className="flex"> <AccordionPrimitive.Header class="flex">
<AccordionPrimitive.Trigger <AccordionPrimitive.Trigger
data-slot="accordion-trigger" class={cn(
className={cn( 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180',
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", local.class
className
)} )}
{...props} {...others}
> >
{children} {local.children}
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" /> <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4 shrink-0 transition-transform duration-200"
>
<path d="M6 9l6 6l6 -6" />
</svg>
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header> </AccordionPrimitive.Header>
) );
} };
function AccordionContent({ type AccordionContentProps<T extends ValidComponent = 'div'> =
className, AccordionPrimitive.AccordionContentProps<T> & {
children, class?: string | undefined;
...props children?: JSX.Element;
}: React.ComponentProps<typeof AccordionPrimitive.Content>) { };
const AccordionContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, AccordionContentProps<T>>
) => {
const [local, others] = splitProps(props as AccordionContentProps, [
'class',
'children',
]);
return ( return (
<AccordionPrimitive.Content <AccordionPrimitive.Content
data-slot="accordion-content" class={cn(
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" 'animate-accordion-up overflow-hidden text-sm transition-all data-[expanded]:animate-accordion-down',
{...props} local.class
)}
{...others}
> >
<div className={cn("pt-0 pb-4", className)}>{children}</div> <div class="pt-0 pb-4">{local.children}</div>
</AccordionPrimitive.Content> </AccordionPrimitive.Content>
) );
} };
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

213
apps/webui/src/components/ui/alert-dialog.tsx
View File

@ -1,146 +1,117 @@
"use client" import type { JSX, ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import * as AlertDialogPrimitive from '@kobalte/core/alert-dialog';
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
import { buttonVariants } from "@/components/ui/button"
function AlertDialog({ const AlertDialog = AlertDialogPrimitive.Root;
...props const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) { const AlertDialogPortal = AlertDialogPrimitive.Portal;
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}
function AlertDialogTrigger({ type AlertDialogOverlayProps<T extends ValidComponent = 'div'> =
...props AlertDialogPrimitive.AlertDialogOverlayProps<T> & {
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) { class?: string | undefined;
return ( };
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
)
}
function AlertDialogPortal({ const AlertDialogOverlay = <T extends ValidComponent = 'div'>(
...props props: PolymorphicProps<T, AlertDialogOverlayProps<T>>
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) { ) => {
return ( const [local, others] = splitProps(props as AlertDialogOverlayProps, [
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} /> 'class',
) ]);
}
function AlertDialogOverlay({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
return ( return (
<AlertDialogPrimitive.Overlay <AlertDialogPrimitive.Overlay
data-slot="alert-dialog-overlay" class={cn(
className={cn( 'data-[closed]:fade-out-0 data-[expanded]:fade-in-0 fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[closed]:animate-out data-[expanded]:animate-in',
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function AlertDialogContent({ type AlertDialogContentProps<T extends ValidComponent = 'div'> =
className, AlertDialogPrimitive.AlertDialogContentProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) { children?: JSX.Element;
};
const AlertDialogContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, AlertDialogContentProps<T>>
) => {
const [local, others] = splitProps(props as AlertDialogContentProps, [
'class',
'children',
]);
return ( return (
<AlertDialogPortal> <AlertDialogPortal>
<AlertDialogOverlay /> <AlertDialogOverlay />
<AlertDialogPrimitive.Content <AlertDialogPrimitive.Content
data-slot="alert-dialog-content" class={cn(
className={cn( '-translate-x-1/2 -translate-y-1/2 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in sm:rounded-lg md:w-full',
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", local.class
className
)} )}
{...props} {...others}
/> >
{local.children}
<AlertDialogPrimitive.CloseButton class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
<span class="sr-only">Close</span>
</AlertDialogPrimitive.CloseButton>
</AlertDialogPrimitive.Content>
</AlertDialogPortal> </AlertDialogPortal>
) );
} };
function AlertDialogHeader({ type AlertDialogTitleProps<T extends ValidComponent = 'h2'> =
className, AlertDialogPrimitive.AlertDialogTitleProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<"div">) { };
return (
<div
data-slot="alert-dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
}
function AlertDialogFooter({ const AlertDialogTitle = <T extends ValidComponent = 'h2'>(
className, props: PolymorphicProps<T, AlertDialogTitleProps<T>>
...props ) => {
}: React.ComponentProps<"div">) { const [local, others] = splitProps(props as AlertDialogTitleProps, ['class']);
return (
<div
data-slot="alert-dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
{...props}
/>
)
}
function AlertDialogTitle({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
return ( return (
<AlertDialogPrimitive.Title <AlertDialogPrimitive.Title
data-slot="alert-dialog-title" class={cn('font-semibold text-lg', local.class)}
className={cn("text-lg font-semibold", className)} {...others}
{...props}
/> />
) );
} };
function AlertDialogDescription({ type AlertDialogDescriptionProps<T extends ValidComponent = 'p'> =
className, AlertDialogPrimitive.AlertDialogDescriptionProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) { };
const AlertDialogDescription = <T extends ValidComponent = 'p'>(
props: PolymorphicProps<T, AlertDialogDescriptionProps<T>>
) => {
const [local, others] = splitProps(props as AlertDialogDescriptionProps, [
'class',
]);
return ( return (
<AlertDialogPrimitive.Description <AlertDialogPrimitive.Description
data-slot="alert-dialog-description" class={cn('text-muted-foreground text-sm', local.class)}
className={cn("text-muted-foreground text-sm", className)} {...others}
{...props}
/> />
) );
} };
function AlertDialogAction({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
return (
<AlertDialogPrimitive.Action
className={cn(buttonVariants(), className)}
{...props}
/>
)
}
function AlertDialogCancel({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
return (
<AlertDialogPrimitive.Cancel
className={cn(buttonVariants({ variant: "outline" }), className)}
{...props}
/>
)
}
export { export {
AlertDialog, AlertDialog,
@ -148,10 +119,6 @@ export {
AlertDialogOverlay, AlertDialogOverlay,
AlertDialogTrigger, AlertDialogTrigger,
AlertDialogContent, AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle, AlertDialogTitle,
AlertDialogDescription, AlertDialogDescription,
AlertDialogAction, };
AlertDialogCancel,
}

87
apps/webui/src/components/ui/alert.tsx
View File

@ -1,66 +1,63 @@
import * as React from "react" import type { Component, ComponentProps, ValidComponent } from 'solid-js';
import { cva, type VariantProps } from "class-variance-authority" import { splitProps } from 'solid-js';
import { cn } from "@/styles/utils" import * as AlertPrimitive from '@kobalte/core/alert';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { cn } from '~/utils/styles';
const alertVariants = cva( const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", 'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
{ {
variants: { variants: {
variant: { variant: {
default: "bg-card text-card-foreground", default: 'bg-background text-foreground',
destructive: destructive:
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
}, },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
}, },
} }
) );
function Alert({ type AlertRootProps<T extends ValidComponent = 'div'> =
className, AlertPrimitive.AlertRootProps<T> &
variant, VariantProps<typeof alertVariants> & { class?: string | undefined };
...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) { const Alert = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, AlertRootProps<T>>
) => {
const [local, others] = splitProps(props as AlertRootProps, [
'class',
'variant',
]);
return ( return (
<div <AlertPrimitive.Root
data-slot="alert" class={cn(alertVariants({ variant: props.variant }), local.class)}
role="alert" {...others}
className={cn(alertVariants({ variant }), className)}
{...props}
/> />
) );
} };
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { const AlertTitle: Component<ComponentProps<'h5'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <h5
data-slot="alert-title" class={cn('mb-1 font-medium leading-none tracking-tight', local.class)}
className={cn( {...others}
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
className
)}
{...props}
/> />
) );
} };
function AlertDescription({ const AlertDescription: Component<ComponentProps<'div'>> = (props) => {
className, const [local, others] = splitProps(props, ['class']);
...props
}: React.ComponentProps<"div">) {
return ( return (
<div <div class={cn('text-sm [&_p]:leading-relaxed', local.class)} {...others} />
data-slot="alert-description" );
className={cn( };
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
className
)}
{...props}
/>
)
}
export { Alert, AlertTitle, AlertDescription } export { Alert, AlertTitle, AlertDescription };

32
apps/webui/src/components/ui/aspect-ratio.tsx
View File

@ -1,9 +1,31 @@
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" import type { Component, ComponentProps } from "solid-js"
import { mergeProps, splitProps } from "solid-js"
function AspectRatio({ type AspectRatioProps = ComponentProps<"div"> & { ratio?: number }
...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) { const AspectRatio: Component<AspectRatioProps> = (rawProps) => {
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} /> const props = mergeProps({ ratio: 1 / 1 }, rawProps)
const [local, others] = splitProps(props, ["ratio"])
return (
<div
style={{
position: "relative",
width: "100%",
"padding-bottom": `${100 / local.ratio}%`
}}
>
<div
style={{
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0
}}
{...others}
/>
</div>
)
} }
export { AspectRatio } export { AspectRatio }

89
apps/webui/src/components/ui/avatar.tsx
View File

@ -1,53 +1,64 @@
"use client" import type { ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import * as ImagePrimitive from '@kobalte/core/image';
import * as AvatarPrimitive from "@radix-ui/react-avatar" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function Avatar({ type AvatarRootProps<T extends ValidComponent = 'span'> =
className, ImagePrimitive.ImageRootProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof AvatarPrimitive.Root>) { };
const Avatar = <T extends ValidComponent = 'span'>(
props: PolymorphicProps<T, AvatarRootProps<T>>
) => {
const [local, others] = splitProps(props as AvatarRootProps, ['class']);
return ( return (
<AvatarPrimitive.Root <ImagePrimitive.Root
data-slot="avatar" class={cn(
className={cn( 'relative flex size-10 shrink-0 overflow-hidden rounded-full',
"relative flex size-8 shrink-0 overflow-hidden rounded-full", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function AvatarImage({ type AvatarImageProps<T extends ValidComponent = 'img'> =
className, ImagePrimitive.ImageImgProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof AvatarPrimitive.Image>) { };
const AvatarImage = <T extends ValidComponent = 'img'>(
props: PolymorphicProps<T, AvatarImageProps<T>>
) => {
const [local, others] = splitProps(props as AvatarImageProps, ['class']);
return ( return (
<AvatarPrimitive.Image <ImagePrimitive.Img
data-slot="avatar-image" class={cn('aspect-square size-full', local.class)}
className={cn("aspect-square size-full", className)} {...others}
{...props}
/> />
) );
} };
function AvatarFallback({ type AvatarFallbackProps<T extends ValidComponent = 'span'> =
className, ImagePrimitive.ImageFallbackProps<T> & { class?: string | undefined };
...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) { const AvatarFallback = <T extends ValidComponent = 'span'>(
props: PolymorphicProps<T, AvatarFallbackProps<T>>
) => {
const [local, others] = splitProps(props as AvatarFallbackProps, ['class']);
return ( return (
<AvatarPrimitive.Fallback <ImagePrimitive.Fallback
data-slot="avatar-fallback" class={cn(
className={cn( 'flex size-full items-center justify-center bg-muted',
"bg-muted flex size-full items-center justify-center rounded-full", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
export { Avatar, AvatarImage, AvatarFallback } export { Avatar, AvatarImage, AvatarFallback };

156
apps/webui/src/components/ui/badge-delta.tsx Normal file
View File

@ -0,0 +1,156 @@
import type { Component, JSXElement } from 'solid-js';
import { createEffect, on, splitProps } from 'solid-js';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import type { BadgeProps } from '~/components/ui/badge';
import { Badge } from '~/components/ui/badge';
import { cn } from '~/utils/styles';
type DeltaType =
| 'increase'
| 'moderateIncrease'
| 'unchanged'
| 'moderateDecrease'
| 'decrease';
const badgeDeltaVariants = cva('', {
variants: {
variant: {
success: 'bg-success text-success-foreground hover:bg-success',
warning: 'bg-warning text-warning-foreground hover:bg-warning',
error: 'bg-error text-error-foreground hover:bg-error',
},
},
});
type DeltaVariant = NonNullable<
VariantProps<typeof badgeDeltaVariants>['variant']
>;
const iconMap: {
[key in DeltaType]: (props: { class?: string }) => JSXElement;
} = {
increase: (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={props.class}
>
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
),
moderateIncrease: (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={props.class}
>
<path d="M17 7l-10 10" />
<path d="M8 7l9 0l0 9" />
</svg>
),
unchanged: (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={props.class}
>
<path d="M5 12l14 0" />
<path d="M13 18l6 -6" />
<path d="M13 6l6 6" />
</svg>
),
moderateDecrease: (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={props.class}
>
<path d="M7 7l10 10" />
<path d="M17 8l0 9l-9 0" />
</svg>
),
decrease: (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={props.class}
>
<path d="M12 5l0 14" />
<path d="M18 13l-6 6" />
<path d="M6 13l6 6" />
</svg>
),
};
const variantMap: { [key in DeltaType]: DeltaVariant } = {
increase: 'success',
moderateIncrease: 'success',
unchanged: 'warning',
moderateDecrease: 'error',
decrease: 'error',
};
type BadgeDeltaProps = Omit<BadgeProps, 'variant'> & {
deltaType: DeltaType;
};
const BadgeDelta: Component<BadgeDeltaProps> = (props) => {
const [local, others] = splitProps(props, ['class', 'children', 'deltaType']);
// eslint-disable-next-line solid/reactivity
let Icon = iconMap[local.deltaType];
createEffect(
on(
() => local.deltaType,
() => {
Icon = iconMap[local.deltaType];
}
)
);
return (
<Badge
class={cn(
badgeDeltaVariants({ variant: variantMap[local.deltaType] }),
local.class
)}
{...others}
>
<span class="flex gap-1">
<Icon class="size-4" />
{local.children}
</span>
</Badge>
);
};
export { BadgeDelta };

62
apps/webui/src/components/ui/badge.tsx
View File

@ -1,46 +1,48 @@
import * as React from "react" import type { Component, ComponentProps } from 'solid-js';
import { Slot } from "@radix-ui/react-slot" import { splitProps } from 'solid-js';
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils" import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { cn } from '~/utils/styles';
const badgeVariants = cva( const badgeVariants = cva(
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", 'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{ {
variants: { variants: {
variant: { variant: {
default: default: 'border-transparent bg-primary text-primary-foreground',
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", secondary: 'border-transparent bg-secondary text-secondary-foreground',
secondary: outline: 'text-foreground',
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", success: 'border-success-foreground bg-success text-success-foreground',
destructive: warning: 'border-warning-foreground bg-warning text-warning-foreground',
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", error: 'border-error-foreground bg-error text-error-foreground',
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
}, },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
}, },
} }
) );
function Badge({ type BadgeProps = ComponentProps<'div'> &
className, VariantProps<typeof badgeVariants> & {
variant, round?: boolean;
asChild = false, };
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span"
const Badge: Component<BadgeProps> = (props) => {
const [local, others] = splitProps(props, ['class', 'variant', 'round']);
return ( return (
<Comp <div
data-slot="badge" class={cn(
className={cn(badgeVariants({ variant }), className)} badgeVariants({ variant: local.variant }),
{...props} local.round && 'rounded-full',
local.class
)}
{...others}
/> />
) );
} };
export { Badge, badgeVariants } export type { BadgeProps };
export { Badge, badgeVariants };

111
apps/webui/src/components/ui/bar-list.tsx Normal file
View File

@ -0,0 +1,111 @@
import type { ComponentProps, JSX } from 'solid-js';
import { For, Show, mergeProps, splitProps } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import { cn } from '~/utils/styles';
type Bar<T> = T & {
value: number;
name: JSX.Element;
icon?: (props: ComponentProps<'svg'>) => JSX.Element;
href?: string;
target?: string;
};
type SortOrder = 'ascending' | 'descending' | 'none';
type ValueFormatter = (value: number) => string;
const defaultValueFormatter: ValueFormatter = (value: number) =>
value.toString();
type BarListProps<T> = ComponentProps<'div'> & {
data: Bar<T>[];
valueFormatter?: ValueFormatter;
sortOrder?: SortOrder;
};
const BarList = <T,>(rawProps: BarListProps<T>) => {
const props = mergeProps(
{
valueFormatter: defaultValueFormatter,
sortOrder: 'descending' as SortOrder,
},
rawProps
);
const [local, others] = splitProps(props, [
'class',
'data',
'valueFormatter',
'sortOrder',
]);
const sortedData = () => {
if (local.sortOrder === 'none') {
return local.data;
}
return local.data.sort((a, b) =>
local.sortOrder === 'ascending' ? a.value - b.value : b.value - a.value
);
};
const widths = () => {
const maxValue = Math.max(...sortedData().map((item) => item.value), 0);
return sortedData().map((item) =>
item.value === 0 ? 0 : Math.max((item.value / maxValue) * 100, 2)
);
};
return (
<div
class={cn('flex flex-col space-y-1.5', local.class)}
aria-sort={local.sortOrder}
{...others}
>
<For each={sortedData()}>
{(bar, idx) => {
return (
<div class="row flex w-full justify-between space-x-6">
<div class="grow">
<div
class={cn(
'flex h-8 items-center rounded-md bg-secondary px-2'
)}
style={{
width: `${widths()[idx()]}%`,
}}
>
<Show when={bar.icon}>
{(icon) => (
<Dynamic
component={icon()}
class="mr-2 size-5 flex-none"
/>
)}
</Show>
<Show when={bar.href} fallback={<p>{bar.name}</p>}>
{(href) => (
<a
href={href()}
target={bar.target ?? '_blank'}
rel="noreferrer"
class="hover:underline"
>
{bar.name}
</a>
)}
</Show>
</div>
</div>
<div class="flex items-center">
{local.valueFormatter(bar.value)}
</div>
</div>
);
}}
</For>
</div>
);
};
export { BarList };

176
apps/webui/src/components/ui/breadcrumb.tsx
View File

@ -1,109 +1,125 @@
import * as React from "react" import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import { Slot } from "@radix-ui/react-slot" import { Show, splitProps } from 'solid-js';
import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/styles/utils" import type { PolymorphicProps } from '@kobalte/core';
import * as BreadcrumbPrimitive from '@kobalte/core/breadcrumbs';
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { import { cn } from '~/utils/styles';
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { const Breadcrumb = BreadcrumbPrimitive.Root;
const BreadcrumbList: Component<ComponentProps<'ol'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<ol <ol
data-slot="breadcrumb-list" class={cn(
className={cn( 'flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5',
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) { const BreadcrumbItem: Component<ComponentProps<'li'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<li <li
data-slot="breadcrumb-item" class={cn('inline-flex items-center gap-1.5', local.class)}
className={cn("inline-flex items-center gap-1.5", className)} {...others}
{...props}
/> />
) );
} };
function BreadcrumbLink({ type BreadcrumbLinkProps<T extends ValidComponent = 'a'> =
asChild, BreadcrumbPrimitive.BreadcrumbsLinkProps<T> & { class?: string | undefined };
className,
...props
}: React.ComponentProps<"a"> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot : "a"
const BreadcrumbLink = <T extends ValidComponent = 'a'>(
props: PolymorphicProps<T, BreadcrumbLinkProps<T>>
) => {
const [local, others] = splitProps(props as BreadcrumbLinkProps, ['class']);
return ( return (
<Comp <BreadcrumbPrimitive.Link
data-slot="breadcrumb-link" class={cn(
className={cn("hover:text-foreground transition-colors", className)} 'transition-colors hover:text-foreground data-[current]:font-normal data-[current]:text-foreground',
{...props} local.class
)}
{...others}
/> />
) );
} };
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { type BreadcrumbSeparatorProps<T extends ValidComponent = 'span'> =
BreadcrumbPrimitive.BreadcrumbsSeparatorProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const BreadcrumbSeparator = <T extends ValidComponent = 'span'>(
props: PolymorphicProps<T, BreadcrumbSeparatorProps<T>>
) => {
const [local, others] = splitProps(props as BreadcrumbSeparatorProps, [
'class',
'children',
]);
return (
<BreadcrumbPrimitive.Separator
class={cn('[&>svg]:size-3.5', local.class)}
{...others}
>
<Show
when={local.children}
fallback={
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 6l6 6l-6 6" />
</svg>
}
>
{local.children}
</Show>
</BreadcrumbPrimitive.Separator>
);
};
const BreadcrumbEllipsis: Component<ComponentProps<'span'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<span <span
data-slot="breadcrumb-page" class={cn('flex size-9 items-center justify-center', local.class)}
role="link" {...others}
aria-disabled="true"
aria-current="page"
className={cn("text-foreground font-normal", className)}
{...props}
/>
)
}
function BreadcrumbSeparator({
children,
className,
...props
}: React.ComponentProps<"li">) {
return (
<li
data-slot="breadcrumb-separator"
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
{...props}
> >
{children ?? <ChevronRight />} <svg
</li> xmlns="http://www.w3.org/2000/svg"
) viewBox="0 0 24 24"
} fill="none"
stroke="currentColor"
function BreadcrumbEllipsis({ stroke-width="2"
className, stroke-linecap="round"
...props stroke-linejoin="round"
}: React.ComponentProps<"span">) { class="size-4"
return (
<span
data-slot="breadcrumb-ellipsis"
role="presentation"
aria-hidden="true"
className={cn("flex size-9 items-center justify-center", className)}
{...props}
> >
<MoreHorizontal className="size-4" /> <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<span className="sr-only">More</span> <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
<span class="sr-only">More</span>
</span> </span>
) );
} };
export { export {
Breadcrumb, Breadcrumb,
BreadcrumbList, BreadcrumbList,
BreadcrumbItem, BreadcrumbItem,
BreadcrumbLink, BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator, BreadcrumbSeparator,
BreadcrumbEllipsis, BreadcrumbEllipsis,
} };

82
apps/webui/src/components/ui/button.tsx
View File

@ -1,59 +1,67 @@
import * as React from "react" import type { JSX, ValidComponent } from 'solid-js';
import { Slot } from "@radix-ui/react-slot" import { splitProps } from 'solid-js';
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils" import * as ButtonPrimitive from '@kobalte/core/button';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { cn } from '~/utils/styles';
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{ {
variants: { variants: {
variant: { variant: {
default: default: 'bg-primary text-primary-foreground hover:bg-primary/90',
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", 'border border-input hover:bg-accent hover:text-accent-foreground',
secondary: secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: ghost: 'hover:bg-accent hover:text-accent-foreground',
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: 'text-primary underline-offset-4 hover:underline',
link: "text-primary underline-offset-4 hover:underline",
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: 'h-10 px-4 py-2',
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", sm: 'h-9 px-3 text-xs',
lg: "h-10 rounded-md px-6 has-[>svg]:px-4", lg: 'h-11 px-8',
icon: "size-9", icon: 'size-10',
}, },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
size: "default", size: 'default',
}, },
} }
) );
function Button({ type ButtonProps<T extends ValidComponent = 'button'> =
className, ButtonPrimitive.ButtonRootProps<T> &
variant,
size,
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & { VariantProps<typeof buttonVariants> & {
asChild?: boolean class?: string | undefined;
}) { children?: JSX.Element;
const Comp = asChild ? Slot : "button" };
const Button = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, ButtonProps<T>>
) => {
const [local, others] = splitProps(props as ButtonProps, [
'variant',
'size',
'class',
]);
return ( return (
<Comp <ButtonPrimitive.Root
data-slot="button" class={cn(
className={cn(buttonVariants({ variant, size, className }))} buttonVariants({ variant: local.variant, size: local.size }),
{...props} local.class
)}
{...others}
/> />
) );
} };
export { Button, buttonVariants } export type { ButtonProps };
export { Button, buttonVariants };

73
apps/webui/src/components/ui/calendar.tsx
View File

@ -1,73 +0,0 @@
import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import { cn } from "@/styles/utils"
import { buttonVariants } from "@/components/ui/button"
function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: React.ComponentProps<typeof DayPicker>) {
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row gap-2",
month: "flex flex-col gap-4",
caption: "flex justify-center pt-1 relative items-center w-full",
caption_label: "text-sm font-medium",
nav: "flex items-center gap-1",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-x-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
cell: cn(
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
props.mode === "range"
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
: "[&:has([aria-selected])]:rounded-md"
),
day: cn(
buttonVariants({ variant: "ghost" }),
"size-8 p-0 font-normal aria-selected:opacity-100"
),
day_range_start:
"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
day_range_end:
"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground aria-selected:text-muted-foreground",
day_disabled: "text-muted-foreground opacity-50",
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
components={{
IconLeft: ({ className, ...props }) => (
<ChevronLeft className={cn("size-4", className)} {...props} />
),
IconRight: ({ className, ...props }) => (
<ChevronRight className={cn("size-4", className)} {...props} />
),
}}
{...props}
/>
)
}
export { Calendar }

46
apps/webui/src/components/ui/callout.tsx Normal file
View File

@ -0,0 +1,46 @@
import type { Component, ComponentProps } from 'solid-js';
import { splitProps } from 'solid-js';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { cn } from '~/utils/styles';
const calloutVariants = cva('rounded-md border-l-4 p-2 pl-4', {
variants: {
variant: {
default: 'border-info-foreground bg-info text-info-foreground',
success: 'border-success-foreground bg-success text-success-foreground',
warning: 'border-warning-foreground bg-warning text-warning-foreground',
error: 'border-error-foreground bg-error text-error-foreground',
},
},
defaultVariants: {
variant: 'default',
},
});
type CalloutProps = ComponentProps<'div'> &
VariantProps<typeof calloutVariants>;
const Callout: Component<CalloutProps> = (props) => {
const [local, others] = splitProps(props, ['class', 'variant']);
return (
<div
class={cn(calloutVariants({ variant: local.variant }), local.class)}
{...others}
/>
);
};
const CalloutTitle: Component<ComponentProps<'h3'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return <h3 class={cn('font-semibold', local.class)} {...others} />;
};
const CalloutContent: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return <div class={cn('mt-2', local.class)} {...others} />;
};
export { Callout, CalloutTitle, CalloutContent };

101
apps/webui/src/components/ui/card.tsx
View File

@ -1,92 +1,65 @@
import type * as React from 'react'; import type { Component, ComponentProps } from 'solid-js';
import { splitProps } from 'solid-js';
import { cn } from '@/styles/utils'; import { cn } from '~/utils/styles';
function Card({ className, ...props }: React.ComponentProps<'div'>) { const Card: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <div
data-slot="card" class={cn(
className={cn( 'rounded-lg border bg-card text-card-foreground shadow-sm',
'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm', local.class
className
)} )}
{...props} {...others}
/> />
); );
} };
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { const CardHeader: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <div class={cn('flex flex-col space-y-1.5 p-6', local.class)} {...others} />
data-slot="card-header" );
className={cn( };
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
className const CardTitle: Component<ComponentProps<'h3'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return (
<h3
class={cn(
'font-semibold text-lg leading-none tracking-tight',
local.class
)} )}
{...props} {...others}
/> />
); );
} };
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { const CardDescription: Component<ComponentProps<'p'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <p class={cn('text-muted-foreground text-sm', local.class)} {...others} />
data-slot="card-title"
className={cn('font-semibold leading-none', className)}
{...props}
/>
); );
} };
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { const CardContent: Component<ComponentProps<'div'>> = (props) => {
return ( const [local, others] = splitProps(props, ['class']);
<div return <div class={cn('p-6 pt-0', local.class)} {...others} />;
data-slot="card-description" };
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
}
function CardAction({ className, ...props }: React.ComponentProps<'div'>) { const CardFooter: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <div class={cn('flex items-center p-6 pt-0', local.class)} {...others} />
data-slot="card-action"
className={cn(
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
className
)}
{...props}
/>
); );
} };
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-content"
className={cn('px-6', className)}
{...props}
/>
);
}
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-footer"
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
{...props}
/>
);
}
export { export {
Card, Card,
CardHeader, CardHeader,
CardFooter, CardFooter,
CardTitle, CardTitle,
CardAction,
CardDescription, CardDescription,
CardContent, CardContent,
}; };

388
apps/webui/src/components/ui/carousel.tsx
View File

@ -1,241 +1,285 @@
"use client" import type { Accessor, Component, ComponentProps, VoidProps } from 'solid-js';
import {
createContext,
createEffect,
createMemo,
createSignal,
mergeProps,
splitProps,
useContext,
} from 'solid-js';
import * as React from "react" import type { CreateEmblaCarouselType } from 'embla-carousel-solid';
import useEmblaCarousel, { import createEmblaCarousel from 'embla-carousel-solid';
type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"
import { cn } from "@/styles/utils" import type { ButtonProps } from '~/components/ui/button';
import { Button } from "@/components/ui/button" import { Button } from '~/components/ui/button';
import { cn } from '~/utils/styles';
type CarouselApi = UseEmblaCarouselType[1] export type CarouselApi = CreateEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0] type UseCarouselParameters = Parameters<typeof createEmblaCarousel>;
type CarouselPlugin = UseCarouselParameters[1] type CarouselOptions = NonNullable<UseCarouselParameters[0]>;
type CarouselPlugin = NonNullable<UseCarouselParameters[1]>;
type CarouselProps = { type CarouselProps = {
opts?: CarouselOptions opts?: ReturnType<CarouselOptions>;
plugins?: CarouselPlugin plugins?: ReturnType<CarouselPlugin>;
orientation?: "horizontal" | "vertical" orientation?: 'horizontal' | 'vertical';
setApi?: (api: CarouselApi) => void setApi?: (api: CarouselApi) => void;
} };
type CarouselContextProps = { type CarouselContextProps = {
carouselRef: ReturnType<typeof useEmblaCarousel>[0] carouselRef: ReturnType<typeof createEmblaCarousel>[0];
api: ReturnType<typeof useEmblaCarousel>[1] api: ReturnType<typeof createEmblaCarousel>[1];
scrollPrev: () => void scrollPrev: () => void;
scrollNext: () => void scrollNext: () => void;
canScrollPrev: boolean canScrollPrev: Accessor<boolean>;
canScrollNext: boolean canScrollNext: Accessor<boolean>;
} & CarouselProps } & CarouselProps;
const CarouselContext = React.createContext<CarouselContextProps | null>(null) const CarouselContext = createContext<Accessor<CarouselContextProps> | null>(
null
);
function useCarousel() { const useCarousel = () => {
const context = React.useContext(CarouselContext) const context = useContext(CarouselContext);
if (!context) { if (!context) {
throw new Error("useCarousel must be used within a <Carousel />") throw new Error('useCarousel must be used within a <Carousel />');
} }
return context return context();
} };
function Carousel({ const Carousel: Component<CarouselProps & ComponentProps<'div'>> = (
orientation = "horizontal", rawProps
opts, ) => {
setApi, const props = mergeProps<(CarouselProps & ComponentProps<'div'>)[]>(
plugins, { orientation: 'horizontal' },
className, rawProps
children, );
...props
}: React.ComponentProps<"div"> & CarouselProps) {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins
)
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
const [canScrollNext, setCanScrollNext] = React.useState(false)
const onSelect = React.useCallback((api: CarouselApi) => { const [local, others] = splitProps(props, [
if (!api) return 'orientation',
setCanScrollPrev(api.canScrollPrev()) 'opts',
setCanScrollNext(api.canScrollNext()) 'setApi',
}, []) 'plugins',
'class',
'children',
]);
const scrollPrev = React.useCallback(() => { const [carouselRef, api] = createEmblaCarousel(
api?.scrollPrev() () => ({
}, [api]) ...local.opts,
axis: local.orientation === 'horizontal' ? 'x' : 'y',
}),
() => (local.plugins === undefined ? [] : local.plugins)
);
const [canScrollPrev, setCanScrollPrev] = createSignal(false);
const [canScrollNext, setCanScrollNext] = createSignal(false);
const scrollNext = React.useCallback(() => { const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
api?.scrollNext() setCanScrollPrev(api.canScrollPrev());
}, [api]) setCanScrollNext(api.canScrollNext());
};
const handleKeyDown = React.useCallback( const scrollPrev = () => {
(event: React.KeyboardEvent<HTMLDivElement>) => { api()?.scrollPrev();
if (event.key === "ArrowLeft") { };
event.preventDefault()
scrollPrev() const scrollNext = () => {
} else if (event.key === "ArrowRight") { api()?.scrollNext();
event.preventDefault() };
scrollNext()
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'ArrowLeft') {
event.preventDefault();
scrollPrev();
} else if (event.key === 'ArrowRight') {
event.preventDefault();
scrollNext();
} }
}, };
[scrollPrev, scrollNext]
)
React.useEffect(() => { createEffect(() => {
if (!api || !setApi) return if (!api() || !local.setApi) {
setApi(api) return;
}, [api, setApi]) }
local.setApi(api);
});
React.useEffect(() => { createEffect(() => {
if (!api) return if (!api()) {
onSelect(api) return;
api.on("reInit", onSelect) }
api.on("select", onSelect)
onSelect(api()!);
api()!.on('reInit', onSelect);
api()!.on('select', onSelect);
return () => { return () => {
api?.off("select", onSelect) api()?.off('select', onSelect);
} };
}, [api, onSelect]) });
return ( const value = createMemo(
<CarouselContext.Provider () =>
value={{ ({
carouselRef, carouselRef,
api: api, api,
opts, opts: local.opts,
orientation: orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"), local.orientation ||
(local.opts?.axis === 'y' ? 'vertical' : 'horizontal'),
scrollPrev, scrollPrev,
scrollNext, scrollNext,
canScrollPrev, canScrollPrev,
canScrollNext, canScrollNext,
}} }) satisfies CarouselContextProps
> );
<div
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
data-slot="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
)
}
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
const { carouselRef, orientation } = useCarousel()
return ( return (
<CarouselContext.Provider value={value}>
<div <div
ref={carouselRef} onKeyDown={handleKeyDown}
className="overflow-hidden" class={cn('relative', local.class)}
data-slot="carousel-content" role="region"
aria-roledescription="carousel"
{...others}
> >
{local.children}
</div>
</CarouselContext.Provider>
);
};
const CarouselContent: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
const { carouselRef, orientation } = useCarousel();
return (
<div ref={carouselRef} class="overflow-hidden">
<div <div
className={cn( class={cn(
"flex", 'flex',
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
className local.class
)} )}
{...props} {...others}
/> />
</div> </div>
) );
} };
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) { const CarouselItem: Component<ComponentProps<'div'>> = (props) => {
const { orientation } = useCarousel() const [local, others] = splitProps(props, ['class']);
const { orientation } = useCarousel();
return ( return (
<div <div
role="group" role="group"
aria-roledescription="slide" aria-roledescription="slide"
data-slot="carousel-item" class={cn(
className={cn( 'min-w-0 shrink-0 grow-0 basis-full',
"min-w-0 shrink-0 grow-0 basis-full", orientation === 'horizontal' ? 'pl-4' : 'pt-4',
orientation === "horizontal" ? "pl-4" : "pt-4", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function CarouselPrevious({ type CarouselButtonProps = VoidProps<ButtonProps>;
className,
variant = "outline", const CarouselPrevious: Component<CarouselButtonProps> = (rawProps) => {
size = "icon", const props = mergeProps<CarouselButtonProps[]>(
...props { variant: 'outline', size: 'icon' },
}: React.ComponentProps<typeof Button>) { rawProps
const { orientation, scrollPrev, canScrollPrev } = useCarousel() );
const [local, others] = splitProps(props, ['class', 'variant', 'size']);
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return ( return (
<Button <Button
data-slot="carousel-previous" variant={local.variant}
variant={variant} size={local.size}
size={size} class={cn(
className={cn( 'absolute size-8 touch-manipulation rounded-full',
"absolute size-8 rounded-full", orientation === 'horizontal'
orientation === "horizontal" ? '-left-12 -translate-y-1/2 top-1/2'
? "top-1/2 -left-12 -translate-y-1/2" : '-top-12 -translate-x-1/2 left-1/2 rotate-90',
: "-top-12 left-1/2 -translate-x-1/2 rotate-90", local.class
className
)} )}
disabled={!canScrollPrev} disabled={!canScrollPrev()}
onClick={scrollPrev} onClick={scrollPrev}
{...props} {...others}
> >
<ArrowLeft /> <svg
<span className="sr-only">Previous slide</span> xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M5 12l14 0" />
<path d="M5 12l6 6" />
<path d="M5 12l6 -6" />
</svg>
<span class="sr-only">Previous slide</span>
</Button> </Button>
) );
} };
function CarouselNext({ const CarouselNext: Component<CarouselButtonProps> = (rawProps) => {
className, const props = mergeProps<CarouselButtonProps[]>(
variant = "outline", { variant: 'outline', size: 'icon' },
size = "icon", rawProps
...props );
}: React.ComponentProps<typeof Button>) { const [local, others] = splitProps(props, ['class', 'variant', 'size']);
const { orientation, scrollNext, canScrollNext } = useCarousel() const { orientation, scrollNext, canScrollNext } = useCarousel();
return ( return (
<Button <Button
data-slot="carousel-next" variant={local.variant}
variant={variant} size={local.size}
size={size} class={cn(
className={cn( 'absolute size-8 touch-manipulation rounded-full',
"absolute size-8 rounded-full", orientation === 'horizontal'
orientation === "horizontal" ? '-right-12 -translate-y-1/2 top-1/2'
? "top-1/2 -right-12 -translate-y-1/2" : '-bottom-12 -translate-x-1/2 left-1/2 rotate-90',
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", local.class
className
)} )}
disabled={!canScrollNext} disabled={!canScrollNext()}
onClick={scrollNext} onClick={scrollNext}
{...props} {...others}
> >
<ArrowRight /> <svg
<span className="sr-only">Next slide</span> xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M5 12l14 0" />
<path d="M13 18l6 -6" />
<path d="M13 6l6 6" />
</svg>
<span class="sr-only">Next slide</span>
</Button> </Button>
) );
} };
export { export {
type CarouselApi,
Carousel, Carousel,
CarouselContent, CarouselContent,
CarouselItem, CarouselItem,
CarouselPrevious, CarouselPrevious,
CarouselNext, CarouselNext,
} };

351
apps/webui/src/components/ui/chart.tsx
View File

@ -1,351 +0,0 @@
import * as React from "react"
import * as RechartsPrimitive from "recharts"
import { cn } from "@/styles/utils"
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const
export type ChartConfig = {
[k in string]: {
label?: React.ReactNode
icon?: React.ComponentType
} & (
| { color?: string; theme?: never }
| { color?: never; theme: Record<keyof typeof THEMES, string> }
)
}
type ChartContextProps = {
config: ChartConfig
}
const ChartContext = React.createContext<ChartContextProps | null>(null)
function useChart() {
const context = React.useContext(ChartContext)
if (!context) {
throw new Error("useChart must be used within a <ChartContainer />")
}
return context
}
function ChartContainer({
id,
className,
children,
config,
...props
}: React.ComponentProps<"div"> & {
config: ChartConfig
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>["children"]
}) {
const uniqueId = React.useId()
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
return (
<ChartContext.Provider value={{ config }}>
<div
data-slot="chart"
data-chart={chartId}
className={cn(
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
className
)}
{...props}
>
<ChartStyle id={chartId} config={config} />
<RechartsPrimitive.ResponsiveContainer>
{children}
</RechartsPrimitive.ResponsiveContainer>
</div>
</ChartContext.Provider>
)
}
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
const colorConfig = Object.entries(config).filter(
([, config]) => config.theme || config.color
)
if (!colorConfig.length) {
return null
}
return (
<style
dangerouslySetInnerHTML={{
__html: Object.entries(THEMES)
.map(
([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
itemConfig.color
return color ? ` --color-${key}: ${color};` : null
})
.join("\n")}
}
`
)
.join("\n"),
}}
/>
)
}
const ChartTooltip = RechartsPrimitive.Tooltip
function ChartTooltipContent({
active,
payload,
className,
indicator = "dot",
hideLabel = false,
hideIndicator = false,
label,
labelFormatter,
labelClassName,
formatter,
color,
nameKey,
labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
React.ComponentProps<"div"> & {
hideLabel?: boolean
hideIndicator?: boolean
indicator?: "line" | "dot" | "dashed"
nameKey?: string
labelKey?: string
}) {
const { config } = useChart()
const tooltipLabel = React.useMemo(() => {
if (hideLabel || !payload?.length) {
return null
}
const [item] = payload
const key = `${labelKey || item?.dataKey || item?.name || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const value =
!labelKey && typeof label === "string"
? config[label as keyof typeof config]?.label || label
: itemConfig?.label
if (labelFormatter) {
return (
<div className={cn("font-medium", labelClassName)}>
{labelFormatter(value, payload)}
</div>
)
}
if (!value) {
return null
}
return <div className={cn("font-medium", labelClassName)}>{value}</div>
}, [
label,
labelFormatter,
payload,
hideLabel,
labelClassName,
config,
labelKey,
])
if (!active || !payload?.length) {
return null
}
const nestLabel = payload.length === 1 && indicator !== "dot"
return (
<div
className={cn(
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
className
)}
>
{!nestLabel ? tooltipLabel : null}
<div className="grid gap-1.5">
{payload.map((item, index) => {
const key = `${nameKey || item.name || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const indicatorColor = color || item.payload.fill || item.color
return (
<div
key={item.dataKey}
className={cn(
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
indicator === "dot" && "items-center"
)}
>
{formatter && item?.value !== undefined && item.name ? (
formatter(item.value, item.name, item, index, item.payload)
) : (
<>
{itemConfig?.icon ? (
<itemConfig.icon />
) : (
!hideIndicator && (
<div
className={cn(
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
{
"h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line",
"w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
"my-0.5": nestLabel && indicator === "dashed",
}
)}
style={
{
"--color-bg": indicatorColor,
"--color-border": indicatorColor,
} as React.CSSProperties
}
/>
)
)}
<div
className={cn(
"flex flex-1 justify-between leading-none",
nestLabel ? "items-end" : "items-center"
)}
>
<div className="grid gap-1.5">
{nestLabel ? tooltipLabel : null}
<span className="text-muted-foreground">
{itemConfig?.label || item.name}
</span>
</div>
{item.value && (
<span className="text-foreground font-mono font-medium tabular-nums">
{item.value.toLocaleString()}
</span>
)}
</div>
</>
)}
</div>
)
})}
</div>
</div>
)
}
const ChartLegend = RechartsPrimitive.Legend
function ChartLegendContent({
className,
hideIcon = false,
payload,
verticalAlign = "bottom",
nameKey,
}: React.ComponentProps<"div"> &
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
hideIcon?: boolean
nameKey?: string
}) {
const { config } = useChart()
if (!payload?.length) {
return null
}
return (
<div
className={cn(
"flex items-center justify-center gap-4",
verticalAlign === "top" ? "pb-3" : "pt-3",
className
)}
>
{payload.map((item) => {
const key = `${nameKey || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
return (
<div
key={item.value}
className={cn(
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
)}
>
{itemConfig?.icon && !hideIcon ? (
<itemConfig.icon />
) : (
<div
className="h-2 w-2 shrink-0 rounded-[2px]"
style={{
backgroundColor: item.color,
}}
/>
)}
{itemConfig?.label}
</div>
)
})}
</div>
)
}
// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
config: ChartConfig,
payload: unknown,
key: string
) {
if (typeof payload !== "object" || payload === null) {
return undefined
}
const payloadPayload =
"payload" in payload &&
typeof payload.payload === "object" &&
payload.payload !== null
? payload.payload
: undefined
let configLabelKey: string = key
if (
key in payload &&
typeof payload[key as keyof typeof payload] === "string"
) {
configLabelKey = payload[key as keyof typeof payload] as string
} else if (
payloadPayload &&
key in payloadPayload &&
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
) {
configLabelKey = payloadPayload[
key as keyof typeof payloadPayload
] as string
}
return configLabelKey in config
? config[configLabelKey]
: config[key as keyof typeof config]
}
export {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
ChartStyle,
}

292
apps/webui/src/components/ui/charts.tsx Normal file
View File

@ -0,0 +1,292 @@
import type { Component } from "solid-js"
import { createEffect, createSignal, mergeProps, on, onCleanup, onMount } from "solid-js"
import { unwrap } from "solid-js/store"
import type { Ref } from "@solid-primitives/refs"
import { mergeRefs } from "@solid-primitives/refs"
import type {
ChartComponent,
ChartData,
ChartItem,
ChartOptions,
Plugin as ChartPlugin,
ChartType,
ChartTypeRegistry,
TooltipModel
} from "chart.js"
import {
ArcElement,
BarController,
BarElement,
BubbleController,
CategoryScale,
Chart,
Colors,
DoughnutController,
Filler,
Legend,
LinearScale,
LineController,
LineElement,
PieController,
PointElement,
PolarAreaController,
RadarController,
RadialLinearScale,
ScatterController,
Tooltip
} from "chart.js"
type TypedChartProps = {
data: ChartData
options?: ChartOptions
plugins?: ChartPlugin[]
ref?: Ref<HTMLCanvasElement | null>
width?: number | undefined
height?: number | undefined
}
type ChartProps = TypedChartProps & {
type: ChartType
}
type ChartContext = {
chart: Chart
tooltip: TooltipModel<keyof ChartTypeRegistry>
}
const BaseChart: Component<ChartProps> = (rawProps) => {
const [canvasRef, setCanvasRef] = createSignal<HTMLCanvasElement | null>()
const [chart, setChart] = createSignal<Chart>()
const props = mergeProps(
{
width: 512,
height: 512,
options: { responsive: true } as ChartOptions,
plugins: [] as ChartPlugin[]
},
rawProps
)
const init = () => {
const ctx = canvasRef()?.getContext("2d") as ChartItem
const config = unwrap(props)
const chart = new Chart(ctx, {
type: config.type,
data: config.data,
options: config.options,
plugins: config.plugins
})
setChart(chart)
}
onMount(() => init())
createEffect(
on(
() => props.data,
() => {
chart()!.data = props.data
chart()!.update()
},
{ defer: true }
)
)
createEffect(
on(
() => props.options,
() => {
chart()!.options = props.options
chart()!.update()
},
{ defer: true }
)
)
createEffect(
on(
[() => props.width, () => props.height],
() => {
chart()!.resize(props.width, props.height)
},
{ defer: true }
)
)
createEffect(
on(
() => props.type,
() => {
const dimensions = [chart()!.width, chart()!.height]
chart()!.destroy()
init()
chart()!.resize(...dimensions)
},
{ defer: true }
)
)
onCleanup(() => {
chart()?.destroy()
mergeRefs(props.ref, null)
})
Chart.register(Colors, Filler, Legend, Tooltip)
return (
<canvas
ref={mergeRefs(props.ref, (el) => setCanvasRef(el))}
height={props.height}
width={props.width}
/>
)
}
function showTooltip(context: ChartContext) {
let el = document.getElementById("chartjs-tooltip")
if (!el) {
el = document.createElement("div")
el.id = "chartjs-tooltip"
document.body.appendChild(el)
}
const model = context.tooltip
if (model.opacity === 0 || !model.body) {
el.style.opacity = "0"
return
}
el.className = `p-2 bg-card text-card-foreground rounded-lg border shadow-sm text-sm ${
model.yAlign ?? `no-transform`
}`
let content = ""
model.title.forEach((title) => {
content += `<h3 class="font-semibold leading-none tracking-tight">${title}</h3>`
})
content += `<div class="mt-1 text-muted-foreground">`
const body = model.body.flatMap((body) => body.lines)
body.forEach((line, i) => {
const colors = model.labelColors[i]
content += `
<div class="flex items-center">
<span class="inline-block h-2 w-2 mr-1 rounded-full border" style="background: ${colors.backgroundColor}; border-color: ${colors.borderColor}"></span>
${line}
</div>`
})
content += `</div>`
el.innerHTML = content
const pos = context.chart.canvas.getBoundingClientRect()
el.style.opacity = "1"
el.style.position = "absolute"
el.style.left = `${pos.left + window.scrollX + model.caretX}px`
el.style.top = `${pos.top + window.scrollY + model.caretY}px`
el.style.pointerEvents = "none"
}
function createTypedChart(
type: ChartType,
components: ChartComponent[]
): Component<TypedChartProps> {
const chartsWithScales: ChartType[] = ["bar", "line", "scatter"]
const chartsWithLegends: ChartType[] = ["bar", "line"]
const options: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
scales: chartsWithScales.includes(type)
? {
x: {
border: { display: false },
grid: { display: false }
},
y: {
border: {
dash: [3],
dashOffset: 3,
display: false
},
grid: {
color: "hsla(240, 3.8%, 46.1%, 0.4)"
}
}
}
: {},
plugins: {
legend: chartsWithLegends.includes(type)
? {
display: true,
align: "end",
labels: {
usePointStyle: true,
boxWidth: 6,
boxHeight: 6,
color: "hsl(240, 3.8%, 46.1%)",
font: { size: 14 }
}
}
: { display: false },
tooltip: {
enabled: false,
external: (context) => showTooltip(context)
}
}
}
Chart.register(...components)
return (props) => <BaseChart type={type} options={options} {...props} />
}
const BarChart = /* #__PURE__ */ createTypedChart("bar", [
BarController,
BarElement,
CategoryScale,
LinearScale
])
const BubbleChart = /* #__PURE__ */ createTypedChart("bubble", [
BubbleController,
PointElement,
LinearScale
])
const DonutChart = /* #__PURE__ */ createTypedChart("doughnut", [DoughnutController, ArcElement])
const LineChart = /* #__PURE__ */ createTypedChart("line", [
LineController,
LineElement,
PointElement,
CategoryScale,
LinearScale
])
const PieChart = /* #__PURE__ */ createTypedChart("pie", [PieController, ArcElement])
const PolarAreaChart = /* #__PURE__ */ createTypedChart("polarArea", [
PolarAreaController,
ArcElement,
RadialLinearScale
])
const RadarChart = /* #__PURE__ */ createTypedChart("radar", [
RadarController,
LineElement,
PointElement,
RadialLinearScale
])
const ScatterChart = /* #__PURE__ */ createTypedChart("scatter", [
ScatterController,
PointElement,
LinearScale
])
export {
BaseChart as Chart,
BarChart,
BubbleChart,
DonutChart,
LineChart,
PieChart,
PolarAreaChart,
RadarChart,
ScatterChart
}

72
apps/webui/src/components/ui/checkbox.tsx
View File

@ -1,32 +1,60 @@
"use client" import type { ValidComponent } from 'solid-js';
import { Match, Switch, splitProps } from 'solid-js';
import * as React from "react" import * as CheckboxPrimitive from '@kobalte/core/checkbox';
import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { CheckIcon } from "lucide-react"
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function Checkbox({ type CheckboxRootProps<T extends ValidComponent = 'div'> =
className, CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined };
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) { const Checkbox = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, CheckboxRootProps<T>>
) => {
const [local, others] = splitProps(props as CheckboxRootProps, ['class']);
return ( return (
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
data-slot="checkbox" class={cn('items-top group relative flex space-x-2', local.class)}
className={cn( {...others}
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
> >
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Input class="peer" />
data-slot="checkbox-indicator" <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground">
className="flex items-center justify-center text-current transition-none" <CheckboxPrimitive.Indicator>
<Switch>
<Match when={!others.indeterminate}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
> >
<CheckIcon className="size-3.5" /> <path d="M5 12l5 5l10 -10" />
</svg>
</Match>
<Match when={others.indeterminate}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M5 12l14 0" />
</svg>
</Match>
</Switch>
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Control>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
) );
} };
export { Checkbox } export { Checkbox };

30
apps/webui/src/components/ui/collapsible.tsx
View File

@ -1,31 +1,9 @@
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" import * as CollapsiblePrimitive from "@kobalte/core/collapsible"
function Collapsible({ const Collapsible = CollapsiblePrimitive.Root
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}
function CollapsibleTrigger({ const CollapsibleTrigger = CollapsiblePrimitive.Trigger
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
)
}
function CollapsibleContent({ const CollapsibleContent = CollapsiblePrimitive.Content
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
{...props}
/>
)
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent } export { Collapsible, CollapsibleTrigger, CollapsibleContent }

203
apps/webui/src/components/ui/combobox.tsx Normal file
View File

@ -0,0 +1,203 @@
import type { JSX, ValidComponent } from 'solid-js';
import { Show, splitProps } from 'solid-js';
import * as ComboboxPrimitive from '@kobalte/core/combobox';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { cn } from '~/utils/styles';
const Combobox = ComboboxPrimitive.Root;
const ComboboxItemLabel = ComboboxPrimitive.ItemLabel;
const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect;
type ComboboxItemProps<T extends ValidComponent = 'li'> =
ComboboxPrimitive.ComboboxItemProps<T> & {
class?: string | undefined;
};
const ComboboxItem = <T extends ValidComponent = 'li'>(
props: PolymorphicProps<T, ComboboxItemProps<T>>
) => {
const [local, others] = splitProps(props as ComboboxItemProps, ['class']);
return (
<ComboboxPrimitive.Item
class={cn(
'relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
local.class
)}
{...others}
/>
);
};
type ComboboxItemIndicatorProps<T extends ValidComponent = 'div'> =
ComboboxPrimitive.ComboboxItemIndicatorProps<T> & {
children?: JSX.Element;
};
const ComboboxItemIndicator = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ComboboxItemIndicatorProps<T>>
) => {
const [local, others] = splitProps(props as ComboboxItemIndicatorProps, [
'children',
]);
return (
<ComboboxPrimitive.ItemIndicator {...others}>
<Show
when={local.children}
fallback={
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M5 12l5 5l10 -10" />
</svg>
}
>
{(children) => children()}
</Show>
</ComboboxPrimitive.ItemIndicator>
);
};
type ComboboxSectionProps<T extends ValidComponent = 'li'> =
ComboboxPrimitive.ComboboxSectionProps<T> & { class?: string | undefined };
const ComboboxSection = <T extends ValidComponent = 'li'>(
props: PolymorphicProps<T, ComboboxSectionProps<T>>
) => {
const [local, others] = splitProps(props as ComboboxSectionProps, ['class']);
return (
<ComboboxPrimitive.Section
class={cn(
'overflow-hidden p-1 px-2 py-1.5 font-medium text-muted-foreground text-xs ',
local.class
)}
{...others}
/>
);
};
type ComboboxControlProps<
U,
T extends ValidComponent = 'div',
> = ComboboxPrimitive.ComboboxControlProps<U, T> & {
class?: string | undefined;
};
const ComboboxControl = <T, U extends ValidComponent = 'div'>(
props: PolymorphicProps<U, ComboboxControlProps<T>>
) => {
const [local, others] = splitProps(props as ComboboxControlProps<T>, [
'class',
]);
return (
<ComboboxPrimitive.Control
class={cn('flex h-10 items-center rounded-md border px-3', local.class)}
{...others}
/>
);
};
type ComboboxInputProps<T extends ValidComponent = 'input'> =
ComboboxPrimitive.ComboboxInputProps<T> & { class?: string | undefined };
const ComboboxInput = <T extends ValidComponent = 'input'>(
props: PolymorphicProps<T, ComboboxInputProps<T>>
) => {
const [local, others] = splitProps(props as ComboboxInputProps, ['class']);
return (
<ComboboxPrimitive.Input
class={cn(
'flex size-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
local.class
)}
{...others}
/>
);
};
type ComboboxTriggerProps<T extends ValidComponent = 'button'> =
ComboboxPrimitive.ComboboxTriggerProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const ComboboxTrigger = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, ComboboxTriggerProps<T>>
) => {
const [local, others] = splitProps(props as ComboboxTriggerProps, [
'class',
'children',
]);
return (
<ComboboxPrimitive.Trigger
class={cn('size-4 opacity-50', local.class)}
{...others}
>
<ComboboxPrimitive.Icon>
<Show
when={local.children}
fallback={
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M8 9l4 -4l4 4" />
<path d="M16 15l-4 4l-4 -4" />
</svg>
}
>
{(children) => children()}
</Show>
</ComboboxPrimitive.Icon>
</ComboboxPrimitive.Trigger>
);
};
type ComboboxContentProps<T extends ValidComponent = 'div'> =
ComboboxPrimitive.ComboboxContentProps<T> & { class?: string | undefined };
const ComboboxContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ComboboxContentProps<T>>
) => {
const [local, others] = splitProps(props as ComboboxContentProps, ['class']);
return (
<ComboboxPrimitive.Portal>
<ComboboxPrimitive.Content
class={cn(
'fade-in-80 relative z-50 min-w-32 animate-in overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
local.class
)}
{...others}
>
<ComboboxPrimitive.Listbox class="m-0 p-1" />
</ComboboxPrimitive.Content>
</ComboboxPrimitive.Portal>
);
};
export {
Combobox,
ComboboxItem,
ComboboxItemLabel,
ComboboxItemIndicator,
ComboboxSection,
ComboboxControl,
ComboboxTrigger,
ComboboxInput,
ComboboxHiddenSelect,
ComboboxContent,
};

259
apps/webui/src/components/ui/command.tsx
View File

@ -1,168 +1,163 @@
"use client" import type {
Component,
ComponentProps,
ParentProps,
VoidProps,
} from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import type { DialogRootProps } from '@kobalte/core/dialog';
import { Command as CommandPrimitive } from "cmdk" import * as CommandPrimitive from 'cmdk-solid';
import { SearchIcon } from "lucide-react"
import { cn } from "@/styles/utils" import { Dialog, DialogContent } from '~/components/ui/dialog';
import { import { cn } from '~/utils/styles';
Dialog,
DialogContent, const Command: Component<ParentProps<CommandPrimitive.CommandRootProps>> = (
DialogDescription, props
DialogHeader, ) => {
DialogTitle, const [local, others] = splitProps(props, ['class']);
} from "@/components/ui/dialog"
function Command({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive>) {
return ( return (
<CommandPrimitive <CommandPrimitive.CommandRoot
data-slot="command" class={cn(
className={cn( 'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground blur-none',
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
const CommandDialog: Component<ParentProps<DialogRootProps>> = (props) => {
const [local, others] = splitProps(props, ['children']);
function CommandDialog({
title = "Command Palette",
description = "Search for a command to run...",
children,
...props
}: React.ComponentProps<typeof Dialog> & {
title?: string
description?: string
}) {
return ( return (
<Dialog {...props}> <Dialog {...others}>
<DialogHeader className="sr-only"> <DialogContent class="overflow-hidden p-0">
<DialogTitle>{title}</DialogTitle> <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
<DialogDescription>{description}</DialogDescription> {local.children}
</DialogHeader>
<DialogContent className="overflow-hidden p-0">
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command> </Command>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
) );
} };
const CommandInput: Component<VoidProps<CommandPrimitive.CommandInputProps>> = (
props
) => {
const [local, others] = splitProps(props, ['class']);
function CommandInput({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
return ( return (
<div <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
data-slot="command-input-wrapper" <svg
className="flex h-9 items-center gap-2 border-b px-3" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2 size-4 shrink-0 opacity-50"
> >
<SearchIcon className="size-4 shrink-0 opacity-50" /> <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
<CommandPrimitive.Input <path d="M21 21l-6 -6" />
data-slot="command-input" </svg>
className={cn( <CommandPrimitive.CommandInput
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", class={cn(
className 'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
local.class
)} )}
{...props} {...others}
/> />
</div> </div>
) );
} };
const CommandList: Component<ParentProps<CommandPrimitive.CommandListProps>> = (
props
) => {
const [local, others] = splitProps(props, ['class']);
function CommandList({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
return ( return (
<CommandPrimitive.List <CommandPrimitive.CommandList
data-slot="command-list" class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', local.class)}
className={cn( {...others}
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", />
className );
};
const CommandEmpty: Component<
ParentProps<CommandPrimitive.CommandEmptyProps>
> = (props) => {
const [local, others] = splitProps(props, ['class']);
return (
<CommandPrimitive.CommandEmpty
class={cn('py-6 text-center text-sm', local.class)}
{...others}
/>
);
};
const CommandGroup: Component<
ParentProps<CommandPrimitive.CommandGroupProps>
> = (props) => {
const [local, others] = splitProps(props, ['class']);
return (
<CommandPrimitive.CommandGroup
class={cn(
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',
local.class
)} )}
{...props} {...others}
/> />
) );
} };
const CommandSeparator: Component<
VoidProps<CommandPrimitive.CommandSeparatorProps>
> = (props) => {
const [local, others] = splitProps(props, ['class']);
function CommandEmpty({
...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
return ( return (
<CommandPrimitive.Empty <CommandPrimitive.CommandSeparator
data-slot="command-empty" class={cn('h-px bg-border', local.class)}
className="py-6 text-center text-sm" {...others}
{...props}
/> />
) );
} };
const CommandItem: Component<ParentProps<CommandPrimitive.CommandItemProps>> = (
props
) => {
const [local, others] = splitProps(props, ['class']);
function CommandGroup({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
return ( return (
<CommandPrimitive.Group <CommandPrimitive.CommandItem
data-slot="command-group" cmdk-item=""
className={cn( class={cn(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
className local.class
)} )}
{...props} {...others}
/> />
) );
} };
function CommandSeparator({ const CommandShortcut: Component<ComponentProps<'span'>> = (props) => {
className, const [local, others] = splitProps(props, ['class']);
...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
return (
<CommandPrimitive.Separator
data-slot="command-separator"
className={cn("bg-border -mx-1 h-px", className)}
{...props}
/>
)
}
function CommandItem({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
return (
<CommandPrimitive.Item
data-slot="command-item"
className={cn(
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function CommandShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return ( return (
<span <span
data-slot="command-shortcut" class={cn(
className={cn( 'ml-auto text-muted-foreground text-xs tracking-widest',
"text-muted-foreground ml-auto text-xs tracking-widest", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
export { export {
Command, Command,
@ -174,4 +169,4 @@ export {
CommandItem, CommandItem,
CommandShortcut, CommandShortcut,
CommandSeparator, CommandSeparator,
} };

463
apps/webui/src/components/ui/context-menu.tsx
View File

@ -1,252 +1,273 @@
"use client" import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import * as ContextMenuPrimitive from '@kobalte/core/context-menu';
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function ContextMenu({ const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
...props const ContextMenuPortal = ContextMenuPrimitive.Portal;
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) { const ContextMenuSub = ContextMenuPrimitive.Sub;
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} /> const ContextMenuGroup = ContextMenuPrimitive.Group;
} const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
function ContextMenuTrigger({ const ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (
...props props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) { ) => {
return ( return <ContextMenuPrimitive.Root gutter={4} {...props} />;
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} /> };
)
}
function ContextMenuGroup({ type ContextMenuContentProps<T extends ValidComponent = 'div'> =
...props ContextMenuPrimitive.ContextMenuContentProps<T> & {
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) { class?: string | undefined;
return ( };
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
)
}
function ContextMenuPortal({ const ContextMenuContent = <T extends ValidComponent = 'div'>(
...props props: PolymorphicProps<T, ContextMenuContentProps<T>>
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) { ) => {
return ( const [local, others] = splitProps(props as ContextMenuContentProps, [
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} /> 'class',
) ]);
}
function ContextMenuSub({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
}
function ContextMenuRadioGroup({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
return (
<ContextMenuPrimitive.RadioGroup
data-slot="context-menu-radio-group"
{...props}
/>
)
}
function ContextMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
inset?: boolean
}) {
return (
<ContextMenuPrimitive.SubTrigger
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto" />
</ContextMenuPrimitive.SubTrigger>
)
}
function ContextMenuSubContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
return (
<ContextMenuPrimitive.SubContent
data-slot="context-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props}
/>
)
}
function ContextMenuContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
return ( return (
<ContextMenuPrimitive.Portal> <ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Content <ContextMenuPrimitive.Content
data-slot="context-menu-content" class={cn(
className={cn( 'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", local.class
className
)} )}
{...props} {...others}
/> />
</ContextMenuPrimitive.Portal> </ContextMenuPrimitive.Portal>
) );
} };
function ContextMenuItem({ type ContextMenuItemProps<T extends ValidComponent = 'div'> =
className, ContextMenuPrimitive.ContextMenuItemProps<T> & {
inset, class?: string | undefined;
variant = "default", };
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & { const ContextMenuItem = <T extends ValidComponent = 'div'>(
inset?: boolean props: PolymorphicProps<T, ContextMenuItemProps<T>>
variant?: "default" | "destructive" ) => {
}) { const [local, others] = splitProps(props as ContextMenuItemProps, ['class']);
return ( return (
<ContextMenuPrimitive.Item <ContextMenuPrimitive.Item
data-slot="context-menu-item" class={cn(
data-inset={inset} 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
data-variant={variant} local.class
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)} )}
{...props} {...others}
/> />
) );
} };
function ContextMenuCheckboxItem({ const ContextMenuShortcut: Component<ComponentProps<'span'>> = (props) => {
className, const [local, others] = splitProps(props, ['class']);
children,
checked,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
return (
<ContextMenuPrimitive.CheckboxItem
data-slot="context-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.CheckboxItem>
)
}
function ContextMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
return (
<ContextMenuPrimitive.RadioItem
data-slot="context-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.RadioItem>
)
}
function ContextMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
inset?: boolean
}) {
return (
<ContextMenuPrimitive.Label
data-slot="context-menu-label"
data-inset={inset}
className={cn(
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function ContextMenuSeparator({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
return (
<ContextMenuPrimitive.Separator
data-slot="context-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
)
}
function ContextMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return ( return (
<span <span
data-slot="context-menu-shortcut" class={cn('ml-auto text-xs tracking-widest opacity-60', local.class)}
className={cn( {...others}
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/> />
) );
} };
type ContextMenuSeparatorProps<T extends ValidComponent = 'hr'> =
ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {
class?: string | undefined;
};
const ContextMenuSeparator = <T extends ValidComponent = 'hr'>(
props: PolymorphicProps<T, ContextMenuSeparatorProps<T>>
) => {
const [local, others] = splitProps(props as ContextMenuSeparatorProps, [
'class',
]);
return (
<ContextMenuPrimitive.Separator
class={cn('-mx-1 my-1 h-px bg-muted', local.class)}
{...others}
/>
);
};
type ContextMenuSubTriggerProps<T extends ValidComponent = 'div'> =
ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const ContextMenuSubTrigger = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>
) => {
const [local, others] = splitProps(props as ContextMenuSubTriggerProps, [
'class',
'children',
]);
return (
<ContextMenuPrimitive.SubTrigger
class={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
local.class
)}
{...others}
>
{local.children}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ml-auto size-4"
>
<path d="M9 6l6 6l-6 6" />
</svg>
</ContextMenuPrimitive.SubTrigger>
);
};
type ContextMenuSubContentProps<T extends ValidComponent = 'div'> =
ContextMenuPrimitive.ContextMenuSubContentProps<T> & {
class?: string | undefined;
};
const ContextMenuSubContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ContextMenuSubContentProps<T>>
) => {
const [local, others] = splitProps(props as ContextMenuSubContentProps, [
'class',
]);
return (
<ContextMenuPrimitive.SubContent
class={cn(
'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
local.class
)}
{...others}
/>
);
};
type ContextMenuCheckboxItemProps<T extends ValidComponent = 'div'> =
ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const ContextMenuCheckboxItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>
) => {
const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, [
'class',
'children',
]);
return (
<ContextMenuPrimitive.CheckboxItem
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
local.class
)}
{...others}
>
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M5 12l5 5l10 -10" />
</svg>
</ContextMenuPrimitive.ItemIndicator>
</span>
{local.children}
</ContextMenuPrimitive.CheckboxItem>
);
};
type ContextMenuGroupLabelProps<T extends ValidComponent = 'span'> =
ContextMenuPrimitive.ContextMenuGroupLabelProps<T> & {
class?: string | undefined;
};
const ContextMenuGroupLabel = <T extends ValidComponent = 'span'>(
props: PolymorphicProps<T, ContextMenuGroupLabelProps<T>>
) => {
const [local, others] = splitProps(props as ContextMenuGroupLabelProps, [
'class',
]);
return (
<ContextMenuPrimitive.GroupLabel
class={cn('px-2 py-1.5 font-semibold text-sm', local.class)}
{...others}
/>
);
};
type ContextMenuRadioItemProps<T extends ValidComponent = 'div'> =
ContextMenuPrimitive.ContextMenuRadioItemProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const ContextMenuRadioItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ContextMenuRadioItemProps<T>>
) => {
const [local, others] = splitProps(props as ContextMenuRadioItemProps, [
'class',
'children',
]);
return (
<ContextMenuPrimitive.RadioItem
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
local.class
)}
{...others}
>
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-2 fill-current"
>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
</svg>
</ContextMenuPrimitive.ItemIndicator>
</span>
{local.children}
</ContextMenuPrimitive.RadioItem>
);
};
export { export {
ContextMenu, ContextMenu,
ContextMenuTrigger, ContextMenuTrigger,
ContextMenuPortal,
ContextMenuContent, ContextMenuContent,
ContextMenuItem, ContextMenuItem,
ContextMenuCheckboxItem,
ContextMenuRadioItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut, ContextMenuShortcut,
ContextMenuGroup, ContextMenuSeparator,
ContextMenuPortal,
ContextMenuSub, ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger, ContextMenuSubTrigger,
ContextMenuSubContent,
ContextMenuCheckboxItem,
ContextMenuGroup,
ContextMenuGroupLabel,
ContextMenuRadioGroup, ContextMenuRadioGroup,
} ContextMenuRadioItem,
};

301
apps/webui/src/components/ui/date-picker.tsx Normal file
View File

@ -0,0 +1,301 @@
import { Show, children, splitProps } from 'solid-js';
import { DatePicker as DatePickerPrimitive } from '@ark-ui/solid';
import { buttonVariants } from '~/components/ui/button';
import { cn } from '~/utils/styles';
const DatePicker = DatePickerPrimitive.Root;
const DatePickerLabel = DatePickerPrimitive.Label;
const DatePickerContext = DatePickerPrimitive.Context;
const DatePickerTableHead = DatePickerPrimitive.TableHead;
const DatePickerTableBody = DatePickerPrimitive.TableBody;
const DatePickerYearSelect = DatePickerPrimitive.YearSelect;
const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect;
const DatePickerPositioner = DatePickerPrimitive.Positioner;
const DatePickerControl = (props: DatePickerPrimitive.ControlProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.Control
class={cn('inline-flex items-center gap-1', local.class)}
{...others}
/>
);
};
const DatePickerInput = (props: DatePickerPrimitive.InputProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.Input
class={cn(
'h-9 w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-shadow placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
local.class
)}
{...others}
/>
);
};
const DatePickerTrigger = (props: DatePickerPrimitive.TriggerProps) => {
const [local, others] = splitProps(props, ['class', 'children']);
// prevents rendering children twice
const resolvedChildren = children(() => local.children);
const hasChildren = () => resolvedChildren.toArray().length !== 0;
return (
<DatePickerPrimitive.Trigger
class={cn(
'flex min-h-9 min-w-9 items-center justify-center rounded-md border border-border bg-background transition-[box-shadow,background-color] hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4',
local.class
)}
{...others}
>
<Show when={!hasChildren()} fallback={resolvedChildren()}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
<path d="M16 3v4" />
<path d="M8 3v4" />
<path d="M4 11h16" />
<path d="M11 15h1" />
<path d="M12 15v3" />
<title>Calendar</title>
</svg>
</Show>
</DatePickerPrimitive.Trigger>
);
};
const DatePickerContent = (props: DatePickerPrimitive.ContentProps) => {
const [local, others] = splitProps(props, ['class', 'children']);
return (
<DatePickerPrimitive.Content
class={cn(
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
local.class
)}
{...others}
>
{local.children}
</DatePickerPrimitive.Content>
);
};
const DatePickerView = (props: DatePickerPrimitive.ViewProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.View
class={cn('space-y-4', local.class)}
{...others}
/>
);
};
const DatePickerViewControl = (props: DatePickerPrimitive.ViewControlProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.ViewControl
class={cn('flex items-center justify-between gap-4', local.class)}
{...others}
/>
);
};
const DatePickerPrevTrigger = (props: DatePickerPrimitive.PrevTriggerProps) => {
const [local, others] = splitProps(props, ['class', 'children']);
// prevents rendering children twice
const resolvedChildren = children(() => local.children);
const hasChildren = () => resolvedChildren.toArray().length !== 0;
return (
<DatePickerPrimitive.PrevTrigger
class={cn(
buttonVariants({
variant: 'outline',
}),
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
local.class
)}
{...others}
>
<Show when={!hasChildren()} fallback={resolvedChildren()}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M15 6l-6 6l6 6" />
<title>Previous</title>
</svg>
</Show>
</DatePickerPrimitive.PrevTrigger>
);
};
const DatePickerNextTrigger = (props: DatePickerPrimitive.NextTriggerProps) => {
const [local, others] = splitProps(props, ['class', 'children']);
// prevents rendering children twice
const resolvedChildren = children(() => local.children);
const hasChildren = () => resolvedChildren.toArray().length !== 0;
return (
<DatePickerPrimitive.NextTrigger
class={cn(
buttonVariants({
variant: 'outline',
}),
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
local.class
)}
{...others}
>
<Show when={!hasChildren()} fallback={resolvedChildren()}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M9 6l6 6l-6 6" />
<title>Next</title>
</svg>
</Show>
</DatePickerPrimitive.NextTrigger>
);
};
const DatePickerViewTrigger = (props: DatePickerPrimitive.ViewTriggerProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.ViewTrigger
class={cn(buttonVariants({ variant: 'ghost' }), 'h-7', local.class)}
{...others}
/>
);
};
const DatePickerRangeText = (props: DatePickerPrimitive.RangeTextProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.RangeText
class={cn('font-medium text-sm', local.class)}
{...others}
/>
);
};
const DatePickerTable = (props: DatePickerPrimitive.TableProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.Table
class={cn('w-full border-collapse space-y-1', local.class)}
{...others}
/>
);
};
const DatePickerTableRow = (props: DatePickerPrimitive.TableRowProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableRow
class={cn('mt-2 flex w-full', local.class)}
{...others}
/>
);
};
const DatePickerTableHeader = (props: DatePickerPrimitive.TableHeaderProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableHeader
class={cn(
'w-8 flex-1 font-normal text-[0.8rem] text-muted-foreground',
local.class
)}
{...others}
/>
);
};
const DatePickerTableCell = (props: DatePickerPrimitive.TableCellProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableCell
class={cn(
'flex-1 p-0 text-center text-sm has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md has-[[data-in-range]]:bg-accent has-[[data-outside-range][data-in-range]]:bg-accent/50 has-[[data-in-range]]:last-of-type:rounded-r-md has-[[data-in-range]]:first-of-type:rounded-l-md',
local.class
)}
{...others}
/>
);
};
const DatePickerTableCellTrigger = (
props: DatePickerPrimitive.TableCellTriggerProps
) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableCellTrigger
class={cn(
buttonVariants({ variant: 'ghost' }),
'size-8 w-full p-0 font-normal data-[selected]:opacity-100',
'data-[today]:bg-accent data-[today]:text-accent-foreground',
'[&:is([data-today][data-selected])]:bg-primary [&:is([data-today][data-selected])]:text-primary-foreground',
'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground',
'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
'data-[outside-range]:text-muted-foreground data-[outside-range]:opacity-50',
'[&:is([data-outside-range][data-in-range])]:bg-accent/50 [&:is([data-outside-range][data-in-range])]:text-muted-foreground [&:is([data-outside-range][data-in-range])]:opacity-30',
local.class
)}
{...others}
/>
);
};
export {
DatePicker,
DatePickerLabel,
DatePickerControl,
DatePickerInput,
DatePickerTrigger,
DatePickerContent,
DatePickerView,
DatePickerViewControl,
DatePickerPrevTrigger,
DatePickerNextTrigger,
DatePickerViewTrigger,
DatePickerRangeText,
DatePickerContext,
DatePickerTable,
DatePickerTableHead,
DatePickerTableBody,
DatePickerTableRow,
DatePickerTableHeader,
DatePickerTableCell,
DatePickerTableCellTrigger,
DatePickerYearSelect,
DatePickerMonthSelect,
DatePickerPositioner,
};

75
apps/webui/src/components/ui/delta-bar.tsx Normal file
View File

@ -0,0 +1,75 @@
import {
type Component,
type ComponentProps,
Show,
mergeProps,
splitProps,
} from 'solid-js';
import { cn } from '~/utils/styles';
type DeltaBarProps = ComponentProps<'div'> & {
value: number;
isIncreasePositive?: boolean;
};
const DeltaBar: Component<DeltaBarProps> = (rawProps) => {
const props = mergeProps(
{
isIncreasePositive: true,
},
rawProps
);
const [local, others] = splitProps(props, [
'value',
'isIncreasePositive',
'class',
]);
return (
<div
class={cn(
'relative flex h-2 w-full items-center rounded-full bg-secondary',
local.class
)}
{...others}
>
<div class="flex h-full w-1/2 justify-end">
<Show when={local.value < 0}>
<div
class={cn(
'rounded-l-full',
(local.value > 0 && local.isIncreasePositive) ||
(local.value < 0 && !local.isIncreasePositive)
? 'bg-success-foreground'
: 'bg-error-foreground'
)}
style={{ width: `${Math.abs(local.value)}%` }}
/>
</Show>
</div>
<div
class={cn(
'z-10 h-4 w-1 rounded-full bg-primary ring-2 ring-background'
)}
/>
<div class="flex h-full w-1/2 justify-start">
<Show when={local.value > 0}>
<div
class={cn(
'rounded-r-full',
(local.value > 0 && local.isIncreasePositive) ||
(local.value < 0 && !local.isIncreasePositive)
? 'bg-success-foreground'
: 'bg-error-foreground'
)}
style={{ width: `${Math.abs(local.value)}%` }}
/>
</Show>
</div>
</div>
);
};
export type { DeltaBarProps };
export { DeltaBar };

220
apps/webui/src/components/ui/dialog.tsx
View File

@ -1,133 +1,157 @@
import * as React from "react" import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import * as DialogPrimitive from "@radix-ui/react-dialog" import { splitProps } from 'solid-js';
import { XIcon } from "lucide-react"
import { cn } from "@/styles/utils" import * as DialogPrimitive from '@kobalte/core/dialog';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
function Dialog({ import { cn } from '~/utils/styles';
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
}
function DialogTrigger({ const Dialog = DialogPrimitive.Root;
...props const DialogTrigger = DialogPrimitive.Trigger;
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}
function DialogPortal({ const DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {
...props const [, rest] = splitProps(props, ['children']);
}: React.ComponentProps<typeof DialogPrimitive.Portal>) { return (
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} /> <DialogPrimitive.Portal {...rest}>
} <div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
{props.children}
</div>
</DialogPrimitive.Portal>
);
};
function DialogClose({ type DialogOverlayProps<T extends ValidComponent = 'div'> =
...props DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined };
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}
function DialogOverlay({ const DialogOverlay = <T extends ValidComponent = 'div'>(
className, props: PolymorphicProps<T, DialogOverlayProps<T>>
...props ) => {
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) { const [, rest] = splitProps(props as DialogOverlayProps, ['class']);
return ( return (
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
data-slot="dialog-overlay" class={cn(
className={cn( 'data-[closed]:fade-out-0 data-[expanded]:fade-in-0 fixed inset-0 z-50 bg-background/80 data-[closed]:animate-out data-[expanded]:animate-in',
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", props.class
className
)} )}
{...props} {...rest}
/> />
) );
} };
function DialogContent({ type DialogContentProps<T extends ValidComponent = 'div'> =
className, DialogPrimitive.DialogContentProps<T> & {
children, class?: string | undefined;
...props children?: JSX.Element;
}: React.ComponentProps<typeof DialogPrimitive.Content>) { };
const DialogContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, DialogContentProps<T>>
) => {
const [, rest] = splitProps(props as DialogContentProps, [
'class',
'children',
]);
return ( return (
<DialogPortal data-slot="dialog-portal"> <DialogPortal>
<DialogOverlay /> <DialogOverlay />
<DialogPrimitive.Content <DialogPrimitive.Content
data-slot="dialog-content" class={cn(
className={cn( '-translate-x-1/2 -translate-y-1/2 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 grid max-h-screen w-full max-w-lg gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[closed]:animate-out data-[expanded]:animate-in sm:rounded-lg',
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", props.class
className
)} )}
{...props} {...rest}
> >
{children} {props.children}
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"> <DialogPrimitive.CloseButton class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground">
<XIcon /> <svg
<span className="sr-only">Close</span> xmlns="http://www.w3.org/2000/svg"
</DialogPrimitive.Close> viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
<span class="sr-only">Close</span>
</DialogPrimitive.CloseButton>
</DialogPrimitive.Content> </DialogPrimitive.Content>
</DialogPortal> </DialogPortal>
) );
} };
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { const DialogHeader: Component<ComponentProps<'div'>> = (props) => {
const [, rest] = splitProps(props, ['class']);
return ( return (
<div <div
data-slot="dialog-header" class={cn(
className={cn("flex flex-col gap-2 text-center sm:text-left", className)} 'flex flex-col space-y-1.5 text-center sm:text-left',
{...props} props.class
/>
)
}
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)} )}
{...props} {...rest}
/> />
) );
} };
function DialogTitle({ const DialogFooter: Component<ComponentProps<'div'>> = (props) => {
className, const [, rest] = splitProps(props, ['class']);
...props return (
}: React.ComponentProps<typeof DialogPrimitive.Title>) { <div
class={cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
props.class
)}
{...rest}
/>
);
};
type DialogTitleProps<T extends ValidComponent = 'h2'> =
DialogPrimitive.DialogTitleProps<T> & {
class?: string | undefined;
};
const DialogTitle = <T extends ValidComponent = 'h2'>(
props: PolymorphicProps<T, DialogTitleProps<T>>
) => {
const [, rest] = splitProps(props as DialogTitleProps, ['class']);
return ( return (
<DialogPrimitive.Title <DialogPrimitive.Title
data-slot="dialog-title" class={cn(
className={cn("text-lg leading-none font-semibold", className)} 'font-semibold text-lg leading-none tracking-tight',
{...props} props.class
)}
{...rest}
/> />
) );
} };
function DialogDescription({ type DialogDescriptionProps<T extends ValidComponent = 'p'> =
className, DialogPrimitive.DialogDescriptionProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof DialogPrimitive.Description>) { };
const DialogDescription = <T extends ValidComponent = 'p'>(
props: PolymorphicProps<T, DialogDescriptionProps<T>>
) => {
const [, rest] = splitProps(props as DialogDescriptionProps, ['class']);
return ( return (
<DialogPrimitive.Description <DialogPrimitive.Description
data-slot="dialog-description" class={cn('text-muted-foreground text-sm', props.class)}
className={cn("text-muted-foreground text-sm", className)} {...rest}
{...props}
/> />
) );
} };
export { export {
Dialog, Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger, DialogTrigger,
} DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
};

183
apps/webui/src/components/ui/drawer.tsx
View File

@ -1,120 +1,129 @@
import * as React from "react" import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import { Drawer as DrawerPrimitive } from "vaul" import { splitProps } from 'solid-js';
import { cn } from "@/styles/utils" import type {
ContentProps,
DescriptionProps,
DynamicProps,
LabelProps,
OverlayProps,
} from '@corvu/drawer';
import DrawerPrimitive from '@corvu/drawer';
function Drawer({ import { cn } from '~/utils/styles';
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}
function DrawerTrigger({ const Drawer = DrawerPrimitive;
...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}
function DrawerPortal({ const DrawerTrigger = DrawerPrimitive.Trigger;
...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}
function DrawerClose({ const DrawerPortal = DrawerPrimitive.Portal;
...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}
function DrawerOverlay({ const DrawerClose = DrawerPrimitive.Close;
className,
...props type DrawerOverlayProps<T extends ValidComponent = 'div'> = OverlayProps<T> & {
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) { class?: string;
};
const DrawerOverlay = <T extends ValidComponent = 'div'>(
props: DynamicProps<T, DrawerOverlayProps<T>>
) => {
const [, rest] = splitProps(props as DrawerOverlayProps, ['class']);
const drawerContext = DrawerPrimitive.useContext();
return ( return (
<DrawerPrimitive.Overlay <DrawerPrimitive.Overlay
data-slot="drawer-overlay" class={cn(
className={cn( 'fixed inset-0 z-50 data-[transitioning]:transition-colors data-[transitioning]:duration-300',
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", props.class
className
)} )}
{...props} style={{
'background-color': `rgb(0 0 0 / ${0.8 * drawerContext.openPercentage()})`,
}}
{...rest}
/> />
) );
} };
function DrawerContent({ type DrawerContentProps<T extends ValidComponent = 'div'> = ContentProps<T> & {
className, class?: string;
children, children?: JSX.Element;
...props };
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
const DrawerContent = <T extends ValidComponent = 'div'>(
props: DynamicProps<T, DrawerContentProps<T>>
) => {
const [, rest] = splitProps(props as DrawerContentProps, [
'class',
'children',
]);
return ( return (
<DrawerPortal data-slot="drawer-portal"> <DrawerPortal>
<DrawerOverlay /> <DrawerOverlay />
<DrawerPrimitive.Content <DrawerPrimitive.Content
data-slot="drawer-content" class={cn(
className={cn( 'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background after:absolute after:inset-x-0 after:top-full after:h-1/2 after:bg-inherit data-[transitioning]:transition-transform data-[transitioning]:duration-300 md:select-none',
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col", props.class
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
className
)} )}
{...props} {...rest}
> >
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" /> <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
{children} {props.children}
</DrawerPrimitive.Content> </DrawerPrimitive.Content>
</DrawerPortal> </DrawerPortal>
) );
} };
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { const DrawerHeader: Component<ComponentProps<'div'>> = (props) => {
const [, rest] = splitProps(props, ['class']);
return ( return (
<div <div
data-slot="drawer-header" class={cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)}
className={cn("flex flex-col gap-1.5 p-4", className)} {...rest}
{...props}
/> />
) );
} };
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { const DrawerFooter: Component<ComponentProps<'div'>> = (props) => {
const [, rest] = splitProps(props, ['class']);
return ( return (
<div <div class={cn('t-auto flex flex-col gap-2 p-4', props.class)} {...rest} />
data-slot="drawer-footer" );
className={cn("mt-auto flex flex-col gap-2 p-4", className)} };
{...props}
/>
)
}
function DrawerTitle({ type DrawerTitleProps<T extends ValidComponent = 'div'> = LabelProps<T> & {
className, class?: string;
...props };
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
const DrawerTitle = <T extends ValidComponent = 'div'>(
props: DynamicProps<T, DrawerTitleProps<T>>
) => {
const [, rest] = splitProps(props as DrawerTitleProps, ['class']);
return ( return (
<DrawerPrimitive.Title <DrawerPrimitive.Label
data-slot="drawer-title" class={cn(
className={cn("text-foreground font-semibold", className)} 'font-semibold text-lg leading-none tracking-tight',
{...props} props.class
)}
{...rest}
/> />
) );
} };
function DrawerDescription({ type DrawerDescriptionProps<T extends ValidComponent = 'div'> =
className, DescriptionProps<T> & {
...props class?: string;
}: React.ComponentProps<typeof DrawerPrimitive.Description>) { };
const DrawerDescription = <T extends ValidComponent = 'div'>(
props: DynamicProps<T, DrawerDescriptionProps<T>>
) => {
const [, rest] = splitProps(props as DrawerDescriptionProps, ['class']);
return ( return (
<DrawerPrimitive.Description <DrawerPrimitive.Description
data-slot="drawer-description" class={cn('text-muted-foreground text-sm', props.class)}
className={cn("text-muted-foreground text-sm", className)} {...rest}
{...props}
/> />
) );
} };
export { export {
Drawer, Drawer,
@ -127,4 +136,4 @@ export {
DrawerFooter, DrawerFooter,
DrawerTitle, DrawerTitle,
DrawerDescription, DrawerDescription,
} };

451
apps/webui/src/components/ui/dropdown-menu.tsx
View File

@ -1,257 +1,282 @@
"use client" import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import * as DropdownMenuPrimitive from '@kobalte/core/dropdown-menu';
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function DropdownMenu({ const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
...props const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) { const DropdownMenuSub = DropdownMenuPrimitive.Sub;
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} /> const DropdownMenuGroup = DropdownMenuPrimitive.Group;
} const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
function DropdownMenuPortal({ const DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = (
...props props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) { ) => {
return ( return <DropdownMenuPrimitive.Root gutter={4} {...props} />;
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} /> };
)
}
function DropdownMenuTrigger({ type DropdownMenuContentProps<T extends ValidComponent = 'div'> =
...props DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) { class?: string | undefined;
return ( };
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
)
}
function DropdownMenuContent({ const DropdownMenuContent = <T extends ValidComponent = 'div'>(
className, props: PolymorphicProps<T, DropdownMenuContentProps<T>>
sideOffset = 4, ) => {
...props const [, rest] = splitProps(props as DropdownMenuContentProps, ['class']);
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return ( return (
<DropdownMenuPrimitive.Portal> <DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content <DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content" class={cn(
sideOffset={sideOffset} 'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-content-hide overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-content-show',
className={cn( props.class
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)} )}
{...props} {...rest}
/> />
</DropdownMenuPrimitive.Portal> </DropdownMenuPrimitive.Portal>
) );
} };
function DropdownMenuGroup({ type DropdownMenuItemProps<T extends ValidComponent = 'div'> =
...props DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) { class?: string | undefined;
return ( };
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
)
}
function DropdownMenuItem({ const DropdownMenuItem = <T extends ValidComponent = 'div'>(
className, props: PolymorphicProps<T, DropdownMenuItemProps<T>>
inset, ) => {
variant = "default", const [, rest] = splitProps(props as DropdownMenuItemProps, ['class']);
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return ( return (
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item" class={cn(
data-inset={inset} 'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
data-variant={variant} props.class
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)} )}
{...props} {...rest}
/> />
) );
} };
function DropdownMenuCheckboxItem({ const DropdownMenuShortcut: Component<ComponentProps<'span'>> = (props) => {
className, const [, rest] = splitProps(props, ['class']);
children,
checked,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
return (
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
)
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
)
}
function DropdownMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
return (
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
)
}
function DropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}) {
return (
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
)
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return ( return (
<span <span
data-slot="dropdown-menu-shortcut" class={cn('ml-auto text-xs tracking-widest opacity-60', props.class)}
className={cn( {...rest}
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/> />
) );
} };
function DropdownMenuSub({ const DropdownMenuLabel: Component<
...props ComponentProps<'div'> & { inset?: boolean }
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) { > = (props) => {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} /> const [, rest] = splitProps(props, ['class', 'inset']);
} return (
<div
class={cn(
'px-2 py-1.5 font-semibold text-sm',
props.inset && 'pl-8',
props.class
)}
{...rest}
/>
);
};
function DropdownMenuSubTrigger({ type DropdownMenuSeparatorProps<T extends ValidComponent = 'hr'> =
className, DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
inset, class?: string | undefined;
children, };
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { const DropdownMenuSeparator = <T extends ValidComponent = 'hr'>(
inset?: boolean props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>
}) { ) => {
const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ['class']);
return (
<DropdownMenuPrimitive.Separator
class={cn('-mx-1 my-1 h-px bg-muted', props.class)}
{...rest}
/>
);
};
type DropdownMenuSubTriggerProps<T extends ValidComponent = 'div'> =
DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const DropdownMenuSubTrigger = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>
) => {
const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, [
'class',
'children',
]);
return ( return (
<DropdownMenuPrimitive.SubTrigger <DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger" class={cn(
data-inset={inset} 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
className={cn( props.class
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
className
)} )}
{...props} {...rest}
> >
{children} {props.children}
<ChevronRightIcon className="ml-auto size-4" /> <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ml-auto size-4"
>
<path d="M9 6l6 6l-6 6" />
</svg>
</DropdownMenuPrimitive.SubTrigger> </DropdownMenuPrimitive.SubTrigger>
) );
} };
function DropdownMenuSubContent({ type DropdownMenuSubContentProps<T extends ValidComponent = 'div'> =
className, DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) { };
const DropdownMenuSubContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>
) => {
const [, rest] = splitProps(props as DropdownMenuSubContentProps, ['class']);
return ( return (
<DropdownMenuPrimitive.SubContent <DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content" class={cn(
className={cn( 'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", props.class
className
)} )}
{...props} {...rest}
/> />
) );
} };
type DropdownMenuCheckboxItemProps<T extends ValidComponent = 'div'> =
DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const DropdownMenuCheckboxItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
) => {
const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, [
'class',
'children',
]);
return (
<DropdownMenuPrimitive.CheckboxItem
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
)}
{...rest}
>
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M5 12l5 5l10 -10" />
</svg>
</DropdownMenuPrimitive.ItemIndicator>
</span>
{props.children}
</DropdownMenuPrimitive.CheckboxItem>
);
};
type DropdownMenuGroupLabelProps<T extends ValidComponent = 'span'> =
DropdownMenuPrimitive.DropdownMenuGroupLabelProps<T> & {
class?: string | undefined;
};
const DropdownMenuGroupLabel = <T extends ValidComponent = 'span'>(
props: PolymorphicProps<T, DropdownMenuGroupLabelProps<T>>
) => {
const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ['class']);
return (
<DropdownMenuPrimitive.GroupLabel
class={cn('px-2 py-1.5 font-semibold text-sm', props.class)}
{...rest}
/>
);
};
type DropdownMenuRadioItemProps<T extends ValidComponent = 'div'> =
DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const DropdownMenuRadioItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>
) => {
const [, rest] = splitProps(props as DropdownMenuRadioItemProps, [
'class',
'children',
]);
return (
<DropdownMenuPrimitive.RadioItem
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
)}
{...rest}
>
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-2 fill-current"
>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
</svg>
</DropdownMenuPrimitive.ItemIndicator>
</span>
{props.children}
</DropdownMenuPrimitive.RadioItem>
);
};
export { export {
DropdownMenu, DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger, DropdownMenuTrigger,
DropdownMenuPortal,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut, DropdownMenuShortcut,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuSub, DropdownMenuSub,
DropdownMenuSubTrigger, DropdownMenuSubTrigger,
DropdownMenuSubContent, DropdownMenuSubContent,
} DropdownMenuCheckboxItem,
DropdownMenuGroup,
DropdownMenuGroupLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
};

76
apps/webui/src/components/ui/flex.tsx Normal file
View File

@ -0,0 +1,76 @@
import type { Component, ComponentProps } from 'solid-js';
import { mergeProps, splitProps } from 'solid-js';
import { cn } from '~/utils/styles';
type JustifyContent =
| 'start'
| 'end'
| 'center'
| 'between'
| 'around'
| 'evenly';
type AlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
type FlexProps = ComponentProps<'div'> & {
flexDirection?: FlexDirection;
justifyContent?: JustifyContent;
alignItems?: AlignItems;
};
const Flex: Component<FlexProps> = (rawProps) => {
const props = mergeProps(
{
flexDirection: 'row',
justifyContent: 'between',
alignItems: 'center',
} satisfies FlexProps,
rawProps
);
const [local, others] = splitProps(props, [
'flexDirection',
'justifyContent',
'alignItems',
'class',
]);
return (
<div
class={cn(
'flex w-full',
flexDirectionClassNames[local.flexDirection],
justifyContentClassNames[local.justifyContent],
alignItemsClassNames[local.alignItems],
local.class
)}
{...others}
/>
);
};
export { Flex };
const justifyContentClassNames: { [key in JustifyContent]: string } = {
start: 'justify-start',
end: 'justify-end',
center: 'justify-center',
between: 'justify-between',
around: 'justify-around',
evenly: 'justify-evenly',
};
const alignItemsClassNames: { [key in AlignItems]: string } = {
start: 'items-start',
end: 'items-end',
center: 'items-center',
baseline: 'items-baseline',
stretch: 'items-stretch',
};
const flexDirectionClassNames: { [key in FlexDirection]: string } = {
row: 'flex-row',
col: 'flex-col',
'row-reverse': 'flex-row-reverse',
'col-reverse': 'flex-col-reverse',
};

165
apps/webui/src/components/ui/form.tsx
View File

@ -1,165 +0,0 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
Controller,
FormProvider,
useFormContext,
useFormState,
type ControllerProps,
type FieldPath,
type FieldValues,
} from "react-hook-form"
import { cn } from "@/styles/utils"
import { Label } from "@/components/ui/label"
const Form = FormProvider
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName
}
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState } = useFormContext()
const formState = useFormState({ name: fieldContext.name })
const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
const { id } = itemContext
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
type FormItemContextValue = {
id: string
}
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
const id = React.useId()
return (
<FormItemContext.Provider value={{ id }}>
<div
data-slot="form-item"
className={cn("grid gap-2", className)}
{...props}
/>
</FormItemContext.Provider>
)
}
function FormLabel({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
const { error, formItemId } = useFormField()
return (
<Label
data-slot="form-label"
data-error={!!error}
className={cn("data-[error=true]:text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
)
}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
)
}
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
const { formDescriptionId } = useFormField()
return (
<p
data-slot="form-description"
id={formDescriptionId}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message ?? "") : props.children
if (!body) {
return null
}
return (
<p
data-slot="form-message"
id={formMessageId}
className={cn("text-destructive text-sm", className)}
{...props}
>
{body}
</p>
)
}
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}

200
apps/webui/src/components/ui/grid.tsx Normal file
View File

@ -0,0 +1,200 @@
import type { Component, ComponentProps } from 'solid-js';
import { mergeProps, splitProps } from 'solid-js';
import { cn } from '~/utils/styles';
type Cols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type Span = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
type GridProps = ComponentProps<'div'> & {
cols?: Cols;
colsSm?: Cols;
colsMd?: Cols;
colsLg?: Cols;
};
const Grid: Component<GridProps> = (rawProps) => {
const props = mergeProps({ cols: 1 } satisfies GridProps, rawProps);
const [local, others] = splitProps(props, [
'cols',
'colsSm',
'colsMd',
'colsLg',
'class',
]);
return (
<div
class={cn(
'grid',
gridCols[local.cols],
local.colsSm && gridColsSm[local.colsSm],
local.colsMd && gridColsMd[local.colsMd],
local.colsLg && gridColsLg[local.colsLg],
local.class
)}
{...others}
/>
);
};
type ColProps = ComponentProps<'div'> & {
span?: Span;
spanSm?: Span;
spanMd?: Span;
spanLg?: Span;
};
const Col: Component<ColProps> = (rawProps) => {
const props = mergeProps({ span: 1 as Span }, rawProps);
const [local, others] = splitProps(props, [
'span',
'spanSm',
'spanMd',
'spanLg',
'class',
]);
return (
<div
class={cn(
colSpan[local.span],
local.spanSm && colSpanSm[local.spanSm],
local.spanMd && colSpanMd[local.spanMd],
local.spanLg && colSpanLg[local.spanLg],
local.class
)}
{...others}
/>
);
};
export { Grid, Col };
const gridCols: { [key in Cols]: string } = {
0: 'grid-cols-none',
1: 'grid-cols-1',
2: 'grid-cols-2',
3: 'grid-cols-3',
4: 'grid-cols-4',
5: 'grid-cols-5',
6: 'grid-cols-6',
7: 'grid-cols-7',
8: 'grid-cols-8',
9: 'grid-cols-9',
10: 'grid-cols-10',
11: 'grid-cols-11',
12: 'grid-cols-12',
};
const gridColsSm: { [key in Cols]: string } = {
0: 'sm:grid-cols-none',
1: 'sm:grid-cols-1',
2: 'sm:grid-cols-2',
3: 'sm:grid-cols-3',
4: 'sm:grid-cols-4',
5: 'sm:grid-cols-5',
6: 'sm:grid-cols-6',
7: 'sm:grid-cols-7',
8: 'sm:grid-cols-8',
9: 'sm:grid-cols-9',
10: 'sm:grid-cols-10',
11: 'sm:grid-cols-11',
12: 'sm:grid-cols-12',
};
const gridColsMd: { [key in Cols]: string } = {
0: 'md:grid-cols-none',
1: 'md:grid-cols-1',
2: 'md:grid-cols-2',
3: 'md:grid-cols-3',
4: 'md:grid-cols-4',
5: 'md:grid-cols-5',
6: 'md:grid-cols-6',
7: 'md:grid-cols-7',
8: 'md:grid-cols-8',
9: 'md:grid-cols-9',
10: 'md:grid-cols-10',
11: 'md:grid-cols-11',
12: 'md:grid-cols-12',
};
const gridColsLg: { [key in Cols]: string } = {
0: 'lg:grid-cols-none',
1: 'lg:grid-cols-1',
2: 'lg:grid-cols-2',
3: 'lg:grid-cols-3',
4: 'lg:grid-cols-4',
5: 'lg:grid-cols-5',
6: 'lg:grid-cols-6',
7: 'lg:grid-cols-7',
8: 'lg:grid-cols-8',
9: 'lg:grid-cols-9',
10: 'lg:grid-cols-10',
11: 'lg:grid-cols-11',
12: 'lg:grid-cols-12',
};
const colSpan: { [key in Span]: string } = {
1: 'col-span-1',
2: 'col-span-2',
3: 'col-span-3',
4: 'col-span-4',
5: 'col-span-5',
6: 'col-span-6',
7: 'col-span-7',
8: 'col-span-8',
9: 'col-span-9',
10: 'col-span-10',
11: 'col-span-11',
12: 'col-span-12',
13: 'col-span-13',
};
const colSpanSm: { [key in Span]: string } = {
1: 'sm:col-span-1',
2: 'sm:col-span-2',
3: 'sm:col-span-3',
4: 'sm:col-span-4',
5: 'sm:col-span-5',
6: 'sm:col-span-6',
7: 'sm:col-span-7',
8: 'sm:col-span-8',
9: 'sm:col-span-9',
10: 'sm:col-span-10',
11: 'sm:col-span-11',
12: 'sm:col-span-12',
13: 'sm:col-span-13',
};
const colSpanMd: { [key in Span]: string } = {
1: 'md:col-span-1',
2: 'md:col-span-2',
3: 'md:col-span-3',
4: 'md:col-span-4',
5: 'md:col-span-5',
6: 'md:col-span-6',
7: 'md:col-span-7',
8: 'md:col-span-8',
9: 'md:col-span-9',
10: 'md:col-span-10',
11: 'md:col-span-11',
12: 'md:col-span-12',
13: 'md:col-span-13',
};
const colSpanLg: { [key in Span]: string } = {
1: 'lg:col-span-1',
2: 'lg:col-span-2',
3: 'lg:col-span-3',
4: 'lg:col-span-4',
5: 'lg:col-span-5',
6: 'lg:col-span-6',
7: 'lg:col-span-7',
8: 'lg:col-span-8',
9: 'lg:col-span-9',
10: 'lg:col-span-10',
11: 'lg:col-span-11',
12: 'lg:col-span-12',
13: 'lg:col-span-13',
};

61
apps/webui/src/components/ui/hover-card.tsx
View File

@ -1,42 +1,37 @@
import * as React from "react" import type { Component, ValidComponent } from 'solid-js';
import * as HoverCardPrimitive from "@radix-ui/react-hover-card" import { splitProps } from 'solid-js';
import { cn } from "@/styles/utils" import * as HoverCardPrimitive from '@kobalte/core/hover-card';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
function HoverCard({ import { cn } from '~/utils/styles';
...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}
function HoverCardTrigger({ const HoverCardTrigger = HoverCardPrimitive.Trigger;
...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) { const HoverCard: Component<HoverCardPrimitive.HoverCardRootProps> = (props) => {
return <HoverCardPrimitive.Root gutter={4} {...props} />;
};
type HoverCardContentProps<T extends ValidComponent = 'div'> =
HoverCardPrimitive.HoverCardContentProps<T> & {
class?: string | undefined;
};
const HoverCardContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, HoverCardContentProps<T>>
) => {
const [local, others] = splitProps(props as HoverCardContentProps, ['class']);
return ( return (
<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} /> <HoverCardPrimitive.Portal>
)
}
function HoverCardContent({
className,
align = "center",
sideOffset = 4,
...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
return (
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
<HoverCardPrimitive.Content <HoverCardPrimitive.Content
data-slot="hover-card-content" class={cn(
align={align} 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
sideOffset={sideOffset} local.class
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
)} )}
{...props} {...others}
/> />
</HoverCardPrimitive.Portal> </HoverCardPrimitive.Portal>
) );
} };
export { HoverCard, HoverCardTrigger, HoverCardContent } export { HoverCard, HoverCardTrigger, HoverCardContent };

9
apps/webui/src/components/ui/image.tsx
View File

@ -1,9 +0,0 @@
import type { ComponentProps } from 'react';
export type ImageProps = Omit<ComponentProps<'img'>, 'alt'> &
Required<Pick<ComponentProps<'img'>, 'alt'>>;
export const Image = (props: ImageProps) => {
// biome-ignore lint/nursery/noImgElement: <explanation>
return <img {...props} alt={props.alt} />;
};

77
apps/webui/src/components/ui/input-otp.tsx
View File

@ -1,77 +0,0 @@
"use client"
import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { MinusIcon } from "lucide-react"
import { cn } from "@/styles/utils"
function InputOTP({
className,
containerClassName,
...props
}: React.ComponentProps<typeof OTPInput> & {
containerClassName?: string
}) {
return (
<OTPInput
data-slot="input-otp"
containerClassName={cn(
"flex items-center gap-2 has-disabled:opacity-50",
containerClassName
)}
className={cn("disabled:cursor-not-allowed", className)}
{...props}
/>
)
}
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="input-otp-group"
className={cn("flex items-center", className)}
{...props}
/>
)
}
function InputOTPSlot({
index,
className,
...props
}: React.ComponentProps<"div"> & {
index: number
}) {
const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
return (
<div
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
className
)}
{...props}
>
{char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
</div>
)}
</div>
)
}
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
return (
<div data-slot="input-otp-separator" role="separator" {...props}>
<MinusIcon />
</div>
)
}
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

21
apps/webui/src/components/ui/input.tsx
View File

@ -1,21 +0,0 @@
import * as React from "react"
import { cn } from "@/styles/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<input
type={type}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
)}
{...props}
/>
)
}
export { Input }

31
apps/webui/src/components/ui/label.tsx
View File

@ -1,24 +1,19 @@
"use client" import type { Component, ComponentProps } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import { cn } from '~/utils/styles';
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/styles/utils" const Label: Component<ComponentProps<'label'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return ( return (
<LabelPrimitive.Root <label
data-slot="label" class={cn(
className={cn( 'font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
export { Label } export { Label };

538
apps/webui/src/components/ui/menubar.tsx
View File

@ -1,274 +1,346 @@
import * as React from "react" import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import * as MenubarPrimitive from "@radix-ui/react-menubar" import { splitProps } from 'solid-js';
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils" import * as MenubarPrimitive from '@kobalte/core/menubar';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
function Menubar({ import { cn } from '~/utils/styles';
className,
...props const MenubarGroup = MenubarPrimitive.Group;
}: React.ComponentProps<typeof MenubarPrimitive.Root>) { const MenubarPortal = MenubarPrimitive.Portal;
const MenubarSub = MenubarPrimitive.Sub;
const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
type MenubarRootProps<T extends ValidComponent = 'div'> =
MenubarPrimitive.MenubarRootProps<T> & {
class?: string | undefined;
};
const Menubar = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, MenubarRootProps<T>>
) => {
const [local, others] = splitProps(props as MenubarRootProps, ['class']);
return ( return (
<MenubarPrimitive.Root <MenubarPrimitive.Root
data-slot="menubar" class={cn(
className={cn( 'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function MenubarMenu({ const MenubarMenu: Component<MenubarPrimitive.MenubarMenuProps> = (props) => {
...props return <MenubarPrimitive.Menu gutter={8} {...props} />;
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) { };
return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
}
function MenubarGroup({ type MenubarTriggerProps<T extends ValidComponent = 'button'> =
...props MenubarPrimitive.MenubarTriggerProps<T> & { class?: string | undefined };
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
}
function MenubarPortal({ const MenubarTrigger = <T extends ValidComponent = 'button'>(
...props props: PolymorphicProps<T, MenubarTriggerProps<T>>
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) { ) => {
return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} /> const [local, others] = splitProps(props as MenubarTriggerProps, ['class']);
}
function MenubarRadioGroup({
...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
return (
<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
)
}
function MenubarTrigger({
className,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
return ( return (
<MenubarPrimitive.Trigger <MenubarPrimitive.Trigger
data-slot="menubar-trigger" class={cn(
className={cn( 'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 font-medium text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function MenubarContent({ type MenubarContentProps<T extends ValidComponent = 'div'> =
className, MenubarPrimitive.MenubarContentProps<T> & { class?: string | undefined };
align = "start",
alignOffset = -4, const MenubarContent = <T extends ValidComponent = 'div'>(
sideOffset = 8, props: PolymorphicProps<T, MenubarContentProps<T>>
...props ) => {
}: React.ComponentProps<typeof MenubarPrimitive.Content>) { const [local, others] = splitProps(props as MenubarContentProps, ['class']);
return ( return (
<MenubarPortal> <MenubarPrimitive.Portal>
<MenubarPrimitive.Content <MenubarPrimitive.Content
data-slot="menubar-content" class={cn(
align={align} 'z-50 min-w-48 origin-[var(--kb-menu-content-transform-origin)] animate-content-hide overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-content-show',
alignOffset={alignOffset} local.class
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
className
)} )}
{...props} {...others}
/> />
</MenubarPortal> </MenubarPrimitive.Portal>
) );
} };
function MenubarItem({ type MenubarSubTriggerProps<T extends ValidComponent = 'div'> =
className, MenubarPrimitive.MenubarSubTriggerProps<T> & {
inset, class?: string | undefined;
variant = "default", children?: JSX.Element;
...props inset?: boolean;
}: React.ComponentProps<typeof MenubarPrimitive.Item> & { };
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
<MenubarPrimitive.Item
data-slot="menubar-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function MenubarCheckboxItem({ const MenubarSubTrigger = <T extends ValidComponent = 'div'>(
className, props: PolymorphicProps<T, MenubarSubTriggerProps<T>>
children, ) => {
checked, const [local, others] = splitProps(props as MenubarSubTriggerProps, [
...props 'class',
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) { 'children',
return ( 'inset',
<MenubarPrimitive.CheckboxItem ]);
data-slot="menubar-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.CheckboxItem>
)
}
function MenubarRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
return (
<MenubarPrimitive.RadioItem
data-slot="menubar-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.RadioItem>
)
}
function MenubarLabel({
className,
inset,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
inset?: boolean
}) {
return (
<MenubarPrimitive.Label
data-slot="menubar-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function MenubarSeparator({
className,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
return (
<MenubarPrimitive.Separator
data-slot="menubar-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
)
}
function MenubarShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="menubar-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
}
function MenubarSub({
...props
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
}
function MenubarSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
inset?: boolean
}) {
return ( return (
<MenubarPrimitive.SubTrigger <MenubarPrimitive.SubTrigger
data-slot="menubar-sub-trigger" class={cn(
data-inset={inset} 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
className={cn( local.inset && 'pl-8',
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8", local.class
className
)} )}
{...props} {...others}
> >
{children} {local.children}
<ChevronRightIcon className="ml-auto h-4 w-4" /> <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ml-auto size-4"
>
<path d="M9 6l6 6l-6 6" />
</svg>
</MenubarPrimitive.SubTrigger> </MenubarPrimitive.SubTrigger>
) );
} };
function MenubarSubContent({ type MenubarSubContentProps<T extends ValidComponent = 'div'> =
className, MenubarPrimitive.MenubarSubContentProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) { };
const MenubarSubContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, MenubarSubContentProps<T>>
) => {
const [local, others] = splitProps(props as MenubarSubContentProps, [
'class',
]);
return ( return (
<MenubarPrimitive.Portal>
<MenubarPrimitive.SubContent <MenubarPrimitive.SubContent
data-slot="menubar-sub-content" class={cn(
className={cn( 'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", local.class
className
)} )}
{...props} {...others}
/> />
) </MenubarPrimitive.Portal>
} );
};
type MenubarItemProps<T extends ValidComponent = 'div'> =
MenubarPrimitive.MenubarItemProps<T> & {
class?: string | undefined;
inset?: boolean;
};
const MenubarItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, MenubarItemProps<T>>
) => {
const [local, others] = splitProps(props as MenubarItemProps, [
'class',
'inset',
]);
return (
<MenubarPrimitive.Item
class={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
local.inset && 'pl-8',
local.class
)}
{...others}
/>
);
};
type MenubarCheckboxItemProps<T extends ValidComponent = 'div'> =
MenubarPrimitive.MenubarCheckboxItemProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const MenubarCheckboxItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, MenubarCheckboxItemProps<T>>
) => {
const [local, others] = splitProps(props as MenubarCheckboxItemProps, [
'class',
'children',
]);
return (
<MenubarPrimitive.CheckboxItem
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
local.class
)}
{...others}
>
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M5 12l5 5l10 -10" />
</svg>
</MenubarPrimitive.ItemIndicator>
</span>
{local.children}
</MenubarPrimitive.CheckboxItem>
);
};
type MenubarRadioItemProps<T extends ValidComponent = 'div'> =
MenubarPrimitive.MenubarRadioItemProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const MenubarRadioItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, MenubarRadioItemProps<T>>
) => {
const [local, others] = splitProps(props as MenubarRadioItemProps, [
'class',
'children',
]);
return (
<MenubarPrimitive.RadioItem
class={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
local.class
)}
{...others}
>
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-2 fill-current"
>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
</svg>
</MenubarPrimitive.ItemIndicator>
</span>
{local.children}
</MenubarPrimitive.RadioItem>
);
};
type MenubarItemLabelProps<T extends ValidComponent = 'div'> =
MenubarPrimitive.MenubarItemLabelProps<T> & {
class?: string | undefined;
inset?: boolean;
};
const MenubarItemLabel = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, MenubarItemLabelProps<T>>
) => {
const [local, others] = splitProps(props as MenubarItemLabelProps, [
'class',
'inset',
]);
return (
<MenubarPrimitive.ItemLabel
class={cn(
'px-2 py-1.5 font-semibold text-sm',
local.inset && 'pl-8',
local.class
)}
{...others}
/>
);
};
type MenubarGroupLabelProps<T extends ValidComponent = 'span'> =
MenubarPrimitive.MenubarGroupLabelProps<T> & {
class?: string | undefined;
inset?: boolean;
};
const MenubarGroupLabel = <T extends ValidComponent = 'span'>(
props: PolymorphicProps<T, MenubarGroupLabelProps<T>>
) => {
const [local, others] = splitProps(props as MenubarGroupLabelProps, [
'class',
'inset',
]);
return (
<MenubarPrimitive.GroupLabel
class={cn(
'px-2 py-1.5 font-semibold text-sm',
local.inset && 'pl-8',
local.class
)}
{...others}
/>
);
};
type MenubarSeparatorProps<T extends ValidComponent = 'hr'> =
MenubarPrimitive.MenubarSeparatorProps<T> & { class?: string | undefined };
const MenubarSeparator = <T extends ValidComponent = 'hr'>(
props: PolymorphicProps<T, MenubarSeparatorProps<T>>
) => {
const [local, others] = splitProps(props as MenubarSeparatorProps, ['class']);
return (
<MenubarPrimitive.Separator
class={cn('-mx-1 my-1 h-px bg-muted', local.class)}
{...others}
/>
);
};
const MenubarShortcut: Component<ComponentProps<'span'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return (
<span
class={cn(
'ml-auto text-muted-foreground text-xs tracking-widest',
local.class
)}
{...others}
/>
);
};
export { export {
Menubar, Menubar,
MenubarPortal,
MenubarMenu, MenubarMenu,
MenubarTrigger, MenubarTrigger,
MenubarContent, MenubarContent,
MenubarGroup,
MenubarSeparator,
MenubarLabel,
MenubarItem, MenubarItem,
MenubarShortcut, MenubarSeparator,
MenubarItemLabel,
MenubarGroupLabel,
MenubarCheckboxItem, MenubarCheckboxItem,
MenubarRadioGroup, MenubarRadioGroup,
MenubarRadioItem, MenubarRadioItem,
MenubarSub, MenubarPortal,
MenubarSubTrigger,
MenubarSubContent, MenubarSubContent,
} MenubarSubTrigger,
MenubarGroup,
MenubarSub,
MenubarShortcut,
};

315
apps/webui/src/components/ui/navigation-menu.tsx
View File

@ -1,168 +1,209 @@
import * as React from "react" import type { JSX, ValidComponent } from 'solid-js';
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" import { splitProps } from 'solid-js';
import { cva } from "class-variance-authority"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/styles/utils" import type { PolymorphicProps } from '@kobalte/core';
import * as NavigationMenuPrimitive from '@kobalte/core/navigation-menu';
function NavigationMenu({ import { cn } from '~/utils/styles';
className,
children, const NavigationMenuItem = NavigationMenuPrimitive.Menu;
viewport = true,
...props type NavigationMenuProps<T extends ValidComponent = 'ul'> =
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & { NavigationMenuPrimitive.NavigationMenuRootProps<T> & {
viewport?: boolean class?: string | undefined;
}) { children?: JSX.Element;
};
const NavigationMenu = <T extends ValidComponent = 'ul'>(
props: PolymorphicProps<T, NavigationMenuProps<T>>
) => {
const [local, others] = splitProps(props as NavigationMenuProps, [
'class',
'children',
]);
return ( return (
<NavigationMenuPrimitive.Root <NavigationMenuPrimitive.Root
data-slot="navigation-menu" gutter={6}
data-viewport={viewport} class={cn(
className={cn( 'group/menu flex w-max flex-1 list-none items-center justify-center data-[orientation=vertical]:flex-col [&>li]:w-full',
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", local.class
className
)} )}
{...props} {...others}
> >
{children} {local.children}
{viewport && <NavigationMenuViewport />} <NavigationMenuViewport />
</NavigationMenuPrimitive.Root> </NavigationMenuPrimitive.Root>
) );
} };
function NavigationMenuList({ type NavigationMenuTriggerProps<T extends ValidComponent = 'button'> =
className, NavigationMenuPrimitive.NavigationMenuTriggerProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) { };
return (
<NavigationMenuPrimitive.List
data-slot="navigation-menu-list"
className={cn(
"group flex flex-1 list-none items-center justify-center gap-1",
className
)}
{...props}
/>
)
}
function NavigationMenuItem({ const NavigationMenuTrigger = <T extends ValidComponent = 'button'>(
className, props: PolymorphicProps<T, NavigationMenuTriggerProps<T>>
...props ) => {
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) { const [local, others] = splitProps(props as NavigationMenuTriggerProps, [
return ( 'class',
<NavigationMenuPrimitive.Item ]);
data-slot="navigation-menu-item"
className={cn("relative", className)}
{...props}
/>
)
}
const navigationMenuTriggerStyle = cva(
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
)
function NavigationMenuTrigger({
className,
children,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
return ( return (
<NavigationMenuPrimitive.Trigger <NavigationMenuPrimitive.Trigger
data-slot="navigation-menu-trigger" class={cn(
className={cn(navigationMenuTriggerStyle(), "group", className)} 'group/trigger inline-flex h-10 w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-4 py-2 font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[expanded]:bg-accent/50',
{...props} local.class
>
{children}{" "}
<ChevronDownIcon
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
aria-hidden="true"
/>
</NavigationMenuPrimitive.Trigger>
)
}
function NavigationMenuContent({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
return (
<NavigationMenuPrimitive.Content
data-slot="navigation-menu-content"
className={cn(
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
className
)} )}
{...props} {...others}
/> />
) );
} };
const NavigationMenuIcon = () => {
function NavigationMenuViewport({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
return ( return (
<div <NavigationMenuPrimitive.Icon aria-hidden="true">
className={cn( <svg
"absolute top-full left-0 isolate z-50 flex justify-center" xmlns="http://www.w3.org/2000/svg"
)} viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="group-data-[orientation=vertical]/menu:-rotate-90 relative top-px ml-1 size-3 transition duration-200 group-data-[orientation=vertical]/menu:group-data-[expanded]/trigger:rotate-90 group-data-[expanded]/trigger:rotate-180"
> >
<path d="M6 9l6 6l6 -6" />
</svg>
</NavigationMenuPrimitive.Icon>
);
};
type NavigationMenuViewportProps<T extends ValidComponent = 'li'> =
NavigationMenuPrimitive.NavigationMenuViewportProps<T> & {
class?: string | undefined;
};
const NavigationMenuViewport = <T extends ValidComponent = 'li'>(
props: PolymorphicProps<T, NavigationMenuViewportProps<T>>
) => {
const [local, others] = splitProps(props as NavigationMenuViewportProps, [
'class',
]);
return (
<NavigationMenuPrimitive.Viewport <NavigationMenuPrimitive.Viewport
data-slot="navigation-menu-viewport" class={cn(
className={cn( // base settings
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]", 'pointer-events-none z-[1000] flex h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] origin-[var(--kb-menu-content-transform-origin)] items-center justify-center overflow-x-clip overflow-y-visible rounded-md border bg-popover opacity-0 shadow-lg data-[expanded]:pointer-events-auto data-[orientation=vertical]:overflow-y-clip data-[orientation=vertical]:overflow-x-visible data-[expanded]:rounded-md',
className // animate
'animate-content-hide transition-[width,height] duration-200 ease-in data-[expanded]:animate-content-show data-[expanded]:opacity-100 data-[expanded]:ease-out',
local.class
)} )}
{...props} {...others}
/> />
</div> );
) };
}
function NavigationMenuLink({ type NavigationMenuContentProps<T extends ValidComponent = 'ul'> =
className, NavigationMenuPrimitive.NavigationMenuContentProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) { };
const NavigationMenuContent = <T extends ValidComponent = 'ul'>(
props: PolymorphicProps<T, NavigationMenuContentProps<T>>
) => {
const [local, others] = splitProps(props as NavigationMenuContentProps, [
'class',
]);
return ( return (
<NavigationMenuPrimitive.Link <NavigationMenuPrimitive.Portal>
data-slot="navigation-menu-link" <NavigationMenuPrimitive.Content
className={cn( class={cn(
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", // base settings
className 'pointer-events-none absolute top-0 left-0 box-border p-4 focus:outline-none data-[expanded]:pointer-events-auto',
// base animation settings
'data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out',
// left to right
'data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52',
// right to left
'data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52',
// top to bottom
'data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52',
//bottom to top
'data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-bottom-52',
local.class
)} )}
{...props} {...others}
/> />
) </NavigationMenuPrimitive.Portal>
} );
};
function NavigationMenuIndicator({ type NavigationMenuLinkProps<T extends ValidComponent = 'a'> =
className, NavigationMenuPrimitive.NavigationMenuItemProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) { };
const NavigationMenuLink = <T extends ValidComponent = 'a'>(
props: PolymorphicProps<T, NavigationMenuLinkProps<T>>
) => {
const [local, others] = splitProps(props as NavigationMenuLinkProps, [
'class',
]);
return ( return (
<NavigationMenuPrimitive.Indicator <NavigationMenuPrimitive.Item
data-slot="navigation-menu-indicator" class={cn(
className={cn( 'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden", local.class
className
)} )}
{...props} {...others}
> />
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" /> );
</NavigationMenuPrimitive.Indicator> };
)
} type NavigationMenuLabelProps<T extends ValidComponent = 'div'> =
NavigationMenuPrimitive.NavigationMenuItemLabelProps<T> & {
class?: string | undefined;
};
const NavigationMenuLabel = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, NavigationMenuLabelProps<T>>
) => {
const [local, others] = splitProps(props as NavigationMenuLabelProps, [
'class',
]);
return (
<NavigationMenuPrimitive.ItemLabel
class={cn('font-medium text-sm leading-none', local.class)}
{...others}
/>
);
};
type NavigationMenuDescriptionProps<T extends ValidComponent = 'div'> =
NavigationMenuPrimitive.NavigationMenuItemDescriptionProps<T> & {
class?: string | undefined;
};
const NavigationMenuDescription = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, NavigationMenuDescriptionProps<T>>
) => {
const [local, others] = splitProps(props as NavigationMenuDescriptionProps, [
'class',
]);
return (
<NavigationMenuPrimitive.ItemDescription
class={cn('text-muted-foreground text-sm leading-snug', local.class)}
{...others}
/>
);
};
export { export {
NavigationMenu, NavigationMenu,
NavigationMenuList,
NavigationMenuItem, NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger, NavigationMenuTrigger,
NavigationMenuLink, NavigationMenuIcon,
NavigationMenuIndicator,
NavigationMenuViewport, NavigationMenuViewport,
navigationMenuTriggerStyle, NavigationMenuContent,
} NavigationMenuLink,
NavigationMenuLabel,
NavigationMenuDescription,
};

199
apps/webui/src/components/ui/number-field.tsx Normal file
View File

@ -0,0 +1,199 @@
import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import { Show, splitProps } from 'solid-js';
import * as NumberFieldPrimitive from '@kobalte/core/number-field';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { cn } from '~/utils/styles';
const NumberField = NumberFieldPrimitive.Root;
const NumberFieldGroup: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return (
<div
class={cn(
'relative rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
local.class
)}
{...others}
/>
);
};
type NumberFieldLabelProps<T extends ValidComponent = 'label'> =
NumberFieldPrimitive.NumberFieldLabelProps<T> & {
class?: string | undefined;
};
const NumberFieldLabel = <T extends ValidComponent = 'label'>(
props: PolymorphicProps<T, NumberFieldLabelProps<T>>
) => {
const [local, others] = splitProps(props as NumberFieldLabelProps, ['class']);
return (
<NumberFieldPrimitive.Label
class={cn(
'font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
local.class
)}
{...others}
/>
);
};
type NumberFieldInputProps<T extends ValidComponent = 'input'> =
NumberFieldPrimitive.NumberFieldInputProps<T> & {
class?: string | undefined;
};
const NumberFieldInput = <T extends ValidComponent = 'input'>(
props: PolymorphicProps<T, NumberFieldInputProps<T>>
) => {
const [local, others] = splitProps(props as NumberFieldInputProps, ['class']);
return (
<NumberFieldPrimitive.Input
class={cn(
'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground',
local.class
)}
{...others}
/>
);
};
type NumberFieldIncrementTriggerProps<T extends ValidComponent = 'button'> =
NumberFieldPrimitive.NumberFieldIncrementTriggerProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const NumberFieldIncrementTrigger = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, NumberFieldIncrementTriggerProps<T>>
) => {
const [local, others] = splitProps(
props as NumberFieldIncrementTriggerProps,
['class', 'children']
);
return (
<NumberFieldPrimitive.IncrementTrigger
class={cn(
'absolute top-1 right-1 inline-flex size-4 items-center justify-center',
local.class
)}
{...others}
>
<Show
when={local.children}
fallback={
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M6 15l6 -6l6 6" />
</svg>
}
>
{(children) => children()}
</Show>
</NumberFieldPrimitive.IncrementTrigger>
);
};
type NumberFieldDecrementTriggerProps<T extends ValidComponent = 'button'> =
NumberFieldPrimitive.NumberFieldDecrementTriggerProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const NumberFieldDecrementTrigger = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, NumberFieldDecrementTriggerProps<T>>
) => {
const [local, others] = splitProps(
props as NumberFieldDecrementTriggerProps,
['class', 'children']
);
return (
<NumberFieldPrimitive.DecrementTrigger
class={cn(
'absolute right-1 bottom-1 inline-flex size-4 items-center justify-center',
local.class
)}
{...others}
>
<Show
when={local.children}
fallback={
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M6 9l6 6l6 -6" />
</svg>
}
>
{(children) => children()}
</Show>
</NumberFieldPrimitive.DecrementTrigger>
);
};
type NumberFieldDescriptionProps<T extends ValidComponent = 'div'> =
NumberFieldPrimitive.NumberFieldDescriptionProps<T> & {
class?: string | undefined;
};
const NumberFieldDescription = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, NumberFieldDescriptionProps<T>>
) => {
const [local, others] = splitProps(props as NumberFieldDescriptionProps, [
'class',
]);
return (
<NumberFieldPrimitive.Description
class={cn('text-muted-foreground text-sm', local.class)}
{...others}
/>
);
};
type NumberFieldErrorMessageProps<T extends ValidComponent = 'div'> =
NumberFieldPrimitive.NumberFieldErrorMessageProps<T> & {
class?: string | undefined;
};
const NumberFieldErrorMessage = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, NumberFieldErrorMessageProps<T>>
) => {
const [local, others] = splitProps(props as NumberFieldErrorMessageProps, [
'class',
]);
return (
<NumberFieldPrimitive.ErrorMessage
class={cn('text-error-foreground text-sm', local.class)}
{...others}
/>
);
};
export {
NumberField,
NumberFieldGroup,
NumberFieldLabel,
NumberFieldInput,
NumberFieldIncrementTrigger,
NumberFieldDecrementTrigger,
NumberFieldDescription,
NumberFieldErrorMessage,
};

98
apps/webui/src/components/ui/otp-field.tsx Normal file
View File

@ -0,0 +1,98 @@
import type { Component, ComponentProps, ValidComponent } from 'solid-js';
import { Show, splitProps } from 'solid-js';
import type { DynamicProps, RootProps } from '@corvu/otp-field';
import OtpField from '@corvu/otp-field';
import { cn } from '~/utils/styles';
export const REGEXP_ONLY_DIGITS = '^\\d*$';
export const REGEXP_ONLY_CHARS = '^[a-zA-Z]*$';
export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]*$';
type OTPFieldProps<T extends ValidComponent = 'div'> = RootProps<T> & {
class?: string;
};
const OTPField = <T extends ValidComponent = 'div'>(
props: DynamicProps<T, OTPFieldProps<T>>
) => {
const [local, others] = splitProps(props as OTPFieldProps, ['class']);
return (
<OtpField
class={cn(
'flex items-center gap-2 disabled:cursor-not-allowed has-[:disabled]:opacity-50',
local.class
)}
{...others}
/>
);
};
const OTPFieldInput = OtpField.Input;
const OTPFieldGroup: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return <div class={cn('flex items-center', local.class)} {...others} />;
};
const OTPFieldSlot: Component<ComponentProps<'div'> & { index: number }> = (
props
) => {
const [local, others] = splitProps(props, ['class', 'index']);
const context = OtpField.useContext();
const char = () => context.value()[local.index];
const showFakeCaret = () =>
context.value().length === local.index && context.isInserting();
return (
<div
class={cn(
'group relative flex size-10 items-center justify-center border-input border-y border-r text-sm first:rounded-l-md first:border-l last:rounded-r-md',
local.class
)}
{...others}
>
<div
class={cn(
'absolute inset-0 z-10 transition-all group-first:rounded-l-md group-last:rounded-r-md',
context.activeSlots().includes(local.index) &&
'ring-2 ring-ring ring-offset-background'
)}
/>
{char()}
<Show when={showFakeCaret()}>
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
<div class="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
</div>
</Show>
</div>
);
};
const OTPFieldSeparator: Component<ComponentProps<'div'>> = (props) => {
return (
<div {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-6"
>
<circle cx="12.1" cy="12.1" r="1" />
</svg>
</div>
);
};
export {
OTPField,
OTPFieldInput,
OTPFieldGroup,
OTPFieldSlot,
OTPFieldSeparator,
};

286
apps/webui/src/components/ui/pagination.tsx
View File

@ -1,127 +1,193 @@
import * as React from "react" import type { JSX, ValidComponent } from 'solid-js';
import { import { Show, splitProps } from 'solid-js';
ChevronLeftIcon,
ChevronRightIcon,
MoreHorizontalIcon,
} from "lucide-react"
import { cn } from "@/styles/utils" import * as PaginationPrimitive from '@kobalte/core/pagination';
import { Button, buttonVariants } from "@/components/ui/button" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
function Pagination({ className, ...props }: React.ComponentProps<"nav">) { import { buttonVariants } from '~/components/ui/button';
import { cn } from '~/utils/styles';
const PaginationItems = PaginationPrimitive.Items;
type PaginationRootProps<T extends ValidComponent = 'nav'> =
PaginationPrimitive.PaginationRootProps<T> & { class?: string | undefined };
const Pagination = <T extends ValidComponent = 'nav'>(
props: PolymorphicProps<T, PaginationRootProps<T>>
) => {
const [local, others] = splitProps(props as PaginationRootProps, ['class']);
return ( return (
<nav <PaginationPrimitive.Root
role="navigation" class={cn(
aria-label="pagination" '[&>*]:flex [&>*]:flex-row [&>*]:items-center [&>*]:gap-1',
data-slot="pagination" local.class
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
/>
)
}
function PaginationContent({
className,
...props
}: React.ComponentProps<"ul">) {
return (
<ul
data-slot="pagination-content"
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
)
}
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
return <li data-slot="pagination-item" {...props} />
}
type PaginationLinkProps = {
isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
React.ComponentProps<"a">
function PaginationLink({
className,
isActive,
size = "icon",
...props
}: PaginationLinkProps) {
return (
<a
aria-current={isActive ? "page" : undefined}
data-slot="pagination-link"
data-active={isActive}
className={cn(
buttonVariants({
variant: isActive ? "outline" : "ghost",
size,
}),
className
)} )}
{...props} {...others}
/> />
) );
} };
function PaginationPrevious({ type PaginationItemProps<T extends ValidComponent = 'button'> =
className, PaginationPrimitive.PaginationItemProps<T> & { class?: string | undefined };
...props
}: React.ComponentProps<typeof PaginationLink>) {
return (
<PaginationLink
aria-label="Go to previous page"
size="default"
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
{...props}
>
<ChevronLeftIcon />
<span className="hidden sm:block">Previous</span>
</PaginationLink>
)
}
function PaginationNext({ const PaginationItem = <T extends ValidComponent = 'button'>(
className, props: PolymorphicProps<T, PaginationItemProps<T>>
...props ) => {
}: React.ComponentProps<typeof PaginationLink>) { const [local, others] = splitProps(props as PaginationItemProps, ['class']);
return ( return (
<PaginationLink <PaginationPrimitive.Item
aria-label="Go to next page" class={cn(
size="default" buttonVariants({
className={cn("gap-1 px-2.5 sm:pr-2.5", className)} variant: 'ghost',
{...props} }),
> 'size-10 data-[current]:border',
<span className="hidden sm:block">Next</span> local.class
<ChevronRightIcon /> )}
</PaginationLink> {...others}
) />
} );
};
function PaginationEllipsis({ type PaginationEllipsisProps<T extends ValidComponent = 'div'> =
className, PaginationPrimitive.PaginationEllipsisProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<"span">) { };
const PaginationEllipsis = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, PaginationEllipsisProps<T>>
) => {
const [local, others] = splitProps(props as PaginationEllipsisProps, [
'class',
]);
return ( return (
<span <PaginationPrimitive.Ellipsis
aria-hidden class={cn('flex size-10 items-center justify-center', local.class)}
data-slot="pagination-ellipsis" {...others}
className={cn("flex size-9 items-center justify-center", className)}
{...props}
> >
<MoreHorizontalIcon className="size-4" /> <svg
<span className="sr-only">More pages</span> xmlns="http://www.w3.org/2000/svg"
</span> viewBox="0 0 24 24"
) fill="none"
} stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<circle cx="12" cy="12" r="1" />
<circle cx="19" cy="12" r="1" />
<circle cx="5" cy="12" r="1" />
</svg>
<span class="sr-only">More pages</span>
</PaginationPrimitive.Ellipsis>
);
};
type PaginationPreviousProps<T extends ValidComponent = 'button'> =
PaginationPrimitive.PaginationPreviousProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const PaginationPrevious = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, PaginationPreviousProps<T>>
) => {
const [local, others] = splitProps(props as PaginationPreviousProps, [
'class',
'children',
]);
return (
<PaginationPrimitive.Previous
class={cn(
buttonVariants({
variant: 'ghost',
}),
'gap-1 pl-2.5',
local.class
)}
{...others}
>
<Show
when={local.children}
fallback={
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M15 6l-6 6l6 6" />
</svg>
<span>Previous</span>
</>
}
>
{(children) => children()}
</Show>
</PaginationPrimitive.Previous>
);
};
type PaginationNextProps<T extends ValidComponent = 'button'> =
PaginationPrimitive.PaginationNextProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const PaginationNext = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, PaginationNextProps<T>>
) => {
const [local, others] = splitProps(props as PaginationNextProps, [
'class',
'children',
]);
return (
<PaginationPrimitive.Next
class={cn(
buttonVariants({
variant: 'ghost',
}),
'gap-1 pl-2.5',
local.class
)}
{...others}
>
<Show
when={local.children}
fallback={
<>
<span>Next</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M9 6l6 6l-6 6" />
</svg>
</>
}
>
{(children) => children()}
</Show>
</PaginationPrimitive.Next>
);
};
export { export {
Pagination, Pagination,
PaginationContent, PaginationItems,
PaginationLink,
PaginationItem, PaginationItem,
PaginationEllipsis,
PaginationPrevious, PaginationPrevious,
PaginationNext, PaginationNext,
PaginationEllipsis, };
}

59
apps/webui/src/components/ui/popover.tsx
View File

@ -1,48 +1,35 @@
"use client" import type { Component, ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as PopoverPrimitive from "@radix-ui/react-popover" import * as PopoverPrimitive from '@kobalte/core/popover';
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function Popover({ const PopoverTrigger = PopoverPrimitive.Trigger;
...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />
}
function PopoverTrigger({ const Popover: Component<PopoverPrimitive.PopoverRootProps> = (props) => {
...props return <PopoverPrimitive.Root gutter={4} {...props} />;
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) { };
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}
function PopoverContent({ type PopoverContentProps<T extends ValidComponent = 'div'> =
className, PopoverPrimitive.PopoverContentProps<T> & { class?: string | undefined };
align = "center",
sideOffset = 4, const PopoverContent = <T extends ValidComponent = 'div'>(
...props props: PolymorphicProps<T, PopoverContentProps<T>>
}: React.ComponentProps<typeof PopoverPrimitive.Content>) { ) => {
const [local, others] = splitProps(props as PopoverContentProps, ['class']);
return ( return (
<PopoverPrimitive.Portal> <PopoverPrimitive.Portal>
<PopoverPrimitive.Content <PopoverPrimitive.Content
data-slot="popover-content" class={cn(
align={align} 'data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 w-72 origin-[var(--kb-popover-content-transform-origin)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[closed]:animate-out data-[expanded]:animate-in',
sideOffset={sideOffset} local.class
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
)} )}
{...props} {...others}
/> />
</PopoverPrimitive.Portal> </PopoverPrimitive.Portal>
) );
} };
function PopoverAnchor({ export { Popover, PopoverTrigger, PopoverContent };
...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

38
apps/webui/src/components/ui/pro-link.tsx
View File

@ -1,26 +1,30 @@
import { cn } from '@/styles/utils'; import { type LinkComponent, createLink } from '@tanstack/solid-router';
import { type LinkComponent, createLink } from '@tanstack/react-router'; import {
import type { AnchorHTMLAttributes, ComponentProps } from 'react'; type Component,
type ComponentProps,
type JSX,
Show,
splitProps,
} from 'solid-js';
export interface BasicLinkProps type BasicLinkProps = JSX.IntrinsicElements['a'];
extends AnchorHTMLAttributes<HTMLAnchorElement> {}
const BasicLinkComponent = (props: ComponentProps<'a'>) => { const BasicLinkComponent: Component<BasicLinkProps> = (props) => (
return ( <a {...props}>{props.children}</a>
<a );
{...props}
className={cn('block px-3 py-2 text-blue-700', props.className)}
/>
);
};
const CreatedLinkComponent = createLink(BasicLinkComponent); const CreatedLinkComponent = createLink(BasicLinkComponent);
export const ProLink: LinkComponent<typeof BasicLinkComponent> = (props) => { export const ProLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
if (props.href) { const [local, other] = splitProps(props, ['href']);
return <BasicLinkComponent {...(props as any)} />; return (
} <Show
return <CreatedLinkComponent preload={'intent'} {...props} />; when={!props.href}
fallback={<BasicLinkComponent {...(other as any)} href={local.href} />}
>
<CreatedLinkComponent preload={'intent'} {...(other as typeof props)} />
</Show>
);
}; };
export type ProLinkProps = ComponentProps<typeof ProLink>; export type ProLinkProps = ComponentProps<typeof ProLink>;

104
apps/webui/src/components/ui/progress-circle.tsx
View File

@ -1,5 +1,7 @@
import { cn } from '@/styles/utils'; import type { Component, ComponentProps } from 'solid-js';
import type { FC, HTMLAttributes } from 'react'; import { mergeProps, splitProps } from 'solid-js';
import { cn } from '~/utils/styles';
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@ -11,81 +13,87 @@ const sizes: Record<Size, { radius: number; strokeWidth: number }> = {
xl: { radius: 80, strokeWidth: 10 }, xl: { radius: 80, strokeWidth: 10 },
}; };
interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> { type ProgressCircleProps = ComponentProps<'div'> & {
value?: number; value?: number;
size?: Size; size?: Size;
radius?: number; radius?: number;
strokeWidth?: number; strokeWidth?: number;
showAnimation?: boolean; showAnimation?: boolean;
} };
const ProgressCircle: FC<ProgressCircleProps> = ({ const ProgressCircle: Component<ProgressCircleProps> = (rawProps) => {
className, const props = mergeProps(
children, { size: 'md' as Size, showAnimation: true },
value = 0, rawProps
size = 'md', );
radius, const [local, others] = splitProps(props, [
strokeWidth, 'class',
showAnimation = true, 'children',
...props 'value',
}) => { 'size',
const currentValue = getLimitedValue(value); 'radius',
const currentRadius = radius ?? sizes[size].radius; 'strokeWidth',
const currentStrokeWidth = strokeWidth ?? sizes[size].strokeWidth; 'showAnimation',
const normalizedRadius = currentRadius - currentStrokeWidth / 2; ]);
const circumference = normalizedRadius * 2 * Math.PI;
const strokeDashoffset = (currentValue / 100) * circumference; const value = () => getLimitedValue(local.value);
const offset = circumference - strokeDashoffset; const radius = () => local.radius ?? sizes[local.size].radius;
const strokeWidth = () => local.strokeWidth ?? sizes[local.size].strokeWidth;
const normalizedRadius = () => radius() - strokeWidth() / 2;
const circumference = () => normalizedRadius() * 2 * Math.PI;
const strokeDashoffset = () => (value() / 100) * circumference();
const offset = () => circumference() - strokeDashoffset();
return ( return (
<div <div
className={cn('flex flex-col items-center justify-center', className)} class={cn('flex flex-col items-center justify-center', local.class)}
{...props} {...others}
> >
<svg <svg
width={currentRadius * 2} width={radius() * 2}
height={currentRadius * 2} height={radius() * 2}
viewBox={`0 0 ${currentRadius * 2} ${currentRadius * 2}`} viewBox={`0 0 ${radius() * 2} ${radius() * 2}`}
className="-rotate-90" class="-rotate-90"
> >
<circle <circle
r={normalizedRadius} r={normalizedRadius()}
cx={currentRadius} cx={radius()}
cy={currentRadius} cy={radius()}
strokeWidth={currentStrokeWidth} stroke-width={strokeWidth()}
fill="transparent" fill="transparent"
stroke="" stroke=""
strokeLinecap="round" stroke-linecap="round"
className={cn('stroke-secondary transition-colors ease-linear')} class={cn('stroke-secondary transition-colors ease-linear')}
/> />
{currentValue >= 0 && ( {value() >= 0 ? (
<circle <circle
r={normalizedRadius} r={normalizedRadius()}
cx={currentRadius} cx={radius()}
cy={currentRadius} cy={radius()}
strokeWidth={currentStrokeWidth} stroke-width={strokeWidth()}
strokeDasharray={`${circumference} ${circumference}`} stroke-dasharray={circumference() + ' ' + circumference()}
strokeDashoffset={offset} stroke-dashoffset={offset()}
fill="transparent" fill="transparent"
stroke="" stroke=""
strokeLinecap="round" stroke-linecap="round"
className={cn( class={cn(
'stroke-primary transition-colors ease-linear', 'stroke-primary transition-colors ease-linear',
showAnimation ? 'transition-all duration-300 ease-in-out' : '' local.showAnimation
? 'transition-all duration-300 ease-in-out'
: ''
)} )}
/> />
)} ) : null}
</svg> </svg>
<div className={cn('absolute flex')}>{children}</div> <div class={cn('absolute flex')}>{local.children}</div>
</div> </div>
); );
}; };
function getLimitedValue(input: number | undefined): number { function getLimitedValue(input: number | undefined) {
if (input === undefined) { if (input === undefined) {
return 0; return 0;
} } else if (input > 100) {
if (input > 100) {
return 100; return 100;
} }
return input; return input;

49
apps/webui/src/components/ui/progress.tsx
View File

@ -1,29 +1,34 @@
import * as React from "react" import type { Component, JSX, ValidComponent } from "solid-js"
import * as ProgressPrimitive from "@radix-ui/react-progress" import { splitProps } from "solid-js"
import { cn } from "@/styles/utils" import type { PolymorphicProps } from "@kobalte/core/polymorphic"
import * as ProgressPrimitive from "@kobalte/core/progress"
function Progress({ import { Label } from "~/components/ui/label"
className,
value, type ProgressRootProps<T extends ValidComponent = "div"> =
...props ProgressPrimitive.ProgressRootProps<T> & { children?: JSX.Element }
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
const Progress = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, ProgressRootProps<T>>
) => {
const [local, others] = splitProps(props as ProgressRootProps, ["children"])
return ( return (
<ProgressPrimitive.Root <ProgressPrimitive.Root {...others}>
data-slot="progress" {local.children}
className={cn( <ProgressPrimitive.Track class="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", <ProgressPrimitive.Fill class="h-full w-[var(--kb-progress-fill-width)] flex-1 bg-primary transition-all" />
className </ProgressPrimitive.Track>
)}
{...props}
>
<ProgressPrimitive.Indicator
data-slot="progress-indicator"
className="bg-primary h-full w-full flex-1 transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root> </ProgressPrimitive.Root>
) )
} }
export { Progress } const ProgressLabel: Component<ProgressPrimitive.ProgressLabelProps> = (props) => {
return <ProgressPrimitive.Label as={Label} {...props} />
}
const ProgressValueLabel: Component<ProgressPrimitive.ProgressValueLabelProps> = (props) => {
return <ProgressPrimitive.ValueLabel as={Label} {...props} />
}
export { Progress, ProgressLabel, ProgressValueLabel }

103
apps/webui/src/components/ui/radio-group.tsx
View File

@ -1,45 +1,84 @@
"use client" import type { JSX, ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import * as RadioGroupPrimitive from '@kobalte/core/radio-group';
import { CircleIcon } from "lucide-react"
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function RadioGroup({ type RadioGroupRootProps<T extends ValidComponent = 'div'> =
className, RadioGroupPrimitive.RadioGroupRootProps<T> & { class?: string | undefined };
...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) { const RadioGroup = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, RadioGroupRootProps<T>>
) => {
const [local, others] = splitProps(props as RadioGroupRootProps, ['class']);
return ( return (
<RadioGroupPrimitive.Root <RadioGroupPrimitive.Root
data-slot="radio-group" class={cn('grid gap-2', local.class)}
className={cn("grid gap-3", className)} {...others}
{...props}
/> />
) );
} };
function RadioGroupItem({ type RadioGroupItemProps<T extends ValidComponent = 'div'> =
className, RadioGroupPrimitive.RadioGroupItemProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) { children?: JSX.Element;
};
const RadioGroupItem = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, RadioGroupItemProps<T>>
) => {
const [local, others] = splitProps(props as RadioGroupItemProps, [
'class',
'children',
]);
return ( return (
<RadioGroupPrimitive.Item <RadioGroupPrimitive.Item
data-slot="radio-group-item" class={cn('flex items-center space-x-2', local.class)}
className={cn( {...others}
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
> >
<RadioGroupPrimitive.Indicator <RadioGroupPrimitive.ItemInput />
data-slot="radio-group-indicator" <RadioGroupPrimitive.ItemControl class="aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
className="relative flex items-center justify-center" <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center ">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-2.5 fill-current text-current"
> >
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" /> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
</RadioGroupPrimitive.Indicator> </svg>
</RadioGroupPrimitive.ItemIndicator>
</RadioGroupPrimitive.ItemControl>
{local.children}
</RadioGroupPrimitive.Item> </RadioGroupPrimitive.Item>
) );
} };
export { RadioGroup, RadioGroupItem } type RadioGroupLabelProps<T extends ValidComponent = 'label'> =
RadioGroupPrimitive.RadioGroupLabelProps<T> & {
class?: string | undefined;
};
const RadioGroupItemLabel = <T extends ValidComponent = 'label'>(
props: PolymorphicProps<T, RadioGroupLabelProps<T>>
) => {
const [local, others] = splitProps(props as RadioGroupLabelProps, ['class']);
return (
<RadioGroupPrimitive.ItemLabel
class={cn(
'font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
local.class
)}
{...others}
/>
);
};
export { RadioGroup, RadioGroupItem, RadioGroupItemLabel };

106
apps/webui/src/components/ui/resizable.tsx
View File

@ -1,54 +1,76 @@
import * as React from "react" import type { ValidComponent } from 'solid-js';
import { GripVerticalIcon } from "lucide-react" import { Show, splitProps } from 'solid-js';
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/styles/utils" import type { DynamicProps, HandleProps, RootProps } from '@corvu/resizable';
import ResizablePrimitive from '@corvu/resizable';
function ResizablePanelGroup({ import { cn } from '~/utils/styles';
className,
...props type ResizableProps<T extends ValidComponent = 'div'> = RootProps<T> & {
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) { class?: string;
};
const Resizable = <T extends ValidComponent = 'div'>(
props: DynamicProps<T, ResizableProps<T>>
) => {
const [, rest] = splitProps(props as ResizableProps, ['class']);
return ( return (
<ResizablePrimitive.PanelGroup <ResizablePrimitive
data-slot="resizable-panel-group" class={cn(
className={cn( 'flex size-full data-[orientation=vertical]:flex-col',
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col", props.class
className
)} )}
{...props} {...rest}
/> />
) );
} };
function ResizablePanel({ const ResizablePanel = ResizablePrimitive.Panel;
...props
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}
function ResizableHandle({ type ResizableHandleProps<T extends ValidComponent = 'button'> =
withHandle, HandleProps<T> & {
className, class?: string;
...props withHandle?: boolean;
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { };
withHandle?: boolean
}) { const ResizableHandle = <T extends ValidComponent = 'button'>(
props: DynamicProps<T, ResizableHandleProps<T>>
) => {
const [, rest] = splitProps(props as ResizableHandleProps, [
'class',
'withHandle',
]);
return ( return (
<ResizablePrimitive.PanelResizeHandle <ResizablePrimitive.Handle
data-slot="resizable-handle" class={cn(
className={cn( 'after:-translate-x-1/2 data-[orientation=vertical]:after:-translate-y-1/2 relative flex w-px shrink-0 items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", props.class
className
)} )}
{...props} {...rest}
> >
{withHandle && ( <Show when={props.withHandle}>
<div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border"> <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
<GripVerticalIcon className="size-2.5" /> <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-2.5"
>
<path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</div> </div>
)} </Show>
</ResizablePrimitive.PanelResizeHandle> </ResizablePrimitive.Handle>
) );
} };
export { ResizablePanelGroup, ResizablePanel, ResizableHandle } export { Resizable, ResizablePanel, ResizableHandle };

58
apps/webui/src/components/ui/scroll-area.tsx
View File

@ -1,58 +0,0 @@
"use client"
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/styles/utils"
function ScrollArea({
className,
children,
...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
return (
<ScrollAreaPrimitive.Root
data-slot="scroll-area"
className={cn("relative", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
>
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
)
}
function ScrollBar({
className,
orientation = "vertical",
...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
return (
<ScrollAreaPrimitive.ScrollAreaScrollbar
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
"flex touch-none p-px transition-colors select-none",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb"
className="bg-border relative flex-1 rounded-full"
/>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
)
}
export { ScrollArea, ScrollBar }

303
apps/webui/src/components/ui/select.tsx
View File

@ -1,183 +1,198 @@
import * as React from "react" import type { JSX, ValidComponent } from 'solid-js';
import * as SelectPrimitive from "@radix-ui/react-select" import { splitProps } from 'solid-js';
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import { cn } from "@/styles/utils" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as SelectPrimitive from '@kobalte/core/select';
import { cva } from 'class-variance-authority';
function Select({ import { cn } from '~/utils/styles';
...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />
}
function SelectGroup({ const Select = SelectPrimitive.Root;
...props const SelectValue = SelectPrimitive.Value;
}: React.ComponentProps<typeof SelectPrimitive.Group>) { const SelectHiddenSelect = SelectPrimitive.HiddenSelect;
return <SelectPrimitive.Group data-slot="select-group" {...props} />
}
function SelectValue({ type SelectTriggerProps<T extends ValidComponent = 'button'> =
...props SelectPrimitive.SelectTriggerProps<T> & {
}: React.ComponentProps<typeof SelectPrimitive.Value>) { class?: string | undefined;
return <SelectPrimitive.Value data-slot="select-value" {...props} /> children?: JSX.Element;
} };
function SelectTrigger({ const SelectTrigger = <T extends ValidComponent = 'button'>(
className, props: PolymorphicProps<T, SelectTriggerProps<T>>
size = "default", ) => {
children, const [local, others] = splitProps(props as SelectTriggerProps, [
...props 'class',
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { 'children',
size?: "sm" | "default" ]);
}) {
return ( return (
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
data-slot="select-trigger" class={cn(
data-size={size} 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className={cn( local.class
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)} )}
{...props} {...others}
> >
{children} {local.children}
<SelectPrimitive.Icon asChild> <SelectPrimitive.Icon
<ChevronDownIcon className="size-4 opacity-50" /> as="svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4 opacity-50"
>
<path d="M8 9l4 -4l4 4" />
<path d="M16 15l-4 4l-4 -4" />
</SelectPrimitive.Icon> </SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
) );
} };
function SelectContent({ type SelectContentProps<T extends ValidComponent = 'div'> =
className, SelectPrimitive.SelectContentProps<T> & { class?: string | undefined };
children,
position = "popper", const SelectContent = <T extends ValidComponent = 'div'>(
...props props: PolymorphicProps<T, SelectContentProps<T>>
}: React.ComponentProps<typeof SelectPrimitive.Content>) { ) => {
const [local, others] = splitProps(props as SelectContentProps, ['class']);
return ( return (
<SelectPrimitive.Portal> <SelectPrimitive.Portal>
<SelectPrimitive.Content <SelectPrimitive.Content
data-slot="select-content" class={cn(
className={cn( 'fade-in-80 relative z-50 min-w-32 animate-in overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", local.class
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)} )}
position={position} {...others}
{...props}
> >
<SelectScrollUpButton /> <SelectPrimitive.Listbox class="m-0 p-1" />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>
) );
} };
function SelectLabel({ type SelectItemProps<T extends ValidComponent = 'li'> =
className, SelectPrimitive.SelectItemProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof SelectPrimitive.Label>) { children?: JSX.Element;
return ( };
<SelectPrimitive.Label
data-slot="select-label"
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
{...props}
/>
)
}
function SelectItem({ const SelectItem = <T extends ValidComponent = 'li'>(
className, props: PolymorphicProps<T, SelectItemProps<T>>
children, ) => {
...props const [local, others] = splitProps(props as SelectItemProps, [
}: React.ComponentProps<typeof SelectPrimitive.Item>) { 'class',
'children',
]);
return ( return (
<SelectPrimitive.Item <SelectPrimitive.Item
data-slot="select-item" class={cn(
className={cn( 'relative mt-0 flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", local.class
className
)} )}
{...props} {...others}
> >
<span className="absolute right-2 flex size-3.5 items-center justify-center"> <SelectPrimitive.ItemIndicator class="absolute right-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator> <svg
<CheckIcon className="size-4" /> xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg>
</SelectPrimitive.ItemIndicator> </SelectPrimitive.ItemIndicator>
</span> <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item> </SelectPrimitive.Item>
) );
} };
function SelectSeparator({ const labelVariants = cva(
className, 'font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
...props {
}: React.ComponentProps<typeof SelectPrimitive.Separator>) { variants: {
variant: {
label: 'data-[invalid]:text-destructive',
description: 'font-normal text-muted-foreground',
error: 'text-destructive text-xs',
},
},
defaultVariants: {
variant: 'label',
},
}
);
type SelectLabelProps<T extends ValidComponent = 'label'> =
SelectPrimitive.SelectLabelProps<T> & {
class?: string | undefined;
};
const SelectLabel = <T extends ValidComponent = 'label'>(
props: PolymorphicProps<T, SelectLabelProps<T>>
) => {
const [local, others] = splitProps(props as SelectLabelProps, ['class']);
return ( return (
<SelectPrimitive.Separator <SelectPrimitive.Label
data-slot="select-separator" class={cn(labelVariants(), local.class)}
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)} {...others}
{...props}
/> />
) );
} };
function SelectScrollUpButton({ type SelectDescriptionProps<T extends ValidComponent = 'div'> =
className, SelectPrimitive.SelectDescriptionProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) { };
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUpIcon className="size-4" />
</SelectPrimitive.ScrollUpButton>
)
}
function SelectScrollDownButton({ const SelectDescription = <T extends ValidComponent = 'div'>(
className, props: PolymorphicProps<T, SelectDescriptionProps<T>>
...props ) => {
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) { const [local, others] = splitProps(props as SelectDescriptionProps, [
'class',
]);
return ( return (
<SelectPrimitive.ScrollDownButton <SelectPrimitive.Description
data-slot="select-scroll-down-button" class={cn(labelVariants({ variant: 'description' }), local.class)}
className={cn( {...others}
"flex cursor-default items-center justify-center py-1", />
className );
)} };
{...props}
> type SelectErrorMessageProps<T extends ValidComponent = 'div'> =
<ChevronDownIcon className="size-4" /> SelectPrimitive.SelectErrorMessageProps<T> & {
</SelectPrimitive.ScrollDownButton> class?: string | undefined;
) };
}
const SelectErrorMessage = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, SelectErrorMessageProps<T>>
) => {
const [local, others] = splitProps(props as SelectErrorMessageProps, [
'class',
]);
return (
<SelectPrimitive.ErrorMessage
class={cn(labelVariants({ variant: 'error' }), local.class)}
{...others}
/>
);
};
export { export {
Select, Select,
SelectValue,
SelectHiddenSelect,
SelectTrigger,
SelectContent, SelectContent,
SelectGroup,
SelectItem, SelectItem,
SelectLabel, SelectLabel,
SelectScrollDownButton, SelectDescription,
SelectScrollUpButton, SelectErrorMessage,
SelectSeparator, };
SelectTrigger,
SelectValue,
}

44
apps/webui/src/components/ui/separator.tsx
View File

@ -1,28 +1,32 @@
"use client" import type { ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as SeparatorPrimitive from "@radix-ui/react-separator" import * as SeparatorPrimitive from '@kobalte/core/separator';
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function Separator({ type SeparatorRootProps<T extends ValidComponent = 'hr'> =
className, SeparatorPrimitive.SeparatorRootProps<T> & { class?: string | undefined };
orientation = "horizontal",
decorative = true, const Separator = <T extends ValidComponent = 'hr'>(
...props props: PolymorphicProps<T, SeparatorRootProps<T>>
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) { ) => {
const [local, others] = splitProps(props as SeparatorRootProps, [
'class',
'orientation',
]);
return ( return (
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
data-slot="separator-root" orientation={local.orientation ?? 'horizontal'}
decorative={decorative} class={cn(
orientation={orientation} 'shrink-0 bg-border',
className={cn( local.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
export { Separator } export { Separator };

245
apps/webui/src/components/ui/sheet.tsx
View File

@ -1,129 +1,188 @@
import * as React from "react" import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
import * as SheetPrimitive from "@radix-ui/react-dialog" import { splitProps } from 'solid-js';
import { XIcon } from "lucide-react"
import { cn } from "@/styles/utils" import * as SheetPrimitive from '@kobalte/core/dialog';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import { type VariantProps, cva } from 'class-variance-authority';
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) { import { cn } from '~/utils/styles';
return <SheetPrimitive.Root data-slot="sheet" {...props} />
}
function SheetTrigger({ const Sheet = SheetPrimitive.Root;
...props const SheetTrigger = SheetPrimitive.Trigger;
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) { const SheetClose = SheetPrimitive.CloseButton;
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}
function SheetClose({ const portalVariants = cva('fixed inset-0 z-50 flex', {
...props variants: {
}: React.ComponentProps<typeof SheetPrimitive.Close>) { position: {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} /> top: 'items-start',
} bottom: 'items-end',
left: 'justify-start',
right: 'justify-end',
},
},
defaultVariants: { position: 'right' },
});
function SheetPortal({ type PortalProps = SheetPrimitive.DialogPortalProps &
...props VariantProps<typeof portalVariants>;
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}
function SheetOverlay({ const SheetPortal: Component<PortalProps> = (props) => {
className, const [local, others] = splitProps(props, ['position', 'children']);
...props return (
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) { <SheetPrimitive.Portal {...others}>
<div class={portalVariants({ position: local.position })}>
{local.children}
</div>
</SheetPrimitive.Portal>
);
};
type DialogOverlayProps<T extends ValidComponent = 'div'> =
SheetPrimitive.DialogOverlayProps<T> & {
class?: string | undefined;
};
const SheetOverlay = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, DialogOverlayProps<T>>
) => {
const [local, others] = splitProps(props as DialogOverlayProps, ['class']);
return ( return (
<SheetPrimitive.Overlay <SheetPrimitive.Overlay
data-slot="sheet-overlay" class={cn(
className={cn( 'data-[closed=]:fade-out-0 data-[expanded=]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[closed=]:animate-out data-[expanded=]:animate-in',
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function SheetContent({ const sheetVariants = cva(
className, 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[closed=]:animate-out data-[expanded=]:animate-in data-[closed=]:duration-300 data-[expanded=]:duration-500',
children, {
side = "right", variants: {
...props position: {
}: React.ComponentProps<typeof SheetPrimitive.Content> & { top: 'data-[closed=]:slide-out-to-top data-[expanded=]:slide-in-from-top inset-x-0 top-0 border-b',
side?: "top" | "right" | "bottom" | "left" bottom:
}) { 'data-[closed=]:slide-out-to-bottom data-[expanded=]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
left: 'data-[closed=]:slide-out-to-left data-[expanded=]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
right:
'data-[closed=]:slide-out-to-right data-[expanded=]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
},
},
defaultVariants: {
position: 'right',
},
}
);
type DialogContentProps<T extends ValidComponent = 'div'> =
SheetPrimitive.DialogContentProps<T> &
VariantProps<typeof sheetVariants> & {
class?: string | undefined;
children?: JSX.Element;
};
const SheetContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, DialogContentProps<T>>
) => {
const [local, others] = splitProps(props as DialogContentProps, [
'position',
'class',
'children',
]);
return ( return (
<SheetPortal> <SheetPortal position={local.position}>
<SheetOverlay /> <SheetOverlay />
<SheetPrimitive.Content <SheetPrimitive.Content
data-slot="sheet-content" class={cn(
className={cn( sheetVariants({ position: local.position }),
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", local.class,
side === "right" && 'max-h-screen overflow-y-auto'
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
side === "left" &&
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
side === "top" &&
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
className
)} )}
{...props} {...others}
> >
{children} {local.children}
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"> <SheetPrimitive.CloseButton class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<XIcon className="size-4" /> <svg
<span className="sr-only">Close</span> xmlns="http://www.w3.org/2000/svg"
</SheetPrimitive.Close> viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
<span class="sr-only">Close</span>
</SheetPrimitive.CloseButton>
</SheetPrimitive.Content> </SheetPrimitive.Content>
</SheetPortal> </SheetPortal>
) );
} };
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { const SheetHeader: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <div
data-slot="sheet-header" class={cn(
className={cn("flex flex-col gap-1.5 p-4", className)} 'flex flex-col space-y-2 text-center sm:text-left',
{...props} local.class
)}
{...others}
/> />
) );
} };
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { const SheetFooter: Component<ComponentProps<'div'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <div
data-slot="sheet-footer" class={cn(
className={cn("mt-auto flex flex-col gap-2 p-4", className)} 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
{...props} local.class
)}
{...others}
/> />
) );
} };
function SheetTitle({ type DialogTitleProps<T extends ValidComponent = 'h2'> =
className, SheetPrimitive.DialogTitleProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof SheetPrimitive.Title>) { };
const SheetTitle = <T extends ValidComponent = 'h2'>(
props: PolymorphicProps<T, DialogTitleProps<T>>
) => {
const [local, others] = splitProps(props as DialogTitleProps, ['class']);
return ( return (
<SheetPrimitive.Title <SheetPrimitive.Title
data-slot="sheet-title" class={cn('font-semibold text-foreground text-lg', local.class)}
className={cn("text-foreground font-semibold", className)} {...others}
{...props}
/> />
) );
} };
function SheetDescription({ type DialogDescriptionProps<T extends ValidComponent = 'p'> =
className, SheetPrimitive.DialogDescriptionProps<T> & { class?: string | undefined };
...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) { const SheetDescription = <T extends ValidComponent = 'p'>(
props: PolymorphicProps<T, DialogDescriptionProps<T>>
) => {
const [local, others] = splitProps(props as DialogDescriptionProps, [
'class',
]);
return ( return (
<SheetPrimitive.Description <SheetPrimitive.Description
data-slot="sheet-description" class={cn('text-muted-foreground text-sm', local.class)}
className={cn("text-muted-foreground text-sm", className)} {...others}
{...props}
/> />
) );
} };
export { export {
Sheet, Sheet,
@ -134,4 +193,4 @@ export {
SheetFooter, SheetFooter,
SheetTitle, SheetTitle,
SheetDescription, SheetDescription,
} };

813
apps/webui/src/components/ui/sidebar.tsx
View File

File diff suppressed because it is too large Load Diff

32
apps/webui/src/components/ui/skeleton.tsx
View File

@ -1,13 +1,27 @@
import { cn } from "@/styles/utils" import type { ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
function Skeleton({ className, ...props }: React.ComponentProps<"div">) { import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as SkeletonPrimitive from '@kobalte/core/skeleton';
import { cn } from '~/utils/styles';
type SkeletonRootProps<T extends ValidComponent = 'div'> =
SkeletonPrimitive.SkeletonRootProps<T> & { class?: string | undefined };
const Skeleton = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, SkeletonRootProps<T>>
) => {
const [local, others] = splitProps(props as SkeletonRootProps, ['class']);
return ( return (
<div <SkeletonPrimitive.Root
data-slot="skeleton" class={cn(
className={cn("bg-accent animate-pulse rounded-md", className)} "bg-primary/10 data-[animate='true']:animate-pulse",
{...props} local.class
)}
{...others}
/> />
) );
} };
export { Skeleton } export { Skeleton };

157
apps/webui/src/components/ui/slider.tsx
View File

@ -1,63 +1,112 @@
"use client" import type { JSX, ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as SliderPrimitive from "@radix-ui/react-slider" import * as SliderPrimitive from '@kobalte/core/slider';
import { cn } from "@/styles/utils" import { Label } from '~/components/ui/label';
import { cn } from '~/utils/styles';
function Slider({ type SliderRootProps<T extends ValidComponent = 'div'> =
className, SliderPrimitive.SliderRootProps<T> & {
defaultValue, class?: string | undefined;
value, };
min = 0,
max = 100,
...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
const _values = React.useMemo(
() =>
Array.isArray(value)
? value
: Array.isArray(defaultValue)
? defaultValue
: [min, max],
[value, defaultValue, min, max]
)
const Slider = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, SliderRootProps<T>>
) => {
const [local, others] = splitProps(props as SliderRootProps, ['class']);
return ( return (
<SliderPrimitive.Root <SliderPrimitive.Root
data-slot="slider" class={cn(
defaultValue={defaultValue} 'relative flex w-full touch-none select-none flex-col items-center',
value={value} local.class
min={min}
max={max}
className={cn(
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
className
)}
{...props}
>
<SliderPrimitive.Track
data-slot="slider-track"
className={cn(
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
)}
>
<SliderPrimitive.Range
data-slot="slider-range"
className={cn(
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
)} )}
{...others}
/> />
</SliderPrimitive.Track> );
{Array.from({ length: _values.length }, (_, index) => ( };
<SliderPrimitive.Thumb
data-slot="slider-thumb"
key={index}
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Root>
)
}
export { Slider } type SliderTrackProps<T extends ValidComponent = 'div'> =
SliderPrimitive.SliderTrackProps<T> & {
class?: string | undefined;
};
const SliderTrack = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, SliderTrackProps<T>>
) => {
const [local, others] = splitProps(props as SliderTrackProps, ['class']);
return (
<SliderPrimitive.Track
class={cn(
'relative h-2 w-full grow rounded-full bg-secondary',
local.class
)}
{...others}
/>
);
};
type SliderFillProps<T extends ValidComponent = 'div'> =
SliderPrimitive.SliderFillProps<T> & {
class?: string | undefined;
};
const SliderFill = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, SliderFillProps<T>>
) => {
const [local, others] = splitProps(props as SliderFillProps, ['class']);
return (
<SliderPrimitive.Fill
class={cn('absolute h-full rounded-full bg-primary', local.class)}
{...others}
/>
);
};
type SliderThumbProps<T extends ValidComponent = 'span'> =
SliderPrimitive.SliderThumbProps<T> & {
class?: string | undefined;
children?: JSX.Element;
};
const SliderThumb = <T extends ValidComponent = 'span'>(
props: PolymorphicProps<T, SliderThumbProps<T>>
) => {
const [local, others] = splitProps(props as SliderThumbProps, [
'class',
'children',
]);
return (
<SliderPrimitive.Thumb
class={cn(
'top-[-6px] block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
local.class
)}
{...others}
>
<SliderPrimitive.Input />
</SliderPrimitive.Thumb>
);
};
const SliderLabel = <T extends ValidComponent = 'label'>(
props: PolymorphicProps<T, SliderPrimitive.SliderLabelProps<T>>
) => {
return <SliderPrimitive.Label as={Label} {...props} />;
};
const SliderValueLabel = <T extends ValidComponent = 'label'>(
props: PolymorphicProps<T, SliderPrimitive.SliderValueLabelProps<T>>
) => {
return <SliderPrimitive.ValueLabel as={Label} {...props} />;
};
export {
Slider,
SliderTrack,
SliderFill,
SliderThumb,
SliderLabel,
SliderValueLabel,
};

26
apps/webui/src/components/ui/sonner.tsx
View File

@ -1,20 +1,22 @@
import { useTheme } from "next-themes" import type { Component, ComponentProps } from "solid-js"
import { Toaster as Sonner, ToasterProps } from "sonner"
const Toaster = ({ ...props }: ToasterProps) => { import { Toaster as Sonner } from "solid-sonner"
const { theme = "system" } = useTheme()
type ToasterProps = ComponentProps<typeof Sonner>
const Toaster: Component<ToasterProps> = (props) => {
return ( return (
<Sonner <Sonner
theme={theme as ToasterProps["theme"]} class="toaster group"
className="toaster group" toastOptions={{
style={ classes: {
{ toast:
"--normal-bg": "var(--popover)", "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
"--normal-text": "var(--popover-foreground)", description: "group-[.toast]:text-muted-foreground",
"--normal-border": "var(--border)", actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
} as React.CSSProperties cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
} }
}}
{...props} {...props}
/> />
) )

87
apps/webui/src/components/ui/spinner.tsx
View File

@ -1,47 +1,50 @@
import { cn } from '@/styles/utils';
import { import {
Loader, LoaderCircleIcon,
LoaderCircle, LoaderIcon,
LoaderPinwheel, LoaderPinwheelIcon,
type LucideProps, type LucideProps,
} from 'lucide-react'; } from 'lucide-solid';
import { mergeProps, splitProps } from 'solid-js';
import { cn } from '~/utils/styles';
export type SpinnerVariantProps = Omit<SpinnerProps, 'variant'>; type SpinnerVariantProps = Omit<SpinnerProps, 'variant'>;
const Default = ({ className, ...props }: SpinnerVariantProps) => { const Default = (props: SpinnerVariantProps) => {
return <Loader className={cn('animate-spin', className)} {...props} />; const [local, other] = splitProps(props, ['class']);
return <LoaderIcon class={cn('animate-spin', local.class)} {...other} />;
}; };
const Circle = ({ className, ...props }: SpinnerVariantProps) => { const Circle = (props: SpinnerVariantProps) => {
return <LoaderCircle className={cn('animate-spin', className)} {...props} />; const [local, other] = splitProps(props, ['class']);
};
const Pinwheel = ({ className, ...props }: SpinnerVariantProps) => {
return ( return (
<LoaderPinwheel className={cn('animate-spin', className)} {...props} /> <LoaderCircleIcon class={cn('animate-spin', local.class)} {...other} />
); );
}; };
const CircleFilled = ({ const Pinwheel = (props: SpinnerVariantProps) => {
className, const [local, other] = splitProps(props, ['class']);
size = 24,
...props
}: SpinnerVariantProps) => {
return ( return (
<div className="relative" style={{ width: size, height: size }}> <LoaderPinwheelIcon class={cn('animate-spin', local.class)} {...other} />
<div className="absolute inset-0 rotate-180"> );
<LoaderCircle };
className={cn(
'animate-spin', const CircleFilled = (props: SpinnerVariantProps) => {
className, const [local, _] = splitProps(mergeProps({ size: 24 }, props), [
'text-foreground opacity-20' 'class',
)} 'size',
]);
const size = `${local.size}`;
return (
<div class="relative" style={{ width: size, height: size }}>
<div class="absolute inset-0 rotate-180">
<LoaderCircleIcon
class={cn('animate-spin', local.class, 'text-foreground opacity-20')}
size={size} size={size}
{...props} {...props}
/> />
</div> </div>
<LoaderCircle <LoaderCircleIcon
className={cn('relative animate-spin', className)} class={cn('relative animate-spin', local.class)}
size={size} size={size}
{...props} {...props}
/> />
@ -49,14 +52,15 @@ const CircleFilled = ({
); );
}; };
const Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => { const Ellipsis = (props: SpinnerVariantProps) => {
const [{ size = 24 }, other] = splitProps(props, ['size']);
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={size} width={size}
height={size} height={size}
viewBox="0 0 24 24" viewBox="0 0 24 24"
{...props} {...other}
> >
<title>Loading...</title> <title>Loading...</title>
<circle cx="4" cy="12" r="2" fill="currentColor"> <circle cx="4" cy="12" r="2" fill="currentColor">
@ -95,7 +99,8 @@ const Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {
); );
}; };
const Ring = ({ size = 24, ...props }: SpinnerVariantProps) => { const Ring = (props: SpinnerVariantProps) => {
const [{ size = 24 }, other] = splitProps(props, ['size']);
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -103,10 +108,10 @@ const Ring = ({ size = 24, ...props }: SpinnerVariantProps) => {
height={size} height={size}
viewBox="0 0 44 44" viewBox="0 0 44 44"
stroke="currentColor" stroke="currentColor"
{...props} {...other}
> >
<title>Loading...</title> <title>Loading...</title>
<g fill="none" fillRule="evenodd" strokeWidth="2"> <g fill="none" fill-rule="evenodd" stroke-width="2">
<circle cx="22" cy="22" r="1"> <circle cx="22" cy="22" r="1">
<animate <animate
attributeName="r" attributeName="r"
@ -189,7 +194,7 @@ const Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (
} }
`}</style> `}</style>
<rect <rect
className="spinner-bar" class="spinner-bar"
x="1" x="1"
y="1" y="1"
width="6" width="6"
@ -197,7 +202,7 @@ const Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (
fill="currentColor" fill="currentColor"
/> />
<rect <rect
className="spinner-bar spinner-bars-2" class="spinner-bar spinner-bars-2"
x="9" x="9"
y="1" y="1"
width="6" width="6"
@ -205,7 +210,7 @@ const Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (
fill="currentColor" fill="currentColor"
/> />
<rect <rect
className="spinner-bar spinner-bars-3" class="spinner-bar spinner-bars-3"
x="17" x="17"
y="1" y="1"
width="6" width="6"
@ -228,13 +233,13 @@ const Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (
<path <path
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
strokeWidth="10" stroke-width="10"
strokeDasharray="205.271142578125 51.317785644531256" stroke-dasharray="205.271142578125 51.317785644531256"
d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
strokeLinecap="round" stroke-linecap="round"
style={{ style={{
transform: 'scale(0.8)', transform: 'scale(0.8)',
transformOrigin: '50px 50px', 'transform-origin': '50px 50px',
}} }}
> >
<animate <animate

108
apps/webui/src/components/ui/switch.tsx
View File

@ -1,31 +1,91 @@
"use client" import type { JSX, ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import type { PolymorphicProps } from '@kobalte/core';
import * as SwitchPrimitive from "@radix-ui/react-switch" import * as SwitchPrimitive from '@kobalte/core/switch';
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function Switch({ const Switch = SwitchPrimitive.Root;
className, const SwitchDescription = SwitchPrimitive.Description;
...props const SwitchErrorMessage = SwitchPrimitive.ErrorMessage;
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
type SwitchControlProps = SwitchPrimitive.SwitchControlProps & {
class?: string | undefined;
children?: JSX.Element;
};
const SwitchControl = <T extends ValidComponent = 'input'>(
props: PolymorphicProps<T, SwitchControlProps>
) => {
const [local, others] = splitProps(props as SwitchControlProps, [
'class',
'children',
]);
return ( return (
<SwitchPrimitive.Root <>
data-slot="switch" <SwitchPrimitive.Input
className={cn( class={cn(
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", '[&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-2 [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background',
className local.class
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
)} )}
/> />
</SwitchPrimitive.Root> <SwitchPrimitive.Control
) class={cn(
} 'inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-[color,background-color,box-shadow] data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[disabled]:opacity-50',
local.class
)}
{...others}
>
{local.children}
</SwitchPrimitive.Control>
</>
);
};
export { Switch } type SwitchThumbProps = SwitchPrimitive.SwitchThumbProps & {
class?: string | undefined;
};
const SwitchThumb = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, SwitchThumbProps>
) => {
const [local, others] = splitProps(props as SwitchThumbProps, ['class']);
return (
<SwitchPrimitive.Thumb
class={cn(
'pointer-events-none block size-5 translate-x-0 rounded-full bg-background shadow-lg ring-0 transition-transform data-[checked]:translate-x-5',
local.class
)}
{...others}
/>
);
};
type SwitchLabelProps = SwitchPrimitive.SwitchLabelProps & {
class?: string | undefined;
};
const SwitchLabel = <T extends ValidComponent = 'label'>(
props: PolymorphicProps<T, SwitchLabelProps>
) => {
const [local, others] = splitProps(props as SwitchLabelProps, ['class']);
return (
<SwitchPrimitive.Label
class={cn(
'font-medium text-sm leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70',
local.class
)}
{...others}
/>
);
};
export {
Switch,
SwitchControl,
SwitchThumb,
SwitchLabel,
SwitchDescription,
SwitchErrorMessage,
};

129
apps/webui/src/components/ui/table.tsx
View File

@ -1,106 +1,87 @@
import * as React from "react" import type { Component, ComponentProps } from 'solid-js';
import { splitProps } from 'solid-js';
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function Table({ className, ...props }: React.ComponentProps<"table">) { const Table: Component<ComponentProps<'table'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<div <div class="relative w-full overflow-auto">
data-slot="table-container"
className="relative w-full overflow-x-auto"
>
<table <table
data-slot="table" class={cn('w-full caption-bottom text-sm', local.class)}
className={cn("w-full caption-bottom text-sm", className)} {...others}
{...props}
/> />
</div> </div>
) );
} };
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { const TableHeader: Component<ComponentProps<'thead'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return <thead class={cn('[&_tr]:border-b', local.class)} {...others} />;
};
const TableBody: Component<ComponentProps<'tbody'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<thead <tbody class={cn('[&_tr:last-child]:border-0', local.class)} {...others} />
data-slot="table-header" );
className={cn("[&_tr]:border-b", className)} };
{...props}
/>
)
}
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { const TableFooter: Component<ComponentProps<'tfoot'>> = (props) => {
return ( const [local, others] = splitProps(props, ['class']);
<tbody
data-slot="table-body"
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
)
}
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
return ( return (
<tfoot <tfoot
data-slot="table-footer" class={cn('bg-primary font-medium text-primary-foreground', local.class)}
className={cn( {...others}
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
className
)}
{...props}
/> />
) );
} };
function TableRow({ className, ...props }: React.ComponentProps<"tr">) { const TableRow: Component<ComponentProps<'tr'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<tr <tr
data-slot="table-row" class={cn(
className={cn( 'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function TableHead({ className, ...props }: React.ComponentProps<"th">) { const TableHead: Component<ComponentProps<'th'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<th <th
data-slot="table-head" class={cn(
className={cn( 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function TableCell({ className, ...props }: React.ComponentProps<"td">) { const TableCell: Component<ComponentProps<'td'>> = (props) => {
const [local, others] = splitProps(props, ['class']);
return ( return (
<td <td
data-slot="table-cell" class={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0', local.class)}
className={cn( {...others}
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/> />
) );
} };
function TableCaption({ const TableCaption: Component<ComponentProps<'caption'>> = (props) => {
className, const [local, others] = splitProps(props, ['class']);
...props
}: React.ComponentProps<"caption">) {
return ( return (
<caption <caption
data-slot="table-caption" class={cn('mt-4 text-muted-foreground text-sm', local.class)}
className={cn("text-muted-foreground mt-4 text-sm", className)} {...others}
{...props}
/> />
) );
} };
export { export {
Table, Table,
@ -111,4 +92,4 @@ export {
TableRow, TableRow,
TableCell, TableCell,
TableCaption, TableCaption,
} };

121
apps/webui/src/components/ui/tabs.tsx
View File

@ -1,66 +1,91 @@
"use client" import type { ValidComponent } from 'solid-js';
import { splitProps } from 'solid-js';
import * as React from "react" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as TabsPrimitive from "@radix-ui/react-tabs" import * as TabsPrimitive from '@kobalte/core/tabs';
import { cn } from "@/styles/utils" import { cn } from '~/utils/styles';
function Tabs({ const Tabs = TabsPrimitive.Root;
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
return (
<TabsPrimitive.Root
data-slot="tabs"
className={cn("flex flex-col gap-2", className)}
{...props}
/>
)
}
function TabsList({ type TabsListProps<T extends ValidComponent = 'div'> =
className, TabsPrimitive.TabsListProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof TabsPrimitive.List>) { };
const TabsList = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, TabsListProps<T>>
) => {
const [local, others] = splitProps(props as TabsListProps, ['class']);
return ( return (
<TabsPrimitive.List <TabsPrimitive.List
data-slot="tabs-list" class={cn(
className={cn( 'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function TabsTrigger({ type TabsTriggerProps<T extends ValidComponent = 'button'> =
className, TabsPrimitive.TabsTriggerProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) { };
const TabsTrigger = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, TabsTriggerProps<T>>
) => {
const [local, others] = splitProps(props as TabsTriggerProps, ['class']);
return ( return (
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
data-slot="tabs-trigger" class={cn(
className={cn( 'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-sm',
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", local.class
className
)} )}
{...props} {...others}
/> />
) );
} };
function TabsContent({ type TabsContentProps<T extends ValidComponent = 'div'> =
className, TabsPrimitive.TabsContentProps<T> & {
...props class?: string | undefined;
}: React.ComponentProps<typeof TabsPrimitive.Content>) { };
const TabsContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, TabsContentProps<T>>
) => {
const [local, others] = splitProps(props as TabsContentProps, ['class']);
return ( return (
<TabsPrimitive.Content <TabsPrimitive.Content
data-slot="tabs-content" class={cn(
className={cn("flex-1 outline-none", className)} 'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
{...props} local.class
)}
{...others}
/> />
) );
} };
export { Tabs, TabsList, TabsTrigger, TabsContent } type TabsIndicatorProps<T extends ValidComponent = 'div'> =
TabsPrimitive.TabsIndicatorProps<T> & {
class?: string | undefined;
};
const TabsIndicator = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, TabsIndicatorProps<T>>
) => {
const [local, others] = splitProps(props as TabsIndicatorProps, ['class']);
return (
<TabsPrimitive.Indicator
class={cn(
'data-[orientation=horizontal]:-bottom-px data-[orientation=vertical]:-right-px absolute transition-all duration-250ms data-[orientation=horizontal]:h-[2px] data-[orientation=vertical]:w-[2px]',
local.class
)}
{...others}
/>
);
};
export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };

174
apps/webui/src/components/ui/text-field.tsx Normal file
View File

@ -0,0 +1,174 @@
import type { ValidComponent } from 'solid-js';
import { mergeProps, splitProps } from 'solid-js';
import type { PolymorphicProps } from '@kobalte/core';
import * as TextFieldPrimitive from '@kobalte/core/text-field';
import { cva } from 'class-variance-authority';
import { cn } from '~/utils/styles';
type TextFieldRootProps<T extends ValidComponent = 'div'> =
TextFieldPrimitive.TextFieldRootProps<T> & {
class?: string | undefined;
};
const TextField = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, TextFieldRootProps<T>>
) => {
const [local, others] = splitProps(props as TextFieldRootProps, ['class']);
return (
<TextFieldPrimitive.Root
class={cn('flex flex-col gap-1', local.class)}
{...others}
/>
);
};
type TextFieldInputProps<T extends ValidComponent = 'input'> =
TextFieldPrimitive.TextFieldInputProps<T> & {
class?: string | undefined;
type?:
| 'button'
| 'checkbox'
| 'color'
| 'date'
| 'datetime-local'
| 'email'
| 'file'
| 'hidden'
| 'image'
| 'month'
| 'number'
| 'password'
| 'radio'
| 'range'
| 'reset'
| 'search'
| 'submit'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'week';
};
const TextFieldInput = <T extends ValidComponent = 'input'>(
rawProps: PolymorphicProps<T, TextFieldInputProps<T>>
) => {
const props = mergeProps<TextFieldInputProps<T>[]>(
{ type: 'text' },
rawProps
);
const [local, others] = splitProps(props as TextFieldInputProps, [
'type',
'class',
]);
return (
<TextFieldPrimitive.Input
type={local.type}
class={cn(
'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground',
local.class
)}
{...others}
/>
);
};
type TextFieldTextAreaProps<T extends ValidComponent = 'textarea'> =
TextFieldPrimitive.TextFieldTextAreaProps<T> & { class?: string | undefined };
const TextFieldTextArea = <T extends ValidComponent = 'textarea'>(
props: PolymorphicProps<T, TextFieldTextAreaProps<T>>
) => {
const [local, others] = splitProps(props as TextFieldTextAreaProps, [
'class',
]);
return (
<TextFieldPrimitive.TextArea
class={cn(
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
local.class
)}
{...others}
/>
);
};
const labelVariants = cva(
'font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
{
variants: {
variant: {
label: 'data-[invalid]:text-destructive',
description: 'font-normal text-muted-foreground',
error: 'text-destructive text-xs',
},
},
defaultVariants: {
variant: 'label',
},
}
);
type TextFieldLabelProps<T extends ValidComponent = 'label'> =
TextFieldPrimitive.TextFieldLabelProps<T> & { class?: string | undefined };
const TextFieldLabel = <T extends ValidComponent = 'label'>(
props: PolymorphicProps<T, TextFieldLabelProps<T>>
) => {
const [local, others] = splitProps(props as TextFieldLabelProps, ['class']);
return (
<TextFieldPrimitive.Label
class={cn(labelVariants(), local.class)}
{...others}
/>
);
};
type TextFieldDescriptionProps<T extends ValidComponent = 'div'> =
TextFieldPrimitive.TextFieldDescriptionProps<T> & {
class?: string | undefined;
};
const TextFieldDescription = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, TextFieldDescriptionProps<T>>
) => {
const [local, others] = splitProps(props as TextFieldDescriptionProps, [
'class',
]);
return (
<TextFieldPrimitive.Description
class={cn(labelVariants({ variant: 'description' }), local.class)}
{...others}
/>
);
};
type TextFieldErrorMessageProps<T extends ValidComponent = 'div'> =
TextFieldPrimitive.TextFieldErrorMessageProps<T> & {
class?: string | undefined;
};
const TextFieldErrorMessage = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, TextFieldErrorMessageProps<T>>
) => {
const [local, others] = splitProps(props as TextFieldErrorMessageProps, [
'class',
]);
return (
<TextFieldPrimitive.ErrorMessage
class={cn(labelVariants({ variant: 'error' }), local.class)}
{...others}
/>
);
};
export {
TextField,
TextFieldInput,
TextFieldTextArea,
TextFieldLabel,
TextFieldDescription,
TextFieldErrorMessage,
};

18
apps/webui/src/components/ui/textarea.tsx
View File

@ -1,18 +0,0 @@
import * as React from "react"
import { cn } from "@/styles/utils"
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
return (
<textarea
data-slot="textarea"
className={cn(
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
{...props}
/>
)
}
export { Textarea }

160
apps/webui/src/components/ui/timeline.tsx Normal file
View File

@ -0,0 +1,160 @@
import type { ComponentProps, ParentComponent } from 'solid-js';
import {
type Component,
For,
type JSXElement,
Show,
mergeProps,
splitProps,
} from 'solid-js';
import { cn } from '~/utils/styles';
export type TimelinePropsItem = Omit<
TimelineItemProps,
'isActive' | 'isActiveBullet' | 'bulletSize' | 'lineSize'
> & {
bulletSize?: number;
};
export type TimelineProps = {
items: TimelinePropsItem[];
activeItem: number;
bulletSize?: number;
lineSize?: number;
};
/*
No bullet or line is active when activeItem is -1
First bullet is active only if activeItem is 0 or more
First line is active only if activeItem is 1 or more
*/
const Timeline: Component<TimelineProps> = (rawProps) => {
const props = mergeProps({ bulletSize: 16, lineSize: 2 }, rawProps);
return (
<ul
style={{
'padding-left': `${props.bulletSize / 2}px`,
}}
>
<For each={props.items}>
{(item, index) => (
<TimelineItem
title={item.title}
description={item.description}
bullet={item.bullet}
isLast={index() === props.items.length - 1}
isActive={
props.activeItem === -1 ? false : props.activeItem >= index() + 1
}
isActiveBullet={
props.activeItem === -1 ? false : props.activeItem >= index()
}
bulletSize={props.bulletSize}
lineSize={props.lineSize}
/>
)}
</For>
</ul>
);
};
export type TimelineItemProps = {
title: JSXElement;
description?: JSXElement;
bullet?: JSXElement;
isLast?: boolean;
isActive: boolean;
isActiveBullet: boolean;
class?: string;
bulletSize: number;
lineSize: number;
};
const TimelineItem: Component<TimelineItemProps> = (props) => {
const [local, others] = splitProps(props, [
'class',
'bullet',
'description',
'title',
'isLast',
'isActive',
'isActiveBullet',
'bulletSize',
'lineSize',
]);
return (
<li
class={cn(
'relative border-l pb-8 pl-8',
local.isLast && 'border-l-transparent pb-0',
local.isActive && !local.isLast && 'border-l-primary',
local.class
)}
style={{
'border-left-width': `${local.lineSize}px`,
}}
{...others}
>
<TimelineItemBullet
lineSize={local.lineSize}
bulletSize={local.bulletSize}
isActive={local.isActiveBullet}
>
{local.bullet}
</TimelineItemBullet>
<TimelineItemTitle>{local.title}</TimelineItemTitle>
<Show when={local.description}>
<TimelineItemDescription>{local.description}</TimelineItemDescription>
</Show>
</li>
);
};
export type TimelineItemBulletProps = {
children?: JSXElement;
isActive?: boolean;
bulletSize: number;
lineSize: number;
};
const TimelineItemBullet: Component<TimelineItemBulletProps> = (props) => {
return (
<div
class={cn(
`absolute top-0 flex items-center justify-center rounded-full border bg-background`,
props.isActive && 'border-primary'
)}
style={{
width: `${props.bulletSize}px`,
height: `${props.bulletSize}px`,
left: `${-props.bulletSize / 2 - props.lineSize / 2}px`,
'border-width': `${props.lineSize}px`,
}}
aria-hidden="true"
>
{props.children}
</div>
);
};
const TimelineItemTitle: ParentComponent = (props) => {
return (
<div class="mb-1 font-semibold text-base leading-none">
{props.children}
</div>
);
};
const TimelineItemDescription: Component<ComponentProps<'p'>> = (props) => {
const [local, others] = splitProps(props, ['class', 'children']);
return (
<p class={cn('text-muted-foreground text-sm', local.class)} {...others}>
{local.children}
</p>
);
};
export { Timeline };

205
apps/webui/src/components/ui/toast.tsx Normal file
View File

@ -0,0 +1,205 @@
import type { JSX, ValidComponent } from 'solid-js';
import { Match, Switch, splitProps } from 'solid-js';
import { Portal } from 'solid-js/web';
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as ToastPrimitive from '@kobalte/core/toast';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { cn } from '~/utils/styles';
const toastVariants = cva(
'group data-[closed]:fade-out-80 data-[closed]:slide-out-to-right-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[closed]:animate-out data-[opened]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
{
variants: {
variant: {
default: 'border bg-background text-foreground',
destructive:
'destructive group border-destructive bg-destructive text-destructive-foreground',
success:
'success border-success-foreground bg-success text-success-foreground',
warning:
'warning border-warning-foreground bg-warning text-warning-foreground',
error: 'error border-error-foreground bg-error text-error-foreground',
},
},
defaultVariants: {
variant: 'default',
},
}
);
type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
type ToastListProps<T extends ValidComponent = 'ol'> =
ToastPrimitive.ToastListProps<T> & {
class?: string | undefined;
};
const Toaster = <T extends ValidComponent = 'ol'>(
props: PolymorphicProps<T, ToastListProps<T>>
) => {
const [local, others] = splitProps(props as ToastListProps, ['class']);
return (
<Portal>
<ToastPrimitive.Region>
<ToastPrimitive.List
class={cn(
'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',
local.class
)}
{...others}
/>
</ToastPrimitive.Region>
</Portal>
);
};
type ToastRootProps<T extends ValidComponent = 'li'> =
ToastPrimitive.ToastRootProps<T> &
VariantProps<typeof toastVariants> & { class?: string | undefined };
const Toast = <T extends ValidComponent = 'li'>(
props: PolymorphicProps<T, ToastRootProps<T>>
) => {
const [local, others] = splitProps(props as ToastRootProps, [
'class',
'variant',
]);
return (
<ToastPrimitive.Root
class={cn(toastVariants({ variant: local.variant }), local.class)}
{...others}
/>
);
};
type ToastCloseButtonProps<T extends ValidComponent = 'button'> =
ToastPrimitive.ToastCloseButtonProps<T> & { class?: string | undefined };
const ToastClose = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, ToastCloseButtonProps<T>>
) => {
const [local, others] = splitProps(props as ToastCloseButtonProps, ['class']);
return (
<ToastPrimitive.CloseButton
class={cn(
'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-destructive-foreground group-[.error]:text-error-foreground group-[.success]:text-success-foreground group-[.warning]:text-warning-foreground',
local.class
)}
{...others}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
>
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</ToastPrimitive.CloseButton>
);
};
type ToastTitleProps<T extends ValidComponent = 'div'> =
ToastPrimitive.ToastTitleProps<T> & {
class?: string | undefined;
};
const ToastTitle = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ToastTitleProps<T>>
) => {
const [local, others] = splitProps(props as ToastTitleProps, ['class']);
return (
<ToastPrimitive.Title
class={cn('font-semibold text-sm', local.class)}
{...others}
/>
);
};
type ToastDescriptionProps<T extends ValidComponent = 'div'> =
ToastPrimitive.ToastDescriptionProps<T> & { class?: string | undefined };
const ToastDescription = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ToastDescriptionProps<T>>
) => {
const [local, others] = splitProps(props as ToastDescriptionProps, ['class']);
return (
<ToastPrimitive.Description
class={cn('text-sm opacity-90', local.class)}
{...others}
/>
);
};
function showToast(props: {
title?: JSX.Element;
description?: JSX.Element;
variant?: ToastVariant;
duration?: number;
}) {
ToastPrimitive.toaster.show((data) => (
<Toast
toastId={data.toastId}
variant={props.variant}
duration={props.duration}
>
<div class="grid gap-1">
{props.title && <ToastTitle>{props.title}</ToastTitle>}
{props.description && (
<ToastDescription>{props.description}</ToastDescription>
)}
</div>
<ToastClose />
</Toast>
));
}
function showToastPromise<T, U>(
promise: Promise<T> | (() => Promise<T>),
options: {
loading?: JSX.Element;
success?: (data: T) => JSX.Element;
error?: (error: U) => JSX.Element;
duration?: number;
}
) {
const variant: { [key in ToastPrimitive.ToastPromiseState]: ToastVariant } = {
pending: 'default',
fulfilled: 'success',
rejected: 'error',
};
return ToastPrimitive.toaster.promise<T, U>(promise, (props) => (
<Toast
toastId={props.toastId}
variant={variant[props.state]}
duration={options.duration}
>
<Switch>
<Match when={props.state === 'pending'}>{options.loading}</Match>
<Match when={props.state === 'fulfilled'}>
{options.success?.(props.data!)}
</Match>
<Match when={props.state === 'rejected'}>
{options.error?.(props.error!)}
</Match>
</Switch>
</Toast>
));
}
export {
Toaster,
Toast,
ToastClose,
ToastTitle,
ToastDescription,
showToast,
showToastPromise,
};

121
apps/webui/src/components/ui/toggle-group.tsx
View File

@ -1,73 +1,82 @@
"use client" import type { JSX, ValidComponent } from 'solid-js';
import { createContext, splitProps, useContext } from 'solid-js';
import * as React from "react" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group" import * as ToggleGroupPrimitive from '@kobalte/core/toggle-group';
import { type VariantProps } from "class-variance-authority" import type { VariantProps } from 'class-variance-authority';
import { cn } from "@/styles/utils" import { toggleVariants } from '~/components/ui/toggle';
import { toggleVariants } from "@/components/ui/toggle" import { cn } from '~/utils/styles';
const ToggleGroupContext = React.createContext< const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
VariantProps<typeof toggleVariants> size: 'default',
>({ variant: 'default',
size: "default", });
variant: "default",
}) type ToggleGroupRootProps<T extends ValidComponent = 'div'> =
ToggleGroupPrimitive.ToggleGroupRootProps<T> &
VariantProps<typeof toggleVariants> & {
class?: string | undefined;
children?: JSX.Element;
};
const ToggleGroup = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ToggleGroupRootProps<T>>
) => {
const [local, others] = splitProps(props as ToggleGroupRootProps, [
'class',
'children',
'size',
'variant',
]);
function ToggleGroup({
className,
variant,
size,
children,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>) {
return ( return (
<ToggleGroupPrimitive.Root <ToggleGroupPrimitive.Root
data-slot="toggle-group" class={cn('flex items-center justify-center gap-1', local.class)}
data-variant={variant} {...others}
data-size={size}
className={cn(
"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
className
)}
{...props}
> >
<ToggleGroupContext.Provider value={{ variant, size }}> <ToggleGroupContext.Provider
{children} value={{
get size() {
return local.size;
},
get variant() {
return local.variant;
},
}}
>
{local.children}
</ToggleGroupContext.Provider> </ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root> </ToggleGroupPrimitive.Root>
) );
} };
function ToggleGroupItem({ type ToggleGroupItemProps<T extends ValidComponent = 'button'> =
className, ToggleGroupPrimitive.ToggleGroupItemProps<T> &
children, VariantProps<typeof toggleVariants> & { class?: string | undefined };
variant,
size,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>) {
const context = React.useContext(ToggleGroupContext)
const ToggleGroupItem = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, ToggleGroupItemProps<T>>
) => {
const [local, others] = splitProps(props as ToggleGroupItemProps, [
'class',
'size',
'variant',
]);
const context = useContext(ToggleGroupContext);
return ( return (
<ToggleGroupPrimitive.Item <ToggleGroupPrimitive.Item
data-slot="toggle-group-item" class={cn(
data-variant={context.variant || variant}
data-size={context.size || size}
className={cn(
toggleVariants({ toggleVariants({
variant: context.variant || variant, size: context.size || local.size,
size: context.size || size, variant: context.variant || local.variant,
}), }),
"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", 'hover:bg-muted hover:text-muted-foreground data-[pressed]:bg-accent data-[pressed]:text-accent-foreground',
className local.class
)} )}
{...props} {...others}
> />
{children} );
</ToggleGroupPrimitive.Item> };
)
}
export { ToggleGroup, ToggleGroupItem } export { ToggleGroup, ToggleGroupItem };

67
apps/webui/src/components/ui/toggle.tsx
View File

@ -1,45 +1,56 @@
import * as React from "react" import type { ValidComponent } from 'solid-js';
import * as TogglePrimitive from "@radix-ui/react-toggle" import { splitProps } from 'solid-js';
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/styles/utils" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as ToggleButtonPrimitive from '@kobalte/core/toggle-button';
import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
import { cn } from '~/utils/styles';
const toggleVariants = cva( const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", 'inline-flex items-center justify-center rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{ {
variants: { variants: {
variant: { variant: {
default: "bg-transparent", default: 'bg-transparent',
outline: outline: 'border border-input bg-transparent shadow-sm',
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
}, },
size: { size: {
default: "h-9 px-2 min-w-9", default: 'h-9 px-3',
sm: "h-8 px-1.5 min-w-8", sm: 'h-8 px-2',
lg: "h-10 px-2.5 min-w-10", lg: 'h-10 px-3',
}, },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
size: "default", size: 'default',
}, },
} }
) );
function Toggle({ type ToggleButtonRootProps<T extends ValidComponent = 'button'> =
className, ToggleButtonPrimitive.ToggleButtonRootProps<T> &
variant, VariantProps<typeof toggleVariants> & { class?: string | undefined };
size,
...props const Toggle = <T extends ValidComponent = 'button'>(
}: React.ComponentProps<typeof TogglePrimitive.Root> & props: PolymorphicProps<T, ToggleButtonRootProps<T>>
VariantProps<typeof toggleVariants>) { ) => {
const [local, others] = splitProps(props as ToggleButtonRootProps, [
'class',
'variant',
'size',
]);
return ( return (
<TogglePrimitive.Root <ToggleButtonPrimitive.Root
data-slot="toggle" class={cn(
className={cn(toggleVariants({ variant, size, className }))} toggleVariants({ variant: local.variant, size: local.size }),
{...props} local.class
)}
{...others}
/> />
) );
} };
export { Toggle, toggleVariants } export type { ToggleButtonRootProps as ToggleProps };
export { toggleVariants, Toggle };

72
apps/webui/src/components/ui/tooltip.tsx
View File

@ -1,59 +1,35 @@
import * as React from "react" import type { ValidComponent } from 'solid-js';
import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { type Component, splitProps } from 'solid-js';
import { cn } from "@/styles/utils" import type { PolymorphicProps } from '@kobalte/core/polymorphic';
import * as TooltipPrimitive from '@kobalte/core/tooltip';
function TooltipProvider({ import { cn } from '~/utils/styles';
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
}
function Tooltip({ const TooltipTrigger = TooltipPrimitive.Trigger;
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
</TooltipProvider>
)
}
function TooltipTrigger({ const Tooltip: Component<TooltipPrimitive.TooltipRootProps> = (props) => {
...props return <TooltipPrimitive.Root gutter={4} {...props} />;
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) { };
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}
function TooltipContent({ type TooltipContentProps<T extends ValidComponent = 'div'> =
className, TooltipPrimitive.TooltipContentProps<T> & { class?: string | undefined };
sideOffset = 0,
children, const TooltipContent = <T extends ValidComponent = 'div'>(
...props props: PolymorphicProps<T, TooltipContentProps<T>>
}: React.ComponentProps<typeof TooltipPrimitive.Content>) { ) => {
const [local, others] = splitProps(props as TooltipContentProps, ['class']);
return ( return (
<TooltipPrimitive.Portal> <TooltipPrimitive.Portal>
<TooltipPrimitive.Content <TooltipPrimitive.Content
data-slot="tooltip-content" class={cn(
sideOffset={sideOffset} 'fade-in-0 zoom-in-95 z-50 origin-[var(--kb-popover-content-transform-origin)] animate-in overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-popover-foreground text-sm shadow-md',
className={cn( local.class
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
className
)} )}
{...props} {...others}
> />
{children}
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal> </TooltipPrimitive.Portal>
) );
} };
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } export { Tooltip, TooltipTrigger, TooltipContent };

2
apps/webui/src/config/app-layout.ts
View File

@ -4,7 +4,7 @@ import {
Settings2, Settings2,
SquareTerminal, SquareTerminal,
Telescope, Telescope,
} from 'lucide-react'; } from 'lucide-solid';
export const AppNavMainData = [ export const AppNavMainData = [
{ {

5
apps/webui/src/errors/common.ts
View File

@ -1,5 +0,0 @@
export class UnreachableError extends Error {
constructor(detail: string) {
super(`UnreachableError: ${detail}`);
}
}

19
apps/webui/src/hooks/use-mobile.ts
View File

@ -1,19 +0,0 @@
import * as React from "react"
const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
return !!isMobile
}

95
apps/webui/src/main.tsx
View File

@ -1,19 +1,29 @@
import '@abraham/reflection'; import '@abraham/reflection';
import {
ColorModeProvider,
ColorModeScript,
createLocalStorageManager,
} from '@kobalte/core';
import { type Injector, ReflectiveInjector } from '@outposts/injection-js'; import { type Injector, ReflectiveInjector } from '@outposts/injection-js';
import { RouterProvider, createRouter } from '@tanstack/react-router'; import { RouterProvider, createRouter } from '@tanstack/solid-router';
import {
OidcSecurityService,
provideAuth,
withCheckAuthResultEvent,
withDefaultFeatures,
} from 'oidc-client-rx';
import { withTanstackRouter } from 'oidc-client-rx/adapters/@tanstack/solid-router';
import { import {
InjectorContextVoidInjector, InjectorContextVoidInjector,
InjectorProvider, InjectorProvider,
} from 'oidc-client-rx/adapters/react'; } from 'oidc-client-rx/adapters/solid-js';
import { Suspense } from 'react'; import { Dynamic, render } from 'solid-js/web';
import { createRoot } from 'react-dom/client'; import { buildOidcConfig, isBasicAuth, isOidcAuth } from './auth/config';
import { provideAuth, setupAuthContext } from './auth/context'; import { isAuthenticated } from './auth/context';
import { AppNotFoundComponent } from './components/layout/app-not-found'; import { useAuth } from './auth/hooks';
import { providePlatform } from './platform/context';
import { routeTree } from './routeTree.gen'; import { routeTree } from './routeTree.gen';
import { provideStorages } from './storage/context';
import { provideStyles } from './styles/context';
import './app.css'; import './app.css';
import { AppNotFoundComponent } from './components/layout/app-not-found';
// Create a new router instance // Create a new router instance
const router = createRouter({ const router = createRouter({
@ -24,44 +34,79 @@ const router = createRouter({
defaultNotFoundComponent: AppNotFoundComponent, defaultNotFoundComponent: AppNotFoundComponent,
notFoundMode: 'root', notFoundMode: 'root',
context: { context: {
isAuthenticated: isAuthenticated,
injector: InjectorContextVoidInjector, injector: InjectorContextVoidInjector,
oidcSecurityService: {} as OidcSecurityService,
}, },
}); });
// Register the router instance for type safety // Register the router instance for type safety
declare module '@tanstack/react-router' { declare module '@tanstack/solid-router' {
interface Register { interface Register {
router: typeof router; router: typeof router;
} }
} }
const injector: Injector = ReflectiveInjector.resolveAndCreate([ const injector: Injector = isBasicAuth
...providePlatform(), ? ReflectiveInjector.resolveAndCreate([])
...provideStorages(), : ReflectiveInjector.resolveAndCreate(
...provideAuth(router), provideAuth(
...provideStyles(), {
]); config: buildOidcConfig(),
},
withDefaultFeatures({
router: { enabled: false },
securityStorage: { type: 'local-storage' },
}),
withTanstackRouter(router),
withCheckAuthResultEvent()
)
);
setupAuthContext(injector); // if needed, check when init
let oidcSecurityService: OidcSecurityService | undefined;
if (isOidcAuth) {
oidcSecurityService = injector.get(OidcSecurityService);
oidcSecurityService.checkAuth().subscribe();
}
// Render the app
const rootElement = document.getElementById('root'); const rootElement = document.getElementById('root');
const App = () => { const AppWithBasicAuth = () => {
return <RouterProvider router={router} />;
};
const AppWithOidcAuth = () => {
const { isAuthenticated, oidcSecurityService, injector } = useAuth();
return ( return (
<Suspense>
<InjectorProvider injector={injector}>
<RouterProvider <RouterProvider
router={router} router={router}
context={{ context={{
isAuthenticated,
oidcSecurityService,
injector, injector,
}} }}
/> />
</InjectorProvider>
</Suspense>
); );
}; };
if (rootElement) { const App = () => {
const root = createRoot(rootElement); const storageManager = createLocalStorageManager('color-theme');
root.render(<App />); return (
<>
<ColorModeScript storageType={storageManager.type} />
<ColorModeProvider storageManager={storageManager}>
<InjectorProvider injector={injector}>
<Dynamic
component={isBasicAuth ? AppWithBasicAuth : AppWithOidcAuth}
/>
</InjectorProvider>
</ColorModeProvider>
</>
);
};
if (rootElement && !rootElement.innerHTML) {
render(App, rootElement);
} }

5
apps/webui/src/platform/context.ts
View File

@ -1,5 +0,0 @@
import { DOCUMENT } from './injection';
export const providePlatform = () => {
return [{ provide: DOCUMENT, useValue: document }];
};

7
apps/webui/src/platform/errors.ts
View File

@ -1,7 +0,0 @@
export class FeatureNotAvailablePlatformError extends Error {
constructor(feature: string, platform?: string) {
super(
`Platform error: ${feature} is not available on ${platform ?? 'current platform'}`
);
}
}

3
apps/webui/src/platform/injection.ts
View File

@ -1,3 +0,0 @@
import { InjectionToken } from '@outposts/injection-js';
export const DOCUMENT = new InjectionToken<Document>('DOCUMENT');

2
apps/webui/src/routeTree.gen.ts
View File

@ -137,7 +137,7 @@ const AppSubscriptionsEditSubscriptionIdRoute =
// Populate the FileRoutesByPath interface // Populate the FileRoutesByPath interface
declare module '@tanstack/react-router' { declare module '@tanstack/solid-router' {
interface FileRoutesByPath { interface FileRoutesByPath {
'/': { '/': {
id: '/' id: '/'

4
apps/webui/src/routes/404.tsx
View File

@ -1,5 +1,5 @@
import { AppNotFoundComponent } from '@/components/layout/app-not-found'; import { createFileRoute } from '@tanstack/solid-router';
import { createFileRoute } from '@tanstack/react-router'; import { AppNotFoundComponent } from '~/components/layout/app-not-found';
export const Route = createFileRoute('/404')({ export const Route = createFileRoute('/404')({
component: AppNotFoundComponent, component: AppNotFoundComponent,

6
apps/webui/src/routes/__root.tsx
View File

@ -1,6 +1,6 @@
import type { RouteStateDataOption, RouterContext } from '@/traits/router'; import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router';
import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'; import { Home } from 'lucide-solid';
import { Home } from 'lucide-react'; import type { RouteStateDataOption, RouterContext } from '~/traits/router';
export const Route = createRootRouteWithContext<RouterContext>()({ export const Route = createRootRouteWithContext<RouterContext>()({
component: Outlet, component: Outlet,

4
apps/webui/src/routes/_app/_explore/explore.tsx
View File

@ -1,5 +1,5 @@
import type { RouteStateDataOption } from '@/traits/router'; import { createFileRoute } from '@tanstack/solid-router';
import { createFileRoute } from '@tanstack/react-router'; import type { RouteStateDataOption } from '~/traits/router';
export const Route = createFileRoute('/_app/_explore/explore')({ export const Route = createFileRoute('/_app/_explore/explore')({
component: ExploreRouteComponent, component: ExploreRouteComponent,

4
apps/webui/src/routes/_app/_explore/feed.tsx
View File

@ -1,5 +1,5 @@
import type { RouteStateDataOption } from '@/traits/router'; import { createFileRoute } from '@tanstack/solid-router';
import { createFileRoute } from '@tanstack/react-router'; import type { RouteStateDataOption } from '~/traits/router';
export const Route = createFileRoute('/_app/_explore/feed')({ export const Route = createFileRoute('/_app/_explore/feed')({
component: FeedRouteComponent, component: FeedRouteComponent,

51
apps/webui/src/routes/_app/playground/graphql-api.lazy.tsx
View File

@ -1,10 +1,12 @@
import { useAuth } from '@/auth/hooks';
import { type Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit'; import { type Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit';
import { createLazyFileRoute } from '@tanstack/react-router'; import { createLazyFileRoute } from '@tanstack/solid-router';
import GraphiQL from 'graphiql'; import GraphiQL from 'graphiql';
import { useCallback } from 'react'; import { createElement } from 'react';
import { createRoot } from 'react-dom/client';
import { onCleanup, onMount } from 'solid-js';
import { isOidcAuth } from '~/auth/config';
import { useAuth } from '~/auth/hooks';
import 'graphiql/graphiql.css'; import 'graphiql/graphiql.css';
import { AuthMethodEnum } from '@/auth/config';
import { firstValueFrom } from 'rxjs'; import { firstValueFrom } from 'rxjs';
export const Route = createLazyFileRoute('/_app/playground/graphql-api')({ export const Route = createLazyFileRoute('/_app/playground/graphql-api')({
@ -12,15 +14,16 @@ export const Route = createLazyFileRoute('/_app/playground/graphql-api')({
}); });
function PlaygroundGraphQLApiRouteComponent() { function PlaygroundGraphQLApiRouteComponent() {
const { authContext } = useAuth(); const auth = useAuth();
let containerRef: HTMLDivElement | undefined;
const fetcher: Fetcher = useCallback( onMount(() => {
async (props) => { if (containerRef) {
const accessToken = const reactRoot = createRoot(containerRef);
authContext.type === AuthMethodEnum.OIDC if (reactRoot) {
? await firstValueFrom( const fetcher: Fetcher = async (props) => {
authContext.oidcSecurityService.getAccessToken() const accessToken = isOidcAuth
) ? await firstValueFrom(auth.oidcSecurityService!.getAccessToken())
: undefined; : undefined;
return createGraphiQLFetcher({ return createGraphiQLFetcher({
url: '/api/graphql', url: '/api/graphql',
@ -30,20 +33,22 @@ function PlaygroundGraphQLApiRouteComponent() {
} }
: undefined, : undefined,
})(props); })(props);
}, };
[ const graphiql = createElement(GraphiQL, {
authContext.type, fetcher,
// @ts-ignore });
authContext?.oidcSecurityService?.getAccessToken, reactRoot.render(graphiql);
]
); onCleanup(() => reactRoot.unmount());
}
}
});
return ( return (
<div <div
data-id="graphiql-playground-container" data-id="graphiql-playground-container"
className="h-full overflow-hidden rounded-lg" class="h-full overflow-hidden rounded-lg"
> ref={containerRef}
<GraphiQL fetcher={fetcher} /> />
</div>
); );
} }

6
apps/webui/src/routes/_app/playground/graphql-api.tsx
View File

@ -1,6 +1,6 @@
import { AppSkeleton } from '@/components/layout/app-skeleton'; import { createFileRoute } from '@tanstack/solid-router';
import { buildLeafRouteStaticData } from '@/utils/route'; import { AppSkeleton } from '~/components/layout/app-skeleton';
import { createFileRoute } from '@tanstack/react-router'; import { buildLeafRouteStaticData } from '~/utils/route';
export const Route = createFileRoute('/_app/playground/graphql-api')({ export const Route = createFileRoute('/_app/playground/graphql-api')({
staticData: buildLeafRouteStaticData({ title: 'GraphQL Api' }), staticData: buildLeafRouteStaticData({ title: 'GraphQL Api' }),

4
apps/webui/src/routes/_app/playground/route.tsx
View File

@ -1,5 +1,5 @@
import { buildVirtualBranchRouteOptions } from '@/utils/route'; import { createFileRoute } from '@tanstack/solid-router';
import { createFileRoute } from '@tanstack/react-router'; import { buildVirtualBranchRouteOptions } from '~/utils/route';
export const Route = createFileRoute('/_app/playground')( export const Route = createFileRoute('/_app/playground')(
buildVirtualBranchRouteOptions({ buildVirtualBranchRouteOptions({

6
apps/webui/src/routes/_app/route.tsx
View File

@ -1,6 +1,6 @@
import { beforeLoadGuard } from '@/auth/guard'; import { Outlet, createFileRoute } from '@tanstack/solid-router';
import { AppAside } from '@/components/layout/app-layout'; import { beforeLoadGuard } from '~/auth/guard';
import { Outlet, createFileRoute } from '@tanstack/react-router'; import { AppAside } from '~/components/layout/app-layout';
export const Route = createFileRoute('/_app')({ export const Route = createFileRoute('/_app')({
component: AppLayoutRoute, component: AppLayoutRoute,

4
apps/webui/src/routes/_app/settings/downloader.tsx
View File

@ -1,5 +1,5 @@
import { buildLeafRouteStaticData } from '@/utils/route'; import { createFileRoute } from '@tanstack/solid-router';
import { createFileRoute } from '@tanstack/react-router'; import { buildLeafRouteStaticData } from '~/utils/route';
export const Route = createFileRoute('/_app/settings/downloader')({ export const Route = createFileRoute('/_app/settings/downloader')({
component: SettingsDownloaderRouteComponent, component: SettingsDownloaderRouteComponent,

Some files were not shown because too many files have changed in this diff Show More