@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

package/src/components/tabs/state.ts

@@ -0,0 +1,114 @@
+import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';
+import { useId } from '@lumx/react/hooks/useId';
+
+type TabType = 'tab' | 'tabPanel';
+
+export interface State {
+    isLazy: boolean;
+    shouldActivateOnFocus: boolean;
+    activeTabIndex: number;
+    ids: Record<TabType, string[]>;
+}
+
+export const INIT_STATE: State = {
+    isLazy: true,
+    shouldActivateOnFocus: false,
+    activeTabIndex: 0,
+    ids: { tab: [], tabPanel: [] },
+};
+
+export type Action =
+    | { type: 'update'; payload: Partial<State> }
+    | { type: 'setActiveTabIndex'; payload: number }
+    | { type: 'register'; payload: { type: TabType; id: string } }
+    | { type: 'unregister'; payload: { type: TabType; id: string } };
+
+export const reducer = (state: State, action: Action): State => {
+    switch (action.type) {
+        case 'update':
+            return { ...state, ...action.payload };
+        case 'setActiveTabIndex': {
+            if (state.activeTabIndex === action.payload) {
+                return state;
+            }
+            // Change active tab index.
+            return { ...state, activeTabIndex: action.payload };
+        }
+        case 'register': {
+            const { type, id } = action.payload;
+            // Append tab/tabPanel id in state.
+            return { ...state, ids: { ...state.ids, [type]: [...state.ids[type], id] } };
+        }
+        case 'unregister': {
+            const { type, id } = action.payload;
+            const index = state.ids[type].indexOf(id);
+            if (index === -1) return state;
+            // Remove tab & tab panel at index.
+            const tabIds = [...state.ids.tab];
+            tabIds.splice(index, 1);
+            const tabPanelIds = [...state.ids.tabPanel];
+            tabPanelIds.splice(index, 1);
+            return {
+                ...state,
+                ids: { tab: tabIds, tabPanel: tabPanelIds },
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const TabProviderContext = createContext<[State, Dispatch<Action>] | null>(null);
+
+export type TabState = Pick<Required<State>, 'isLazy' | 'shouldActivateOnFocus'> & {
+    isActive: boolean;
+    tabId: string;
+    tabPanelId: string;
+    changeToTab(): void;
+};
+
+/* eslint-disable react-hooks/rules-of-hooks */
+export const useTabProviderContext = (type: TabType, originalId?: string): undefined | TabState => {
+    const context = useContext(TabProviderContext);
+    if (!context) {
+        return undefined;
+    }
+    const [state, dispatch] = context;
+
+    // Current tab or tab panel id.
+    const generatedId = useId();
+    const id = originalId || generatedId;
+
+    useEffect(
+        () => {
+            // On mount: register tab or tab panel id.
+            dispatch({ type: 'register', payload: { type, id } });
+            return () => {
+                // On unmount: unregister tab or tab panel id.
+                dispatch({ type: 'unregister', payload: { type, id } });
+            };
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
+
+    // Find tab/tabPanel index using it's id.
+    const index = useMemo(() => state.ids[type].indexOf(id), [state.ids, type, id]);
+    const tabId = useMemo(() => state.ids.tab[index] || '', [state, index]);
+    const tabPanelId = useMemo(() => state.ids.tabPanel[index] || '', [state, index]);
+    const isActive = useMemo(() => state.activeTabIndex === index, [state, index]);
+    const changeToTab = useCallback(() => dispatch({ type: 'setActiveTabIndex', payload: index }), [dispatch, index]);
+    return {
+        isLazy: state.isLazy,
+        shouldActivateOnFocus: state.shouldActivateOnFocus,
+        tabId,
+        tabPanelId,
+        isActive,
+        changeToTab,
+    };
+};
+
+export const useTabProviderContextState = (): State | undefined => {
+    const context = useContext(TabProviderContext);
+    return context?.[0];
+};

package/src/components/tabs/test-utils.ts

@@ -0,0 +1,39 @@
+/* istanbul ignore file */
+
+/**
+ * Test util module. Do not import in production code !
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { screen, within } from '@testing-library/react';
+
+/** RTL queries for tabs */
+export const query = {
+    tabList: (name: string) => screen.getByRole('tablist', { name }),
+    tabs: (tabList?: any) => (tabList ? within(tabList) : screen).getAllByRole('tab'),
+    tab: (name: string, tabList?: any) => (tabList ? within(tabList) : screen).getByRole('tab', { name }),
+    tabPanel: (name: string) => screen.getByRole('tabpanel', { name }),
+};
+
+/** Assert that the given tab is active */
+export const checkTabActive = (activeTabName: string, { isLazy = true } = {}) => {
+    for (const tab of query.tabs()) {
+        const isTabActive = tab.textContent === activeTabName;
+
+        // Tab state
+        expect(tab).toHaveAttribute('aria-selected', String(isTabActive));
+        expect(tab).toHaveAttribute('tabindex', isTabActive ? '0' : '-1');
+
+        const tabPanel = query.tabPanel(tab.textContent as string);
+
+        // Tab panel state
+        expect(tabPanel).toHaveAttribute('tabindex', isTabActive ? '0' : '-1');
+
+        if (!isTabActive && isLazy) {
+            // Tab panel content not rendered when isLazy and not active
+            expect(tabPanel).toBeEmptyDOMElement();
+        } else {
+            expect(tabPanel).not.toBeEmptyDOMElement();
+        }
+    }
+};

package/src/components/text/Text.stories.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+
+import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
+import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
+import { textElementArgType } from '@lumx/react/stories/controls/element';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { Button, ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
+import { mdiEarth, mdiHeart } from '@lumx/icons';
+import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+
+import { Text } from './Text';
+
+export default {
+    title: 'LumX components/text/Text',
+    component: Text,
+    args: Text.defaultProps,
+    argTypes: {
+        children: { control: false },
+        as: textElementArgType,
+        typography: allTypographyArgType,
+        color: colorArgType,
+        colorVariant: colorVariantArgType,
+        whiteSpace: getSelectArgType(WhiteSpace),
+    },
+};
+
+/**
+ * Default text component as a paragraph
+ */
+export const Default = {
+    args: {
+        as: 'p',
+        children: 'Some text',
+    },
+};
+
+/**
+ * Text containing icons (should match font size)
+ */
+export const WithIcon = {
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                Some text <Icon icon={mdiHeart} /> with icons <Icon icon={mdiEarth} />
+            </>
+        ),
+    },
+};
+
+/**
+ * Long text should wrap by default
+ */
+export const LongText = {
+    args: {
+        ...Default.args,
+        children: loremIpsum('tiny'),
+    },
+    decorators: [withResizableBox()],
+};
+
+/**
+ * Long text without wrapping
+ */
+export const NoWrap = {
+    ...LongText,
+    args: {
+        ...LongText.args,
+        noWrap: true,
+    },
+};
+
+/**
+ * Long text with line breaks
+ */
+export const AllWhiteSpace = {
+    args: {
+        ...Default.args,
+        children: `
+        But ere she from the church-door stepped She smiled and told us why: 'It was a wicked woman's curse,' Quoth she,
+        'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—
+      `,
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'whiteSpace', options: Object.values(WhiteSpace) },
+            },
+            tableStyle: { width: 500, tableLayout: 'fixed' },
+            firstColStyle: { width: 100 },
+            cellStyle: { border: '1px solid #000', width: '100%' },
+        }),
+    ],
+};
+
+/**
+ * Long text with single line truncate ellipsis
+ */
+export const Truncate = {
+    ...LongText,
+    args: {
+        ...LongText.args,
+        truncate: true,
+    },
+};
+
+/**
+ * Test the update of the `title` attribute when text overflows
+ */
+export const TestUpdateTruncateTitleLabel = {
+    render(args: any) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [content, setContent] = React.useState<string>('Some text');
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const lengthen = React.useCallback(() => setContent((prevContent) => `${prevContent} ${prevContent}`), []);
+        return (
+            <>
+                <Button onClick={lengthen}>Lengthen text</Button>
+                <Text as="p" truncate style={{ maxWidth: 300 }} {...args}>
+                    {content}
+                </Text>
+            </>
+        );
+    },
+    // Disables Chromatic snapshot (not relevant for this story).
+    parameters: { chromatic: { disable: true } },
+};
+
+/**
+ * Long text with multi line truncate ellipsis
+ */
+export const TruncateMultiline = {
+    ...LongText,
+    args: {
+        ...LongText.args,
+        truncate: { lines: 2 },
+    },
+};
+
+/**
+ * All typographies
+ */
+export const AllTypography = {
+    ...WithIcon,
+    argTypes: {
+        typography: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'typography', options: withUndefined(ALL_TYPOGRAPHY) },
+            },
+        }),
+    ],
+};
+
+/**
+ * All combinations of color and color variants
+ */
+export const AllColors = {
+    ...WithIcon,
+    argTypes: {
+        color: { control: false },
+        colorVariant: { control: false },
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'color', options: withUndefined(ColorPalette) },
+                cols: { key: 'colorVariant', options: withUndefined(ColorVariant) },
+            },
+        }),
+    ],
+};

