Merge pull request #651 from acelaya-forks/feature/qr-settigs

Allow QR code settings to be configured

Author: acelaya

CHANGELOG.md

@@ -4,9 +4,10 @@ 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.13.3]
 ### Added
 * [#641](https://github.com/shlinkio/shlink-web-component/issues/641) Allow custom logos to be selected for the short URL QR code.
+* [#640](https://github.com/shlinkio/shlink-web-component/issues/640) Allow default QR code settings to be handled via app settings.
 
 ### Changed
 * *Nothing*

src/settings/components/RealTimeUpdatesSettings.tsx

@@ -7,11 +7,11 @@ import { FormText } from './FormText';
 
 export type RealTimeUpdatesProps = {
   toggleRealTimeUpdates: (enabled: boolean) => void;
-  setRealTimeUpdatesInterval: (interval: number) => void;
+  onIntervalChange: (interval: number) => void;
 };
 
 export const RealTimeUpdatesSettings = (
-  { toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
+  { toggleRealTimeUpdates, onIntervalChange }: RealTimeUpdatesProps,
 ) => {
   const { enabled, interval } = useSetting('realTimeUpdates', { enabled: true });
   const inputId = useId();
@@ -39,7 +39,7 @@ export const RealTimeUpdatesSettings = (
           disabled={!enabled}
           value={`${interval ?? ''}`}
           id={inputId}
-          onChange={({ target }) => setRealTimeUpdatesInterval(Number(target.value))}
+          onChange={({ target }) => onIntervalChange(Number(target.value))}
         />
         {enabled && (
           <FormText>

src/settings/components/ShlinkWebSettings.tsx

@@ -1,11 +1,16 @@
 import { mergeDeepRight } from '@shlinkio/data-manipulation';
 import { NavPillItem, NavPills } from '@shlinkio/shlink-frontend-kit';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
-import { Children , useCallback } from 'react';
+import { useCallback } from 'react';
 import { Navigate, Route, Routes } from 'react-router';
 import type { DeepPartial } from '../../utils/types';
+import type { QrCodeSettings } from '..';
 import { SettingsProvider } from '..';
 import type { RealTimeUpdatesSettings, Settings, ShortUrlsListSettings } from '../types';
+import { QrCodeColorSettings } from './qr-codes/QrCodeColorSettings';
+import { QrCodeFormatSettings } from './qr-codes/QrCodeFormatSettings';
+import { QrCodeSizeSettings } from './qr-codes/QrCodeSizeSettings';
 import { RealTimeUpdatesSettings as RealTimeUpdates } from './RealTimeUpdatesSettings';
 import { ShortUrlCreationSettings as ShortUrlCreation } from './ShortUrlCreationSettings';
 import { ShortUrlsListSettings as ShortUrlsList } from './ShortUrlsListSettings';
@@ -23,9 +28,10 @@ export type ShlinkWebSettingsProps = {
   updateSettings?: (settings: Settings) => void;
 };
 
-const SettingsSections: FC<PropsWithChildren> = ({ children }) => Children.map(
-  children,
-  (child, index) => <div key={index} className="mb-3">{child}</div>,
+const SettingsSections: FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => (
+  <div className={clsx('d-flex flex-column gap-3', className)}>
+    {children}
+  </div>
 );
 
 export const ShlinkWebSettings: FC<ShlinkWebSettingsProps> = ({
@@ -50,12 +56,17 @@ export const ShlinkWebSettings: FC<ShlinkWebSettingsProps> = ({
     <Prop extends keyof Settings>(prop: Prop, value: Settings[Prop]) => updatePartialSettings({ [prop]: value }),
     [updatePartialSettings],
   );
+  const updateQrCodeSettings = useCallback(
+    (s: QrCodeSettings) => updateSettingsProp('qrCodes', s),
+    [updateSettingsProp],
+  );
 
   return (
     <SettingsProvider value={settings}>
       <NavPills className="mb-3">
         <NavPillItem to="../general">General</NavPillItem>
         <NavPillItem to="../short-urls">Short URLs</NavPillItem>
+        <NavPillItem to="../qr-codes">QR codes</NavPillItem>
         <NavPillItem to="../other-items">Other items</NavPillItem>
       </NavPills>
 
@@ -64,10 +75,10 @@ export const ShlinkWebSettings: FC<ShlinkWebSettingsProps> = ({
           path="general"
           element={(
             <SettingsSections>
-              <UserInterfaceSettings updateUiSettings={(v) => updateSettingsProp('ui', v)} />
+              <UserInterfaceSettings onChange={(v) => updateSettingsProp('ui', v)} />
               <RealTimeUpdates
                 toggleRealTimeUpdates={toggleRealTimeUpdates}
-                setRealTimeUpdatesInterval={setRealTimeUpdatesInterval}
+                onIntervalChange={setRealTimeUpdatesInterval}
               />
             </SettingsSections>
           )}
@@ -76,10 +87,10 @@ export const ShlinkWebSettings: FC<ShlinkWebSettingsProps> = ({
           path="short-urls"
           element={(
             <SettingsSections>
-              <ShortUrlCreation updateShortUrlCreationSettings={(v) => updateSettingsProp('shortUrlCreation', v)} />
+              <ShortUrlCreation onChange={(v) => updateSettingsProp('shortUrlCreation', v)} />
               <ShortUrlsList
                 defaultOrdering={defaultShortUrlsListOrdering}
-                updateShortUrlsListSettings={(v) => updateSettingsProp('shortUrlsList', v)}
+                onChange={(v) => updateSettingsProp('shortUrlsList', v)}
               />
             </SettingsSections>
           )}
@@ -88,8 +99,20 @@ export const ShlinkWebSettings: FC<ShlinkWebSettingsProps> = ({
           path="other-items"
           element={(
             <SettingsSections>
-              <Tags updateTagsSettings={(v) => updateSettingsProp('tags', v)} />
-              <Visits updateVisitsSettings={(v) => updateSettingsProp('visits', v)} />
+              <Tags onChange={(v) => updateSettingsProp('tags', v)} />
+              <Visits onChange={(v) => updateSettingsProp('visits', v)} />
+            </SettingsSections>
+          )}
+        />
+        <Route
+          path="qr-codes"
+          element={(
+            <SettingsSections>
+              <div className="d-flex flex-column flex-lg-row gap-3">
+                <QrCodeSizeSettings onChange={updateQrCodeSettings} className="w-100" />
+                <QrCodeColorSettings onChange={updateQrCodeSettings} className="w-100" />
+              </div>
+              <QrCodeFormatSettings onChange={updateQrCodeSettings} />
             </SettingsSections>
           )}
         />

src/settings/components/ShortUrlCreationSettings.tsx

@@ -8,7 +8,7 @@ import { FormText } from './FormText';
 type TagFilteringMode = NonNullable<ShortUrlsSettings['tagFilteringMode']>;
 
 interface ShortUrlCreationProps {
-  updateShortUrlCreationSettings: (settings: ShortUrlsSettings) => void;
+  onChange: (settings: ShortUrlsSettings) => void;
 }
 
 const tagFilteringModeText = (tagFilteringMode: TagFilteringMode | undefined): string =>
@@ -19,17 +19,17 @@ const tagFilteringModeHint = (tagFilteringMode: TagFilteringMode | undefined): R
     : <>The list of suggested tags will contain those <b>starting with</b> provided input.</>
 );
 
-export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ updateShortUrlCreationSettings }) => {
+export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ onChange }) => {
   const shortUrlCreation = useSetting('shortUrlCreation', { validateUrls: false });
-  const changeTagsFilteringMode = (tagFilteringMode: TagFilteringMode) => () => updateShortUrlCreationSettings(
+  const changeTagsFilteringMode = (tagFilteringMode: TagFilteringMode) => () => onChange(
     { ...shortUrlCreation ?? { validateUrls: false }, tagFilteringMode },
   );
 
   return (
     <SimpleCard title="Short URLs form" className="h-100" bodyClassName="d-flex flex-column gap-3">
       <ToggleSwitch
         checked={shortUrlCreation.validateUrls ?? false}
-        onChange={(validateUrls) => updateShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
+        onChange={(validateUrls) => onChange({ ...shortUrlCreation, validateUrls })}
       >
         Request validation on long URLs when creating new short URLs.{' '}
         <b>This option is ignored by Shlink {'>='}4.0.0</b>
@@ -40,7 +40,7 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ updateShor
       </ToggleSwitch>
       <ToggleSwitch
         checked={shortUrlCreation.forwardQuery ?? true}
-        onChange={(forwardQuery) => updateShortUrlCreationSettings({ ...shortUrlCreation, forwardQuery })}
+        onChange={(forwardQuery) => onChange({ ...shortUrlCreation, forwardQuery })}
       >
         Make all new short URLs forward their query params to the long URL.
         <FormText>

src/settings/components/ShortUrlsListSettings.tsx

@@ -5,7 +5,7 @@ import { useSetting } from '..';
 import { FormText } from './FormText';
 
 export type ShortUrlsListSettingsProps = {
-  updateShortUrlsListSettings: (settings: ShortUrlsSettings) => void;
+  onChange: (settings: ShortUrlsSettings) => void;
   defaultOrdering: NonNullable<ShortUrlsSettings['defaultOrdering']>;
 };
 
@@ -17,17 +17,15 @@ const SHORT_URLS_ORDERABLE_FIELDS = {
   visits: 'Visits',
 };
 
-export const ShortUrlsListSettings: FC<ShortUrlsListSettingsProps> = (
-  { updateShortUrlsListSettings, defaultOrdering },
-) => {
+export const ShortUrlsListSettings: FC<ShortUrlsListSettingsProps> = ({ onChange, defaultOrdering }) => {
   const shortUrlsList = useSetting('shortUrlsList');
   const confirmDeletions = shortUrlsList?.confirmDeletions ?? true;
 
   return (
     <SimpleCard title="Short URLs list" className="h-100" bodyClassName="d-flex flex-column gap-3">
       <ToggleSwitch
         checked={confirmDeletions}
-        onChange={(confirmDeletions) => updateShortUrlsListSettings({ ...shortUrlsList, confirmDeletions })}
+        onChange={(confirmDeletions) => onChange({ ...shortUrlsList, confirmDeletions })}
       >
         Request confirmation before deleting a short URL.
         <FormText>
@@ -38,7 +36,7 @@ export const ShortUrlsListSettings: FC<ShortUrlsListSettingsProps> = (
         <OrderingDropdown
           items={SHORT_URLS_ORDERABLE_FIELDS}
           order={shortUrlsList?.defaultOrdering ?? defaultOrdering}
-          onChange={(field, dir) => updateShortUrlsListSettings({ defaultOrdering: { field, dir } })}
+          onChange={(field, dir) => onChange({ defaultOrdering: { field, dir } })}
         />
       </LabeledFormGroup>
     </SimpleCard>

src/settings/components/TagsSettings.tsx

@@ -4,7 +4,7 @@ import type { TagsSettings as TagsSettingsOptions } from '..';
 import { useSetting } from '..';
 
 export type TagsProps = {
-  updateTagsSettings: (settings: TagsSettingsOptions) => void;
+  onChange: (settings: TagsSettingsOptions) => void;
 };
 
 const TAGS_ORDERABLE_FIELDS = {
@@ -13,7 +13,7 @@ const TAGS_ORDERABLE_FIELDS = {
   visits: 'Visits',
 };
 
-export const TagsSettings: FC<TagsProps> = ({ updateTagsSettings }) => {
+export const TagsSettings: FC<TagsProps> = ({ onChange }) => {
   const tags = useSetting('tags', {});
 
   return (
@@ -22,7 +22,7 @@ export const TagsSettings: FC<TagsProps> = ({ updateTagsSettings }) => {
         <OrderingDropdown
           items={TAGS_ORDERABLE_FIELDS}
           order={tags.defaultOrdering ?? {}}
-          onChange={(field, dir) => updateTagsSettings({ ...tags, defaultOrdering: { field, dir } })}
+          onChange={(field, dir) => onChange({ ...tags, defaultOrdering: { field, dir } })}
         />
       </LabeledFormGroup>
     </SimpleCard>

src/settings/components/UserInterfaceSettings.tsx

@@ -1,31 +1,27 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import { getSystemPreferredTheme, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 import { useSetting } from '..';
 import type { UiSettings } from '../types';
 
 interface UserInterfaceProps {
-  updateUiSettings: (settings: UiSettings) => void;
+  onChange: (settings: UiSettings) => void;
 
   /* Test seam */
   _matchMedia?: typeof window.matchMedia;
 }
 
-export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ updateUiSettings, _matchMedia }) => {
+export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ onChange, _matchMedia }) => {
   const ui = useSetting('ui');
   const currentTheme = useMemo(() => ui?.theme ?? getSystemPreferredTheme(_matchMedia), [ui?.theme, _matchMedia]);
 
   return (
     <SimpleCard title="User interface" className="h-100" bodyClassName="d-flex justify-content-between align-items-center">
       <ToggleSwitch
         checked={currentTheme === 'dark'}
-        onChange={(useDarkTheme) => {
-          const theme: Theme = useDarkTheme ? 'dark' : 'light';
-          updateUiSettings({ ...ui, theme });
-        }}
+        onChange={(useDarkTheme) => onChange({ ...ui, theme: useDarkTheme ? 'dark' : 'light' })}
       >
         Use dark theme.
       </ToggleSwitch>

src/settings/components/VisitsSettings.tsx

@@ -8,19 +8,19 @@ import { DateIntervalSelector } from './DateIntervalSelector';
 import { FormText } from './FormText';
 
 export type VisitsProps = {
-  updateVisitsSettings: (settings: VisitsSettingsConfig) => void;
+  onChange: (settings: VisitsSettingsConfig) => void;
 };
 
 const currentDefaultInterval = (visitsSettings?: VisitsSettingsConfig): DateInterval =>
   visitsSettings?.defaultInterval ?? 'last30Days';
 
-export const VisitsSettings: FC<VisitsProps> = ({ updateVisitsSettings }) => {
+export const VisitsSettings: FC<VisitsProps> = ({ onChange }) => {
   const visitsSettings = useSetting('visits');
   const updateSettings = useCallback(
-    ({ defaultInterval, ...rest }: Partial<VisitsSettingsConfig>) => updateVisitsSettings(
+    ({ defaultInterval, ...rest }: Partial<VisitsSettingsConfig>) => onChange(
       { defaultInterval: defaultInterval ?? currentDefaultInterval(visitsSettings), ...rest },
     ),
-    [updateVisitsSettings, visitsSettings],
+    [onChange, visitsSettings],
   );
 
   return (

src/settings/components/qr-codes/QrCodeColorSettings.tsx

@@ -0,0 +1,46 @@
+import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
+import type { FC } from 'react';
+import { useId } from 'react';
+import type { QrCodeSettings } from '../../index';
+import { defaultQrCodeSettings, useSetting } from '../../index';
+
+export type QrCodeColorSettingsProps = {
+  onChange: (s: QrCodeSettings) => void;
+  className?: string;
+};
+
+export const QrCodeColorSettings: FC<QrCodeColorSettingsProps> = ({ onChange, className }) => {
+  const qrCodesSettings = useSetting('qrCodes', defaultQrCodeSettings);
+  const { color, bgColor } = qrCodesSettings;
+  const colorId = useId();
+  const bgColorId = useId();
+
+  return (
+    <SimpleCard title="Colors" className={className} bodyClassName="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-1">
+        <label htmlFor={colorId}>Default color:</label>
+        <input
+          id={colorId}
+          type="color"
+          value={color}
+          onChange={(e) => onChange({ ...qrCodesSettings, color: e.target.value })}
+        />
+        <small className="text-muted">
+          QR codes will initially use <b data-testid="color">{color}</b> color.
+        </small>
+      </div>
+      <div className="d-flex flex-column gap-1">
+        <label htmlFor={bgColorId}>Default background color:</label>
+        <input
+          id={bgColorId}
+          type="color"
+          value={bgColor}
+          onChange={(e) => onChange({ ...qrCodesSettings, bgColor: e.target.value })}
+        />
+        <small className="text-muted">
+          QR codes will initially use <b data-testid="bg-color">{bgColor}</b> background color.
+        </small>
+      </div>
+    </SimpleCard>
+  );
+};

src/settings/components/qr-codes/QrCodeFormatSettings.tsx

@@ -0,0 +1,38 @@
+import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
+import type { FC } from 'react';
+import { QrErrorCorrectionDropdown } from '../../../short-urls/helpers/qr-codes/QrErrorCorrectionDropdown';
+import { QrFormatDropdown } from '../../../short-urls/helpers/qr-codes/QrFormatDropdown';
+import { defaultQrCodeSettings, useSetting } from '../../index';
+import type { QrCodeSettings } from '../../types';
+
+export type QrCodeFormatSettingsProps = {
+  onChange: (s: QrCodeSettings) => void;
+};
+
+export const QrCodeFormatSettings: FC<QrCodeFormatSettingsProps> = ({ onChange }) => {
+  const qrCodesSettings = useSetting('qrCodes', defaultQrCodeSettings);
+  const { format, errorCorrection } = qrCodesSettings;
+
+  return (
+    <SimpleCard title="Format" bodyClassName="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-1">
+        <QrFormatDropdown
+          format={format}
+          onChange={(format) => onChange({ ...qrCodesSettings, format })}
+        />
+        <small className="text-muted">
+          When downloading a QR code, it will use <b data-testid="format">{format}</b> format by default.
+        </small>
+      </div>
+      <div className="d-flex flex-column gap-1">
+        <QrErrorCorrectionDropdown
+          errorCorrection={errorCorrection}
+          onChange={(errorCorrection) => onChange({ ...qrCodesSettings, errorCorrection })}
+        />
+        <small className="text-muted">
+          QR codes will initially have a <b data-testid="error-correction">{errorCorrection}</b> error correction.
+        </small>
+      </div>
+    </SimpleCard>
+  );
+};