@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/src/components/radio-button/RadioButton.tsx

@@ -1,143 +0,0 @@
-import { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
-
-import classNames from 'classnames';
-
-import { InputHelper, InputLabel, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from '@lumx/react/hooks/useId';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-
-/**
- * Defines the props of the component.
- */
-export interface RadioButtonProps extends GenericProps, HasTheme, HasAriaDisabled {
-    /** Helper text. */
-    helper?: string;
-    /** Native input id property. */
-    id?: string;
-    /** Native input ref. */
-    inputRef?: React.Ref<HTMLInputElement>;
-    /** Whether it is checked or not. */
-    isChecked?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Label content. */
-    label?: ReactNode;
-    /** Native input name property. */
-    name?: string;
-    /** Native input value property. */
-    value?: string;
-    /** On change callback. */
-    onChange?(value?: string, name?: string, event?: SyntheticEvent): void;
-    /** optional props for input */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'RadioButton';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<RadioButtonProps> = {};
-
-/**
- * RadioButton component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const RadioButton = forwardRef<RadioButtonProps, HTMLDivElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        checked,
-        className,
-        helper,
-        id,
-        inputRef,
-        isChecked = checked,
-        label,
-        name,
-        onChange,
-        theme = defaultTheme,
-        value,
-        inputProps,
-        ...forwardedProps
-    } = otherProps;
-    const generatedInputId = useId();
-    const inputId = id || generatedInputId;
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (onChange) {
-            onChange(value, name, event);
-        }
-    };
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    isChecked,
-                    isDisabled: isAnyDisabled,
-                    isUnchecked: !isChecked,
-                    prefix: CLASSNAME,
-                    theme,
-                }),
-            )}
-        >
-            <div className={`${CLASSNAME}__input-wrapper`}>
-                <input
-                    ref={inputRef}
-                    className={`${CLASSNAME}__input-native`}
-                    {...disabledStateProps}
-                    id={inputId}
-                    type="radio"
-                    name={name}
-                    value={value}
-                    checked={isChecked}
-                    onChange={handleChange}
-                    readOnly={inputProps?.readOnly || isAnyDisabled}
-                    aria-describedby={helper ? `${inputId}-helper` : undefined}
-                    {...inputProps}
-                />
-
-                <div className={`${CLASSNAME}__input-placeholder`}>
-                    <div className={`${CLASSNAME}__input-background`} />
-                    <div className={`${CLASSNAME}__input-indicator`} />
-                </div>
-            </div>
-
-            <div className={`${CLASSNAME}__content`}>
-                {label && (
-                    <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>
-                        {label}
-                    </InputLabel>
-                )}
-                {helper && (
-                    <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>
-                        {helper}
-                    </InputHelper>
-                )}
-            </div>
-        </div>
-    );
-});
-RadioButton.displayName = COMPONENT_NAME;
-RadioButton.className = CLASSNAME;
-RadioButton.defaultProps = DEFAULT_PROPS;

package/src/components/radio-button/RadioGroup.stories.tsx

@@ -1,39 +0,0 @@
-import { RadioButton, RadioGroup } from '@lumx/react';
-import { useState } from 'react';
-
-export default { title: 'LumX components/radio-button/Radio Group' };
-
-export const Simple = () => {
-    const [value, onChange] = useState('lorem');
-
-    return (
-        <RadioGroup>
-            <RadioButton
-                isChecked={value === 'lorem'}
-                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
-                label="Radio button with help 1"
-                name="test2"
-                value="lorem"
-                onChange={onChange as any}
-            />
-
-            <RadioButton
-                isDisabled
-                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
-                label="Radio button with help 2"
-                name="test2"
-                value="ipsum"
-                onChange={onChange as any}
-            />
-
-            <RadioButton
-                isChecked={value === 'dolor'}
-                helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
-                label="Radio button with help 3"
-                name="test2"
-                value="dolor"
-                onChange={onChange as any}
-            />
-        </RadioGroup>
-    );
-};

package/src/components/radio-button/RadioGroup.test.tsx

@@ -1,29 +0,0 @@
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { RadioGroup, RadioGroupProps } from './RadioGroup';
-
-const CLASSNAME = RadioGroup.className as string;
-
-type SetupProps = Partial<RadioGroupProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: any = { ...propsOverride };
-    render(<RadioGroup {...props} />);
-
-    const radioGroup = queryByClassName(document.body, CLASSNAME);
-    return { props, radioGroup };
-};
-
-describe(`<${RadioGroup.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'radioGroup',
-        forwardAttributes: 'radioGroup',
-    });
-});

package/src/components/radio-button/RadioGroup.tsx

@@ -1,44 +0,0 @@
-import { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface RadioGroupProps extends GenericProps {
-    /** RadioButton elements */
-    children: ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'RadioGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * RadioGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            {children}
-        </div>
-    );
-});
-RadioGroup.displayName = COMPONENT_NAME;
-RadioGroup.className = CLASSNAME;

