@lumx/react 3.10.0 → 3.10.1-alpha.0

package/src/components/uploader/Uploader.tsx

@@ -6,6 +6,7 @@ import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 /**
  * Uploader variants.
@@ -65,7 +66,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<UploaderProps> = {
     aspectRatio: AspectRatio.horizontal,
     size: Size.xl,
-    theme: Theme.light,
     variant: UploaderVariant.square,
 };
 
@@ -77,7 +77,18 @@ const DEFAULT_PROPS: Partial<UploaderProps> = {
  * @return React element.
  */
 export const Uploader: Comp<UploaderProps> = forwardRef((props, ref) => {
-    const { aspectRatio, className, label, icon, size, theme, variant, fileInputProps, ...forwardedProps } = props;
+    const defaultTheme = useTheme() || Theme.light;
+    const {
+        aspectRatio,
+        className,
+        label,
+        icon,
+        size,
+        theme = defaultTheme,
+        variant,
+        fileInputProps,
+        ...forwardedProps
+    } = props;
     // Adjust to square aspect ratio when using circle variants.
     const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
 

package/src/components/user-block/UserBlock.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, within } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Thumbnail } from '@lumx/react';
@@ -13,10 +13,10 @@ const CLASSNAME = UserBlock.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: Partial<UserBlockProps> = {}) => {
+const setup = (propsOverride: Partial<UserBlockProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     const props: UserBlockProps = { ...propsOverride };
 
-    render(<UserBlock {...props} />);
+    render(<UserBlock {...props} />, { wrapper });
     const userBlock = getByClassName(document.body, CLASSNAME);
     const name = queryByClassName(userBlock, `${CLASSNAME}__name`);
     const avatar = queryByClassName(userBlock, `${CLASSNAME}__avatar`);
@@ -86,5 +86,11 @@ describe(`<${UserBlock.displayName}>`, () => {
         forwardClassName: 'userBlock',
         forwardAttributes: 'userBlock',
         forwardRef: 'userBlock',
+        applyTheme: {
+            affects: [{ element: 'userBlock' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
     });
 });

package/src/components/user-block/UserBlock.tsx

@@ -7,6 +7,7 @@ import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/reac
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { AvatarProps } from '../avatar/Avatar';
 
 /**
@@ -62,7 +63,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const DEFAULT_PROPS: Partial<UserBlockProps> = {
     orientation: Orientation.horizontal,
     size: Size.m,
-    theme: Theme.light,
 };
 
 /**
@@ -73,6 +73,7 @@ const DEFAULT_PROPS: Partial<UserBlockProps> = {
  * @return React element.
  */
 export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
     const {
         avatarProps,
         className,
@@ -88,7 +89,7 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
         orientation,
         simpleAction,
         size,
-        theme,
+        theme = defaultTheme,
         ...forwardedProps
     } = props;
     let componentSize = size;

package/src/index.ts

@@ -58,3 +58,4 @@ export * from './components/toolbar';
 export * from './components/tooltip';
 export * from './components/uploader';
 export * from './components/user-block';
+export { ThemeProvider, useTheme } from './utils/theme/ThemeContext';

package/src/testing/utils/ThemeSentinel.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+
+const TEST_ID = 'theme-sentinel';
+
+/** Test component used as sentinel to detect the value of the theme context */
+export function ThemeSentinel() {
+    const theme = useTheme();
+    return <div data-testid={TEST_ID} className={`--theme-${theme}`} />;
+}
+ThemeSentinel.testId = TEST_ID;

package/src/testing/utils/commonTestsSuiteRTL.tsx

@@ -0,0 +1,190 @@
+import isEmpty from 'lodash/isEmpty';
+
+import { GenericProps } from '@lumx/react/utils/type';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import React from 'react';
+import { Theme } from '@lumx/react';
+import { RenderOptions } from '@testing-library/react';
+import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
+import castArray from 'lodash/castArray';
+import { invertTheme } from '@lumx/react/utils/theme/invertTheme';
+
+interface CommonSetup {
+    props: GenericProps;
+}
+
+type AffectConfig<E> = { element: E; classModifier?: 'color' | 'theme'; inverted?: boolean };
+type Not<E> = { not: E };
+
+interface Options<S extends CommonSetup> {
+    baseClassName: string;
+    forwardClassName?: keyof S;
+    forwardAttributes?: keyof S;
+    forwardRef?: keyof S;
+    applyTheme?: {
+        /** Element(s) to which we apply the theme class */
+        affects: Array<AffectConfig<keyof S> | Not<AffectConfig<keyof S>>>;
+        /** Apply theme via theme prop */
+        viaProp: boolean;
+        /** Apply theme via theme context */
+        viaContext: boolean;
+        /** Apply a default theme if no prop or context was provided */
+        defaultTheme?: Theme;
+    };
+}
+
+export type SetupRenderOptions = { wrapper?: RenderOptions['wrapper'] };
+export type SetupFunction<S extends CommonSetup> = (
+    props?: GenericProps,
+    options?: SetupRenderOptions,
+) => S | Promise<S>;
+
+/**
+ * Common tests on components
+ * - Check base class name and class name forwarding
+ * - Check props forwarding
+ */
+export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<S>, options: Options<S>): void {
+    if (isEmpty(options)) {
+        return;
+    }
+    const { baseClassName, forwardClassName, forwardAttributes, forwardRef, applyTheme } = options;
+    describe('Common tests suite', () => {
+        it('should render with base class name', async () => {
+            await setup();
+            expect(queryByClassName(document.body, baseClassName)).toBeInTheDocument();
+        });
+
+        if (forwardClassName) {
+            it('should forward any CSS class', async () => {
+                const modifiedProps = {
+                    className: 'component component--is-tested',
+                };
+                const wrappers = await setup(modifiedProps);
+                expect(wrappers[forwardClassName]).toHaveClass(modifiedProps.className);
+            });
+        }
+
+        if (forwardAttributes) {
+            it('should forward any other prop', async () => {
+                const modifiedProps = {
+                    winter: 'is coming',
+                };
+                const wrappers = await setup(modifiedProps);
+                expect(wrappers[forwardAttributes]).toHaveAttribute('winter', modifiedProps.winter);
+            });
+        }
+
+        if (forwardRef) {
+            it('should forward ref', async () => {
+                const ref = React.createRef();
+                const wrappers = await setup({ ref });
+                expect(ref.current).toBe(wrappers[forwardRef]);
+            });
+        }
+
+        if (applyTheme) {
+            describe('theme', () => {
+                const { affects, defaultTheme, viaProp, viaContext } = applyTheme;
+                const testElements = affects.map((configOrNot) => {
+                    let shouldHaveModifier: boolean = true;
+                    let config: AffectConfig<any>;
+                    if ('not' in configOrNot) {
+                        shouldHaveModifier = false;
+                        config = configOrNot.not;
+                    } else config = configOrNot;
+
+                    const {
+                        element,
+                        classModifier = 'theme',
+                        inverted = false,
+                    }: AffectConfig<any> = typeof config === 'object' ? config : { element: config };
+                    return {
+                        element,
+                        getExpectedClassModifier: (theme: Theme) =>
+                            `--${classModifier}-${inverted ? invertTheme(theme) : theme}`,
+                        shouldHaveModifier,
+                        apply: shouldHaveModifier ? 'apply' : 'not apply',
+                    };
+                });
+
+                const expectTheme = (
+                    wrappers: any,
+                    { element, getExpectedClassModifier, shouldHaveModifier }: any,
+                    theme: Theme,
+                    override: { shouldHaveModifier?: boolean } = {},
+                ) => {
+                    for (const wrapper of castArray(wrappers[element])) {
+                        let expected: any = expect(wrapper.className);
+                        if (override.shouldHaveModifier === false || !shouldHaveModifier) {
+                            expected = expected.not;
+                        }
+                        expected.toContain(getExpectedClassModifier(theme));
+                    }
+                };
+
+                if (defaultTheme) {
+                    it.each(testElements)(
+                        `should $apply default theme (${defaultTheme}) to \`$element\``,
+                        async (affectedElement) => {
+                            const wrappers = await setup();
+                            expectTheme(wrappers, affectedElement, defaultTheme);
+                        },
+                    );
+                }
+
+                // Only the elements that are affected by theme
+                const affectedElements = testElements.filter((e) => e.shouldHaveModifier);
+                if (!defaultTheme && affectedElements.length) {
+                    it.each(affectedElements)(
+                        `should not apply default theme (${defaultTheme}) to \`$element\``,
+                        async (affectedElement) => {
+                            const wrappers = await setup();
+                            expectTheme(wrappers, affectedElement, Theme.light, { shouldHaveModifier: false });
+                            expectTheme(wrappers, affectedElement, Theme.dark, { shouldHaveModifier: false });
+                        },
+                    );
+                }
+
+                if (viaProp) {
+                    const theme = invertTheme(defaultTheme || Theme.light);
+                    it.each(testElements)(
+                        `should $apply prop theme=${theme} to \`$element\``,
+                        async (affectedElement) => {
+                            const wrappers = await setup({ theme });
+                            expectTheme(wrappers, affectedElement, theme);
+                        },
+                    );
+                }
+
+                const contextTheme = invertTheme(defaultTheme || Theme.light);
+                it.each(testElements)(
+                    `should $apply context theme=${contextTheme} to \`$element\``,
+                    async (affectedElement) => {
+                        const Wrapper = ({ children }: any) => (
+                            <ThemeProvider value={contextTheme}>{children}</ThemeProvider>
+                        );
+                        const wrappers = await setup({}, { wrapper: Wrapper });
+                        expectTheme(wrappers, affectedElement, contextTheme, {
+                            shouldHaveModifier: !viaContext ? false : undefined,
+                        });
+                    },
+                );
+
+                if (viaProp && viaContext) {
+                    const propTheme = invertTheme(contextTheme);
+                    it.each(testElements)(
+                        `should $apply prop theme=${propTheme} to \`$element\` overriding the context theme=${contextTheme}`,
+                        async (affectedElement) => {
+                            const Wrapper = ({ children }: any) => (
+                                <ThemeProvider value={contextTheme}>{children}</ThemeProvider>
+                            );
+                            const wrappers = await setup({ theme: propTheme }, { wrapper: Wrapper });
+                            expectTheme(wrappers, affectedElement, propTheme);
+                        },
+                    );
+                }
+            });
+        }
+    });
+}

package/src/utils/theme/ThemeContext.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Theme } from '@lumx/react';
+
+type ThemeContextValue = Theme | undefined;
+export const ThemeContext = React.createContext<ThemeContextValue>(undefined);
+
+/** Provide a theme context to all children. */
+export const ThemeProvider = ThemeContext.Provider as React.FC<{
+    value: ThemeContextValue;
+    children?: React.ReactNode;
+}>;
+
+/** Get the theme in the current context. */
+export function useTheme(): ThemeContextValue {
+    return React.useContext(ThemeContext);
+}

package/src/utils/theme/invertTheme.ts

@@ -0,0 +1,4 @@
+import type { Theme } from '@lumx/react';
+
+/** Invert the color of the given theme. */
+export const invertTheme = (theme: Theme): Theme => (theme === 'light' ? 'dark' : 'light');

package/src/testing/utils/commonTestsSuiteRTL.ts

@@ -1,64 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import React from 'react';
-
-interface CommonSetup {
-    props: GenericProps;
-}
-
-interface Options<S extends CommonSetup> {
-    baseClassName: string;
-    forwardClassName?: keyof S;
-    forwardAttributes?: keyof S;
-    forwardRef?: keyof S;
-}
-
-type SetupFunction<S extends CommonSetup> = (props?: GenericProps) => S | Promise<S>;
-
-/**
- * Common tests on components
- * - Check base class name and class name forwarding
- * - Check props forwarding
- */
-export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<S>, options: Options<S>): void {
-    if (isEmpty(options)) {
-        return;
-    }
-    const { baseClassName, forwardClassName, forwardAttributes, forwardRef } = options;
-    describe('Common tests suite', () => {
-        it('should render with base class name', async () => {
-            await setup();
-            expect(queryByClassName(document.body, baseClassName)).toBeInTheDocument();
-        });
-
-        if (forwardClassName) {
-            it('should forward any CSS class', async () => {
-                const modifiedProps = {
-                    className: 'component component--is-tested',
-                };
-                const wrappers = await setup(modifiedProps);
-                expect(wrappers[forwardClassName]).toHaveClass(modifiedProps.className);
-            });
-        }
-
-        if (forwardAttributes) {
-            it('should forward any other prop', async () => {
-                const modifiedProps = {
-                    winter: 'is coming',
-                };
-                const wrappers = await setup(modifiedProps);
-                expect(wrappers[forwardAttributes]).toHaveAttribute('winter', modifiedProps.winter);
-            });
-        }
-
-        if (forwardRef) {
-            it('should forward ref', async () => {
-                const ref = React.createRef();
-                const wrappers = await setup({ ref });
-                expect(ref.current).toBe(wrappers[forwardRef]);
-            });
-        }
-    });
-}

package/src/utils/ThemeContext.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import { Theme } from '..';
-
-export const ThemeContext = createContext<Theme | undefined>(undefined);