Skip to content

Commit bd7b460

Browse files
JessicaFMJessicaFM
committed
UPDATE documentation
1 parent 711a4b6 commit bd7b460

9 files changed

Lines changed: 64 additions & 59 deletions

‎src/App.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ export default function App() {
5858

5959
const CFG: any = (globalThis as any).CONFIG ?? {};
6060
const UI = CFG.ui ?? {};
61-
const title = UI.title || "ELIXIR Beacon UI Docs";
6261
const logoUrl = UI.logos?.main;
6362
const githubUrl = "https://github.com/elixir-europe/beacon-ui";
6463

@@ -74,7 +73,6 @@ export default function App() {
7473
<CssBaseline />
7574

7675
<TopNavbar
77-
title={title}
7876
logoUrl={logoUrl}
7977
navItems={navItems}
8078
mode={mode}

‎src/components/ComponentAuthorization.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export default function ComponentAuthorizationDocs() {
135135
{s.icon}
136136
</Box>
137137
<Box>
138-
<Typography sx={{ fontWeight: 700 }} sx={{ lineHeight: 1.4 }}>
138+
<Typography sx={{ fontWeight: 700, lineHeight: 1.4 }}>
139139
{idx + 1}. {s.title}
140140
</Typography>
141141
<Typography color="text.secondary" sx={{ mt: 0.5 }}>

‎src/components/ComponentBranding.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -162,10 +162,10 @@ export default function ComponentBranding() {
162162
</Typography>
163163

164164
<Grid container spacing={2} sx={{ mb: 2 }}>
165-
<Grid item xs={12} md={6}>
165+
<Grid size={{ xs: 12, md: 6 }}>
166166
<Card variant="outlined">
167167
<CardContent>
168-
<Stack direction="row" spacing={1} alignItems="center" mb={1}>
168+
<Stack direction="row" spacing={1} sx={{ alignItems: "center", mb: 1 }}>
169169
<PaletteIcon fontSize="small" />
170170
<Typography sx={{ fontWeight: 700 }}>Preview</Typography>
171171
</Stack>
@@ -178,7 +178,7 @@ export default function ComponentBranding() {
178178
</CardContent>
179179
</Card>
180180
</Grid>
181-
<Grid item xs={12} md={6}>
181+
<Grid size={{ xs: 12, md: 6 }}>
182182
<Alert severity="info">
183183
Update these values in <code>config.json</code> to change the theme
184184
without code changes.
@@ -197,7 +197,7 @@ export default function ComponentBranding() {
197197
</Typography>
198198

199199
<Grid container spacing={2} sx={{ mb: 2 }}>
200-
<Grid item xs={12} md={7}>
200+
<Grid size={{ xs: 12, md: 7 }}>
201201
<Card variant="outlined">
202202
<CardContent>
203203
<Stack direction="row" spacing={1} alignItems="center" mb={1}>
@@ -257,7 +257,7 @@ export default function ComponentBranding() {
257257
</CardContent>
258258
</Card>
259259
</Grid>
260-
<Grid item xs={12} md={5}>
260+
<Grid size={{ xs: 12, md: 5 }}>
261261
<Typography color="text.secondary" sx={{ mb: 1 }}>
262262
Example snippet:
263263
</Typography>

‎src/components/Components.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
// src/components/Components.tsx
2-
import React, { useMemo, useState } from "react";
1+
import { useMemo, useState } from "react";
32
import {
43
Box,
54
Container,
@@ -132,7 +131,7 @@ export default function Components() {
132131

133132
<Grid container spacing={2} sx={{ mt: 1 }}>
134133
{items.map((c) => (
135-
<Grid item xs={12} sm={6} md={4} key={c.id}>
134+
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={c.id}>
136135
<Card
137136
variant="outlined"
138137
sx={{

‎src/components/ComponentsPage.tsx‎

Lines changed: 55 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useMemo, useState } from "react";
1+
import { useMemo, useState } from "react";
22
import {
33
Box,
44
Container,
@@ -7,91 +7,103 @@ import {
77
Chip,
88
TextField,
99
InputAdornment,
10-
IconButton,
11-
Grid,
1210
Card,
1311
CardContent,
1412
CardActions,
1513
Button,
16-
Tooltip,
17-
Divider,
18-
alpha,
19-
Link as MUILink,
14+
Grid
2015
} from "@mui/material";
16+
import { alpha } from "@mui/material/styles";
2117
import WidgetsIcon from "@mui/icons-material/Widgets";
2218
import SearchIcon from "@mui/icons-material/Search";
23-
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
2419
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
2520
import ConstructionIcon from "@mui/icons-material/Construction";
2621

27-
// --- Component registry (add new components here) ---
28-
const REGISTRY = [
22+
type ComponentCard = {
23+
id: string;
24+
title: string;
25+
description: string;
26+
href: string;
27+
status: "Stable" | "Beta" | "Planned";
28+
source?: string;
29+
};
30+
31+
const REGISTRY: readonly ComponentCard[] = [
2932
{
3033
id: "navbar",
3134
title: "Navbar",
32-
description: "Top navigation built from runtime config via useNavItems(CFG).",
35+
description:
36+
"Top navigation built from runtime config via useNavItems(CFG).",
3337
href: "/components/navbar",
34-
status: "Stable" as const,
35-
source: "https://github.com/elixir-europe/beacon-ui/blob/main/src/nav/useNavItems.js",
38+
status: "Stable",
39+
source:
40+
"https://github.com/elixir-europe/beacon-ui/blob/main/src/nav/useNavItems.js",
3641
},
3742
{
3843
id: "search-box",
3944
title: "Search Box",
40-
description: "1) Choose the result type for your search · 2) Enter query/filters · 3) Run the search.",
45+
description:
46+
"1) Choose the result type for your search · 2) Enter query/filters · 3) Run the search.",
4147
href: "/components/search-box",
42-
status: "Stable" as const,
48+
status: "Stable",
4349
},
4450
{
4551
id: "results-table",
4652
title: "Results Table",
47-
description: "Tabular results with pagination, sorting, and column mapping.",
53+
description:
54+
"Tabular results with pagination, sorting, and column mapping.",
4855
href: "/components/results-table",
49-
status: "Stable" as const,
56+
status: "Stable",
5057
},
5158
{
5259
id: "common-filters",
5360
title: "Common Filters",
5461
description: "Reusable filter controls shared across result types.",
5562
href: "/components/common-filters",
56-
status: "Stable" as const,
63+
status: "Stable",
5764
},
5865
{
5966
id: "genomic-annotations",
6067
title: "Genomic Annotations",
6168
description: "Optional annotation panel for variant-centric results.",
6269
href: "/components/genomic-annotations",
63-
status: "Stable" as const,
70+
status: "Stable",
6471
},
6572
{
6673
id: "network-members",
6774
title: "Beacon Network Members (BN only)",
68-
description: "Directory of member beacons — visible only on Beacon Network deployments.",
75+
description:
76+
"Directory of member beacons — visible only on Beacon Network deployments.",
6977
href: "/components/network-members",
70-
status: "Stable" as const,
78+
status: "Stable",
7179
},
7280
] as const;
7381

7482
export default function ComponentsPage() {
7583
const [q, setQ] = useState("");
84+
7685
const items = useMemo(() => {
7786
const query = q.trim().toLowerCase();
7887
if (!query) return REGISTRY;
7988
return REGISTRY.filter((c) =>
80-
[c.title, c.description, c.status].some((v) => v?.toLowerCase().includes(query))
89+
[c.title, c.description, c.status].some((v) =>
90+
v.toLowerCase().includes(query)
91+
)
8192
);
8293
}, [q]);
8394

8495
return (
8596
<Container maxWidth="lg" id="components-index" sx={{ scrollMarginTop: 96 }}>
86-
<Stack direction="row" spacing={1} alignItems="center" mb={1}>
97+
<Stack direction="row" spacing={1} sx={{ alignItems: "center", mb: 1 }}>
8798
<Chip icon={<WidgetsIcon />} label="Components" color="primary" />
8899
</Stack>
89100

90101
<Typography variant="h3" sx={{ fontWeight: 800 }} gutterBottom>
91102
Components
92103
</Typography>
93104
<Typography color="text.secondary" paragraph>
94-
Overview of Beacon‑UI components. Each card links to a focused page. Use the search box to filter.
105+
Overview of Beacon-UI components. Each card links to a focused page. Use
106+
the search box to filter.
95107
</Typography>
96108

97109
<Box sx={{ my: 2 }}>
@@ -113,7 +125,7 @@ export default function ComponentsPage() {
113125

114126
<Grid container spacing={2} sx={{ mt: 1 }}>
115127
{items.map((c) => (
116-
<Grid item xs={12} sm={6} md={12} key={c.id}>
128+
<Grid size={{ xs: 12, sm: 6, md: 12 }} key={c.id}>
117129
<Card
118130
variant="outlined"
119131
sx={{
@@ -125,12 +137,24 @@ export default function ComponentsPage() {
125137
}}
126138
>
127139
<CardContent sx={{ flexGrow: 1 }}>
128-
<Stack direction="row" spacing={1} alignItems="center" mb={0.5}>
129-
<Typography variant="h6" sx={{ fontWeight: 700 }}>{c.title}</Typography>
140+
<Stack
141+
direction="row"
142+
spacing={1}
143+
sx={{ alignItems: "center", mb: 0.5 }}
144+
>
145+
<Typography variant="h6" sx={{ fontWeight: 700 }}>
146+
{c.title}
147+
</Typography>
130148
<Chip
131149
size="small"
132150
color={c.status === "Stable" ? "success" : "default"}
133-
icon={c.status === "Stable" ? <CheckCircleIcon /> : <ConstructionIcon />}
151+
icon={
152+
c.status === "Stable" ? (
153+
<CheckCircleIcon />
154+
) : (
155+
<ConstructionIcon />
156+
)
157+
}
134158
label={c.status}
135159
/>
136160
</Stack>
@@ -143,24 +167,15 @@ export default function ComponentsPage() {
143167
Open docs
144168
</Button>
145169
{c.source && (
146-
<Tooltip title="Source on GitHub">
147-
<IconButtonLink href={c.source} />
148-
</Tooltip>
170+
<Button size="small" href={c.source}>
171+
Source
172+
</Button>
149173
)}
150174
</CardActions>
151175
</Card>
152176
</Grid>
153177
))}
154178
</Grid>
155-
156179
</Container>
157180
);
158181
}
159-
160-
function IconButtonLink({ href }: { href: string }) {
161-
return (
162-
<MUILink href={href} target="_blank" rel="noreferrer" sx={{ lineHeight: 0 }}>
163-
<OpenInNewIcon fontSize="small" />
164-
</MUILink>
165-
);
166-
}

‎src/components/Footer.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// components/Footer.tsx
2-
import React from "react";
3-
41
export default function Footer() {
52
return (
63
<footer style={{ width: "100%", borderTop: "1px solid rgba(0,0,0,0.12)" }}>

‎src/components/Installation.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import { Box, Typography, Stack, Chip, Alert, Link as MUILink } from "@mui/material";
32
import LinkIcon from "@mui/icons-material/Link";
43

‎src/components/Introduction.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import { Box, Typography, Stack, Chip, Alert, Link as MUILink } from "@mui/material";
32
import InfoIcon from "@mui/icons-material/Info";
43

‎src/components/TopNavbar.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import { useState } from "react";
22
import {
33
AppBar,
44
Toolbar,
@@ -20,14 +20,12 @@ import Brightness7Icon from "@mui/icons-material/Brightness7";
2020
type NavItem = { label: string; to: string };
2121

2222
export default function TopNavbar({
23-
title = "ELIXIR Beacon UI Docs",
2423
logoUrl,
2524
navItems,
2625
mode,
2726
onToggleMode,
2827
githubUrl,
2928
}: {
30-
title?: string;
3129
logoUrl?: string;
3230
navItems: NavItem[];
3331
mode: "light" | "dark";

0 commit comments

Comments
 (0)