feat(Theme): handle contextual tokens

packages/react/src/components/design-system.tsx

@@ -8,7 +8,11 @@ export type DesignSystemProps = ThemeWrapperProps & DeviceContextProviderProps &
 
 export const DesignSystem: FunctionComponent<PropsWithChildren<DesignSystemProps>> = (props) => (
     <DeviceContextProvider staticDevice={props.staticDevice}>
-        <ThemeWrapper theme={props.theme} isolateStyles={props.isolateStyles}>
+        <ThemeWrapper
+            isolateStyles={props.isolateStyles}
+            themeCustomization={props.themeCustomization}
+            displayPreferences={props.displayPreferences}
+        >
             <IntlProvider language={props.language}>
                 <ToastProvider>
                     {props.children}

packages/react/src/components/device-context-provider/device-context-provider.tsx

@@ -1,4 +1,13 @@
-import { createContext, FunctionComponent, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import {
+    createContext,
+    FunctionComponent,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
 import { breakpoints, Breakpoints } from '../../legacy-constants/breakpoints';
 
 export type DeviceType = 'desktop' | 'tablet' | 'mobile';
@@ -15,40 +24,20 @@ export interface DeviceContextProps {
     breakpoints: Breakpoints;
 }
 
-const getDeviceContext = (deviceName: DeviceType | undefined = undefined): DeviceContextProps => {
-    let isDesktop = false;
-    let isTablet = false;
-    let isMobile = false;
-    const defaultContext: DeviceContextProps = {
-        device: 'desktop',
-        isDesktop: true,
-        isTablet: false,
-        isMobile: false,
+function getDeviceContext(deviceName: DeviceType): DeviceContextProps {
+    return {
+        device: deviceName,
+        isDesktop: deviceName === 'desktop',
+        isTablet: deviceName === 'tablet',
+        isMobile: deviceName === 'mobile',
         breakpoints,
     };
+}
 
-    if (deviceName) {
-        if (deviceName === 'desktop') {
-            isDesktop = true;
-        } else if (deviceName === 'tablet') {
-            isTablet = true;
-        } else if (deviceName === 'mobile') {
-            isMobile = true;
-        }
-
-        return {
-            device: deviceName,
-            isDesktop,
-            isTablet,
-            isMobile,
-            breakpoints,
-        };
-    }
-    return defaultContext;
-};
-
-const getDevice = (screenWidth: number): DeviceType => {
+function getDeviceType(): DeviceType {
     let currentDevice: DeviceType = 'desktop';
+    const screenWidth = (window.innerWidth || document.documentElement.clientWidth);
+
     if (screenWidth >= breakpoints.desktop) {
         currentDevice = 'desktop';
     } else if (screenWidth < breakpoints.desktop && screenWidth > breakpoints.mobile) {
@@ -58,39 +47,46 @@ const getDevice = (screenWidth: number): DeviceType => {
     }
 
     return currentDevice;
-};
+}
 
-const DeviceContext = createContext<DeviceContextProps>(getDeviceContext());
+const DeviceContext = createContext<DeviceContextProps>(getDeviceContext(getDeviceType()));
 
-/**
- * @deprecated Use {@link DesignSystem} instead
- */
 export const DeviceContextProvider: FunctionComponent<PropsWithChildren<DeviceContextProviderProps>> = ({
     children,
     staticDevice,
 }) => {
-    const [device, setDevice] = useState<DeviceContextProps>(getDeviceContext(staticDevice));
+    const deviceType = staticDevice || getDeviceType();
 
-    function handleScreenResize(): void {
-        const screenWidth = (window.innerWidth || document.documentElement.clientWidth);
-        const currentDevice = getDevice(screenWidth);
+    const previousDeviceType = useRef<DeviceType>(deviceType);
+    const previousStaticDevice = useRef<DeviceType | undefined>(staticDevice);
+    const [deviceContext, setDeviceContext] = useState<DeviceContextProps>(getDeviceContext(deviceType));
 
-        setDevice(getDeviceContext(currentDevice));
+    if (staticDevice !== previousStaticDevice.current) {
+        previousStaticDevice.current = staticDevice;
+        setDeviceContext(getDeviceContext(deviceType));
     }
 
+    const handleScreenResize = useCallback(() => {
+        const currentDeviceType = getDeviceType();
+
+        if (currentDeviceType !== previousDeviceType.current) {
+            previousDeviceType.current = currentDeviceType;
+            setDeviceContext(getDeviceContext(currentDeviceType));
+        }
+    }, []);
+
     useEffect(() => {
         if (!staticDevice) {
-            handleScreenResize();
             window.addEventListener('resize', handleScreenResize);
             return () => {
                 window.removeEventListener('resize', handleScreenResize);
             };
         }
         return undefined;
-    }, [staticDevice]);
+    }, [handleScreenResize, staticDevice]);
 
     return (
-        <DeviceContext.Provider value={device}>
+        <DeviceContext.Provider value={deviceContext}>
             {children}
         </DeviceContext.Provider>
     );

packages/react/src/components/internationalization-provider/internationalization-provider.tsx

@@ -15,9 +15,6 @@ interface IntlContextProps {
 
 const IntlContext = createContext<IntlContextProps>({ i18n: createI18n() });
 
-/**
- * @deprecated Use {@link DesignSystem} instead
- */
 export const IntlProvider: FunctionComponent<PropsWithChildren<IntlProviderProps>> = ({ children, language }) => {
     const [i18n] = useState(() => createI18n(language));
 

packages/react/src/components/table/sort-button-icon.test.tsx

@@ -1,10 +1,12 @@
 import { shallow } from 'enzyme';
 import { useTheme } from '../../hooks/use-theme';
-import { equisoftTheme } from '../../themes';
 import { SortButtonIcon } from './sort-button-icon';
+import { buildTheme, equisoftThemeCustomization } from '../../themes';
 
 jest.mock('../../hooks/use-theme');
 
+const equisoftTheme = buildTheme(equisoftThemeCustomization);
+
 describe('SortButtonIcon', () => {
     beforeEach(() => {
         jest.mocked(useTheme).mockReturnValue(equisoftTheme);

packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx

@@ -1,8 +1,8 @@
 import { render, shallow } from 'enzyme';
-import { buildTheme, Button } from '../..';
+import { Button } from '../..';
 import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper';
 import { ThemeWrapper } from './theme-wrapper';
-import { ThemeCustomization } from '../../themes/theme';
+import { ThemeCustomization } from '../../themes';
 
 describe('Theme Wrapper', () => {
     test('Returns component with default theme', () => {
@@ -25,10 +25,8 @@ describe('Theme Wrapper', () => {
             },
         };
 
-        const builtTheme = buildTheme(themeCustomization);
-
         const tree1 = render(
-            <ThemeWrapper theme={builtTheme}>
+            <ThemeWrapper themeCustomization={themeCustomization}>
                 <Button buttonType="primary" />
             </ThemeWrapper>,
         );

packages/react/src/components/theme-wrapper/theme-wrapper.tsx

@@ -1,39 +1,68 @@
-import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+import { FunctionComponent, PropsWithChildren } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { useStyle } from '../../styles';
-import { equisoftTheme } from '../../theme';
-import { ResolvedTheme } from '../../themes/theme';
+import { buildTheme, equisoftThemeCustomization, ThemeCustomization, TokenContext } from '../../themes';
 import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper';
+import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
+
+export interface DisplayPreferences {
+    // User-provided preferences for display (density, contrast, motion, etc.)
+}
 
 export interface ThemeWrapperProps {
     /**
      * When true, components are mounted in the Shadow DOM
      * @default false
      */
     isolateStyles?: boolean;
-    theme?: ResolvedTheme;
+    themeCustomization?: ThemeCustomization;
+    displayPreferences?: DisplayPreferences;
+}
+
+// Context values should be added in order of importance. Later values will be applied over earlier values.
+function getTokenContext(
+    deviceContext: DeviceContextProps,
+    // @ts-ignore Future use
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    displayPreferences?: DisplayPreferences,
+): TokenContext[] {
+    const context: TokenContext[] = [];
+
+    if (deviceContext.isMobile) {
+        context.push('mobile');
+    }
+
+    if (deviceContext.isTablet) {
+        context.push('tablet');
+    }
+
+    if (deviceContext.isDesktop) {
+        context.push('desktop');
+    }
+
+    return context;
 }
 
-/**
- * @deprecated Use {@link DesignSystem} instead
- */
 export const ThemeWrapper: FunctionComponent<PropsWithChildren<ThemeWrapperProps>> = ({
     children,
     isolateStyles = false,
-    theme = equisoftTheme,
+    themeCustomization = equisoftThemeCustomization,
+    displayPreferences,
 }) => {
-    let content: ReactNode;
-    if (isolateStyles) {
-        content = <ShadowWrapper>{children}</ShadowWrapper>;
-    } else {
-        content = children;
-    }
+    const deviceContext = useDeviceContext();
+
+    const resolvedTheme = buildTheme(
+        themeCustomization,
+        getTokenContext(deviceContext, displayPreferences),
+    );
 
     useStyle(isolateStyles);
 
     return (
-        <ThemeProvider theme={theme}>
-            {content}
+        <ThemeProvider theme={resolvedTheme}>
+            {isolateStyles
+                ? <ShadowWrapper>{children}</ShadowWrapper>
+                : children}
         </ThemeProvider>
     );
 };

packages/react/src/index.ts

@@ -42,9 +42,7 @@ export {
 } from './components/password-creation-input/validation-condition';
 
 // Context
-export { ThemeWrapper } from './components/theme-wrapper/theme-wrapper';
-export { DeviceContextProvider, useDeviceContext } from './components/device-context-provider/device-context-provider';
-export { IntlProvider } from './components/internationalization-provider/internationalization-provider';
+export { useDeviceContext } from './components/device-context-provider/device-context-provider';
 
 // Lists
 export { Listbox, ListboxOption } from './components/listbox/listbox';
@@ -105,9 +103,10 @@ export { ProgressCircle } from './components/progress-circle/progress-circle';
 export { Pagination } from './components/pagination/pagination';
 
 // Themes
-export { equisoftTheme, buildTheme } from './themes';
+export {
+    buildTheme, equisoftThemeCustomization, ResolvedTheme as Theme, ThemeCustomization,
+} from './themes';
 export { injectMainCss } from './styles';
-export { ResolvedTheme as Theme, ThemeCustomization } from './themes/theme';
 
 // Hooks
 export { useTheme } from './hooks/use-theme';

packages/react/src/test-utils/renderer.tsx

@@ -11,11 +11,11 @@ import { ThemeWrapper } from '../components/theme-wrapper/theme-wrapper';
 export const AllProviders: FunctionComponent<PropsWithChildren<DesignSystemProps>> = ({
     children,
     language,
-    theme,
+    themeCustomization,
     staticDevice,
 }) => (
     <MemoryRouter>
-        <DesignSystem language={language} staticDevice={staticDevice} theme={theme}>
+        <DesignSystem language={language} staticDevice={staticDevice} themeCustomization={themeCustomization}>
             {children}
         </DesignSystem>
     </MemoryRouter>

packages/react/src/test-utils/testing-library.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { DesignSystem, DesignSystemProps } from '../components/design-system';
-import { equisoftTheme } from '../theme';
+import { equisoftThemeCustomization } from '../theme';
 
 export function renderWithProviders(
     ui: Parameters<typeof render>[0],
@@ -12,11 +12,11 @@ export function renderWithProviders(
         isolateStyles,
         language,
         staticDevice,
-        theme,
+        themeCustomization,
     } = {
         isolateStyles: false,
         language: 'fr',
-        theme: equisoftTheme,
+        themeCustomization: equisoftThemeCustomization,
         ...wrapperProps,
     };
     return render(
@@ -29,7 +29,7 @@ export function renderWithProviders(
                         isolateStyles={isolateStyles}
                         language={language}
                         staticDevice={staticDevice}
-                        theme={theme}
+                        themeCustomization={themeCustomization}
                     >
                         {children}
                     </DesignSystem>

packages/react/src/theme.ts

@@ -1,3 +1,6 @@
-export { equisoftTheme } from './themes/equisoft';
-export { ResolvedTheme, ThemeCustomization } from './themes/theme';
-export { buildTheme } from './themes/build-theme';
+export {
+    buildTheme,
+    equisoftThemeCustomization,
+    ResolvedTheme,
+    ThemeCustomization,
+} from './themes';