Skip to content

Commit 575ef81

Browse files
1ilit1ilit
committed
Migrate to tailwind v4 (#370)
1 parent 95d353a commit 575ef81

20 files changed

+634
-746
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,18 @@
4444
"usehooks-ts": "^3.1.0"
4545
},
4646
"devDependencies": {
47+
"@tailwindcss/postcss": "^4.0.14",
4748
"@types/react": "^18.2.43",
4849
"@types/react-dom": "^18.2.17",
4950
"@vitejs/plugin-react": "^4.2.1",
50-
"autoprefixer": "^10.4.16",
5151
"eslint": "^8.55.0",
5252
"eslint-config-prettier": "^9.1.0",
5353
"eslint-plugin-react": "^7.33.2",
5454
"eslint-plugin-react-hooks": "^4.6.0",
5555
"eslint-plugin-react-refresh": "^0.4.5",
5656
"postcss": "^8.4.32",
5757
"prettier": "3.2.5",
58-
"tailwindcss": "^3.3.6",
58+
"tailwindcss": "^4.0.14",
5959
"vite": "^5.4.1"
6060
},
6161
"overrides": {

‎postcss.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export default {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
}

‎src/components/EditorCanvas/Area.jsx

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -105,45 +105,41 @@ export default function Area({
105105
onPointerDown={onPointerDown}
106106
>
107107
<div
108-
className={`border-2 ${
108+
className={`w-full h-full p-2 rounded cursor-move border-2 ${
109109
isHovered
110110
? "border-dashed border-blue-500"
111111
: selectedElement.element === ObjectType.AREA &&
112112
selectedElement.id === data.id
113-
? "border-blue-500"
114-
: "border-slate-400"
115-
} w-full h-full cursor-move rounded`}
113+
? "border-blue-500 opacity-100"
114+
: "border-slate-400 opacity-100"
115+
}`}
116+
style={{ backgroundColor: `${data.color}66` }}
116117
>
117-
<div
118-
className="w-fill p-2 h-full"
119-
style={{ backgroundColor: `${data.color}66` }}
120-
>
121-
<div className="flex justify-between gap-1 w-full">
122-
<div className="text-color select-none overflow-hidden text-ellipsis">
123-
{data.name}
124-
</div>
125-
{(isHovered || (areaIsSelected() && !layout.sidebar)) && (
126-
<Popover
127-
visible={areaIsSelected() && !layout.sidebar}
128-
onClickOutSide={onClickOutSide}
129-
stopPropagation
130-
content={<EditPopoverContent data={data} />}
131-
trigger="custom"
132-
position="rightTop"
133-
showArrow
134-
>
135-
<Button
136-
icon={<IconEdit />}
137-
size="small"
138-
theme="solid"
139-
style={{
140-
backgroundColor: "#2F68ADB3",
141-
}}
142-
onClick={edit}
143-
/>
144-
</Popover>
145-
)}
118+
<div className="flex justify-between gap-1 w-full">
119+
<div className="text-color select-none overflow-hidden text-ellipsis">
120+
{data.name}
146121
</div>
122+
{(isHovered || (areaIsSelected() && !layout.sidebar)) && (
123+
<Popover
124+
visible={areaIsSelected() && !layout.sidebar}
125+
onClickOutSide={onClickOutSide}
126+
stopPropagation
127+
content={<EditPopoverContent data={data} />}
128+
trigger="custom"
129+
position="rightTop"
130+
showArrow
131+
>
132+
<Button
133+
icon={<IconEdit />}
134+
size="small"
135+
theme="solid"
136+
style={{
137+
backgroundColor: "#2F68ADB3",
138+
}}
139+
onClick={edit}
140+
/>
141+
</Popover>
142+
)}
147143
</div>
148144
</div>
149145
</foreignObject>
@@ -269,7 +265,7 @@ function EditPopoverContent({ data }) {
269265
showArrow
270266
>
271267
<div
272-
className="h-[32px] w-[32px] rounded"
268+
className="h-[32px] w-[32px] rounded-sm"
273269
style={{ backgroundColor: data.color }}
274270
/>
275271
</Popover>

‎src/components/EditorCanvas/Canvas.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -494,7 +494,7 @@ export default function Canvas() {
494494
const theme = localStorage.getItem("theme");
495495

496496
return (
497-
<div className="flex-grow h-full touch-none" id="canvas">
497+
<div className="grow h-full touch-none" id="canvas">
498498
<div
499499
className="w-full h-full"
500500
style={{
@@ -587,7 +587,7 @@ export default function Canvas() {
587587
</svg>
588588
</div>
589589
{settings.showDebugCoordinates && (
590-
<div className="fixed flex flex-col flex-wrap gap-6 bg-[rgba(var(--semi-grey-1),var(--tw-bg-opacity))]/40 border border-color bottom-4 right-4 p-4 rounded-xl backdrop-blur-sm pointer-events-none select-none">
590+
<div className="fixed flex flex-col flex-wrap gap-6 bg-[rgba(var(--semi-grey-1),var(--tw-bg-opacity))]/40 border border-color bottom-4 right-4 p-4 rounded-xl backdrop-blur-xs pointer-events-none select-none">
591591
<table className="table-auto grow">
592592
<thead>
593593
<tr>

‎src/components/EditorCanvas/Note.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ export default function Note({ data, onPointerDown }) {
257257
showArrow
258258
>
259259
<div
260-
className="h-[32px] w-[32px] rounded"
260+
className="h-[32px] w-[32px] rounded-sm"
261261
style={{ backgroundColor: data.color }}
262262
/>
263263
</Popover>
@@ -302,7 +302,7 @@ export default function Note({ data, onPointerDown }) {
302302
})
303303
}
304304
onBlur={handleBlur}
305-
className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
305+
className="w-full resize-none outline-hidden overflow-y-hidden border-none select-none"
306306
style={{ backgroundColor: data.color }}
307307
/>
308308
</div>

‎src/components/EditorCanvas/Table.jsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from "react";
1+
import { useMemo, useState } from "react";
22
import {
33
Tab,
44
ObjectType,
@@ -37,8 +37,14 @@ export default function Table(props) {
3737
const { t } = useTranslation();
3838
const { selectedElement, setSelectedElement } = useSelect();
3939

40+
const borderColor = useMemo(
41+
() => (settings.mode === "light" ? "border-zinc-300" : "border-zinc-600"),
42+
[settings.mode],
43+
);
44+
4045
const height =
4146
tableData.fields.length * tableFieldHeight + tableHeaderHeight + 7;
47+
4248
const openEditor = () => {
4349
if (!layout.sidebar) {
4450
setSelectedElement((prev) => ({
@@ -84,7 +90,7 @@ export default function Table(props) {
8490
selectedElement.id === tableData.id &&
8591
selectedElement.element === ObjectType.TABLE
8692
? "border-solid border-blue-500"
87-
: "border-zinc-500"
93+
: borderColor
8894
}`}
8995
style={{ direction: "ltr" }}
9096
>
@@ -313,7 +319,7 @@ export default function Table(props) {
313319
} flex items-center gap-2 overflow-hidden`}
314320
>
315321
<button
316-
className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
322+
className="shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
317323
onPointerDown={(e) => {
318324
if (!e.isPrimary) return;
319325

@@ -362,14 +368,13 @@ export default function Table(props) {
362368
{fieldData.type +
363369
((dbToTypes[database][fieldData.type].isSized ||
364370
dbToTypes[database][fieldData.type].hasPrecision) &&
365-
fieldData.size &&
366-
fieldData.size !== ""
371+
fieldData.size &&
372+
fieldData.size !== ""
367373
? `(${fieldData.size})`
368374
: "")}
369375
</span>
370376
</div>
371-
) : null
372-
}
377+
) : null}
373378
</div>
374379
</div>
375380
);

‎src/components/EditorHeader/ControlPanel.jsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1218,7 +1218,10 @@ export default function ControlPanel({
12181218
<i className="bi bi-toggle-off" />
12191219
),
12201220
function: () =>
1221-
setSettings((prev) => ({ ...prev, showDataTypes: !prev.showDataTypes })),
1221+
setSettings((prev) => ({
1222+
...prev,
1223+
showDataTypes: !prev.showDataTypes,
1224+
})),
12221225
},
12231226
show_grid: {
12241227
state: settings.showGrid ? (
@@ -1414,7 +1417,7 @@ export default function ControlPanel({
14141417
{window.name.split(" ")[0] !== "t" && (
14151418
<Button
14161419
type="primary"
1417-
className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"
1420+
className="!text-base me-2 !pe-6 !ps-5 !py-[18px] !rounded-md"
14181421
size="default"
14191422
icon={<IconShareStroked />}
14201423
onClick={() => setModal(MODAL.SHARE)}
@@ -1497,7 +1500,7 @@ export default function ControlPanel({
14971500
}
14981501
trigger="click"
14991502
>
1500-
<div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
1503+
<div className="py-1 px-2 hover-2 rounded-sm flex items-center justify-center">
15011504
<div className="w-[40px]">
15021505
{Math.floor(transform.zoom * 100)}%
15031506
</div>
@@ -1508,7 +1511,7 @@ export default function ControlPanel({
15081511
</Dropdown>
15091512
<Tooltip content={t("zoom_in")} position="bottom">
15101513
<button
1511-
className="py-1 px-2 hover-2 rounded text-lg"
1514+
className="py-1 px-2 hover-2 rounded-sm text-lg"
15121515
onClick={() =>
15131516
setTransform((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
15141517
}
@@ -1518,7 +1521,7 @@ export default function ControlPanel({
15181521
</Tooltip>
15191522
<Tooltip content={t("zoom_out")} position="bottom">
15201523
<button
1521-
className="py-1 px-2 hover-2 rounded text-lg"
1524+
className="py-1 px-2 hover-2 rounded-sm text-lg"
15221525
onClick={() =>
15231526
setTransform((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
15241527
}
@@ -1529,7 +1532,7 @@ export default function ControlPanel({
15291532
<Divider layout="vertical" margin="8px" />
15301533
<Tooltip content={t("undo")} position="bottom">
15311534
<button
1532-
className="py-1 px-2 hover-2 rounded flex items-center"
1535+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
15331536
onClick={undo}
15341537
>
15351538
<IconUndo
@@ -1540,7 +1543,7 @@ export default function ControlPanel({
15401543
</Tooltip>
15411544
<Tooltip content={t("redo")} position="bottom">
15421545
<button
1543-
className="py-1 px-2 hover-2 rounded flex items-center"
1546+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
15441547
onClick={redo}
15451548
>
15461549
<IconRedo
@@ -1552,23 +1555,23 @@ export default function ControlPanel({
15521555
<Divider layout="vertical" margin="8px" />
15531556
<Tooltip content={t("add_table")} position="bottom">
15541557
<button
1555-
className="flex items-center py-1 px-2 hover-2 rounded"
1558+
className="flex items-center py-1 px-2 hover-2 rounded-sm"
15561559
onClick={() => addTable()}
15571560
>
15581561
<IconAddTable />
15591562
</button>
15601563
</Tooltip>
15611564
<Tooltip content={t("add_area")} position="bottom">
15621565
<button
1563-
className="py-1 px-2 hover-2 rounded flex items-center"
1566+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
15641567
onClick={() => addArea()}
15651568
>
15661569
<IconAddArea />
15671570
</button>
15681571
</Tooltip>
15691572
<Tooltip content={t("add_note")} position="bottom">
15701573
<button
1571-
className="py-1 px-2 hover-2 rounded flex items-center"
1574+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
15721575
onClick={() => addNote()}
15731576
>
15741577
<IconAddNote />
@@ -1577,15 +1580,15 @@ export default function ControlPanel({
15771580
<Divider layout="vertical" margin="8px" />
15781581
<Tooltip content={t("save")} position="bottom">
15791582
<button
1580-
className="py-1 px-2 hover-2 rounded flex items-center"
1583+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
15811584
onClick={save}
15821585
>
15831586
<IconSaveStroked size="extra-large" />
15841587
</button>
15851588
</Tooltip>
15861589
<Tooltip content={t("to_do")} position="bottom">
15871590
<button
1588-
className="py-1 px-2 hover-2 rounded text-xl -mt-0.5"
1591+
className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
15891592
onClick={() => setSidesheet(SIDESHEET.TODO)}
15901593
>
15911594
<i className="fa-regular fa-calendar-check" />
@@ -1594,7 +1597,7 @@ export default function ControlPanel({
15941597
<Divider layout="vertical" margin="8px" />
15951598
<Tooltip content={t("theme")} position="bottom">
15961599
<button
1597-
className="py-1 px-2 hover-2 rounded text-xl -mt-0.5"
1600+
className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
15981601
onClick={() => {
15991602
const body = document.body;
16001603
if (body.hasAttribute("theme-mode")) {
@@ -1782,7 +1785,7 @@ export default function ControlPanel({
17821785
</Dropdown.Menu>
17831786
}
17841787
>
1785-
<div className="px-3 py-1 hover-2 rounded">
1788+
<div className="px-3 py-1 hover-2 rounded-sm">
17861789
{t(category)}
17871790
</div>
17881791
</Dropdown>

‎src/components/EditorHeader/LayoutDropdown.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default function LayoutDropdown() {
6868
}
6969
trigger="click"
7070
>
71-
<div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
71+
<div className="py-1 px-2 hover-2 rounded-sm flex items-center justify-center">
7272
<IconRowsStroked size="extra-large" />
7373
<div>
7474
<IconCaretdown />

‎src/components/EditorHeader/Modal/Code.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function Code({ value, language }) {
4242
/>
4343
<button
4444
onClick={copyCode}
45-
className={`absolute right-4 top-2 px-2 py-1 rounded ${settings.mode === "dark" ? "bg-zinc-700" : "bg-zinc-200"}`}
45+
className={`absolute right-4 top-2 px-2 py-1 rounded-sm ${settings.mode === "dark" ? "bg-zinc-700" : "bg-zinc-200"}`}
4646
>
4747
<i className={`bi bi-clipboard${copied ? "-check" : ""} me-2`} />
4848
{t("copy")}

‎src/components/EditorHeader/Modal/Open.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function Open({ selectedDiagramId, setSelectedDiagramId }) {
4848
key={d.id}
4949
className={`${
5050
selectedDiagramId === d.id
51-
? "bg-blue-300 bg-opacity-30"
51+
? "bg-blue-300/30"
5252
: "hover-1"
5353
}`}
5454
onClick={() => {

‎src/components/EditorSidePanel/AreasTab/AreaDetails.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default function AreaInfo({ data, i }) {
8989
showArrow
9090
>
9191
<div
92-
className="h-[32px] w-[32px] rounded"
92+
className="h-[32px] w-[32px] rounded-sm"
9393
style={{ backgroundColor: data.color }}
9494
/>
9595
</Popover>

‎src/components/EditorSidePanel/NotesTab/NoteInfo.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default function NoteInfo({ data, nid }) {
133133
showArrow
134134
>
135135
<div
136-
className="h-[32px] w-[32px] rounded mb-2"
136+
className="h-[32px] w-[32px] rounded-sm mb-2"
137137
style={{ backgroundColor: data.color }}
138138
/>
139139
</Popover>

‎src/components/EditorSidePanel/TablesTab/TableInfo.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ export default function TableInfo({ data }) {
275275
showArrow
276276
>
277277
<div
278-
className="h-[32px] w-[32px] rounded"
278+
className="h-[32px] w-[32px] rounded-sm"
279279
style={{ backgroundColor: data.color }}
280280
/>
281281
</Popover>

‎src/components/Thumbnail.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function Thumbnail({ diagram, i, zoom, theme }) {
4747
width={a.width > 0 ? a.width : 0}
4848
height={a.height > 0 ? a.height : 0}
4949
>
50-
<div className="border border-slate-400 w-full h-full rounded-sm relative">
50+
<div className="border border-slate-400 w-full h-full rounded-xs relative">
5151
<div
5252
className="opacity-40 w-fill h-full"
5353
style={{ backgroundColor: a.color }}

0 commit comments

Comments
 (0)