Skip to content

Commit 7f6b18d

Browse files
1ilitewqazxc
1ilit
authored and
ewqazxc
committed
Migrate to tailwind v4 (drawdb-io#370)
1 parent e39da26 commit 7f6b18d

20 files changed

+634
-746
lines changed

‎package-lock.json

+528-652
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,18 @@
4141
"usehooks-ts": "^3.1.0"
4242
},
4343
"devDependencies": {
44+
"@tailwindcss/postcss": "^4.0.14",
4445
"@types/react": "^18.2.43",
4546
"@types/react-dom": "^18.2.17",
4647
"@vitejs/plugin-react": "^4.2.1",
47-
"autoprefixer": "^10.4.16",
4848
"eslint": "^8.55.0",
4949
"eslint-config-prettier": "^9.1.0",
5050
"eslint-plugin-react": "^7.33.2",
5151
"eslint-plugin-react-hooks": "^4.6.0",
5252
"eslint-plugin-react-refresh": "^0.4.5",
5353
"postcss": "^8.4.32",
5454
"prettier": "3.2.5",
55-
"tailwindcss": "^3.3.6",
55+
"tailwindcss": "^4.0.14",
5656
"vite": "^5.4.1"
5757
},
5858
"overrides": {

‎postcss.config.js

+1-2
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

+30-34
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

+2-2
Original file line numberDiff line numberDiff line change
@@ -496,7 +496,7 @@ export default function Canvas() {
496496
const theme = localStorage.getItem("theme");
497497

498498
return (
499-
<div className="flex-grow h-full touch-none" id="canvas">
499+
<div className="grow h-full touch-none" id="canvas">
500500
<div
501501
className="w-full h-full"
502502
style={{
@@ -589,7 +589,7 @@ export default function Canvas() {
589589
</svg>
590590
</div>
591591
{settings.showDebugCoordinates && (
592-
<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">
592+
<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">
593593
<table className="table-auto grow">
594594
<thead>
595595
<tr>

‎src/components/EditorCanvas/Note.jsx

+2-2
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

+12-7
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

+17-14
Original file line numberDiff line numberDiff line change
@@ -1322,7 +1322,10 @@ export default function ControlPanel({
13221322
<i className="bi bi-toggle-off" />
13231323
),
13241324
function: () =>
1325-
setSettings((prev) => ({ ...prev, showDataTypes: !prev.showDataTypes })),
1325+
setSettings((prev) => ({
1326+
...prev,
1327+
showDataTypes: !prev.showDataTypes,
1328+
})),
13261329
},
13271330
show_grid: {
13281331
state: settings.showGrid ? (
@@ -1518,7 +1521,7 @@ export default function ControlPanel({
15181521
{window.name.split(" ")[0] !== "t" && (
15191522
<Button
15201523
type="primary"
1521-
className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"
1524+
className="!text-base me-2 !pe-6 !ps-5 !py-[18px] !rounded-md"
15221525
size="default"
15231526
icon={<IconShareStroked />}
15241527
onClick={() => setModal(MODAL.SHARE)}
@@ -1601,7 +1604,7 @@ export default function ControlPanel({
16011604
}
16021605
trigger="click"
16031606
>
1604-
<div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
1607+
<div className="py-1 px-2 hover-2 rounded-sm flex items-center justify-center">
16051608
<div className="w-[40px]">
16061609
{Math.floor(transform.zoom * 100)}%
16071610
</div>
@@ -1612,7 +1615,7 @@ export default function ControlPanel({
16121615
</Dropdown>
16131616
<Tooltip content={t("zoom_in")} position="bottom">
16141617
<button
1615-
className="py-1 px-2 hover-2 rounded text-lg"
1618+
className="py-1 px-2 hover-2 rounded-sm text-lg"
16161619
onClick={() =>
16171620
setTransform((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
16181621
}
@@ -1622,7 +1625,7 @@ export default function ControlPanel({
16221625
</Tooltip>
16231626
<Tooltip content={t("zoom_out")} position="bottom">
16241627
<button
1625-
className="py-1 px-2 hover-2 rounded text-lg"
1628+
className="py-1 px-2 hover-2 rounded-sm text-lg"
16261629
onClick={() =>
16271630
setTransform((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
16281631
}
@@ -1633,7 +1636,7 @@ export default function ControlPanel({
16331636
<Divider layout="vertical" margin="8px" />
16341637
<Tooltip content={t("undo")} position="bottom">
16351638
<button
1636-
className="py-1 px-2 hover-2 rounded flex items-center"
1639+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
16371640
onClick={undo}
16381641
>
16391642
<IconUndo
@@ -1644,7 +1647,7 @@ export default function ControlPanel({
16441647
</Tooltip>
16451648
<Tooltip content={t("redo")} position="bottom">
16461649
<button
1647-
className="py-1 px-2 hover-2 rounded flex items-center"
1650+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
16481651
onClick={redo}
16491652
>
16501653
<IconRedo
@@ -1656,23 +1659,23 @@ export default function ControlPanel({
16561659
<Divider layout="vertical" margin="8px" />
16571660
<Tooltip content={t("add_table")} position="bottom">
16581661
<button
1659-
className="flex items-center py-1 px-2 hover-2 rounded"
1662+
className="flex items-center py-1 px-2 hover-2 rounded-sm"
16601663
onClick={() => addTable()}
16611664
>
16621665
<IconAddTable />
16631666
</button>
16641667
</Tooltip>
16651668
<Tooltip content={t("add_area")} position="bottom">
16661669
<button
1667-
className="py-1 px-2 hover-2 rounded flex items-center"
1670+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
16681671
onClick={() => addArea()}
16691672
>
16701673
<IconAddArea />
16711674
</button>
16721675
</Tooltip>
16731676
<Tooltip content={t("add_note")} position="bottom">
16741677
<button
1675-
className="py-1 px-2 hover-2 rounded flex items-center"
1678+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
16761679
onClick={() => addNote()}
16771680
>
16781681
<IconAddNote />
@@ -1681,15 +1684,15 @@ export default function ControlPanel({
16811684
<Divider layout="vertical" margin="8px" />
16821685
<Tooltip content={t("save")} position="bottom">
16831686
<button
1684-
className="py-1 px-2 hover-2 rounded flex items-center"
1687+
className="py-1 px-2 hover-2 rounded-sm flex items-center"
16851688
onClick={save}
16861689
>
16871690
<IconSaveStroked size="extra-large" />
16881691
</button>
16891692
</Tooltip>
16901693
<Tooltip content={t("to_do")} position="bottom">
16911694
<button
1692-
className="py-1 px-2 hover-2 rounded text-xl -mt-0.5"
1695+
className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
16931696
onClick={() => setSidesheet(SIDESHEET.TODO)}
16941697
>
16951698
<i className="fa-regular fa-calendar-check" />
@@ -1698,7 +1701,7 @@ export default function ControlPanel({
16981701
<Divider layout="vertical" margin="8px" />
16991702
<Tooltip content={t("theme")} position="bottom">
17001703
<button
1701-
className="py-1 px-2 hover-2 rounded text-xl -mt-0.5"
1704+
className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
17021705
onClick={() => {
17031706
const body = document.body;
17041707
if (body.hasAttribute("theme-mode")) {
@@ -1886,7 +1889,7 @@ export default function ControlPanel({
18861889
</Dropdown.Menu>
18871890
}
18881891
>
1889-
<div className="px-3 py-1 hover-2 rounded">
1892+
<div className="px-3 py-1 hover-2 rounded-sm">
18901893
{t(category)}
18911894
</div>
18921895
</Dropdown>

‎src/components/EditorHeader/LayoutDropdown.jsx

+1-1
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

+1-1
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

+1-1
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export default function AreaInfo({ data, i }) {
9191
showArrow
9292
>
9393
<div
94-
className="h-[32px] w-[32px] rounded"
94+
className="h-[32px] w-[32px] rounded-sm"
9595
style={{ backgroundColor: data.color }}
9696
/>
9797
</Popover>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export default function NoteInfo({ data, nid }) {
135135
showArrow
136136
>
137137
<div
138-
className="h-[32px] w-[32px] rounded mb-2"
138+
className="h-[32px] w-[32px] rounded-sm mb-2"
139139
style={{ backgroundColor: data.color }}
140140
/>
141141
</Popover>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ export default function TableInfo({ data }) {
277277
showArrow
278278
>
279279
<div
280-
className="h-[32px] w-[32px] rounded"
280+
className="h-[32px] w-[32px] rounded-sm"
281281
style={{ backgroundColor: data.color }}
282282
/>
283283
</Popover>

‎src/components/Thumbnail.jsx

+1-1
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)