From aefe5e0848dbc92e72ad6f72c1a5eecf56be0d8c Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Thu, 3 Apr 2025 08:59:06 +0200 Subject: [PATCH] Migrate ServersListGroup to tailwind components --- src/common/Home.tsx | 2 +- src/servers/ServersListGroup.scss | 49 -------------------------- src/servers/ServersListGroup.tsx | 35 +++++++++++------- src/servers/helpers/ServerError.tsx | 20 ++++++----- src/tailwind.css | 13 +++++++ src/utils/mixins/thin-scroll.scss | 16 --------- test/servers/ServersListGroup.test.tsx | 24 ++++++++----- 7 files changed, 62 insertions(+), 97 deletions(-) delete mode 100644 src/servers/ServersListGroup.scss delete mode 100644 src/utils/mixins/thin-scroll.scss diff --git a/src/common/Home.tsx b/src/common/Home.tsx index 23e3e819..4258ac65 100644 --- a/src/common/Home.tsx +++ b/src/common/Home.tsx @@ -45,7 +45,7 @@ export const Home = ({ servers }: HomeProps) => { > Welcome! - + {!hasServers && (

This application will help you manage your Shlink servers.

diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss deleted file mode 100644 index 6e21e602..00000000 --- a/src/servers/ServersListGroup.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base'; -@use '../utils/mixins/vertical-align'; -@use '../utils/mixins/thin-scroll'; - -.servers-list__list-group.servers-list__list-group { - width: 100%; -} - -.servers-list__list-group:not(.servers-list__list-group--embedded) { - max-width: 400px; - box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075); -} - -.servers-list__server-item.servers-list__server-item { - text-align: left; - position: relative; - padding: .75rem 2.5rem .75rem 1rem; -} - -.servers-list__server-item:not(:hover) { - color: base.$mainColor; -} - -.servers-list__server-item:hover { - background-color: var(--secondary-color); -} - -.servers-list__server-item-icon { - @include vertical-align.vertical-align(); - - right: 1rem; -} - -.servers-list__list-group--embedded.servers-list__list-group--embedded { - border-radius: 0; - border-top: 1px solid var(--border-color); - - @media (min-width: base.$mdMin) { - max-height: 220px; - overflow-x: auto; - - @include thin-scroll.thin-scroll(); - } - - .servers-list__server-item { - border: none; - border-bottom: 1px solid var(--border-color); - } -} diff --git a/src/servers/ServersListGroup.tsx b/src/servers/ServersListGroup.tsx index 832c2f7f..0d8d1af8 100644 --- a/src/servers/ServersListGroup.tsx +++ b/src/servers/ServersListGroup.tsx @@ -3,33 +3,42 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { clsx } from 'clsx'; import type { FC, PropsWithChildren } from 'react'; import { Link } from 'react-router'; -import { ListGroup, ListGroupItem } from 'reactstrap'; import type { ServerWithId } from './data'; -import './ServersListGroup.scss'; type ServersListGroupProps = PropsWithChildren<{ servers: ServerWithId[]; - embedded?: boolean; + borderless?: boolean; }>; const ServerListItem = ({ id, name }: { id: string; name: string }) => ( - - {name} - - + + {name} + + ); -export const ServersListGroup: FC = ({ servers, children, embedded = false }) => ( +export const ServersListGroup: FC = ({ servers, children, borderless }) => ( <> - {children &&
{children}
} + {children &&
{children}
} {servers.length > 0 && ( - {servers.map(({ id, name }) => )} - +
)} ); diff --git a/src/servers/helpers/ServerError.tsx b/src/servers/helpers/ServerError.tsx index 16b894d3..826e2947 100644 --- a/src/servers/helpers/ServerError.tsx +++ b/src/servers/helpers/ServerError.tsx @@ -1,4 +1,4 @@ -import { Message } from '@shlinkio/shlink-frontend-kit/tailwind'; +import { Card, Message } from '@shlinkio/shlink-frontend-kit/tailwind'; import type { FC } from 'react'; import { Link } from 'react-router'; import { NoMenuLayout } from '../../common/NoMenuLayout'; @@ -35,18 +35,20 @@ const ServerError: FCWithDeps = ({ servers, s )} - -

- These are the Shlink servers currently configured. Choose one of - them or add a new one. -

- +

+ These are the Shlink servers currently configured. Choose one of + them or add a new one. +

+ + + {isServerWithId(selectedServer) && (
-

+

Alternatively, if you think you may have misconfigured this server, you - can remove it or  + can remove + it or  edit it.

diff --git a/src/tailwind.css b/src/tailwind.css index 21d51c4a..568bcdef 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -1,3 +1,16 @@ @import 'tailwindcss' prefix(tw) important; @source '../node_modules/@shlinkio/shlink-frontend-kit'; @import '@shlinkio/shlink-frontend-kit/tailwind.preset.css'; + +@utility scroll-thin { + /* Standard. New browsers */ + scrollbar-width: thin; + + /* Fallback */ + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-thumb { + border-radius: .5rem; + } +} diff --git a/src/utils/mixins/thin-scroll.scss b/src/utils/mixins/thin-scroll.scss deleted file mode 100644 index ae243490..00000000 --- a/src/utils/mixins/thin-scroll.scss +++ /dev/null @@ -1,16 +0,0 @@ -@mixin thin-scroll() { - /* Forefox scrollbar */ - scrollbar-color: rgba(0, 0, 0, .2) #f5f5f5; - scrollbar-width: thin; - - /* Chrome webkit scrollbar */ - &::-webkit-scrollbar { - width: 6px; - background-color: #f5f5f5; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, .2); - border-radius: .5rem; - } -} diff --git a/test/servers/ServersListGroup.test.tsx b/test/servers/ServersListGroup.test.tsx index 1e32e8ad..cc2479c6 100644 --- a/test/servers/ServersListGroup.test.tsx +++ b/test/servers/ServersListGroup.test.tsx @@ -10,12 +10,12 @@ describe('', () => { fromPartial({ name: 'foo', id: '123' }), fromPartial({ name: 'bar', id: '456' }), ]; - const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean } = {}) => { - const { servers = [], withChildren = true, embedded } = params; + const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; borderless?: boolean } = {}) => { + const { servers = [], withChildren = true, borderless } = params; return render( - + {withChildren ? 'The list of servers' : undefined} , @@ -45,11 +45,17 @@ describe('', () => { }); it.each([ - [true, 'servers-list__list-group servers-list__list-group--embedded'], - [false, 'servers-list__list-group'], - [undefined, 'servers-list__list-group'], - ])('renders proper classes for embedded', (embedded, expectedClasses) => { - setUp({ servers, embedded }); - expect(screen.getByTestId('list')).toHaveAttribute('class', `${expectedClasses} list-group`); + [true], + [false], + [undefined], + ])('renders proper classes for embedded', (borderless) => { + setUp({ servers, borderless }); + const list = screen.getByTestId('list'); + + if (!borderless) { + expect(list).toHaveClass('tw:border-y'); + } else { + expect(list).not.toHaveClass('tw:border-y'); + } }); });