package/src/components/text/Text.test.tsx

@@ -0,0 +1,92 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { mdiEarth } from '@lumx/icons';
+import { Icon } from '@lumx/react';
+import { render } from '@testing-library/react';
+import { getByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
+import { Text, TextProps } from '.';
+
+const setup = (props: Partial<TextProps> = {}) => {
+    const { container } = render(<Text as="span" {...props} />);
+    const element = getByClassName(container, Text.className as string);
+    return { props, container, element };
+};
+
+describe(`<${Text.displayName}>`, () => {
+    describe('Render', () => {
+        it('should render default', () => {
+            const { element } = setup({ children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+        });
+
+        it('should render with as', () => {
+            const { element } = setup({ children: 'Some text', as: 'p' });
+            expect(element.tagName).toBe('P');
+        });
+
+        it('should render with typography', () => {
+            const { element } = setup({ typography: 'body2', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-typography-body2');
+        });
+
+        it('should render with color', () => {
+            const { element } = setup({ color: 'blue', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-color-font-blue-N');
+        });
+
+        it('should render with color and variant', () => {
+            const { element } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-color-font-blue-D2');
+        });
+
+        it('should render truncated', () => {
+            const { element } = setup({ truncate: true });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--is-truncated');
+        });
+
+        it('should render truncated multiline', () => {
+            const { element } = setup({ truncate: { lines: 2 } });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--is-truncated-multiline');
+        });
+
+        it('should render noWrap', () => {
+            const { element } = setup({ noWrap: true });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--no-wrap');
+        });
+
+        it('should render with custom whiteSpace', () => {
+            const { element } = setup({ whiteSpace: 'pre-wrap' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveStyle({ '--lumx-text-white-space': 'pre-wrap' });
+        });
+
+        it('should wrap icons with spaces', () => {
+            const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
+            const icons = queryAllByClassName(element, Icon.className as string);
+            expect(icons).toHaveLength(1);
+
+            // Icons are all wrapped with spaces
+            for (const icon of icons) {
+                expect((icon.previousSibling as any).textContent).toEqual(' ');
+                expect((icon.nextSibling as any).textContent).toEqual(' ');
+            }
+        });
+
+        it('should render dangerouslySetInnerHTML', () => {
+            const { element } = setup({ dangerouslySetInnerHTML: { __html: '<strong>HTML text</strong>' } });
+            expect(element).toHaveTextContent('HTML text');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: Text.className as string,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+    });
+});

package/src/components/text/Text.tsx

@@ -0,0 +1,139 @@
+import classNames from 'classnames';
+
+import { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
+import { GenericProps, TextElement } from '@lumx/react/utils/type';
+import {
+    fontColorClass,
+    getRootClassName,
+    handleBasicClasses,
+    getTypographyClassName,
+} from '@lumx/core/js/utils/className';
+import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
+
+/**
+ * Defines the props of the component.
+ */
+export interface TextProps extends GenericProps {
+    /**
+     * Color variant.
+     */
+    color?: ColorWithVariants;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+    /**
+     * Custom component to render the text.
+     */
+    as: TextElement;
+    /**
+     * Control whether the text should truncate or not.
+     * Setting as `true` will make the text truncate on a single line.
+     * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+     */
+    truncate?: boolean | { lines: number };
+    /**
+     * Prevents text to wrap on multiple lines
+     * (automatically activated when single line text truncate is activated).
+     */
+    noWrap?: boolean;
+    /**
+     * WhiteSpace variant
+     * Ignored when `noWrap` is set to true
+     * Ignored when `truncate` is set to true or lines: 1
+     * */
+    whiteSpace?: WhiteSpace;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Text';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Text = forwardRef<TextProps>((props, ref) => {
+    const {
+        as: Component,
+        children,
+        className,
+        color,
+        colorVariant,
+        noWrap,
+        typography,
+        truncate,
+        whiteSpace,
+        style,
+        ...forwardedProps
+    } = props;
+
+    const typographyClass = typography && getTypographyClassName(typography);
+
+    // Truncate mode
+    const truncateLinesStyle = typeof truncate === 'object' &&
+        truncate.lines > 1 && { '--lumx-text-truncate-lines': truncate.lines };
+    const isTruncatedMultiline = !!truncateLinesStyle;
+    const isTruncated = !!truncate;
+
+    /**
+     * Add custom white-space style if specified
+     * Disabled if noWrap is specified
+     * Disabled if truncated on one-line
+     * */
+    const whiteSpaceStyle = !noWrap &&
+        !(isTruncated && !isTruncatedMultiline) &&
+        whiteSpace && { '--lumx-text-white-space': whiteSpace };
+
+    const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);
+
+    return (
+        <Component
+            ref={useMergeRefs(ref as React.Ref<any>, labelRef)}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    isTruncated: isTruncated && !isTruncatedMultiline,
+                    isTruncatedMultiline,
+                }),
+                typographyClass,
+                fontColorClass(color, colorVariant),
+                noWrap && `${CLASSNAME}--no-wrap`,
+            )}
+            title={tooltipLabel}
+            style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}
+            {...forwardedProps}
+        >
+            {wrapChildrenIconWithSpaces(children)}
+        </Component>
+    );
+});
+Text.displayName = COMPONENT_NAME;
+Text.className = CLASSNAME;
+Text.defaultProps = DEFAULT_PROPS;

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './Text';