@bodynarf/react.components 1.1.0 → 1.1.5

package/src/components/dropdown/index.tsx

@@ -1,141 +0,0 @@
-import { MouseEvent, useCallback, useId, useState } from 'react';
-
-import './dropdown.scss';
-
-import { isNullOrEmpty, isNullOrUndefined } from '@bodynarf/utils/common';
-
-import { useComponentOutsideClick } from '@app/hooks/useComponentOutsideClick';
-
-import { SelectableItem } from './types';
-import { BaseElementProps } from '../types';
-
-import DropdownItem from './components/dropdownItem/dropdownItem';
-import DropdownLabel from './components/dropdownLabel/dropdownLabel';
-
-export type DropdownProps = BaseElementProps & {
-    /** Items which can be selected */
-    items: Array<SelectableItem>;
-
-    /**
-     * Selected value.
-     * Must be stored outside
-    */
-    value?: SelectableItem;
-
-    /**
-     * Action to update selected value,
-     *  which stored outside
-     */
-    onSelect: (item?: SelectableItem) => void;
-
-    /** 
-     * Caption.
-     * Appears only no element selected
-     */
-    caption: string;
-
-    /** Hide dropdown list when its opened and user click outside */
-    hideOnOuterClick: boolean;
-
-    /** Can user deselect */
-    deselectable?: boolean;
-}
-
-/** Dropdown component */
-const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick }: DropdownProps): JSX.Element => {
-    const id = useId();
-
-    const [isListVisible, setListVisible] = useState<boolean>(false);
-
-    const onItemClick = useCallback(
-        (event: React.MouseEvent<HTMLLIElement>) => {
-            const target = event.target as HTMLLIElement;
-
-            if (isNullOrUndefined(target)) {
-                return;
-            }
-
-            const dataValue = target.dataset['dropdownItemValue'];
-
-            if (isNullOrEmpty(dataValue)) {
-                return;
-            }
-
-            const item = items.find(x => x.value === dataValue);
-
-            if (isNullOrUndefined(item)) {
-                return;
-            }
-
-            if (value === item) {
-                setListVisible(false);
-                return;
-            }
-
-            onSelect(item);
-            setListVisible(false);
-        }, [setListVisible, value, items, onSelect]);
-
-    const onLabelClick = useCallback(
-        (event: MouseEvent<HTMLLabelElement>): void => {
-            const target = event.target as HTMLElement;
-
-            if (isNullOrUndefined(target)) {
-                return;
-            }
-
-            if (target.classList.contains("bi-plus-lg")) {
-                onSelect(undefined);
-            } else {
-                setListVisible(state => !state);
-            }
-        }, [onSelect, setListVisible]);
-
-    useComponentOutsideClick(
-        `[data-dropdown-id="${id}"]`, isListVisible,
-        () => setListVisible(false),
-        hideOnOuterClick,
-    );
-
-    const classNames: string = [
-        "app-dropdown",
-        isListVisible ? "is-active" : "",
-        className,
-        "dropdown"
-    ]
-        .filter(x => !isNullOrEmpty(x))
-        .join(" ");
-
-    return (
-        <div
-            key={id}
-            className={classNames}
-            data-dropdown-id={id}
-        >
-            <DropdownLabel
-                caption={caption}
-                deselectable={deselectable === true}
-                selectedItem={value}
-                onClick={onLabelClick}
-            />
-            <div className="dropdown-menu">
-                {items.length > 0
-                    ? <ul className="dropdown-content">
-                        {items.map(item =>
-                            <DropdownItem
-                                key={item.id}
-                                item={item}
-                                selected={value?.value === item.value}
-                                onClick={onItemClick}
-                            />
-                        )}
-                    </ul>
-                    : <span className="dropdown-content dropdown-item">No items found</span>
-                }
-            </div>
-        </div>
-    );
-};
-
-export default Dropdown;
-

package/src/components/icon/icon.scss

