feat(input): add raw input text and textarea components

Author: gcornut

CHANGELOG.md

@@ -12,6 +12,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   `@lumx/react`:
     -   _[BREAKING]_ Drop support for React 16
 
+### Added
+
+-   `@lumx/react`:
+    -   Added `RawInputText` and `RawInputTextarea` components. Decoration-less version of input and textarea used in
+        `TextField` component
+
 ## [3.20.0][] - 2025-11-20
 
 ### Changed

packages/lumx-core/src/scss/components/input/_index.scss

@@ -0,0 +1,37 @@
+/* ==========================================================================
+   Input
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-raw-input-text, .#{$lumx-base-prefix}-raw-input-textarea {
+    resize: none;
+
+    &--theme-light {
+        @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
+        @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "LIGHT")
+        );
+
+        &::placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const("state", "DEFAULT"),
+                    lumx-base-const("theme", "LIGHT")
+            );
+        }
+    }
+
+    &--theme-dark {
+        @include lumx-text-field-input-native(lumx-base-const("theme", "DARK"));
+        @include lumx-text-field-input-content-color(
+                lumx-base-const("state", "DEFAULT"),
+                lumx-base-const("theme", "DARK")
+        );
+
+        &::placeholder {
+            @include lumx-text-field-input-placeholder-color(
+                    lumx-base-const("state", "DEFAULT"),
+                    lumx-base-const("theme", "DARK")
+            );
+        }
+    }
+}

packages/lumx-core/src/scss/lumx.scss

@@ -38,6 +38,7 @@
 @import "./components/image-block/index";
 @import "./components/image-lightbox/index";
 @import "./components/inline-list/index";
+@import "./components/input/index";
 @import "./components/input-helper/index";
 @import "./components/input-label/index";
 @import "./components/lightbox/index";

packages/lumx-react/src/components/input/RawInputText.stories.tsx

@@ -0,0 +1,18 @@
+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/input/RawInputText',
+    component: RawInputText,
+    decorators: [withValueOnChange(), withWrapper({ style: { border: '1px dashed red' } })],
+};
+
+export const Default = {};
+
+export const WithPlaceholder = {
+    args: {
+        placeholder: 'Input placeholder',
+    },
+};

packages/lumx-react/src/components/input/RawInputText.test.tsx

@@ -0,0 +1,59 @@
+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, CLASSNAME } from './RawInputText';
+
+/**
+ * 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, 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: CLASSNAME,
+        forwardClassName: 'input',
+        forwardAttributes: 'input',
+        forwardRef: 'input',
+        applyTheme: {
+            affects: [{ element: 'input' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

packages/lumx-react/src/components/input/RawInputText.tsx

@@ -0,0 +1,63 @@
+import React, { SyntheticEvent, useRef } 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 { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+
+type NativeInputProps = Omit<React.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 display name.
+ */
+const COMPONENT_NAME = 'RawInputText';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * 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, ...forwardedProps } = props;
+    const textareaRef = useRef<HTMLInputElement>(null);
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (evt) => {
+        onChange?.(evt.target.value, evt.target.name, evt);
+    };
+
+    return (
+        <input
+            {...forwardedProps}
+            type={type}
+            ref={useMergeRefs(ref, textareaRef)}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
+            onChange={handleChange}
+            value={value}
+        />
+    );
+});
+RawInputText.displayName = COMPONENT_NAME;

packages/lumx-react/src/components/input/RawInputTextarea.stories.tsx

@@ -0,0 +1,22 @@
+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/input/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',
+    },
+};

packages/lumx-react/src/components/input/RawInputTextarea.test.tsx

@@ -0,0 +1,64 @@
+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, CLASSNAME, DEFAULT_PROPS } from './RawInputTextarea';
+
+/**
+ * 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, 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: CLASSNAME,
+        forwardClassName: 'textarea',
+        forwardAttributes: 'textarea',
+        forwardRef: 'textarea',
+        applyTheme: {
+            affects: [{ element: 'textarea' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

packages/lumx-react/src/components/input/RawInputTextarea.tsx

@@ -0,0 +1,76 @@
+import React, { SyntheticEvent, useRef } 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, getRootClassName } from '@lumx/core/js/utils';
+
+import { useFitRowsToContent } from './useFitRowsToContent';
+
+type NativeTextareaProps = React.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 display name.
+ */
+const COMPONENT_NAME = 'RawInputTextarea';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * 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,
+        onChange,
+        ...forwardedProps
+    } = props;
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const rows = useFitRowsToContent(minimumRows, textareaRef, value);
+
+    const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = React.useCallback(
+        (evt) => {
+            onChange?.(evt.target.value, evt.target.name, evt);
+        },
+        [onChange],
+    );
+
+    return (
+        <textarea
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
+            ref={useMergeRefs(ref, textareaRef)}
+            {...forwardedProps}
+            onChange={handleChange}
+            value={value}
+            rows={rows}
+        />
+    );
+});

packages/lumx-react/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export { RawInputText, type RawInputTextProps } from './RawInputText';
+export { RawInputTextarea, type RawInputTextareaProps } from './RawInputTextarea';