Updated query string 'theme'

app/src/common/AppHeader.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
-import { BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, DropdownMenuBody, Dropdown, DropdownMenuButton, Button } from '@epam/uui';
+import {
+    Burger, BurgerButton, Button, Dropdown, DropdownMenuBody, DropdownMenuButton, FlexSpacer, GlobalMenu, IconContainer,
+    MainMenu, MainMenuButton, Text,
+} from '@epam/uui';
 import { Anchor, MainMenuCustomElement } from '@epam/uui-components';
 import { svc } from '../services';
 import { analyticsEvents } from '../analyticsEvents';
 import { useTheme } from '../helpers/useTheme';
-import { TMode } from './docs';
+import { TMode, TTheme } from './docs';
 import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg';
 import { ReactComponent as LogoIcon } from '../icons/logo.svg';
 import { ReactComponent as DoneIcon } from '@epam/assets/icons/common/notification-done-18.svg';
 import css from './AppHeader.module.scss';
 
-export type Theme = 'uui-theme-promo' | 'uui-theme-loveship' | 'uui-theme-loveship_dark' | 'uui-theme-electric' | 'uui-theme-vanilla_thunder';
-const themeName: Record<Theme, 'Promo' | 'Loveship Light' | 'Loveship Dark' | 'Electric' | 'Vanilla Thunder'> = {
-    'uui-theme-promo': 'Promo',
-    'uui-theme-loveship': 'Loveship Light',
-    'uui-theme-loveship_dark': 'Loveship Dark',
-    'uui-theme-electric': 'Electric',
-    'uui-theme-vanilla_thunder': 'Vanilla Thunder',
-} as const;
+const themeName: Record<TTheme, 'Promo' | 'Loveship Light' | 'Loveship Dark' | 'Electric' | 'Vanilla Thunder'> = {
+    [TTheme.promo]: 'Promo',
+    [TTheme.loveship]: 'Loveship Light',
+    [TTheme.loveship_dark]: 'Loveship Dark',
+    [TTheme.electric]: 'Electric',
+    [TTheme.vanilla_thunder]: 'Vanilla Thunder',
+};
 
 const GIT_LINK = 'https://github.com/epam/UUI';
 
