From 76b7523d4a78536b3551e083033a82cbf940e004 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 11 Jun 2025 08:41:40 +0200 Subject: [PATCH 1/2] Migrate ManageServersRowDropdown to tailwind --- package-lock.json | 14 ++++----- package.json | 2 +- src/servers/ManageServersRowDropdown.tsx | 27 ++++++++--------- .../ManageServersRowDropdown.test.tsx.snap | 30 +++++-------------- 4 files changed, 29 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0261facd..d32f85fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@json2csv/plainjs": "^7.0.6", "@reduxjs/toolkit": "^2.8.2", "@shlinkio/data-manipulation": "^1.0.3", - "@shlinkio/shlink-frontend-kit": "^0.9.8", + "@shlinkio/shlink-frontend-kit": "^0.9.10", "@shlinkio/shlink-js-sdk": "^2.1.0", "@shlinkio/shlink-web-component": "^0.14.1", "bootstrap": "5.2.3", @@ -3509,9 +3509,9 @@ } }, "node_modules/@shlinkio/shlink-frontend-kit": { - "version": "0.9.8", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.8.tgz", - "integrity": "sha512-DA2IYNZqvXusaTgC9jsnmgkXDEGwfh8oiChz8BSSsPvLoj+Tsre2V46pFvvS4jAPL4d6EvQ2bJnRrvYdVSq3Vw==", + "version": "0.9.10", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.10.tgz", + "integrity": "sha512-L1+z3imvoSXHYWaO+H39JXGg40eQW1ytY3hMIE8JUuqJYNmWWLrafmfj1MHenCWGZEhymbQnpGD1yyziy6a9Lw==", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.12", @@ -14040,9 +14040,9 @@ "requires": {} }, "@shlinkio/shlink-frontend-kit": { - "version": "0.9.8", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.8.tgz", - "integrity": "sha512-DA2IYNZqvXusaTgC9jsnmgkXDEGwfh8oiChz8BSSsPvLoj+Tsre2V46pFvvS4jAPL4d6EvQ2bJnRrvYdVSq3Vw==", + "version": "0.9.10", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.10.tgz", + "integrity": "sha512-L1+z3imvoSXHYWaO+H39JXGg40eQW1ytY3hMIE8JUuqJYNmWWLrafmfj1MHenCWGZEhymbQnpGD1yyziy6a9Lw==", "requires": { "@floating-ui/react": "^0.27.12", "clsx": "^2.1.1" diff --git a/package.json b/package.json index 2d6355fb..8543a60c 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@json2csv/plainjs": "^7.0.6", "@reduxjs/toolkit": "^2.8.2", "@shlinkio/data-manipulation": "^1.0.3", - "@shlinkio/shlink-frontend-kit": "^0.9.8", + "@shlinkio/shlink-frontend-kit": "^0.9.10", "@shlinkio/shlink-js-sdk": "^2.1.0", "@shlinkio/shlink-web-component": "^0.14.1", "bootstrap": "5.2.3", diff --git a/src/servers/ManageServersRowDropdown.tsx b/src/servers/ManageServersRowDropdown.tsx index a2bd5c5a..cd2e2b67 100644 --- a/src/servers/ManageServersRowDropdown.tsx +++ b/src/servers/ManageServersRowDropdown.tsx @@ -6,10 +6,9 @@ import { faPlug as connectIcon, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit'; +import { useToggle } from '@shlinkio/shlink-frontend-kit'; +import { RowDropdown } from '@shlinkio/shlink-frontend-kit/tailwind'; import type { FC } from 'react'; -import { Link } from 'react-router'; -import { DropdownItem } from 'reactstrap'; import type { FCWithDeps } from '../container/utils'; import { componentFactory, useDependencies } from '../container/utils'; import type { ServerWithId } from './data'; @@ -38,21 +37,21 @@ const ManageServersRowDropdown: FCWithDeps - - + + Connect - - + + Edit server - - setAutoConnect(server, !isAutoConnect)}> + + setAutoConnect(server, !isAutoConnect)} className="tw:gap-1.5"> {isAutoConnect ? 'Do not a' : 'A'}uto-connect - - - + + + Remove server - - + + diff --git a/test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap b/test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap index a88b7687..fd20c768 100644 --- a/test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap +++ b/test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap @@ -3,18 +3,19 @@ exports[` > renders expected size and icon 1`] = `
- DeleteServerModal @@ -47,18 +40,19 @@ exports[` > renders expected size and icon 1`] = ` exports[` > renders expected size and icon 2`] = `
- DeleteServerModal From 93cf8b1258cfad0a7043e1939c8263dba5498ac9 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 11 Jun 2025 08:57:32 +0200 Subject: [PATCH 2/2] Update to shlink-web-component 0.14.2 --- package-lock.json | 19 +++++++++---------- package.json | 2 +- src/app/App.tsx | 2 +- src/common/AppUpdateBanner.tsx | 2 +- src/common/Home.tsx | 2 +- src/common/MainHeader.tsx | 2 +- src/common/NoMenuLayout.tsx | 2 +- src/servers/ManageServersRowDropdown.tsx | 2 +- 8 files changed, 16 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index d32f85fc..ac223330 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@shlinkio/data-manipulation": "^1.0.3", "@shlinkio/shlink-frontend-kit": "^0.9.10", "@shlinkio/shlink-js-sdk": "^2.1.0", - "@shlinkio/shlink-web-component": "^0.14.1", + "@shlinkio/shlink-web-component": "^0.14.2", "bootstrap": "5.2.3", "bottlejs": "^2.0.1", "clsx": "^2.1.1", @@ -3543,9 +3543,9 @@ "license": "MIT" }, "node_modules/@shlinkio/shlink-web-component": { - "version": "0.14.1", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.14.1.tgz", - "integrity": "sha512-cgi12ovvprD+0ozKYZu1ZTHzfQQa4Gaju6VOoBZuheucg8whr3NyNQ3YZKWhmqWaWeW0qK3/I3lsDGSkuWs0sQ==", + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.14.2.tgz", + "integrity": "sha512-4GRT1nLuhVCGuKP8fwRv1EBtgQ2wCvpJqJ6ipYM/QKwA2uJIXChom4TDia+s4X8mESIOjV0++aoPOEr6y6H2iA==", "license": "MIT", "dependencies": { "@formkit/drag-and-drop": "^0.5.3", @@ -3572,13 +3572,12 @@ "@fortawesome/free-solid-svg-icons": "^6.7.2", "@fortawesome/react-fontawesome": "^0.2.2", "@reduxjs/toolkit": "^2.5.0", - "@shlinkio/shlink-frontend-kit": "^0.9.7", + "@shlinkio/shlink-frontend-kit": "^0.9.10", "@shlinkio/shlink-js-sdk": "^2.0.0", "react": "^18.3 || ^19.0", "react-dom": "^18.3 || ^19.0", "react-redux": "^9.2.0", - "react-router": "^7.1.5", - "reactstrap": "^9.2.0" + "react-router": "^7.1.5" }, "peerDependenciesMeta": { "@shlinkio/shlink-js-sdk": { @@ -14054,9 +14053,9 @@ "integrity": "sha512-K6zmA/A7Ux9hTn+ZjAm85YmMl7/v5XgZBM62syCxCsK7Tdw7Gg4+C06cZ2gUv+HWrHtv5IXsi4ax00++8Kg5vw==" }, "@shlinkio/shlink-web-component": { - "version": "0.14.1", - "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.14.1.tgz", - "integrity": "sha512-cgi12ovvprD+0ozKYZu1ZTHzfQQa4Gaju6VOoBZuheucg8whr3NyNQ3YZKWhmqWaWeW0qK3/I3lsDGSkuWs0sQ==", + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.14.2.tgz", + "integrity": "sha512-4GRT1nLuhVCGuKP8fwRv1EBtgQ2wCvpJqJ6ipYM/QKwA2uJIXChom4TDia+s4X8mESIOjV0++aoPOEr6y6H2iA==", "requires": { "@formkit/drag-and-drop": "^0.5.3", "@json2csv/plainjs": "^7.0.6", diff --git a/package.json b/package.json index 8543a60c..b9612c26 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "@shlinkio/data-manipulation": "^1.0.3", "@shlinkio/shlink-frontend-kit": "^0.9.10", "@shlinkio/shlink-js-sdk": "^2.1.0", - "@shlinkio/shlink-web-component": "^0.14.1", + "@shlinkio/shlink-web-component": "^0.14.2", "bootstrap": "5.2.3", "bottlejs": "^2.0.1", "clsx": "^2.1.1", diff --git a/src/app/App.tsx b/src/app/App.tsx index 718124db..e2d15327 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -61,7 +61,7 @@ const App: FCWithDeps = ( }, [settings.ui?.theme]); return ( -
+
diff --git a/src/common/AppUpdateBanner.tsx b/src/common/AppUpdateBanner.tsx index e1717a32..5e1f0226 100644 --- a/src/common/AppUpdateBanner.tsx +++ b/src/common/AppUpdateBanner.tsx @@ -13,7 +13,7 @@ interface AppUpdateBannerProps { } export const AppUpdateBanner: FC = ({ isOpen, onClose, forceUpdate }) => { - const [isUpdating,, setUpdating] = useToggle(); + const { flag: isUpdating, setToTrue: setUpdating } = useToggle(false, true); const update = useCallback(() => { setUpdating(); forceUpdate(); diff --git a/src/common/Home.tsx b/src/common/Home.tsx index 9c48fdd0..14710a3e 100644 --- a/src/common/Home.tsx +++ b/src/common/Home.tsx @@ -27,7 +27,7 @@ export const Home = ({ servers }: HomeProps) => { }, [serversList, navigate]); return ( -
+
diff --git a/src/common/MainHeader.tsx b/src/common/MainHeader.tsx index 09d8ce4e..f17a9057 100644 --- a/src/common/MainHeader.tsx +++ b/src/common/MainHeader.tsx @@ -16,7 +16,7 @@ type MainHeaderDeps = { const MainHeader: FCWithDeps = () => { const { ServersDropdown } = useDependencies(MainHeader); - const [isNotCollapsed, toggleCollapse, , collapse] = useToggle(); + const { flag: isNotCollapsed, toggle: toggleCollapse, setToFalse: collapse } = useToggle(false, true); const location = useLocation(); const { pathname } = location; diff --git a/src/common/NoMenuLayout.tsx b/src/common/NoMenuLayout.tsx index 1b2a4ace..82414f84 100644 --- a/src/common/NoMenuLayout.tsx +++ b/src/common/NoMenuLayout.tsx @@ -6,7 +6,7 @@ export type NoMenuLayoutProps = PropsWithChildren & { }; export const NoMenuLayout: FC = ({ children, className }) => ( -
+
{children}
); diff --git a/src/servers/ManageServersRowDropdown.tsx b/src/servers/ManageServersRowDropdown.tsx index cd2e2b67..c8afe490 100644 --- a/src/servers/ManageServersRowDropdown.tsx +++ b/src/servers/ManageServersRowDropdown.tsx @@ -30,7 +30,7 @@ const ManageServersRowDropdown: FCWithDeps { const { DeleteServerModal } = useDependencies(ManageServersRowDropdown); - const [isModalOpen,, showModal, hideModal] = useToggle(); + const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle(false, true); const serverUrl = `/server/${server.id}`; const { autoConnect: isAutoConnect } = server; const autoConnectIcon = isAutoConnect ? toggleOffIcon : toggleOnIcon;