Merge pull request #714 from acelaya-forks/feature/tags-auto-complete

Migrate from react-tag-autocomplete to TagsAutocomplete component

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ 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]
+### Added
+* *Nothing*
+
+### Changed
+* Replace `react-tag-autocomplete` with `TagsAutocomplete` from shlink-frontend-kit.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.14.2] - 2025-06-11
 ### Added
 * *Nothing*

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.10",
+    "@shlinkio/shlink-frontend-kit": "^0.9.11",
     "@shlinkio/shlink-js-sdk": "^2.0.0",
     "react": "^18.3 || ^19.0",
     "react-dom": "^18.3 || ^19.0",
@@ -73,7 +73,6 @@
     "react-external-link": "^2.5.0",
     "react-leaflet": "^4.2.1 || ^5.0",
     "react-swipeable": "^7.0.2",
-    "react-tag-autocomplete": "^7.5.0",
     "recharts": "^2.15.3"
   },
   "devDependencies": {

package.json

@@ -1,5 +1,4 @@
 @use '../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@use './tags/react-tag-autocomplete';
 @use 'leaflet/dist/leaflet.css';
 
 dialog .leaflet-top .leaflet-control {

src/index.scss

@@ -90,6 +90,7 @@ const ShortUrlsFilteringBar: FCWithDeps<ShortUrlsFilteringConnectProps, ShortUrl
             tags={tagsList.tags}
             selectedTags={tags}
             onChange={changeTagSelection}
+            containerClassName={clsx(tags.length > 1 && 'tw:[&]:rounded-r-none')}
           />
         </div>
         {tags.length > 1 && (

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -1,109 +1,31 @@
-import { clsx } from 'clsx';
-import type { RefObject } from 'react';
-import { useRef } from 'react';
-import type { OptionRendererProps, ReactTagsAPI, TagRendererProps, TagSuggestion } from 'react-tag-autocomplete';
-import { ReactTags } from 'react-tag-autocomplete';
+import type { TagsAutocompleteProps } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { TagsAutocomplete } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';
 import { useSetting } from '../../settings';
 import type { ColorGenerator } from '../../utils/services/ColorGenerator';
-import { normalizeTag } from './index';
-import { Tag } from './Tag';
-import { TagBullet } from './TagBullet';
-
-let tagId = 1;
-
-const NOT_FOUND_TAG = 'Tag not found';
-const NEW_TAG = 'Add tag';
-const isSelectableOption = (tag: string) => tag !== NOT_FOUND_TAG;
-const isNewOption = (tag: string) => tag === NEW_TAG;
-const toTagObject = (tag: string): TagSuggestion => {
-  // react-tag-autocomplete uses the value to determine if a tag is already added, removing it in that case.
-  // Using a unique value ensures all tags are always considered new, together with a `Set` to ignore duplicates later.
-  tagId += 1;
-  return { label: tag, value: `${tag}${tagId}` };
-};
-
-const buildTagRenderer = (colorGenerator: ColorGenerator) => ({ tag, onClick: deleteTag }: TagRendererProps) => (
-  <Tag colorGenerator={colorGenerator} text={tag.label} className="react-tags__tag" onClose={deleteTag} />
-);
-const buildOptionRenderer = (colorGenerator: ColorGenerator, api: RefObject<ReactTagsAPI | null>) => (
-  { option, classNames: classes, ...rest }: OptionRendererProps,
-) => {
-  const isSelectable = isSelectableOption(option.label);
-  const isNew = isNewOption(option.label);
-
-  return (
-    <div
-      className={clsx(classes.option, {
-        [classes.optionIsActive]: isSelectable && option.active,
-        'react-tags__listbox-option--not-selectable': !isSelectable,
-      })}
-      {...rest}
-    >
-      {!isSelectable ? <i>{option.label}</i> : (
-        <>
-          {!isNew && <TagBullet tag={`${option.label}`} colorGenerator={colorGenerator} />}
-          {!isNew ? option.label : <i>Add &quot;{normalizeTag(api.current?.input.value ?? '')}&quot;</i>}
-        </>
-      )}
-    </div>
-  );
-};
 
 export type TagsSelectorProps = {
-  tags: string[];
-  selectedTags: string[];
   onChange: (tags: string[]) => void;
-  placeholder?: string;
-  /** If true, it won't allow adding new tags */
-  immutable?: boolean;
-};
+} & Pick<TagsAutocompleteProps, 'tags' | 'selectedTags' | 'placeholder' | 'immutable' | 'containerClassName'>;
 
 type TagsSelectorDeps = {
   ColorGenerator: ColorGenerator;
 };
 
-const TagsSelector: FCWithDeps<TagsSelectorProps, TagsSelectorDeps> = (
-  { selectedTags, onChange, placeholder, tags, immutable = false },
-) => {
+const TagsSelector: FCWithDeps<TagsSelectorProps, TagsSelectorDeps> = ({ onChange, placeholder, ...rest }) => {
   const { ColorGenerator: colorGenerator } = useDependencies(TagsSelector);
   const shortUrlCreation = useSetting('shortUrlCreation');
   const searchMode = shortUrlCreation?.tagFilteringMode ?? 'startsWith';
-  const apiRef = useRef<ReactTagsAPI>(null);
 
   return (
-    <ReactTags
-      ref={apiRef}
-      selected={selectedTags.map(toTagObject)}
-      suggestions={tags.filter((tag) => !selectedTags.includes(tag)).map(toTagObject)}
-      renderTag={buildTagRenderer(colorGenerator)}
-      // eslint-disable-next-line react-compiler/react-compiler
-      renderOption={buildOptionRenderer(colorGenerator, apiRef)}
-      activateFirstOption
-      allowNew={!immutable}
-      newOptionText={NEW_TAG}
-      noOptionsText={NOT_FOUND_TAG}
-      placeholderText={placeholder ?? 'Add tags to the URL'}
-      delimiterKeys={['Enter', ',']}
-      suggestionsTransform={
-        (query, suggestions) => {
-          const searchTerm = query.toLowerCase().trim();
-          return searchTerm.length < 1 ? [] : [...suggestions.filter(
-            ({ label }) => (searchMode === 'includes' ? label.includes(searchTerm) : label.startsWith(searchTerm)),
-          )].slice(0, 5);
-        }
-      }
-      onDelete={(removedTagIndex) => {
-        const tagsCopy = [...selectedTags];
-        tagsCopy.splice(removedTagIndex, 1);
-        onChange(tagsCopy);
-      }}
-      onAdd={({ label: newTag }) => onChange(
-        // Use a Set to ignore duplicated tags.
-        // Split any of the new tags by comma, allowing to paste multiple comma-separated tags at once.
-        [...new Set([...selectedTags, ...newTag.split(',').map(normalizeTag)])],
-      )}
+    <TagsAutocomplete
+      {...rest}
+      onTagsChange={onChange}
+      getColorForTag={(tag) => colorGenerator.getColorForKey(tag)}
+      size="lg"
+      placeholder={placeholder ?? 'Add tags to the URL'}
+      searchMode={searchMode}
     />
   );
 };

src/tags/helpers/TagsSelector.tsx

@@ -1,9 +1,9 @@
 import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { isLightColor } from '@shlinkio/shlink-frontend-kit';
 import { Input } from '@shlinkio/shlink-frontend-kit/tailwind';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { isLightColor } from '../helpers/color';
 
 export type ColorPickerProps = {
   name: string;

src/tags/react-tag-autocomplete.scss

@@ -2,18 +2,7 @@ import { rangeOf } from './index';
 
 const HEX_COLOR_LENGTH = 6;
 const HEX_DIGITS = '0123456789ABCDEF';
-const LIGHTNESS_BREAKPOINT = 128;
 
 export function buildRandomColor(): string {
   return `#${rangeOf(HEX_COLOR_LENGTH, () => HEX_DIGITS[Math.floor(Math.random() * HEX_DIGITS.length)]).join('')}`;
 }
-
-function perceivedLightness (r: number, g: number, b: number): number {
-  return Math.round(Math.sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2));
-}
-
-/** @deprecated. Use same symbol from @shlinkio/shlink-frontend-kit */
-export function isLightColor(colorHex: string): boolean {
-  const [r, g, b] = (colorHex.match(/../g) ?? []).map((hex) => parseInt(hex, 16) || 0);
-  return perceivedLightness(r, g, b) >= LIGHTNESS_BREAKPOINT;
-}