Migrate dev to tailwind utility classes

Author: acelaya

dev/App.tsx

@@ -1,5 +1,6 @@
 import { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
 import { FetchHttpClient } from '@shlinkio/shlink-js-sdk/fetch';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useCallback , useEffect, useMemo, useState } from 'react';
 import { Link, Navigate, Route, Routes, useLocation } from 'react-router';
@@ -39,21 +40,24 @@ export const App: FC = () => {
 
   return (
     <>
-      <header className="header fixed-top text-white d-flex justify-content-between">
+      <header className={clsx(
+        'tw:h-(--header-height) tw:fixed tw:top-0 tw:left-0 tw:right-0 tw:flex tw:justify-between',
+        'tw:bg-lm-main tw:dark:bg-dm-main tw:text-white',
+      )}>
         <ServerInfoForm serverInfo={serverInfo} onChange={onServerInfoChange} />
         <div className="tw:h-full tw:pr-4 tw:flex tw:items-center tw:gap-4">
-          <Link to="/" className="text-white">Home</Link>
-          <Link to="/settings" className="text-white">Settings</Link>
+          <Link to="/" className="tw:text-white">Home</Link>
+          <Link to="/settings" className="tw:text-white">Settings</Link>
           <ThemeToggle />
         </div>
       </header>
-      <div className="wrapper">
+      <div className="tw:py-(--header-height)">
         <Routes>
           <Route path="/settings">
             <Route
               path="*"
               element={(
-                <div className="container pt-4">
+                <div className="tw:container tw:mx-auto tw:pt-6">
                   <ShlinkWebSettings
                     settings={settings}
                     onUpdateSettings={setSettings}
@@ -73,9 +77,9 @@ export const App: FC = () => {
                 settings={settings}
                 routesPrefix={routesPrefix}
               />
-            ) : <div className="container pt-4">Not connected</div>}
+            ) : <div className="tw:container tw:mx-auto tw:pt-6">Not connected</div>}
           />
-          <Route path="*" element={<h3 className="mt-3 text-center">Not found</h3>} />
+          <Route path="*" element={<h3 className="tw:mt-4 tw:text-center">Not found</h3>} />
         </Routes>
       </div>
     </>

dev/index.scss

@@ -4,12 +4,3 @@
 );
 @use '../node_modules/@shlinkio/shlink-frontend-kit/dist/index';
 @use '../src/index.scss' as dev-index;
-
-.header {
-  height: base.$headerHeight;
-  background-color: var(--brand-color);
-}
-
-.wrapper {
-  padding: base.$headerHeight 0;
-}

dev/server-info/ServerInfoForm.tsx

@@ -24,7 +24,7 @@ export const ServerInfoForm: FC<ServerInfoFormProps> = ({ serverInfo, onChange }
   }, [serverInfo]);
 
   return (
-    <form className="py-2 ps-2 d-flex gap-2" onSubmit={handleSubmit}>
+    <form className="tw:py-2 tw:pl-2 tw:flex tw:gap-2" onSubmit={handleSubmit}>
       <Input
         name="baseUrl"
         placeholder="Server URL"

package-lock.json

@@ -51,8 +51,7 @@
     "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": {

package.json

@@ -39,8 +39,7 @@ describe('<ShortUrlsFilterDropdown />', () => {
 
   it.each([
     [() => setUp({ filterShortUrlsByDomain: true })],
-    // TODO Enable back once https://github.com/reactstrap/reactstrap/issues/2759 is fixed
-    // [() => setUpOpened({ filterShortUrlsByDomain: true })],
+    [() => setUpOpened({ filterShortUrlsByDomain: true })],
   ])('passes a11y checks', (setUp) => checkAccessibility(setUp()));
 
   it.each([

test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx

@@ -101,9 +101,6 @@ export default defineConfig({
       },
     },
 
-    // Silent warnings due to use of propTypes in reactstrap
-    onConsoleLog: (log) => !log.includes('Support for defaultProps will be removed'),
-
     // Workaround for bug in react-router (or vitest module resolution) which causes different react-router versions to
     // be resolved for the main package and dependencies which have a peer dependency in react-router.
     // This ensures always the same version is resolved.