@@ -1,18 +0,0 @@
-.app-icon {
-    transition: 0.15s ease-in-out color;
-    font-size: 1.3rem;
-
-    &--small {
-        font-size: 1rem;
-    }
-    &--large {
-        font-size: 2rem;
-    }
-
-    &--right {
-        margin-left: 0.5rem;
-    }
-    &--left {
-        margin-right: 0.5rem;
-    }
-}

package/src/components/icon/index.tsx

@@ -1,34 +0,0 @@
-import './icon.scss';
-
-import { IconSize } from '../types';
-
-/** Icon component props */
-export type IconProps = {
-    /**
-     * Class name for icon.
-     * Used to display icon from bootstrap-icons
-    */
-    className: string;
-
-    /** Icon size */
-    size?: IconSize;
-}
-
-const sizeToClassMap: Map<IconSize, string> = new Map([
-    ['small', ' app-icon--smal'],
-    ['medium', ''],
-    ['large', ' app-icon--large']
-]);
-
-/**
- * Icon component. Based on bootstrap icons
- */
-export default function Icon(props: IconProps): JSX.Element {
-    const size: IconSize = props.size || 'medium';
-
-    const className = `app-icon bi bi-${props.className}${sizeToClassMap.get(size)}`;
-
-    return (
-        <i className={className}></i>
-    );
-}

package/src/components/primitives/date/index.tsx

