Merge pull request #712 from acelaya-forks/feature/bootstrapless

Remove bootstrap dev dependency

Author: acelaya

dev/App.tsx

@@ -40,10 +40,13 @@ export const App: FC = () => {
 
   return (
     <>
-      <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',
-      )}>
+      <header
+        className={clsx(
+          'tw:fixed tw:top-0 tw:left-0 tw:right-0 tw:z-1000',
+          'tw:h-(--header-height) 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="tw:text-white">Home</Link>

dev/index.scss

@@ -1,6 +1,3 @@
 @use '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@use '../node_modules/bootstrap/scss/bootstrap.scss' with (
-  $primary: base.$mainColor
-);
 @use '../node_modules/@shlinkio/shlink-frontend-kit/dist/index';
 @use '../src/index.scss' as dev-index;

package-lock.json

@@ -46,7 +46,7 @@
     "@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.9",
+    "@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",
@@ -92,7 +92,6 @@
     "@vitest/browser": "^3.2.2",
     "@vitest/coverage-v8": "^3.2.2",
     "axe-core": "^4.10.3",
-    "bootstrap": "5.2.3",
     "eslint": "^9.28.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",

package.json

@@ -90,7 +90,7 @@ const Main: FCWithDeps<MainProps, MainDeps> = ({ createNotFound }) => {
             className="tw:min-h-full tw:pt-[20px] tw:md:pt-[30px] tw:md:pl-(--aside-menu-width)"
             onPointerDown={hideSidebar}
           >
-            <div className="container-xl">
+            <div className="tw:container tw:mx-auto tw:px-3">
               <Routes>
                 <Route index element={<Navigate replace to="overview" />} />
                 <Route path="/overview" element={<Overview />} />

src/Main.tsx

@@ -15,7 +15,7 @@ const InfoModal = (props: { open: boolean; onClose: () => void }) => (
       <p>
         These are the checks performed by Shlink in order to determine if an existing short URL should be returned:
       </p>
-      <ul className="tw:list-disc tw:mb-0">
+      <ul className="tw:list-disc tw:pl-5">
         <li>
           When only the long URL is provided: The most recent match will be returned, or a new short URL will be
           created

src/short-urls/UseExistingIfFoundInfoIcon.tsx

@@ -6,6 +6,7 @@ import { Button, CardModal } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { DrawType } from 'qr-code-styling';
 import type { ChangeEvent, FC } from 'react';
 import { useCallback, useRef, useState } from 'react';
+import { ExternalLink } from 'react-external-link';
 import type { QrCodeSettings } from '../../settings';
 import { defaultQrCodeSettings, useSetting } from '../../settings';
 import { ColorInput } from '../../utils/components/ColorInput';
@@ -60,8 +61,13 @@ export const QrCodeModal: FC<QrCodeModalProps> = (
   }, [initialQrSettings]);
 
   return (
-    // TODO Use a link for the header's shortURL as soon as title can be a ReactNode
-    <CardModal open={isOpen} onClose={onClose} title={`QR code for ${shortUrl}`} size="lg" onClosed={resetOptions}>
+    <CardModal
+      size="lg"
+      open={isOpen}
+      onClose={onClose}
+      title={<>QR code for <ExternalLink href={shortUrl} /></>}
+      onClosed={resetOptions}
+    >
       <div className="tw:flex tw:flex-col-reverse tw:lg:flex-row tw:gap-4">
         <div className="tw:grow tw:flex tw:items-center tw:justify-around">
           <div className="tw:flex tw:flex-col tw:gap-1 tw:items-center" data-testid="qr-code-container">

src/short-urls/helpers/QrCodeModal.tsx

@@ -43,7 +43,7 @@ export const ShortUrlVisitsCount = (
         </small>
       </span>
       <Tooltip {...tooltip}>
-        <ul className="tw:p-0 tw:m-0 tw:flex tw:flex-col tw:gap-y-2">
+        <ul className="tw:flex tw:flex-col tw:gap-y-2">
           {maxVisits && (
             <li>
               This short URL will not accept more than <b>{formatNumber(maxVisits)}</b> visit{maxVisits === 1 ? '' : 's'}.

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -4,7 +4,7 @@ import type { FC, HTMLProps } from 'react';
 export const UnstyledButton: FC<Omit<HTMLProps<HTMLButtonElement>, 'type'>> = ({ className, ...rest }) => (
   <button
     type="button"
-    className={clsx('tw:rounded-sm tw:focus-ring', className)}
+    className={clsx('tw:rounded-sm tw:focus-ring tw:cursor-pointer', className)}
     {...rest}
   />
 );

src/utils/components/UnstyledButton.tsx

@@ -35,7 +35,7 @@ export const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, shortUrl, children
         <small>{title}</small>
       </h3>
 
-      {children && <div className="tw:md:mt-2">{children}</div>}
+      {children && <div className="tw:md:mt-3">{children}</div>}
     </SimpleCard>
   </header>
 );