@lumx/react 3.21.1 → 3.21.2-alpha.1

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

@@ -1,69 +0,0 @@
-import React, { ComponentProps, ChangeEventHandler, SyntheticEvent, useRef, useCallback } from 'react';
-
-import classNames from 'classnames';
-
-import { Theme, useTheme } from '@lumx/react';
-
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { HasClassName, HasTheme } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/core/js/utils';
-
-import { INPUT_NATIVE_CLASSNAME } from './constants';
-
-type NativeInputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'>;
-
-/**
- * Defines the props of the component.
- */
-export interface RawInputTextProps extends NativeInputProps, HasTheme, HasClassName {
-    value?: string;
-    onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
-}
-/**
- * Component default props.
- */
-export const DEFAULT_PROPS: Partial<RawInputTextProps> = {
-    type: 'text',
-};
-
-/**
- * Raw input text component
- * (input element without any decoration)
- */
-export const RawInputText = forwardRef<RawInputTextProps, HTMLInputElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        className,
-        theme = defaultTheme,
-        value,
-        onChange,
-        type = DEFAULT_PROPS.type,
-        name,
-        ...forwardedProps
-    } = props;
-    const textareaRef = useRef<HTMLInputElement>(null);
-
-    const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-        (evt) => {
-            onChange?.(evt.target.value, name, evt);
-        },
-        [onChange, name],
-    );
-
-    return (
-        <input
-            {...forwardedProps}
-            name={name}
-            type={type}
-            ref={useMergeRefs(ref, textareaRef)}
-            className={classNames(
-                className,
-                handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }),
-                `${INPUT_NATIVE_CLASSNAME}--text`,
-            )}
-            onChange={handleChange}
-            value={value}
-        />
-    );
-});

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

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

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

