shlinkio/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-12-10 14:16:59 -06:00
Code Issues Packages Projects Releases 67 Wiki Activity

Merge pull request #1573 from acelaya-forks/feature/update-frontend-kit

Browse Source 
Update shlink frontend dependencies
This commit is contained in:
Alejandro Celaya 2025-06-11 08:13:10 +01:00 committed by GitHub
commit 575f86cc34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 45 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@ -16,9 +16,9 @@
"@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",
"@shlinkio/shlink-web-component": "^0.14.2",
"bootstrap": "5.2.3",
"bottlejs": "^2.0.1",
"clsx": "^2.1.1",
@ -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",
@ -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": {
@ -14040,9 +14039,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"
@ -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",

4
package.json
View File

@ -29,9 +29,9 @@
"@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",
"@shlinkio/shlink-web-component": "^0.14.2",
"bootstrap": "5.2.3",
"bottlejs": "^2.0.1",
"clsx": "^2.1.1",

2
src/app/App.tsx
View File

@ -61,7 +61,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
}, [settings.ui?.theme]);
return (
<div className="tw:px-3 tw:h-full">
<div className="tw:h-full">
<MainHeader />
<div className="tw:h-full tw:pt-(--header-height)">

2
src/common/AppUpdateBanner.tsx
View File

@ -13,7 +13,7 @@ interface AppUpdateBannerProps {
}
export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, forceUpdate }) => {
const [isUpdating,, setUpdating] = useToggle();
const { flag: isUpdating, setToTrue: setUpdating } = useToggle(false, true);
const update = useCallback(() => {
setUpdating();
forceUpdate();

2
src/common/Home.tsx
View File

@ -27,7 +27,7 @@ export const Home = ({ servers }: HomeProps) => {
}, [serversList, navigate]);
return (
<div className="tw:w-full">
<div className="tw:px-3 tw:w-full">
<Card className="tw:mx-auto tw:max-w-[720px] tw:overflow-hidden">
<div className="tw:flex tw:flex-col tw:md:flex-row">
<div className="tw:p-6 tw:hidden tw:md:flex tw:items-center tw:w-[40%]">

2
src/common/MainHeader.tsx
View File

@ -16,7 +16,7 @@ type MainHeaderDeps = {
const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
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;

2
src/common/NoMenuLayout.tsx
View File

@ -6,7 +6,7 @@ export type NoMenuLayoutProps = PropsWithChildren & {
};
export const NoMenuLayout: FC<NoMenuLayoutProps> = ({ children, className }) => (
<div className={clsx('tw:container tw:mx-auto tw:p-5 tw:pt-8 tw:max-md:p-0 tw:max-md:py-4', className)}>
<div className={clsx('tw:container tw:mx-auto tw:p-5 tw:pt-8 tw:max-md:p-3 tw:max-md:py-4', className)}>
{children}
</div>
);

29
src/servers/ManageServersRowDropdown.tsx
View File

@ -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';
@ -31,28 +30,28 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
{ server, setAutoConnect },
) => {
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;
return (
<>
<RowDropdownBtn minWidth={isAutoConnect ? 210 : 170}>
<DropdownItem tag={Link} to={serverUrl}>
<RowDropdown menuAlignment="right">
<RowDropdown.Item to={serverUrl} className="tw:gap-1.5">
<FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
</DropdownItem>
<DropdownItem tag={Link} to={`${serverUrl}/edit`}>
</RowDropdown.Item>
<RowDropdown.Item to={`${serverUrl}/edit`} className="tw:gap-1.5">
<FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
</DropdownItem>
<DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
</RowDropdown.Item>
<RowDropdown.Item onClick={() => setAutoConnect(server, !isAutoConnect)} className="tw:gap-1.5">
<FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
</DropdownItem>
<DropdownItem divider tag="hr" />
<DropdownItem className="tw:text-danger" onClick={showModal}>
</RowDropdown.Item>
<RowDropdown.Separator />
<RowDropdown.Item className="tw:[&]:text-danger tw:gap-1.5" onClick={showModal}>
<FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
</DropdownItem>
</RowDropdownBtn>
</RowDropdown.Item>
</RowDropdown>
<DeleteServerModal server={server} open={isModalOpen} onClose={hideModal} />
</>

30
test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap
View File

@ -3,18 +3,19 @@
exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
<div>
<div
class="dropdown"
class="tw:relative tw:inline-block"
>
<button
aria-controls="«r9»"
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="dropdown-btn__toggle btn btn-primary btn-sm"
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:cursor-pointer tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input tw:px-3 tw:py-1.5 tw:gap-x-2"
type="button"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-ellipsis-vertical px-1"
class="svg-inline--fa fa-ellipsis-vertical "
data-icon="ellipsis-vertical"
data-prefix="fas"
focusable="false"
@ -28,14 +29,6 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
/>
</svg>
</button>
<div
aria-hidden="true"
class="w-100 dropdown-menu dropdown-menu-end"
data-bs-popper="static"
role="menu"
style="min-width: 210px;"
tabindex="-1"
/>
</div>
<span>
DeleteServerModal
@ -47,18 +40,19 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
<div>
<div
class="dropdown"
class="tw:relative tw:inline-block"
>
<button
aria-controls="«rb»"
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="dropdown-btn__toggle btn btn-primary btn-sm"
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:cursor-pointer tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input tw:px-3 tw:py-1.5 tw:gap-x-2"
type="button"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-ellipsis-vertical px-1"
class="svg-inline--fa fa-ellipsis-vertical "
data-icon="ellipsis-vertical"
data-prefix="fas"
focusable="false"
@ -72,14 +66,6 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
/>
</svg>
</button>
<div
aria-hidden="true"
class="w-100 dropdown-menu dropdown-menu-end"
data-bs-popper="static"
role="menu"
style="min-width: 170px;"
tabindex="-1"
/>
</div>
<span>
DeleteServerModal