ars9/liqa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(client): add Timestamp component, ESLint 10 + Prettier, and code quality fixes

Browse Source 
- add Timestamp component with moment relative time and ISO tooltip
- add Timestamp stories (JustNow, MinutesAgo, HoursAgo, DaysAgo, MonthsAgo)
- add ESLint 10 with typescript-eslint, react-hooks, react-refresh, prettier
- add Prettier config with singleQuote, semi, trailingComma all, printWidth 100
- add lint, lint:fix, format, test:storybook scripts to package.json
- fix react-hooks/set-state-in-effect in all page components
- auto-fix 113 Prettier formatting issues across src and .storybook
This commit is contained in:
ars9
2026-04-09 10:25:15 +03:00
parent 50b942801f
commit 32beec2229
29 changed files with 1175 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.tsx
+7 -7
View File
@@ -11,9 +11,9 @@ import type { LucideIcon } from 'lucide-react';
const NAV: { path: string; labelKey: string; Icon: LucideIcon }[] = [
{ path: '/environments', labelKey: 'nav.environments', Icon: Globe },
{ path: '/keys', labelKey: 'nav.keys', Icon: KeyRound },
{ path: '/sessions', labelKey: 'nav.sessions', Icon: Monitor },
{ path: '/scenarios', labelKey: 'nav.scenarios', Icon: ClipboardList },
{ path: '/keys', labelKey: 'nav.keys', Icon: KeyRound },
{ path: '/sessions', labelKey: 'nav.sessions', Icon: Monitor },
{ path: '/scenarios', labelKey: 'nav.scenarios', Icon: ClipboardList },
];
export default function App() {
@@ -50,10 +50,10 @@ export default function App() {
<Routes>
<Route index element={<Navigate to="/scenarios" replace />} />
<Route path="/environments" element={<EnvironmentsPage />} />
<Route path="/keys" element={<KeysPage />} />
<Route path="/sessions" element={<SessionsPage />} />
<Route path="/scenarios" element={<ScenariosPage />} />
<Route path="*" element={<Navigate to="/scenarios" replace />} />
<Route path="/keys" element={<KeysPage />} />
<Route path="/sessions" element={<SessionsPage />} />
<Route path="/scenarios" element={<ScenariosPage />} />
<Route path="*" element={<Navigate to="/scenarios" replace />} />
</Routes>
</main>
</div>
client/src/hooks/useTheme.ts
+1 -1
View File
@@ -19,7 +19,7 @@ export function useTheme() {
}, [theme]);
function toggleTheme() {
setTheme(t => (t === 'light' ? 'dark' : 'light'));
setTheme((t) => (t === 'light' ? 'dark' : 'light'));
}
return { theme, toggleTheme } as const;
client/src/i18n/index.ts
+6 -8
View File
@@ -2,13 +2,11 @@ import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
i18n
.use(initReactI18next)
.init({
resources: { en: { translation: en } },
lng: 'en',
fallbackLng: 'en',
interpolation: { escapeValue: false },
});
i18n.use(initReactI18next).init({
resources: { en: { translation: en } },
lng: 'en',
fallbackLng: 'en',
interpolation: { escapeValue: false },
});
export default i18n;
client/src/main.tsx
+7 -7
View File
@@ -1,9 +1,9 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { HashRouter } from 'react-router-dom'
import './i18n'
import './ui/tokens.css'
import App from './App'
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import './i18n';
import './ui/tokens.css';
import App from './App';
createRoot(document.getElementById('root')!).render(
<StrictMode>
@@ -11,4 +11,4 @@ createRoot(document.getElementById('root')!).render(
<App />
</HashRouter>
</StrictMode>,
)
);
client/src/pages/EnvironmentsPage.tsx
+7 -7
View File
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { environments } from '../api';
import type { Environment } from '../api';
import { Table, type TableColumn } from '../ui';
import { Table, type TableColumn, Timestamp } from '../ui';
import styles from './Page.module.css';
export function EnvironmentsPage() {
@@ -12,8 +12,8 @@ export function EnvironmentsPage() {
const [error, setError] = useState<string | null>(null);
const columns: TableColumn<Environment>[] = [
{ key: 'id', header: t('environments.col_id'), render: (e) => e.id, width: 60 },
{ key: 'name', header: t('environments.col_name'), render: (e) => e.name },
{ key: 'id', header: t('environments.col_id'), render: (e) => e.id, width: 60 },
{ key: 'name', header: t('environments.col_name'), render: (e) => e.name },
{
key: 'urls',
header: t('environments.col_urls'),
@@ -26,14 +26,14 @@ export function EnvironmentsPage() {
{
key: 'updated',
header: t('environments.col_updated'),
width: 120,
render: (e) => new Date(e.updatedAt).toLocaleDateString(),
width: 140,
render: (e) => <Timestamp value={e.updatedAt} />,
},
];
useEffect(() => {
setLoading(true);
environments.list()
environments
.list()
.then((res) => setItems(res.data))
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
client/src/pages/KeysPage.tsx
+5 -3
View File
@@ -4,7 +4,9 @@ import { keys } from '../api';
import { Table, type TableColumn } from '../ui';
import styles from './Page.module.css';
interface KeyRow { name: string }
interface KeyRow {
name: string;
}
export function KeysPage() {
const { t } = useTranslation();
@@ -17,8 +19,8 @@ export function KeysPage() {
];
useEffect(() => {
setLoading(true);
keys.list()
keys
.list()
.then((res) => setItems(res.keys.map((name) => ({ name }))))
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
client/src/pages/ScenariosPage.tsx
+17 -10
View File
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { scenarios } from '../api';
import type { Scenario } from '../api';
import { Button, Table, type TableColumn } from '../ui';
import { Button, Table, type TableColumn, Timestamp } from '../ui';
import styles from './Page.module.css';
export function ScenariosPage() {
@@ -12,14 +12,16 @@ export function ScenariosPage() {
const [error, setError] = useState<string | null>(null);
const load = useCallback(() => {
setLoading(true);
scenarios.list()
scenarios
.list()
.then((res) => setItems(res.data))
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, []);
useEffect(load, [load]);
useEffect(() => {
load();
}, [load]);
const handleRun = async (id: number) => {
await scenarios.run(id);
@@ -27,17 +29,18 @@ export function ScenariosPage() {
const handleDelete = async (id: number) => {
await scenarios.remove(id);
setLoading(true);
load();
};
const columns: TableColumn<Scenario>[] = [
{ key: 'id', header: t('scenarios.col_id'), render: (s) => s.id, width: 60 },
{ key: 'name', header: t('scenarios.col_name'), render: (s) => s.name },
{ key: 'id', header: t('scenarios.col_id'), render: (s) => s.id, width: 60 },
{ key: 'name', header: t('scenarios.col_name'), render: (s) => s.name },
{
key: 'updated',
header: t('scenarios.col_updated'),
width: 120,
render: (s) => new Date(s.updatedAt).toLocaleDateString(),
width: 140,
render: (s) => <Timestamp value={s.updatedAt} />,
},
{
key: 'actions',
@@ -46,8 +49,12 @@ export function ScenariosPage() {
align: 'right',
render: (s) => (
<span style={{ display: 'inline-flex', gap: 6 }}>
<Button size="sm" onClick={() => handleRun(s.id)}>{t('scenarios.action_run')}</Button>
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>{t('scenarios.action_delete')}</Button>
<Button size="sm" onClick={() => handleRun(s.id)}>
{t('scenarios.action_run')}
</Button>
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
{t('scenarios.action_delete')}
</Button>
</span>
),
},
client/src/pages/SessionsPage.tsx
+11 -10
View File
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { sessions } from '../api';
import type { Session } from '../api';
import { Badge, Button, Table, type TableColumn } from '../ui';
import { Badge, Button, Table, type TableColumn, Timestamp } from '../ui';
import styles from './Page.module.css';
export function SessionsPage() {
@@ -12,38 +12,39 @@ export function SessionsPage() {
const [error, setError] = useState<string | null>(null);
const load = useCallback(() => {
setLoading(true);
sessions.list()
sessions
.list()
.then((res) => setItems(res.data))
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, []);
useEffect(load, [load]);
useEffect(() => {
load();
}, [load]);
const handleDelete = async (id: number) => {
await sessions.remove(id);
setLoading(true);
load();
};
const columns: TableColumn<Session>[] = [
{ key: 'id', header: t('sessions.col_id'), render: (s) => s.id, width: 60 },
{ key: 'name', header: t('sessions.col_name'), render: (s) => s.sessionName },
{ key: 'id', header: t('sessions.col_id'), render: (s) => s.id, width: 60 },
{ key: 'name', header: t('sessions.col_name'), render: (s) => s.sessionName },
{
key: 'status',
header: t('sessions.col_status'),
width: 100,
render: (s) => (
<Badge variant={s.status === 'open' ? 'success' : 'neutral'}>
{s.status}
</Badge>
<Badge variant={s.status === 'open' ? 'success' : 'neutral'}>{s.status}</Badge>
),
},
{
key: 'lastUsed',
header: t('sessions.col_lastUsed'),
width: 160,
render: (s) => s.lastUsedAt ? new Date(s.lastUsedAt).toLocaleString() : '—',
render: (s) => (s.lastUsedAt ? <Timestamp value={s.lastUsedAt} /> : '—'),
},
{
key: 'actions',
client/src/ui/Breadcrumbs/Breadcrumbs.tsx
+16 -4
View File
@@ -16,7 +16,13 @@ export interface BreadcrumbsProps {
export function Breadcrumbs({ items, separator, className }: BreadcrumbsProps) {
const sep = separator ?? (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="M4 2L8 6L4 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M4 2L8 6L4 10"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
@@ -28,11 +34,17 @@ export function Breadcrumbs({ items, separator, className }: BreadcrumbsProps) {
return (
<li key={i} className={styles.item}>
{isLast ? (
<span className={styles.current} aria-current="page">{item.label}</span>
<span className={styles.current} aria-current="page">
{item.label}
</span>
) : item.href ? (
<a href={item.href} className={styles.link} onClick={item.onClick}>{item.label}</a>
<a href={item.href} className={styles.link} onClick={item.onClick}>
{item.label}
</a>
) : (
<button type="button" className={styles.link} onClick={item.onClick}>{item.label}</button>
<button type="button" className={styles.link} onClick={item.onClick}>
{item.label}
</button>
)}
{!isLast && <span className={styles.separator}>{sep}</span>}
</li>
client/src/ui/Button/Button.tsx
+3 -1
View File
@@ -18,7 +18,9 @@ export function Button({
}: ButtonProps) {
return (
<button
className={[styles.button, styles[variant], styles[size], className].filter(Boolean).join(' ')}
className={[styles.button, styles[variant], styles[size], className]
.filter(Boolean)
.join(' ')}
disabled={disabled || loading}
{...props}
>
client/src/ui/Input/Input.tsx
+3 -1
View File
@@ -18,7 +18,9 @@ export function Input({ label, hint, error, className, ...props }: InputProps) {
)}
<input
id={id}
className={[styles.input, error ? styles.hasError : '', className].filter(Boolean).join(' ')}
className={[styles.input, error ? styles.hasError : '', className]
.filter(Boolean)
.join(' ')}
aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}
aria-invalid={error ? true : undefined}
{...props}
client/src/ui/Select/Select.tsx
+19 -3
View File
@@ -15,7 +15,15 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
placeholder?: string;
}
export function Select({ label, hint, error, options, placeholder, className, ...props }: SelectProps) {
export function Select({
label,
hint,
error,
options,
placeholder,
className,
...props
}: SelectProps) {
const id = useId();
return (
<div className={styles.wrapper}>
@@ -27,7 +35,9 @@ export function Select({ label, hint, error, options, placeholder, className, ..
<div className={styles.control}>
<select
id={id}
className={[styles.select, error ? styles.hasError : '', className].filter(Boolean).join(' ')}
className={[styles.select, error ? styles.hasError : '', className]
.filter(Boolean)
.join(' ')}
aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}
aria-invalid={error ? true : undefined}
{...props}
@@ -45,7 +55,13 @@ export function Select({ label, hint, error, options, placeholder, className, ..
</select>
<span className={styles.chevron} aria-hidden="true">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M2 4L6 8L10 4"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span>
</div>
client/src/ui/SidePanel/SidePanel.tsx
+3 -1
View File
@@ -32,7 +32,9 @@ export function SidePanel({
return (
<aside
className={[styles.panel, collapsed ? styles.collapsed : '', className].filter(Boolean).join(' ')}
className={[styles.panel, collapsed ? styles.collapsed : '', className]
.filter(Boolean)
.join(' ')}
style={{ '--side-panel-width': `${width}px` } as React.CSSProperties}
aria-expanded={!collapsed}
>
client/src/ui/Timestamp/Timestamp.module.css
+18
View File
@@ -0,0 +1,18 @@
.timestamp {
display: inline-flex;
align-items: center;
font-family: var(--font-family);
font-size: var(--font-size-xs);
font-weight: 500;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
white-space: nowrap;
line-height: 1.6;
background: var(--color-neutral-bg);
color: var(--color-neutral-fg);
cursor: default;
}
.timestamp:hover {
background: var(--color-bg-subtle);
}
client/src/ui/Timestamp/Timestamp.tsx
+18
View File
@@ -0,0 +1,18 @@
import moment from 'moment';
import styles from './Timestamp.module.css';
export interface TimestampProps {
value: string | number | Date;
}
export function Timestamp({ value }: TimestampProps) {
const m = moment(value);
const iso = m.toISOString();
const relative = m.fromNow();
return (
<span className={styles.timestamp} title={iso} aria-label={iso}>
{relative}
</span>
);
}
client/src/ui/index.ts
+3
View File
@@ -21,5 +21,8 @@ export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs/Breadcrumbs
export { ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher';
export { Timestamp } from './Timestamp/Timestamp';
export type { TimestampProps } from './Timestamp/Timestamp';
export { Table } from './Table/Table';
export type { TableProps, TableColumn } from './Table/Table';