Skip to content

Commit ad943d7

Browse files
craquetcraquet
committed
Add tailwind prefixes everywhere
1 parent 680a723 commit ad943d7

14 files changed

+194
-191
lines changed

‎README.md

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,39 @@
11
# fairdo-elastic-search
22

3+
All-in-one React component for rendering an elastic search UI based on the provided configuration. Includes
4+
an interactive graph of related records.
5+
6+
This is an ESM Module intended for use in modern React applications. Make sure your bundler supports importing CSS files in JavaScript/TypeScript. Next.js is supported out of the box.
7+
8+
## Installation
9+
10+
```bash
11+
npm install ?
12+
```
13+
14+
## Docs
15+
16+
Refer to storybook and code
17+
18+
## Customization
19+
20+
Styling is done using tailwind and css variables. Feel free to override these variables in your own CSS.
21+
22+
### Dark mode
23+
24+
Add the `dark` class to a container containing the component to enable dark mode. Customize the dark mode by overriding the css variables used in the component. (For example `--rfs-background`)
25+
26+
27+
## Development
28+
329
Install dependencies with
430

31+
```bash
532
npm install
33+
```
634

735
Run development server with
836

9-
npm run dev
10-
11-
Deploy using provided docker compose (Runs on port 3000, should be placed behind a reverse proxy)
12-
37+
```bash
38+
npm run storybook:dev
39+
```

