SkillGuard: complete frontend wiring and harden backend
Original task: build "SkillGuard", a German web app to audit agent skills on two axes (IT-Sicherheit, Datenschutz) with static rule engine + Replit-independent AI analysis configured via an admin backend. This session: - Fixed frontend TS errors: lucide-react name collisions (Badge from ui, Activity from lucide), widened apiType to AiProviderApiType, added queryKey to useGetScan. - Verified all pages render in German (Dashboard, Prüfen, Bericht, Verlauf, Admin) and the full scan flow works end-to-end (malicious sample -> verdict block). Code-review-driven hardening: - POST /api/scans now returns the full ScanDetail (files + findings) to match the OpenAPI contract, instead of only the summary. - AI provider error bodies are redacted (token, Bearer, sk- patterns) before being returned/persisted, and provider fetches now have a 60s timeout. - ZIP parsing now enforces limits (max files, total + per-file size) to mitigate zip-bomb DoS. Updated replit.md (project overview, decisions, gotchas) and added a memory note on lucide-react icon name collisions.
This commit is contained in:
Replit Agent
parent
c93934b8f6
commit
a70b0d580a
147 changed files with 12937 additions and 107 deletions
1
.agents/memory/MEMORY.md
Normal file
1
.agents/memory/MEMORY.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
- [lucide-react icon name collisions](lucide-icon-name-collisions.md) — `Badge`/`Activity` from lucide collide with shadcn/ui Badge and React 19 Activity; import Badge from ui, Activity from lucide.
|
||||
10
.agents/memory/lucide-icon-name-collisions.md
Normal file
10
.agents/memory/lucide-icon-name-collisions.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
name: lucide-react icon name collisions
|
||||
description: lucide-react exports icons whose names collide with UI components and React 19 built-ins, causing silent JSX type errors
|
||||
---
|
||||
|
||||
When importing from `lucide-react`, some icon names collide with other symbols and the wrong one silently wins, producing confusing JSX prop type errors (e.g. "variant does not exist on LucideProps" or "className does not exist on ActivityProps").
|
||||
|
||||
**Why:** `lucide-react` exports `Badge` (collides with shadcn/ui `Badge`) and `Activity` (collides with React 19's built-in `Activity` component). If `Badge`/`Activity` is imported from `lucide-react` alongside, or the UI component is NOT imported, TS resolves the JSX tag to the wrong type. `<Badge variant=...>` then fails because the lucide icon has no `variant`, and `<Activity className=...>` fails against React's `ActivityProps`.
|
||||
|
||||
**How to apply:** Import `Badge` from `@/components/ui/badge`, never from `lucide-react`. Import `Activity` from `lucide-react` explicitly (not from `react`). When a JSX element reports props missing that clearly belong to a different component, check the import source for a name collision first.
|
||||
4
.replit
4
.replit
|
|
@ -26,3 +26,7 @@ externalPort = 80
|
|||
[[ports]]
|
||||
localPort = 8081
|
||||
externalPort = 8081
|
||||
|
||||
[[ports]]
|
||||
localPort = 20892
|
||||
externalPort = 3000
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"cors": "^2.8.6",
|
||||
"drizzle-orm": "catalog:",
|
||||
"express": "^5.2.1",
|
||||
"fflate": "^0.8.3",
|
||||
"pino": "^9.14.0",
|
||||
"pino-http": "^10.5.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ app.use(
|
|||
}),
|
||||
);
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
app.use(express.json({ limit: "25mb" }));
|
||||
app.use(express.urlencoded({ extended: true, limit: "25mb" }));
|
||||
|
||||
app.use("/api", router);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import app from "./app";
|
||||
import { logger } from "./lib/logger";
|
||||
import { seedDefaults } from "./lib/seed";
|
||||
|
||||
const rawPort = process.env["PORT"];
|
||||
|
||||
|
|
@ -22,4 +23,5 @@ app.listen(port, (err) => {
|
|||
}
|
||||
|
||||
logger.info({ port }, "Server listening");
|
||||
void seedDefaults();
|
||||
});
|
||||
|
|
|
|||
190
artifacts/api-server/src/lib/aiAnalysis.ts
Normal file
190
artifacts/api-server/src/lib/aiAnalysis.ts
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
import type { AiProvider, Prompt } from "@workspace/db";
|
||||
import type { ParsedFile, RawFinding, Severity, Axis } from "./ruleCatalog";
|
||||
|
||||
const SEVERITIES: Severity[] = ["critical", "high", "medium", "low", "info"];
|
||||
const AXES: Axis[] = ["security", "privacy"];
|
||||
|
||||
export type AiResult = {
|
||||
findings: RawFinding[];
|
||||
error: string | null;
|
||||
};
|
||||
|
||||
const FETCH_TIMEOUT_MS = 60000;
|
||||
|
||||
function redactSecrets(text: string, token: string | null | undefined): string {
|
||||
let out = text;
|
||||
if (token && token.length >= 4) {
|
||||
out = out.split(token).join("[REDACTED]");
|
||||
}
|
||||
out = out.replace(/(Bearer\s+)[A-Za-z0-9._\-]+/gi, "$1[REDACTED]");
|
||||
out = out.replace(/\bsk-[A-Za-z0-9._\-]{8,}\b/g, "[REDACTED]");
|
||||
return out;
|
||||
}
|
||||
|
||||
async function fetchWithTimeout(
|
||||
url: string,
|
||||
init: RequestInit,
|
||||
): Promise<Response> {
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
|
||||
try {
|
||||
return await fetch(url, { ...init, signal: controller.signal });
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
|
||||
function buildSkillPayload(files: ParsedFile[]): string {
|
||||
const parts: string[] = [];
|
||||
let budget = 60000;
|
||||
for (const f of files) {
|
||||
if (f.content === "") continue;
|
||||
const header = `\n===== DATEI: ${f.path} (${f.kind}) =====\n`;
|
||||
const body = f.content.slice(0, 16000);
|
||||
if (header.length + body.length > budget) {
|
||||
parts.push(header + body.slice(0, Math.max(0, budget - header.length)));
|
||||
break;
|
||||
}
|
||||
parts.push(header + body);
|
||||
budget -= header.length + body.length;
|
||||
}
|
||||
return parts.join("\n");
|
||||
}
|
||||
|
||||
function coerceFinding(raw: unknown): RawFinding | null {
|
||||
if (!raw || typeof raw !== "object") return null;
|
||||
const o = raw as Record<string, unknown>;
|
||||
const axis = AXES.includes(o.axis as Axis) ? (o.axis as Axis) : "security";
|
||||
const severity = SEVERITIES.includes(o.severity as Severity)
|
||||
? (o.severity as Severity)
|
||||
: "medium";
|
||||
const title = typeof o.title === "string" ? o.title.slice(0, 200) : null;
|
||||
if (!title) return null;
|
||||
return {
|
||||
ruleId: typeof o.ruleId === "string" ? o.ruleId : "AI-FINDING",
|
||||
axis,
|
||||
severity,
|
||||
title,
|
||||
description:
|
||||
typeof o.description === "string" ? o.description.slice(0, 2000) : title,
|
||||
remediation:
|
||||
typeof o.remediation === "string" ? o.remediation.slice(0, 2000) : null,
|
||||
file: typeof o.file === "string" ? o.file.slice(0, 400) : null,
|
||||
line: typeof o.line === "number" ? o.line : null,
|
||||
snippet: typeof o.snippet === "string" ? o.snippet.slice(0, 400) : null,
|
||||
detectedBy: "ai",
|
||||
};
|
||||
}
|
||||
|
||||
function extractJson(text: string): unknown {
|
||||
const fence = text.match(/```(?:json)?\s*([\s\S]*?)```/i);
|
||||
const candidate = fence ? fence[1] : text;
|
||||
const start = candidate.indexOf("{");
|
||||
const end = candidate.lastIndexOf("}");
|
||||
if (start === -1 || end === -1 || end <= start) {
|
||||
throw new Error("Keine JSON-Antwort von der KI erhalten.");
|
||||
}
|
||||
return JSON.parse(candidate.slice(start, end + 1));
|
||||
}
|
||||
|
||||
async function callOpenAiCompatible(
|
||||
provider: AiProvider,
|
||||
system: string,
|
||||
user: string,
|
||||
): Promise<string> {
|
||||
const base = provider.baseUrl.replace(/\/$/, "");
|
||||
const url = `${base}/chat/completions`;
|
||||
const res = await fetchWithTimeout(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${provider.apiToken ?? ""}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: provider.model,
|
||||
messages: [
|
||||
{ role: "system", content: system },
|
||||
{ role: "user", content: user },
|
||||
],
|
||||
temperature: 0.1,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.text();
|
||||
throw new Error(
|
||||
`HTTP ${res.status}: ${redactSecrets(body.slice(0, 300), provider.apiToken)}`,
|
||||
);
|
||||
}
|
||||
const data = (await res.json()) as {
|
||||
choices?: { message?: { content?: string } }[];
|
||||
};
|
||||
return data.choices?.[0]?.message?.content ?? "";
|
||||
}
|
||||
|
||||
async function callAnthropic(
|
||||
provider: AiProvider,
|
||||
system: string,
|
||||
user: string,
|
||||
): Promise<string> {
|
||||
const base = provider.baseUrl.replace(/\/$/, "");
|
||||
const url = `${base}/messages`;
|
||||
const res = await fetchWithTimeout(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"x-api-key": provider.apiToken ?? "",
|
||||
"anthropic-version": "2023-06-01",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: provider.model,
|
||||
max_tokens: 4096,
|
||||
system,
|
||||
messages: [{ role: "user", content: user }],
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.text();
|
||||
throw new Error(
|
||||
`HTTP ${res.status}: ${redactSecrets(body.slice(0, 300), provider.apiToken)}`,
|
||||
);
|
||||
}
|
||||
const data = (await res.json()) as { content?: { text?: string }[] };
|
||||
return data.content?.[0]?.text ?? "";
|
||||
}
|
||||
|
||||
export async function callProvider(
|
||||
provider: AiProvider,
|
||||
system: string,
|
||||
user: string,
|
||||
): Promise<string> {
|
||||
if (provider.apiType === "anthropic") {
|
||||
return callAnthropic(provider, system, user);
|
||||
}
|
||||
return callOpenAiCompatible(provider, system, user);
|
||||
}
|
||||
|
||||
export async function runAiAnalysis(
|
||||
provider: AiProvider,
|
||||
prompts: Prompt[],
|
||||
files: ParsedFile[],
|
||||
): Promise<AiResult> {
|
||||
const systemPrompt = prompts.find((p) => p.key === "system")?.content ?? "";
|
||||
const analysisPrompt =
|
||||
prompts.find((p) => p.key === "analysis")?.content ?? "";
|
||||
const payload = buildSkillPayload(files);
|
||||
const user = `${analysisPrompt}\n\nHier ist das zu prüfende Skill:\n${payload}`;
|
||||
try {
|
||||
const content = await callProvider(provider, systemPrompt, user);
|
||||
const parsed = extractJson(content) as { findings?: unknown[] };
|
||||
const findingsRaw = Array.isArray(parsed.findings) ? parsed.findings : [];
|
||||
const findings = findingsRaw
|
||||
.map(coerceFinding)
|
||||
.filter((f): f is RawFinding => f !== null);
|
||||
return { findings, error: null };
|
||||
} catch (err) {
|
||||
return {
|
||||
findings: [],
|
||||
error: err instanceof Error ? err.message : "Unbekannter KI-Fehler",
|
||||
};
|
||||
}
|
||||
}
|
||||
440
artifacts/api-server/src/lib/ruleCatalog.ts
Normal file
440
artifacts/api-server/src/lib/ruleCatalog.ts
Normal file
|
|
@ -0,0 +1,440 @@
|
|||
export type Severity = "critical" | "high" | "medium" | "low" | "info";
|
||||
export type Axis = "security" | "privacy";
|
||||
export type FileKind = "instruction" | "script" | "resource";
|
||||
|
||||
export type ParsedFile = {
|
||||
path: string;
|
||||
kind: FileKind;
|
||||
language: string | null;
|
||||
content: string;
|
||||
size: number;
|
||||
};
|
||||
|
||||
export type RawFinding = {
|
||||
ruleId: string;
|
||||
axis: Axis;
|
||||
severity: Severity;
|
||||
title: string;
|
||||
description: string;
|
||||
remediation: string | null;
|
||||
file: string | null;
|
||||
line: number | null;
|
||||
snippet: string | null;
|
||||
detectedBy: "static" | "ai";
|
||||
};
|
||||
|
||||
export type RuleDefinition = {
|
||||
ruleId: string;
|
||||
axis: Axis;
|
||||
category: string;
|
||||
title: string;
|
||||
description: string;
|
||||
defaultSeverity: Severity;
|
||||
detectionType: "regex" | "heuristic" | "ai";
|
||||
remediation: string;
|
||||
appliesTo: FileKind[];
|
||||
patterns?: RegExp[];
|
||||
heuristic?: (file: ParsedFile) => { line: number; snippet: string }[];
|
||||
};
|
||||
|
||||
const ALL: FileKind[] = ["instruction", "script", "resource"];
|
||||
const TEXT: FileKind[] = ["instruction", "resource"];
|
||||
|
||||
function scanLines(
|
||||
file: ParsedFile,
|
||||
patterns: RegExp[],
|
||||
): { line: number; snippet: string }[] {
|
||||
const hits: { line: number; snippet: string }[] = [];
|
||||
const lines = file.content.split(/\r?\n/);
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const text = lines[i];
|
||||
for (const re of patterns) {
|
||||
re.lastIndex = 0;
|
||||
if (re.test(text)) {
|
||||
hits.push({ line: i + 1, snippet: text.trim().slice(0, 240) });
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return hits;
|
||||
}
|
||||
|
||||
export const RULE_CATALOG: RuleDefinition[] = [
|
||||
{
|
||||
ruleId: "SEC-REVERSE-SHELL",
|
||||
axis: "security",
|
||||
category: "Code-Ausführung",
|
||||
title: "Reverse-Shell / interaktive Shell",
|
||||
description:
|
||||
"Das Skill enthält Muster, die typisch für Reverse-Shells oder den Aufbau interaktiver Shell-Verbindungen zu einem entfernten Host sind.",
|
||||
defaultSeverity: "critical",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Entfernen Sie jeglichen Code, der Shell-Verbindungen zu externen Hosts aufbaut. Solche Muster sind in legitimen Skills praktisch nie erforderlich.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/\/dev\/(tcp|udp)\//i,
|
||||
/\bnc\b[^\n]*\s-e\b/i,
|
||||
/\bncat\b[^\n]*--exec/i,
|
||||
/\b(bash|sh|zsh)\b\s+-i\b/i,
|
||||
/socat\b[^\n]*exec/i,
|
||||
/python[0-9]?\b[^\n]*pty\.spawn/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "SEC-REMOTE-EXEC",
|
||||
axis: "security",
|
||||
category: "Code-Ausführung",
|
||||
title: "Download-und-Ausführen aus dem Netz",
|
||||
description:
|
||||
"Inhalte werden aus dem Internet geladen und direkt an einen Interpreter weitergegeben (z. B. curl | bash). Dies ermöglicht das unkontrollierte Ausführen von Fremdcode.",
|
||||
defaultSeverity: "critical",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Laden Sie Code niemals direkt in eine Shell. Prüfen und versionieren Sie heruntergeladene Artefakte vor der Ausführung.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/(curl|wget)\b[^\n|]*\|\s*(sudo\s+)?(bash|sh|zsh|python[0-9]?|node|perl|ruby)\b/i,
|
||||
/(bash|sh)\b\s*<\(\s*(curl|wget)\b/i,
|
||||
/(iwr|invoke-webrequest|iex)\b[^\n]*\|\s*iex/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "SEC-DESTRUCTIVE",
|
||||
axis: "security",
|
||||
category: "Destruktive Operationen",
|
||||
title: "Destruktive Datei- oder Datenträgeroperation",
|
||||
description:
|
||||
"Es wurden potenziell zerstörerische Befehle erkannt (rekursives Löschen, Überschreiben von Datenträgern, Formatieren, Fork-Bomb).",
|
||||
defaultSeverity: "critical",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Beschränken Sie Löschoperationen auf klar abgegrenzte Pfade und vermeiden Sie Operationen auf Root-, Home- oder Geräteebene.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/rm\s+-[a-z]*r[a-z]*f?\b[^\n]*(\s\/(\s|$)|\s~|\s\$HOME|\s\*)/i,
|
||||
/dd\s+if=[^\n]*of=\/dev\/(sd|hd|nvme|disk|vd)/i,
|
||||
/\bmkfs(\.|\b)/i,
|
||||
/\bshred\b/i,
|
||||
/:\s*\(\s*\)\s*\{\s*:\s*\|\s*:\s*&\s*\}\s*;/,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "SEC-PRIV-ESC",
|
||||
axis: "security",
|
||||
category: "Rechteausweitung",
|
||||
title: "Rechteausweitung / unsichere Berechtigungen",
|
||||
description:
|
||||
"Das Skill versucht, erhöhte Rechte zu erlangen oder setzt unsichere Dateiberechtigungen (sudo, chmod 777, setuid, chown root).",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Vermeiden Sie sudo und überbreite Berechtigungen. Vergeben Sie nur die minimal notwendigen Rechte.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/\bsudo\b/i,
|
||||
/chmod\s+(-[a-z]*\s+)*0?777\b/i,
|
||||
/chmod\s+(-[a-z]*\s+)*[ugoa]*\+s\b/i,
|
||||
/chown\s+(-[a-z]*\s+)*root\b/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "SEC-PERSISTENCE",
|
||||
axis: "security",
|
||||
category: "Persistenz",
|
||||
title: "Persistenz-Mechanismus",
|
||||
description:
|
||||
"Das Skill richtet möglicherweise dauerhafte Mechanismen ein (Cronjobs, systemd-Dienste, Shell-Profil-Hooks, SSH-Schlüssel).",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Persistenz sollte nur mit ausdrücklicher Zustimmung erfolgen. Prüfen Sie, ob das Anlegen von Autostart-Einträgen wirklich notwendig ist.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/\bcrontab\b/i,
|
||||
/\/etc\/cron/i,
|
||||
/systemctl\b[^\n]*(enable|start)/i,
|
||||
/>>?\s*~?\/?\.(bashrc|bash_profile|profile|zshrc|zprofile)\b/i,
|
||||
/authorized_keys\b/i,
|
||||
/launchctl\b[^\n]*load/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "SEC-OBFUSCATION",
|
||||
axis: "security",
|
||||
category: "Verschleierung",
|
||||
title: "Verschleierter oder dynamisch ausgeführter Code",
|
||||
description:
|
||||
"Es wurden Hinweise auf verschleierten Code oder dynamische Ausführung gefunden (base64-Dekodierung mit Ausführung, eval/exec, Hex-Escapes).",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Vermeiden Sie dynamische Code-Ausführung und Verschleierung. Code sollte im Klartext nachvollziehbar sein.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/base64\s+(-d|--decode|-D)\b/i,
|
||||
/echo\b[^\n]*\|\s*base64\s+(-d|--decode)/i,
|
||||
/\beval\s*[("'`]/i,
|
||||
/\bexec\s*\(/i,
|
||||
/xxd\s+-r\b/i,
|
||||
/(\\x[0-9a-f]{2}){6,}/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "SEC-SUPPLY-CHAIN",
|
||||
axis: "security",
|
||||
category: "Lieferkette",
|
||||
title: "Unsichere Paket- oder Quellinstallation",
|
||||
description:
|
||||
"Pakete werden aus nicht vertrauenswürdigen Quellen installiert (direkte URLs, git+-Quellen, externe Apt-Repositories oder Schlüssel).",
|
||||
defaultSeverity: "medium",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Installieren Sie Pakete nur aus vertrauenswürdigen, versionierten Quellen und vermeiden Sie Installationen direkt von URLs.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/(pip|pip3)\s+install\b[^\n]*(https?:\/\/|git\+)/i,
|
||||
/npm\s+(install|i)\b[^\n]*(https?:\/\/|git\+|github:)/i,
|
||||
/add-apt-repository\b/i,
|
||||
/(curl|wget)\b[^\n]*\|\s*(sudo\s+)?apt-key\b/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "SEC-NETWORK",
|
||||
axis: "security",
|
||||
category: "Netzwerk",
|
||||
title: "Ausgehender Netzwerkzugriff",
|
||||
description:
|
||||
"Das Skill stellt ausgehende Netzwerkverbindungen her. Dies ist nicht zwingend bösartig, sollte aber bewertet werden.",
|
||||
defaultSeverity: "low",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Stellen Sie sicher, dass die kontaktierten Endpunkte erwartet und vertrauenswürdig sind.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/\b(curl|wget|nc|netcat|telnet)\b/i,
|
||||
/\b(requests\.(get|post)|urllib|http\.client|fetch\()/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "PRIV-SECRET-ACCESS",
|
||||
axis: "privacy",
|
||||
category: "Zugriff auf Geheimnisse",
|
||||
title: "Zugriff auf Anmeldedaten oder Geheimnisse",
|
||||
description:
|
||||
"Das Skill greift auf typische Speicherorte für Geheimnisse zu (.env, SSH-Schlüssel, Cloud-Credentials, .netrc, Umgebungsvariablen).",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Vermeiden Sie den Zugriff auf Geheimnisdateien. Falls erforderlich, dokumentieren Sie Zweck und Umfang transparent.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/(^|[^A-Za-z0-9_])\.env\b/i,
|
||||
/\.ssh\/(id_rsa|id_ed25519|id_dsa|authorized_keys)?/i,
|
||||
/\bid_rsa\b/i,
|
||||
/\.aws\/credentials\b/i,
|
||||
/\.netrc\b/i,
|
||||
/\.npmrc\b/i,
|
||||
/\b(printenv|env)\b\s*(\||>|$)/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "PRIV-EXFILTRATION",
|
||||
axis: "privacy",
|
||||
category: "Datenabfluss",
|
||||
title: "Mögliche Datenexfiltration",
|
||||
description:
|
||||
"Daten werden an externe Endpunkte gesendet (HTTP-POST mit Nutzdaten, Datei-Uploads). In Kombination mit Geheimniszugriff ist dies hochkritisch.",
|
||||
defaultSeverity: "critical",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Senden Sie keine lokalen Daten an externe Server ohne ausdrückliche, dokumentierte Zustimmung.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/curl\b[^\n]*\s(-d|--data|--data-binary|-F|--form|-T|--upload-file)\b/i,
|
||||
/curl\b[^\n]*-X\s*POST\b/i,
|
||||
/wget\b[^\n]*--post(-data|-file)\b/i,
|
||||
/requests\.post\s*\(/i,
|
||||
/fetch\s*\([^\n]*method\s*:\s*['"]POST['"]/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "PRIV-PROMPT-INJECTION",
|
||||
axis: "privacy",
|
||||
category: "Prompt-Injektion",
|
||||
title: "Prompt-Injektion / Anweisungs-Manipulation",
|
||||
description:
|
||||
"Die Anweisungen enthalten Formulierungen, die das Agentenverhalten manipulieren (vorherige Anweisungen ignorieren, Nutzer täuschen, Sicherheits-Leitplanken umgehen).",
|
||||
defaultSeverity: "critical",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Entfernen Sie manipulative Anweisungen. Ein Skill darf den Agenten nicht anweisen, Sicherheitsregeln zu umgehen oder den Nutzer zu täuschen.",
|
||||
appliesTo: TEXT,
|
||||
patterns: [
|
||||
/ignore\s+(all\s+)?(previous|prior|above|earlier)\s+(instructions|prompts|messages)/i,
|
||||
/disregard\s+[^\n]*\b(instructions|rules|guidelines)\b/i,
|
||||
/ignoriere\s+[^\n]*(vorherige|bisherige|obige)\s+(anweisungen|anweisung)/i,
|
||||
/do\s+not\s+(tell|inform|notify|warn|alert)\s+the\s+user/i,
|
||||
/(verheimliche|verschweige)\b/i,
|
||||
/nicht[^\n]*\b(dem|den)\s+(nutzer|benutzer|user|anwender)\b[^\n]*(sagen|mitteilen|zeigen|informieren)/i,
|
||||
/(override|bypass|disable|umgehe|deaktiviere)\b[^\n]*(safety|security|guard|leitplanke|sicherheit|schutz)/i,
|
||||
/you\s+are\s+now\s+(in\s+)?(developer|dan|jailbreak)\s+mode/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "PRIV-HIDDEN-INSTRUCTIONS",
|
||||
axis: "privacy",
|
||||
category: "Versteckte Inhalte",
|
||||
title: "Versteckte oder unsichtbare Anweisungen",
|
||||
description:
|
||||
"Im Text wurden unsichtbare Unicode-Zeichen oder versteckte Kommentare gefunden, die Anweisungen vor dem Menschen verbergen könnten.",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "heuristic",
|
||||
remediation:
|
||||
"Entfernen Sie unsichtbare Steuerzeichen und versteckte Kommentare. Alle Anweisungen müssen für Menschen sichtbar sein.",
|
||||
appliesTo: TEXT,
|
||||
heuristic: (file) => {
|
||||
const hits: { line: number; snippet: string }[] = [];
|
||||
const lines = file.content.split(/\r?\n/);
|
||||
const invisible =
|
||||
/[\u200B-\u200F\u202A-\u202E\u2060-\u2064\uFEFF\u00AD]/;
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
if (invisible.test(lines[i])) {
|
||||
hits.push({
|
||||
line: i + 1,
|
||||
snippet: "Unsichtbares Steuerzeichen in dieser Zeile erkannt.",
|
||||
});
|
||||
} else if (/<!--[\s\S]*?-->/.test(lines[i])) {
|
||||
hits.push({ line: i + 1, snippet: lines[i].trim().slice(0, 240) });
|
||||
}
|
||||
}
|
||||
return hits;
|
||||
},
|
||||
},
|
||||
{
|
||||
ruleId: "PRIV-PII",
|
||||
axis: "privacy",
|
||||
category: "Datenschutz / DSGVO",
|
||||
title: "Erhebung personenbezogener Daten",
|
||||
description:
|
||||
"Das Skill verweist auf das Erfassen oder Verarbeiten personenbezogener bzw. sensibler Daten (Passwörter, Kreditkarten, Ausweis, Geburtsdatum).",
|
||||
defaultSeverity: "medium",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Erheben Sie personenbezogene Daten nur mit Rechtsgrundlage und dokumentieren Sie Zweck, Umfang und Speicherung gemäß DSGVO.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/\b(passwort|password|kennwort)\b/i,
|
||||
/\b(kreditkart|credit\s*card|kreditkarten)\b/i,
|
||||
/\b(social\s*security|sozialversicherung)\b/i,
|
||||
/\b(personalausweis|reisepass|ausweisnummer)\b/i,
|
||||
/\b(geburtsdatum|date\s*of\s*birth)\b/i,
|
||||
/\b(bankverbindung|iban)\b/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "PRIV-AGENT-TAMPERING",
|
||||
axis: "privacy",
|
||||
category: "Systemkompromittierung",
|
||||
title: "Manipulation von Agent oder anderen Skills",
|
||||
description:
|
||||
"Das Skill versucht möglicherweise, den Agenten, dessen Speicher oder andere Skills/Konfigurationen zu verändern oder zu löschen.",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Ein Skill darf weder den Agenten noch andere Skills, Speicher oder Konfigurationsdateien verändern.",
|
||||
appliesTo: ALL,
|
||||
patterns: [
|
||||
/(modify|edit|delete|overwrite|change|überschreib|lösch|ändere|bearbeite)[^\n]*\b(SKILL\.md|skill|system\s*prompt|agent|memory|\.agents|konfiguration|config)\b/i,
|
||||
/rm\b[^\n]*\.(md|json|ya?ml)\b/i,
|
||||
/\b(\.agents|MEMORY\.md|replit\.md)\b/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "PRIV-OVERREACH",
|
||||
axis: "privacy",
|
||||
category: "Berechtigungen",
|
||||
title: "Übermäßige Berechtigungsanforderung",
|
||||
description:
|
||||
"Das Skill fordert sehr weitreichende oder uneingeschränkte Berechtigungen an.",
|
||||
defaultSeverity: "low",
|
||||
detectionType: "regex",
|
||||
remediation:
|
||||
"Fordern Sie nur die minimal notwendigen Berechtigungen an (Least-Privilege-Prinzip).",
|
||||
appliesTo: TEXT,
|
||||
patterns: [
|
||||
/\b(full|root|admin|unrestricted|vollständig|uneingeschränkt|voller)\s+(access|zugriff|permission|rechte|berechtigung)/i,
|
||||
/\ball\s+(files|data|permissions)\b/i,
|
||||
],
|
||||
},
|
||||
{
|
||||
ruleId: "AI-PROMPT-INJECTION",
|
||||
axis: "privacy",
|
||||
category: "KI-Analyse",
|
||||
title: "KI: Verdeckte Prompt-Injektion",
|
||||
description:
|
||||
"Semantische KI-Analyse auf verdeckte oder subtile Versuche, das Agentenverhalten zu manipulieren, die von statischen Regeln nicht erfasst werden.",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "ai",
|
||||
remediation:
|
||||
"Bewerten Sie die von der KI markierten Stellen manuell und entfernen Sie manipulative Inhalte.",
|
||||
appliesTo: TEXT,
|
||||
},
|
||||
{
|
||||
ruleId: "AI-MALICIOUS-INTENT",
|
||||
axis: "security",
|
||||
category: "KI-Analyse",
|
||||
title: "KI: Schädliche Absicht im Code",
|
||||
description:
|
||||
"Semantische KI-Analyse auf bösartige oder versteckte Funktionalität im Code, die über reine Mustererkennung hinausgeht.",
|
||||
defaultSeverity: "high",
|
||||
detectionType: "ai",
|
||||
remediation:
|
||||
"Prüfen Sie die markierten Codeabschnitte manuell auf schädliche Absicht.",
|
||||
appliesTo: ALL,
|
||||
},
|
||||
{
|
||||
ruleId: "AI-DATA-PRIVACY",
|
||||
axis: "privacy",
|
||||
category: "KI-Analyse",
|
||||
title: "KI: Datenschutzrisiko",
|
||||
description:
|
||||
"Semantische KI-Analyse auf Datenschutzrisiken und möglichen Abfluss personenbezogener Daten.",
|
||||
defaultSeverity: "medium",
|
||||
detectionType: "ai",
|
||||
remediation:
|
||||
"Bewerten Sie die markierten Datenschutzrisiken und stellen Sie DSGVO-Konformität sicher.",
|
||||
appliesTo: ALL,
|
||||
},
|
||||
];
|
||||
|
||||
export const STATIC_RULES = RULE_CATALOG.filter(
|
||||
(r) => r.detectionType !== "ai",
|
||||
);
|
||||
export const AI_RULES = RULE_CATALOG.filter((r) => r.detectionType === "ai");
|
||||
|
||||
export function runStaticRule(
|
||||
rule: RuleDefinition,
|
||||
file: ParsedFile,
|
||||
severity: Severity,
|
||||
): RawFinding[] {
|
||||
if (!rule.appliesTo.includes(file.kind)) return [];
|
||||
let hits: { line: number; snippet: string }[] = [];
|
||||
if (rule.detectionType === "regex" && rule.patterns) {
|
||||
hits = scanLines(file, rule.patterns);
|
||||
} else if (rule.detectionType === "heuristic" && rule.heuristic) {
|
||||
hits = rule.heuristic(file);
|
||||
}
|
||||
return hits.map((h) => ({
|
||||
ruleId: rule.ruleId,
|
||||
axis: rule.axis,
|
||||
severity,
|
||||
title: rule.title,
|
||||
description: rule.description,
|
||||
remediation: rule.remediation,
|
||||
file: file.path,
|
||||
line: h.line,
|
||||
snippet: h.snippet,
|
||||
detectedBy: "static" as const,
|
||||
}));
|
||||
}
|
||||
126
artifacts/api-server/src/lib/scanEngine.ts
Normal file
126
artifacts/api-server/src/lib/scanEngine.ts
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { db } from "@workspace/db";
|
||||
import {
|
||||
rulesTable,
|
||||
promptsTable,
|
||||
aiProvidersTable,
|
||||
type Prompt,
|
||||
} from "@workspace/db";
|
||||
import { eq } from "drizzle-orm";
|
||||
import {
|
||||
STATIC_RULES,
|
||||
runStaticRule,
|
||||
type ParsedFile,
|
||||
type RawFinding,
|
||||
type Severity,
|
||||
} from "./ruleCatalog";
|
||||
import type { FindingCounts as DbFindingCounts } from "@workspace/db";
|
||||
import { runAiAnalysis } from "./aiAnalysis";
|
||||
|
||||
const SEVERITY_WEIGHT: Record<Severity, number> = {
|
||||
critical: 50,
|
||||
high: 18,
|
||||
medium: 7,
|
||||
low: 2,
|
||||
info: 0,
|
||||
};
|
||||
|
||||
export type EngineResult = {
|
||||
findings: RawFinding[];
|
||||
counts: DbFindingCounts;
|
||||
riskScore: number;
|
||||
verdict: "pass" | "review" | "block";
|
||||
aiUsed: boolean;
|
||||
aiError: string | null;
|
||||
};
|
||||
|
||||
export function computeCounts(findings: RawFinding[]): DbFindingCounts {
|
||||
const counts: DbFindingCounts = {
|
||||
critical: 0,
|
||||
high: 0,
|
||||
medium: 0,
|
||||
low: 0,
|
||||
info: 0,
|
||||
security: 0,
|
||||
privacy: 0,
|
||||
total: findings.length,
|
||||
};
|
||||
for (const f of findings) {
|
||||
counts[f.severity] += 1;
|
||||
counts[f.axis] += 1;
|
||||
}
|
||||
return counts;
|
||||
}
|
||||
|
||||
export function computeScore(findings: RawFinding[]): number {
|
||||
let score = 0;
|
||||
for (const f of findings) score += SEVERITY_WEIGHT[f.severity];
|
||||
return Math.min(100, score);
|
||||
}
|
||||
|
||||
export function computeVerdict(
|
||||
findings: RawFinding[],
|
||||
score: number,
|
||||
): "pass" | "review" | "block" {
|
||||
const hasCritical = findings.some((f) => f.severity === "critical");
|
||||
const hasHigh = findings.some((f) => f.severity === "high");
|
||||
if (hasCritical || score >= 70) return "block";
|
||||
if (hasHigh || score >= 20) return "review";
|
||||
return "pass";
|
||||
}
|
||||
|
||||
export async function analyzeSkill(
|
||||
files: ParsedFile[],
|
||||
useAi: boolean,
|
||||
): Promise<EngineResult> {
|
||||
const dbRules = await db.select().from(rulesTable);
|
||||
const ruleConfig = new Map(
|
||||
dbRules.map((r) => [r.ruleId, { enabled: r.enabled, severity: r.severity as Severity }]),
|
||||
);
|
||||
|
||||
const findings: RawFinding[] = [];
|
||||
for (const rule of STATIC_RULES) {
|
||||
const cfg = ruleConfig.get(rule.ruleId);
|
||||
if (cfg && !cfg.enabled) continue;
|
||||
const severity = cfg?.severity ?? rule.defaultSeverity;
|
||||
for (const file of files) {
|
||||
findings.push(...runStaticRule(rule, file, severity));
|
||||
}
|
||||
}
|
||||
|
||||
let aiUsed = false;
|
||||
let aiError: string | null = null;
|
||||
|
||||
if (useAi) {
|
||||
const aiRulesEnabled = dbRules
|
||||
.filter((r) => r.detectionType === "ai")
|
||||
.some((r) => r.enabled);
|
||||
const [provider] = await db
|
||||
.select()
|
||||
.from(aiProvidersTable)
|
||||
.where(eq(aiProvidersTable.enabled, true))
|
||||
.limit(1);
|
||||
|
||||
if (!aiRulesEnabled) {
|
||||
aiError = "KI-Regeln sind im Regelwerk deaktiviert.";
|
||||
} else if (!provider) {
|
||||
aiError =
|
||||
"Kein aktiver KI-Provider konfiguriert. Bitte im Admin-Bereich einrichten.";
|
||||
} else if (!provider.apiToken) {
|
||||
aiError = `Für den Provider "${provider.name}" ist kein API-Token hinterlegt.`;
|
||||
} else {
|
||||
const prompts: Prompt[] = await db.select().from(promptsTable);
|
||||
const result = await runAiAnalysis(provider, prompts, files);
|
||||
aiError = result.error;
|
||||
if (!result.error) {
|
||||
aiUsed = true;
|
||||
findings.push(...result.findings);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const riskScore = computeScore(findings);
|
||||
const counts = computeCounts(findings);
|
||||
const verdict = computeVerdict(findings, riskScore);
|
||||
|
||||
return { findings, counts, riskScore, verdict, aiUsed, aiError };
|
||||
}
|
||||
57
artifacts/api-server/src/lib/seed.ts
Normal file
57
artifacts/api-server/src/lib/seed.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { db, rulesTable, promptsTable } from "@workspace/db";
|
||||
import { RULE_CATALOG } from "./ruleCatalog";
|
||||
import { logger } from "./logger";
|
||||
|
||||
const DEFAULT_PROMPTS = [
|
||||
{
|
||||
key: "system",
|
||||
name: "System-Anweisung",
|
||||
content:
|
||||
"Du bist ein erfahrener Sicherheits- und Datenschutz-Auditor für KI-Agenten-Skills. Ein Skill besteht aus Anweisungsdateien (z. B. SKILL.md), Skripten und Ressourcen. Du prüfst auf zwei Achsen: (a) IT-Sicherheit (security) und (b) Datenschutz/Systemkompromittierung (privacy). Du antwortest ausschließlich mit gültigem JSON, ohne erläuternden Text davor oder danach.",
|
||||
},
|
||||
{
|
||||
key: "analysis",
|
||||
name: "Analyse-Anweisung",
|
||||
content:
|
||||
'Analysiere das folgende Skill auf verdeckte oder subtile Risiken, die einer reinen Mustererkennung entgehen: versteckte Prompt-Injektionen, manipulative Anweisungen, Täuschung des Nutzers, schädliche Code-Absichten, Datenabfluss und Datenschutzverstöße (DSGVO). Gib das Ergebnis als JSON in genau diesem Format zurück: {"findings": [{"axis": "security|privacy", "severity": "critical|high|medium|low|info", "title": "kurzer Titel", "description": "Beschreibung des Risikos", "remediation": "Empfehlung", "file": "Dateipfad oder null", "line": Zeilennummer oder null, "snippet": "relevanter Ausschnitt oder null"}]}. Wenn keine Risiken gefunden werden, gib {"findings": []} zurück. Antworte auf Deutsch.',
|
||||
},
|
||||
];
|
||||
|
||||
export async function seedDefaults(): Promise<void> {
|
||||
try {
|
||||
for (const rule of RULE_CATALOG) {
|
||||
await db
|
||||
.insert(rulesTable)
|
||||
.values({
|
||||
ruleId: rule.ruleId,
|
||||
axis: rule.axis,
|
||||
category: rule.category,
|
||||
title: rule.title,
|
||||
description: rule.description,
|
||||
severity: rule.defaultSeverity,
|
||||
detectionType: rule.detectionType,
|
||||
enabled: true,
|
||||
})
|
||||
.onConflictDoUpdate({
|
||||
target: rulesTable.ruleId,
|
||||
set: {
|
||||
axis: rule.axis,
|
||||
category: rule.category,
|
||||
title: rule.title,
|
||||
description: rule.description,
|
||||
detectionType: rule.detectionType,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
for (const prompt of DEFAULT_PROMPTS) {
|
||||
await db
|
||||
.insert(promptsTable)
|
||||
.values(prompt)
|
||||
.onConflictDoNothing({ target: promptsTable.key });
|
||||
}
|
||||
logger.info("SkillGuard: Standard-Regeln und Prompts initialisiert.");
|
||||
} catch (err) {
|
||||
logger.error({ err }, "SkillGuard: Seeding fehlgeschlagen.");
|
||||
}
|
||||
}
|
||||
160
artifacts/api-server/src/lib/skillParser.ts
Normal file
160
artifacts/api-server/src/lib/skillParser.ts
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
import { unzipSync, strFromU8 } from "fflate";
|
||||
import type { FileKind, ParsedFile } from "./ruleCatalog";
|
||||
|
||||
const LANG_BY_EXT: Record<string, string> = {
|
||||
sh: "shell",
|
||||
bash: "shell",
|
||||
zsh: "shell",
|
||||
py: "python",
|
||||
js: "javascript",
|
||||
mjs: "javascript",
|
||||
cjs: "javascript",
|
||||
ts: "typescript",
|
||||
rb: "ruby",
|
||||
pl: "perl",
|
||||
php: "php",
|
||||
ps1: "powershell",
|
||||
go: "go",
|
||||
rs: "rust",
|
||||
md: "markdown",
|
||||
txt: "text",
|
||||
json: "json",
|
||||
yaml: "yaml",
|
||||
yml: "yaml",
|
||||
toml: "toml",
|
||||
env: "dotenv",
|
||||
};
|
||||
|
||||
const SCRIPT_EXTS = new Set([
|
||||
"sh",
|
||||
"bash",
|
||||
"zsh",
|
||||
"py",
|
||||
"js",
|
||||
"mjs",
|
||||
"cjs",
|
||||
"ts",
|
||||
"rb",
|
||||
"pl",
|
||||
"php",
|
||||
"ps1",
|
||||
"go",
|
||||
"rs",
|
||||
]);
|
||||
|
||||
const SKIP_DIRS = ["__macosx/", ".git/", "node_modules/"];
|
||||
|
||||
const MAX_ZIP_FILES = 2000;
|
||||
const MAX_ZIP_TOTAL_BYTES = 60 * 1024 * 1024;
|
||||
const MAX_ZIP_FILE_BYTES = 5 * 1024 * 1024;
|
||||
|
||||
function extOf(path: string): string {
|
||||
const base = path.split("/").pop() ?? path;
|
||||
const dot = base.lastIndexOf(".");
|
||||
return dot >= 0 ? base.slice(dot + 1).toLowerCase() : "";
|
||||
}
|
||||
|
||||
function classify(path: string): FileKind {
|
||||
const base = (path.split("/").pop() ?? path).toLowerCase();
|
||||
const ext = extOf(path);
|
||||
if (base === "skill.md") return "instruction";
|
||||
if (SCRIPT_EXTS.has(ext)) return "script";
|
||||
if (ext === "md" || ext === "txt") return "instruction";
|
||||
return "resource";
|
||||
}
|
||||
|
||||
function isProbablyBinary(bytes: Uint8Array): boolean {
|
||||
const len = Math.min(bytes.length, 4000);
|
||||
let nontext = 0;
|
||||
for (let i = 0; i < len; i++) {
|
||||
const b = bytes[i];
|
||||
if (b === 0) return true;
|
||||
if (b < 9 || (b > 13 && b < 32)) nontext++;
|
||||
}
|
||||
return len > 0 && nontext / len > 0.3;
|
||||
}
|
||||
|
||||
export function parseZip(buffer: Buffer): ParsedFile[] {
|
||||
const files = unzipSync(new Uint8Array(buffer));
|
||||
const result: ParsedFile[] = [];
|
||||
let totalBytes = 0;
|
||||
let processed = 0;
|
||||
for (const [rawPath, bytes] of Object.entries(files)) {
|
||||
const path = rawPath.replace(/\\/g, "/");
|
||||
if (path.endsWith("/")) continue;
|
||||
const lower = path.toLowerCase();
|
||||
if (SKIP_DIRS.some((d) => lower.includes(d))) continue;
|
||||
if (bytes.length === 0) continue;
|
||||
if (bytes.length > MAX_ZIP_FILE_BYTES) continue;
|
||||
totalBytes += bytes.length;
|
||||
if (totalBytes > MAX_ZIP_TOTAL_BYTES) {
|
||||
throw new Error("ZIP-Archiv ist zu groß (entpackt).");
|
||||
}
|
||||
processed += 1;
|
||||
if (processed > MAX_ZIP_FILES) {
|
||||
throw new Error("ZIP-Archiv enthält zu viele Dateien.");
|
||||
}
|
||||
if (isProbablyBinary(bytes)) {
|
||||
result.push({
|
||||
path,
|
||||
kind: "resource",
|
||||
language: null,
|
||||
content: "",
|
||||
size: bytes.length,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
result.push({
|
||||
path,
|
||||
kind: classify(path),
|
||||
language: LANG_BY_EXT[extOf(path)] ?? null,
|
||||
content: strFromU8(bytes),
|
||||
size: bytes.length,
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function parseSingleFile(filename: string, buffer: Buffer): ParsedFile {
|
||||
const path = filename.replace(/\\/g, "/").split("/").pop() ?? filename;
|
||||
if (isProbablyBinary(new Uint8Array(buffer))) {
|
||||
return {
|
||||
path,
|
||||
kind: "resource",
|
||||
language: null,
|
||||
content: "",
|
||||
size: buffer.length,
|
||||
};
|
||||
}
|
||||
return {
|
||||
path,
|
||||
kind: classify(path),
|
||||
language: LANG_BY_EXT[extOf(path)] ?? null,
|
||||
content: buffer.toString("utf-8"),
|
||||
size: buffer.length,
|
||||
};
|
||||
}
|
||||
|
||||
export function parseText(text: string, name: string): ParsedFile {
|
||||
return {
|
||||
path: name || "SKILL.md",
|
||||
kind: "instruction",
|
||||
language: "markdown",
|
||||
content: text,
|
||||
size: Buffer.byteLength(text, "utf-8"),
|
||||
};
|
||||
}
|
||||
|
||||
export function deriveScanName(files: ParsedFile[], fallback: string): string {
|
||||
const skillMd = files.find(
|
||||
(f) => (f.path.split("/").pop() ?? "").toLowerCase() === "skill.md",
|
||||
);
|
||||
if (skillMd) {
|
||||
const m = skillMd.content.match(/^#\s+(.+)$/m);
|
||||
if (m) return m[1].trim().slice(0, 120);
|
||||
const nameMatch = skillMd.content.match(/^name:\s*(.+)$/im);
|
||||
if (nameMatch) return nameMatch[1].trim().replace(/^["']|["']$/g, "").slice(0, 120);
|
||||
}
|
||||
const top = files[0]?.path.split("/")[0];
|
||||
return (top || fallback).slice(0, 120);
|
||||
}
|
||||
73
artifacts/api-server/src/routes/dashboard.ts
Normal file
73
artifacts/api-server/src/routes/dashboard.ts
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { Router, type IRouter } from "express";
|
||||
import { db } from "@workspace/db";
|
||||
import { scansTable, findingsTable } from "@workspace/db";
|
||||
import { desc } from "drizzle-orm";
|
||||
import { GetDashboardResponse } from "@workspace/api-zod";
|
||||
import { serializeScan } from "./scans";
|
||||
|
||||
const router: IRouter = Router();
|
||||
|
||||
router.get("/dashboard", async (_req, res) => {
|
||||
const scans = await db
|
||||
.select()
|
||||
.from(scansTable)
|
||||
.orderBy(desc(scansTable.createdAt));
|
||||
const findings = await db.select().from(findingsTable);
|
||||
|
||||
const totalScans = scans.length;
|
||||
const avgRiskScore =
|
||||
totalScans === 0
|
||||
? 0
|
||||
: Math.round(
|
||||
scans.reduce((s, x) => s + x.riskScore, 0) / totalScans,
|
||||
);
|
||||
|
||||
const verdictCounts = { pass: 0, review: 0, block: 0 };
|
||||
for (const s of scans) {
|
||||
if (s.verdict in verdictCounts) {
|
||||
verdictCounts[s.verdict as keyof typeof verdictCounts] += 1;
|
||||
}
|
||||
}
|
||||
|
||||
const severityTotals = { critical: 0, high: 0, medium: 0, low: 0, info: 0 };
|
||||
const axisTotals = { security: 0, privacy: 0 };
|
||||
const ruleAgg = new Map<
|
||||
string,
|
||||
{ ruleId: string; title: string; axis: "security" | "privacy"; count: number }
|
||||
>();
|
||||
for (const f of findings) {
|
||||
if (f.severity in severityTotals) {
|
||||
severityTotals[f.severity as keyof typeof severityTotals] += 1;
|
||||
}
|
||||
if (f.axis === "security" || f.axis === "privacy") {
|
||||
axisTotals[f.axis] += 1;
|
||||
}
|
||||
const existing = ruleAgg.get(f.ruleId);
|
||||
if (existing) existing.count += 1;
|
||||
else
|
||||
ruleAgg.set(f.ruleId, {
|
||||
ruleId: f.ruleId,
|
||||
title: f.title,
|
||||
axis: f.axis as "security" | "privacy",
|
||||
count: 1,
|
||||
});
|
||||
}
|
||||
|
||||
const topRules = [...ruleAgg.values()]
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.slice(0, 8);
|
||||
|
||||
const payload = {
|
||||
totalScans,
|
||||
avgRiskScore,
|
||||
verdictCounts,
|
||||
severityTotals,
|
||||
axisTotals,
|
||||
recentScans: scans.slice(0, 6).map(serializeScan),
|
||||
topRules,
|
||||
};
|
||||
|
||||
res.json(GetDashboardResponse.parse(payload));
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -1,8 +1,18 @@
|
|||
import { Router, type IRouter } from "express";
|
||||
import healthRouter from "./health";
|
||||
import dashboardRouter from "./dashboard";
|
||||
import scansRouter from "./scans";
|
||||
import providersRouter from "./providers";
|
||||
import promptsRouter from "./prompts";
|
||||
import rulesRouter from "./rules";
|
||||
|
||||
const router: IRouter = Router();
|
||||
|
||||
router.use(healthRouter);
|
||||
router.use(dashboardRouter);
|
||||
router.use(scansRouter);
|
||||
router.use(providersRouter);
|
||||
router.use(promptsRouter);
|
||||
router.use(rulesRouter);
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
55
artifacts/api-server/src/routes/prompts.ts
Normal file
55
artifacts/api-server/src/routes/prompts.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { Router, type IRouter } from "express";
|
||||
import { db } from "@workspace/db";
|
||||
import { promptsTable, type Prompt } from "@workspace/db";
|
||||
import { eq } from "drizzle-orm";
|
||||
import {
|
||||
ListPromptsResponse,
|
||||
UpdatePromptParams,
|
||||
UpdatePromptBody,
|
||||
UpdatePromptResponse,
|
||||
} from "@workspace/api-zod";
|
||||
|
||||
const router: IRouter = Router();
|
||||
|
||||
function serializePrompt(p: Prompt) {
|
||||
return {
|
||||
id: p.id,
|
||||
key: p.key,
|
||||
name: p.name,
|
||||
content: p.content,
|
||||
updatedAt: p.updatedAt.toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
router.get("/prompts", async (_req, res) => {
|
||||
const rows = await db.select().from(promptsTable).orderBy(promptsTable.id);
|
||||
res.json(ListPromptsResponse.parse(rows.map(serializePrompt)));
|
||||
});
|
||||
|
||||
router.patch("/prompts/:id", async (req, res) => {
|
||||
const params = UpdatePromptParams.safeParse(req.params);
|
||||
if (!params.success) return res.status(400).json({ message: "Ungültige ID" });
|
||||
const parsed = UpdatePromptBody.safeParse(req.body);
|
||||
if (!parsed.success)
|
||||
return res
|
||||
.status(400)
|
||||
.json({ message: "Ungültige Eingabe", details: parsed.error.issues });
|
||||
const d = parsed.data;
|
||||
|
||||
const update: Partial<typeof promptsTable.$inferInsert> = {
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
if (d.name !== undefined) update.name = d.name;
|
||||
if (d.content !== undefined) update.content = d.content;
|
||||
|
||||
const [updated] = await db
|
||||
.update(promptsTable)
|
||||
.set(update)
|
||||
.where(eq(promptsTable.id, params.data.id))
|
||||
.returning();
|
||||
if (!updated)
|
||||
return res.status(404).json({ message: "Prompt nicht gefunden" });
|
||||
return res.json(UpdatePromptResponse.parse(serializePrompt(updated)));
|
||||
});
|
||||
|
||||
export default router;
|
||||
144
artifacts/api-server/src/routes/providers.ts
Normal file
144
artifacts/api-server/src/routes/providers.ts
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
import { Router, type IRouter } from "express";
|
||||
import { db } from "@workspace/db";
|
||||
import { aiProvidersTable, type AiProvider } from "@workspace/db";
|
||||
import { eq } from "drizzle-orm";
|
||||
import {
|
||||
ListProvidersResponse,
|
||||
CreateProviderBody,
|
||||
UpdateProviderParams,
|
||||
UpdateProviderBody,
|
||||
UpdateProviderResponse,
|
||||
DeleteProviderParams,
|
||||
TestProviderParams,
|
||||
TestProviderResponse,
|
||||
} from "@workspace/api-zod";
|
||||
import { callProvider } from "../lib/aiAnalysis";
|
||||
|
||||
const router: IRouter = Router();
|
||||
|
||||
function maskToken(token: string | null): string {
|
||||
if (!token) return "";
|
||||
if (token.length <= 8) return "••••";
|
||||
return `${token.slice(0, 3)}…${token.slice(-4)}`;
|
||||
}
|
||||
|
||||
function serializeProvider(p: AiProvider) {
|
||||
return {
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
apiType: p.apiType,
|
||||
baseUrl: p.baseUrl,
|
||||
model: p.model,
|
||||
enabled: p.enabled,
|
||||
hasToken: !!p.apiToken,
|
||||
tokenPreview: maskToken(p.apiToken),
|
||||
createdAt: p.createdAt.toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
router.get("/providers", async (_req, res) => {
|
||||
const rows = await db.select().from(aiProvidersTable).orderBy(aiProvidersTable.id);
|
||||
res.json(ListProvidersResponse.parse(rows.map(serializeProvider)));
|
||||
});
|
||||
|
||||
router.post("/providers", async (req, res) => {
|
||||
const parsed = CreateProviderBody.safeParse(req.body);
|
||||
if (!parsed.success)
|
||||
return res
|
||||
.status(400)
|
||||
.json({ message: "Ungültige Eingabe", details: parsed.error.issues });
|
||||
const d = parsed.data;
|
||||
const [created] = await db
|
||||
.insert(aiProvidersTable)
|
||||
.values({
|
||||
name: d.name,
|
||||
apiType: d.apiType,
|
||||
baseUrl: d.baseUrl,
|
||||
model: d.model,
|
||||
apiToken: d.apiToken ?? null,
|
||||
enabled: d.enabled ?? true,
|
||||
})
|
||||
.returning();
|
||||
return res
|
||||
.status(201)
|
||||
.json(UpdateProviderResponse.parse(serializeProvider(created)));
|
||||
});
|
||||
|
||||
router.patch("/providers/:id", async (req, res) => {
|
||||
const params = UpdateProviderParams.safeParse(req.params);
|
||||
if (!params.success) return res.status(400).json({ message: "Ungültige ID" });
|
||||
const parsed = UpdateProviderBody.safeParse(req.body);
|
||||
if (!parsed.success)
|
||||
return res
|
||||
.status(400)
|
||||
.json({ message: "Ungültige Eingabe", details: parsed.error.issues });
|
||||
const d = parsed.data;
|
||||
|
||||
const update: Partial<typeof aiProvidersTable.$inferInsert> = {};
|
||||
if (d.name !== undefined) update.name = d.name;
|
||||
if (d.apiType !== undefined) update.apiType = d.apiType;
|
||||
if (d.baseUrl !== undefined) update.baseUrl = d.baseUrl;
|
||||
if (d.model !== undefined) update.model = d.model;
|
||||
if (d.enabled !== undefined) update.enabled = d.enabled;
|
||||
if (d.apiToken !== undefined && d.apiToken !== "")
|
||||
update.apiToken = d.apiToken;
|
||||
|
||||
const [updated] = await db
|
||||
.update(aiProvidersTable)
|
||||
.set(update)
|
||||
.where(eq(aiProvidersTable.id, params.data.id))
|
||||
.returning();
|
||||
if (!updated)
|
||||
return res.status(404).json({ message: "Provider nicht gefunden" });
|
||||
return res.json(UpdateProviderResponse.parse(serializeProvider(updated)));
|
||||
});
|
||||
|
||||
router.delete("/providers/:id", async (req, res) => {
|
||||
const params = DeleteProviderParams.safeParse(req.params);
|
||||
if (!params.success) return res.status(400).json({ message: "Ungültige ID" });
|
||||
await db
|
||||
.delete(aiProvidersTable)
|
||||
.where(eq(aiProvidersTable.id, params.data.id));
|
||||
return res.status(204).send();
|
||||
});
|
||||
|
||||
router.post("/providers/:id/test", async (req, res) => {
|
||||
const params = TestProviderParams.safeParse(req.params);
|
||||
if (!params.success) return res.status(400).json({ message: "Ungültige ID" });
|
||||
const [provider] = await db
|
||||
.select()
|
||||
.from(aiProvidersTable)
|
||||
.where(eq(aiProvidersTable.id, params.data.id));
|
||||
if (!provider)
|
||||
return res.status(404).json({ message: "Provider nicht gefunden" });
|
||||
if (!provider.apiToken) {
|
||||
return res.json(
|
||||
TestProviderResponse.parse({
|
||||
ok: false,
|
||||
message: "Kein API-Token hinterlegt.",
|
||||
}),
|
||||
);
|
||||
}
|
||||
try {
|
||||
const reply = await callProvider(
|
||||
provider,
|
||||
"Du bist ein Verbindungstest.",
|
||||
'Antworte mit dem einzelnen Wort "OK".',
|
||||
);
|
||||
return res.json(
|
||||
TestProviderResponse.parse({
|
||||
ok: true,
|
||||
message: `Verbindung erfolgreich. Antwort: ${reply.trim().slice(0, 80) || "(leer)"}`,
|
||||
}),
|
||||
);
|
||||
} catch (err) {
|
||||
return res.json(
|
||||
TestProviderResponse.parse({
|
||||
ok: false,
|
||||
message: err instanceof Error ? err.message : "Verbindung fehlgeschlagen.",
|
||||
}),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
56
artifacts/api-server/src/routes/rules.ts
Normal file
56
artifacts/api-server/src/routes/rules.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { Router, type IRouter } from "express";
|
||||
import { db } from "@workspace/db";
|
||||
import { rulesTable, type Rule } from "@workspace/db";
|
||||
import { eq } from "drizzle-orm";
|
||||
import {
|
||||
ListRulesResponse,
|
||||
UpdateRuleParams,
|
||||
UpdateRuleBody,
|
||||
UpdateRuleResponse,
|
||||
} from "@workspace/api-zod";
|
||||
|
||||
const router: IRouter = Router();
|
||||
|
||||
function serializeRule(r: Rule) {
|
||||
return {
|
||||
id: r.id,
|
||||
ruleId: r.ruleId,
|
||||
axis: r.axis,
|
||||
category: r.category,
|
||||
title: r.title,
|
||||
description: r.description,
|
||||
severity: r.severity,
|
||||
detectionType: r.detectionType,
|
||||
enabled: r.enabled,
|
||||
};
|
||||
}
|
||||
|
||||
router.get("/rules", async (_req, res) => {
|
||||
const rows = await db.select().from(rulesTable).orderBy(rulesTable.id);
|
||||
res.json(ListRulesResponse.parse(rows.map(serializeRule)));
|
||||
});
|
||||
|
||||
router.patch("/rules/:id", async (req, res) => {
|
||||
const params = UpdateRuleParams.safeParse(req.params);
|
||||
if (!params.success) return res.status(400).json({ message: "Ungültige ID" });
|
||||
const parsed = UpdateRuleBody.safeParse(req.body);
|
||||
if (!parsed.success)
|
||||
return res
|
||||
.status(400)
|
||||
.json({ message: "Ungültige Eingabe", details: parsed.error.issues });
|
||||
const d = parsed.data;
|
||||
|
||||
const update: Partial<typeof rulesTable.$inferInsert> = {};
|
||||
if (d.severity !== undefined) update.severity = d.severity;
|
||||
if (d.enabled !== undefined) update.enabled = d.enabled;
|
||||
|
||||
const [updated] = await db
|
||||
.update(rulesTable)
|
||||
.set(update)
|
||||
.where(eq(rulesTable.id, params.data.id))
|
||||
.returning();
|
||||
if (!updated) return res.status(404).json({ message: "Regel nicht gefunden" });
|
||||
return res.json(UpdateRuleResponse.parse(serializeRule(updated)));
|
||||
});
|
||||
|
||||
export default router;
|
||||
226
artifacts/api-server/src/routes/scans.ts
Normal file
226
artifacts/api-server/src/routes/scans.ts
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
import { Router, type IRouter } from "express";
|
||||
import { db } from "@workspace/db";
|
||||
import {
|
||||
scansTable,
|
||||
scanFilesTable,
|
||||
findingsTable,
|
||||
type Scan,
|
||||
type ScanFile,
|
||||
type Finding,
|
||||
} from "@workspace/db";
|
||||
import { eq, desc } from "drizzle-orm";
|
||||
import {
|
||||
ListScansResponse,
|
||||
CreateScanBody,
|
||||
GetScanParams,
|
||||
GetScanResponse,
|
||||
DeleteScanParams,
|
||||
} from "@workspace/api-zod";
|
||||
import {
|
||||
parseZip,
|
||||
parseSingleFile,
|
||||
parseText,
|
||||
deriveScanName,
|
||||
} from "../lib/skillParser";
|
||||
import { analyzeSkill } from "../lib/scanEngine";
|
||||
import type { ParsedFile } from "../lib/ruleCatalog";
|
||||
import { logger } from "../lib/logger";
|
||||
|
||||
const router: IRouter = Router();
|
||||
|
||||
export function serializeScan(scan: Scan) {
|
||||
return {
|
||||
id: scan.id,
|
||||
name: scan.name,
|
||||
source: scan.source,
|
||||
status: scan.status,
|
||||
verdict: scan.verdict,
|
||||
riskScore: scan.riskScore,
|
||||
fileCount: scan.fileCount,
|
||||
aiUsed: scan.aiUsed,
|
||||
aiError: scan.aiError,
|
||||
findingCounts: scan.findingCounts,
|
||||
createdAt: scan.createdAt.toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
function serializeFile(f: ScanFile) {
|
||||
return {
|
||||
path: f.path,
|
||||
kind: f.kind,
|
||||
language: f.language,
|
||||
size: f.size,
|
||||
};
|
||||
}
|
||||
|
||||
function serializeFinding(f: Finding) {
|
||||
return {
|
||||
id: f.id,
|
||||
ruleId: f.ruleId,
|
||||
axis: f.axis,
|
||||
severity: f.severity,
|
||||
title: f.title,
|
||||
description: f.description,
|
||||
remediation: f.remediation,
|
||||
file: f.file,
|
||||
line: f.line,
|
||||
snippet: f.snippet,
|
||||
detectedBy: f.detectedBy,
|
||||
};
|
||||
}
|
||||
|
||||
router.get("/scans", async (_req, res) => {
|
||||
const rows = await db
|
||||
.select()
|
||||
.from(scansTable)
|
||||
.orderBy(desc(scansTable.createdAt));
|
||||
res.json(ListScansResponse.parse(rows.map(serializeScan)));
|
||||
});
|
||||
|
||||
router.post("/scans", async (req, res) => {
|
||||
const parsed = CreateScanBody.safeParse(req.body);
|
||||
if (!parsed.success) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({ message: "Ungültige Eingabe", details: parsed.error.issues });
|
||||
}
|
||||
const input = parsed.data;
|
||||
|
||||
let files: ParsedFile[] = [];
|
||||
try {
|
||||
if (input.source === "zip") {
|
||||
if (!input.contentBase64)
|
||||
return res.status(400).json({ message: "ZIP-Inhalt fehlt." });
|
||||
files = parseZip(Buffer.from(input.contentBase64, "base64"));
|
||||
} else if (input.source === "file") {
|
||||
if (!input.contentBase64)
|
||||
return res.status(400).json({ message: "Dateiinhalt fehlt." });
|
||||
files = [
|
||||
parseSingleFile(
|
||||
input.filename ?? "datei",
|
||||
Buffer.from(input.contentBase64, "base64"),
|
||||
),
|
||||
];
|
||||
} else {
|
||||
if (!input.text || !input.text.trim())
|
||||
return res.status(400).json({ message: "Text fehlt." });
|
||||
files = [parseText(input.text, input.name ?? "SKILL.md")];
|
||||
}
|
||||
} catch (err) {
|
||||
logger.error({ err }, "Skill-Parsing fehlgeschlagen");
|
||||
return res.status(400).json({
|
||||
message:
|
||||
"Das Skill konnte nicht gelesen werden. Bitte prüfen Sie das Format (gültiges ZIP / Textdatei).",
|
||||
});
|
||||
}
|
||||
|
||||
if (files.length === 0) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({ message: "Keine analysierbaren Dateien gefunden." });
|
||||
}
|
||||
|
||||
const name = input.name?.trim() || deriveScanName(files, "Unbenanntes Skill");
|
||||
const result = await analyzeSkill(files, input.useAi);
|
||||
|
||||
const [scan] = await db
|
||||
.insert(scansTable)
|
||||
.values({
|
||||
name,
|
||||
source: input.source,
|
||||
status: "completed",
|
||||
verdict: result.verdict,
|
||||
riskScore: result.riskScore,
|
||||
fileCount: files.length,
|
||||
aiUsed: result.aiUsed,
|
||||
aiError: result.aiError,
|
||||
findingCounts: result.counts,
|
||||
})
|
||||
.returning();
|
||||
|
||||
let insertedFiles: ScanFile[] = [];
|
||||
if (files.length > 0) {
|
||||
insertedFiles = await db
|
||||
.insert(scanFilesTable)
|
||||
.values(
|
||||
files.map((f) => ({
|
||||
scanId: scan.id,
|
||||
path: f.path,
|
||||
kind: f.kind,
|
||||
language: f.language,
|
||||
size: f.size,
|
||||
})),
|
||||
)
|
||||
.returning();
|
||||
}
|
||||
|
||||
let insertedFindings: Finding[] = [];
|
||||
if (result.findings.length > 0) {
|
||||
insertedFindings = await db
|
||||
.insert(findingsTable)
|
||||
.values(
|
||||
result.findings.map((f) => ({
|
||||
scanId: scan.id,
|
||||
ruleId: f.ruleId,
|
||||
axis: f.axis,
|
||||
severity: f.severity,
|
||||
title: f.title,
|
||||
description: f.description,
|
||||
remediation: f.remediation,
|
||||
file: f.file,
|
||||
line: f.line,
|
||||
snippet: f.snippet,
|
||||
detectedBy: f.detectedBy,
|
||||
})),
|
||||
)
|
||||
.returning();
|
||||
}
|
||||
|
||||
const payload = {
|
||||
...serializeScan(scan),
|
||||
files: insertedFiles.map(serializeFile),
|
||||
findings: insertedFindings
|
||||
.sort((a, b) => a.id - b.id)
|
||||
.map(serializeFinding),
|
||||
};
|
||||
return res.status(201).json(GetScanResponse.parse(payload));
|
||||
});
|
||||
|
||||
router.get("/scans/:id", async (req, res) => {
|
||||
const params = GetScanParams.safeParse(req.params);
|
||||
if (!params.success)
|
||||
return res.status(400).json({ message: "Ungültige ID" });
|
||||
|
||||
const [scan] = await db
|
||||
.select()
|
||||
.from(scansTable)
|
||||
.where(eq(scansTable.id, params.data.id));
|
||||
if (!scan) return res.status(404).json({ message: "Scan nicht gefunden" });
|
||||
|
||||
const files = await db
|
||||
.select()
|
||||
.from(scanFilesTable)
|
||||
.where(eq(scanFilesTable.scanId, scan.id));
|
||||
const findings = await db
|
||||
.select()
|
||||
.from(findingsTable)
|
||||
.where(eq(findingsTable.scanId, scan.id))
|
||||
.orderBy(findingsTable.id);
|
||||
|
||||
const payload = {
|
||||
...serializeScan(scan),
|
||||
files: files.map(serializeFile),
|
||||
findings: findings.map(serializeFinding),
|
||||
};
|
||||
return res.json(GetScanResponse.parse(payload));
|
||||
});
|
||||
|
||||
router.delete("/scans/:id", async (req, res) => {
|
||||
const params = DeleteScanParams.safeParse(req.params);
|
||||
if (!params.success)
|
||||
return res.status(400).json({ message: "Ungültige ID" });
|
||||
await db.delete(scansTable).where(eq(scansTable.id, params.data.id));
|
||||
return res.status(204).send();
|
||||
});
|
||||
|
||||
export default router;
|
||||
31
artifacts/skillguard/.replit-artifact/artifact.toml
Normal file
31
artifacts/skillguard/.replit-artifact/artifact.toml
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
kind = "web"
|
||||
previewPath = "/"
|
||||
title = "SkillGuard"
|
||||
version = "1.0.0"
|
||||
id = "artifacts/skillguard"
|
||||
router = "path"
|
||||
|
||||
[[integratedSkills]]
|
||||
name = "react-vite"
|
||||
version = "1.0.0"
|
||||
|
||||
[[services]]
|
||||
name = "web"
|
||||
paths = [ "/" ]
|
||||
localPort = 20892
|
||||
|
||||
[services.development]
|
||||
run = "pnpm --filter @workspace/skillguard run dev"
|
||||
|
||||
[services.production]
|
||||
build = [ "pnpm", "--filter", "@workspace/skillguard", "run", "build" ]
|
||||
publicDir = "artifacts/skillguard/dist/public"
|
||||
serve = "static"
|
||||
|
||||
[[services.production.rewrites]]
|
||||
from = "/*"
|
||||
to = "/index.html"
|
||||
|
||||
[services.env]
|
||||
PORT = "20892"
|
||||
BASE_PATH = "/"
|
||||
20
artifacts/skillguard/components.json
Normal file
20
artifacts/skillguard/components.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
}
|
||||
}
|
||||
24
artifacts/skillguard/index.html
Normal file
24
artifacts/skillguard/index.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
|
||||
<title>SkillGuard</title>
|
||||
<meta name="description" content="SkillGuard — built on Replit. Update this description to reflect the app." />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta property="og:title" content="SkillGuard" />
|
||||
<meta property="og:description" content="SkillGuard — built on Replit. Update this description to reflect the app." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="SkillGuard" />
|
||||
<meta name="twitter:description" content="SkillGuard — built on Replit. Update this description to reflect the app." />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
77
artifacts/skillguard/package.json
Normal file
77
artifacts/skillguard/package.json
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
{
|
||||
"name": "@workspace/skillguard",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --config vite.config.ts --host 0.0.0.0",
|
||||
"build": "vite build --config vite.config.ts",
|
||||
"serve": "vite preview --config vite.config.ts --host 0.0.0.0",
|
||||
"typecheck": "tsc -p tsconfig.json --noEmit"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hookform/resolvers": "^3.10.0",
|
||||
"@radix-ui/react-accordion": "^1.2.4",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.7",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.3",
|
||||
"@radix-ui/react-avatar": "^1.1.4",
|
||||
"@radix-ui/react-checkbox": "^1.1.5",
|
||||
"@radix-ui/react-collapsible": "^1.1.4",
|
||||
"@radix-ui/react-context-menu": "^2.2.7",
|
||||
"@radix-ui/react-dialog": "^1.1.7",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.7",
|
||||
"@radix-ui/react-hover-card": "^1.1.7",
|
||||
"@radix-ui/react-label": "^2.1.3",
|
||||
"@radix-ui/react-menubar": "^1.1.7",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.6",
|
||||
"@radix-ui/react-popover": "^1.1.7",
|
||||
"@radix-ui/react-progress": "^1.1.3",
|
||||
"@radix-ui/react-radio-group": "^1.2.4",
|
||||
"@radix-ui/react-scroll-area": "^1.2.4",
|
||||
"@radix-ui/react-select": "^2.1.7",
|
||||
"@radix-ui/react-separator": "^1.1.3",
|
||||
"@radix-ui/react-slider": "^1.2.4",
|
||||
"@radix-ui/react-slot": "^1.2.0",
|
||||
"@radix-ui/react-switch": "^1.1.4",
|
||||
"@radix-ui/react-tabs": "^1.1.4",
|
||||
"@radix-ui/react-toast": "^1.2.7",
|
||||
"@radix-ui/react-toggle": "^1.1.3",
|
||||
"@radix-ui/react-toggle-group": "^1.1.3",
|
||||
"@radix-ui/react-tooltip": "^1.2.0",
|
||||
"@replit/vite-plugin-cartographer": "catalog:",
|
||||
"@replit/vite-plugin-dev-banner": "catalog:",
|
||||
"@replit/vite-plugin-runtime-error-modal": "catalog:",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@tailwindcss/vite": "catalog:",
|
||||
"@tanstack/react-query": "catalog:",
|
||||
"@types/node": "catalog:",
|
||||
"@types/react": "catalog:",
|
||||
"@types/react-dom": "catalog:",
|
||||
"@vitejs/plugin-react": "catalog:",
|
||||
"@workspace/api-client-react": "workspace:*",
|
||||
"class-variance-authority": "catalog:",
|
||||
"clsx": "catalog:",
|
||||
"cmdk": "^1.1.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"framer-motion": "catalog:",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "catalog:",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "catalog:",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dom": "catalog:",
|
||||
"react-hook-form": "^7.55.0",
|
||||
"react-icons": "^5.4.0",
|
||||
"react-resizable-panels": "^2.1.7",
|
||||
"recharts": "^2.15.2",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "catalog:",
|
||||
"tailwindcss": "catalog:",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"vaul": "^1.1.2",
|
||||
"vite": "catalog:",
|
||||
"wouter": "^3.3.5",
|
||||
"zod": "catalog:"
|
||||
}
|
||||
}
|
||||
3
artifacts/skillguard/public/favicon.svg
Normal file
3
artifacts/skillguard/public/favicon.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="180" height="180" rx="36" fill="#FF3C00"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 163 B |
BIN
artifacts/skillguard/public/opengraph.jpg
Normal file
BIN
artifacts/skillguard/public/opengraph.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
2
artifacts/skillguard/public/robots.txt
Normal file
2
artifacts/skillguard/public/robots.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
User-agent: *
|
||||
Allow: /
|
||||
44
artifacts/skillguard/src/App.tsx
Normal file
44
artifacts/skillguard/src/App.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { Switch, Route, Router as WouterRouter } from "wouter";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import { AppLayout } from "@/components/layout";
|
||||
import NotFound from "@/pages/not-found";
|
||||
|
||||
import Dashboard from "@/pages/dashboard";
|
||||
import ScanForm from "@/pages/scan-form";
|
||||
import ScanReport from "@/pages/scan-report";
|
||||
import ScanHistory from "@/pages/scan-history";
|
||||
import Admin from "@/pages/admin";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
<AppLayout>
|
||||
<Switch>
|
||||
<Route path="/" component={Dashboard} />
|
||||
<Route path="/pruefen" component={ScanForm} />
|
||||
<Route path="/berichte/:id" component={ScanReport} />
|
||||
<Route path="/verlauf" component={ScanHistory} />
|
||||
<Route path="/admin" component={Admin} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
|
||||
<Router />
|
||||
</WouterRouter>
|
||||
<Toaster />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
76
artifacts/skillguard/src/components/layout.tsx
Normal file
76
artifacts/skillguard/src/components/layout.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import { Link, useLocation } from "wouter";
|
||||
import { Shield, LayoutDashboard, Search, History, Settings } from "lucide-react";
|
||||
import { Sidebar, SidebarContent, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarProvider, SidebarGroup, SidebarGroupContent, SidebarGroupLabel } from "@/components/ui/sidebar";
|
||||
|
||||
export function AppLayout({ children }: { children: React.ReactNode }) {
|
||||
const [location] = useLocation();
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<div className="flex min-h-screen w-full bg-background text-foreground">
|
||||
<Sidebar className="border-r border-sidebar-border bg-sidebar text-sidebar-foreground">
|
||||
<SidebarHeader className="p-4 flex flex-row items-center gap-2">
|
||||
<Shield className="w-6 h-6 text-sidebar-primary" />
|
||||
<span className="font-bold text-lg tracking-tight">SkillGuard</span>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="text-sidebar-foreground/50">Navigation</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild isActive={location === "/"}>
|
||||
<Link href="/">
|
||||
<LayoutDashboard className="w-4 h-4 mr-2" />
|
||||
<span>Dashboard</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild isActive={location === "/pruefen"}>
|
||||
<Link href="/pruefen">
|
||||
<Search className="w-4 h-4 mr-2" />
|
||||
<span>Skill Prüfen</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild isActive={location.startsWith("/verlauf")}>
|
||||
<Link href="/verlauf">
|
||||
<History className="w-4 h-4 mr-2" />
|
||||
<span>Verlauf</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
<SidebarGroup className="mt-auto">
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild isActive={location.startsWith("/admin")}>
|
||||
<Link href="/admin">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
<span>Administration</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
|
||||
<main className="flex-1 flex flex-col h-screen overflow-hidden">
|
||||
<div className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950 p-6">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
40
artifacts/skillguard/src/components/ui-helpers.tsx
Normal file
40
artifacts/skillguard/src/components/ui-helpers.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { ShieldCheck, ShieldAlert, Shield, AlertTriangle, Info, AlertCircle, AlertOctagon } from "lucide-react";
|
||||
|
||||
export function VerdictBadge({ verdict, className }: { verdict: string, className?: string }) {
|
||||
switch (verdict) {
|
||||
case "pass":
|
||||
return <Badge className={`bg-emerald-500 hover:bg-emerald-600 text-white ${className}`}><ShieldCheck className="w-3 h-3 mr-1"/> Freigabe</Badge>;
|
||||
case "review":
|
||||
return <Badge className={`bg-amber-500 hover:bg-amber-600 text-white ${className}`}><ShieldAlert className="w-3 h-3 mr-1"/> Manuelle Prüfung</Badge>;
|
||||
case "block":
|
||||
return <Badge className={`bg-rose-500 hover:bg-rose-600 text-white ${className}`}><Shield className="w-3 h-3 mr-1"/> Blockieren</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline" className={className}>{verdict}</Badge>;
|
||||
}
|
||||
}
|
||||
|
||||
export function SeverityBadge({ severity, className }: { severity: string, className?: string }) {
|
||||
switch (severity) {
|
||||
case "critical":
|
||||
return <Badge className={`bg-rose-600 hover:bg-rose-700 text-white border-transparent ${className}`}><AlertOctagon className="w-3 h-3 mr-1"/> Kritisch</Badge>;
|
||||
case "high":
|
||||
return <Badge className={`bg-orange-500 hover:bg-orange-600 text-white border-transparent ${className}`}><AlertTriangle className="w-3 h-3 mr-1"/> Hoch</Badge>;
|
||||
case "medium":
|
||||
return <Badge className={`bg-amber-400 hover:bg-amber-500 text-white border-transparent ${className}`}><AlertCircle className="w-3 h-3 mr-1"/> Mittel</Badge>;
|
||||
case "low":
|
||||
return <Badge className={`bg-blue-400 hover:bg-blue-500 text-white border-transparent ${className}`}><Info className="w-3 h-3 mr-1"/> Niedrig</Badge>;
|
||||
case "info":
|
||||
return <Badge className={`bg-slate-400 hover:bg-slate-500 text-white border-transparent ${className}`}><Info className="w-3 h-3 mr-1"/> Info</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline" className={className}>{severity}</Badge>;
|
||||
}
|
||||
}
|
||||
|
||||
export function AxisBadge({ axis, className }: { axis: string, className?: string }) {
|
||||
return axis === "security" ? (
|
||||
<Badge variant="outline" className={`border-blue-200 text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-400 ${className}`}>IT-Sicherheit</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className={`border-purple-200 text-purple-700 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-800 dark:text-purple-400 ${className}`}>Datenschutz</Badge>
|
||||
);
|
||||
}
|
||||
55
artifacts/skillguard/src/components/ui/accordion.tsx
Normal file
55
artifacts/skillguard/src/components/ui/accordion.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import * as React from "react"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Accordion = AccordionPrimitive.Root
|
||||
|
||||
const AccordionItem = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AccordionPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn("border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AccordionItem.displayName = "AccordionItem"
|
||||
|
||||
const AccordionTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
))
|
||||
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
|
||||
|
||||
const AccordionContent = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Content
|
||||
ref={ref}
|
||||
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pb-4 pt-0", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
))
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
139
artifacts/skillguard/src/components/ui/alert-dialog.tsx
Normal file
139
artifacts/skillguard/src/components/ui/alert-dialog.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import * as React from "react"
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
const AlertDialog = AlertDialogPrimitive.Root
|
||||
|
||||
const AlertDialogTrigger = AlertDialogPrimitive.Trigger
|
||||
|
||||
const AlertDialogPortal = AlertDialogPrimitive.Portal
|
||||
|
||||
const AlertDialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
|
||||
|
||||
const AlertDialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
))
|
||||
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
|
||||
|
||||
const AlertDialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
AlertDialogHeader.displayName = "AlertDialogHeader"
|
||||
|
||||
const AlertDialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
AlertDialogFooter.displayName = "AlertDialogFooter"
|
||||
|
||||
const AlertDialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
|
||||
|
||||
const AlertDialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogDescription.displayName =
|
||||
AlertDialogPrimitive.Description.displayName
|
||||
|
||||
const AlertDialogAction = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Action
|
||||
ref={ref}
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
|
||||
|
||||
const AlertDialogCancel = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
ref={ref}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"mt-2 sm:mt-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
}
|
||||
59
artifacts/skillguard/src/components/ui/alert.tsx
Normal file
59
artifacts/skillguard/src/components/ui/alert.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
destructive:
|
||||
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const Alert = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||
>(({ className, variant, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Alert.displayName = "Alert"
|
||||
|
||||
const AlertTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h5
|
||||
ref={ref}
|
||||
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertTitle.displayName = "AlertTitle"
|
||||
|
||||
const AlertDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDescription.displayName = "AlertDescription"
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
5
artifacts/skillguard/src/components/ui/aspect-ratio.tsx
Normal file
5
artifacts/skillguard/src/components/ui/aspect-ratio.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
|
||||
|
||||
const AspectRatio = AspectRatioPrimitive.Root
|
||||
|
||||
export { AspectRatio }
|
||||
50
artifacts/skillguard/src/components/ui/avatar.tsx
Normal file
50
artifacts/skillguard/src/components/ui/avatar.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Avatar = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Avatar.displayName = AvatarPrimitive.Root.displayName
|
||||
|
||||
const AvatarImage = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Image
|
||||
ref={ref}
|
||||
className={cn("aspect-square h-full w-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AvatarImage.displayName = AvatarPrimitive.Image.displayName
|
||||
|
||||
const AvatarFallback = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Fallback
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
43
artifacts/skillguard/src/components/ui/badge.tsx
Normal file
43
artifacts/skillguard/src/components/ui/badge.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
// @replit
|
||||
// Whitespace-nowrap: Badges should never wrap.
|
||||
"whitespace-nowrap inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" +
|
||||
" hover-elevate ",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
// @replit shadow-xs instead of shadow, no hover because we use hover-elevate
|
||||
"border-transparent bg-primary text-primary-foreground shadow-xs",
|
||||
secondary:
|
||||
// @replit no hover because we use hover-elevate
|
||||
"border-transparent bg-secondary text-secondary-foreground",
|
||||
destructive:
|
||||
// @replit shadow-xs instead of shadow, no hover because we use hover-elevate
|
||||
"border-transparent bg-destructive text-destructive-foreground shadow-xs",
|
||||
// @replit shadow-xs" - use badge outline variable
|
||||
outline: "text-foreground border [border-color:var(--badge-outline)]",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
115
artifacts/skillguard/src/components/ui/breadcrumb.tsx
Normal file
115
artifacts/skillguard/src/components/ui/breadcrumb.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Breadcrumb = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.ComponentPropsWithoutRef<"nav"> & {
|
||||
separator?: React.ReactNode
|
||||
}
|
||||
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
|
||||
Breadcrumb.displayName = "Breadcrumb"
|
||||
|
||||
const BreadcrumbList = React.forwardRef<
|
||||
HTMLOListElement,
|
||||
React.ComponentPropsWithoutRef<"ol">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ol
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
BreadcrumbList.displayName = "BreadcrumbList"
|
||||
|
||||
const BreadcrumbItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentPropsWithoutRef<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li
|
||||
ref={ref}
|
||||
className={cn("inline-flex items-center gap-1.5", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
BreadcrumbItem.displayName = "BreadcrumbItem"
|
||||
|
||||
const BreadcrumbLink = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.ComponentPropsWithoutRef<"a"> & {
|
||||
asChild?: boolean
|
||||
}
|
||||
>(({ asChild, className, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
className={cn("transition-colors hover:text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
BreadcrumbLink.displayName = "BreadcrumbLink"
|
||||
|
||||
const BreadcrumbPage = React.forwardRef<
|
||||
HTMLSpanElement,
|
||||
React.ComponentPropsWithoutRef<"span">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<span
|
||||
ref={ref}
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("font-normal text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
BreadcrumbPage.displayName = "BreadcrumbPage"
|
||||
|
||||
const BreadcrumbSeparator = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) => (
|
||||
<li
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
|
||||
{...props}
|
||||
>
|
||||
{children ?? <ChevronRight />}
|
||||
</li>
|
||||
)
|
||||
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
|
||||
|
||||
const BreadcrumbEllipsis = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) => (
|
||||
<span
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<span className="sr-only">More</span>
|
||||
</span>
|
||||
)
|
||||
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
|
||||
|
||||
export {
|
||||
Breadcrumb,
|
||||
BreadcrumbList,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbEllipsis,
|
||||
}
|
||||
83
artifacts/skillguard/src/components/ui/button-group.tsx
Normal file
83
artifacts/skillguard/src/components/ui/button-group.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
const buttonGroupVariants = cva(
|
||||
"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
horizontal:
|
||||
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
||||
vertical:
|
||||
"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "horizontal",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function ButtonGroup({
|
||||
className,
|
||||
orientation,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="button-group"
|
||||
data-orientation={orientation}
|
||||
className={cn(buttonGroupVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ButtonGroupText({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "div"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
className={cn(
|
||||
"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ButtonGroupSeparator({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="button-group-separator"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
ButtonGroup,
|
||||
ButtonGroupSeparator,
|
||||
ButtonGroupText,
|
||||
buttonGroupVariants,
|
||||
}
|
||||
65
artifacts/skillguard/src/components/ui/button.tsx
Normal file
65
artifacts/skillguard/src/components/ui/button.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0" +
|
||||
" hover-elevate active-elevate-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
// @replit: no hover, and add primary border
|
||||
"bg-primary text-primary-foreground border border-primary-border",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm border-destructive-border",
|
||||
outline:
|
||||
// @replit Shows the background color of whatever card / sidebar / accent background it is inside of.
|
||||
// Inherits the current text color. Uses shadow-xs. no shadow on active
|
||||
// No hover state
|
||||
" border [border-color:var(--button-outline)] shadow-xs active:shadow-none ",
|
||||
secondary:
|
||||
// @replit border, no hover, no shadow, secondary border.
|
||||
"border bg-secondary text-secondary-foreground border border-secondary-border ",
|
||||
// @replit no hover, transparent border
|
||||
ghost: "border border-transparent",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
// @replit changed sizes
|
||||
default: "min-h-9 px-4 py-2",
|
||||
sm: "min-h-8 rounded-md px-3 text-xs",
|
||||
lg: "min-h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
213
artifacts/skillguard/src/components/ui/calendar.tsx
Normal file
213
artifacts/skillguard/src/components/ui/calendar.tsx
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "lucide-react"
|
||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn(
|
||||
"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString("default", { month: "short" }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn(
|
||||
"relative flex flex-col gap-4 md:flex-row",
|
||||
defaultClassNames.months
|
||||
),
|
||||
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"bg-popover absolute inset-0 opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"select-none font-medium",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
table: "w-full border-collapse",
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"w-[--cell-size] select-none",
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-muted-foreground select-none text-[0.8rem]",
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"bg-accent rounded-l-md",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||
range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
|
||||
today: cn(
|
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="calendar"
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
if (orientation === "right") {
|
||||
return (
|
||||
<ChevronRightIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className="flex size-[--cell-size] items-center justify-center text-center">
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton>) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null)
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus()
|
||||
}, [modifiers.focused])
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton }
|
||||
76
artifacts/skillguard/src/components/ui/card.tsx
Normal file
76
artifacts/skillguard/src/components/ui/card.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-xl border bg-card text-card-foreground shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardFooter.displayName = "CardFooter"
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
260
artifacts/skillguard/src/components/ui/carousel.tsx
Normal file
260
artifacts/skillguard/src/components/ui/carousel.tsx
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
import * as React from "react"
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react"
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1]
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||
type CarouselOptions = UseCarouselParameters[0]
|
||||
type CarouselPlugin = UseCarouselParameters[1]
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions
|
||||
plugins?: CarouselPlugin
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: boolean
|
||||
canScrollNext: boolean
|
||||
} & CarouselProps
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
const Carousel = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
||||
>(
|
||||
(
|
||||
{
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
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) => {
|
||||
if (!api) {
|
||||
return
|
||||
}
|
||||
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) {
|
||||
return
|
||||
}
|
||||
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) {
|
||||
return
|
||||
}
|
||||
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
}
|
||||
}, [api, onSelect])
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={ref}
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
}
|
||||
)
|
||||
Carousel.displayName = "Carousel"
|
||||
|
||||
const CarouselContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div ref={carouselRef} className="overflow-hidden">
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
CarouselContent.displayName = "CarouselContent"
|
||||
|
||||
const CarouselItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
CarouselItem.displayName = "CarouselItem"
|
||||
|
||||
const CarouselPrevious = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute h-8 w-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "-left-12 top-1/2 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselPrevious.displayName = "CarouselPrevious"
|
||||
|
||||
const CarouselNext = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute h-8 w-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "-right-12 top-1/2 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselNext.displayName = "CarouselNext"
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
}
|
||||
367
artifacts/skillguard/src/components/ui/chart.tsx
Normal file
367
artifacts/skillguard/src/components/ui/chart.tsx
Normal file
|
|
@ -0,0 +1,367 @@
|
|||
import * as React from "react"
|
||||
import * as RechartsPrimitive from "recharts"
|
||||
|
||||
import { cn } from "@/lib/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
|
||||
}
|
||||
|
||||
const ChartContainer = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
config: ChartConfig
|
||||
children: React.ComponentProps<
|
||||
typeof RechartsPrimitive.ResponsiveContainer
|
||||
>["children"]
|
||||
}
|
||||
>(({ id, className, children, config, ...props }, ref) => {
|
||||
const uniqueId = React.useId()
|
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-chart={chartId}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.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 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
)
|
||||
})
|
||||
ChartContainer.displayName = "Chart"
|
||||
|
||||
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
|
||||
|
||||
const ChartTooltipContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||
React.ComponentProps<"div"> & {
|
||||
hideLabel?: boolean
|
||||
hideIndicator?: boolean
|
||||
indicator?: "line" | "dot" | "dashed"
|
||||
nameKey?: string
|
||||
labelKey?: string
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
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
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload
|
||||
.filter((item) => item.type !== "none")
|
||||
.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(
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
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="font-mono font-medium tabular-nums text-foreground">
|
||||
{item.value.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
ChartTooltipContent.displayName = "ChartTooltip"
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend
|
||||
|
||||
const ChartLegendContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> &
|
||||
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||
hideIcon?: boolean
|
||||
nameKey?: string
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
||||
ref
|
||||
) => {
|
||||
const { config } = useChart()
|
||||
|
||||
if (!payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{payload
|
||||
.filter((item) => item.type !== "none")
|
||||
.map((item) => {
|
||||
const key = `${nameKey || item.dataKey || "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{itemConfig?.label}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
ChartLegendContent.displayName = "ChartLegend"
|
||||
|
||||
// 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,
|
||||
}
|
||||
28
artifacts/skillguard/src/components/ui/checkbox.tsx
Normal file
28
artifacts/skillguard/src/components/ui/checkbox.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { Check } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("grid place-content-center text-current")}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
))
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||
|
||||
export { Checkbox }
|
||||
11
artifacts/skillguard/src/components/ui/collapsible.tsx
Normal file
11
artifacts/skillguard/src/components/ui/collapsible.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
"use client"
|
||||
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||
|
||||
const Collapsible = CollapsiblePrimitive.Root
|
||||
|
||||
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
|
||||
|
||||
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
153
artifacts/skillguard/src/components/ui/command.tsx
Normal file
153
artifacts/skillguard/src/components/ui/command.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { type DialogProps } from "@radix-ui/react-dialog"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
import { Search } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog"
|
||||
|
||||
const Command = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Command.displayName = CommandPrimitive.displayName
|
||||
|
||||
const CommandDialog = ({ children, ...props }: DialogProps) => {
|
||||
return (
|
||||
<Dialog {...props}>
|
||||
<DialogContent className="overflow-hidden p-0">
|
||||
<Command className="[&_[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-group]]:px-2 [&_[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>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
const CommandInput = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Input>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
||||
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
<CommandPrimitive.Input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"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",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
|
||||
CommandInput.displayName = CommandPrimitive.Input.displayName
|
||||
|
||||
const CommandList = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.List
|
||||
ref={ref}
|
||||
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
|
||||
CommandList.displayName = CommandPrimitive.List.displayName
|
||||
|
||||
const CommandEmpty = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Empty>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
|
||||
>((props, ref) => (
|
||||
<CommandPrimitive.Empty
|
||||
ref={ref}
|
||||
className="py-6 text-center text-sm"
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
|
||||
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
|
||||
|
||||
const CommandGroup = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Group>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Group
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
|
||||
CommandGroup.displayName = CommandPrimitive.Group.displayName
|
||||
|
||||
const CommandSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
|
||||
|
||||
const CommandItem = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
|
||||
CommandItem.displayName = CommandPrimitive.Item.displayName
|
||||
|
||||
const CommandShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
CommandShortcut.displayName = "CommandShortcut"
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
}
|
||||
198
artifacts/skillguard/src/components/ui/context-menu.tsx
Normal file
198
artifacts/skillguard/src/components/ui/context-menu.tsx
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
import * as React from "react"
|
||||
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ContextMenu = ContextMenuPrimitive.Root
|
||||
|
||||
const ContextMenuTrigger = ContextMenuPrimitive.Trigger
|
||||
|
||||
const ContextMenuGroup = ContextMenuPrimitive.Group
|
||||
|
||||
const ContextMenuPortal = ContextMenuPrimitive.Portal
|
||||
|
||||
const ContextMenuSub = ContextMenuPrimitive.Sub
|
||||
|
||||
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
|
||||
|
||||
const ContextMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"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",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</ContextMenuPrimitive.SubTrigger>
|
||||
))
|
||||
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const ContextMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-context-menu-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
|
||||
|
||||
const ContextMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-context-menu-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</ContextMenuPrimitive.Portal>
|
||||
))
|
||||
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
|
||||
|
||||
const ContextMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={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",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
|
||||
|
||||
const ContextMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
ContextMenuCheckboxItem.displayName =
|
||||
ContextMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const ContextMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-4 w-4 fill-current" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
))
|
||||
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const ContextMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold text-foreground",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
|
||||
|
||||
const ContextMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
|
||||
|
||||
const ContextMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
ContextMenuShortcut.displayName = "ContextMenuShortcut"
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
}
|
||||
120
artifacts/skillguard/src/components/ui/dialog.tsx
Normal file
120
artifacts/skillguard/src/components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Dialog = DialogPrimitive.Root
|
||||
|
||||
const DialogTrigger = DialogPrimitive.Trigger
|
||||
|
||||
const DialogPortal = DialogPrimitive.Portal
|
||||
|
||||
const DialogClose = DialogPrimitive.Close
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-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-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
}
|
||||
116
artifacts/skillguard/src/components/ui/drawer.tsx
Normal file
116
artifacts/skillguard/src/components/ui/drawer.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import * as React from "react"
|
||||
import { Drawer as DrawerPrimitive } from "vaul"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Drawer = ({
|
||||
shouldScaleBackground = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
|
||||
<DrawerPrimitive.Root
|
||||
shouldScaleBackground={shouldScaleBackground}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
Drawer.displayName = "Drawer"
|
||||
|
||||
const DrawerTrigger = DrawerPrimitive.Trigger
|
||||
|
||||
const DrawerPortal = DrawerPrimitive.Portal
|
||||
|
||||
const DrawerClose = DrawerPrimitive.Close
|
||||
|
||||
const DrawerOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn("fixed inset-0 z-50 bg-black/80", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
|
||||
|
||||
const DrawerContent = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DrawerPortal>
|
||||
<DrawerOverlay />
|
||||
<DrawerPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPortal>
|
||||
))
|
||||
DrawerContent.displayName = "DrawerContent"
|
||||
|
||||
const DrawerHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DrawerHeader.displayName = "DrawerHeader"
|
||||
|
||||
const DrawerFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DrawerFooter.displayName = "DrawerFooter"
|
||||
|
||||
const DrawerTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DrawerTitle.displayName = DrawerPrimitive.Title.displayName
|
||||
|
||||
const DrawerDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DrawerDescription.displayName = DrawerPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Drawer,
|
||||
DrawerPortal,
|
||||
DrawerOverlay,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerFooter,
|
||||
DrawerTitle,
|
||||
DrawerDescription,
|
||||
}
|
||||
201
artifacts/skillguard/src/components/ui/dropdown-menu.tsx
Normal file
201
artifacts/skillguard/src/components/ui/dropdown-menu.tsx
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"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 origin-[--radix-dropdown-menu-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"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 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
}
|
||||
104
artifacts/skillguard/src/components/ui/empty.tsx
Normal file
104
artifacts/skillguard/src/components/ui/empty.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-header"
|
||||
className={cn(
|
||||
"flex max-w-sm flex-col items-center gap-2 text-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const emptyMediaVariants = cva(
|
||||
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function EmptyMedia({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-icon"
|
||||
data-variant={variant}
|
||||
className={cn(emptyMediaVariants({ variant, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-title"
|
||||
className={cn("text-lg font-medium tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-description"
|
||||
className={cn(
|
||||
"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-content"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Empty,
|
||||
EmptyHeader,
|
||||
EmptyTitle,
|
||||
EmptyDescription,
|
||||
EmptyContent,
|
||||
EmptyMedia,
|
||||
}
|
||||
244
artifacts/skillguard/src/components/ui/field.tsx
Normal file
244
artifacts/skillguard/src/components/ui/field.tsx
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
"use client"
|
||||
|
||||
import { useMemo } from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||
return (
|
||||
<fieldset
|
||||
data-slot="field-set"
|
||||
className={cn(
|
||||
"flex flex-col gap-6",
|
||||
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLegend({
|
||||
className,
|
||||
variant = "legend",
|
||||
...props
|
||||
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
|
||||
return (
|
||||
<legend
|
||||
data-slot="field-legend"
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"mb-3 font-medium",
|
||||
"data-[variant=legend]:text-base",
|
||||
"data-[variant=label]:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-group"
|
||||
className={cn(
|
||||
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const fieldVariants = cva(
|
||||
"group/field data-[invalid=true]:text-destructive flex w-full gap-3",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
|
||||
horizontal: [
|
||||
"flex-row items-center",
|
||||
"[&>[data-slot=field-label]]:flex-auto",
|
||||
"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
|
||||
],
|
||||
responsive: [
|
||||
"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
|
||||
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
|
||||
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "vertical",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Field({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="field"
|
||||
data-orientation={orientation}
|
||||
className={cn(fieldVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-content"
|
||||
className={cn(
|
||||
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Label>) {
|
||||
return (
|
||||
<Label
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
|
||||
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
|
||||
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="field-description"
|
||||
className={cn(
|
||||
"text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
|
||||
"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
|
||||
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
children?: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-separator"
|
||||
data-content={!!children}
|
||||
className={cn(
|
||||
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Separator className="absolute inset-0 top-1/2" />
|
||||
{children && (
|
||||
<span
|
||||
className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
|
||||
data-slot="field-separator-content"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldError({
|
||||
className,
|
||||
children,
|
||||
errors,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
errors?: Array<{ message?: string } | undefined>
|
||||
}) {
|
||||
const content = useMemo(() => {
|
||||
if (children) {
|
||||
return children
|
||||
}
|
||||
|
||||
if (!errors) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (errors?.length === 1 && errors[0]?.message) {
|
||||
return errors[0].message
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="ml-4 flex list-disc flex-col gap-1">
|
||||
{errors.map(
|
||||
(error, index) =>
|
||||
error?.message && <li key={index}>{error.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
)
|
||||
}, [children, errors])
|
||||
|
||||
if (!content) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-slot="field-error"
|
||||
className={cn("text-destructive text-sm font-normal", className)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldContent,
|
||||
FieldTitle,
|
||||
}
|
||||
176
artifacts/skillguard/src/components/ui/form.tsx
Normal file
176
artifacts/skillguard/src/components/ui/form.tsx
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import {
|
||||
Controller,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
type ControllerProps,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form"
|
||||
|
||||
import { cn } from "@/lib/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 | null>(null)
|
||||
|
||||
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, formState } = useFormContext()
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>")
|
||||
}
|
||||
|
||||
if (!itemContext) {
|
||||
throw new Error("useFormField should be used within <FormItem>")
|
||||
}
|
||||
|
||||
const fieldState = getFieldState(fieldContext.name, formState)
|
||||
|
||||
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 | null>(null)
|
||||
|
||||
const FormItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div ref={ref} className={cn("space-y-2", className)} {...props} />
|
||||
</FormItemContext.Provider>
|
||||
)
|
||||
})
|
||||
FormItem.displayName = "FormItem"
|
||||
|
||||
const FormLabel = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { error, formItemId } = useFormField()
|
||||
|
||||
return (
|
||||
<Label
|
||||
ref={ref}
|
||||
className={cn(error && "text-destructive", className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
FormLabel.displayName = "FormLabel"
|
||||
|
||||
const FormControl = React.forwardRef<
|
||||
React.ElementRef<typeof Slot>,
|
||||
React.ComponentPropsWithoutRef<typeof Slot>
|
||||
>(({ ...props }, ref) => {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
||||
|
||||
return (
|
||||
<Slot
|
||||
ref={ref}
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
FormControl.displayName = "FormControl"
|
||||
|
||||
const FormDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { formDescriptionId } = useFormField()
|
||||
|
||||
return (
|
||||
<p
|
||||
ref={ref}
|
||||
id={formDescriptionId}
|
||||
className={cn("text-[0.8rem] text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
FormDescription.displayName = "FormDescription"
|
||||
|
||||
const FormMessage = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, children, ...props }, ref) => {
|
||||
const { error, formMessageId } = useFormField()
|
||||
const body = error ? String(error?.message ?? "") : children
|
||||
|
||||
if (!body) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<p
|
||||
ref={ref}
|
||||
id={formMessageId}
|
||||
className={cn("text-[0.8rem] font-medium text-destructive", className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
)
|
||||
})
|
||||
FormMessage.displayName = "FormMessage"
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
}
|
||||
27
artifacts/skillguard/src/components/ui/hover-card.tsx
Normal file
27
artifacts/skillguard/src/components/ui/hover-card.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import * as React from "react"
|
||||
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const HoverCard = HoverCardPrimitive.Root
|
||||
|
||||
const HoverCardTrigger = HoverCardPrimitive.Trigger
|
||||
|
||||
const HoverCardContent = React.forwardRef<
|
||||
React.ElementRef<typeof HoverCardPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<HoverCardPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-hover-card-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
|
||||
|
||||
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
||||
168
artifacts/skillguard/src/components/ui/input-group.tsx
Normal file
168
artifacts/skillguard/src/components/ui/input-group.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-group"
|
||||
role="group"
|
||||
className={cn(
|
||||
"group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
|
||||
"h-9 has-[>textarea]:h-auto",
|
||||
|
||||
// Variants based on alignment.
|
||||
"has-[>[data-align=inline-start]]:[&>input]:pl-2",
|
||||
"has-[>[data-align=inline-end]]:[&>input]:pr-2",
|
||||
"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
|
||||
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
|
||||
|
||||
// Focus state.
|
||||
"has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
|
||||
|
||||
// Error state.
|
||||
"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
|
||||
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupAddonVariants = cva(
|
||||
"text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
align: {
|
||||
"inline-start":
|
||||
"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
|
||||
"inline-end":
|
||||
"order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
|
||||
"block-start":
|
||||
"[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
|
||||
"block-end":
|
||||
"[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
align: "inline-start",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupAddon({
|
||||
className,
|
||||
align = "inline-start",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="input-group-addon"
|
||||
data-align={align}
|
||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||
onClick={(e) => {
|
||||
if ((e.target as HTMLElement).closest("button")) {
|
||||
return
|
||||
}
|
||||
e.currentTarget.parentElement?.querySelector("input")?.focus()
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupButtonVariants = cva(
|
||||
"flex items-center gap-2 text-sm shadow-none",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
|
||||
sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
|
||||
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "xs",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupButton({
|
||||
className,
|
||||
type = "button",
|
||||
variant = "ghost",
|
||||
size = "xs",
|
||||
...props
|
||||
}: Omit<React.ComponentProps<typeof Button>, "size"> &
|
||||
VariantProps<typeof inputGroupButtonVariants>) {
|
||||
return (
|
||||
<Button
|
||||
type={type}
|
||||
data-size={size}
|
||||
variant={variant}
|
||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupTextarea({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<Textarea
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupText,
|
||||
InputGroupInput,
|
||||
InputGroupTextarea,
|
||||
}
|
||||
69
artifacts/skillguard/src/components/ui/input-otp.tsx
Normal file
69
artifacts/skillguard/src/components/ui/input-otp.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import * as React from "react"
|
||||
import { OTPInput, OTPInputContext } from "input-otp"
|
||||
import { Minus } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const InputOTP = React.forwardRef<
|
||||
React.ElementRef<typeof OTPInput>,
|
||||
React.ComponentPropsWithoutRef<typeof OTPInput>
|
||||
>(({ className, containerClassName, ...props }, ref) => (
|
||||
<OTPInput
|
||||
ref={ref}
|
||||
containerClassName={cn(
|
||||
"flex items-center gap-2 has-[:disabled]:opacity-50",
|
||||
containerClassName
|
||||
)}
|
||||
className={cn("disabled:cursor-not-allowed", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
InputOTP.displayName = "InputOTP"
|
||||
|
||||
const InputOTPGroup = React.forwardRef<
|
||||
React.ElementRef<"div">,
|
||||
React.ComponentPropsWithoutRef<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("flex items-center", className)} {...props} />
|
||||
))
|
||||
InputOTPGroup.displayName = "InputOTPGroup"
|
||||
|
||||
const InputOTPSlot = React.forwardRef<
|
||||
React.ElementRef<"div">,
|
||||
React.ComponentPropsWithoutRef<"div"> & { index: number }
|
||||
>(({ index, className, ...props }, ref) => {
|
||||
const inputOTPContext = React.useContext(OTPInputContext)
|
||||
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
|
||||
isActive && "z-10 ring-1 ring-ring",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{char}
|
||||
{hasFakeCaret && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
InputOTPSlot.displayName = "InputOTPSlot"
|
||||
|
||||
const InputOTPSeparator = React.forwardRef<
|
||||
React.ElementRef<"div">,
|
||||
React.ComponentPropsWithoutRef<"div">
|
||||
>(({ ...props }, ref) => (
|
||||
<div ref={ref} role="separator" {...props}>
|
||||
<Minus />
|
||||
</div>
|
||||
))
|
||||
InputOTPSeparator.displayName = "InputOTPSeparator"
|
||||
|
||||
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
|
||||
22
artifacts/skillguard/src/components/ui/input.tsx
Normal file
22
artifacts/skillguard/src/components/ui/input.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
193
artifacts/skillguard/src/components/ui/item.tsx
Normal file
193
artifacts/skillguard/src/components/ui/item.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
role="list"
|
||||
data-slot="item-group"
|
||||
className={cn("group/item-group flex flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="item-separator"
|
||||
orientation="horizontal"
|
||||
className={cn("my-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const itemVariants = cva(
|
||||
"group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline: "border-border",
|
||||
muted: "bg-muted/50",
|
||||
},
|
||||
size: {
|
||||
default: "gap-4 p-4 ",
|
||||
sm: "gap-2.5 px-4 py-3",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Item({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> &
|
||||
VariantProps<typeof itemVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "div"
|
||||
return (
|
||||
<Comp
|
||||
data-slot="item"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(itemVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const itemMediaVariants = cva(
|
||||
"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
|
||||
image:
|
||||
"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function ItemMedia({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-media"
|
||||
data-variant={variant}
|
||||
className={cn(itemMediaVariants({ variant, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-content"
|
||||
className={cn(
|
||||
"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-title"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm font-medium leading-snug",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="item-description"
|
||||
className={cn(
|
||||
"text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
|
||||
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-actions"
|
||||
className={cn("flex items-center gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-header"
|
||||
className={cn(
|
||||
"flex basis-full items-center justify-between gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="item-footer"
|
||||
className={cn(
|
||||
"flex basis-full items-center justify-between gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Item,
|
||||
ItemMedia,
|
||||
ItemContent,
|
||||
ItemActions,
|
||||
ItemGroup,
|
||||
ItemSeparator,
|
||||
ItemTitle,
|
||||
ItemDescription,
|
||||
ItemHeader,
|
||||
ItemFooter,
|
||||
}
|
||||
28
artifacts/skillguard/src/components/ui/kbd.tsx
Normal file
28
artifacts/skillguard/src/components/ui/kbd.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
|
||||
"[&_svg:not([class*='size-'])]:size-3",
|
||||
"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd-group"
|
||||
className={cn("inline-flex items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Kbd, KbdGroup }
|
||||
26
artifacts/skillguard/src/components/ui/label.tsx
Normal file
26
artifacts/skillguard/src/components/ui/label.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const labelVariants = cva(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
)
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
|
||||
export { Label }
|
||||
254
artifacts/skillguard/src/components/ui/menubar.tsx
Normal file
254
artifacts/skillguard/src/components/ui/menubar.tsx
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
import * as React from "react"
|
||||
import * as MenubarPrimitive from "@radix-ui/react-menubar"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function MenubarMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
|
||||
return <MenubarPrimitive.Menu {...props} />
|
||||
}
|
||||
|
||||
function MenubarGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
|
||||
return <MenubarPrimitive.Group {...props} />
|
||||
}
|
||||
|
||||
function MenubarPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
|
||||
return <MenubarPrimitive.Portal {...props} />
|
||||
}
|
||||
|
||||
function MenubarRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
|
||||
return <MenubarPrimitive.RadioGroup {...props} />
|
||||
}
|
||||
|
||||
function MenubarSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
|
||||
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
|
||||
}
|
||||
|
||||
const Menubar = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<MenubarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Menubar.displayName = MenubarPrimitive.Root.displayName
|
||||
|
||||
const MenubarTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<MenubarPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
|
||||
|
||||
const MenubarSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<MenubarPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"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",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</MenubarPrimitive.SubTrigger>
|
||||
))
|
||||
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
|
||||
|
||||
const MenubarSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<MenubarPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-menubar-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
|
||||
|
||||
const MenubarContent = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
|
||||
>(
|
||||
(
|
||||
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
|
||||
ref
|
||||
) => (
|
||||
<MenubarPrimitive.Portal>
|
||||
<MenubarPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-menubar-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</MenubarPrimitive.Portal>
|
||||
)
|
||||
)
|
||||
MenubarContent.displayName = MenubarPrimitive.Content.displayName
|
||||
|
||||
const MenubarItem = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<MenubarPrimitive.Item
|
||||
ref={ref}
|
||||
className={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",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
MenubarItem.displayName = MenubarPrimitive.Item.displayName
|
||||
|
||||
const MenubarCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<MenubarPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<MenubarPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</MenubarPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenubarPrimitive.CheckboxItem>
|
||||
))
|
||||
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
|
||||
|
||||
const MenubarRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<MenubarPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<MenubarPrimitive.ItemIndicator>
|
||||
<Circle className="h-4 w-4 fill-current" />
|
||||
</MenubarPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenubarPrimitive.RadioItem>
|
||||
))
|
||||
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
|
||||
|
||||
const MenubarLabel = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<MenubarPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
MenubarLabel.displayName = MenubarPrimitive.Label.displayName
|
||||
|
||||
const MenubarSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof MenubarPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<MenubarPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
|
||||
|
||||
const MenubarShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
MenubarShortcut.displayname = "MenubarShortcut"
|
||||
|
||||
export {
|
||||
Menubar,
|
||||
MenubarMenu,
|
||||
MenubarTrigger,
|
||||
MenubarContent,
|
||||
MenubarItem,
|
||||
MenubarSeparator,
|
||||
MenubarLabel,
|
||||
MenubarCheckboxItem,
|
||||
MenubarRadioGroup,
|
||||
MenubarRadioItem,
|
||||
MenubarPortal,
|
||||
MenubarSubContent,
|
||||
MenubarSubTrigger,
|
||||
MenubarGroup,
|
||||
MenubarSub,
|
||||
MenubarShortcut,
|
||||
}
|
||||
128
artifacts/skillguard/src/components/ui/navigation-menu.tsx
Normal file
128
artifacts/skillguard/src/components/ui/navigation-menu.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import * as React from "react"
|
||||
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
|
||||
import { cva } from "class-variance-authority"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const NavigationMenu = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-10 flex max-w-max flex-1 items-center justify-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<NavigationMenuViewport />
|
||||
</NavigationMenuPrimitive.Root>
|
||||
))
|
||||
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
|
||||
|
||||
const NavigationMenuList = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"group flex flex-1 list-none items-center justify-center space-x-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
|
||||
|
||||
const NavigationMenuItem = NavigationMenuPrimitive.Item
|
||||
|
||||
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 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-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
|
||||
)
|
||||
|
||||
const NavigationMenuTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}{" "}
|
||||
<ChevronDown
|
||||
className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
))
|
||||
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
|
||||
|
||||
const NavigationMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"left-0 top-0 w-full 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 md:absolute md:w-auto ",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
|
||||
|
||||
const NavigationMenuLink = NavigationMenuPrimitive.Link
|
||||
|
||||
const NavigationMenuViewport = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className={cn("absolute left-0 top-full flex justify-center")}>
|
||||
<NavigationMenuPrimitive.Viewport
|
||||
className={cn(
|
||||
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
NavigationMenuViewport.displayName =
|
||||
NavigationMenuPrimitive.Viewport.displayName
|
||||
|
||||
const NavigationMenuIndicator = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Indicator
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
|
||||
</NavigationMenuPrimitive.Indicator>
|
||||
))
|
||||
NavigationMenuIndicator.displayName =
|
||||
NavigationMenuPrimitive.Indicator.displayName
|
||||
|
||||
export {
|
||||
navigationMenuTriggerStyle,
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuViewport,
|
||||
}
|
||||
117
artifacts/skillguard/src/components/ui/pagination.tsx
Normal file
117
artifacts/skillguard/src/components/ui/pagination.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import * as React from "react"
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ButtonProps, buttonVariants } from "@/components/ui/button"
|
||||
|
||||
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
Pagination.displayName = "Pagination"
|
||||
|
||||
const PaginationContent = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
PaginationContent.displayName = "PaginationContent"
|
||||
|
||||
const PaginationItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li ref={ref} className={cn("", className)} {...props} />
|
||||
))
|
||||
PaginationItem.displayName = "PaginationItem"
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean
|
||||
} & Pick<ButtonProps, "size"> &
|
||||
React.ComponentProps<"a">
|
||||
|
||||
const PaginationLink = ({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) => (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
PaginationLink.displayName = "PaginationLink"
|
||||
|
||||
const PaginationPrevious = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) => (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 pl-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span>Previous</span>
|
||||
</PaginationLink>
|
||||
)
|
||||
PaginationPrevious.displayName = "PaginationPrevious"
|
||||
|
||||
const PaginationNext = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) => (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 pr-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<span>Next</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</PaginationLink>
|
||||
)
|
||||
PaginationNext.displayName = "PaginationNext"
|
||||
|
||||
const PaginationEllipsis = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) => (
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn("flex h-9 w-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
)
|
||||
PaginationEllipsis.displayName = "PaginationEllipsis"
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
PaginationPrevious,
|
||||
PaginationNext,
|
||||
PaginationEllipsis,
|
||||
}
|
||||
31
artifacts/skillguard/src/components/ui/popover.tsx
Normal file
31
artifacts/skillguard/src/components/ui/popover.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Popover = PopoverPrimitive.Root
|
||||
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger
|
||||
|
||||
const PopoverAnchor = PopoverPrimitive.Anchor
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-popover-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
))
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
|
||||
28
artifacts/skillguard/src/components/ui/progress.tsx
Normal file
28
artifacts/skillguard/src/components/ui/progress.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
||||
>(({ className, value, ...props }, ref) => (
|
||||
<ProgressPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
className="h-full w-full flex-1 bg-primary transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
))
|
||||
Progress.displayName = ProgressPrimitive.Root.displayName
|
||||
|
||||
export { Progress }
|
||||
42
artifacts/skillguard/src/components/ui/radio-group.tsx
Normal file
42
artifacts/skillguard/src/components/ui/radio-group.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const RadioGroup = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
})
|
||||
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
|
||||
|
||||
const RadioGroupItem = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
||||
<Circle className="h-3.5 w-3.5 fill-primary" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
})
|
||||
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
45
artifacts/skillguard/src/components/ui/resizable.tsx
Normal file
45
artifacts/skillguard/src/components/ui/resizable.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
"use client"
|
||||
|
||||
import { GripVertical } from "lucide-react"
|
||||
import * as ResizablePrimitive from "react-resizable-panels"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ResizablePanelGroup = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
|
||||
<ResizablePrimitive.PanelGroup
|
||||
className={cn(
|
||||
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
const ResizablePanel = ResizablePrimitive.Panel
|
||||
|
||||
const ResizableHandle = ({
|
||||
withHandle,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||
withHandle?: boolean
|
||||
}) => (
|
||||
<ResizablePrimitive.PanelResizeHandle
|
||||
className={cn(
|
||||
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 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",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{withHandle && (
|
||||
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
||||
<GripVertical className="h-2.5 w-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.PanelResizeHandle>
|
||||
)
|
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
|
||||
46
artifacts/skillguard/src/components/ui/scroll-area.tsx
Normal file
46
artifacts/skillguard/src/components/ui/scroll-area.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ScrollArea = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn("relative overflow-hidden", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
))
|
||||
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
||||
|
||||
const ScrollBar = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
ref={ref}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none select-none transition-colors",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
))
|
||||
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
159
artifacts/skillguard/src/components/ui/select.tsx
Normal file
159
artifacts/skillguard/src/components/ui/select.tsx
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group
|
||||
|
||||
const SelectValue = SelectPrimitive.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
))
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 origin-[--radix-select-content-transform-origin]",
|
||||
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}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
))
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
))
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
}
|
||||
29
artifacts/skillguard/src/components/ui/separator.tsx
Normal file
29
artifacts/skillguard/src/components/ui/separator.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(
|
||||
(
|
||||
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||
ref
|
||||
) => (
|
||||
<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||
|
||||
export { Separator }
|
||||
140
artifacts/skillguard/src/components/ui/sheet.tsx
Normal file
140
artifacts/skillguard/src/components/ui/sheet.tsx
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger
|
||||
|
||||
const SheetClose = SheetPrimitive.Close
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
<SheetPrimitive.Close className="absolute right-4 top-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">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
{children}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetHeader.displayName = "SheetHeader"
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetPortal,
|
||||
SheetOverlay,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
727
artifacts/skillguard/src/components/ui/sidebar.tsx
Normal file
727
artifacts/skillguard/src/components/ui/sidebar.tsx
Normal file
|
|
@ -0,0 +1,727 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, VariantProps } from "class-variance-authority"
|
||||
import { PanelLeftIcon } from "lucide-react"
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
|
||||
type SidebarContextProps = {
|
||||
state: "expanded" | "collapsed"
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
openMobile: boolean
|
||||
setOpenMobile: (open: boolean) => void
|
||||
isMobile: boolean
|
||||
toggleSidebar: () => void
|
||||
}
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext)
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function SidebarProvider({
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
defaultOpen?: boolean
|
||||
open?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}) {
|
||||
const isMobile = useIsMobile()
|
||||
const [openMobile, setOpenMobile] = React.useState(false)
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
||||
const open = openProp ?? _open
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState)
|
||||
} else {
|
||||
_setOpen(openState)
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||
},
|
||||
[setOpenProp, open]
|
||||
)
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
||||
}, [isMobile, setOpen, setOpenMobile])
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault()
|
||||
toggleSidebar()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [toggleSidebar])
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed"
|
||||
|
||||
const contextValue = React.useMemo<SidebarContextProps>(
|
||||
() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
||||
)
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div
|
||||
data-slot="sidebar-wrapper"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</SidebarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function Sidebar({
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
side?: "left" | "right"
|
||||
variant?: "sidebar" | "floating" | "inset"
|
||||
collapsible?: "offcanvas" | "icon" | "none"
|
||||
}) {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar"
|
||||
className={cn(
|
||||
"bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar"
|
||||
data-mobile="true"
|
||||
className="bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
side={side}
|
||||
>
|
||||
<SheetHeader className="sr-only">
|
||||
<SheetTitle>Sidebar</SheetTitle>
|
||||
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group peer text-sidebar-foreground hidden md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
data-slot="sidebar"
|
||||
>
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
data-slot="sidebar-gap"
|
||||
className={cn(
|
||||
"relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4))]"
|
||||
: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
data-slot="sidebar-container"
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||
side === "left"
|
||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4)+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar-inner"
|
||||
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarTrigger({
|
||||
className,
|
||||
onClick,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-sidebar="trigger"
|
||||
data-slot="sidebar-trigger"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("h-7 w-7", className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event)
|
||||
toggleSidebar()
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<PanelLeftIcon />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
// Note: Tailwind v3.4 doesn't support "in-" selectors. So the rail won't work perfectly.
|
||||
return (
|
||||
<button
|
||||
data-sidebar="rail"
|
||||
data-slot="sidebar-rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||
return (
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"bg-background relative flex w-full flex-1 flex-col",
|
||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Input>) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="sidebar-input"
|
||||
data-sidebar="input"
|
||||
className={cn("bg-background h-8 w-full shadow-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-header"
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-footer"
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="sidebar-separator"
|
||||
data-sidebar="separator"
|
||||
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-content"
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group"
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupLabel({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "div"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-label"
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
|
||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupAction({
|
||||
className,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-group-action"
|
||||
data-sidebar="group-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 md:after:hidden",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group-content"
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu"
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-item"
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function SidebarMenuButton({
|
||||
asChild = false,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
isActive?: boolean
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const { isMobile, state } = useSidebar()
|
||||
|
||||
const button = (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-button"
|
||||
data-sidebar="menu-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
if (!tooltip) {
|
||||
return button
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuAction({
|
||||
className,
|
||||
asChild = false,
|
||||
showOnHover = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
showOnHover?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-action"
|
||||
data-sidebar="menu-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 md:after:hidden",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
showOnHover &&
|
||||
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuBadge({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-badge"
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
||||
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSkeleton({
|
||||
className,
|
||||
showIcon = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showIcon?: boolean
|
||||
}) {
|
||||
// Random width between 50 to 90%.
|
||||
const width = React.useMemo(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-skeleton"
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}
|
||||
>
|
||||
{showIcon && (
|
||||
<Skeleton
|
||||
className="size-4 rounded-md"
|
||||
data-sidebar="menu-skeleton-icon"
|
||||
/>
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-[var(--skeleton-width)] flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu-sub"
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-sub-item"
|
||||
data-sidebar="menu-sub-item"
|
||||
className={cn("group/menu-sub-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubButton({
|
||||
asChild = false,
|
||||
size = "md",
|
||||
isActive = false,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"a"> & {
|
||||
asChild?: boolean
|
||||
size?: "sm" | "md"
|
||||
isActive?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="sidebar-menu-sub-button"
|
||||
data-sidebar="menu-sub-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline outline-2 outline-transparent outline-offset-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||
size === "sm" && "text-xs",
|
||||
size === "md" && "text-sm",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
}
|
||||
15
artifacts/skillguard/src/components/ui/skeleton.tsx
Normal file
15
artifacts/skillguard/src/components/ui/skeleton.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
26
artifacts/skillguard/src/components/ui/slider.tsx
Normal file
26
artifacts/skillguard/src/components/ui/slider.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react"
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Slider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
))
|
||||
Slider.displayName = SliderPrimitive.Root.displayName
|
||||
|
||||
export { Slider }
|
||||
31
artifacts/skillguard/src/components/ui/sonner.tsx
Normal file
31
artifacts/skillguard/src/components/ui/sonner.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner } from "sonner"
|
||||
|
||||
type ToasterProps = React.ComponentProps<typeof Sonner>
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast:
|
||||
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
||||
description: "group-[.toast]:text-muted-foreground",
|
||||
actionButton:
|
||||
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
||||
cancelButton:
|
||||
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
16
artifacts/skillguard/src/components/ui/spinner.tsx
Normal file
16
artifacts/skillguard/src/components/ui/spinner.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { Loader2Icon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
|
||||
return (
|
||||
<Loader2Icon
|
||||
role="status"
|
||||
aria-label="Loading"
|
||||
className={cn("size-4 animate-spin", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Spinner }
|
||||
27
artifacts/skillguard/src/components/ui/switch.tsx
Normal file
27
artifacts/skillguard/src/components/ui/switch.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import * as React from "react"
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
))
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||
|
||||
export { Switch }
|
||||
120
artifacts/skillguard/src/components/ui/table.tsx
Normal file
120
artifacts/skillguard/src/components/ui/table.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
Table.displayName = "Table"
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
))
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCaption.displayName = "TableCaption"
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
53
artifacts/skillguard/src/components/ui/tabs.tsx
Normal file
53
artifacts/skillguard/src/components/ui/tabs.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Tabs = TabsPrimitive.Root
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsList.displayName = TabsPrimitive.List.displayName
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium 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-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
22
artifacts/skillguard/src/components/ui/textarea.tsx
Normal file
22
artifacts/skillguard/src/components/ui/textarea.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Textarea = React.forwardRef<
|
||||
HTMLTextAreaElement,
|
||||
React.ComponentProps<"textarea">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
127
artifacts/skillguard/src/components/ui/toast.tsx
Normal file
127
artifacts/skillguard/src/components/ui/toast.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import * as React from "react"
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
|
||||
const toastVariants = cva(
|
||||
"group 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(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border bg-background text-foreground",
|
||||
destructive:
|
||||
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
ref={ref}
|
||||
className={cn(toastVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Toast.displayName = ToastPrimitives.Root.displayName
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
))
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn("text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||
|
||||
export {
|
||||
type ToastProps,
|
||||
type ToastActionElement,
|
||||
ToastProvider,
|
||||
ToastViewport,
|
||||
Toast,
|
||||
ToastTitle,
|
||||
ToastDescription,
|
||||
ToastClose,
|
||||
ToastAction,
|
||||
}
|
||||
33
artifacts/skillguard/src/components/ui/toaster.tsx
Normal file
33
artifacts/skillguard/src/components/ui/toaster.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { useToast } from "@/hooks/use-toast"
|
||||
import {
|
||||
Toast,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport,
|
||||
} from "@/components/ui/toast"
|
||||
|
||||
export function Toaster() {
|
||||
const { toasts } = useToast()
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map(function ({ id, title, description, action, ...props }) {
|
||||
return (
|
||||
<Toast key={id} {...props}>
|
||||
<div className="grid gap-1">
|
||||
{title && <ToastTitle>{title}</ToastTitle>}
|
||||
{description && (
|
||||
<ToastDescription>{description}</ToastDescription>
|
||||
)}
|
||||
</div>
|
||||
{action}
|
||||
<ToastClose />
|
||||
</Toast>
|
||||
)
|
||||
})}
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
)
|
||||
}
|
||||
61
artifacts/skillguard/src/components/ui/toggle-group.tsx
Normal file
61
artifacts/skillguard/src/components/ui/toggle-group.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
|
||||
import { type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { toggleVariants } from "@/components/ui/toggle"
|
||||
|
||||
const ToggleGroupContext = React.createContext<
|
||||
VariantProps<typeof toggleVariants>
|
||||
>({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
})
|
||||
|
||||
const ToggleGroup = React.forwardRef<
|
||||
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>
|
||||
>(({ className, variant, size, children, ...props }, ref) => (
|
||||
<ToggleGroupPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn("flex items-center justify-center gap-1", className)}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider value={{ variant, size }}>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive.Root>
|
||||
))
|
||||
|
||||
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
|
||||
|
||||
const ToggleGroupItem = React.forwardRef<
|
||||
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
|
||||
VariantProps<typeof toggleVariants>
|
||||
>(({ className, children, variant, size, ...props }, ref) => {
|
||||
const context = React.useContext(ToggleGroupContext)
|
||||
|
||||
return (
|
||||
<ToggleGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
toggleVariants({
|
||||
variant: context.variant || variant,
|
||||
size: context.size || size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupPrimitive.Item>
|
||||
)
|
||||
})
|
||||
|
||||
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
|
||||
|
||||
export { ToggleGroup, ToggleGroupItem }
|
||||
43
artifacts/skillguard/src/components/ui/toggle.tsx
Normal file
43
artifacts/skillguard/src/components/ui/toggle.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import * as React from "react"
|
||||
import * as TogglePrimitive from "@radix-ui/react-toggle"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline:
|
||||
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-2 min-w-9",
|
||||
sm: "h-8 px-1.5 min-w-8",
|
||||
lg: "h-10 px-2.5 min-w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const Toggle = React.forwardRef<
|
||||
React.ElementRef<typeof TogglePrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>
|
||||
>(({ className, variant, size, ...props }, ref) => (
|
||||
<TogglePrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
|
||||
Toggle.displayName = TogglePrimitive.Root.displayName
|
||||
|
||||
export { Toggle, toggleVariants }
|
||||
32
artifacts/skillguard/src/components/ui/tooltip.tsx
Normal file
32
artifacts/skillguard/src/components/ui/tooltip.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs 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 origin-[--radix-tooltip-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</TooltipPrimitive.Portal>
|
||||
))
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
19
artifacts/skillguard/src/hooks/use-mobile.tsx
Normal file
19
artifacts/skillguard/src/hooks/use-mobile.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
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
|
||||
}
|
||||
191
artifacts/skillguard/src/hooks/use-toast.ts
Normal file
191
artifacts/skillguard/src/hooks/use-toast.ts
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
import * as React from "react"
|
||||
|
||||
import type {
|
||||
ToastActionElement,
|
||||
ToastProps,
|
||||
} from "@/components/ui/toast"
|
||||
|
||||
const TOAST_LIMIT = 1
|
||||
const TOAST_REMOVE_DELAY = 1000000
|
||||
|
||||
type ToasterToast = ToastProps & {
|
||||
id: string
|
||||
title?: React.ReactNode
|
||||
description?: React.ReactNode
|
||||
action?: ToastActionElement
|
||||
}
|
||||
|
||||
const actionTypes = {
|
||||
ADD_TOAST: "ADD_TOAST",
|
||||
UPDATE_TOAST: "UPDATE_TOAST",
|
||||
DISMISS_TOAST: "DISMISS_TOAST",
|
||||
REMOVE_TOAST: "REMOVE_TOAST",
|
||||
} as const
|
||||
|
||||
let count = 0
|
||||
|
||||
function genId() {
|
||||
count = (count + 1) % Number.MAX_SAFE_INTEGER
|
||||
return count.toString()
|
||||
}
|
||||
|
||||
type ActionType = typeof actionTypes
|
||||
|
||||
type Action =
|
||||
| {
|
||||
type: ActionType["ADD_TOAST"]
|
||||
toast: ToasterToast
|
||||
}
|
||||
| {
|
||||
type: ActionType["UPDATE_TOAST"]
|
||||
toast: Partial<ToasterToast>
|
||||
}
|
||||
| {
|
||||
type: ActionType["DISMISS_TOAST"]
|
||||
toastId?: ToasterToast["id"]
|
||||
}
|
||||
| {
|
||||
type: ActionType["REMOVE_TOAST"]
|
||||
toastId?: ToasterToast["id"]
|
||||
}
|
||||
|
||||
interface State {
|
||||
toasts: ToasterToast[]
|
||||
}
|
||||
|
||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
|
||||
|
||||
const addToRemoveQueue = (toastId: string) => {
|
||||
if (toastTimeouts.has(toastId)) {
|
||||
return
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
toastTimeouts.delete(toastId)
|
||||
dispatch({
|
||||
type: "REMOVE_TOAST",
|
||||
toastId: toastId,
|
||||
})
|
||||
}, TOAST_REMOVE_DELAY)
|
||||
|
||||
toastTimeouts.set(toastId, timeout)
|
||||
}
|
||||
|
||||
export const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case "ADD_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
||||
}
|
||||
|
||||
case "UPDATE_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
||||
),
|
||||
}
|
||||
|
||||
case "DISMISS_TOAST": {
|
||||
const { toastId } = action
|
||||
|
||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
||||
// but I'll keep it here for simplicity
|
||||
if (toastId) {
|
||||
addToRemoveQueue(toastId)
|
||||
} else {
|
||||
state.toasts.forEach((toast) => {
|
||||
addToRemoveQueue(toast.id)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined
|
||||
? {
|
||||
...t,
|
||||
open: false,
|
||||
}
|
||||
: t
|
||||
),
|
||||
}
|
||||
}
|
||||
case "REMOVE_TOAST":
|
||||
if (action.toastId === undefined) {
|
||||
return {
|
||||
...state,
|
||||
toasts: [],
|
||||
}
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const listeners: Array<(state: State) => void> = []
|
||||
|
||||
let memoryState: State = { toasts: [] }
|
||||
|
||||
function dispatch(action: Action) {
|
||||
memoryState = reducer(memoryState, action)
|
||||
listeners.forEach((listener) => {
|
||||
listener(memoryState)
|
||||
})
|
||||
}
|
||||
|
||||
type Toast = Omit<ToasterToast, "id">
|
||||
|
||||
function toast({ ...props }: Toast) {
|
||||
const id = genId()
|
||||
|
||||
const update = (props: ToasterToast) =>
|
||||
dispatch({
|
||||
type: "UPDATE_TOAST",
|
||||
toast: { ...props, id },
|
||||
})
|
||||
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
||||
|
||||
dispatch({
|
||||
type: "ADD_TOAST",
|
||||
toast: {
|
||||
...props,
|
||||
id,
|
||||
open: true,
|
||||
onOpenChange: (open) => {
|
||||
if (!open) dismiss()
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
id: id,
|
||||
dismiss,
|
||||
update,
|
||||
}
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
const [state, setState] = React.useState<State>(memoryState)
|
||||
|
||||
React.useEffect(() => {
|
||||
listeners.push(setState)
|
||||
return () => {
|
||||
const index = listeners.indexOf(setState)
|
||||
if (index > -1) {
|
||||
listeners.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}, [state])
|
||||
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
||||
}
|
||||
}
|
||||
|
||||
export { useToast, toast }
|
||||
139
artifacts/skillguard/src/index.css
Normal file
139
artifacts/skillguard/src/index.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
--color-card-border: hsl(var(--card-border));
|
||||
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
--color-popover-border: hsl(var(--popover-border));
|
||||
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-primary-border: var(--primary-border);
|
||||
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-secondary-border: var(--secondary-border);
|
||||
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
--color-muted-border: var(--muted-border);
|
||||
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-accent-border: var(--accent-border);
|
||||
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--color-destructive-border: var(--destructive-border);
|
||||
|
||||
--color-sidebar: hsl(var(--sidebar));
|
||||
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
||||
--color-sidebar-border: hsl(var(--sidebar-border));
|
||||
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
||||
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
||||
--color-sidebar-primary-border: var(--sidebar-primary-border);
|
||||
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
||||
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
||||
--color-sidebar-accent-border: var(--sidebar-accent-border);
|
||||
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
||||
|
||||
--font-sans: var(--app-font-sans);
|
||||
--font-mono: var(--app-font-mono);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: 210 40% 98%;
|
||||
--foreground: 222 47% 11%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
--card-border: 214 32% 91%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
--popover-border: 214 32% 91%;
|
||||
--primary: 215 25% 27%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222 47% 11%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222 47% 11%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--sidebar: 215 25% 15%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-border: 215 25% 12%;
|
||||
--sidebar-primary: 210 40% 98%;
|
||||
--sidebar-primary-foreground: 215 25% 15%;
|
||||
--sidebar-accent: 215 25% 20%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-ring: 215 25% 30%;
|
||||
|
||||
--app-font-sans: 'Inter', sans-serif;
|
||||
--app-font-mono: 'JetBrains Mono', monospace;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222 47% 11%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 215 25% 15%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--card-border: 215 25% 20%;
|
||||
--popover: 215 25% 15%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--popover-border: 215 25% 20%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
|
||||
--sidebar: 222 47% 11%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-primary: 210 40% 98%;
|
||||
--sidebar-primary-foreground: 222 47% 11%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
7
artifacts/skillguard/src/lib/format.ts
Normal file
7
artifacts/skillguard/src/lib/format.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { format } from "date-fns";
|
||||
import { de } from "date-fns/locale";
|
||||
|
||||
export function formatDate(date: string | Date) {
|
||||
if (!date) return "";
|
||||
return format(new Date(date), "dd.MM.yyyy HH:mm", { locale: de });
|
||||
}
|
||||
6
artifacts/skillguard/src/lib/utils.ts
Normal file
6
artifacts/skillguard/src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
5
artifacts/skillguard/src/main.tsx
Normal file
5
artifacts/skillguard/src/main.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(<App />);
|
||||
454
artifacts/skillguard/src/pages/admin.tsx
Normal file
454
artifacts/skillguard/src/pages/admin.tsx
Normal file
|
|
@ -0,0 +1,454 @@
|
|||
import { useState } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
useListProviders, getListProvidersQueryKey, useCreateProvider, useUpdateProvider, useDeleteProvider, useTestProvider,
|
||||
useListPrompts, getListPromptsQueryKey, useUpdatePrompt,
|
||||
useListRules, getListRulesQueryKey, useUpdateRule,
|
||||
AiProviderApiType, RuleUpdateSeverity
|
||||
} from "@workspace/api-client-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Loader2, Plus, Trash2, CheckCircle2, XCircle, BrainCircuit, ShieldAlert, KeyRound, Server, Activity } from "lucide-react";
|
||||
import { AxisBadge, SeverityBadge } from "@/components/ui-helpers";
|
||||
|
||||
function ProviderTab() {
|
||||
const { data: providers, isLoading } = useListProviders();
|
||||
const queryClient = useQueryClient();
|
||||
const { toast } = useToast();
|
||||
|
||||
const createProvider = useCreateProvider();
|
||||
const updateProvider = useUpdateProvider();
|
||||
const deleteProvider = useDeleteProvider();
|
||||
const testProvider = useTestProvider();
|
||||
|
||||
const [isAddOpen, setIsAddOpen] = useState(false);
|
||||
const [addForm, setAddForm] = useState({ name: "", apiType: AiProviderApiType.openai as AiProviderApiType, baseUrl: "", model: "", apiToken: "", enabled: true });
|
||||
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [editForm, setEditForm] = useState({ name: "", apiType: AiProviderApiType.openai as AiProviderApiType, baseUrl: "", model: "", apiToken: "", enabled: true });
|
||||
|
||||
const [testingId, setTestingId] = useState<number | null>(null);
|
||||
|
||||
const invalidate = () => queryClient.invalidateQueries({ queryKey: getListProvidersQueryKey() });
|
||||
|
||||
const handleAddSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
createProvider.mutate({ data: addForm }, {
|
||||
onSuccess: () => {
|
||||
toast({ title: "Provider hinzugefügt" });
|
||||
setIsAddOpen(false);
|
||||
setAddForm({ name: "", apiType: AiProviderApiType.openai as AiProviderApiType, baseUrl: "", model: "", apiToken: "", enabled: true });
|
||||
invalidate();
|
||||
},
|
||||
onError: () => toast({ title: "Fehler beim Hinzufügen", variant: "destructive" })
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!editingId) return;
|
||||
|
||||
const updateData: any = { ...editForm };
|
||||
if (!updateData.apiToken) delete updateData.apiToken; // keep existing if empty
|
||||
|
||||
updateProvider.mutate({ id: editingId, data: updateData }, {
|
||||
onSuccess: () => {
|
||||
toast({ title: "Provider aktualisiert" });
|
||||
setEditingId(null);
|
||||
invalidate();
|
||||
},
|
||||
onError: () => toast({ title: "Fehler beim Aktualisieren", variant: "destructive" })
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
deleteProvider.mutate({ id }, {
|
||||
onSuccess: () => {
|
||||
toast({ title: "Provider gelöscht" });
|
||||
invalidate();
|
||||
},
|
||||
onError: () => toast({ title: "Fehler beim Löschen", variant: "destructive" })
|
||||
});
|
||||
};
|
||||
|
||||
const handleTest = (id: number) => {
|
||||
setTestingId(id);
|
||||
testProvider.mutate({ id }, {
|
||||
onSuccess: (res) => {
|
||||
setTestingId(null);
|
||||
if (res.ok) {
|
||||
toast({ title: "Verbindung erfolgreich", description: res.message || "Der API-Aufruf war erfolgreich." });
|
||||
} else {
|
||||
toast({ title: "Verbindung fehlgeschlagen", description: res.message || "Es gab ein Problem.", variant: "destructive" });
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
setTestingId(null);
|
||||
toast({ title: "Fehler", description: "Verbindungstest konnte nicht durchgeführt werden.", variant: "destructive" });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const openEdit = (provider: any) => {
|
||||
setEditForm({
|
||||
name: provider.name,
|
||||
apiType: provider.apiType,
|
||||
baseUrl: provider.baseUrl,
|
||||
model: provider.model,
|
||||
apiToken: "",
|
||||
enabled: provider.enabled
|
||||
});
|
||||
setEditingId(provider.id);
|
||||
};
|
||||
|
||||
if (isLoading) return <div>Lade Provider...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">KI-Provider</h2>
|
||||
<p className="text-sm text-muted-foreground">Konfigurieren Sie externe LLM-Provider für die semantische Analyse.</p>
|
||||
</div>
|
||||
<Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="gap-2"><Plus className="w-4 h-4"/> Provider hinzufügen</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<form onSubmit={handleAddSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Neuer KI-Provider</DialogTitle>
|
||||
<DialogDescription>
|
||||
Fügen Sie einen eigenen LLM-Provider für die KI-Analyse hinzu.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label>Name</Label>
|
||||
<Input value={addForm.name} onChange={e => setAddForm({...addForm, name: e.target.value})} required />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>API-Typ</Label>
|
||||
<Select value={addForm.apiType} onValueChange={(v: AiProviderApiType) => setAddForm({...addForm, apiType: v})}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="openai">OpenAI</SelectItem>
|
||||
<SelectItem value="anthropic">Anthropic</SelectItem>
|
||||
<SelectItem value="custom">Custom</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Base URL</Label>
|
||||
<Input value={addForm.baseUrl} onChange={e => setAddForm({...addForm, baseUrl: e.target.value})} required placeholder="z.B. https://api.openai.com/v1" />
|
||||
<p className="text-xs text-muted-foreground">OpenAI-kompatibel: https://api.openai.com/v1 <br/> Anthropic: https://api.anthropic.com/v1</p>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Modell</Label>
|
||||
<Input value={addForm.model} onChange={e => setAddForm({...addForm, model: e.target.value})} required placeholder="z.B. gpt-4o" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>API Token</Label>
|
||||
<Input type="password" value={addForm.apiToken} onChange={e => setAddForm({...addForm, apiToken: e.target.value})} required />
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
<Label>Aktiviert</Label>
|
||||
<Switch checked={addForm.enabled} onCheckedChange={c => setAddForm({...addForm, enabled: c})} />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={createProvider.isPending}>Speichern</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{providers?.map((provider) => (
|
||||
<Card key={provider.id} className={!provider.enabled ? "opacity-75" : ""}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
||||
<Server className="w-5 h-5 text-primary" />
|
||||
{provider.name}
|
||||
{!provider.enabled && <Badge variant="secondary">Deaktiviert</Badge>}
|
||||
</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
<Switch
|
||||
checked={provider.enabled}
|
||||
onCheckedChange={(enabled) => updateProvider.mutate({ id: provider.id, data: { enabled } }, { onSuccess: invalidate })}
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm mt-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-muted-foreground">API-Typ</span>
|
||||
<span className="font-medium capitalize">{provider.apiType}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-muted-foreground">Modell</span>
|
||||
<span className="font-mono">{provider.model}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 col-span-2">
|
||||
<span className="text-muted-foreground">Base URL</span>
|
||||
<span className="font-mono truncate" title={provider.baseUrl}>{provider.baseUrl}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 col-span-4 mt-2">
|
||||
<span className="text-muted-foreground flex items-center gap-1"><KeyRound className="w-3 h-3"/> API Token</span>
|
||||
<span className="font-mono text-xs bg-muted px-2 py-1 rounded w-fit">{provider.hasToken ? provider.tokenPreview : "Kein Token"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="bg-muted/30 flex justify-end gap-2 border-t pt-4">
|
||||
<Button variant="outline" size="sm" onClick={() => handleTest(provider.id)} disabled={testingId === provider.id || testProvider.isPending}>
|
||||
{testingId === provider.id ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Activity className="w-4 h-4 mr-2" />}
|
||||
Verbindung testen
|
||||
</Button>
|
||||
<Dialog open={editingId === provider.id} onOpenChange={(o) => !o && setEditingId(null)}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm" onClick={() => openEdit(provider)}>Bearbeiten</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<form onSubmit={handleEditSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Provider bearbeiten</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label>Name</Label>
|
||||
<Input value={editForm.name} onChange={e => setEditForm({...editForm, name: e.target.value})} required />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>API-Typ</Label>
|
||||
<Select value={editForm.apiType} onValueChange={(v: AiProviderApiType) => setEditForm({...editForm, apiType: v})}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="openai">OpenAI</SelectItem>
|
||||
<SelectItem value="anthropic">Anthropic</SelectItem>
|
||||
<SelectItem value="custom">Custom</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Base URL</Label>
|
||||
<Input value={editForm.baseUrl} onChange={e => setEditForm({...editForm, baseUrl: e.target.value})} required />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Modell</Label>
|
||||
<Input value={editForm.model} onChange={e => setEditForm({...editForm, model: e.target.value})} required />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>API Token (leer lassen zum Beibehalten)</Label>
|
||||
<Input type="password" value={editForm.apiToken} onChange={e => setEditForm({...editForm, apiToken: e.target.value})} placeholder="Token beibehalten" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={updateProvider.isPending}>Speichern</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="text-destructive hover:bg-destructive/10"><Trash2 className="w-4 h-4"/></Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Provider löschen?</AlertDialogTitle>
|
||||
<AlertDialogDescription>Möchten Sie den Provider {provider.name} unwiderruflich löschen?</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Abbrechen</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => handleDelete(provider.id)} className="bg-destructive">Löschen</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
{providers?.length === 0 && (
|
||||
<Card className="p-8 text-center bg-muted/30">
|
||||
<Server className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
|
||||
<h3 className="font-bold">Keine Provider konfiguriert</h3>
|
||||
<p className="text-sm text-muted-foreground mt-2 max-w-md mx-auto">Es sind keine externen KI-Provider für die semantische Analyse hinterlegt. Die statische Analyse funktioniert auch ohne Provider.</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PromptsTab() {
|
||||
const { data: prompts, isLoading } = useListPrompts();
|
||||
const queryClient = useQueryClient();
|
||||
const { toast } = useToast();
|
||||
const updatePrompt = useUpdatePrompt();
|
||||
|
||||
const handleSave = (id: number, name: string, content: string) => {
|
||||
updatePrompt.mutate({ id, data: { name, content } }, {
|
||||
onSuccess: () => {
|
||||
toast({ title: "Prompt gespeichert" });
|
||||
queryClient.invalidateQueries({ queryKey: getListPromptsQueryKey() });
|
||||
},
|
||||
onError: () => toast({ title: "Fehler beim Speichern", variant: "destructive" })
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) return <div>Lade Prompts...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">System-Prompts</h2>
|
||||
<p className="text-sm text-muted-foreground">Diese Prompts steuern die KI-Analyse, wenn ein Skill geprüft wird.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
{prompts?.map((prompt) => {
|
||||
let currentContent = prompt.content;
|
||||
return (
|
||||
<Card key={prompt.id}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BrainCircuit className="w-5 h-5 text-primary" />
|
||||
{prompt.name}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-mono text-xs">{prompt.key}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Textarea
|
||||
defaultValue={currentContent}
|
||||
onChange={e => currentContent = e.target.value}
|
||||
className="min-h-[250px] font-mono text-sm"
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter className="justify-end">
|
||||
<Button onClick={() => handleSave(prompt.id, prompt.name, currentContent)} disabled={updatePrompt.isPending}>Speichern</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RulesTab() {
|
||||
const { data: rules, isLoading } = useListRules();
|
||||
const queryClient = useQueryClient();
|
||||
const { toast } = useToast();
|
||||
const updateRule = useUpdateRule();
|
||||
|
||||
const handleUpdate = (id: number, data: { severity?: RuleUpdateSeverity, enabled?: boolean }) => {
|
||||
updateRule.mutate({ id, data }, {
|
||||
onSuccess: () => {
|
||||
toast({ title: "Regel aktualisiert" });
|
||||
queryClient.invalidateQueries({ queryKey: getListRulesQueryKey() });
|
||||
},
|
||||
onError: () => toast({ title: "Fehler beim Aktualisieren", variant: "destructive" })
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) return <div>Lade Regelwerk...</div>;
|
||||
|
||||
const securityRules = rules?.filter(r => r.axis === "security") || [];
|
||||
const privacyRules = rules?.filter(r => r.axis === "privacy") || [];
|
||||
|
||||
const RuleList = ({ items }: { items: typeof rules }) => (
|
||||
<div className="space-y-4 mt-4">
|
||||
{items?.map(rule => (
|
||||
<Card key={rule.id} className={!rule.enabled ? "opacity-75" : ""}>
|
||||
<CardHeader className="py-4">
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs font-bold px-2 py-1 bg-muted rounded">{rule.ruleId}</span>
|
||||
<CardTitle className="text-base">{rule.title}</CardTitle>
|
||||
</div>
|
||||
<CardDescription>{rule.description}</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Select value={rule.severity} onValueChange={(v: RuleUpdateSeverity) => handleUpdate(rule.id, { severity: v })}>
|
||||
<SelectTrigger className="w-[130px] h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="critical">Kritisch</SelectItem>
|
||||
<SelectItem value="high">Hoch</SelectItem>
|
||||
<SelectItem value="medium">Mittel</SelectItem>
|
||||
<SelectItem value="low">Niedrig</SelectItem>
|
||||
<SelectItem value="info">Info</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Switch checked={rule.enabled} onCheckedChange={e => handleUpdate(rule.id, { enabled: e })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Badge variant="outline" className="text-xs capitalize">Kategorie: {rule.category}</Badge>
|
||||
<Badge variant="secondary" className="text-xs bg-slate-100 dark:bg-slate-800">
|
||||
{rule.detectionType === "regex" ? "Regex" : rule.detectionType === "heuristic" ? "Heuristik" : "KI"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">Regelwerk</h2>
|
||||
<p className="text-sm text-muted-foreground">Aktivieren oder konfigurieren Sie den Schweregrad der Erkennungsregeln.</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="security">
|
||||
<TabsList>
|
||||
<TabsTrigger value="security">IT-Sicherheit ({securityRules.length})</TabsTrigger>
|
||||
<TabsTrigger value="privacy">Datenschutz ({privacyRules.length})</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="security">
|
||||
<RuleList items={securityRules} />
|
||||
</TabsContent>
|
||||
<TabsContent value="privacy">
|
||||
<RuleList items={privacyRules} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Admin() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Administration</h1>
|
||||
<p className="text-muted-foreground">Verwalten Sie KI-Anbindungen, Prompts und das Regelwerk.</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="providers" className="w-full">
|
||||
<TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
|
||||
<TabsTrigger value="providers" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-4 py-2">KI-Provider</TabsTrigger>
|
||||
<TabsTrigger value="prompts" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-4 py-2">Prompts</TabsTrigger>
|
||||
<TabsTrigger value="rules" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-4 py-2">Regelwerk</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="pt-6">
|
||||
<TabsContent value="providers" className="m-0"><ProviderTab /></TabsContent>
|
||||
<TabsContent value="prompts" className="m-0"><PromptsTab /></TabsContent>
|
||||
<TabsContent value="rules" className="m-0"><RulesTab /></TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
artifacts/skillguard/src/pages/dashboard.tsx
Normal file
146
artifacts/skillguard/src/pages/dashboard.tsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import { useGetDashboard } from "@workspace/api-client-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { VerdictBadge, SeverityBadge, AxisBadge } from "@/components/ui-helpers";
|
||||
import { ShieldCheck, ShieldAlert, Shield, Activity, FileSearch, ShieldQuestion } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Link } from "wouter";
|
||||
import { formatDate } from "@/lib/format";
|
||||
|
||||
export default function Dashboard() {
|
||||
const { data, isLoading, error } = useGetDashboard();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Dashboard</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{[1,2,3,4].map(i => <Skeleton key={i} className="h-32 w-full" />)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Skeleton className="h-96 w-full" />
|
||||
<Skeleton className="h-96 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !data) {
|
||||
return (
|
||||
<div className="p-8 text-center bg-destructive/10 rounded-lg text-destructive">
|
||||
<ShieldQuestion className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<h2 className="text-xl font-bold">Fehler beim Laden des Dashboards</h2>
|
||||
<p>Bitte versuchen Sie es später erneut.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Dashboard</h1>
|
||||
<p className="text-muted-foreground">Willkommen im SkillGuard Security Center. Übersicht aller Agent-Skills.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-card">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">Scans Gesamt</CardTitle>
|
||||
<FileSearch className="w-4 h-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{data.totalScans}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-emerald-50 dark:bg-emerald-950/20 border-emerald-200 dark:border-emerald-900">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium text-emerald-800 dark:text-emerald-300">Freigaben</CardTitle>
|
||||
<ShieldCheck className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-emerald-700 dark:text-emerald-400">{data.verdictCounts.pass}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-amber-50 dark:bg-amber-950/20 border-amber-200 dark:border-amber-900">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium text-amber-800 dark:text-amber-300">Zu Prüfen</CardTitle>
|
||||
<ShieldAlert className="w-4 h-4 text-amber-600 dark:text-amber-400" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-amber-700 dark:text-amber-400">{data.verdictCounts.review}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-rose-50 dark:bg-rose-950/20 border-rose-200 dark:border-rose-900">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium text-rose-800 dark:text-rose-300">Blockiert</CardTitle>
|
||||
<Shield className="w-4 h-4 text-rose-600 dark:text-rose-400" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-rose-700 dark:text-rose-400">{data.verdictCounts.block}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Kürzliche Scans</CardTitle>
|
||||
<CardDescription>Die letzten durchgeführten Überprüfungen</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.recentScans.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">Keine Scans vorhanden.</p>
|
||||
) : (
|
||||
data.recentScans.map((scan) => (
|
||||
<Link key={scan.id} href={`/berichte/${scan.id}`} className="flex items-center justify-between p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium text-sm">{scan.name || `Scan #${scan.id}`}</span>
|
||||
<span className="text-xs text-muted-foreground">{formatDate(scan.createdAt)} · {scan.source}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<span className="text-xs font-medium text-muted-foreground">Score</span>
|
||||
<span className="text-sm font-mono">{scan.riskScore} / 100</span>
|
||||
</div>
|
||||
<VerdictBadge verdict={scan.verdict} />
|
||||
</div>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Häufigste Regelverstöße</CardTitle>
|
||||
<CardDescription>Regeln, die in der letzten Zeit am öftesten angeschlagen haben</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.topRules.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">Keine Regelverstöße verzeichnet.</p>
|
||||
) : (
|
||||
data.topRules.map((rule) => (
|
||||
<div key={rule.ruleId} className="flex items-center justify-between p-3 rounded-lg border bg-slate-50 dark:bg-slate-900">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium text-sm line-clamp-1">{rule.title}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs text-muted-foreground">{rule.ruleId}</span>
|
||||
<AxisBadge axis={rule.axis} className="text-[10px] px-1.5 py-0" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="font-mono">{rule.count} Treffer</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
artifacts/skillguard/src/pages/not-found.tsx
Normal file
21
artifacts/skillguard/src/pages/not-found.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
|
||||
<Card className="w-full max-w-md mx-4">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex mb-4 gap-2">
|
||||
<AlertCircle className="h-8 w-8 text-red-500" />
|
||||
<h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm text-gray-600">
|
||||
Did you forget to add the page to the router?
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
169
artifacts/skillguard/src/pages/scan-form.tsx
Normal file
169
artifacts/skillguard/src/pages/scan-form.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import { useState } from "react";
|
||||
import { useLocation } from "wouter";
|
||||
import { useCreateScan, SkillScanInputSource } from "@workspace/api-client-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { FileUp, FileText, Type, Loader2, ShieldCheck } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
export default function ScanForm() {
|
||||
const [, setLocation] = useLocation();
|
||||
const { toast } = useToast();
|
||||
const createScan = useCreateScan();
|
||||
|
||||
const [sourceType, setSourceType] = useState<SkillScanInputSource>("file");
|
||||
const [name, setName] = useState("");
|
||||
const [useAi, setUseAi] = useState(false);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setFile(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if ((sourceType === "file" || sourceType === "zip") && !file) {
|
||||
toast({ title: "Fehler", description: "Bitte wählen Sie eine Datei aus.", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
if (sourceType === "text" && !text.trim()) {
|
||||
toast({ title: "Fehler", description: "Bitte geben Sie Text ein.", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let contentBase64: string | undefined = undefined;
|
||||
let filename: string | undefined = undefined;
|
||||
|
||||
if (file && (sourceType === "file" || sourceType === "zip")) {
|
||||
const reader = new FileReader();
|
||||
const base64Promise = new Promise<string>((resolve, reject) => {
|
||||
reader.onload = () => {
|
||||
const result = reader.result as string;
|
||||
// Strip data URL prefix
|
||||
const base64 = result.split(',')[1] || result;
|
||||
resolve(base64);
|
||||
};
|
||||
reader.onerror = reject;
|
||||
});
|
||||
reader.readAsDataURL(file);
|
||||
contentBase64 = await base64Promise;
|
||||
filename = file.name;
|
||||
}
|
||||
|
||||
createScan.mutate({
|
||||
data: {
|
||||
name: name || undefined,
|
||||
source: sourceType,
|
||||
useAi,
|
||||
contentBase64,
|
||||
filename,
|
||||
text: sourceType === "text" ? text : undefined
|
||||
}
|
||||
}, {
|
||||
onSuccess: (data) => {
|
||||
toast({ title: "Scan erfolgreich", description: "Der Skill wurde erfolgreich analysiert." });
|
||||
setLocation(`/berichte/${data.id}`);
|
||||
},
|
||||
onError: (err) => {
|
||||
toast({ title: "Fehler", description: "Der Scan konnte nicht durchgeführt werden.", variant: "destructive" });
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
toast({ title: "Fehler", description: "Beim Verarbeiten der Datei ist ein Fehler aufgetreten.", variant: "destructive" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Skill Prüfen</h1>
|
||||
<p className="text-muted-foreground">Laden Sie einen Agent-Skill hoch, um ihn auf Sicherheits- und Datenschutzrisiken zu analysieren.</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardHeader>
|
||||
<CardTitle>Neue Analyse starten</CardTitle>
|
||||
<CardDescription>Wählen Sie die Quelle des Skills aus.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Bezeichnung (optional)</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="z.B. GitHub PR Reviewer Skill"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Tabs value={sourceType} onValueChange={(v) => setSourceType(v as SkillScanInputSource)}>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="file"><FileText className="w-4 h-4 mr-2" /> Einzelne Datei</TabsTrigger>
|
||||
<TabsTrigger value="zip"><FileUp className="w-4 h-4 mr-2" /> ZIP-Archiv</TabsTrigger>
|
||||
<TabsTrigger value="text"><Type className="w-4 h-4 mr-2" /> Text</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div className="mt-4 p-4 border rounded-lg bg-slate-50 dark:bg-slate-900/50">
|
||||
<TabsContent value="file" className="m-0 space-y-2">
|
||||
<Label htmlFor="file-single">Instruction-Datei (z.B. SKILL.md oder prompt.txt)</Label>
|
||||
<Input id="file-single" type="file" onChange={handleFileChange} />
|
||||
</TabsContent>
|
||||
<TabsContent value="zip" className="m-0 space-y-2">
|
||||
<Label htmlFor="file-zip">Skill-Verzeichnis (.zip)</Label>
|
||||
<Input id="file-zip" type="file" accept=".zip" onChange={handleFileChange} />
|
||||
<p className="text-xs text-muted-foreground mt-2">Das Archiv sollte die SKILL.md sowie alle dazugehörigen Skripte enthalten.</p>
|
||||
</TabsContent>
|
||||
<TabsContent value="text" className="m-0 space-y-2">
|
||||
<Label htmlFor="raw-text">Skill Instructions</Label>
|
||||
<Textarea
|
||||
id="raw-text"
|
||||
placeholder="Fügen Sie hier die Prompt-Instruktionen ein..."
|
||||
className="min-h-[200px] font-mono text-sm"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
/>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base">KI-Analyse aktivieren</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nutzt konfigurierte LLM-Provider zur semantischen Analyse von Instruktionen (erkennt z.B. Prompt Injection).
|
||||
</p>
|
||||
</div>
|
||||
<Switch checked={useAi} onCheckedChange={setUseAi} />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end gap-4 border-t p-6">
|
||||
<Button type="button" variant="outline" onClick={() => {
|
||||
setName("");
|
||||
setFile(null);
|
||||
setText("");
|
||||
setUseAi(false);
|
||||
}}>Abbrechen</Button>
|
||||
<Button type="submit" disabled={createScan.isPending}>
|
||||
{createScan.isPending ? (
|
||||
<><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Analysiere...</>
|
||||
) : (
|
||||
<><ShieldCheck className="w-4 h-4 mr-2" /> Scan starten</>
|
||||
)}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
134
artifacts/skillguard/src/pages/scan-history.tsx
Normal file
134
artifacts/skillguard/src/pages/scan-history.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import { Link } from "wouter";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useListScans, getListScansQueryKey, useDeleteScan } from "@workspace/api-client-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||
import { VerdictBadge } from "@/components/ui-helpers";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import { Search, Trash2, ArrowRight } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
export default function ScanHistory() {
|
||||
const { data: scans, isLoading } = useListScans();
|
||||
const queryClient = useQueryClient();
|
||||
const deleteScan = useDeleteScan();
|
||||
const { toast } = useToast();
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
deleteScan.mutate({ id }, {
|
||||
onSuccess: () => {
|
||||
toast({ title: "Scan gelöscht", description: "Der Scan wurde erfolgreich gelöscht." });
|
||||
queryClient.invalidateQueries({ queryKey: getListScansQueryKey() });
|
||||
},
|
||||
onError: () => {
|
||||
toast({ title: "Fehler", description: "Der Scan konnte nicht gelöscht werden.", variant: "destructive" });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Verlauf</h1>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-24 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Verlauf</h1>
|
||||
<p className="text-muted-foreground">Alle durchgeführten Skill-Scans in der Übersicht.</p>
|
||||
</div>
|
||||
|
||||
{!scans || scans.length === 0 ? (
|
||||
<Card className="flex flex-col items-center justify-center p-12 text-center">
|
||||
<Search className="w-12 h-12 text-muted-foreground mb-4 opacity-50" />
|
||||
<h2 className="text-xl font-bold mb-2">Noch keine Prüfungen</h2>
|
||||
<p className="text-muted-foreground mb-6 max-w-md">Es wurden bisher keine Agent-Skills auf IT-Sicherheit und Datenschutz geprüft.</p>
|
||||
<Button asChild>
|
||||
<Link href="/pruefen">Jetzt einen Skill prüfen</Link>
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{scans.map((scan) => (
|
||||
<Card key={scan.id} className="overflow-hidden hover:border-primary/50 transition-colors">
|
||||
<div className="flex flex-col sm:flex-row">
|
||||
<Link href={`/berichte/${scan.id}`} className="flex-1 p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-semibold text-lg">{scan.name || `Scan #${scan.id}`}</span>
|
||||
<VerdictBadge verdict={scan.verdict} />
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>{formatDate(scan.createdAt)}</span>
|
||||
<span>·</span>
|
||||
<span className="capitalize">{scan.source}</span>
|
||||
<span>·</span>
|
||||
<span>{scan.fileCount} {scan.fileCount === 1 ? "Datei" : "Dateien"}</span>
|
||||
{scan.aiUsed && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span className="text-purple-600 dark:text-purple-400">KI</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 self-end sm:self-auto w-full sm:w-auto mt-4 sm:mt-0">
|
||||
<div className="flex flex-col items-end gap-1 flex-1 sm:flex-auto">
|
||||
<span className="text-xs text-muted-foreground">Risiko</span>
|
||||
<span className="font-mono font-bold" style={{
|
||||
color: scan.riskScore < 30 ? "var(--emerald-500)" : scan.riskScore < 70 ? "var(--amber-500)" : "var(--rose-500)"
|
||||
}}>
|
||||
{scan.riskScore} / 100
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1 flex-1 sm:flex-auto">
|
||||
<span className="text-xs text-muted-foreground">Funde</span>
|
||||
<Badge variant="outline" className="font-mono">{scan.findingCounts.total}</Badge>
|
||||
</div>
|
||||
<ArrowRight className="w-5 h-5 text-muted-foreground hidden sm:block" />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="border-t sm:border-t-0 sm:border-l p-4 flex items-center justify-center bg-slate-50 dark:bg-slate-900/50">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="text-muted-foreground hover:text-destructive hover:bg-destructive/10">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Scan löschen?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Möchten Sie den Bericht "{scan.name || `Scan #${scan.id}`}" unwiderruflich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Abbrechen</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => handleDelete(scan.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
|
||||
Löschen
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
339
artifacts/skillguard/src/pages/scan-report.tsx
Normal file
339
artifacts/skillguard/src/pages/scan-report.tsx
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
import { useState, useMemo } from "react";
|
||||
import { useRoute } from "wouter";
|
||||
import { useGetScan, getGetScanQueryKey } from "@workspace/api-client-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { VerdictBadge, SeverityBadge, AxisBadge } from "@/components/ui-helpers";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import { ShieldQuestion, AlertTriangle, Download, FileCode, CheckCircle2, Code, Shield } from "lucide-react";
|
||||
|
||||
export default function ScanReport() {
|
||||
const [, params] = useRoute("/berichte/:id");
|
||||
const id = Number(params?.id);
|
||||
|
||||
const { data, isLoading, error } = useGetScan(id, {
|
||||
query: {
|
||||
enabled: Number.isFinite(id) && id > 0,
|
||||
queryKey: getGetScanQueryKey(id),
|
||||
},
|
||||
});
|
||||
|
||||
const [filterAxis, setFilterAxis] = useState<string>("all");
|
||||
const [filterSeverity, setFilterSeverity] = useState<string>("all");
|
||||
|
||||
const filteredFindings = useMemo(() => {
|
||||
if (!data?.findings) return [];
|
||||
return data.findings.filter(f => {
|
||||
if (filterAxis !== "all" && f.axis !== filterAxis) return false;
|
||||
if (filterSeverity !== "all" && f.severity !== filterSeverity) return false;
|
||||
return true;
|
||||
});
|
||||
}, [data?.findings, filterAxis, filterSeverity]);
|
||||
|
||||
if (isLoading || (!data && !error && Number.isFinite(id))) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Skeleton className="h-12 w-1/3" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-6 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Skeleton className="h-48 w-full md:col-span-1" />
|
||||
<Skeleton className="h-48 w-full md:col-span-2" />
|
||||
</div>
|
||||
<Skeleton className="h-96 w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !data || !Number.isFinite(id)) {
|
||||
return (
|
||||
<div className="p-8 text-center bg-destructive/10 rounded-lg text-destructive">
|
||||
<ShieldQuestion className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
||||
<h2 className="text-xl font-bold">Bericht nicht gefunden</h2>
|
||||
<p>Der angeforderte Scan-Bericht existiert nicht oder konnte nicht geladen werden.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const blob = new Blob([json], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `skillguard-bericht-${id}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 pb-12">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
|
||||
{data.name || `Scan #${data.id}`}
|
||||
<VerdictBadge verdict={data.verdict} className="text-sm px-2 py-0.5" />
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>{formatDate(data.createdAt)}</span>
|
||||
<span>·</span>
|
||||
<span className="capitalize">{data.source}</span>
|
||||
<span>·</span>
|
||||
<span>{data.fileCount} {data.fileCount === 1 ? "Datei" : "Dateien"}</span>
|
||||
{data.aiUsed && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<Badge variant="secondary" className="text-xs bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">KI-Analyse aktiv</Badge>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleExport} variant="outline" className="gap-2">
|
||||
<Download className="w-4 h-4" />
|
||||
Bericht exportieren (JSON)
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{data.aiError && (
|
||||
<Alert variant="destructive" className="bg-amber-50 text-amber-900 border-amber-200 dark:bg-amber-950/50 dark:text-amber-200 dark:border-amber-900">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertTitle>Warnung</AlertTitle>
|
||||
<AlertDescription>
|
||||
KI-Analyse nicht durchgeführt: {data.aiError}
|
||||
<br />
|
||||
Die statische Analyse wurde dennoch erfolgreich abgeschlossen.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="md:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Risiko-Score</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center justify-center py-6 gap-6">
|
||||
<div className="relative flex items-center justify-center">
|
||||
<svg className="w-32 h-32 transform -rotate-90">
|
||||
<circle cx="64" cy="64" r="56" fill="none" stroke="currentColor" strokeWidth="12" className="text-muted/20" />
|
||||
<circle
|
||||
cx="64" cy="64" r="56" fill="none" stroke="currentColor" strokeWidth="12"
|
||||
strokeDasharray="351.86"
|
||||
strokeDashoffset={351.86 - (351.86 * data.riskScore) / 100}
|
||||
className={data.riskScore < 30 ? "text-emerald-500" : data.riskScore < 70 ? "text-amber-500" : "text-rose-500"}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute flex flex-col items-center">
|
||||
<span className="text-4xl font-bold">{data.riskScore}</span>
|
||||
<span className="text-xs text-muted-foreground uppercase tracking-wider">/ 100</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
{data.riskScore < 30 ? "Geringes Risiko. Keine bedenklichen Muster gefunden." :
|
||||
data.riskScore < 70 ? "Mittleres Risiko. Einige Auffälligkeiten erfordern Prüfung." :
|
||||
"Hohes Risiko. Kritische Sicherheitsprobleme erkannt."}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="md:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Zusammenfassung</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
|
||||
<div className="flex flex-col gap-1 p-3 rounded-lg border bg-rose-50 dark:bg-rose-950/20 border-rose-100 dark:border-rose-900">
|
||||
<span className="text-xs font-medium text-rose-800 dark:text-rose-300 uppercase tracking-wider">Kritisch</span>
|
||||
<span className="text-2xl font-bold text-rose-600 dark:text-rose-400">{data.findingCounts.critical}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-3 rounded-lg border bg-orange-50 dark:bg-orange-950/20 border-orange-100 dark:border-orange-900">
|
||||
<span className="text-xs font-medium text-orange-800 dark:text-orange-300 uppercase tracking-wider">Hoch</span>
|
||||
<span className="text-2xl font-bold text-orange-600 dark:text-orange-400">{data.findingCounts.high}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-3 rounded-lg border bg-amber-50 dark:bg-amber-950/20 border-amber-100 dark:border-amber-900">
|
||||
<span className="text-xs font-medium text-amber-800 dark:text-amber-300 uppercase tracking-wider">Mittel</span>
|
||||
<span className="text-2xl font-bold text-amber-600 dark:text-amber-400">{data.findingCounts.medium}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-3 rounded-lg border bg-blue-50 dark:bg-blue-950/20 border-blue-100 dark:border-blue-900">
|
||||
<span className="text-xs font-medium text-blue-800 dark:text-blue-300 uppercase tracking-wider">Niedrig</span>
|
||||
<span className="text-2xl font-bold text-blue-600 dark:text-blue-400">{data.findingCounts.low}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-32 text-sm font-medium text-muted-foreground">IT-Sicherheit</div>
|
||||
<Progress value={(data.findingCounts.security / Math.max(1, data.findingCounts.total)) * 100} className="flex-1 h-2" />
|
||||
<div className="w-8 text-right font-mono text-sm">{data.findingCounts.security}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-32 text-sm font-medium text-muted-foreground">Datenschutz</div>
|
||||
<Progress value={(data.findingCounts.privacy / Math.max(1, data.findingCounts.total)) * 100} className="flex-1 h-2 [&>div]:bg-purple-500" />
|
||||
<div className="w-8 text-right font-mono text-sm">{data.findingCounts.privacy}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="findings" className="w-full">
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="findings" className="gap-2"><Shield className="w-4 h-4"/> Auffälligkeiten ({data.findings.length})</TabsTrigger>
|
||||
<TabsTrigger value="files" className="gap-2"><FileCode className="w-4 h-4"/> Geprüfte Dateien ({data.files.length})</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="findings" className="space-y-4">
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-between bg-card p-4 rounded-lg border">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">Bereich:</span>
|
||||
<Select value={filterAxis} onValueChange={setFilterAxis}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Alle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alle</SelectItem>
|
||||
<SelectItem value="security">IT-Sicherheit</SelectItem>
|
||||
<SelectItem value="privacy">Datenschutz</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">Schweregrad:</span>
|
||||
<Select value={filterSeverity} onValueChange={setFilterSeverity}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Alle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alle</SelectItem>
|
||||
<SelectItem value="critical">Kritisch</SelectItem>
|
||||
<SelectItem value="high">Hoch</SelectItem>
|
||||
<SelectItem value="medium">Mittel</SelectItem>
|
||||
<SelectItem value="low">Niedrig</SelectItem>
|
||||
<SelectItem value="info">Info</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredFindings.length === 0 ? (
|
||||
<div className="p-12 text-center bg-card border rounded-lg flex flex-col items-center">
|
||||
<CheckCircle2 className="w-16 h-16 text-emerald-500 mb-4 opacity-80" />
|
||||
<h3 className="text-xl font-bold mb-2">Keine Auffälligkeiten gefunden</h3>
|
||||
<p className="text-muted-foreground max-w-md mx-auto">
|
||||
{data.findings.length === 0
|
||||
? "Der analysierte Skill entspricht den Sicherheits- und Datenschutzrichtlinien. Es wurden keine Probleme erkannt."
|
||||
: "Mit den aktuellen Filtern werden keine Auffälligkeiten angezeigt."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{filteredFindings.map((finding) => (
|
||||
<Card key={finding.id} className="overflow-hidden border-l-4" style={{
|
||||
borderLeftColor:
|
||||
finding.severity === "critical" ? "hsl(var(--destructive))" :
|
||||
finding.severity === "high" ? "#f97316" :
|
||||
finding.severity === "medium" ? "#fbbf24" :
|
||||
finding.severity === "low" ? "#3b82f6" : "#94a3b8"
|
||||
}}>
|
||||
<CardHeader className="bg-slate-50/50 dark:bg-slate-900/50 pb-4">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<SeverityBadge severity={finding.severity} />
|
||||
<AxisBadge axis={finding.axis} />
|
||||
<Badge variant="outline" className="font-mono text-xs">Regel: {finding.ruleId}</Badge>
|
||||
<Badge variant="secondary" className="text-xs bg-slate-200 dark:bg-slate-800">
|
||||
{finding.detectedBy === "ai" ? "KI" : "Statisch"}
|
||||
</Badge>
|
||||
</div>
|
||||
{(finding.file || finding.line) && (
|
||||
<div className="text-sm font-mono text-muted-foreground flex items-center gap-1 bg-background px-2 py-1 rounded border">
|
||||
<Code className="w-3 h-3" />
|
||||
{finding.file || "unbekannt"}{finding.line ? `:${finding.line}` : ""}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="text-lg mt-4">{finding.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-4 space-y-4">
|
||||
<p className="text-sm">{finding.description}</p>
|
||||
|
||||
{finding.snippet && (
|
||||
<div className="bg-slate-950 rounded-md p-4 overflow-x-auto">
|
||||
<pre className="text-sm font-mono text-slate-50">
|
||||
<code>{finding.snippet}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{finding.remediation && (
|
||||
<div className="bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-100 dark:border-emerald-900 rounded-md p-4">
|
||||
<h4 className="text-sm font-semibold text-emerald-800 dark:text-emerald-300 mb-1 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" /> Empfehlung
|
||||
</h4>
|
||||
<p className="text-sm text-emerald-700 dark:text-emerald-400">{finding.remediation}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="files">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Geprüfte Dateien</CardTitle>
|
||||
<CardDescription>Liste aller vom Scanner verarbeiteten Dateien</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b bg-muted/50 text-muted-foreground">
|
||||
<th className="h-10 px-4 text-left font-medium">Pfad</th>
|
||||
<th className="h-10 px-4 text-left font-medium">Typ</th>
|
||||
<th className="h-10 px-4 text-left font-medium">Sprache</th>
|
||||
<th className="h-10 px-4 text-right font-medium">Größe</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.files.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="p-4 text-center text-muted-foreground">Keine Dateien verfügbar.</td>
|
||||
</tr>
|
||||
) : (
|
||||
data.files.map((file, i) => (
|
||||
<tr key={i} className="border-b last:border-0 hover:bg-muted/50 transition-colors">
|
||||
<td className="p-4 font-mono">{file.path}</td>
|
||||
<td className="p-4">
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{file.kind === "instruction" ? "Anweisung" : file.kind === "script" ? "Skript" : "Ressource"}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-4 text-muted-foreground capitalize">{file.language || "-"}</td>
|
||||
<td className="p-4 text-right font-mono">{file.size} B</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
24
artifacts/skillguard/tsconfig.json
Normal file
24
artifacts/skillguard/tsconfig.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "build", "dist", "**/*.test.ts"],
|
||||
"compilerOptions": {
|
||||
"incremental": true,
|
||||
"tsBuildInfoFile": ".tsbuildinfo",
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"lib": ["esnext", "dom", "dom.iterable"],
|
||||
"resolveJsonModule": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"moduleResolution": "bundler",
|
||||
"types": ["node", "vite/client"],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../../lib/api-client-react"
|
||||
}
|
||||
]
|
||||
}
|
||||
75
artifacts/skillguard/vite.config.ts
Normal file
75
artifacts/skillguard/vite.config.ts
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import path from "path";
|
||||
import runtimeErrorOverlay from "@replit/vite-plugin-runtime-error-modal";
|
||||
|
||||
const rawPort = process.env.PORT;
|
||||
|
||||
if (!rawPort) {
|
||||
throw new Error(
|
||||
"PORT environment variable is required but was not provided.",
|
||||
);
|
||||
}
|
||||
|
||||
const port = Number(rawPort);
|
||||
|
||||
if (Number.isNaN(port) || port <= 0) {
|
||||
throw new Error(`Invalid PORT value: "${rawPort}"`);
|
||||
}
|
||||
|
||||
const basePath = process.env.BASE_PATH;
|
||||
|
||||
if (!basePath) {
|
||||
throw new Error(
|
||||
"BASE_PATH environment variable is required but was not provided.",
|
||||
);
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
base: basePath,
|
||||
plugins: [
|
||||
react(),
|
||||
tailwindcss(),
|
||||
runtimeErrorOverlay(),
|
||||
...(process.env.NODE_ENV !== "production" &&
|
||||
process.env.REPL_ID !== undefined
|
||||
? [
|
||||
await import("@replit/vite-plugin-cartographer").then((m) =>
|
||||
m.cartographer({
|
||||
root: path.resolve(import.meta.dirname, ".."),
|
||||
}),
|
||||
),
|
||||
await import("@replit/vite-plugin-dev-banner").then((m) =>
|
||||
m.devBanner(),
|
||||
),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(import.meta.dirname, "src"),
|
||||
"@assets": path.resolve(import.meta.dirname, "..", "..", "attached_assets"),
|
||||
},
|
||||
dedupe: ["react", "react-dom"],
|
||||
},
|
||||
root: path.resolve(import.meta.dirname),
|
||||
build: {
|
||||
outDir: path.resolve(import.meta.dirname, "dist/public"),
|
||||
emptyOutDir: true,
|
||||
},
|
||||
server: {
|
||||
port,
|
||||
strictPort: true,
|
||||
host: "0.0.0.0",
|
||||
allowedHosts: true,
|
||||
fs: {
|
||||
strict: true,
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
port,
|
||||
host: "0.0.0.0",
|
||||
allowedHosts: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Generated by orval v8.5.3 🍺
|
||||
* Generated by orval v8.9.1 🍺
|
||||
* Do not edit manually.
|
||||
* Api
|
||||
* API specification
|
||||
|
|
@ -8,3 +8,348 @@
|
|||
export interface HealthStatus {
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
error: string;
|
||||
}
|
||||
|
||||
export type SkillScanInputSource = typeof SkillScanInputSource[keyof typeof SkillScanInputSource];
|
||||
|
||||
|
||||
export const SkillScanInputSource = {
|
||||
zip: 'zip',
|
||||
file: 'file',
|
||||
text: 'text',
|
||||
} as const;
|
||||
|
||||
export interface SkillScanInput {
|
||||
/**
|
||||
* Optional display name for the scan
|
||||
* @nullable
|
||||
*/
|
||||
name?: string | null;
|
||||
source: SkillScanInputSource;
|
||||
/** Whether to also run the configured AI analysis */
|
||||
useAi: boolean;
|
||||
/**
|
||||
* Base64 content for source=zip or source=file
|
||||
* @nullable
|
||||
*/
|
||||
contentBase64?: string | null;
|
||||
/**
|
||||
* Original filename for source=file or source=zip
|
||||
* @nullable
|
||||
*/
|
||||
filename?: string | null;
|
||||
/**
|
||||
* Raw skill text for source=text
|
||||
* @nullable
|
||||
*/
|
||||
text?: string | null;
|
||||
}
|
||||
|
||||
export type ScanSource = typeof ScanSource[keyof typeof ScanSource];
|
||||
|
||||
|
||||
export const ScanSource = {
|
||||
zip: 'zip',
|
||||
file: 'file',
|
||||
text: 'text',
|
||||
} as const;
|
||||
|
||||
export type ScanStatus = typeof ScanStatus[keyof typeof ScanStatus];
|
||||
|
||||
|
||||
export const ScanStatus = {
|
||||
completed: 'completed',
|
||||
failed: 'failed',
|
||||
} as const;
|
||||
|
||||
export type ScanVerdict = typeof ScanVerdict[keyof typeof ScanVerdict];
|
||||
|
||||
|
||||
export const ScanVerdict = {
|
||||
pass: 'pass',
|
||||
review: 'review',
|
||||
block: 'block',
|
||||
} as const;
|
||||
|
||||
export interface FindingCounts {
|
||||
critical: number;
|
||||
high: number;
|
||||
medium: number;
|
||||
low: number;
|
||||
info: number;
|
||||
security: number;
|
||||
privacy: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface Scan {
|
||||
id: number;
|
||||
name: string;
|
||||
source: ScanSource;
|
||||
status: ScanStatus;
|
||||
verdict: ScanVerdict;
|
||||
riskScore: number;
|
||||
fileCount: number;
|
||||
aiUsed: boolean;
|
||||
/** @nullable */
|
||||
aiError?: string | null;
|
||||
findingCounts: FindingCounts;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export type ScanFileKind = typeof ScanFileKind[keyof typeof ScanFileKind];
|
||||
|
||||
|
||||
export const ScanFileKind = {
|
||||
instruction: 'instruction',
|
||||
script: 'script',
|
||||
resource: 'resource',
|
||||
} as const;
|
||||
|
||||
export interface ScanFile {
|
||||
path: string;
|
||||
kind: ScanFileKind;
|
||||
/** @nullable */
|
||||
language?: string | null;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export type FindingAxis = typeof FindingAxis[keyof typeof FindingAxis];
|
||||
|
||||
|
||||
export const FindingAxis = {
|
||||
security: 'security',
|
||||
privacy: 'privacy',
|
||||
} as const;
|
||||
|
||||
export type FindingSeverity = typeof FindingSeverity[keyof typeof FindingSeverity];
|
||||
|
||||
|
||||
export const FindingSeverity = {
|
||||
critical: 'critical',
|
||||
high: 'high',
|
||||
medium: 'medium',
|
||||
low: 'low',
|
||||
info: 'info',
|
||||
} as const;
|
||||
|
||||
export type FindingDetectedBy = typeof FindingDetectedBy[keyof typeof FindingDetectedBy];
|
||||
|
||||
|
||||
export const FindingDetectedBy = {
|
||||
static: 'static',
|
||||
ai: 'ai',
|
||||
} as const;
|
||||
|
||||
export interface Finding {
|
||||
id: number;
|
||||
ruleId: string;
|
||||
axis: FindingAxis;
|
||||
severity: FindingSeverity;
|
||||
title: string;
|
||||
description: string;
|
||||
/** @nullable */
|
||||
remediation?: string | null;
|
||||
/** @nullable */
|
||||
file?: string | null;
|
||||
/** @nullable */
|
||||
line?: number | null;
|
||||
/** @nullable */
|
||||
snippet?: string | null;
|
||||
detectedBy: FindingDetectedBy;
|
||||
}
|
||||
|
||||
export type ScanDetail = Scan & {
|
||||
files: ScanFile[];
|
||||
findings: Finding[];
|
||||
};
|
||||
|
||||
export type AiProviderApiType = typeof AiProviderApiType[keyof typeof AiProviderApiType];
|
||||
|
||||
|
||||
export const AiProviderApiType = {
|
||||
openai: 'openai',
|
||||
anthropic: 'anthropic',
|
||||
custom: 'custom',
|
||||
} as const;
|
||||
|
||||
export interface AiProvider {
|
||||
id: number;
|
||||
name: string;
|
||||
apiType: AiProviderApiType;
|
||||
baseUrl: string;
|
||||
model: string;
|
||||
enabled: boolean;
|
||||
hasToken: boolean;
|
||||
/** Masked preview of the stored token (e.g. "sk-...abcd") */
|
||||
tokenPreview: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export type AiProviderInputApiType = typeof AiProviderInputApiType[keyof typeof AiProviderInputApiType];
|
||||
|
||||
|
||||
export const AiProviderInputApiType = {
|
||||
openai: 'openai',
|
||||
anthropic: 'anthropic',
|
||||
custom: 'custom',
|
||||
} as const;
|
||||
|
||||
export interface AiProviderInput {
|
||||
/** @minLength 1 */
|
||||
name: string;
|
||||
apiType: AiProviderInputApiType;
|
||||
/** @minLength 1 */
|
||||
baseUrl: string;
|
||||
/** @minLength 1 */
|
||||
model: string;
|
||||
apiToken?: string;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
export type AiProviderUpdateApiType = typeof AiProviderUpdateApiType[keyof typeof AiProviderUpdateApiType];
|
||||
|
||||
|
||||
export const AiProviderUpdateApiType = {
|
||||
openai: 'openai',
|
||||
anthropic: 'anthropic',
|
||||
custom: 'custom',
|
||||
} as const;
|
||||
|
||||
export interface AiProviderUpdate {
|
||||
/** @minLength 1 */
|
||||
name?: string;
|
||||
apiType?: AiProviderUpdateApiType;
|
||||
/** @minLength 1 */
|
||||
baseUrl?: string;
|
||||
/** @minLength 1 */
|
||||
model?: string;
|
||||
/** Provide to replace the stored token; omit to keep existing */
|
||||
apiToken?: string;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
export interface ProviderTestResult {
|
||||
ok: boolean;
|
||||
/** @nullable */
|
||||
message?: string | null;
|
||||
}
|
||||
|
||||
export interface Prompt {
|
||||
id: number;
|
||||
key: string;
|
||||
name: string;
|
||||
content: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface PromptUpdate {
|
||||
/** @minLength 1 */
|
||||
name?: string;
|
||||
/** @minLength 1 */
|
||||
content?: string;
|
||||
}
|
||||
|
||||
export type RuleAxis = typeof RuleAxis[keyof typeof RuleAxis];
|
||||
|
||||
|
||||
export const RuleAxis = {
|
||||
security: 'security',
|
||||
privacy: 'privacy',
|
||||
} as const;
|
||||
|
||||
export type RuleSeverity = typeof RuleSeverity[keyof typeof RuleSeverity];
|
||||
|
||||
|
||||
export const RuleSeverity = {
|
||||
critical: 'critical',
|
||||
high: 'high',
|
||||
medium: 'medium',
|
||||
low: 'low',
|
||||
info: 'info',
|
||||
} as const;
|
||||
|
||||
export type RuleDetectionType = typeof RuleDetectionType[keyof typeof RuleDetectionType];
|
||||
|
||||
|
||||
export const RuleDetectionType = {
|
||||
regex: 'regex',
|
||||
heuristic: 'heuristic',
|
||||
ai: 'ai',
|
||||
} as const;
|
||||
|
||||
export interface Rule {
|
||||
id: number;
|
||||
ruleId: string;
|
||||
axis: RuleAxis;
|
||||
category: string;
|
||||
title: string;
|
||||
description: string;
|
||||
severity: RuleSeverity;
|
||||
detectionType: RuleDetectionType;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export type RuleUpdateSeverity = typeof RuleUpdateSeverity[keyof typeof RuleUpdateSeverity];
|
||||
|
||||
|
||||
export const RuleUpdateSeverity = {
|
||||
critical: 'critical',
|
||||
high: 'high',
|
||||
medium: 'medium',
|
||||
low: 'low',
|
||||
info: 'info',
|
||||
} as const;
|
||||
|
||||
export interface RuleUpdate {
|
||||
severity?: RuleUpdateSeverity;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
export interface VerdictCounts {
|
||||
pass: number;
|
||||
review: number;
|
||||
block: number;
|
||||
}
|
||||
|
||||
export interface SeverityTotals {
|
||||
critical: number;
|
||||
high: number;
|
||||
medium: number;
|
||||
low: number;
|
||||
info: number;
|
||||
}
|
||||
|
||||
export interface AxisTotals {
|
||||
security: number;
|
||||
privacy: number;
|
||||
}
|
||||
|
||||
export type RuleStatAxis = typeof RuleStatAxis[keyof typeof RuleStatAxis];
|
||||
|
||||
|
||||
export const RuleStatAxis = {
|
||||
security: 'security',
|
||||
privacy: 'privacy',
|
||||
} as const;
|
||||
|
||||
export interface RuleStat {
|
||||
ruleId: string;
|
||||
title: string;
|
||||
axis: RuleStatAxis;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface DashboardSummary {
|
||||
totalScans: number;
|
||||
avgRiskScore: number;
|
||||
verdictCounts: VerdictCounts;
|
||||
severityTotals: SeverityTotals;
|
||||
axisTotals: AxisTotals;
|
||||
recentScans: Scan[];
|
||||
topRules: RuleStat[];
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -10,6 +10,16 @@ servers:
|
|||
tags:
|
||||
- name: health
|
||||
description: Health operations
|
||||
- name: scans
|
||||
description: Skill scans and audit reports
|
||||
- name: providers
|
||||
description: Configurable external AI providers
|
||||
- name: prompts
|
||||
description: Configurable AI analysis prompts
|
||||
- name: rules
|
||||
description: Static rule catalog configuration
|
||||
- name: dashboard
|
||||
description: Dashboard summaries
|
||||
paths:
|
||||
/healthz:
|
||||
get:
|
||||
|
|
@ -24,6 +34,270 @@ paths:
|
|||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/HealthStatus"
|
||||
|
||||
/dashboard:
|
||||
get:
|
||||
operationId: getDashboard
|
||||
tags: [dashboard]
|
||||
summary: Dashboard summary
|
||||
description: Aggregated statistics across all scans.
|
||||
responses:
|
||||
"200":
|
||||
description: Dashboard summary
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/DashboardSummary"
|
||||
|
||||
/scans:
|
||||
get:
|
||||
operationId: listScans
|
||||
tags: [scans]
|
||||
summary: List scan history
|
||||
responses:
|
||||
"200":
|
||||
description: List of scans (most recent first)
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/Scan"
|
||||
post:
|
||||
operationId: createScan
|
||||
tags: [scans]
|
||||
summary: Upload a skill and run an audit
|
||||
description: >-
|
||||
Accepts a skill as a base64 ZIP archive, a single base64 file, or pasted
|
||||
text, runs the static rule engine and (optionally) the configured AI
|
||||
analysis, and returns the completed report.
|
||||
requestBody:
|
||||
required: true
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/SkillScanInput"
|
||||
responses:
|
||||
"201":
|
||||
description: Completed scan report
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/ScanDetail"
|
||||
"400":
|
||||
description: Invalid input
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/ApiError"
|
||||
|
||||
/scans/{id}:
|
||||
get:
|
||||
operationId: getScan
|
||||
tags: [scans]
|
||||
summary: Get a scan report with findings
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
responses:
|
||||
"200":
|
||||
description: Scan report
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/ScanDetail"
|
||||
"404":
|
||||
description: Not found
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/ApiError"
|
||||
delete:
|
||||
operationId: deleteScan
|
||||
tags: [scans]
|
||||
summary: Delete a scan report
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
responses:
|
||||
"204":
|
||||
description: Deleted
|
||||
|
||||
/providers:
|
||||
get:
|
||||
operationId: listProviders
|
||||
tags: [providers]
|
||||
summary: List configured AI providers
|
||||
responses:
|
||||
"200":
|
||||
description: List of providers (tokens masked)
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/AiProvider"
|
||||
post:
|
||||
operationId: createProvider
|
||||
tags: [providers]
|
||||
summary: Create an AI provider
|
||||
requestBody:
|
||||
required: true
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/AiProviderInput"
|
||||
responses:
|
||||
"201":
|
||||
description: Created provider
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/AiProvider"
|
||||
|
||||
/providers/{id}:
|
||||
patch:
|
||||
operationId: updateProvider
|
||||
tags: [providers]
|
||||
summary: Update an AI provider
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
requestBody:
|
||||
required: true
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/AiProviderUpdate"
|
||||
responses:
|
||||
"200":
|
||||
description: Updated provider
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/AiProvider"
|
||||
delete:
|
||||
operationId: deleteProvider
|
||||
tags: [providers]
|
||||
summary: Delete an AI provider
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
responses:
|
||||
"204":
|
||||
description: Deleted
|
||||
|
||||
/providers/{id}/test:
|
||||
post:
|
||||
operationId: testProvider
|
||||
tags: [providers]
|
||||
summary: Test the connection to an AI provider
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
responses:
|
||||
"200":
|
||||
description: Test result
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/ProviderTestResult"
|
||||
|
||||
/prompts:
|
||||
get:
|
||||
operationId: listPrompts
|
||||
tags: [prompts]
|
||||
summary: List configurable AI prompts
|
||||
responses:
|
||||
"200":
|
||||
description: List of prompts
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/Prompt"
|
||||
|
||||
/prompts/{id}:
|
||||
patch:
|
||||
operationId: updatePrompt
|
||||
tags: [prompts]
|
||||
summary: Update an AI prompt
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
requestBody:
|
||||
required: true
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/PromptUpdate"
|
||||
responses:
|
||||
"200":
|
||||
description: Updated prompt
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/Prompt"
|
||||
|
||||
/rules:
|
||||
get:
|
||||
operationId: listRules
|
||||
tags: [rules]
|
||||
summary: List the static rule catalog
|
||||
responses:
|
||||
"200":
|
||||
description: List of rules
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/Rule"
|
||||
|
||||
/rules/{id}:
|
||||
patch:
|
||||
operationId: updateRule
|
||||
tags: [rules]
|
||||
summary: Update a rule's severity or enabled state
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
requestBody:
|
||||
required: true
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/RuleUpdate"
|
||||
responses:
|
||||
"200":
|
||||
description: Updated rule
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/Rule"
|
||||
|
||||
components:
|
||||
schemas:
|
||||
HealthStatus:
|
||||
|
|
@ -34,3 +308,392 @@ components:
|
|||
required:
|
||||
- status
|
||||
|
||||
ApiError:
|
||||
type: object
|
||||
required: [error]
|
||||
properties:
|
||||
error:
|
||||
type: string
|
||||
|
||||
SkillScanInput:
|
||||
type: object
|
||||
required: [source, useAi]
|
||||
properties:
|
||||
name:
|
||||
type: ["string", "null"]
|
||||
description: Optional display name for the scan
|
||||
source:
|
||||
type: string
|
||||
enum: [zip, file, text]
|
||||
useAi:
|
||||
type: boolean
|
||||
description: Whether to also run the configured AI analysis
|
||||
contentBase64:
|
||||
type: ["string", "null"]
|
||||
description: Base64 content for source=zip or source=file
|
||||
filename:
|
||||
type: ["string", "null"]
|
||||
description: Original filename for source=file or source=zip
|
||||
text:
|
||||
type: ["string", "null"]
|
||||
description: Raw skill text for source=text
|
||||
|
||||
Scan:
|
||||
type: object
|
||||
required:
|
||||
- id
|
||||
- name
|
||||
- source
|
||||
- status
|
||||
- verdict
|
||||
- riskScore
|
||||
- fileCount
|
||||
- aiUsed
|
||||
- findingCounts
|
||||
- createdAt
|
||||
properties:
|
||||
id:
|
||||
type: integer
|
||||
name:
|
||||
type: string
|
||||
source:
|
||||
type: string
|
||||
enum: [zip, file, text]
|
||||
status:
|
||||
type: string
|
||||
enum: [completed, failed]
|
||||
verdict:
|
||||
type: string
|
||||
enum: [pass, review, block]
|
||||
riskScore:
|
||||
type: integer
|
||||
fileCount:
|
||||
type: integer
|
||||
aiUsed:
|
||||
type: boolean
|
||||
aiError:
|
||||
type: ["string", "null"]
|
||||
findingCounts:
|
||||
$ref: "#/components/schemas/FindingCounts"
|
||||
createdAt:
|
||||
type: string
|
||||
|
||||
FindingCounts:
|
||||
type: object
|
||||
required: [critical, high, medium, low, info, security, privacy, total]
|
||||
properties:
|
||||
critical:
|
||||
type: integer
|
||||
high:
|
||||
type: integer
|
||||
medium:
|
||||
type: integer
|
||||
low:
|
||||
type: integer
|
||||
info:
|
||||
type: integer
|
||||
security:
|
||||
type: integer
|
||||
privacy:
|
||||
type: integer
|
||||
total:
|
||||
type: integer
|
||||
|
||||
ScanFile:
|
||||
type: object
|
||||
required: [path, kind, size]
|
||||
properties:
|
||||
path:
|
||||
type: string
|
||||
kind:
|
||||
type: string
|
||||
enum: [instruction, script, resource]
|
||||
language:
|
||||
type: ["string", "null"]
|
||||
size:
|
||||
type: integer
|
||||
|
||||
Finding:
|
||||
type: object
|
||||
required:
|
||||
- id
|
||||
- ruleId
|
||||
- axis
|
||||
- severity
|
||||
- title
|
||||
- description
|
||||
- detectedBy
|
||||
properties:
|
||||
id:
|
||||
type: integer
|
||||
ruleId:
|
||||
type: string
|
||||
axis:
|
||||
type: string
|
||||
enum: [security, privacy]
|
||||
severity:
|
||||
type: string
|
||||
enum: [critical, high, medium, low, info]
|
||||
title:
|
||||
type: string
|
||||
description:
|
||||
type: string
|
||||
remediation:
|
||||
type: ["string", "null"]
|
||||
file:
|
||||
type: ["string", "null"]
|
||||
line:
|
||||
type: ["integer", "null"]
|
||||
snippet:
|
||||
type: ["string", "null"]
|
||||
detectedBy:
|
||||
type: string
|
||||
enum: [static, ai]
|
||||
|
||||
ScanDetail:
|
||||
allOf:
|
||||
- $ref: "#/components/schemas/Scan"
|
||||
- type: object
|
||||
required: [files, findings]
|
||||
properties:
|
||||
files:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/ScanFile"
|
||||
findings:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/Finding"
|
||||
|
||||
AiProvider:
|
||||
type: object
|
||||
required:
|
||||
- id
|
||||
- name
|
||||
- apiType
|
||||
- baseUrl
|
||||
- model
|
||||
- enabled
|
||||
- hasToken
|
||||
- tokenPreview
|
||||
- createdAt
|
||||
properties:
|
||||
id:
|
||||
type: integer
|
||||
name:
|
||||
type: string
|
||||
apiType:
|
||||
type: string
|
||||
enum: [openai, anthropic, custom]
|
||||
baseUrl:
|
||||
type: string
|
||||
model:
|
||||
type: string
|
||||
enabled:
|
||||
type: boolean
|
||||
hasToken:
|
||||
type: boolean
|
||||
tokenPreview:
|
||||
type: string
|
||||
description: Masked preview of the stored token (e.g. "sk-...abcd")
|
||||
createdAt:
|
||||
type: string
|
||||
|
||||
AiProviderInput:
|
||||
type: object
|
||||
required: [name, apiType, baseUrl, model]
|
||||
properties:
|
||||
name:
|
||||
type: string
|
||||
minLength: 1
|
||||
apiType:
|
||||
type: string
|
||||
enum: [openai, anthropic, custom]
|
||||
baseUrl:
|
||||
type: string
|
||||
minLength: 1
|
||||
model:
|
||||
type: string
|
||||
minLength: 1
|
||||
apiToken:
|
||||
type: string
|
||||
enabled:
|
||||
type: boolean
|
||||
|
||||
AiProviderUpdate:
|
||||
type: object
|
||||
properties:
|
||||
name:
|
||||
type: string
|
||||
minLength: 1
|
||||
apiType:
|
||||
type: string
|
||||
enum: [openai, anthropic, custom]
|
||||
baseUrl:
|
||||
type: string
|
||||
minLength: 1
|
||||
model:
|
||||
type: string
|
||||
minLength: 1
|
||||
apiToken:
|
||||
type: string
|
||||
description: Provide to replace the stored token; omit to keep existing
|
||||
enabled:
|
||||
type: boolean
|
||||
|
||||
ProviderTestResult:
|
||||
type: object
|
||||
required: [ok]
|
||||
properties:
|
||||
ok:
|
||||
type: boolean
|
||||
message:
|
||||
type: ["string", "null"]
|
||||
|
||||
Prompt:
|
||||
type: object
|
||||
required: [id, key, name, content, updatedAt]
|
||||
properties:
|
||||
id:
|
||||
type: integer
|
||||
key:
|
||||
type: string
|
||||
name:
|
||||
type: string
|
||||
content:
|
||||
type: string
|
||||
updatedAt:
|
||||
type: string
|
||||
|
||||
PromptUpdate:
|
||||
type: object
|
||||
properties:
|
||||
name:
|
||||
type: string
|
||||
minLength: 1
|
||||
content:
|
||||
type: string
|
||||
minLength: 1
|
||||
|
||||
Rule:
|
||||
type: object
|
||||
required:
|
||||
- id
|
||||
- ruleId
|
||||
- axis
|
||||
- category
|
||||
- title
|
||||
- description
|
||||
- severity
|
||||
- detectionType
|
||||
- enabled
|
||||
properties:
|
||||
id:
|
||||
type: integer
|
||||
ruleId:
|
||||
type: string
|
||||
axis:
|
||||
type: string
|
||||
enum: [security, privacy]
|
||||
category:
|
||||
type: string
|
||||
title:
|
||||
type: string
|
||||
description:
|
||||
type: string
|
||||
severity:
|
||||
type: string
|
||||
enum: [critical, high, medium, low, info]
|
||||
detectionType:
|
||||
type: string
|
||||
enum: [regex, heuristic, ai]
|
||||
enabled:
|
||||
type: boolean
|
||||
|
||||
RuleUpdate:
|
||||
type: object
|
||||
properties:
|
||||
severity:
|
||||
type: string
|
||||
enum: [critical, high, medium, low, info]
|
||||
enabled:
|
||||
type: boolean
|
||||
|
||||
DashboardSummary:
|
||||
type: object
|
||||
required:
|
||||
- totalScans
|
||||
- avgRiskScore
|
||||
- verdictCounts
|
||||
- severityTotals
|
||||
- axisTotals
|
||||
- recentScans
|
||||
- topRules
|
||||
properties:
|
||||
totalScans:
|
||||
type: integer
|
||||
avgRiskScore:
|
||||
type: integer
|
||||
verdictCounts:
|
||||
$ref: "#/components/schemas/VerdictCounts"
|
||||
severityTotals:
|
||||
$ref: "#/components/schemas/SeverityTotals"
|
||||
axisTotals:
|
||||
$ref: "#/components/schemas/AxisTotals"
|
||||
recentScans:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/Scan"
|
||||
topRules:
|
||||
type: array
|
||||
items:
|
||||
$ref: "#/components/schemas/RuleStat"
|
||||
|
||||
VerdictCounts:
|
||||
type: object
|
||||
required: [pass, review, block]
|
||||
properties:
|
||||
pass:
|
||||
type: integer
|
||||
review:
|
||||
type: integer
|
||||
block:
|
||||
type: integer
|
||||
|
||||
SeverityTotals:
|
||||
type: object
|
||||
required: [critical, high, medium, low, info]
|
||||
properties:
|
||||
critical:
|
||||
type: integer
|
||||
high:
|
||||
type: integer
|
||||
medium:
|
||||
type: integer
|
||||
low:
|
||||
type: integer
|
||||
info:
|
||||
type: integer
|
||||
|
||||
AxisTotals:
|
||||
type: object
|
||||
required: [security, privacy]
|
||||
properties:
|
||||
security:
|
||||
type: integer
|
||||
privacy:
|
||||
type: integer
|
||||
|
||||
RuleStat:
|
||||
type: object
|
||||
required: [ruleId, title, axis, count]
|
||||
properties:
|
||||
ruleId:
|
||||
type: string
|
||||
title:
|
||||
type: string
|
||||
axis:
|
||||
type: string
|
||||
enum: [security, privacy]
|
||||
count:
|
||||
type: integer
|
||||
|
|
|
|||
|
|
@ -1,16 +1,344 @@
|
|||
/**
|
||||
* Generated by orval v8.5.3 🍺
|
||||
* Generated by orval v8.9.1 🍺
|
||||
* Do not edit manually.
|
||||
* Api
|
||||
* API specification
|
||||
* OpenAPI spec version: 0.1.0
|
||||
*/
|
||||
import * as zod from "zod";
|
||||
import * as zod from 'zod';
|
||||
|
||||
|
||||
/**
|
||||
* Returns server health status
|
||||
* @summary Health check
|
||||
*/
|
||||
export const HealthCheckResponse = zod.object({
|
||||
status: zod.string(),
|
||||
});
|
||||
"status": zod.string()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* Aggregated statistics across all scans.
|
||||
* @summary Dashboard summary
|
||||
*/
|
||||
export const GetDashboardResponse = zod.object({
|
||||
"totalScans": zod.number(),
|
||||
"avgRiskScore": zod.number(),
|
||||
"verdictCounts": zod.object({
|
||||
"pass": zod.number(),
|
||||
"review": zod.number(),
|
||||
"block": zod.number()
|
||||
}),
|
||||
"severityTotals": zod.object({
|
||||
"critical": zod.number(),
|
||||
"high": zod.number(),
|
||||
"medium": zod.number(),
|
||||
"low": zod.number(),
|
||||
"info": zod.number()
|
||||
}),
|
||||
"axisTotals": zod.object({
|
||||
"security": zod.number(),
|
||||
"privacy": zod.number()
|
||||
}),
|
||||
"recentScans": zod.array(zod.object({
|
||||
"id": zod.number(),
|
||||
"name": zod.string(),
|
||||
"source": zod.enum(['zip', 'file', 'text']),
|
||||
"status": zod.enum(['completed', 'failed']),
|
||||
"verdict": zod.enum(['pass', 'review', 'block']),
|
||||
"riskScore": zod.number(),
|
||||
"fileCount": zod.number(),
|
||||
"aiUsed": zod.boolean(),
|
||||
"aiError": zod.string().nullish(),
|
||||
"findingCounts": zod.object({
|
||||
"critical": zod.number(),
|
||||
"high": zod.number(),
|
||||
"medium": zod.number(),
|
||||
"low": zod.number(),
|
||||
"info": zod.number(),
|
||||
"security": zod.number(),
|
||||
"privacy": zod.number(),
|
||||
"total": zod.number()
|
||||
}),
|
||||
"createdAt": zod.string()
|
||||
})),
|
||||
"topRules": zod.array(zod.object({
|
||||
"ruleId": zod.string(),
|
||||
"title": zod.string(),
|
||||
"axis": zod.enum(['security', 'privacy']),
|
||||
"count": zod.number()
|
||||
}))
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary List scan history
|
||||
*/
|
||||
export const ListScansResponseItem = zod.object({
|
||||
"id": zod.number(),
|
||||
"name": zod.string(),
|
||||
"source": zod.enum(['zip', 'file', 'text']),
|
||||
"status": zod.enum(['completed', 'failed']),
|
||||
"verdict": zod.enum(['pass', 'review', 'block']),
|
||||
"riskScore": zod.number(),
|
||||
"fileCount": zod.number(),
|
||||
"aiUsed": zod.boolean(),
|
||||
"aiError": zod.string().nullish(),
|
||||
"findingCounts": zod.object({
|
||||
"critical": zod.number(),
|
||||
"high": zod.number(),
|
||||
"medium": zod.number(),
|
||||
"low": zod.number(),
|
||||
"info": zod.number(),
|
||||
"security": zod.number(),
|
||||
"privacy": zod.number(),
|
||||
"total": zod.number()
|
||||
}),
|
||||
"createdAt": zod.string()
|
||||
})
|
||||
export const ListScansResponse = zod.array(ListScansResponseItem)
|
||||
|
||||
|
||||
/**
|
||||
* Accepts a skill as a base64 ZIP archive, a single base64 file, or pasted text, runs the static rule engine and (optionally) the configured AI analysis, and returns the completed report.
|
||||
* @summary Upload a skill and run an audit
|
||||
*/
|
||||
export const CreateScanBody = zod.object({
|
||||
"name": zod.string().nullish().describe('Optional display name for the scan'),
|
||||
"source": zod.enum(['zip', 'file', 'text']),
|
||||
"useAi": zod.boolean().describe('Whether to also run the configured AI analysis'),
|
||||
"contentBase64": zod.string().nullish().describe('Base64 content for source=zip or source=file'),
|
||||
"filename": zod.string().nullish().describe('Original filename for source=file or source=zip'),
|
||||
"text": zod.string().nullish().describe('Raw skill text for source=text')
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary Get a scan report with findings
|
||||
*/
|
||||
export const GetScanParams = zod.object({
|
||||
"id": zod.coerce.number()
|
||||
})
|
||||
|
||||
export const GetScanResponse = zod.object({
|
||||
"id": zod.number(),
|
||||
"name": zod.string(),
|
||||
"source": zod.enum(['zip', 'file', 'text']),
|
||||
"status": zod.enum(['completed', 'failed']),
|
||||
"verdict": zod.enum(['pass', 'review', 'block']),
|
||||
"riskScore": zod.number(),
|
||||
"fileCount": zod.number(),
|
||||
"aiUsed": zod.boolean(),
|
||||
"aiError": zod.string().nullish(),
|
||||
"findingCounts": zod.object({
|
||||
"critical": zod.number(),
|
||||
"high": zod.number(),
|
||||
"medium": zod.number(),
|
||||
"low": zod.number(),
|
||||
"info": zod.number(),
|
||||
"security": zod.number(),
|
||||
"privacy": zod.number(),
|
||||
"total": zod.number()
|
||||
}),
|
||||
"createdAt": zod.string()
|
||||
}).and(zod.object({
|
||||
"files": zod.array(zod.object({
|
||||
"path": zod.string(),
|
||||
"kind": zod.enum(['instruction', 'script', 'resource']),
|
||||
"language": zod.string().nullish(),
|
||||
"size": zod.number()
|
||||
})),
|
||||
"findings": zod.array(zod.object({
|
||||
"id": zod.number(),
|
||||
"ruleId": zod.string(),
|
||||
"axis": zod.enum(['security', 'privacy']),
|
||||
"severity": zod.enum(['critical', 'high', 'medium', 'low', 'info']),
|
||||
"title": zod.string(),
|
||||
"description": zod.string(),
|
||||
"remediation": zod.string().nullish(),
|
||||
"file": zod.string().nullish(),
|
||||
"line": zod.number().nullish(),
|
||||
"snippet": zod.string().nullish(),
|
||||
"detectedBy": zod.enum(['static', 'ai'])
|
||||
}))
|
||||
}))
|
||||
|
||||
|
||||
/**
|
||||
* @summary Delete a scan report
|
||||
*/
|
||||
export const DeleteScanParams = zod.object({
|
||||
"id": zod.coerce.number()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary List configured AI providers
|
||||
*/
|
||||
export const ListProvidersResponseItem = zod.object({
|
||||
"id": zod.number(),
|
||||
"name": zod.string(),
|
||||
"apiType": zod.enum(['openai', 'anthropic', 'custom']),
|
||||
"baseUrl": zod.string(),
|
||||
"model": zod.string(),
|
||||
"enabled": zod.boolean(),
|
||||
"hasToken": zod.boolean(),
|
||||
"tokenPreview": zod.string().describe('Masked preview of the stored token (e.g. \"sk-...abcd\")'),
|
||||
"createdAt": zod.string()
|
||||
})
|
||||
export const ListProvidersResponse = zod.array(ListProvidersResponseItem)
|
||||
|
||||
|
||||
/**
|
||||
* @summary Create an AI provider
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const CreateProviderBody = zod.object({
|
||||
"name": zod.string().min(1),
|
||||
"apiType": zod.enum(['openai', 'anthropic', 'custom']),
|
||||
"baseUrl": zod.string().min(1),
|
||||
"model": zod.string().min(1),
|
||||
"apiToken": zod.string().optional(),
|
||||
"enabled": zod.boolean().optional()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary Update an AI provider
|
||||
*/
|
||||
export const UpdateProviderParams = zod.object({
|
||||
"id": zod.coerce.number()
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const UpdateProviderBody = zod.object({
|
||||
"name": zod.string().min(1).optional(),
|
||||
"apiType": zod.enum(['openai', 'anthropic', 'custom']).optional(),
|
||||
"baseUrl": zod.string().min(1).optional(),
|
||||
"model": zod.string().min(1).optional(),
|
||||
"apiToken": zod.string().optional().describe('Provide to replace the stored token; omit to keep existing'),
|
||||
"enabled": zod.boolean().optional()
|
||||
})
|
||||
|
||||
export const UpdateProviderResponse = zod.object({
|
||||
"id": zod.number(),
|
||||
"name": zod.string(),
|
||||
"apiType": zod.enum(['openai', 'anthropic', 'custom']),
|
||||
"baseUrl": zod.string(),
|
||||
"model": zod.string(),
|
||||
"enabled": zod.boolean(),
|
||||
"hasToken": zod.boolean(),
|
||||
"tokenPreview": zod.string().describe('Masked preview of the stored token (e.g. \"sk-...abcd\")'),
|
||||
"createdAt": zod.string()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary Delete an AI provider
|
||||
*/
|
||||
export const DeleteProviderParams = zod.object({
|
||||
"id": zod.coerce.number()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary Test the connection to an AI provider
|
||||
*/
|
||||
export const TestProviderParams = zod.object({
|
||||
"id": zod.coerce.number()
|
||||
})
|
||||
|
||||
export const TestProviderResponse = zod.object({
|
||||
"ok": zod.boolean(),
|
||||
"message": zod.string().nullish()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary List configurable AI prompts
|
||||
*/
|
||||
export const ListPromptsResponseItem = zod.object({
|
||||
"id": zod.number(),
|
||||
"key": zod.string(),
|
||||
"name": zod.string(),
|
||||
"content": zod.string(),
|
||||
"updatedAt": zod.string()
|
||||
})
|
||||
export const ListPromptsResponse = zod.array(ListPromptsResponseItem)
|
||||
|
||||
|
||||
/**
|
||||
* @summary Update an AI prompt
|
||||
*/
|
||||
export const UpdatePromptParams = zod.object({
|
||||
"id": zod.coerce.number()
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const UpdatePromptBody = zod.object({
|
||||
"name": zod.string().min(1).optional(),
|
||||
"content": zod.string().min(1).optional()
|
||||
})
|
||||
|
||||
export const UpdatePromptResponse = zod.object({
|
||||
"id": zod.number(),
|
||||
"key": zod.string(),
|
||||
"name": zod.string(),
|
||||
"content": zod.string(),
|
||||
"updatedAt": zod.string()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @summary List the static rule catalog
|
||||
*/
|
||||
export const ListRulesResponseItem = zod.object({
|
||||
"id": zod.number(),
|
||||
"ruleId": zod.string(),
|
||||
"axis": zod.enum(['security', 'privacy']),
|
||||
"category": zod.string(),
|
||||
"title": zod.string(),
|
||||
"description": zod.string(),
|
||||
"severity": zod.enum(['critical', 'high', 'medium', 'low', 'info']),
|
||||
"detectionType": zod.enum(['regex', 'heuristic', 'ai']),
|
||||
"enabled": zod.boolean()
|
||||
})
|
||||
export const ListRulesResponse = zod.array(ListRulesResponseItem)
|
||||
|
||||
|
||||
/**
|
||||
* @summary Update a rule's severity or enabled state
|
||||
*/
|
||||
export const UpdateRuleParams = zod.object({
|
||||
"id": zod.coerce.number()
|
||||
})
|
||||
|
||||
export const UpdateRuleBody = zod.object({
|
||||
"severity": zod.enum(['critical', 'high', 'medium', 'low', 'info']).optional(),
|
||||
"enabled": zod.boolean().optional()
|
||||
})
|
||||
|
||||
export const UpdateRuleResponse = zod.object({
|
||||
"id": zod.number(),
|
||||
"ruleId": zod.string(),
|
||||
"axis": zod.enum(['security', 'privacy']),
|
||||
"category": zod.string(),
|
||||
"title": zod.string(),
|
||||
"description": zod.string(),
|
||||
"severity": zod.enum(['critical', 'high', 'medium', 'low', 'info']),
|
||||
"detectionType": zod.enum(['regex', 'heuristic', 'ai']),
|
||||
"enabled": zod.boolean()
|
||||
})
|
||||
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue