Update to shlink-frontend-kit 1.0.0

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*
+* Update to shlink-frontend-kit 1.0.0
+* No longer use `!important` with tailwind styles
 
 ### Deprecated
 * *Nothing*

dev/tailwind.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss' important;
+@import 'tailwindcss';
 @source '../node_modules/@shlinkio/shlink-frontend-kit';
 @import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
 @import '../src/tailwind.preset.css';

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.13",
+    "@shlinkio/shlink-frontend-kit": "^1.0.0",
     "@shlinkio/shlink-js-sdk": "^2.0.0",
     "react": "^18.3 || ^19.0",
     "react-dom": "^18.3 || ^19.0",

package.json

@@ -1,9 +1,10 @@
 import {
+  brandColor,
+  brandColorAlpha,
   formatNumber,  HIGHLIGHTED_COLOR,
   HIGHLIGHTED_COLOR_ALPHA,
   isDarkThemeEnabled,
-  MAIN_COLOR,
-  MAIN_COLOR_ALPHA } from '@shlinkio/shlink-frontend-kit';
+} from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 import { Bar, CartesianGrid, Cell, ComposedChart, Tooltip, XAxis, YAxis } from 'recharts';
@@ -99,12 +100,12 @@ export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
           dataKey="nonHighlightedAmount"
           stackId="main"
           cursor="pointer"
-          fill={MAIN_COLOR /* This needs to be set as it is the color used in the tooltip */}
+          fill={brandColor() /* This needs to be set as it is the color used in the tooltip */}
           onClick={({ name }: HorizontalBarChartEntry) => onClick?.(name)}
         >
           {chartData.map((entry) => (
             // Using a Cell, to define a different fill color, without affecting the one used for the tooltip
-            <Cell key={entry.name} fill={MAIN_COLOR_ALPHA} stroke={MAIN_COLOR} strokeWidth={2} />
+            <Cell key={entry.name} fill={brandColorAlpha()} stroke={brandColor()} strokeWidth={2} />
           ))}
         </Bar>
         {highlightedStats && (

src/visits/charts/HorizontalBarChart.tsx

@@ -4,7 +4,16 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { countBy } from '@shlinkio/data-manipulation';
-import { Card, Dropdown, formatNumber, HIGHLIGHTED_COLOR, isDarkThemeEnabled, LinkButton,MAIN_COLOR, useToggle  } from '@shlinkio/shlink-frontend-kit';
+import {
+  brandColor,
+  Card,
+  Dropdown,
+  formatNumber,
+  HIGHLIGHTED_COLOR,
+  isDarkThemeEnabled,
+  LinkButton,
+  useToggle,
+} from '@shlinkio/shlink-frontend-kit';
 import { clsx } from 'clsx';
 import type { Duration } from 'date-fns';
 import {
@@ -158,11 +167,11 @@ export const visitsListColor = (v: VisitsList) => {
   }
 
   const typeColorMap: Record<NonNullable<VisitsList['type']>, string> = {
-    main: MAIN_COLOR,
+    main: brandColor(),
     highlighted: HIGHLIGHTED_COLOR,
     previous: prevColor(),
   };
-  return v.type ? typeColorMap[v.type] : MAIN_COLOR;
+  return v.type ? typeColorMap[v.type] : brandColor();
 };
 
 const useVisitsWithType = (visitsGroups: Record<string, VisitsList>, type: VisitsList['type']) => useMemo(

src/visits/charts/LineChartCard.tsx

@@ -1,4 +1,4 @@
-import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
+import { brandColor } from '@shlinkio/shlink-frontend-kit';
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { ReactNode } from 'react';
@@ -11,7 +11,7 @@ import { renderWithEvents } from '../../__helpers__/setUpTest';
 describe('<Tag />', () => {
   const onClick = vi.fn();
   const onClose = vi.fn();
-  const stylesForKey = vi.fn(() => ({ backgroundColor: MAIN_COLOR }));
+  const stylesForKey = vi.fn(() => ({ backgroundColor: brandColor() }));
   const colorGenerator = fromPartial<ColorGenerator>({ stylesForKey });
   const setUp = (text: string, clearable?: boolean, children?: ReactNode) => {
     const props = !clearable ? { onClick } : { onClose };
@@ -25,7 +25,7 @@ describe('<Tag />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp('the-tag')));
 
   it.each([
-    [MAIN_COLOR],
+    [brandColor()],
     ['#8A661C'],
     ['#F7BE05'],
     ['#5A02D8'],

test/tags/helpers/Tag.test.tsx

@@ -1,4 +1,4 @@
-import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
+import { brandColor } from '@shlinkio/shlink-frontend-kit';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
 import type { TagColorsStorage } from '../../../src/utils/services/TagColorsStorage';
@@ -47,7 +47,7 @@ describe('ColorGenerator', () => {
 
   describe('stylesForKey', () => {
     it.each([
-      [MAIN_COLOR, '#222'],
+      [brandColor(), '#222'],
       ['#8A661C', '#fff'],
       ['#F7BE05', '#222'],
       ['#5A02D8', '#fff'],