‎src/components/FairDOElasticSearch.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export function FairDOElasticSearch({
100100
bodyContent={
101101
<>
102102
{isLoading && !wasSearched && (
103-
<div className="flex justify-center">
103+
<div className="rfs-flex rfs-justify-center">
104104
<LoaderCircle className="size-6 animate-spin" />
105105
</div>
106106
)}
@@ -109,7 +109,7 @@ export function FairDOElasticSearch({
109109
</>
110110
}
111111
bodyHeader={
112-
<div className="mb-4 flex w-full items-center justify-between">
112+
<div className="rfs-mb-4 rfs-flex rfs-w-full rfs-items-center rfs-justify-between">
113113
{wasSearched && (
114114
<PagingInfo
115115
view={(props) => (
@@ -144,21 +144,21 @@ export function FairDOElasticSearch({
144144
</div>
145145
}
146146
bodyFooter={
147-
<div className="flex items-center flex-col gap-2 md:grid grid-cols-[1fr_auto_1fr] w-full p-2">
147+
<div className="rfs-flex rfs-items-center rfs-flex-col rfs-gap-2 md:rfs-grid rfs-grid-cols-[1fr_auto_1fr] rfs-w-full rfs-p-2">
148148
<div />
149149
<Paging />
150150
{wasSearched && (
151151
<ResultsPerPage
152152
options={[20, 50, 100, 250]}
153153
view={(props) => {
154154
return (
155-
<div className="flex h-full items-center gap-2 justify-self-end">
156-
<div className="text-xs text-muted-foreground">Results per Page</div>
155+
<div className="rfs-flex rfs-h-full rfs-items-center rfs-gap-2 rfs-justify-self-end">
156+
<div className="rfs-text-xs rfs-text-muted-foreground">Results per Page</div>
157157
<Select
158158
value={`${props.value}`}
159159
onValueChange={(v) => props.onChange(Number.parseInt(v))}
160160
>
161-
<SelectTrigger className="w-[80px]">
161+
<SelectTrigger className="rfs-w-[80px]">
162162
<SelectValue />
163163
</SelectTrigger>
164164
<SelectContent>

‎src/components/graph/PlainNode.tsx

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -63,42 +63,31 @@ export function PlainNode(data: NodeProps) {
6363
<>
6464
<Handle type="target" position={Position.Left} />
6565
<div
66-
className={`grid rounded-lg border border-border bg-background transition-all ${expand ? "grid-rows-[auto_1fr] shadow-lg" : "grid-rows-[auto_0fr]"}`}
66+
className={`rfs-grid rfs-rounded-lg rfs-border rfs-border-border rfs-bg-background rfs-transition-all ${expand ? "rfs-grid-rows-[auto_1fr] rfs-shadow-lg" : "rfs-grid-rows-[auto_0fr]"}`}
6767
>
68-
<div onClick={toggleExpand} className="p-4">
69-
<div className="items-centers flex gap-3">
70-
<div className="flex items-center">
68+
<div onClick={toggleExpand} className="rfs-p-4">
69+
<div className="rfs-items-centers rfs-flex rfs-gap-3">
70+
<div className="rfs-flex rfs-items-center">
7171
<Badge>{relationNode.tag ?? "FDO"}</Badge>
7272
</div>
7373
<div>
74-
<div className="font-semibold">{relationNode.label}</div>
75-
<div
76-
className={
77-
relationNode.label ? "text-sm text-muted-foreground" : ""
78-
}
79-
>
80-
{relationNode.id}
81-
</div>
74+
<div className="rfs-font-semibold">{relationNode.label}</div>
75+
<div className={relationNode.label ? "rfs-text-sm rfs-text-muted-foreground" : ""}>{relationNode.id}</div>
8276
</div>
8377
</div>
8478
</div>
85-
<div className="overflow-hidden">
86-
<div className="flex gap-4 p-4 pt-0">
79+
<div className="rfs-overflow-hidden">
80+
<div className="rfs-flex rfs-gap-4 rfs-p-4 rfs-pt-0">
8781
{relationNode.searchQuery && (
88-
<Button className="grow" onClick={executeFind}>
89-
<Search className="size-4" /> Find
82+
<Button className="rfs-grow" onClick={executeFind}>
83+
<Search className="rfs-size-4" /> Find
9084
</Button>
9185
)}
9286

9387
{relationNode.remoteURL && (
94-
<a
95-
href={relationNode.remoteURL}
96-
target="_blank"
97-
rel="noopener noreferrer"
98-
className="grow"
99-
>
100-
<Button className="w-full" variant="secondary">
101-
<ExternalLink className="size-4" /> Open
88+
<a href={relationNode.remoteURL} target="_blank" rel="noopener noreferrer" className="rfs-grow">
89+
<Button className="rfs-w-full" variant="secondary">
90+
<ExternalLink className="rfs-size-4" /> Open
10291
</Button>
10392
</a>
10493
)}

‎src/components/graph/RelationsGraphModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function RelationsGraphModal({
2828

2929
return (
3030
<Dialog open={isOpen} onOpenChange={onOpenChange}>
31-
<DialogContent className=" h-max max-h-[min(100vh,800px)] min-h-[500px] min-w-[500px] max-w-[min(calc(100vw-40px),1500px)] p-0">
31+
<DialogContent className="rfs-h-max rfs-max-h-[min(100vh,800px)] rfs-min-h-[500px] rfs-min-w-[500px] rfs-max-w-[min(calc(100vw-40px),1500px)] rfs-p-0">
3232
<VisuallyHidden.Root>
3333
<DialogTitle>
3434
FDOs related to

‎src/components/result/NMRResultView.tsx

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -165,46 +165,46 @@ export function NMRResultView({ result, debug }: { result: SearchResult; debug?:
165165
}, [addToResultCache, pid, title])
166166

167167
return (
168-
<div className={`m-2 rounded-lg border border-border p-4 ${exactPidMatch ? "animate-outline-ping" : ""}`}>
169-
<div className="grid grid-rows-[100px_1fr] gap-4 overflow-x-auto md:max-w-full md:grid-cols-[200px_1fr] md:grid-rows-1">
170-
<div className="flex justify-center rounded md:items-center p-2 dark:invert">
168+
<div className={`rfs-m-2 rfs-rounded-lg rfs-border rfs-border-border rfs-p-4 ${exactPidMatch ? "rfs-animate-outline-ping" : ""}`}>
169+
<div className="rfs-grid rfs-grid-rows-[100px_1fr] rfs-gap-4 rfs-overflow-x-auto md:rfs-max-w-full md:rfs-grid-cols-[200px_1fr] md:rfs-grid-rows-1">
170+
<div className="rfs-flex rfs-justify-center rfs-rounded md:rfs-items-center rfs-p-2 dark:rfs-invert">
171171
{previewImage ? (
172-
<img className="md:size-[200px]" src={previewImage} alt={`Preview for ${title}`} />
172+
<img className="md:rfs-size-[200px]" src={previewImage} alt={`Preview for ${title}`} />
173173
) : (
174-
<div className="flex flex-col justify-center dark:text-background">
175-
<ImageOff className="size-6 text-muted-foreground/50" />
174+
<div className="rfs-flex rfs-flex-col rfs-justify-center dark:rfs-text-background">
175+
<ImageOff className="rfs-size-6 rfs-text-muted-foreground/50" />
176176
</div>
177177
)}
178178
</div>
179-
<div className="flex flex-col overflow-x-auto md:max-w-full">
179+
<div className="rfs-flex rfs-flex-col rfs-overflow-x-auto md:rfs-max-w-full">
180180
{exactPidMatch && (
181-
<div className="mb-2">
181+
<div className="rfs-mb-2">
182182
<Badge>Exact Match</Badge>
183183
</div>
184184
)}
185-
<div className="font-bold md:text-xl">
185+
<div className="rfs-font-bold md:rfs-text-xl">
186186
{title}
187-
<span className="ml-2 text-sm font-normal text-muted-foreground">
187+
<span className="rfs-ml-2 rfs-text-sm rfs-font-normal rfs-text-muted-foreground">
188188
{identifier} - {creationDate}
189189
</span>
190190
</div>
191-
<a href={`https://hdl.handle.net/${id}`} target="_blank" className="mb-2 block leading-3 hover:underline">
192-
<span className="text-sm text-muted-foreground">{id}</span>
191+
<a href={`https://hdl.handle.net/${id}`} target="_blank" className="rfs-mb-2 rfs-block rfs-leading-3 hover:rfs-underline">
192+
<span className="rfs-text-sm rfs-text-muted-foreground">{id}</span>
193193
</a>
194-
<div className="flex flex-wrap gap-2">
195-
<Badge variant="secondary" className="truncate">
196-
<span className="flex truncate">
197-
<GraduationCap className="mr-2 size-4 shrink-0" /> {resourceType}
194+
<div className="rfs-flex rfs-flex-wrap rfs-gap-2">
195+
<Badge variant="secondary" className="rfs-truncate">
196+
<span className="rfs-flex rfs-truncate">
197+
<GraduationCap className="rfs-mr-2 rfs-size-4 rfs-shrink-0" /> {resourceType}
198198
</span>
199199
</Badge>
200-
<Badge variant="secondary" className="truncate">
201-
<span className="flex truncate">
202-
<Globe className="mr-2 size-4 shrink-0" /> {hadPrimarySource}
200+
<Badge variant="secondary" className="rfs-truncate">
201+
<span className="rfs-flex rfs-truncate">
202+
<Globe className="rfs-mr-2 rfs-size-4 rfs-shrink-0" /> {hadPrimarySource}
203203
</span>
204204
</Badge>
205-
<Badge variant="secondary" className="truncate">
206-
<span className="flex truncate">
207-
<Scale className="mr-2 size-4 shrink-0" />️{license}
205+
<Badge variant="secondary" className="rfs-truncate">
206+
<span className="rfs-flex rfs-truncate">
207+
<Scale className="rfs-mr-2 rfs-size-4 rfs-shrink-0" />️{license}
208208
</span>
209209
</Badge>
210210
{/*<Badge variant="secondary" className="truncate">*/}
@@ -214,27 +214,27 @@ export function NMRResultView({ result, debug }: { result: SearchResult; debug?:
214214
{/* </span>*/}
215215
{/*</Badge>*/}
216216
</div>
217-
<div className="grow"></div>
218-
<div className="mt-8 flex flex-col flex-wrap justify-end gap-2 md:flex-row md:items-center md:gap-4">
217+
<div className="rfs-grow"></div>
218+
<div className="rfs-mt-8 rfs-flex rfs-flex-col rfs-flex-wrap rfs-justify-end rfs-gap-2 md:rfs-flex-row md:rfs-items-center md:rfs-gap-4">
219219
{debug && (
220220
<Dialog>
221221
<DialogTrigger asChild>
222222
<Button variant="secondary" size="sm">
223223
Show FDO
224224
</Button>
225225
</DialogTrigger>
226-
<DialogContent className="max-h-full max-w-[1000px] overflow-y-auto">
226+
<DialogContent className="rfs-max-h-full rfs-max-w-[1000px] rfs-overflow-y-auto">
227227
<ObjectRender data={result} />
228228
</DialogContent>
229229
</Dialog>
230230
)}
231231
{isMetadataFor.length > 0 && (
232-
<div className="flex items-center">
233-
<Button className="grow rounded-r-none" size="sm" variant="secondary" onClick={showRelatedItems}>
234-
<GitFork className="mr-1 size-4" /> Show Related Items
232+
<div className="rfs-flex rfs-items-center">
233+
<Button className="rfs-grow rfs-rounded-r-none" size="sm" variant="secondary" onClick={showRelatedItems}>
234+
<GitFork className="rfs-mr-1 rfs-size-4" /> Show Related Items
235235
</Button>
236236
<Button
237-
className="rounded-l-none border-l border-l-border text-xs font-bold"
237+
className="rfs-rounded-l-none rfs-border-l rfs-border-l-border rfs-text-xs rfs-font-bold"
238238
size="sm"
239239
variant="secondary"
240240
onClick={showRelatedItems}
@@ -245,31 +245,31 @@ export function NMRResultView({ result, debug }: { result: SearchResult; debug?:
245245
)}
246246
{hasMetadata && (
247247
<Button className="" size="sm" variant="secondary" onClick={goToMetadata}>
248-
<BookText className="mr-1 size-4" /> Find Metadata
248+
<BookText className="rfs-mr-1 rfs-size-4" /> Find Metadata
249249
</Button>
250250
)}
251251

252-
<div className="flex items-center">
252+
<div className="rfs-flex rfs-items-center">
253253
<a href={doLocation} target="_blank" className="grow">
254-
<Button size="sm" className="w-full rounded-r-none px-4">
254+
<Button size="sm" className="rfs-w-full rfs-rounded-r-none rfs-px-4">
255255
Open
256256
</Button>
257257
</a>
258258
<DropdownMenu>
259259
<DropdownMenuTrigger asChild>
260-
<Button size="sm" className="rounded-l-none border-l">
261-
<ChevronDown className="mr-1 size-4" />
260+
<Button size="sm" className="rfs-rounded-l-none rfs-border-l">
261+
<ChevronDown className="rfs-mr-1 rfs-size-4" />
262262
</Button>
263263
</DropdownMenuTrigger>
264264
<DropdownMenuContent>
265265
<a href={doLocation} target="_blank">
266266
<DropdownMenuItem>
267-
<LinkIcon className="mr-1 size-4" /> Open Source
267+
<LinkIcon className="rfs-mr-1 rfs-size-4" /> Open Source
268268
</DropdownMenuItem>
269269
</a>
270270
<a href={`https://kit-data-manager.github.io/fairdoscope/?pid=${pid}`} target="_blank">
271271
<DropdownMenuItem>
272-
<Microscope className="mr-1 size-4" /> Open in FAIR-DOscope
272+
<Microscope className="rfs-mr-1 rfs-size-4" /> Open in FAIR-DOscope
273273
</DropdownMenuItem>
274274
</a>
275275
</DropdownMenuContent>

‎src/components/result/ObjectRender.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,14 @@ export function ObjectRender({ data }: { data: Record<string, unknown> }) {
1616
}
1717

1818
return (
19-
<div className="min-w-0 break-words">
19+
<div className="rfs-min-w-0 rfs-break-words">
2020
{Object.keys(data)
2121
.filter((k) => !k.startsWith("_"))
2222
.map((key) => (
2323
<div key={key}>
2424
<PidDisplay pid={key} />
25-
<div className="pl-4">
26-
{typeof data[key] === "object" ? (
27-
<ObjectRender data={data[key] as Record<string, unknown>} />
28-
) : null}
25+
<div className="rfs-pl-4">
26+
{typeof data[key] === "object" ? <ObjectRender data={data[key] as Record<string, unknown>} /> : null}
2927
</div>
3028
</div>
3129
))}

‎src/components/result/PidDisplay.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const PidDisplay = memo(function PidDisplay({ pid }: { pid: string }) {
2323
const { data, error } = useSWRImmutable(pid, resolveContent)
2424

2525
if (error) {
26-
return <div className="text-red-500">{JSON.stringify(error) || "Unknown error"}</div>
26+
return <div className="rfs-text-red-500">{JSON.stringify(error) || "Unknown error"}</div>
2727
}
2828

2929
return <span>{data ?? ""}</span>

0 commit comments

Comments
 (0)