main.jsx — データセットレビューアプリケーションの全コード
フィルタリング、選択、密度、テーマ、フィールド検証、ローカルなレビュー結果を備えた、ネイティブなコンポーネント構成の全体例です。
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
Button,
Card,
Callout,
FormGroup,
HTMLSelect,
HTMLTable,
InputGroup,
Switch,
Tag,
} from "@blueprintjs/core";
import "@blueprintjs/core/lib/css/blueprint.css";
import "./blueprint.css";
const initial = [
{
id: "D-1042",
name: "Harbor sensors",
type: "Telemetry",
rows: "18,420",
owner: "Maya",
status: "Reviewed",
},
{
id: "D-1043",
name: "Transit stops",
type: "Reference",
rows: "842",
owner: "Alex",
status: "Needs review",
},
{
id: "D-1044",
name: "Water samples",
type: "Field survey",
rows: "2,608",
owner: "Sam",
status: "Reviewed",
},
{
id: "D-1045",
name: "Street survey",
type: "Field survey",
rows: "4,120",
owner: "Lee",
status: "Needs review",
},
];
function App() {
const [dark, setDark] = useState(false),
[compact, setCompact] = useState(false),
[query, setQuery] = useState(""),
[rows, setRows] = useState(initial),
[selected, setSelected] = useState(initial[1]),
[note, setNote] = useState(""),
[notice, setNotice] = useState(""),
[error, setError] = useState(false),
[type, setType] = useState("All");
const visible = rows.filter(
(r) =>
r.name.toLowerCase().includes(query.toLowerCase()) &&
(type === "All" || r.type === type),
);
function review(e) {
e.preventDefault();
if (!note.trim()) {
setError(true);
document.getElementById("review-note").focus();
return;
}
const updated = { ...selected, status: "Reviewed" };
setRows(rows.map((r) => (r.id === selected.id ? updated : r)));
setSelected(updated);
setNotice(
`${selected.name} marked reviewed in this local example. No data was sent.`,
);
setNote("");
setError(false);
}
return (
<main className={"specimen " + (dark ? "bp6-dark" : "")}>
<header>
<div>
<span className="eyebrow">BLUEPRINT · DATA WORKSPACE</span>
<h1 className="bp6-heading">Dataset review</h1>
<p className="bp6-text-muted">
Inspect a record and attach a review note.
</p>
</div>
<Switch
label="Dark theme"
checked={dark}
onChange={(e) => setDark(e.target.checked)}
/>
</header>
<div className="workbench">
<Card className="collection">
<div className="toolbar">
<InputGroup
aria-label="Find a dataset"
placeholder="Find a dataset…"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<HTMLSelect
aria-label="Dataset type"
value={type}
onChange={(e) => setType(e.target.value)}
options={["All", "Telemetry", "Reference", "Field survey"]}
/>
<Switch
label="Compact rows"
checked={compact}
onChange={(e) => setCompact(e.target.checked)}
/>
</div>
<p className="bp6-text-small bp6-text-muted" role="status">
{visible.length} matching datasets
</p>
<div className="table-scroll">
<HTMLTable
striped
interactive
condensed={compact}
style={{ width: "100%" }}
>
<thead>
<tr>
<th>Name</th>
<th>Records</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{visible.map((r) => (
<tr
key={r.id}
className={selected.id === r.id ? "selected" : ""}
>
<td>
<Button
variant="minimal"
onClick={() => {
setSelected(r);
setError(false);
setNote("");
}}
text={r.name}
/>
<div className="bp6-text-small bp6-text-muted">
{r.id} · {r.type}
</div>
</td>
<td className="numeric">{r.rows}</td>
<td>
<Tag
minimal
intent={r.status === "Reviewed" ? "success" : "warning"}
>
{r.status}
</Tag>
</td>
</tr>
))}
</tbody>
</HTMLTable>
</div>
{!visible.length && (
<Callout title="No matching datasets">
Clear the search or choose a different dataset type.
<Button
variant="minimal"
onClick={() => {
setQuery("");
setType("All");
}}
>
Clear filters
</Button>
</Callout>
)}
</Card>
<Card className="inspector">
<span className="eyebrow">SELECTED DATASET</span>
<h2 className="bp6-heading">{selected.name}</h2>
<dl>
<dt>Dataset ID</dt>
<dd>
<code>{selected.id}</code>
</dd>
<dt>Owner</dt>
<dd>{selected.owner}</dd>
<dt>Type</dt>
<dd>{selected.type}</dd>
<dt>Records</dt>
<dd>{selected.rows}</dd>
</dl>
<form onSubmit={review}>
<FormGroup
label="Review note"
labelFor="review-note"
intent={error ? "danger" : "none"}
helperText={
error
? "Add a note describing what you checked."
: "A short note keeps the decision understandable."
}
>
<InputGroup
id="review-note"
value={note}
intent={error ? "danger" : "none"}
aria-invalid={error}
onChange={(e) => {
setNote(e.target.value);
setError(false);
}}
/>
</FormGroup>
<Button intent="primary" type="submit" fill>
Mark reviewed locally
</Button>
</form>
<p className="bp6-text-small bp6-text-muted">
Selection, filters and review notes exist only in this preview.
</p>
</Card>
</div>
{notice && (
<Callout intent="success" role="status">
{notice}
</Callout>
)}
<footer>
Native Blueprint 6.21.0 · HTMLTable, Card, FormGroup, InputGroup,
Switch, Tag and Callout.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
- こちらをsrc/main.jsx、次の例をsrc/blueprint.cssとして保存してください。
- createRootの呼び出しでは、ViteのReact index.htmlにあるルート要素を使用します。