@@ -1,103 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-
-import { generateGuid } from '@bodynarf/utils/guid';
-import { getClassName } from '@bodynarf/utils/component';
-import { isStringEmpty } from '@bodynarf/utils/common';
-
-import { BaseInputElementProps, InputLabel } from '../types';
-
-/** Date input conponent props type */
-export type DateProps = Omit<BaseInputElementProps<Date | undefined>, 'placeholder'> & {
-    /** Label configuration */
-    label: InputLabel;
-}
-
-/** Date input component */
-const DatePicker = (props: DateProps): JSX.Element => {
-    const onValueChange = useCallback(
-        (event: ChangeEvent<HTMLInputElement>) =>
-            props.onValueChange(
-                isStringEmpty(event.target.value)
-                    ? undefined
-                    : new Date(event.target.value)
-            ),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [props.onValueChange]
-    );
-
-    const id = props.name || generateGuid();
-
-    const size = `is-${(props.size || 'normal')}`;
-
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
-        "input",
-    ]);
-
-    const inputContainerClassName = getClassName([
-        "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
-    ]);
-
-    const label = props.label;
-    const defaultValue = props.defaultValue?.toISOString().split("T")[0];
-
-    if (label.horizontal === true) {
-        return (
-            <div className="app-input field is-horizontal">
-                <div className={`field-label ${size}`}>
-                    <label
-                        className="label"
-                        htmlFor={id}
-                    >
-                        {label.caption}
-                    </label>
-                </div>
-                <div className="field-body">
-                    <div className="field">
-                        <div className={inputContainerClassName}>
-                            <input
-                                type="date"
-                                className={className}
-                                readOnly={props.readonly}
-                                disabled={props.disabled}
-                                defaultValue={defaultValue}
-                                onChange={onValueChange}
-                                name={id}
-                                id={id}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="app-input field">
-            <label
-                className={`label ${size}`}
-                htmlFor={id}
-            >
-                {label.caption}
-            </label>
-            <div className={inputContainerClassName}>
-                <input
-                    type="date"
-                    className={className}
-                    readOnly={props.readonly}
-                    disabled={props.disabled}
-                    defaultValue={props.defaultValue?.toLocaleDateString()}
-                    onChange={onValueChange}
-                    name={id}
-                    id={id}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default DatePicker;

package/src/components/primitives/multiline/components/multilineWithLabel/index.tsx

@@ -1,93 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-
-import { generateGuid } from '@bodynarf/utils/guid';
-import { getClassName } from '@bodynarf/utils/component';
-
-import { MultilineProps } from '../..';
-
-/** Multiline textual input component with describing label */
-const MultilineWithLabel = (props: MultilineProps): JSX.Element => {
-    const onValueChange = useCallback(
-        (event: ChangeEvent<HTMLTextAreaElement>) => props.onValueChange(event.target.value),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [props.onValueChange]
-    );
-
-    const id = props.name || generateGuid();
-
-    const size = `is-${(props.size || 'normal')}`;
-
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
-        "textarea",
-        props.fixed === true ? 'has-fixed-size': '',
-    ]);
-
-    const inputContainerClassName = getClassName([
-        "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
-    ]);
-
-    const label = props.label!;
-
-    if (label.horizontal === true) {
-        return (
-            <div className="app-input field is-horizontal">
-                <div className={`field-label ${size}`}>
-                    <label
-                        className="label"
-                        htmlFor={id}
-                    >
-                        {label.caption}
-                    </label>
-                </div>
-                <div className="field-body">
-                    <div className="field">
-                        <div className={inputContainerClassName}>
-                            <textarea
-                                className={className}
-                                placeholder={props.placeholder}
-                                readOnly={props.readonly}
-                                disabled={props.disabled}
-                                defaultValue={props.defaultValue}
-                                onChange={onValueChange}
-                                name={id}
-                                id={id}
-                                rows={props.rows}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="app-input field">
-            <label
-                className={`label ${size}`}
-                htmlFor={id}
-            >
-                {label.caption}
-            </label>
-            <div className={inputContainerClassName}>
-                <textarea
-                    className={className}
-                    placeholder={props.placeholder}
-                    readOnly={props.readonly}
-                    disabled={props.disabled}
-                    defaultValue={props.defaultValue}
-                    onChange={onValueChange}
-                    name={id}
-                    id={id}
-                    rows={props.rows}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default MultilineWithLabel;

package/src/components/primitives/multiline/components/multilineWithoutLabel/index.tsx

@@ -1,51 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-
-import { generateGuid } from '@bodynarf/utils/guid';
-import { getClassName } from '@bodynarf/utils/component';
-
-import { MultilineProps } from '../..';
-
-/** Multiline textual input component without describing label*/
-const MultilineWithoutLabel = (props: MultilineProps): JSX.Element => {
-    const onValueChange = useCallback(
-        (event: ChangeEvent<HTMLTextAreaElement>) => props.onValueChange(event.target.value),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [props.onValueChange]
-    );
-
-    const id = props.name || generateGuid();
-
-    const size = `is-${(props.size || 'normal')}`;
-
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
-        "textarea",
-        props.fixed === true ? 'has-fixed-size': '',
-    ]);
-
-    const inputContainerClassName = getClassName([
-        "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
-    ]);
-
-    return (
-        <div className="field">
-            <div className={inputContainerClassName}>
-                <textarea
-                    className={className}
-                    placeholder={props.placeholder}
-                    defaultValue={props.defaultValue}
-                    onChange={onValueChange}
-                    id={id}
-                    name={id}
-                    rows={props.rows}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default MultilineWithoutLabel;

package/src/components/primitives/multiline/index.tsx

@@ -1,28 +0,0 @@
-import { isNullOrUndefined } from '@bodynarf/utils/common';
-
-import { BaseInputElementProps } from '../types';
-
-import MultilineWithoutLabel from './components/multilineWithoutLabel';
-import MultilineWithLabel from './components/multilineWithLabel';
-
-/** Multiline textual input conponent props type */
-export type MultilineProps = BaseInputElementProps<string> & {
-    /** Is input should be resizable */
-    fixed?: boolean;
-
-    /** Number of initial rows count */
-    rows?: number;
-};
-
-/** Multiline textual input component */
-const Multiline = (props: MultilineProps): JSX.Element => {
-    if (isNullOrUndefined(props.label)) {
-        return (<MultilineWithoutLabel {...props} />);
-    }
-    else {
-        return (<MultilineWithLabel {...props} />);
-    }
-
-};
-
-export default Multiline;

package/src/components/primitives/text/components/textWithLabel/index.tsx

@@ -1,92 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-
-import { generateGuid } from '@bodynarf/utils/guid';
-import { getClassName } from '@bodynarf/utils/component';
-
-import { TextProps } from '../..';
-
-/** Textual input with describing label */
-const TextWithLabel = (props: TextProps): JSX.Element => {
-    const onValueChange = useCallback(
-        (event: ChangeEvent<HTMLInputElement>) => props.onValueChange(event.target.value),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [props.onValueChange]
-    );
-
-    const id = props.name || generateGuid();
-
-    const size = `is-${(props.size || 'normal')}`;
-
-    const className = getClassName([
-        props.className,
-        size,
-        props.rounded === true ? 'is-rounded' : '',
-        "input",
-    ]);
-
-    const inputContainerClassName = getClassName([
-        "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
-    ]);
-
-    const label = props.label!;
-
-    if (label.horizontal === true) {
-        return (
-            <div className="app-input field is-horizontal">
-                <div className={`field-label ${size}`}>
-                    <label
-                        className="label"
-                        htmlFor={id}
-                    >
-                        {label.caption}
-                    </label>
-                </div>
-                <div className="field-body">
-                    <div className="field">
-                        <div className={inputContainerClassName}>
-                            <input
-                                className={className}
-                                type="text"
-                                placeholder={props.placeholder}
-                                readOnly={props.readonly}
-                                disabled={props.disabled}
-                                defaultValue={props.defaultValue}
-                                onChange={onValueChange}
-                                name={id}
-                                id={id}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="app-input field">
-            <label
-                className={`label ${size}`}
-                htmlFor={id}
-            >
-                {label.caption}
-            </label>
-            <div className={inputContainerClassName}>
-                <input
-                    className={className}
-                    type="text"
-                    placeholder={props.placeholder}
-                    readOnly={props.readonly}
-                    disabled={props.disabled}
-                    defaultValue={props.defaultValue}
-                    onChange={onValueChange}
-                    name={id}
-                    id={id}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default TextWithLabel;

package/src/components/primitives/text/components/textWithoutLabel/index.tsx

@@ -1,49 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-
-import { generateGuid } from '@bodynarf/utils/guid';
-import { getClassName } from '@bodynarf/utils/component';
-
-import { TextProps } from '../..';
-
-/** Textual input without describing label */
-const TextWithoutLabel = (props: TextProps): JSX.Element => {
-    const onValueChange = useCallback(
-        (event: ChangeEvent<HTMLInputElement>) => props.onValueChange(event.target.value),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [props.onValueChange]
-    );
-
-    const className = getClassName([
-        props.className,
-        `is-${(props.size || 'normal')}`,
-        props.rounded === true ? 'is-rounded' : '',
-        "input",
-    ]);
-
-    const containerClassName = getClassName([
-        "app-input",
-        "control",
-        props.loading === true ? 'is-loading' : '',
-        (props.style || 'default') === 'default' ? '' : `is-${props.style}`
-    ]);
-
-    const id = props.name || generateGuid();
-
-    return (
-        <div className={containerClassName}>
-            <input
-                className={className}
-                type="text"
-                placeholder={props.placeholder}
-                readOnly={props.readonly}
-                disabled={props.disabled}
-                defaultValue={props.defaultValue}
-                onChange={onValueChange}
-                name={id}
-                id={id}
-            />
-        </div>
-    );
-};
-
-export default TextWithoutLabel;

package/src/components/primitives/text/index.tsx

@@ -1,21 +0,0 @@
-import { isNullOrUndefined } from '@bodynarf/utils/common';
-
-import { BaseInputElementProps } from '../types';
-
-import TextWithLabel from './components/textWithLabel';
-import TextWithoutLabel from './components/textWithoutLabel';
-
-/** Text input conponent props type */
-export type TextProps = BaseInputElementProps<string>;
-
-/** Textual input component */
-const Text = (props: TextProps): JSX.Element => {
-    if (isNullOrUndefined(props.label)) {
-        return (<TextWithoutLabel {...props}/>);
-    }
-    else {
-        return (<TextWithLabel {...props}/>);
-    }
-};
-
-export default Text;