@@ -1,64 +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 { RawInputTextarea, RawInputTextareaProps, DEFAULT_PROPS } from './RawInputTextarea';
-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<RawInputTextareaProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: any = { ...propsOverride };
-    render(<RawInputTextarea {...props} />, { wrapper });
-    const textarea = getByClassName(document.body, INPUT_NATIVE_CLASSNAME);
-    return { props, textarea };
-};
-
-describe(`<${RawInputTextarea.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { textarea } = setup();
-            expect(textarea).toBeInTheDocument();
-            expect(textarea?.tagName).toBe('TEXTAREA');
-            expect(textarea).toHaveAttribute('rows', String(DEFAULT_PROPS.minimumRows));
-        });
-
-        it('should render with custom minimumRows', () => {
-            const { textarea } = setup({ minimumRows: 5 });
-            expect(textarea).toHaveAttribute('rows', '5');
-        });
-
-        it('should render with placeholder', () => {
-            const { textarea } = setup({ placeholder: 'Test placeholder' });
-            expect(textarea).toHaveAttribute('placeholder', 'Test placeholder');
-        });
-    });
-
-    describe('Events', () => {
-        it('should call onChange with correct value when typing', async () => {
-            const onChange = vi.fn();
-            const name = 'textareaName';
-            const { textarea } = setup({ onChange, name });
-            await userEvent.type(textarea 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: 'textarea',
-        forwardAttributes: 'textarea',
-        forwardRef: 'textarea',
-        applyTheme: {
-            affects: [{ element: 'textarea' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/text-field/RawInputTextarea.tsx

@@ -1,74 +0,0 @@
-import React, { ComponentProps, ChangeEventHandler, SyntheticEvent, useRef, useCallback } from 'react';
-
-import classNames from 'classnames';
-
-import { Theme, useTheme } from '@lumx/react';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import type { HasClassName, HasTheme } from '@lumx/core/js/types';
-
-import { handleBasicClasses } from '@lumx/core/js/utils';
-
-import { useFitRowsToContent } from './useFitRowsToContent';
-import { INPUT_NATIVE_CLASSNAME } from './constants';
-
-type NativeTextareaProps = ComponentProps<'textarea'>;
-
-/**
- * Defines the props of the component.
- */
-export interface RawInputTextareaProps extends Omit<NativeTextareaProps, 'value' | 'onChange'>, HasTheme, HasClassName {
-    minimumRows?: number;
-    value?: string;
-    onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
-}
-
-/**
- * Component default props.
- */
-export const DEFAULT_PROPS: Partial<RawInputTextareaProps> = {
-    minimumRows: 2,
-};
-
-/**
- * Raw input text area component
- * (textarea element without any decoration)
- */
-export const RawInputTextarea = forwardRef<Omit<RawInputTextareaProps, 'type'>, HTMLTextAreaElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        className,
-        theme = defaultTheme,
-        minimumRows = DEFAULT_PROPS.minimumRows as number,
-        value,
-        name,
-        onChange,
-        ...forwardedProps
-    } = props;
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-    const rows = useFitRowsToContent(minimumRows, textareaRef, value);
-
-    const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
-        (evt) => {
-            onChange?.(evt.target.value, name, evt);
-        },
-        [onChange, name],
-    );
-
-    return (
-        <textarea
-            {...forwardedProps}
-            name={name}
-            className={classNames(
-                className,
-                handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }),
-                `${INPUT_NATIVE_CLASSNAME}--textarea`,
-            )}
-            ref={useMergeRefs(ref, textareaRef)}
-            onChange={handleChange}
-            value={value}
-            rows={rows}
-        />
-    );
-});

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

@@ -1,180 +0,0 @@
-import React from 'react';
-import { mdiTranslate } from '@lumx/icons';
-import { Chip, IconButton, TextField, Typography } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/text-field/TextField',
-    component: TextField,
-    args: TextField.defaultProps,
-    argTypes: {
-        clearButtonProps: { control: false },
-        chips: { control: false },
-        afterElement: { control: false },
-        onClear: { action: true },
-    },
-    decorators: [withValueOnChange({})],
-};
-
-/**
- * Default text field
- */
-export const Default = {
-    args: {
-        value: '',
-    },
-};
-
-/**
- * With placeholder
- */
-export const Placeholder = {
-    args: {
-        value: '',
-        placeholder: 'Texfield placeholder',
-    },
-};
-
-/**
- * With label and helper
- */
-export const LabelAndHelper = {
-    args: {
-        ...Default.args,
-        label: 'Textfield label',
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * With custom label and helper
- */
-export const CustomLabelAndHelper = {
-    args: {
-        ...Default.args,
-        label: 'Textfield label',
-        labelProps: {
-            typography: Typography.subtitle1,
-        },
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * With clear button
- */
-export const Clearable = () => {
-    const inputRef = React.useRef(null);
-    const [value, setValue] = React.useState('Some value');
-
-    return (
-        <TextField
-            value={value}
-            clearButtonProps={{ label: 'Clear' }}
-            onChange={setValue}
-            inputRef={inputRef}
-            {...TextField.defaultProps}
-        />
-    );
-};
-
-/**
- * As number field
- */
-export const NumberField = {
-    args: {
-        value: '0',
-        type: 'number',
-    },
-};
-
-/**
- * Multiline textarea
- */
-export const TextareaField = {
-    args: {
-        value: loremIpsum('tiny'),
-        multiline: true,
-        minimumRows: 2,
-    },
-};
-
-/**
- * Error state
- */
-export const Error = {
-    args: {
-        ...LabelAndHelper.args,
-        hasError: true,
-        error: 'Error message',
-    },
-};
-
-/**
- * Valid state
- */
-export const Valid = {
-    args: {
-        ...LabelAndHelper.args,
-        isValid: true,
-    },
-};
-
-/**
- * Max length with character counter
- */
-export const MaxLength = {
-    args: {
-        ...LabelAndHelper.args,
-        value: 'Textfield value',
-        maxLength: 195,
-    },
-};
-
-/**
- * Custom element at the end
- */
-export const WithAfterElement = {
-    args: {
-        value: '',
-        afterElement: <IconButton label="translate" emphasis="medium" size="s" icon={mdiTranslate} />,
-    },
-};
-
-/**
- * Chips at the start
- */
-export const WithChips = {
-    args: {
-        value: '',
-        chips: (
-            <>
-                <Chip size="s">Chip 1</Chip>
-                <Chip size="s">Chip 2</Chip>
-            </>
-        ),
-    },
-};
-
-/**
- * Disabled state
- */
-export const Disabled = {
-    args: {
-        value: 'Some value',
-        label: 'Label',
-        helper: 'Helper',
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { disabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};