Skip to content

Commit c93bce9

Browse files
vincerubinettivincerubinetti
committed
misc fixes and lessons learned from JRaviLab/molevolvr2.0/pull/69 
1 parent c5f00c3 commit c93bce9

26 files changed

+203
-195
lines changed

‎frontend/.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88
},
99
{
10-
"files": "*.*",
10+
"files": "*.!(css)",
1111
"options": {
1212
"plugins": [
1313
"@ianvs/prettier-plugin-sort-imports",

‎frontend/bun.lock‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/index.html‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,6 @@
1919
<meta property="og:title" content="%VITE_TITLE%" />
2020
<meta property="og:description" content="%VITE_DESCRIPTION%" />
2121
<meta property="og:image" content="share.png" />
22-
23-
<!-- fonts -->
24-
<link rel="preconnect" href="https://fonts.googleapis.com" />
25-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
26-
<link
27-
href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap"
28-
rel="stylesheet"
29-
/>
3022
</head>
3123

3224
<body>

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
},
1515
"dependencies": {
1616
"@base-ui/react": "^1.1.0",
17+
"@fontsource-variable/outfit": "^5.2.8",
18+
"@fontsource-variable/sometype-mono": "^5.2.7",
1719
"@reactuses/core": "^6.1.11",
1820
"@tailwindcss/vite": "^4.1.18",
1921
"@tanstack/react-query": "^5.90.19",

‎frontend/src/App.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import "@/styles.css";
2+
import "@fontsource-variable/sometype-mono";
3+
import "@fontsource-variable/outfit";
14
import { useEffect } from "react";
25
import {
36
createBrowserRouter,
@@ -49,7 +52,7 @@ const Layout = () => {
4952
};
5053

5154
/** route definitions */
52-
export const routes = [
55+
const routes = [
5356
{
5457
path: "/",
5558
element: <Layout />,
@@ -94,7 +97,7 @@ export const routes = [
9497
];
9598

9699
/** router */
97-
export const router = createBrowserRouter(routes, {
100+
const router = createBrowserRouter(routes, {
98101
basename: import.meta.env.BASE_URL,
99102
});
100103

@@ -107,17 +110,16 @@ const queryClient = new QueryClient({
107110
});
108111

109112
/** scroll to target of url hash on page */
110-
const scrollToHash = async (hash: string) => {
113+
const scrollToHash = async (hash: string, waitForLayoutShift = false) => {
114+
if (!hash) return;
115+
111116
/** wait for element to appear */
112117
const element = await waitFor(() => document.querySelector(hash));
113118
if (!element) return;
114119

115120
/** wait for layout shifts to stabilize */
116-
await waitForStable(() => getDocBbox(element).top);
117-
118-
/** scroll to element */
119-
scrollTo(hash);
121+
if (waitForLayoutShift) await waitForStable(() => getDocBbox(element).top);
120122

121-
/** highlight element */
123+
scrollTo(element);
122124
glow(element);
123125
};

‎frontend/src/components/Autocomplete.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default function Autocomplete({
5353
placeholder={placeholder}
5454
className={clsx(
5555
`
56-
w-full rounded-sm border border-slate-300 p-2 leading-none
56+
w-full rounded-sm border border-slate-300 p-2
5757
disabled:border-0 disabled:bg-slate-200!
5858
`,
5959
className,
@@ -73,7 +73,7 @@ export default function Autocomplete({
7373
"
7474
>
7575
{status && (
76-
<_Autocomplete.Status className="flex gap-2 p-2 leading-none">
76+
<_Autocomplete.Status className="flex gap-2 p-2">
7777
{status}
7878
</_Autocomplete.Status>
7979
)}
@@ -84,7 +84,7 @@ export default function Autocomplete({
8484
key={index}
8585
value={tag.value}
8686
className="
87-
flex cursor-pointer gap-2 p-2 leading-none
87+
flex cursor-pointer gap-2 p-2
8888
data-highlighted:bg-theme/10
8989
"
9090
onClick={(event) => {

‎frontend/src/components/Button.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ type _Button = { ref?: Ref<HTMLButtonElement> } & Pick<
2020
| "type"
2121
| "className"
2222
| "style"
23-
| "disabled"
2423
| "onClick"
2524
| "onDrag"
2625
| "onDragEnter"
2726
| "onDragLeave"
2827
| "onDragOver"
2928
| "onDrop"
29+
| "aria-disabled"
3030
>;
3131

3232
/**
@@ -44,7 +44,7 @@ export default function Button({
4444
const _class = clsx(
4545
className,
4646
`
47-
flex items-center justify-center gap-2 rounded-sm p-2 leading-none
47+
flex items-center justify-center gap-2 rounded-sm p-2
4848
hover:bg-slate-500 hover:text-white
4949
`,
5050
color === "none" &&
@@ -76,15 +76,20 @@ export default function Button({
7676
{children}
7777
</Link>
7878
);
79-
/** otherwise, render as button */ else
79+
else {
80+
/** otherwise, render as button */
81+
const { onClick, ...rest } = props;
8082
return (
8183
<button
8284
ref={ref as Ref<HTMLButtonElement>}
8385
className={_class}
84-
type="button"
85-
{...props}
86+
onClick={(...args) => {
87+
if (!rest["aria-disabled"]) onClick?.(...args);
88+
}}
89+
{...rest}
8690
>
8791
{children}
8892
</button>
8993
);
94+
}
9095
}

‎frontend/src/components/Dialog.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ import { Dialog as _Dialog } from "@base-ui/react";
33
import { X } from "lucide-react";
44

55
type Props = {
6-
trigger: ReactElement<Record<string, unknown>>;
6+
children: ReactElement<Record<string, unknown>>;
77
title: ReactNode;
88
content: ReactNode;
99
onOpen?: () => void;
1010
onClose?: () => void;
1111
};
1212

1313
export default function Dialog({
14-
trigger,
14+
children,
1515
title,
1616
content,
1717
onOpen,
1818
onClose,
1919
}: Props) {
2020
return (
2121
<_Dialog.Root onOpenChange={(open) => (open ? onOpen?.() : onClose?.())}>
22-
<_Dialog.Trigger render={trigger} />
22+
<_Dialog.Trigger render={children} />
2323
<_Dialog.Portal>
2424
<_Dialog.Backdrop className="fixed inset-0 z-10 bg-black/50" />
2525
<_Dialog.Popup
@@ -34,11 +34,7 @@ export default function Dialog({
3434
"
3535
>
3636
<div className="flex items-start justify-between gap-4">
37-
<_Dialog.Title
38-
className="
39-
flex flex-col items-start! gap-1 text-left! leading-none
40-
"
41-
>
37+
<_Dialog.Title className="flex flex-col items-start! gap-1 text-left!">
4238
{title}
4339
</_Dialog.Title>
4440
<_Dialog.Close>

‎frontend/src/components/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export default function Header() {
8282
className={clsx(
8383
`
8484
flex flex-wrap items-center justify-center gap-4 text-xl
85+
leading-none
8586
max-xs:flex-col
8687
`,
8788
!open && "max-sm:hidden",
@@ -110,7 +111,7 @@ export default function Header() {
110111
<div
111112
className="
112113
absolute -top-2 -right-2 grid size-5 place-items-center
113-
rounded-full bg-theme-light text-sm leading-none text-black
114+
rounded-full bg-theme-light text-sm text-black
114115
"
115116
>
116117
{cart.studies.length}

‎frontend/src/components/Heading.tsx‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useRef } from "react";
22
import type { JSX, ReactNode } from "react";
33
import clsx from "clsx";
4-
import { Hash } from "lucide-react";
54
import Link from "@/components/Link";
65
import { renderText } from "@/util/dom";
76
import { slugify } from "@/util/string";
@@ -31,24 +30,17 @@ export default function Heading({ level, anchor, className, children }: Props) {
3130
const id = anchor ?? slugify(renderText(children));
3231

3332
return (
34-
<Tag id={id} ref={ref} className={clsx("group", className)}>
35-
{/* content */}
36-
{children}
37-
38-
{/* link to section */}
39-
{id && level !== 1 && (
40-
<Link
41-
to={"#" + id}
42-
className="
43-
-ml-2 size-0 opacity-0
44-
group-hover:opacity-100
45-
focus:opacity-100
46-
"
47-
aria-label="Heading link"
48-
>
49-
<Hash className="translate-x-2" />
50-
</Link>
51-
)}
52-
</Tag>
33+
<Link to={"#" + id} className={clsx("group", className)}>
34+
<Tag
35+
id={id}
36+
ref={ref}
37+
className="
38+
transition-colors
39+
group-hover:text-accent
40+
"
41+
>
42+
{children}
43+
</Tag>
44+
</Link>
5345
);
5446
}

0 commit comments

Comments
 (0)