Merge pull request #861 from acelaya-forks/feature/update-web-component

Feature/update web component
This commit is contained in:
Alejandro Celaya 2023-08-19 17:25:01 +02:00 committed by GitHub
commit 4ab9bfab01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 33 additions and 22 deletions

View file

@ -5,13 +5,17 @@ updates:
schedule: schedule:
interval: weekly interval: weekly
day: saturday day: saturday
time: '9:00' time: '09:00'
timezone: 'Europe/Madrid' timezone: 'Europe/Madrid'
open-pull-requests-limit: 10 open-pull-requests-limit: 10
ignore:
# Bootstrap can introduce visual breaking changes on styles
# Ignore it, since the plan is to remove it anyway
- dependency-name: 'bootstrap'
- package-ecosystem: docker - package-ecosystem: docker
directory: '/' directory: '/'
schedule: schedule:
interval: weekly interval: weekly
day: saturday day: saturday
time: '9:01' time: '09:00'
timezone: 'Europe/Madrid' timezone: 'Europe/Madrid'

14
package-lock.json generated
View file

@ -16,7 +16,7 @@
"@json2csv/plainjs": "^7.0.1", "@json2csv/plainjs": "^7.0.1",
"@reduxjs/toolkit": "^1.9.5", "@reduxjs/toolkit": "^1.9.5",
"@shlinkio/shlink-frontend-kit": "^0.2.0", "@shlinkio/shlink-frontend-kit": "^0.2.0",
"@shlinkio/shlink-web-component": "^0.1.1", "@shlinkio/shlink-web-component": "^0.3.0",
"bootstrap": "5.2.3", "bootstrap": "5.2.3",
"bottlejs": "^2.0.1", "bottlejs": "^2.0.1",
"classnames": "^2.3.2", "classnames": "^2.3.2",
@ -3024,9 +3024,9 @@
} }
}, },
"node_modules/@shlinkio/shlink-web-component": { "node_modules/@shlinkio/shlink-web-component": {
"version": "0.1.1", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.1.1.tgz", "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.0.tgz",
"integrity": "sha512-N59LT9KCLPkPvPDPdS5EVvpPg0/eQUf1QuHewVZNK3Ee3XxAqoNK5ssHTuPX/xFDvzPmROEQWxIdcuma5+6e4w==", "integrity": "sha512-8zAcSF5j403pQrnScHBwPJpJbZDLTWxbuu9GZLJK77ZHDRQ0xYjc1iKZPAiwVWDYnr7SSHkeGq8DgrKs7n2K8Q==",
"dependencies": { "dependencies": {
"@json2csv/plainjs": "^7.0.1", "@json2csv/plainjs": "^7.0.1",
"bottlejs": "^2.0.1", "bottlejs": "^2.0.1",
@ -12630,9 +12630,9 @@
} }
}, },
"@shlinkio/shlink-web-component": { "@shlinkio/shlink-web-component": {
"version": "0.1.1", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.1.1.tgz", "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.0.tgz",
"integrity": "sha512-N59LT9KCLPkPvPDPdS5EVvpPg0/eQUf1QuHewVZNK3Ee3XxAqoNK5ssHTuPX/xFDvzPmROEQWxIdcuma5+6e4w==", "integrity": "sha512-8zAcSF5j403pQrnScHBwPJpJbZDLTWxbuu9GZLJK77ZHDRQ0xYjc1iKZPAiwVWDYnr7SSHkeGq8DgrKs7n2K8Q==",
"requires": { "requires": {
"@json2csv/plainjs": "^7.0.1", "@json2csv/plainjs": "^7.0.1",
"bottlejs": "^2.0.1", "bottlejs": "^2.0.1",

View file

@ -32,7 +32,7 @@
"@json2csv/plainjs": "^7.0.1", "@json2csv/plainjs": "^7.0.1",
"@reduxjs/toolkit": "^1.9.5", "@reduxjs/toolkit": "^1.9.5",
"@shlinkio/shlink-frontend-kit": "^0.2.0", "@shlinkio/shlink-frontend-kit": "^0.2.0",
"@shlinkio/shlink-web-component": "^0.1.1", "@shlinkio/shlink-web-component": "^0.3.0",
"bootstrap": "5.2.3", "bootstrap": "5.2.3",
"bottlejs": "^2.0.1", "bottlejs": "^2.0.1",
"classnames": "^2.3.2", "classnames": "^2.3.2",

View file

@ -1,5 +1,4 @@
import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit'; import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
import type { Settings } from '@shlinkio/shlink-web-component';
import classNames from 'classnames'; import classNames from 'classnames';
import type { FC } from 'react'; import type { FC } from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
@ -7,13 +6,14 @@ import { Route, Routes, useLocation } from 'react-router-dom';
import { AppUpdateBanner } from '../common/AppUpdateBanner'; import { AppUpdateBanner } from '../common/AppUpdateBanner';
import { NotFound } from '../common/NotFound'; import { NotFound } from '../common/NotFound';
import type { ServersMap } from '../servers/data'; import type { ServersMap } from '../servers/data';
import type { AppSettings } from '../settings/reducers/settings';
import { forceUpdate } from '../utils/helpers/sw'; import { forceUpdate } from '../utils/helpers/sw';
import './App.scss'; import './App.scss';
interface AppProps { interface AppProps {
fetchServers: () => void; fetchServers: () => void;
servers: ServersMap; servers: ServersMap;
settings: Settings; settings: AppSettings;
resetAppUpdate: () => void; resetAppUpdate: () => void;
appUpdated: boolean; appUpdated: boolean;
} }

View file

@ -2,12 +2,12 @@ import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { Theme } from '@shlinkio/shlink-frontend-kit'; import type { Theme } from '@shlinkio/shlink-frontend-kit';
import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit'; import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
import type { Settings, UiSettings } from '@shlinkio/shlink-web-component';
import type { FC } from 'react'; import type { FC } from 'react';
import type { AppSettings, UiSettings } from './reducers/settings';
import './UserInterfaceSettings.scss'; import './UserInterfaceSettings.scss';
interface UserInterfaceProps { interface UserInterfaceProps {
settings: Settings; settings: AppSettings;
setUiSettings: (settings: UiSettings) => void; setUiSettings: (settings: UiSettings) => void;
} }

View file

@ -1,11 +1,11 @@
import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit'; import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import type { Theme } from '@shlinkio/shlink-frontend-kit';
import type { import type {
Settings, Settings,
ShortUrlCreationSettings, ShortUrlCreationSettings,
ShortUrlsListSettings, ShortUrlsListSettings,
TagsSettings, TagsSettings,
UiSettings,
VisitsSettings, VisitsSettings,
} from '@shlinkio/shlink-web-component'; } from '@shlinkio/shlink-web-component';
import { mergeDeepRight } from 'ramda'; import { mergeDeepRight } from 'ramda';
@ -18,7 +18,15 @@ export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
dir: 'DESC', dir: 'DESC',
}; };
const initialState: Settings = { export type UiSettings = {
theme: Theme;
};
export type AppSettings = Settings & {
ui?: UiSettings;
};
const initialState: AppSettings = {
realTimeUpdates: { realTimeUpdates: {
enabled: true, enabled: true,
}, },
@ -36,12 +44,12 @@ const initialState: Settings = {
}, },
}; };
type SettingsAction = PayloadAction<Settings>; type SettingsAction = PayloadAction<AppSettings>;
type SettingsPrepareAction = PrepareAction<Settings>; type SettingsPrepareAction = PrepareAction<AppSettings>;
const commonReducer = (state: Settings, { payload }: SettingsAction) => mergeDeepRight(state, payload); const commonReducer = (state: AppSettings, { payload }: SettingsAction) => mergeDeepRight(state, payload);
const toReducer = (prepare: SettingsPrepareAction) => ({ reducer: commonReducer, prepare }); const toReducer = (prepare: SettingsPrepareAction) => ({ reducer: commonReducer, prepare });
const toPreparedAction: SettingsPrepareAction = (payload: Settings) => ({ payload }); const toPreparedAction: SettingsPrepareAction = (payload: AppSettings) => ({ payload });
const { reducer, actions } = createSlice({ const { reducer, actions } = createSlice({
name: 'shlink/settings', name: 'shlink/settings',

View file

@ -6,7 +6,6 @@ export class LocalStorage {
public readonly get = <T>(key: string): T | undefined => { public readonly get = <T>(key: string): T | undefined => {
const item = this.localStorage.getItem(buildPath(key)); const item = this.localStorage.getItem(buildPath(key));
return item ? JSON.parse(item) as T : undefined; return item ? JSON.parse(item) as T : undefined;
}; };

View file

@ -1,7 +1,7 @@
import type { Theme } from '@shlinkio/shlink-frontend-kit'; import type { Theme } from '@shlinkio/shlink-frontend-kit';
import type { UiSettings } from '@shlinkio/shlink-web-component';
import { screen } from '@testing-library/react'; import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn'; import { fromPartial } from '@total-typescript/shoehorn';
import type { UiSettings } from '../../src/settings/reducers/settings';
import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings'; import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
import { renderWithEvents } from '../__helpers__/setUpTest'; import { renderWithEvents } from '../__helpers__/setUpTest';