@lumx/react 3.21.1-alpha.0 → 3.21.2-alpha.0

package/src/components/tabs/state.ts

@@ -1,114 +0,0 @@
-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

@@ -1,39 +0,0 @@
-/* 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

@@ -1,177 +0,0 @@
-import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
-import React from 'react';
-
-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

@@ -1,94 +0,0 @@
-import React from 'react';
-
-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

@@ -1,141 +0,0 @@
-import React from 'react';
-
-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

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

package/src/components/text-field/RawInputText.stories.tsx

@@ -1,18 +0,0 @@
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-import { RawInputText } from './RawInputText';
-
-export default {
-    title: 'LumX components/text-field/RawInputText',
-    component: RawInputText,
-    decorators: [withValueOnChange(), withWrapper({ style: { border: '1px dashed red' } })],
-};
-
-export const Default = {};
-
-export const WithPlaceholder = {
-    args: {
-        placeholder: 'Input placeholder',
-    },
-};

package/src/components/text-field/RawInputText.test.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-
-import { RawInputText, RawInputTextProps } from './RawInputText';
-import { INPUT_NATIVE_CLASSNAME } from './constants';
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: Partial<RawInputTextProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { ...propsOverride };
-    render(<RawInputText {...props} />, { wrapper });
-    const input = getByClassName(document.body, INPUT_NATIVE_CLASSNAME);
-    return { props, input };
-};
-
-describe(`<${RawInputText.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { input } = setup();
-            expect(input).toBeInTheDocument();
-            expect(input?.tagName).toBe('INPUT');
-            expect(input).toHaveAttribute('type', 'text');
-        });
-
-        it('should render with custom type', () => {
-            const { input } = setup({ type: 'number' });
-            expect(input).toHaveAttribute('type', 'number');
-        });
-    });
-
-    describe('Events', () => {
-        it('should call onChange with correct value when typing', async () => {
-            const onChange = vi.fn();
-            const name = 'inputName';
-            const { input } = setup({ onChange, name });
-            await userEvent.type(input as Element, 'hello');
-            expect(onChange).toHaveBeenCalledWith('h', name, expect.any(Object));
-            expect(onChange).toHaveBeenCalledWith('hello', name, expect.any(Object));
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: INPUT_NATIVE_CLASSNAME,
-        forwardClassName: 'input',
-        forwardAttributes: 'input',
-        forwardRef: 'input',
-        applyTheme: {
-            affects: [{ element: 'input' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});