Merge pull request #723 from acelaya-forks/feature/stable-frontend-kit

Feature/stable frontend kit

Author: acelaya

CHANGELOG.md

@@ -4,12 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.15.0] - 2025-06-17
 ### Added
 * *Nothing*
 
 ### Changed
-* *Nothing*
+* [#661](https://github.com/shlinkio/shlink-web-component/issues/661) Update to shlink-frontend-kit 1.0.0
+* No longer use `!important` with tailwind styles
 
 ### Deprecated
 * *Nothing*

README.md

@@ -150,23 +150,13 @@ export function App() {
 
 ### Styles
 
-Currently, this component depends on `bootstrap`, `@shlinkio/shlink-frontend-kit` and its own stylesheets for proper styling, although bootstrap is being replaced by `tailwind`.
-
-Make sure you import stylesheets in the order documented here for everything to work.
-
-```scss
-// src/index.scss
-@use 'node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet
-@use 'node_modules/bootstrap/scss/bootstrap.scss' with (
-  $primary: base.$mainColor // Override bootstrap's primary color
-);
-@use 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overrides
-@use 'node_modules/@shlinkio/shlink-web-component/dist/index' as c-index;
-```
+Currently, this component depends on `tailwind` and `@shlinkio/shlink-frontend-kit` for proper styling.
+
+Make sure you import stylesheets as documented here for everything to work.
 
 ```css
 /* src/tailwind.css */
-@import 'tailwindcss' prefix(tw);
+@import 'tailwindcss';
 
 /* Add these three lines */
 @source '../node_modules/@shlinkio/shlink-frontend-kit';
@@ -180,8 +170,7 @@ import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import { Checkbox, changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
 import { ShlinkWebComponent } from '@shlinkio/shlink-web-component';
 import { useCallback, useState } from 'react';
-import './src/index.scss'; // The stylesheet above
-import './src/tailwind.css'; // The Tailwind stylesheet above
+import './src/tailwind.css'; // The stylesheet above
 
 export function App() {
   const [theme, setTheme] = useState<Theme>('light');

dev/App.tsx

@@ -42,25 +42,25 @@ export const App: FC = () => {
     <>
       <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',
+          'fixed top-0 left-0 right-0 z-1000',
+          'h-(--header-height) flex justify-between',
+          'bg-lm-main dark:bg-dm-main 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>
-          <Link to="/settings" className="tw:text-white">Settings</Link>
+        <div className="h-full pr-4 flex items-center gap-4">
+          <Link to="/" className="text-white">Home</Link>
+          <Link to="/settings" className="text-white">Settings</Link>
           <ThemeToggle />
         </div>
       </header>
-      <div className="tw:py-(--header-height)">
+      <div className="py-(--header-height)">
         <Routes>
           <Route path="/settings">
             <Route
               path="*"
               element={(
-                <div className="tw:container tw:mx-auto tw:pt-6">
+                <div className="container mx-auto pt-6">
                   <ShlinkWebSettings
                     settings={settings}
                     onUpdateSettings={setSettings}
@@ -80,9 +80,9 @@ export const App: FC = () => {
                 settings={settings}
                 routesPrefix={routesPrefix}
               />
-            ) : <div className="tw:container tw:mx-auto tw:pt-6">Not connected</div>}
+            ) : <div className="container mx-auto pt-6">Not connected</div>}
           />
-          <Route path="*" element={<h3 className="tw:mt-4 tw:text-center">Not found</h3>} />
+          <Route path="*" element={<h3 className="mt-4 text-center">Not found</h3>} />
         </Routes>
       </div>
     </>

dev/ThemeToggle.tsx

@@ -1,6 +1,5 @@
 import type { Theme } from '@shlinkio/shlink-frontend-kit';
-import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
-import { Label, ToggleSwitch } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { changeThemeInMarkup , Label, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
@@ -19,7 +18,7 @@ export const ThemeToggle: FC = () => {
   }, []);
 
   return (
-    <Label className="tw:flex tw:items-center tw:gap-x-1.5">
+    <Label className="flex items-center gap-x-1.5">
       <ToggleSwitch checked={checked} onChange={toggleTheme} /> Dark theme
     </Label>
   );

dev/index.scss

@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router';
 import { App } from './App';
-import './index.scss';
 import './tailwind.css';
 
 createRoot(document.getElementById('root')!).render(

dev/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Input } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button, Input } from '@shlinkio/shlink-frontend-kit';
 import type { FC, FormEvent } from 'react';
 import { useCallback } from 'react';
 import type { ServerInfo } from './useServerInfo';
@@ -24,7 +24,7 @@ export const ServerInfoForm: FC<ServerInfoFormProps> = ({ serverInfo, onChange }
   }, [serverInfo]);
 
   return (
-    <form className="tw:py-2 tw:pl-2 tw:flex tw:gap-2" onSubmit={handleSubmit}>
+    <form className="py-2 pl-2 flex gap-2" onSubmit={handleSubmit}>
       <Input
         name="baseUrl"
         placeholder="Server URL"

dev/server-info/ServerInfoForm.tsx

@@ -1,11 +1,4 @@
-@import 'tailwindcss' prefix(tw) important;
+@import 'tailwindcss';
 @source '../node_modules/@shlinkio/shlink-frontend-kit';
 @import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
 @import '../src/tailwind.preset.css';
-
-@layer base {
-    :root {
-        /* Temp alias fo header-height to tw-header-height, so that shlink-web-component uses the right value  */
-        --header-height: var(--tw-header-height);
-    }
-}