package/src/components/radio-button/index.ts

@@ -1,2 +0,0 @@
-export * from './RadioButton';
-export * from './RadioGroup';

package/src/components/select/Select.stories.tsx

@@ -1,385 +0,0 @@
-import { mdiBullhornOutline } from '@lumx/icons';
-import { List, ListItem, Select, Size, TextField } from '@lumx/react';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import noop from 'lodash/noop';
-import range from 'lodash/range';
-import { SyntheticEvent, useState } from 'react';
-import { SelectVariant } from './constants';
-
-export default {
-    title: 'LumX components/select/Select',
-    component: Select,
-};
-
-const CHOICES = ['First item', 'Second item', 'Third item'];
-
-export const SimpleSelect = () => {
-    const PLACEHOLDER = 'Select a value';
-    const LABEL = 'Select label';
-
-    const [value, setValue] = useState<string>('');
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    const selectItem = (item: string) => () => {
-        closeSelect();
-        setValue(item);
-    };
-
-    return (
-        <Select
-            style={{ width: '100%' }}
-            isOpen={isOpen}
-            value={value}
-            label={LABEL}
-            placeholder={PLACEHOLDER}
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-            icon={mdiBullhornOutline}
-        >
-            <List isClickable>
-                {CHOICES.length > 0
-                    ? CHOICES.map((choice) => (
-                          <ListItem
-                              isSelected={value === choice}
-                              key={choice}
-                              onItemSelected={selectItem(choice)}
-                              size={Size.tiny}
-                          >
-                              {choice}
-                          </ListItem>
-                      ))
-                    : [
-                          <ListItem key={0} size={Size.tiny}>
-                              No data
-                          </ListItem>,
-                      ]}
-            </List>
-        </Select>
-    );
-};
-
-export const SimpleSelectWithInfiniteScroll = () => {
-    const PLACEHOLDER = 'Select a value';
-    const LABEL = 'Select label';
-    const [items, setItems] = useState(CHOICES);
-    const [value, setValue] = useState<string>('');
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    const selectItem = (item: string) => () => {
-        closeSelect();
-        setValue(item);
-    };
-
-    const onInfinite = () => {
-        setItems([...items, ...range(10).map((i) => `item ${items.length + i}`)]);
-    };
-
-    return (
-        <Select
-            style={{ width: '100%' }}
-            isOpen={isOpen}
-            value={value}
-            label={LABEL}
-            placeholder={PLACEHOLDER}
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-            onInfiniteScroll={onInfinite}
-        >
-            <List isClickable>
-                {items.length > 0
-                    ? items.map((choice) => (
-                          <ListItem
-                              isSelected={value === choice}
-                              key={choice}
-                              onItemSelected={selectItem(choice)}
-                              size={Size.tiny}
-                          >
-                              {choice}
-                          </ListItem>
-                      ))
-                    : [
-                          <ListItem key={0} size={Size.tiny}>
-                              No data
-                          </ListItem>,
-                      ]}
-            </List>
-        </Select>
-    );
-};
-
-export const DisabledSelect = () => {
-    return (
-        <Select
-            isOpen={false}
-            value=""
-            label="My select"
-            placeholder="Placeholder"
-            onInputClick={noop}
-            onDropdownClose={noop}
-            isDisabled
-        >
-            <List isClickable>
-                <ListItem key={0} size={Size.tiny}>
-                    No data
-                </ListItem>
-            </List>
-        </Select>
-    );
-};
-
-export const SelectWithClearButton = () => {
-    const PLACEHOLDER = 'Select a value';
-    const LABEL = 'Select label';
-
-    const [value, setValue] = useState<string>('');
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    const clearSelected = (event: SyntheticEvent, newValue: string) => {
-        event.stopPropagation();
-        setValue(newValue);
-    };
-
-    const selectItem = (item: string) => () => {
-        closeSelect();
-        setValue(item);
-    };
-
-    return (
-        <Select
-            style={{ width: '100%' }}
-            isOpen={isOpen}
-            value={value}
-            onClear={clearSelected}
-            clearButtonProps={{ label: 'Clear' }}
-            label={LABEL}
-            placeholder={PLACEHOLDER}
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-        >
-            <List isClickable>
-                {CHOICES.length > 0
-                    ? CHOICES.map((choice) => (
-                          <ListItem
-                              isSelected={value === choice}
-                              key={choice}
-                              onItemSelected={selectItem(choice)}
-                              size={Size.tiny}
-                          >
-                              {choice}
-                          </ListItem>
-                      ))
-                    : [
-                          <ListItem key={0} size={Size.tiny}>
-                              No data
-                          </ListItem>,
-                      ]}
-            </List>
-        </Select>
-    );
-};
-
-export const SelectWithAnotherField = () => {
-    const PLACEHOLDER = 'Select a value';
-    const LABEL = 'Select label';
-
-    const [value, setValue] = useState<string>('');
-    const [blurred, setWasBlurred] = useState('');
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    const clearSelected = (event: SyntheticEvent, newValue: string) => {
-        event.stopPropagation();
-        setValue(newValue);
-    };
-
-    const selectItem = (item: string) => () => {
-        closeSelect();
-        setValue(item);
-    };
-
-    const onBlur = () => {
-        setWasBlurred('was blurred');
-    };
-
-    return (
-        <>
-            <TextField value="myvalue" label="I am the label" placeholder="ex: A value" onChange={noop} />
-            <Select
-                style={{ width: '100%' }}
-                isOpen={isOpen}
-                value={value}
-                onClear={clearSelected}
-                clearButtonProps={{ label: 'Clear' }}
-                label={LABEL}
-                placeholder={PLACEHOLDER}
-                onInputClick={toggleSelect}
-                onDropdownClose={closeSelect}
-                onBlur={onBlur}
-            >
-                <List isClickable>
-                    {CHOICES.length > 0
-                        ? CHOICES.map((choice) => (
-                              <ListItem
-                                  isSelected={value === choice}
-                                  key={choice}
-                                  onItemSelected={selectItem(choice)}
-                                  size={Size.tiny}
-                              >
-                                  {choice}
-                              </ListItem>
-                          ))
-                        : [
-                              <ListItem key={0} size={Size.tiny}>
-                                  No data
-                              </ListItem>,
-                          ]}
-                </List>
-            </Select>
-            {blurred}
-        </>
-    );
-};
-
-export const SelectWithNoData = () => {
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(true);
-
-    return (
-        <Select
-            isOpen={isOpen}
-            value=""
-            label="My select"
-            placeholder="Placeholder"
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-        >
-            <List isClickable>
-                <ListItem key={0} size={Size.tiny}>
-                    No data
-                </ListItem>
-            </List>
-        </Select>
-    );
-};
-
-export const SelectWithHelper = () => {
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    return (
-        <Select
-            isOpen={isOpen}
-            value=""
-            label="Country"
-            placeholder="Your country"
-            helper="This is used in analytics"
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-        >
-            <List isClickable>
-                {CHOICES.map((choice) => (
-                    <ListItem key={choice} size={Size.tiny}>
-                        {choice}
-                    </ListItem>
-                ))}
-            </List>
-        </Select>
-    );
-};
-
-export const SelectWithError = () => {
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    return (
-        <Select
-            isOpen={isOpen}
-            value=""
-            label="Country"
-            placeholder="Your country"
-            helper="This is used in analytics"
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-            hasError
-            error="Please select something :)"
-        >
-            <List isClickable>
-                {CHOICES.map((choice) => (
-                    <ListItem key={choice} size={Size.tiny}>
-                        {choice}
-                    </ListItem>
-                ))}
-            </List>
-        </Select>
-    );
-};
-
-export const SelectSuccess = () => {
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    return (
-        <Select
-            isOpen={isOpen}
-            value=""
-            label="Country"
-            placeholder="Your country"
-            helper="This is used in analytics"
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-            isValid
-        >
-            <List isClickable>
-                {CHOICES.map((choice) => (
-                    <ListItem key={choice} size={Size.tiny}>
-                        {choice}
-                    </ListItem>
-                ))}
-            </List>
-        </Select>
-    );
-};
-
-export const SelectWithChipVariant = () => {
-    const PLACEHOLDER = 'Select a value';
-    const LABEL = 'Select label';
-
-    const [value, setValue] = useState<string>('');
-    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
-
-    const selectItem = (item: string) => () => {
-        closeSelect();
-        setValue(item);
-    };
-
-    const onClear = () => setValue('');
-
-    return (
-        <Select
-            style={{ width: '100%' }}
-            isOpen={isOpen}
-            value={value}
-            label={LABEL}
-            placeholder={PLACEHOLDER}
-            onInputClick={toggleSelect}
-            onDropdownClose={closeSelect}
-            variant={SelectVariant.chip}
-            onClear={onClear}
-            clearButtonProps={{ label: 'Clear' }}
-        >
-            <List isClickable>
-                {CHOICES.length > 0
-                    ? CHOICES.map((choice) => (
-                          <ListItem
-                              isSelected={value === choice}
-                              key={choice}
-                              onItemSelected={selectItem(choice)}
-                              size={Size.tiny}
-                          >
-                              {choice}
-                          </ListItem>
-                      ))
-                    : [
-                          <ListItem key={0} size={Size.tiny}>
-                              No data
-                          </ListItem>,
-                      ]}
-            </List>
-        </Select>
-    );
-};