Skip to content

Commit cb977b8

Browse files
acelayaacelaya
committed
Migrate to stable shlink-frontend-kit
1 parent 523b731 commit cb977b8

123 files changed

Lines changed: 765 additions & 781 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎dev/App.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,25 +42,25 @@ export const App: FC = () => {
4242
<>
4343
<header
4444
className={clsx(
45-
'tw:fixed tw:top-0 tw:left-0 tw:right-0 tw:z-1000',
46-
'tw:h-(--header-height) tw:flex tw:justify-between',
47-
'tw:bg-lm-main tw:dark:bg-dm-main tw:text-white',
45+
'fixed top-0 left-0 right-0 z-1000',
46+
'h-(--header-height) flex justify-between',
47+
'bg-lm-main dark:bg-dm-main text-white',
4848
)}
4949
>
5050
<ServerInfoForm serverInfo={serverInfo} onChange={onServerInfoChange} />
51-
<div className="tw:h-full tw:pr-4 tw:flex tw:items-center tw:gap-4">
52-
<Link to="/" className="tw:text-white">Home</Link>
53-
<Link to="/settings" className="tw:text-white">Settings</Link>
51+
<div className="h-full pr-4 flex items-center gap-4">
52+
<Link to="/" className="text-white">Home</Link>
53+
<Link to="/settings" className="text-white">Settings</Link>
5454
<ThemeToggle />
5555
</div>
5656
</header>
57-
<div className="tw:py-(--header-height)">
57+
<div className="py-(--header-height)">
5858
<Routes>
5959
<Route path="/settings">
6060
<Route
6161
path="*"
6262
element={(
63-
<div className="tw:container tw:mx-auto tw:pt-6">
63+
<div className="container mx-auto pt-6">
6464
<ShlinkWebSettings
6565
settings={settings}
6666
onUpdateSettings={setSettings}
@@ -80,9 +80,9 @@ export const App: FC = () => {
8080
settings={settings}
8181
routesPrefix={routesPrefix}
8282
/>
83-
) : <div className="tw:container tw:mx-auto tw:pt-6">Not connected</div>}
83+
) : <div className="container mx-auto pt-6">Not connected</div>}
8484
/>
85-
<Route path="*" element={<h3 className="tw:mt-4 tw:text-center">Not found</h3>} />
85+
<Route path="*" element={<h3 className="mt-4 text-center">Not found</h3>} />
8686
</Routes>
8787
</div>
8888
</>

‎dev/ThemeToggle.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { Theme } from '@shlinkio/shlink-frontend-kit';
2-
import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
3-
import { Label, ToggleSwitch } from '@shlinkio/shlink-frontend-kit/tailwind';
2+
import { changeThemeInMarkup , Label, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
43
import type { FC } from 'react';
54
import { useCallback, useState } from 'react';
65

@@ -19,7 +18,7 @@ export const ThemeToggle: FC = () => {
1918
}, []);
2019

2120
return (
22-
<Label className="tw:flex tw:items-center tw:gap-x-1.5">
21+
<Label className="flex items-center gap-x-1.5">
2322
<ToggleSwitch checked={checked} onChange={toggleTheme} /> Dark theme
2423
</Label>
2524
);

‎dev/index.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎dev/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { createRoot } from 'react-dom/client';
22
import { BrowserRouter } from 'react-router';
33
import { App } from './App';
4-
import './index.scss';
54
import './tailwind.css';
65

76
createRoot(document.getElementById('root')!).render(

‎dev/server-info/ServerInfoForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Input } from '@shlinkio/shlink-frontend-kit/tailwind';
1+
import { Button, Input } from '@shlinkio/shlink-frontend-kit';
22
import type { FC, FormEvent } from 'react';
33
import { useCallback } from 'react';
44
import type { ServerInfo } from './useServerInfo';
@@ -24,7 +24,7 @@ export const ServerInfoForm: FC<ServerInfoFormProps> = ({ serverInfo, onChange }
2424
}, [serverInfo]);
2525

