@bodynarf/react.components 0.1.0

package/src/components/dropdown/index.tsx

@@ -0,0 +1,141 @@
+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';
+
+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/dropdown/types.ts

@@ -0,0 +1,11 @@
+/** Dropdown item */
+export type SelectableItem = {
+    /** Unique item identifier */
+    id: string;
+
+    /** Item value */
+    value: string;
+
+    /** Displaying text */
+    displayValue: string;
+}

package/src/components/icon/icon.scss

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

@@ -0,0 +1,34 @@
+import './icon.scss';
+
+import { IconSize } from '../types';
+
+/** Icon component props */
+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

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

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

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

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

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

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

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