Update to latest shlink-frontend-kit and shlink-web-component

src/servers/CreateServer.tsx

@@ -1,7 +1,5 @@
-import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import type { ResultProps } from '@shlinkio/shlink-frontend-kit/tailwind';
-import { Button, Result } from '@shlinkio/shlink-frontend-kit/tailwind';
+import type { ResultProps,TimeoutToggle  } from '@shlinkio/shlink-frontend-kit';
+import { Button, Result,useToggle  } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router';
@@ -28,7 +26,7 @@ type CreateServerDeps = {
 };
 
 const ImportResult = ({ variant }: Pick<ResultProps, 'variant'>) => (
-  <div className="tw:mt-4">
+  <div className="mt-4">
     <Result variant={variant}>
       {variant === 'success' && 'Servers properly imported. You can now select one from the list :)'}
       {variant === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
@@ -42,10 +40,10 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
   const goBack = useGoBack();
   const hasServers = !!Object.keys(servers).length;
   // eslint-disable-next-line react-compiler/react-compiler
-  const [serversImported, setServersImported] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
+  const [serversImported, setServersImported] = useTimeoutToggle({ delay: SHOW_IMPORT_MSG_TIME });
   // eslint-disable-next-line react-compiler/react-compiler
-  const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
-  const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
+  const [errorImporting, setErrorImporting] = useTimeoutToggle({ delay: SHOW_IMPORT_MSG_TIME });
+  const { flag: isConfirmModalOpen, toggle: toggleConfirmModal } = useToggle();
   const [serverData, setServerData] = useState<ServerData>();
   const saveNewServer = useCallback((newServerData: ServerData) => {
     const [newServerWithUniqueId] = ensureUniqueIds(servers, [newServerData]);

src/servers/DeleteServerButton.tsx

@@ -17,7 +17,7 @@ type DeleteServerButtonDeps = {
 
 const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButtonDeps> = ({ server, children }) => {
   const { DeleteServerModal } = useDependencies(DeleteServerButton);
-  const [isModalOpen, , showModal, hideModal] = useToggle();
+  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle();
   const navigate = useNavigate();
   const onClose = useCallback((confirmed: boolean) => {
     hideModal();
@@ -28,7 +28,7 @@ const DeleteServerButton: FCWithDeps<DeleteServerButtonProps, DeleteServerButton
 
   return (
     <>
-      <button type="button" className="tw:text-danger tw:hover:underline" onClick={showModal}>
+      <button type="button" className="text-danger hover:underline" onClick={showModal}>
         {children}
       </button>
       <DeleteServerModal server={server} open={isModalOpen} onClose={onClose} />

src/servers/DeleteServerModal.tsx

@@ -1,5 +1,5 @@
-import type { ExitAction } from '@shlinkio/shlink-frontend-kit/tailwind';
-import { CardModal } from '@shlinkio/shlink-frontend-kit/tailwind';
+import type { ExitAction } from '@shlinkio/shlink-frontend-kit';
+import { CardModal } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useCallback } from 'react';
 import type { ServerWithId } from './data';
@@ -31,7 +31,7 @@ export const DeleteServerModal: FC<DeleteServerModalConnectProps> = ({ server, o
       onClosed={onClosed}
       confirmText="Delete"
     >
-      <div className="tw:flex tw:flex-col tw:gap-y-4">
+      <div className="flex flex-col gap-y-4">
         <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
         <p>
           <i>

src/servers/EditServer.tsx

@@ -1,5 +1,4 @@
-import { useParsedQuery } from '@shlinkio/shlink-frontend-kit';
-import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button,useParsedQuery  } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';

src/servers/ManageServers.tsx

@@ -1,7 +1,7 @@
 import { faFileDownload as exportIcon, faPlus as plusIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
-import { Button, Result, SearchInput, SimpleCard, Table } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button, Result, SearchInput, SimpleCard, Table } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useMemo, useState } from 'react';
 import { NoMenuLayout } from '../common/NoMenuLayout';
@@ -40,22 +40,22 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
   );
   const hasAutoConnect = allServers.some(({ autoConnect }) => !!autoConnect);
   // eslint-disable-next-line react-compiler/react-compiler
-  const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
+  const [errorImporting, setErrorImporting] = useTimeoutToggle({ delay: SHOW_IMPORT_MSG_TIME });
 
   return (
-    <NoMenuLayout className="tw:flex tw:flex-col tw:gap-y-4">
+    <NoMenuLayout className="flex flex-col gap-y-4">
       <SearchInput onChange={setSearchTerm} />
 
-      <div className="tw:flex tw:flex-col tw:md:flex-row tw:gap-2">
-        <div className="tw:flex tw:gap-2">
-          <ImportServersBtn className="tw:flex-grow" onError={setErrorImporting}>Import servers</ImportServersBtn>
+      <div className="flex flex-col md:flex-row gap-2">
+        <div className="flex gap-2">
+          <ImportServersBtn className="flex-grow" onError={setErrorImporting}>Import servers</ImportServersBtn>
           {filteredServers.length > 0 && (
-            <Button variant="secondary" className="tw:flex-grow" onClick={async () => serversExporter.exportServers()}>
+            <Button variant="secondary" className="flex-grow" onClick={async () => serversExporter.exportServers()}>
               <FontAwesomeIcon icon={exportIcon} /> Export servers
             </Button>
           )}
         </div>
-        <Button className="tw:md:ml-auto" to="/server/create">
+        <Button className="md:ml-auto" to="/server/create">
           <FontAwesomeIcon icon={plusIcon} /> Add a server
         </Button>
       </div>
@@ -64,7 +64,7 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
         <Table header={(
           <Table.Row>
             {hasAutoConnect && (
-              <Table.Cell className="tw:w-[35px]"><span className="tw:sr-only">Auto-connect</span></Table.Cell>
+              <Table.Cell className="w-[35px]"><span className="sr-only">Auto-connect</span></Table.Cell>
             )}
             <Table.Cell>Name</Table.Cell>
             <Table.Cell>Base URL</Table.Cell>
@@ -72,7 +72,7 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
           </Table.Row>
         )}>
           {!filteredServers.length && (
-            <Table.Row className="tw:text-center"><Table.Cell colSpan={4}>No servers found.</Table.Cell></Table.Row>
+            <Table.Row className="text-center"><Table.Cell colSpan={4}>No servers found.</Table.Cell></Table.Row>
           )}
           {filteredServers.map((server) => (
             <ManageServersRow key={server.id} server={server} hasAutoConnect={hasAutoConnect} />

src/servers/ManageServersRow.tsx

@@ -1,6 +1,6 @@
 import { faCheck as checkIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Table, Tooltip, useTooltip } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Table, Tooltip, useTooltip } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router';
 import type { FCWithDeps } from '../container/utils';
@@ -22,14 +22,14 @@ const ManageServersRow: FCWithDeps<ManageServersRowProps, ManageServersRowDeps>
   const { anchor, tooltip } = useTooltip();
 
   return (
-    <Table.Row className="tw:relative">
+    <Table.Row className="relative">
       {hasAutoConnect && (
         <Table.Cell columnName="Auto-connect">
           {server.autoConnect && (
             <>
               <FontAwesomeIcon
                 icon={checkIcon}
-                className="tw:text-lm-brand tw:dark:text-dm-brand"
+                className="text-lm-brand dark:text-dm-brand"
                 {...anchor}
               />
               <Tooltip {...tooltip}>Auto-connect to this server</Tooltip>
@@ -37,11 +37,11 @@ const ManageServersRow: FCWithDeps<ManageServersRowProps, ManageServersRowDeps>
           )}
         </Table.Cell>
       )}
-      <Table.Cell className="tw:font-bold" columnName="Name">
+      <Table.Cell className="font-bold" columnName="Name">
         <Link to={`/server/${server.id}`}>{server.name}</Link>
       </Table.Cell>
-      <Table.Cell columnName="Base URL" className="tw:max-lg:border-b-0">{server.url}</Table.Cell>
-      <Table.Cell className="tw:text-right tw:max-lg:absolute tw:right-0 tw:-top-1 tw:mx-lg:pt-0">
+      <Table.Cell columnName="Base URL" className="max-lg:border-b-0">{server.url}</Table.Cell>
+      <Table.Cell className="text-right max-lg:absolute right-0 -top-1 mx-lg:pt-0">
         <ManageServersRowDropdown server={server} />
       </Table.Cell>
     </Table.Row>

src/servers/ManageServersRowDropdown.tsx

@@ -6,8 +6,7 @@ import {
   faPlug as connectIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import { RowDropdown } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { RowDropdown,useToggle  } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -30,7 +29,7 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
   { server, setAutoConnect },
 ) => {
   const { DeleteServerModal } = useDependencies(ManageServersRowDropdown);
-  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle(false, true);
+  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle();
   const serverUrl = `/server/${server.id}`;
   const { autoConnect: isAutoConnect } = server;
   const autoConnectIcon = isAutoConnect ? toggleOffIcon : toggleOnIcon;
@@ -38,17 +37,17 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
   return (
     <>
       <RowDropdown menuAlignment="right">
-        <RowDropdown.Item to={serverUrl} className="tw:gap-1.5">
+        <RowDropdown.Item to={serverUrl} className="gap-1.5">
           <FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
         </RowDropdown.Item>
-        <RowDropdown.Item to={`${serverUrl}/edit`} className="tw:gap-1.5">
+        <RowDropdown.Item to={`${serverUrl}/edit`} className="gap-1.5">
           <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
         </RowDropdown.Item>
-        <RowDropdown.Item onClick={() => setAutoConnect(server, !isAutoConnect)} className="tw:gap-1.5">
+        <RowDropdown.Item onClick={() => setAutoConnect(server, !isAutoConnect)} className="gap-1.5">
           <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
         </RowDropdown.Item>
         <RowDropdown.Separator />
-        <RowDropdown.Item className="tw:[&]:text-danger tw:gap-1.5" onClick={showModal}>
+        <RowDropdown.Item className="[&]:text-danger gap-1.5" onClick={showModal}>
           <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
         </RowDropdown.Item>
       </RowDropdown>

src/servers/ServersDropdown.tsx

@@ -1,6 +1,6 @@
 import { faPlus as plusIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Dropdown, NavBar } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Dropdown, NavBar } from '@shlinkio/shlink-frontend-kit';
 import type { SelectedServer, ServersMap } from './data';
 import { getServerId } from './data';
 
@@ -14,7 +14,7 @@ export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProp
 
   return (
     <NavBar.Dropdown buttonContent={(
-      <span className="tw:flex tw:items-center tw:gap-1.5">
+      <span className="flex items-center gap-1.5">
         <FontAwesomeIcon icon={serverIcon} fixedWidth /> Servers
       </span>
     )}>

src/servers/ServersListGroup.tsx

@@ -15,12 +15,12 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
     to={`/server/${id}`}
     className={clsx(
       'servers-list__server-item',
-      'tw:flex tw:items-center tw:justify-between tw:gap-x-2 tw:px-4 tw:py-3',
-      'tw:rounded-none tw:hover:bg-lm-secondary tw:hover:dark:bg-dm-secondary',
-      'tw:border-b tw:last:border-0 tw:border-lm-border tw:dark:border-dm-border',
+      'flex items-center justify-between gap-x-2 px-4 py-3',
+      'rounded-none hover:bg-lm-secondary hover:dark:bg-dm-secondary',
+      'border-b last:border-0 border-lm-border dark:border-dm-border',
     )}
   >
-    <span className="tw:truncate">{name}</span>
+    <span className="truncate">{name}</span>
     <FontAwesomeIcon icon={chevronIcon} />
   </Link>
 );
@@ -31,9 +31,9 @@ export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, borderles
       <div
         data-testid="list"
         className={clsx(
-          'tw:w-full tw:border-lm-border tw:dark:border-dm-border',
-          'tw:md:max-h-56 tw:md:overflow-y-auto tw:-mb-1 tw:scroll-thin',
-          { 'tw:border-y': !borderless },
+          'w-full border-lm-border dark:border-dm-border',
+          'md:max-h-56 md:overflow-y-auto -mb-1 scroll-thin',
+          { 'border-y': !borderless },
         )}
       >
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}

src/servers/helpers/DuplicatedServersModal.tsx

@@ -1,4 +1,4 @@
-import { CardModal } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { CardModal } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Fragment } from 'react';
 import type { ServerData } from '../data';
@@ -26,7 +26,7 @@ export const DuplicatedServersModal: FC<DuplicatedServersModalProps> = (
       cancelText={hasMultipleServers ? 'Ignore duplicates' : 'Discard'}
     >
       <p>{hasMultipleServers ? 'The next servers already exist:' : 'There is already a server with:'}</p>
-      <ul className="tw:list-disc tw:mt-4">
+      <ul className="list-disc mt-4">
         {duplicatedServers.map(({ url, apiKey }, index) => (!hasMultipleServers ? (
           <Fragment key={index}>
             <li>URL: <b>{url}</b></li>

src/servers/helpers/ImportServersBtn.tsx

@@ -1,7 +1,6 @@
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import { Button, Tooltip, useTooltip } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button, Tooltip, useToggle , useTooltip } from '@shlinkio/shlink-frontend-kit';
 import type { ChangeEvent, PropsWithChildren } from 'react';
 import { useCallback, useRef, useState } from 'react';
 import type { FCWithDeps } from '../../container/utils';
@@ -40,7 +39,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { anchor, tooltip } = useTooltip({ placement: tooltipPlacement });
   const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
-  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle(false, true);
+  const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle();
   const newServersCreatedRef = useRef(false);
 
   const onFile = useCallback(
@@ -94,7 +93,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
       <input
         type="file"
         accept=".csv"
-        className="tw:hidden"
+        className="hidden"
         aria-hidden
         tabIndex={-1}
         ref={fileInputRef}

src/servers/helpers/ServerError.tsx

@@ -1,4 +1,4 @@
-import { Card, Message } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Card, Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
@@ -23,8 +23,8 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
 
   return (
     <NoMenuLayout>
-      <div className="tw:flex tw:flex-col tw:items-center tw:gap-y-4 tw:md:gap-y-8">
-        <Message className="tw:w-full tw:lg:w-[80%]" variant="error">
+      <div className="flex flex-col items-center gap-y-4 md:gap-y-8">
+        <Message className="w-full lg:w-[80%]" variant="error">
           {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
           {isServerWithId(selectedServer) && (
             <>
@@ -34,16 +34,16 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
           )}
         </Message>
 
-        <p className="tw:text-xl">
+        <p className="text-xl">
           These are the Shlink servers currently configured. Choose one of
           them or <Link to="/server/create">add a new one</Link>.
         </p>
-        <Card className="tw:w-full tw:max-w-100 tw:overflow-hidden">
+        <Card className="w-full max-w-100 overflow-hidden">
           <ServersListGroup borderless servers={Object.values(servers)} />
         </Card>
 
         {isServerWithId(selectedServer) && (
-          <p className="tw:text-xl">
+          <p className="text-xl">
             Alternatively, if you think you may have misconfigured this server, you
             can <DeleteServerButton server={selectedServer}>remove
               it</DeleteServerButton> or&nbsp;

src/servers/helpers/ServerForm.tsx

@@ -1,12 +1,11 @@
-import { useToggle } from '@shlinkio/shlink-frontend-kit';
-import {
-  Checkbox,
+import {   Checkbox,
   Details,
   Label,
   LabelledInput,
   LabelledRevealablePasswordInput,
   SimpleCard,
-} from '@shlinkio/shlink-frontend-kit/tailwind';
+  useToggle ,
+} from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { useState } from 'react';
 import { usePreventDefault } from '../../utils/utils';
@@ -24,13 +23,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   const [apiKey, setApiKey] = useState(initialValues?.apiKey ?? '');
   const { flag: forwardCredentials, toggle: toggleForwardCredentials } = useToggle(
     initialValues?.forwardCredentials ?? false,
-    true,
   );
   const handleSubmit = usePreventDefault(() => onSubmit({ name, url, apiKey, forwardCredentials }));
 
   return (
     <form name="serverForm" onSubmit={handleSubmit}>
-      <SimpleCard className="tw:mb-4" bodyClassName="tw:flex tw:flex-col tw:gap-y-3" title={title}>
+      <SimpleCard className="mb-4" bodyClassName="flex flex-col gap-y-3" title={title}>
         <LabelledInput label="Name" value={name} onChange={(e) => setName(e.target.value)} required />
         <LabelledInput label="URL" type="url" value={url} onChange={(e) => setUrl(e.target.value)} required />
         <LabelledRevealablePasswordInput
@@ -40,25 +38,25 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
           required
         />
         <Details summary="Advanced options">
-          <div className="tw:flex tw:flex-col tw:gap-0.5">
-            <Label className="tw:flex tw:items-center tw:gap-x-1.5 tw:cursor-pointer">
+          <div className="flex flex-col gap-0.5">
+            <Label className="flex items-center gap-x-1.5 cursor-pointer">
               <Checkbox onChange={toggleForwardCredentials} checked={forwardCredentials} />
               Forward credentials to this server on every request.
             </Label>
-            <small className="tw:pl-5.5 tw:text-gray-600 tw:dark:text-gray-400 tw:mt-0.5">
+            <small className="pl-5.5 text-gray-600 dark:text-gray-400 mt-0.5">
               {'"'}Credentials{'"'} here means cookies, TLS client certificates, or authentication headers containing a username
               and password.
             </small>
-            <small className="tw:pl-5.5 tw:text-gray-600 tw:dark:text-gray-400">
+            <small className="pl-5.5 text-gray-600 dark:text-gray-400">
               <b>Important!</b> If you are not sure what this means, leave it unchecked. Enabling this option will
               make all requests fail for Shlink older than v4.5.0, as it requires the server to set a more strict
-              value for <code className="tw:whitespace-nowrap">Access-Control-Allow-Origin</code> than <code>*</code>.
+              value for <code className="whitespace-nowrap">Access-Control-Allow-Origin</code> than <code>*</code>.
             </small>
           </div>
         </Details>
       </SimpleCard>
 
-      <div className="tw:flex tw:items-center tw:justify-end tw:gap-x-2">{children}</div>
+      <div className="flex items-center justify-end gap-x-2">{children}</div>
     </form>
   );
 };

src/servers/helpers/withSelectedServer.tsx

@@ -1,4 +1,4 @@
-import { Message } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { useParams } from 'react-router';