2626
return (
27-
<form className="tw:py-2 tw:pl-2 tw:flex tw:gap-2" onSubmit={handleSubmit}>
27+
<form className="py-2 pl-2 flex gap-2" onSubmit={handleSubmit}>
2828
<Input
2929
name="baseUrl"
3030
placeholder="Server URL"

‎dev/tailwind.css‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
@import 'tailwindcss' prefix(tw) important;
1+
@import 'tailwindcss' important;
22
@source '../node_modules/@shlinkio/shlink-frontend-kit';
33
@import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
44
@import '../src/tailwind.preset.css';
5-
6-
@layer base {
7-
:root {
8-
/* Temp alias fo header-height to tw-header-height, so that shlink-web-component uses the right value */
9-
--header-height: var(--tw-header-height);
10-
}
11-
}

‎package-lock.json‎

Lines changed: 25 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@
100100
"eslint-plugin-simple-import-sort": "^12.1.1",
101101
"history": "^5.3.0",
102102
"playwright": "^1.53.0",
103-
"sass": "^1.89.2",
104103
"tailwindcss": "^4.1.5",
105104
"typescript": "^5.8.3",
106105
"typescript-eslint": "^8.34.0",

‎src/Main.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,7 @@ const Main: FCWithDeps<MainProps, MainDeps> = ({ createNotFound }) => {
5656
const location = useLocation();
5757
const routesPrefix = useRoutesPrefix();
5858

59-
const { flag: sidebarVisible, toggle: toggleSidebar, setToTrue: showSidebar, setToFalse: hideSidebar } = useToggle(
60-
false,
61-
true,
62-
);
59+
const { flag: sidebarVisible, toggle: toggleSidebar, setToTrue: showSidebar, setToFalse: hideSidebar } = useToggle();
6360

6461
// Hide sidebar every time the route changes
6562
useEffect(() => hideSidebar(), [location, hideSidebar]);
@@ -72,26 +69,26 @@ const Main: FCWithDeps<MainProps, MainDeps> = ({ createNotFound }) => {
7269
<UnstyledButton
7370
aria-label="Toggle sidebar"
7471
className={clsx(
75-
'tw:fixed tw:top-4 tw:left-3 tw:z-1035',
76-
'tw:md:hidden tw:transition-colors',
72+
'fixed top-4 left-3 z-1035',
73+
'md:hidden transition-colors',
7774
{
78-
'tw:text-white/50': !sidebarVisible,
79-
'tw:text-white': sidebarVisible,
75+
'text-white/50': !sidebarVisible,
76+
'text-white': sidebarVisible,
8077
},
8178
)}
8279
onClick={toggleSidebar}
8380
>
8481
<FontAwesomeIcon icon={burgerIcon} size="xl" />
8582
</UnstyledButton>
8683

87-
<div {...swipeableProps} className="tw:h-full">
88-
<div className="tw:h-full">
84+
<div {...swipeableProps} className="h-full">
85+
<div className="h-full">
8986
<AsideMenu routePrefix={routesPrefix} showOnMobile={sidebarVisible} />
9087
<div
91-
className="tw:min-h-full tw:pt-[20px] tw:md:pt-[30px] tw:md:pl-(--aside-menu-width)"
88+
className="min-h-full pt-[20px] md:pt-[30px] md:pl-(--aside-menu-width)"
9289
onPointerDown={hideSidebar}
9390
>
94-
<div className="tw:container tw:mx-auto tw:px-3">
91+
<div className="container mx-auto px-3">
9592
<Routes>
9693
<Route index element={<Navigate replace to="overview" />} />
9794
<Route path="/overview" element={<Overview />} />

‎src/common/AsideMenu.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ const AsideMenuItem: FC<AsideMenuItem> = ({ children, to, active, ...rest }) =>
2424
<NavLink
2525
{...rest}
2626
className={({ isActive }) => clsx(
27-
'tw:flex tw:items-center tw:gap-2',
28-
'tw:no-underline tw:rounded-none tw:px-5 tw:py-2.5',
27+
'flex items-center gap-2',
28+
'no-underline rounded-none px-5 py-2.5',
2929
{
30-
'tw:text-white tw:bg-lm-main tw:dark:bg-dm-main': isActive || active,
31-
'tw:highlight:bg-lm-secondary tw:highlight:dark:bg-dm-secondary': !isActive && !active,
30+
'text-white bg-lm-main dark:bg-dm-main': isActive || active,
31+
'highlight:bg-lm-secondary highlight:dark:bg-dm-secondary': !isActive && !active,
3232
},
3333
)}
3434
to={to}
@@ -44,17 +44,17 @@ export const AsideMenu: FC<AsideMenuProps> = ({ routePrefix, showOnMobile = fals
4444
return (
4545
<aside
4646
className={clsx(
47-
'tw:w-(--aside-menu-width) tw:bg-lm-primary tw:dark:bg-dm-primary',
48-
'tw:pt-[15px] tw:md:pt-[30px] tw:pb-[10px]',
49-
'tw:fixed! tw:bottom-0 tw:top-(--header-height) tw:z-890 tw:transition-[left] tw:duration-300',
50-
'tw:shadow-aside-menu-mobile tw:md:shadow-aside-menu',
47+
'w-(--aside-menu-width) bg-lm-primary dark:bg-dm-primary',
48+
'pt-[15px] md:pt-[30px] pb-[10px]',
49+
'fixed! bottom-0 top-(--header-height) z-890 transition-[left] duration-300',
50+
'shadow-aside-menu-mobile md:shadow-aside-menu',
5151
{
52-
'tw:left-0': showOnMobile,
53-
'tw:max-md:left-[calc(-1*(var(--aside-menu-width)+35px))]': !showOnMobile,
52+
'left-0': showOnMobile,
53+
'max-md:left-[calc(-1*(var(--aside-menu-width)+35px))]': !showOnMobile,
5454
},
5555
)}
5656
>
57-
<nav className="tw:flex tw:flex-col tw:h-full">
57+
<nav className="flex flex-col h-full">
5858
<AsideMenuItem to={buildPath('/overview')}>
5959
<FontAwesomeIcon fixedWidth icon={overviewIcon} />
6060
Overview

0 commit comments

Comments
 (0)