Delegate tag color storage to ShlinkWebComponent consuming app

src/common/ShlinkWebComponentContainer.tsx

@@ -1,4 +1,4 @@
-import type { Settings, ShlinkWebComponentType } from '@shlinkio/shlink-web-component';
+import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
@@ -15,6 +15,7 @@ interface ShlinkWebComponentContainerProps {
 
 export const ShlinkWebComponentContainer = (
   buildShlinkApiClient: ShlinkApiClientBuilder,
+  tagColorsStorage: TagColorsStorage,
   ShlinkWebComponent: ShlinkWebComponentType,
   ServerError: FC,
 ) => withSelectedServer<ShlinkWebComponentContainerProps>((
@@ -38,6 +39,7 @@ export const ShlinkWebComponentContainer = (
       apiClient={buildShlinkApiClient(selectedServer)}
       settings={settings}
       routesPrefix={routesPrefix}
+      tagColorsStorage={tagColorsStorage}
       createNotFound={(nonPrefixedHomePath) => (
         <NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
       )}

src/common/services/provideServices.ts

@@ -32,6 +32,7 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     'ShlinkWebComponentContainer',
     ShlinkWebComponentContainer,
     'buildShlinkApiClient',
+    'TagColorsStorage',
     'ShlinkWebComponent',
     'ServerError',
   );

src/utils/services/TagColorsStorage.ts

@@ -0,0 +1,15 @@
+import type { TagColorsStorage as BaseTagColorsStorage } from '@shlinkio/shlink-web-component';
+import type { LocalStorage } from './LocalStorage';
+
+export class TagColorsStorage implements BaseTagColorsStorage {
+  constructor(private readonly storage: LocalStorage) {
+  }
+
+  getTagColors(): Record<string, string> {
+    return this.storage.get<Record<string, string>>('colors') ?? {};
+  }
+
+  storeTagColors(colors: Record<string, string>): void {
+    this.storage.set('colors', colors);
+  }
+}

src/utils/services/provideServices.ts

@@ -2,10 +2,12 @@ import type Bottle from 'bottlejs';
 import { csvToJson, jsonToCsv } from '../helpers/csvjson';
 import { useTimeoutToggle } from '../helpers/hooks';
 import { LocalStorage } from './LocalStorage';
+import { TagColorsStorage } from './TagColorsStorage';
 
 export const provideServices = (bottle: Bottle) => {
   bottle.constant('localStorage', window.localStorage);
   bottle.service('Storage', LocalStorage, 'localStorage');
+  bottle.service('TagColorsStorage', TagColorsStorage, 'Storage');
 
   bottle.constant('csvToJson', csvToJson);
   bottle.constant('jsonToCsv', jsonToCsv);