@@ -67,15 +69,15 @@ export function AppHeader() {
             <Dropdown
                 renderBody={ (props) => (
                     <DropdownMenuBody { ...props } rawProps={ { style: { width: '180px', padding: '6px 0', marginTop: '3px' } } }>
-                        <DropdownMenuButton caption="Promo" icon={ theme === 'uui-theme-promo' && DoneIcon } isActive={ theme === 'uui-theme-promo' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-promo') } />
-                        <DropdownMenuButton caption="Loveship Light" icon={ theme === 'uui-theme-loveship' && DoneIcon } isActive={ theme === 'uui-theme-loveship' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship') } />
-                        <DropdownMenuButton caption="Loveship Dark" icon={ theme === 'uui-theme-loveship_dark' && DoneIcon } isActive={ theme === 'uui-theme-loveship_dark' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship_dark') } />
-                        <DropdownMenuButton caption="Electric" icon={ theme === 'uui-theme-electric' && DoneIcon } isActive={ theme === 'uui-theme-electric' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-electric') } />
-                        <DropdownMenuButton caption="Vanilla Thunder" icon={ theme === 'uui-theme-vanilla_thunder' && DoneIcon } isActive={ theme === 'uui-theme-vanilla_thunder' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-vanilla_thunder') } />
+                        <DropdownMenuButton caption="Promo" icon={ theme === TTheme.promo && DoneIcon } isActive={ theme === TTheme.promo } iconPosition="right" onClick={ () => toggleTheme(TTheme.promo) } />
+                        <DropdownMenuButton caption="Loveship Light" icon={ theme === TTheme.loveship && DoneIcon } isActive={ theme === TTheme.loveship } iconPosition="right" onClick={ () => toggleTheme(TTheme.loveship) } />
+                        <DropdownMenuButton caption="Loveship Dark" icon={ theme === TTheme.loveship_dark && DoneIcon } isActive={ theme === TTheme.loveship_dark } iconPosition="right" onClick={ () => toggleTheme(TTheme.loveship_dark) } />
+                        <DropdownMenuButton caption="Electric" icon={ theme === TTheme.electric && DoneIcon } isActive={ theme === TTheme.electric } iconPosition="right" onClick={ () => toggleTheme(TTheme.electric) } />
+                        <DropdownMenuButton caption="Vanilla Thunder" icon={ theme === TTheme.vanilla_thunder && DoneIcon } isActive={ theme === TTheme.vanilla_thunder } iconPosition="right" onClick={ () => toggleTheme(TTheme.vanilla_thunder) } />
                     </DropdownMenuBody>
                 ) }
                 renderTarget={ (props) => (
-                    <Button { ...props } cx={ css.themeSwitcherButton } caption={ themeName[theme as Theme] } fill="none" size="36" isDropdown={ true } />
+                    <Button { ...props } cx={ css.themeSwitcherButton } caption={ themeName[theme] } fill="none" size="36" isDropdown={ true } />
                 ) }
                 placement="bottom-end"
             />

app/src/common/docs/BaseDocsBlock.tsx

@@ -4,7 +4,7 @@ import { TDocConfig, TSkin } from '@epam/uui-docs';
 import { UuiContext, UuiContexts } from '@epam/uui-core';
 import { Checkbox, FlexRow, FlexSpacer, RichTextView, ScrollBars, TabButton, Tooltip, IconContainer } from '@epam/uui';
 import { svc } from '../../services';
-import { getQuery } from '../../helpers';
+import { getQuery, getCurrentTheme } from '../../helpers';
 import { analyticsEvents } from '../../analyticsEvents';
 import { TypeRefSection } from '../apiReference/TypeRefSection';
 import { ComponentEditorWrapper } from './componentEditor/ComponentEditor';
@@ -24,10 +24,7 @@ export enum TTheme {
     vanilla_thunder = 'vanilla_thunder'
 }
 
-export type TUUITheme = `uui-theme-${TTheme}`;
-
 const DEFAULT_MODE = TMode.doc;
-const DEFAULT_THEME: TUUITheme = 'uui-theme-loveship';
 
 const CONTROL_DESCRIPTION = 'If checked, a component from the skin-specific package will be used, according to the selected theme (for example, "@epam/loveship"). If unchecked, it will use a component from the "@epam/uui" package, only with semantic props.';
 
@@ -52,12 +49,12 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
         return getQuery('mode') || DEFAULT_MODE;
     }
 
-    private getTheme(): TUUITheme {
-        return getQuery('theme') ?? (localStorage.getItem('app-theme') as TUUITheme) ?? DEFAULT_THEME;
+    private getTheme(): TTheme {
+        return getCurrentTheme();
     }
 
     private hasSkin(): boolean {
-        return ['electric', 'loveship', 'loveship_dark', 'promo'].includes(this.getTheme().split('-').pop());
+        return ['electric', 'loveship', 'loveship_dark', 'promo'].includes(this.getTheme());
     }
 
     abstract title: string;
@@ -196,10 +193,10 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
         this.handleNav({ mode });
     }
 
-    private handleNav = (params: { mode?: TMode, isSkin?: boolean, theme?: TUUITheme }) => {
+    private handleNav = (params: { mode?: TMode, isSkin?: boolean, theme?: TTheme }) => {
         const mode: TMode = params.mode ? params.mode : this.getMode();
         const isSkin: boolean = params.isSkin ?? this.isSkin();
-        const theme: TUUITheme = params.theme ? params.theme : this.getTheme();
+        const theme: TTheme = params.theme ? params.theme : this.getTheme();
 
         svc.uuiRouter.redirect({
             pathname: '/documents',

app/src/common/docs/componentEditor/ComponentEditor.tsx

@@ -5,10 +5,10 @@ import { ComponentEditorView } from './view/ComponentEditorView';
 import { useDocBuilderGen } from '../docBuilderGen/hooks/useDocBuilderGen';
 import { getExamplesList, getInputValuesFromInputData, getSkin, isPropValueEmpty } from './utils';
 import { PropSamplesCreationContext } from './view/PropSamplesCreationContext';
-import { TUUITheme } from '../BaseDocsBlock';
+import { TTheme } from '../BaseDocsBlock';
 
 export function ComponentEditorWrapper(props: {
-    theme: TUUITheme,
+    theme: TTheme,
     title: string;
     isSkin: boolean;
     config: TDocConfig;

app/src/common/docs/componentEditor/utils.ts

@@ -1,5 +1,5 @@
 import { IPropSamplesCreationContext, PropDoc, PropExampleObject, TSkin } from '@epam/uui-docs';
-import { TTheme, TUUITheme } from '../BaseDocsBlock';
+import { TTheme } from '../BaseDocsBlock';
 
 export function isPropValueEmpty(propValue: any): boolean {
     return propValue === undefined;
@@ -14,16 +14,16 @@ export function getExamplesList(examples: PropDoc<any, any>['examples'], ctx: IP
     return [];
 }
 
-export function getSkin(theme: TUUITheme, isSkin: boolean): TSkin {
+export function getSkin(theme: TTheme, isSkin: boolean): TSkin {
     if (!isSkin) return TSkin.UUI;
 
     switch (theme) {
-        case `uui-theme-${TTheme.electric}`:
+        case TTheme.electric:
             return TSkin.Electric;
-        case `uui-theme-${TTheme.loveship}`:
-        case `uui-theme-${TTheme.loveship_dark}`:
+        case TTheme.loveship:
+        case TTheme.loveship_dark:
             return TSkin.Loveship;
-        case `uui-theme-${TTheme.promo}`:
+        case TTheme.promo:
             return TSkin.Promo;
         default:
             return TSkin.UUI;

app/src/documents/DocumentsPage.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { DataRowProps } from '@epam/uui-core';
 import { TreeListItem } from '@epam/uui-components';
 import { FlexRow } from '@epam/uui';
-import { AppHeader, Page, Sidebar, TMode, TUUITheme, TypeRefPage } from '../common';
+import { AppHeader, Page, Sidebar, TMode, TTheme, TypeRefPage } from '../common';
 import { svc } from '../services';
 import { DocItem, items as itemsStructure } from './structure';
 import { useQuery } from '../helpers';
@@ -12,7 +12,7 @@ type DocsQuery = {
     id: string;
     mode?: TMode;
     isSkin?: boolean;
-    theme?: TUUITheme;
+    theme?: TTheme;
     category?: string;
 };
 

app/src/helpers/getCurrentTheme.ts

@@ -0,0 +1,7 @@
+import { TTheme } from '../common/docs';
+import { getQuery } from './getQuery';
+
+const DEFAULT_THEME = TTheme.loveship;
+export const getCurrentTheme: () => TTheme = () => {
+    return getQuery('theme') ?? (localStorage.getItem('app-theme') as TTheme) ?? DEFAULT_THEME;
+};

app/src/helpers/index.ts

@@ -2,3 +2,4 @@ export * from './copyTextToClipboard';
 export * from './getQuery';
 export * from './getCoreProps';
 export * from './loremIpsum';
+export * from './getCurrentTheme';

app/src/helpers/useTheme.tsx

@@ -1,14 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useUuiContext } from '@epam/uui-core';
-import { TUUITheme } from '../common/docs/BaseDocsBlock';
+import { TTheme } from '../common/docs';
+import { getCurrentTheme } from './';
 
 export const useTheme = () => {
     const { uuiRouter } = useUuiContext();
-    const [theme, setTheme] = useState<TUUITheme>(
-        uuiRouter.getCurrentLink().query['theme'] || (localStorage.getItem('app-theme') as TUUITheme) || 'uui-theme-loveship',
-    );
+    const [theme, setTheme] = useState<TTheme>(getCurrentTheme());
 
-    const toggleTheme = (newTheme: TUUITheme) => {
+    const toggleTheme = (newTheme: TTheme) => {
         setTheme(newTheme);
         localStorage.setItem('app-theme', newTheme);
     };
@@ -17,7 +16,7 @@ export const useTheme = () => {
     useEffect(() => {
         const { pathname, query } = uuiRouter.getCurrentLink();
         const currentTheme = document.body.classList.value.match(/uui-theme-(\S+)\s*/)[0];
-        document.body.classList.replace(currentTheme, theme);
+        document.body.classList.replace(currentTheme, `uui-theme-${theme}`);
         uuiRouter.redirect({ pathname: pathname, query: { ...query, theme: theme } });
     }, [theme]);