feat(client): add UI kit, data layer, app shell, and Table component
- design token system (Atlantis, Kimberly, Powder Ash palette) - Button, Badge, Input, Select, Card, SidePanel, Breadcrumbs components - generic typed Table<T> component with loading/empty states - API data layer: typed fetch client for environments, keys, sessions, scenarios - Vite dev proxy targeting server on port 13000 - App shell with SidePanel nav and four entity pages (Environments, Keys, Sessions, Scenarios) - Storybook config with dark/light theme toggle and a11y addon
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { environments } from '../api';
|
||||
import type { Environment } from '../api';
|
||||
import { Table, type TableColumn } from '../ui';
|
||||
import styles from './Page.module.css';
|
||||
|
||||
const columns: TableColumn<Environment>[] = [
|
||||
{ key: 'id', header: 'ID', render: (e) => e.id, width: 60 },
|
||||
{ key: 'name', header: 'Name', render: (e) => e.name },
|
||||
{
|
||||
key: 'urls',
|
||||
header: 'URLs',
|
||||
render: (e) =>
|
||||
Object.entries(e.urls)
|
||||
.filter(([, v]) => v)
|
||||
.map(([k, v]) => `${k}: ${v}`)
|
||||
.join(' · ') || '—',
|
||||
},
|
||||
{
|
||||
key: 'updated',
|
||||
header: 'Updated',
|
||||
width: 120,
|
||||
render: (e) => new Date(e.updatedAt).toLocaleDateString(),
|
||||
},
|
||||
];
|
||||
|
||||
export function EnvironmentsPage() {
|
||||
const [items, setItems] = useState<Environment[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
environments.list()
|
||||
.then((res) => setItems(res.data))
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className={styles.heading}>Environments</h1>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
<Table
|
||||
columns={columns}
|
||||
data={items}
|
||||
rowKey={(e) => e.id}
|
||||
loading={loading}
|
||||
emptyMessage="No environments yet."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { keys } from '../api';
|
||||
import { Table, type TableColumn } from '../ui';
|
||||
import styles from './Page.module.css';
|
||||
|
||||
interface KeyRow { name: string }
|
||||
|
||||
const columns: TableColumn<KeyRow>[] = [
|
||||
{ key: 'name', header: 'Key name', render: (k) => k.name },
|
||||
];
|
||||
|
||||
export function KeysPage() {
|
||||
const [items, setItems] = useState<KeyRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
keys.list()
|
||||
.then((res) => setItems(res.keys.map((name) => ({ name }))))
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className={styles.heading}>Keys</h1>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
<Table
|
||||
columns={columns}
|
||||
data={items}
|
||||
rowKey={(k) => k.name}
|
||||
loading={loading}
|
||||
emptyMessage="No key files found."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.heading {
|
||||
margin: 0 0 var(--space-4);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-bottom: var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error-fg);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { scenarios } from '../api';
|
||||
import type { Scenario } from '../api';
|
||||
import { Button, Table, type TableColumn } from '../ui';
|
||||
import styles from './Page.module.css';
|
||||
|
||||
export function ScenariosPage() {
|
||||
const [items, setItems] = useState<Scenario[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
scenarios.list()
|
||||
.then((res) => setItems(res.data))
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(load, [load]);
|
||||
|
||||
const handleRun = async (id: number) => {
|
||||
await scenarios.run(id);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await scenarios.remove(id);
|
||||
load();
|
||||
};
|
||||
|
||||
const columns: TableColumn<Scenario>[] = [
|
||||
{ key: 'id', header: 'ID', render: (s) => s.id, width: 60 },
|
||||
{ key: 'name', header: 'Name', render: (s) => s.name },
|
||||
{
|
||||
key: 'updated',
|
||||
header: 'Updated',
|
||||
width: 120,
|
||||
render: (s) => new Date(s.updatedAt).toLocaleDateString(),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
width: 140,
|
||||
align: 'right',
|
||||
render: (s) => (
|
||||
<span style={{ display: 'inline-flex', gap: 6 }}>
|
||||
<Button size="sm" onClick={() => handleRun(s.id)}>Run</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>Delete</Button>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className={styles.heading}>Scenarios</h1>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
<Table
|
||||
columns={columns}
|
||||
data={items}
|
||||
rowKey={(s) => s.id}
|
||||
loading={loading}
|
||||
emptyMessage="No scenarios yet."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { sessions } from '../api';
|
||||
import type { Session } from '../api';
|
||||
import { Badge, Button, Table, type TableColumn } from '../ui';
|
||||
import styles from './Page.module.css';
|
||||
|
||||
export function SessionsPage() {
|
||||
const [items, setItems] = useState<Session[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
sessions.list()
|
||||
.then((res) => setItems(res.data))
|
||||
.catch((err: Error) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(load, [load]);
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await sessions.remove(id);
|
||||
load();
|
||||
};
|
||||
|
||||
const columns: TableColumn<Session>[] = [
|
||||
{ key: 'id', header: 'ID', render: (s) => s.id, width: 60 },
|
||||
{ key: 'name', header: 'Name', render: (s) => s.sessionName },
|
||||
{
|
||||
key: 'status',
|
||||
header: 'Status',
|
||||
width: 100,
|
||||
render: (s) => (
|
||||
<Badge variant={s.status === 'open' ? 'success' : 'neutral'}>
|
||||
{s.status}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'lastUsed',
|
||||
header: 'Last Used',
|
||||
width: 160,
|
||||
render: (s) => s.lastUsedAt ? new Date(s.lastUsedAt).toLocaleString() : '—',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
width: 80,
|
||||
align: 'right',
|
||||
render: (s) => (
|
||||
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
|
||||
Delete
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className={styles.heading}>Sessions</h1>
|
||||
{error && <p className={styles.error}>{error}</p>}
|
||||
<Table
|
||||
columns={columns}
|
||||
data={items}
|
||||
rowKey={(s) => s.id}
|
||||
loading={loading}
|
||||
emptyMessage="No sessions yet."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user